@import "https://fonts.googleapis.com/css2?family=Noto+Music&display=swap";@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@200..800&display=swap";html,body,#root{height:100%}*,:before,:after{box-sizing:border-box;-webkit-user-select:none;user-select:none}input,textarea,select,option,[contenteditable]:not([contenteditable=false]),[data-user-select=text],[data-user-select=all]{-webkit-user-select:text;user-select:text}[data-user-select=all]{-webkit-user-select:all;user-select:all}body{margin:0;overflow:hidden}:root{--ui-scale:1;--bg:#f5f3fb;--panel:#fffffff0;--ink:#394052;--muted:#808697;--line:#848da84d;--accent:#dde1f0;--accent-strong:#6d7791;--pill:linear-gradient(180deg, #fdfdff, #f0f3f9);--pill-shadow:inset 0 1px 0 #ffffffd1, inset 0 -1px 0 #919ab51a, 0 1px 2px #4c58790b, 0 4px 10px #4c58790b;--radius-small:2px;--radius-medium:4px;--radius-large:6px}body{color:var(--ink);background:radial-gradient(circle at 10% 10%,#bec8e824,#0000 35%),linear-gradient(160deg,#fcfcff,#f2f4f9 48%,#eef0f6);font-family:Noto Sans Display,sans-serif}.metronome-page{height:100svh;padding:calc(16px * var(--ui-scale)) calc(20px * var(--ui-scale)) calc(20px * var(--ui-scale));gap:calc(14px * var(--ui-scale));grid-template-rows:auto minmax(0,1fr);display:grid}.metronome-page--focus{gap:calc(10px * var(--ui-scale))}.metronome-page--collapsed{padding-top:calc(8px * var(--ui-scale));padding-bottom:calc(8px * var(--ui-scale));gap:calc(8px * var(--ui-scale))}.section-title{font-family:Noto Sans Display,sans-serif;font-weight:480;font-size:calc(25px * var(--ui-scale));color:var(--ink)}.control-section{justify-items:center;gap:calc(12px * var(--ui-scale));width:100%;display:grid;position:relative}.control-section:not(:last-child){padding-bottom:calc(26px * var(--ui-scale))}.control-section+.control-section{padding-top:calc(26px * var(--ui-scale))}.control-section+.control-section:before{content:"";top:0;left:calc(30px * var(--ui-scale));right:calc(30px * var(--ui-scale));background:var(--line);height:1px;position:absolute}.content-stack--collapsed>.control-section:not(:last-child){padding-bottom:calc(8px * var(--ui-scale))}.content-stack--collapsed>.control-section+.control-section{padding-top:calc(8px * var(--ui-scale))}.transport-bar{width:100%;min-height:calc(44px * var(--ui-scale));padding:calc(4px * var(--ui-scale)) 0 calc(10px * var(--ui-scale));display:grid;position:relative}.transport-bar__content{align-items:center;column-gap:calc(32px * var(--ui-scale));grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);width:100%;display:grid}.transport-bar__slot{pointer-events:auto;min-width:0}.transport-bar__slot--left{justify-self:start}.transport-bar__slot--center{justify-self:center;transition:opacity .16s}.transport-bar__slot--right{justify-self:end}.transport-bar__slot--dimmed{opacity:.5}.transport-bar__right-controls{justify-content:flex-end;align-items:center;gap:calc(32px * var(--ui-scale));display:inline-flex}.transport-bar__secondary-controls--hidden{visibility:hidden;pointer-events:none}.metronome-page--collapsed .transport-bar{padding-bottom:calc(8px * var(--ui-scale))}.content-surface{min-height:0;padding:calc(4px * var(--ui-scale)) 0 calc(12px * var(--ui-scale));scrollbar-gutter:auto;align-content:start;justify-items:center;display:grid;overflow:auto}.content-surface--collapsed{padding-top:0;padding-bottom:calc(8px * var(--ui-scale))}.content-surface--focus{align-content:center;padding-top:0;padding-bottom:0}.content-stack{align-content:start;justify-items:center;width:max-content;max-width:100%;display:grid}.content-stack--focus{width:min(100%, calc(1120px * var(--ui-scale)));align-self:center}.content-stack>.control-section{width:100%;max-width:100%}h2{font-family:Noto Sans Display,sans-serif;font-size:calc(25px * var(--ui-scale));text-align:center;letter-spacing:-.03em;color:var(--ink);margin:0;font-weight:480}.section-value{font-weight:400;font-size:calc(32px * var(--ui-scale));color:var(--accent-strong);margin-left:calc(12px * var(--ui-scale))}.section-context{color:#9097aa;font-size:.56em}.rate-section-heading{width:100%;min-height:calc(36px * var(--ui-scale));grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;display:grid}.rate-section-heading__side{align-items:center;min-width:0;display:flex}.rate-section-heading__side--start{padding-right:calc(16px * var(--ui-scale));justify-content:flex-end}.rate-section-heading__center{justify-self:center;position:relative}.rate-section-heading__anchor,.rate-section-heading__title{white-space:nowrap;align-items:baseline;display:inline-flex}.rate-section-heading__anchor{visibility:hidden}.rate-section-heading__title{position:absolute;inset:0 auto auto 0}.rate-section-heading__secondary{margin-left:calc(6px * var(--ui-scale))}.section-heading{justify-content:center;align-items:center;gap:calc(10px * var(--ui-scale));width:auto;margin-bottom:calc(2px * var(--ui-scale));align-self:center;display:flex}.rate-grid{gap:calc(16px * var(--ui-scale));justify-items:center;display:grid}.rate-presets{gap:calc(7px * var(--ui-scale));display:grid}.row{gap:calc(7px * var(--ui-scale));flex-wrap:nowrap;width:100%;display:flex}.row--compact{display:none}.row--collapsed{gap:calc(4px * var(--ui-scale))}.rate-row--adjust{margin-top:calc(2px * var(--ui-scale));align-items:center;width:auto}.control-button{border:1px solid var(--line);background:var(--pill);color:var(--ink);border-radius:var(--radius-medium);padding:calc(3px * var(--ui-scale)) 0;min-width:calc(38px * var(--ui-scale));min-height:calc(27px * var(--ui-scale));font-family:inherit;font-size:calc(12.1px * var(--ui-scale));cursor:pointer;box-shadow:var(--pill-shadow);letter-spacing:-.01em;font-weight:540}.control-button:disabled{opacity:.45;cursor:default}.control-button:not(:disabled):focus-visible{border-color:#6d779180;outline:none;box-shadow:inset 0 1px #ffffffd1,0 0 0 2px #dde1f0eb,0 4px 10px #4c587914}.control-button--adjust{min-width:calc(50px * var(--ui-scale))}.control-button--ghost{color:#667089;opacity:.5;background:linear-gradient(#ffffff6b,#f0f3f92e);border-color:#6d779147;box-shadow:inset 0 1px #ffffffb3,inset 0 -1px #919ab50d}.control-button--ghost:not(:disabled):hover,.control-button--ghost:not(:disabled):focus-visible{color:#475069;opacity:.64;background:linear-gradient(#f5f8fde6,#e4eaf5b8);border-color:#6d77916b;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #919ab514,0 3px 10px #4c58790d}.control-button--adjust.control-button--ghost{min-width:calc(42px * var(--ui-scale));min-height:calc(23px * var(--ui-scale));padding:calc(1px * var(--ui-scale)) 0;font-size:calc(11.2px * var(--ui-scale));letter-spacing:.01em;border-radius:999px;font-weight:500}.control-button--active{color:#2f3648;background:linear-gradient(#d8dff0,#ccd5ea);border-color:#6d77916b;box-shadow:inset 0 1px #ffffff8c,0 1px 2px #4c58790b,0 5px 12px #4c58790d}.control-button[data-custom-value-placeholder=true]{cursor:default;border-style:dashed}.control-button--collapsed-placeholder{min-width:calc(24px * var(--ui-scale));padding-inline:0}.rate-gap{width:calc(24px * var(--ui-scale));flex:0 0 calc(24px * var(--ui-scale))}.transport-button{width:calc(52px * var(--ui-scale));min-width:calc(52px * var(--ui-scale));min-height:calc(38px * var(--ui-scale));justify-content:center;align-items:center;padding:0;display:inline-flex}.transport-icon{width:calc(22px * var(--ui-scale));height:calc(22px * var(--ui-scale));font-size:calc(22px * var(--ui-scale));justify-content:center;align-items:center;line-height:1;display:inline-flex}.transport-icon svg,.section-edge-button svg{flex:none;width:1em;height:1em;display:block}.transport-icon--ui-mode{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale));font-size:calc(18px * var(--ui-scale))}.section-edge-button{min-width:calc(32px * var(--ui-scale));min-height:calc(32px * var(--ui-scale));border-radius:var(--radius-large);color:#697287;opacity:.5;box-shadow:none;font-size:calc(21px * var(--ui-scale));background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.section-edge-button:disabled{cursor:default}.section-edge-button:not(:disabled):not(.section-edge-button--danger):hover,.section-edge-button:not(:disabled):not(.section-edge-button--danger):focus-visible{color:#4d576d;opacity:.64;box-shadow:none;background:0 0;border-color:#0000}.section-edge-button:focus-visible{outline:none}.speed-reset-button svg{transform-origin:50%;transform:scale(1.1)}.segmented-control{gap:calc(8px * var(--ui-scale));grid-template-columns:repeat(2,max-content);display:inline-grid}.segmented-button{padding-inline:calc(14px * var(--ui-scale))}.segmented-control--joined{width:calc(198px * var(--ui-scale));border:1px solid var(--line);border-radius:var(--radius-medium);box-shadow:var(--pill-shadow);background:var(--pill);grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:hidden}.segmented-control--joined .segmented-button{min-height:calc(36px * var(--ui-scale));box-shadow:none;border:0;border-right:1px solid var(--line);min-width:0;padding-inline:calc(8px * var(--ui-scale));font-size:calc(13.2px * var(--ui-scale));background:0 0;border-radius:0;font-weight:540}.segmented-control--joined .segmented-button.control-button--active{background:linear-gradient(#d8dff0,#ccd5ea);box-shadow:inset 0 0 0 1px #6d77916b,inset 0 1px #ffffff8c}.segmented-control--joined .segmented-button:last-child{border-right:0}.segmented-control--ui-mode{width:calc(156px * var(--ui-scale));grid-template-columns:repeat(3,minmax(0,1fr))}.segmented-control--ui-mode .segmented-button{min-height:calc(36px * var(--ui-scale));min-width:0;padding-inline:0}.segmented-control--ui-mode .segmented-button svg{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale))}.segmented-button--icon-only{padding-inline:0}@media (width<=743px){.row{grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.row--full{display:none}.row--compact{display:grid}.row--collapsed{grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.rate-row--adjust{grid-template-columns:repeat(11,minmax(0,1fr))}.rate-gap{flex:initial;width:auto}.control-button{min-width:0}.segmented-control{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,320px)}.segmented-control--ui-mode{grid-template-columns:repeat(3,minmax(0,1fr));width:156px}.metronome-page{padding-inline:14px}.transport-bar{justify-content:center}.segmented-control--joined{width:100%}.segmented-control--ui-mode{width:156px}.segmented-control--joined .segmented-button{min-width:0}.content-surface{padding-inline:0}}.mini-modal-backdrop{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#16151dad;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.mini-modal{box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-large);filter:drop-shadow(0 10px 16px #16151d52);background:#fff;justify-items:center;gap:14px;width:fit-content;max-width:min(100vw - 48px,720px);padding:18px;display:grid;box-shadow:0 18px 45px #2c354e24,inset 0 4px 12px #ffffff6b}.mini-modal__header{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.mini-modal__header h3{margin:0;font-size:18px}.mini-modal .base-stack,.mini-modal .subdivision-stack,.mini-modal .segmented-control{width:max-content;max-width:100%}.mini-modal__close{border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-medium);cursor:pointer;background:#fff;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:18px;line-height:1;display:inline-flex}.base-stack{gap:calc(8px * var(--ui-scale));justify-items:center;display:grid}.base-grid{gap:calc(8px * var(--ui-scale));grid-template-columns:repeat(7,minmax(0,max-content));display:grid}.base-grid--modifiers{grid-template-columns:repeat(3, minmax(calc(120px * var(--ui-scale)), max-content))}.base-button{padding:calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));min-width:calc(56px * var(--ui-scale));place-items:center;display:grid}.base-symbol{font-family:Noto Music,Bravura Text,Petaluma Script,serif;font-size:calc(20px * var(--ui-scale));line-height:1}.base-inline-symbol{font-family:Noto Music,Bravura Text,Petaluma Script,serif;font-size:calc(18px * var(--ui-scale));align-items:baseline;gap:.16em;line-height:1;display:inline-flex}.base-inline-modifier{font-size:.75em}.control-section[aria-label=Rhythms]{gap:calc(10px * var(--ui-scale));min-height:0}.rhythms-section{width:100%}.rhythms-section__heading{width:min(100%, calc(1148px * var(--ui-scale)));min-height:calc(36px * var(--ui-scale));grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin:0 auto;display:grid}.rhythms-section__heading-side{align-items:center;min-width:0;display:flex}.rhythms-section__heading-side:first-child{padding-right:calc(16px * var(--ui-scale));justify-content:flex-end}.rhythms-section__heading-side--end{justify-content:flex-start;gap:calc(16px * var(--ui-scale));padding-left:calc(16px * var(--ui-scale))}.rhythms-section__heading h2{justify-self:center}.rhythms-section__mix-summary{align-items:center;gap:calc(4px * var(--ui-scale));display:inline-flex}.rhythms-header-button--add svg{transform-origin:50%;transform:scale(.7)}.rhythms-header-button--delete svg{transform-origin:50%;transform:scale(.8)}.rhythms-section--focus{gap:0}.rhythm-table{grid-template-columns:calc(30px * var(--ui-scale)) minmax(calc(56px * var(--ui-scale)), calc(56px * var(--ui-scale))) minmax(calc(56px * var(--ui-scale)), calc(56px * var(--ui-scale))) minmax(calc(56px * var(--ui-scale)), calc(56px * var(--ui-scale))) minmax(calc(88px * var(--ui-scale)), calc(88px * var(--ui-scale))) minmax(calc(260px * var(--ui-scale)), 1fr) max-content max-content;width:min(100%, calc(1148px * var(--ui-scale)));gap:calc(4px * var(--ui-scale));padding:calc(4px * var(--ui-scale));border:1px solid var(--line);border-radius:var(--radius-large);background:#ffffffc7;display:grid;overflow:hidden;box-shadow:0 8px 18px #4c587909}.rhythm-table__head,.rhythm-table__row{grid-template-columns:subgrid;gap:calc(7px * var(--ui-scale));padding-inline:calc(3px * var(--ui-scale));grid-column:1/-1;display:grid}.rhythm-table__head>div,.rhythm-cell{padding:calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale));min-height:calc(30px * var(--ui-scale));align-items:center;display:flex}.rhythm-table__head{padding-top:calc(3px * var(--ui-scale))}.rhythm-table__head>div{color:var(--muted);font-size:calc(10px * var(--ui-scale));text-transform:uppercase;letter-spacing:.12em;padding-top:calc(3px * var(--ui-scale));padding-bottom:calc(4px * var(--ui-scale));background:0 0;justify-content:center;min-height:0;font-weight:600}.rhythm-table__head>div:first-child{padding-inline:0}.rhythm-table__row{padding-bottom:calc(3px * var(--ui-scale));border-radius:calc(var(--radius-medium) + 2px);background:#ffffff70;transition:background .14s,box-shadow .14s,opacity .14s;position:relative}.rhythm-table__row:before{content:"";left:calc(10px * var(--ui-scale));right:calc(10px * var(--ui-scale));height:calc(2px * var(--ui-scale));opacity:0;pointer-events:none;background:linear-gradient(90deg,#6d779100,#6d779194 16% 84%,#6d779100);border-radius:999px;position:absolute}.rhythm-table__row--drop-before:before{top:calc(-3px * var(--ui-scale));opacity:1}.rhythm-table__row--drop-after:before{bottom:calc(-3px * var(--ui-scale));opacity:1}.rhythm-table__row--dragging{opacity:.58;background:#dde1f085}.rhythm-table__row--playing{background:#eff4ffb8}.rhythm-table__row--soloed{background:linear-gradient(#fffaeceb,#f8f0d6ad);box-shadow:inset 0 0 0 1px #b0934a2e}.rhythm-table__row--muted{background:linear-gradient(#fbf3f3eb,#f4e4e4c2);box-shadow:inset 0 0 0 1px #aa71711f}.rhythm-table__row--suppressed{opacity:.62}.rhythm-table__row--soloed.rhythm-table__row--muted{background:linear-gradient(#fff9ebbd,#f7e7e7d6),linear-gradient(90deg,#efdb9c24,#d37d7d1a)}.rhythm-table__row--playing.rhythm-table__row--soloed{background:linear-gradient(#fffae8f5,#f9f0cebd)}.rhythm-table__row--playing.rhythm-table__row--muted{background:linear-gradient(#faf4f4f5,#f1e3e3cc)}.rhythm-cell{font-family:inherit;font:inherit;color:inherit;text-align:left;min-width:0;padding-top:calc(2px * var(--ui-scale));padding-bottom:calc(2px * var(--ui-scale));min-height:0;font-weight:400;font-size:calc(12.1px * var(--ui-scale));background:0 0;border:0}.rhythm-table__row>.rhythm-cell:nth-child(-n+5){justify-content:center}.rhythm-cell--handle{justify-content:center;padding-inline:0}.rhythm-cell--playback{padding-inline:calc(2px * var(--ui-scale)) calc(8px * var(--ui-scale))}.rhythm-cell--actions{justify-content:center;gap:calc(6px * var(--ui-scale));padding-inline:calc(6px * var(--ui-scale))}.rhythm-cell--mix-actions{justify-content:center;gap:calc(4px * var(--ui-scale));padding-inline:calc(2px * var(--ui-scale))}.rhythm-cell--value{cursor:pointer}.rhythm-pill{background:var(--pill);border:1px solid var(--line);border-radius:var(--radius-medium);box-shadow:var(--pill-shadow);padding:calc(4px * var(--ui-scale)) calc(14px * var(--ui-scale));min-height:0;font-weight:400;font-size:calc(12.1px * var(--ui-scale))}.rhythm-drag-handle{width:calc(24px * var(--ui-scale));height:calc(24px * var(--ui-scale));color:#6d779166;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;padding:0;font-family:inherit;transition:color .14s,opacity .14s,transform .14s;display:inline-flex}.rhythm-drag-handle svg{width:calc(15px * var(--ui-scale));height:calc(15px * var(--ui-scale))}.rhythm-drag-handle:hover,.rhythm-drag-handle:focus-visible,.rhythm-drag-handle--dragging{color:var(--accent-strong);opacity:1}.rhythm-drag-handle:focus-visible{outline:none}.rhythm-drag-handle:active,.rhythm-drag-handle--dragging{cursor:grabbing;transform:translateY(1px)}.section-edge-button{cursor:pointer;font-family:inherit}.section-edge-button--danger{color:#a94444;background:linear-gradient(#fff6f6,#f6dede);border-color:#a9444457;box-shadow:inset 0 1px #ffffffc7,0 1px 2px #a9444424,0 4px 10px #a944441f}.rhythm-summary-button{--summary-border:#7680993d;--summary-background:linear-gradient(180deg, #fcfdffeb, #eff3fbe0);--summary-color:#687289;--summary-hover-border:#76809957;--summary-hover-background:var(--summary-background);--summary-hover-color:var(--summary-color);min-width:calc(24px * var(--ui-scale));min-height:calc(24px * var(--ui-scale));border:1px solid var(--summary-border);background:var(--summary-background);color:var(--summary-color);font-size:calc(10.5px * var(--ui-scale));letter-spacing:.08em;text-indent:.08em;opacity:.84;border-radius:999px;font-weight:700;box-shadow:inset 0 1px #ffffffdb,0 1px 3px #4c58790f}.rhythm-summary-button:disabled{opacity:.38}.section-edge-button.rhythm-summary-button:not(:disabled):hover,.section-edge-button.rhythm-summary-button:not(:disabled):focus-visible{border-color:var(--summary-hover-border);background:var(--summary-hover-background);color:var(--summary-hover-color);opacity:1;transform:translateY(-1px);box-shadow:inset 0 1px #ffffffdb,0 4px 10px #4c587914}.rhythm-summary-button[data-state=all]{opacity:1}.rhythm-summary-button--solo[data-state=mixed]{--summary-background:linear-gradient(90deg, #f4e7b8f0 0 50%, #fafbffe6 50% 100%), linear-gradient(180deg, #fcfdffeb, #eff3fbe0);--summary-border:#af934a4d;--summary-color:#6f5a20;--summary-hover-border:#af934a61}.rhythm-summary-button--solo[data-state=all]{--summary-background:linear-gradient(180deg, #f7eabefa, #e8d594eb);--summary-border:#af934a61;--summary-color:#654d16;--summary-hover-border:#af934a70}.rhythm-summary-button--mute[data-state=mixed]{--summary-background:linear-gradient(90deg, #f0d2d2f0 0 50%, #fafbffe6 50% 100%), linear-gradient(180deg, #fcfdffeb, #eff3fbe0);--summary-border:#a8676747;--summary-color:#7a4343;--summary-hover-border:#a867675c}.rhythm-summary-button--mute[data-state=all]{--summary-background:linear-gradient(180deg, #f5dcdcfa, #e9c3c3eb);--summary-border:#a867675c;--summary-color:#743e3e;--summary-hover-border:#a867676b}.rhythm-summary-button--invert:not(:disabled){--summary-color:#475069;--summary-hover-color:#475069}.rhythm-icon-button{width:calc(24px * var(--ui-scale));height:calc(24px * var(--ui-scale));border:1px solid var(--line);border-radius:var(--radius-large);background:var(--pill);color:var(--muted);box-shadow:var(--pill-shadow);cursor:pointer;font-family:inherit;font-size:calc(14px * var(--ui-scale));justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.rhythm-icon-button--ghost{width:calc(22px * var(--ui-scale));height:calc(22px * var(--ui-scale));color:#697287;opacity:.5;box-shadow:none;background:0 0;border-color:#0000}.rhythm-icon-button--ghost:not(.rhythm-icon-button--danger):hover,.rhythm-icon-button--ghost:not(.rhythm-icon-button--danger):focus-visible{color:#4d576d;opacity:.64;box-shadow:none;background:0 0;border-color:#0000}.rhythm-icon-button:focus-visible{outline:none}.rhythm-icon-button--danger{color:#a94444;background:linear-gradient(#fff6f6,#f6dede);border-color:#a9444457;box-shadow:inset 0 1px #ffffffc7,0 1px 2px #a9444424,0 4px 10px #a944441f}.rhythm-mix-button{width:calc(22px * var(--ui-scale));height:calc(22px * var(--ui-scale));color:#697287;font-size:calc(10.6px * var(--ui-scale));letter-spacing:.08em;text-indent:.08em;background:linear-gradient(#fbfcfff0,#ecf1fae6);border-color:#76809933;font-weight:700;box-shadow:inset 0 1px #ffffffd6,0 1px 3px #4c58790d}.rhythm-mix-button:hover,.rhythm-mix-button:focus-visible{color:#4c566d;border-color:#76809952}.rhythm-mix-button--solo.rhythm-mix-button--active{color:#624b15;background:linear-gradient(#f6e9bcfa,#e7d491f0);border-color:#aa8d456b;box-shadow:inset 0 1px #ffffff8f,0 4px 12px #9e80341f}.rhythm-mix-button--mute.rhythm-mix-button--active{color:#763d3d;background:linear-gradient(#f4dadafa,#e7c1c1f0);border-color:#a6626261;box-shadow:inset 0 1px #ffffff8f,0 4px 12px #9a59591a}.rhythm-indicators{--indicator-count:4;--indicator-gap:clamp(4px, .45vw, 8px);grid-template-columns:repeat(var(--indicator-count), minmax(0, 1fr));gap:var(--indicator-gap);width:100%;min-width:0;display:grid}.rhythm-indicators--low-density{--indicator-gap:clamp(4px, .45vw, 8px)}.rhythm-indicators--medium-density{--indicator-gap:clamp(2px, .22vw, 4px)}.rhythm-indicators--standalone{--indicator-gap:clamp(5px, .6vw, 10px)}.rhythm-indicators--standalone.rhythm-indicators--medium-density{--indicator-gap:clamp(2px, .28vw, 5px)}.rhythm-indicator{min-height:calc(18px * var(--ui-scale));border-radius:calc(var(--radius-medium) + 1px);background:linear-gradient(#f7f9fff2,#e5eaf5bd),linear-gradient(90deg,#ffffff2e,#0000);border:1px solid #848da842;transition:background .12s,border-color .12s,box-shadow .12s,transform .12s;box-shadow:inset 0 1px #ffffffdb,inset 0 -1px #919ab514,0 1px 3px #4c58790f}.rhythm-indicator--active{background:linear-gradient(#7c90c9f5,#5e70a9eb),linear-gradient(90deg,#ffffff38,#0000);border-color:#4e5e91ad;transform:translateY(-1px);box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #6d77912e,0 6px 16px #5562922e}.rhythm-indicator--first-active{background:linear-gradient(#79d090fa,#4ead67f0),linear-gradient(90deg,#ffffff42,#0000);border-color:#3e9859c2;box-shadow:inset 0 1px #ffffff42,0 0 0 1px #4ead6738,0 8px 20px #4ead6733}.rhythm-indicators--medium-density .rhythm-indicator{border-radius:4px;box-shadow:inset 0 1px #ffffffb8,inset 0 -1px #919ab50f}.rhythm-indicators--strip{min-height:calc(18px * var(--ui-scale));background:linear-gradient(#f1f5fceb,#e1e7f3d1);border:1px solid #848da847;border-radius:2px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffffb8,inset 0 -1px #919ab514}.rhythm-indicators--standalone.rhythm-indicators--strip{border-color:#7c86a057;box-shadow:inset 0 1px #fffc,inset 0 -1px #919ab51a,0 1px 3px #4c58790f}.rhythm-indicators--strip:before{content:"";background-image:linear-gradient(90deg,#0000 0 calc(100% - 1px),#9aa6bf47 calc(100% - 1px) 100%);background-size:calc(100% / var(--indicator-count)) 100%;background-repeat:repeat-x;position:absolute;inset:0}.rhythm-indicator-strip__active{width:calc(100% / var(--indicator-count));top:0;bottom:0;left:calc((100% / var(--indicator-count)) * var(--active-step-index));background:linear-gradient(#7c90c9fa,#5e70a9f0);position:absolute}.rhythm-indicator-strip__active--first{background:linear-gradient(#79d090fa,#4ead67f0)}.rhythm-playback-stack{gap:calc(10px * var(--ui-scale));width:min(100%, calc(1080px * var(--ui-scale)));display:grid}.rhythm-playback-stack--focus{gap:calc(16px * var(--ui-scale));width:min(100%, calc(1120px * var(--ui-scale)))}.rhythm-playback-row{padding:calc(14px * var(--ui-scale)) calc(16px * var(--ui-scale));border:1px solid var(--line);border-radius:var(--radius-large);background:linear-gradient(#ffffffd1,#f4f7fdb8);gap:0;display:grid;position:relative;box-shadow:0 8px 18px #4c58790a}.rhythm-playback-row--active{background:linear-gradient(#f8fbffeb,#ecf1fbd1)}.rhythm-playback-row--soloed{background:linear-gradient(#fffaece6,#f8f0d6b3);box-shadow:inset 0 0 0 1px #b0934a2e,0 8px 18px #7a66370a}.rhythm-playback-row--muted{background:linear-gradient(#fbf3f3eb,#f4e4e4c7);box-shadow:inset 0 0 0 1px #aa71711f,0 8px 18px #8258580a}.rhythm-playback-row--suppressed{opacity:.62}.rhythm-playback-row--soloed.rhythm-playback-row--muted{background:linear-gradient(#fff9ebbd,#f7e7e7d6),linear-gradient(90deg,#efdb9c24,#d37d7d1a)}.rhythm-playback-row--focus{padding:calc(20px * var(--ui-scale)) calc(22px * var(--ui-scale));border-radius:calc(var(--radius-large) + 4px);box-shadow:none;background:0 0;border:0}.rhythm-playback-row__label{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.rhythm-table__row--muted .rhythm-indicators,.rhythm-playback-row--muted .rhythm-indicators{filter:saturate(.72);opacity:.66}.rhythm-table__row--suppressed .rhythm-indicators,.rhythm-playback-row--suppressed .rhythm-indicators{opacity:.72}.rhythm-playback-row--focus .rhythm-indicator{min-height:calc(28px * var(--ui-scale));border-radius:calc(var(--radius-medium) + 2px)}.rhythm-playback-row--focus .rhythm-indicators--strip{min-height:calc(28px * var(--ui-scale))}.subdivision-stack{gap:calc(8px * var(--ui-scale));justify-items:center;display:grid}.subdivision-grid{gap:calc(8px * var(--ui-scale));width:min(100%, calc(640px * var(--ui-scale)));grid-template-columns:repeat(11,minmax(0,1fr));display:grid}.subdivision-grid--count{width:min(100%, calc(468px * var(--ui-scale)));grid-template-columns:repeat(8,minmax(0,1fr))}@media (width<=743px){.section-heading{width:100%}.subdivision-grid{grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,320px)}.subdivision-grid--count{grid-template-columns:repeat(8,minmax(0,1fr));width:min(100%,468px)}.base-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,320px)}.base-grid--modifiers{grid-template-columns:repeat(3,minmax(0,1fr))}.rhythm-table__head>div,.rhythm-cell{padding:10px}.rhythm-cell{min-height:30px;padding-top:2px;padding-bottom:2px}.rhythm-table{grid-template-columns:30px minmax(52px,52px) minmax(52px,52px) minmax(52px,52px) minmax(74px,74px) minmax(140px,1fr) 46px 32px}.rhythm-indicator{min-height:16px}.rhythm-playback-row{padding:12px 14px}.rhythm-playback-row--focus{padding:16px}}.sound-modal{width:min(calc(100vw - 48px), calc(496px * var(--ui-scale)));justify-items:stretch;gap:calc(16px * var(--ui-scale))}.sound-modal__section{gap:calc(12px * var(--ui-scale));padding:calc(12px * var(--ui-scale));border-radius:calc(18px * var(--ui-scale));background:linear-gradient(#fffffff0,#f2f5faf0),linear-gradient(#dde1f02e,#ccd5ea1f);border:1px solid #6d779129;display:grid;box-shadow:inset 0 1px #ffffffeb,0 8px 20px #4c58790d}.sound-modal__section-header{justify-content:space-between;align-items:baseline;display:flex}.sound-modal__section h4{font-family:Noto Sans Display,sans-serif;font-size:calc(15px * var(--ui-scale));letter-spacing:.02em;text-transform:uppercase;color:#5b667f;margin:0;font-weight:560}.sound-modal__stack{gap:calc(12px * var(--ui-scale));display:grid}.sound-modal__stack--sliders{gap:calc(18px * var(--ui-scale))}.sound-modal__row{grid-template-columns:minmax(0, calc(64px * var(--ui-scale))) minmax(0, 1fr);align-items:center;gap:calc(12px * var(--ui-scale));display:grid}.sound-modal__label{font-size:calc(13.2px * var(--ui-scale));letter-spacing:.01em;color:#46516b;font-weight:560}.sound-modal__row--disabled .sound-modal__label,.sound-modal__row--disabled .sound-modal__value{color:#8f98ad}.sound-modal__slider-wrap{align-items:center;gap:calc(12px * var(--ui-scale));grid-template-columns:minmax(0,1fr) auto;display:grid}.sound-modal__slider{appearance:none;width:100%;height:calc(52px * var(--ui-scale));cursor:pointer;background:0 0}.sound-modal__slider::-webkit-slider-runnable-track{height:calc(45px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#dde3effa,#c5cee1f0);box-shadow:inset 0 1px #ffffffe0,inset 0 -1px #6d77911f,0 2px 5px #4c587914}.sound-modal__slider::-webkit-slider-thumb{-webkit-appearance:none;width:calc(52px * var(--ui-scale));height:calc(52px * var(--ui-scale));margin-top:calc(-3.5px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#8492b4fa,#6a789cf5);border:1px solid #68759452;box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #424e6947,0 4px 10px #4c587933}.sound-modal__slider::-moz-range-track{height:calc(45px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#dde3effa,#c5cee1f0);border:0;box-shadow:inset 0 1px #ffffffe0,inset 0 -1px #6d77911f,0 2px 5px #4c587914}.sound-modal__slider::-moz-range-thumb{width:calc(52px * var(--ui-scale));height:calc(52px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#8492b4fa,#6a789cf5);border:1px solid #68759452;box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #424e6947,0 4px 10px #4c587933}.sound-modal__slider::-moz-range-progress{height:calc(45px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#dde3effa,#c5cee1f0)}.sound-modal__slider:hover::-webkit-slider-thumb{box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #424e6947,0 0 0 2px #dde1f0eb,0 5px 12px #4c587938}.sound-modal__slider:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #424e6947,0 0 0 2px #dde1f0eb,0 5px 12px #4c587938}.sound-modal__slider:hover::-moz-range-thumb{box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #424e6947,0 0 0 2px #dde1f0eb,0 5px 12px #4c587938}.sound-modal__slider:focus-visible::-moz-range-thumb{box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #424e6947,0 0 0 2px #dde1f0eb,0 5px 12px #4c587938}.sound-modal__slider:disabled::-webkit-slider-thumb{cursor:default}.sound-modal__slider:disabled::-moz-range-thumb{cursor:default}.sound-modal__slider:disabled::-moz-range-progress{background:linear-gradient(#c2cbdff0,#a6b2cde6)}.sound-modal__slider:disabled{cursor:default;width:100%}.sound-modal__slider:disabled,.sound-modal__select:disabled{opacity:.55;cursor:default}.sound-modal__value{min-width:calc(42px * var(--ui-scale));text-align:right;font-variant-numeric:tabular-nums;font-size:calc(12px * var(--ui-scale));color:#6d7791}.sound-modal__select-pair{align-items:center;gap:calc(8px * var(--ui-scale));flex-wrap:wrap;display:inline-flex}.sound-modal__pitch-controls{justify-content:flex-start;align-items:center;gap:calc(10px * var(--ui-scale));flex-wrap:wrap;display:flex}.sound-modal__interval-controls{justify-content:flex-start;align-items:center;display:flex}.sound-modal__stepper{align-items:center;gap:calc(10px * var(--ui-scale));display:inline-flex}.sound-modal__stepper-button{width:calc(34px * var(--ui-scale));height:calc(34px * var(--ui-scale));border:1px solid var(--line);border-radius:calc(12px * var(--ui-scale));color:var(--ink);box-shadow:var(--pill-shadow);cursor:pointer;background:linear-gradient(#fffffffa,#eff3f9f2);justify-content:center;align-items:center;padding:0;display:inline-flex}.sound-modal__stepper-button:disabled{opacity:.45;cursor:default}.sound-modal__stepper-button svg{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale))}.sound-modal__stepper-value{min-width:calc(52px * var(--ui-scale));min-height:calc(34px * var(--ui-scale));padding:calc(6px * var(--ui-scale)) calc(12px * var(--ui-scale));border-radius:calc(12px * var(--ui-scale));font-variant-numeric:tabular-nums;font-size:calc(13px * var(--ui-scale));color:#46516b;background:linear-gradient(#f9fbfffa,#eef2f9f2);border:1px solid #6d77912e;justify-content:center;align-items:center;font-weight:600;display:inline-flex;box-shadow:inset 0 1px #ffffffe6}.sound-modal__select{appearance:none;font:inherit;min-height:calc(34px * var(--ui-scale));padding:calc(6px * var(--ui-scale)) calc(12px * var(--ui-scale));border-radius:calc(12px * var(--ui-scale));border:1px solid var(--line);color:var(--ink);box-shadow:var(--pill-shadow);background:linear-gradient(#fffffffa,#eff3f9f2);flex:none}.sound-modal__select--note{min-width:calc(74px * var(--ui-scale))}.sound-modal__select--octave{min-width:calc(62px * var(--ui-scale))}.sound-modal__select--scale{min-width:calc(126px * var(--ui-scale))}.sound-modal__switch{cursor:pointer;align-items:center;display:inline-flex}.sound-modal__switch-input{opacity:0;pointer-events:none;position:absolute}.sound-modal__switch-track{width:calc(42px * var(--ui-scale));height:calc(24px * var(--ui-scale));padding:calc(2px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#e2e7f3f2,#cdd5e8eb);border:1px solid #6d779147;align-items:center;transition:background .14s,border-color .14s,box-shadow .14s;display:inline-flex;position:relative;box-shadow:inset 0 1px #ffffffc7,0 3px 8px #4c587914}.sound-modal__switch-thumb{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale));background:linear-gradient(#fffffffa,#f1f5fcf5);border-radius:50%;transition:transform .14s;box-shadow:inset 0 1px #fffffff2,0 2px 6px #4c587929}.sound-modal__switch-input:checked+.sound-modal__switch-track{background:linear-gradient(#8797baf5,#6c7ca2f0);border-color:#5c709c6b}.sound-modal__switch-input:checked+.sound-modal__switch-track .sound-modal__switch-thumb{transform:translateX(calc(18px * var(--ui-scale)))}.sound-modal__select:focus-visible,.sound-modal__slider:focus-visible,.sound-modal__stepper-button:focus-visible,.sound-modal__switch-input:focus-visible+.sound-modal__switch-track{outline:none}.sound-modal__select:focus-visible,.sound-modal__stepper-button:focus-visible{border-color:#6d779180;box-shadow:inset 0 1px #ffffffd1,0 0 0 2px #dde1f0eb,0 4px 10px #4c587914}.sound-modal__switch-input:focus-visible+.sound-modal__switch-track{box-shadow:inset 0 1px #ffffffc7,0 0 0 2px #dde1f0eb,0 4px 10px #4c587914}@media (width<=743px){.sound-modal{width:min(100vw - 32px,420px)}.sound-modal__row{grid-template-columns:1fr;justify-items:stretch}.sound-modal__slider-wrap{grid-template-columns:minmax(0,1fr)}.sound-modal__value{text-align:left}}