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}button,a,[role=button],summary{-webkit-tap-highlight-color:#858fa32e}body{margin:0;overflow:hidden auto}:root{--ui-scale:1;--bg:#f5f4fb;--app-background:radial-gradient(circle at 10% 10%, #c2cce524, transparent 35%), linear-gradient(160deg, #fcfcfc, #f0f3f9 48%, #eef0f6);--panel:#fffffff0;--toolbar-panel:linear-gradient(180deg, #ecf1f8f0, #f1f4f9d6);--toolbar-panel-line:#858fa357;--toolbar-panel-shadow:inset 0 1px 0 #ffffffc7, 0 8px 18px #2e354714;--ink:#383f51;--muted:#818798;--line:#989eae47;--accent:#dce0ef;--accent-strong:#6e7891;--pill:linear-gradient(180deg, #fff, #f0f3f9);--pill-shadow:inset 0 1px 0 #ffffffd6, inset 0 -1px 0 #2e35470d, 0 1px 2px #2e35470d, 0 4px 10px #2e35470d;--radius-small:2px;--radius-medium:4px;--radius-large:6px}html,body{background:var(--app-background)}body{color:var(--ink);font-family:Noto Sans Display,sans-serif}@media (hover:hover) and (pointer:fine){.control-button--ghost:not(:disabled):hover{color:#48516a;opacity:.64;background:linear-gradient(#f0f3f9d6,#dee5f2b3);border-color:#6e7891;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #2e354714,0 3px 10px #2e35470d}}.mini-modal-backdrop{z-index:2;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);padding:calc(24px * var(--ui-scale));background:#2e3547b3;place-items:center;display:grid;position:fixed;inset:0}.mini-modal{box-sizing:border-box;width:fit-content;max-width:min(100vw - calc(48px * var(--ui-scale)), 720px * var(--ui-scale));border:1px solid var(--line);border-radius:var(--radius-large);filter:drop-shadow(0 10px 16px #2e354757);padding:calc(18px * var(--ui-scale));justify-items:center;gap:calc(14px * var(--ui-scale));background:#fffffff0;display:grid;box-shadow:0 18px 45px #2e354724,inset 0 4px 12px #ffffff6b}.mini-modal__header{justify-content:space-between;align-items:center;gap:calc(12px * var(--ui-scale));width:100%;display:flex}.mini-modal__header h3{font-size:calc(18px * var(--ui-scale));margin:0}.mini-modal__close{border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-medium);width:calc(32px * var(--ui-scale));height:calc(32px * var(--ui-scale));cursor:pointer;font-size:calc(18px * var(--ui-scale));background:#fffffff0;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex}.mini-modal.mini-modal--phone{z-index:2;width:100vw;max-width:none;max-height:none;box-shadow:none;filter:none;background:radial-gradient(circle at 10% 0,#c2cce524,#0000 34%),linear-gradient(160deg,#fcfcfc,#f0f3f9 48%,#eef0f6);border:0;border-radius:0;grid-template-rows:auto minmax(0,1fr);align-content:stretch;justify-items:stretch;gap:0;padding:0;position:fixed;inset:0;overflow:clip}.mini-modal__phone-header{width:100%;max-width:none;min-height:0;padding-top:calc(env(safe-area-inset-top) + var(--toolbar-pad-top));margin:0}.mini-modal__phone-header-content{padding-inline:var(--page-pad-inline);position:relative}.mini-modal__phone-header-spacer{width:var(--toolbar-button-width);min-width:var(--toolbar-button-width);min-height:var(--toolbar-control-height)}.mini-modal__phone-title{min-width:0;width:min(100%, 100% - 2 * (var(--toolbar-button-width) + var(--toolbar-content-column-gap)));font-family:Noto Sans Display,sans-serif;font-size:calc(15px * var(--ui-scale));letter-spacing:.02em;text-align:center;text-transform:uppercase;color:#66708a;pointer-events:none;margin:0;font-weight:560;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mini-modal__phone-close{flex:none}.mini-modal__phone-scroll{min-height:0;overflow-y:auto}.mini-modal__phone-content{box-sizing:border-box;align-content:center;justify-items:stretch;width:100%;min-height:100%;display:grid}.section-title{font-family:Noto Sans Display,sans-serif;font-weight:480;font-size:calc(25px * var(--ui-scale));color:var(--ink);line-height:1}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));line-height:1}.section-context{color:#9298ab;font-size:.56em;line-height:1}.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}.section-edge-button{min-width:calc(50px * var(--ui-scale));min-height:calc(50px * var(--ui-scale));border-radius:var(--radius-large);color:#687187;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 svg{flex:none;width:1em;height:1em;display:block}.section-edge-button:disabled{cursor:default}.section-edge-button:focus-visible{outline:none}.section-edge-button:not(:disabled):not(.section-edge-button--danger):focus-visible{color:#d7deef;opacity:.64;box-shadow:none;background:0 0;border-color:#0000}.section-edge-button--header-icon{width:calc(35px * var(--ui-scale));min-width:calc(35px * var(--ui-scale));height:calc(35px * var(--ui-scale));min-height:calc(35px * var(--ui-scale));flex:0 0 calc(35px * var(--ui-scale))}.section-edge-button--header-icon svg{transform:scale(var(--section-edge-icon-scale,1));transform-origin:50%}.section-edge-button--header-icon-leading{margin-right:calc(-1 * calc(4px * var(--ui-scale)))}.section-edge-button--header-icon-trailing{margin-left:calc(-1 * calc(4px * var(--ui-scale)))}.section-edge-button--reserve-space{visibility:hidden;pointer-events:none}@media (hover:hover) and (pointer:fine){.section-edge-button:not(:disabled):not(.section-edge-button--danger):hover{color:#d7deef;opacity:.64;box-shadow:none;background:0 0;border-color:#0000}}.segmented-control{gap:calc(8px * var(--ui-scale));grid-template-columns:repeat(2,max-content);display:inline-grid}.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(#d7deef,#ccd5ea);box-shadow:inset 0 0 0 1px #6e7891,inset 0 1px #ffffff6b}.segmented-control--joined .segmented-button:last-child{border-right:0}.segmented-button{padding-inline:calc(14px * var(--ui-scale))}.segmented-button--icon-only{padding-inline:0}.rhythm-editor-modal__base-stack{gap:calc(8px * var(--ui-scale));justify-items:center;display:grid}.rhythm-editor-modal__base-grid{gap:calc(8px * var(--ui-scale));grid-template-columns:repeat(7,minmax(0,max-content));display:grid}.rhythm-editor-modal__base-grid--modifiers{grid-template-columns:repeat(3, minmax(calc(120px * var(--ui-scale)), max-content))}.rhythm-editor-modal__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}.rhythm-editor-modal__base-symbol{font-family:Noto Music,Bravura Text,Petaluma Script,serif;font-size:calc(20px * var(--ui-scale));line-height:1}.rhythm-editor-modal__subdivision-stack{gap:calc(8px * var(--ui-scale));justify-items:center;display:grid}.rhythm-editor-modal__subdivision-grid{gap:calc(8px * var(--ui-scale));width:min(100%, 640px * var(--ui-scale));grid-template-columns:repeat(11,minmax(0,1fr));display:grid}.rhythm-editor-modal__subdivision-grid--count{width:min(100%, 468px * var(--ui-scale));grid-template-columns:repeat(8,minmax(0,1fr))}.rhythm-editor-modal .rhythm-editor-modal__base-stack,.rhythm-editor-modal .rhythm-editor-modal__subdivision-stack,.rhythm-editor-modal .segmented-control{width:max-content;max-width:100%}.rhythm-editor-modal__phone-scroll{padding:calc(14px * var(--ui-scale)) var(--page-pad-inline) calc(calc(24px * var(--ui-scale)) + env(safe-area-inset-bottom))}.rhythm-editor-modal--phone .rhythm-editor-modal__base-stack,.rhythm-editor-modal--phone .rhythm-editor-modal__subdivision-stack,.rhythm-editor-modal--phone .segmented-control{justify-items:stretch;width:100%}.rhythm-editor-modal--phone .rhythm-editor-modal__base-grid,.rhythm-editor-modal--phone .rhythm-editor-modal__subdivision-grid{gap:calc(10px * var(--ui-scale));width:100%}.rhythm-editor-modal--phone .rhythm-editor-modal__base-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.rhythm-editor-modal--phone .rhythm-editor-modal__base-grid--modifiers{grid-template-columns:minmax(calc(140px * var(--ui-scale)), max-content);justify-self:center;width:fit-content;max-width:100%}.rhythm-editor-modal--phone .rhythm-editor-modal__subdivision-grid,.rhythm-editor-modal--phone .rhythm-editor-modal__subdivision-grid--count{grid-template-columns:repeat(4,minmax(0,1fr))}.rhythm-editor-modal--phone .rhythm-editor-modal__base-button,.rhythm-editor-modal--phone .control-button,.rhythm-editor-modal--phone .segmented-button{min-width:0}.metronome-page{--page-pad-top:calc(6px * var(--ui-scale));--page-pad-bottom:calc(18px * var(--ui-scale));--page-pad-inline:calc(20px * var(--ui-scale))}@media (width<=767.98px){.metronome-page{--page-pad-inline:calc(14px * var(--ui-scale))}}.metronome-page{min-height:100svh;padding:var(--page-pad-top) var(--page-pad-inline) var(--page-pad-bottom);gap:calc(10px * var(--ui-scale));flex-direction:column;display:flex}.metronome-page--focus{gap:calc(10px * var(--ui-scale))}.metronome-page--collapsed{--page-pad-bottom:calc(8px * var(--ui-scale));padding-bottom:calc(8px * var(--ui-scale));gap:calc(6px * var(--ui-scale))}.metronome-page--focus.metronome-page--collapsed{gap:calc(10px * var(--ui-scale))}.control-section{justify-items:center;gap:calc(12px * var(--ui-scale));width:100%;display:grid}.control-section[aria-label=Speed]{--rate-heading-secondary-gap:calc(12px * var(--ui-scale))}.control-section__head,.control-section__body{justify-items:center;width:100%;display:grid}.section-divider{width:100vw;max-width:none;margin-inline:calc(-1 * var(--page-pad-inline));padding-block:var(--section-divider-space,calc(26px * var(--ui-scale)));justify-self:stretch;justify-items:center;display:grid}.section-divider:before{content:"";top:var(--section-divider-line-offset,calc(2px * var(--ui-scale)));background:var(--line);width:100%;height:1px;display:block;position:relative}.content-surface{min-height:0;width:calc(100% + 2 * var(--page-pad-inline));max-width:none;margin-inline:calc(-1 * var(--page-pad-inline));padding:calc(2px * var(--ui-scale)) var(--page-pad-inline) calc(12px * var(--ui-scale));flex:auto;justify-content:center;align-items:stretch;display:flex;overflow:visible}.content-surface--collapsed{padding-top:0;padding-bottom:calc(8px * var(--ui-scale))}.content-surface--control{padding-bottom:0}.content-surface--focus{padding-top:0;padding-bottom:0}.content-surface--phone{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;overflow:hidden auto}.content-stack{--section-divider-space-base:calc(26px * var(--ui-scale));--section-divider-space-scale:1;--section-divider-line-offset:calc(2px * var(--ui-scale));--section-divider-space:calc(var(--section-divider-space-base) * var(--section-divider-space-scale));flex-direction:column;flex:auto;justify-content:flex-start;align-items:center;width:max-content;max-width:100%;min-height:100%;display:flex}.content-stack--collapsed{--section-divider-space-scale:.5}.content-stack--focus{width:min(100%, 1120px * var(--ui-scale))}.content-stack>.section-divider{flex:none}.content-stack>.control-section{flex:none;width:100%;max-width:100%}.content-stack>.rhythms-section[data-ui-mode=Control],.content-stack>.rhythms-section[data-ui-mode=Focus]{flex:auto;min-height:0}.metronome-page--phone{background:var(--app-background);min-height:100dvh;position:fixed;inset:0;overflow:hidden}.metronome-page--phone .control-section,.metronome-page--phone .control-section__head,.metronome-page--phone .control-section__body,.metronome-page--phone .content-stack{justify-items:stretch}.metronome-page--phone .content-stack{width:100%;max-width:100%}@media (hover:hover) and (pointer:fine){.control-button--ghost:not(:disabled):hover{color:#48516a;opacity:.64;background:linear-gradient(#f0f3f9d6,#dee5f2b3);border-color:#6e7891;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #2e354714,0 3px 10px #2e35470d}}.rhythm-table__note-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}.control-section[aria-label=Rhythms]{gap:calc(10px * var(--ui-scale));min-height:0}.rhythms-section{width:100%}.rhythms-section[data-ui-mode=Control],.rhythms-section[data-ui-mode=Focus]{flex-direction:column;align-items:center;min-height:0;display:flex}.rhythms-section[data-ui-mode=Control] .control-section__body,.rhythms-section[data-ui-mode=Focus] .control-section__body{flex:auto;justify-content:center;align-items:stretch;min-height:0;display:flex}.rhythms-section__heading{width:min(100%, 1148px * var(--ui-scale));grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin:0 auto;display:grid}.rhythms-section__heading h2{justify-self:center;line-height:1}.rhythms-section__heading-side{align-items:center;min-width:0;display:flex}.rhythms-section__heading-side:first-child{padding-right:calc(24px * var(--ui-scale));justify-content:flex-end}.rhythms-section__heading-side--end{justify-content:flex-start;gap:calc(24px * var(--ui-scale));padding-left:calc(24px * var(--ui-scale))}.rhythms-section__mix-summary{align-items:center;gap:calc(8px * var(--ui-scale));display:inline-flex}.rhythms-section--focus{gap:0}.rhythms-section__heading-button{--section-edge-icon-scale:1}.rhythms-section__heading-button--add{--section-edge-icon-scale:.7}.rhythms-section__heading-button--delete{--section-edge-icon-scale:.8}.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%, 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 #2e35470d}.rhythm-table__head,.rhythm-table__row{grid-template-columns:subgrid;gap:calc(8px * var(--ui-scale));padding-inline:calc(3px * var(--ui-scale));grid-column:1/-1;display:grid}.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:calc(3px * var(--ui-scale)) calc(10px * var(--ui-scale)) 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:#ffffff6b;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,#0000,#6e789194 16% 84%,#0000);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:#d7deef6b}.rhythm-table__row--playing{background:#f0f5ff}.rhythm-table__row--soloed{background:linear-gradient(#fff9ebf0,#fff8e6c7);box-shadow:inset 0 0 0 1px #aa8e4624}.rhythm-table__row--muted{background:linear-gradient(#fff0f0f0,#f6e9e9c7);box-shadow:inset 0 0 0 1px #8f616124}.rhythm-table__row--suppressed{opacity:.62}.rhythm-table__row>.rhythm-cell:nth-child(-n+5){justify-content:center}.rhythm-table__row--soloed.rhythm-table__row--muted{background:linear-gradient(#fff8e6b3,#f4ddddd6),linear-gradient(90deg,#aa8e4624,#ab444424)}.rhythm-table__row--playing.rhythm-table__row--soloed{background:linear-gradient(#fff9ebf0,#f4edddc7)}.rhythm-table__row--playing.rhythm-table__row--muted{background:linear-gradient(#faf5f5f0,#efe1e1c7)}.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-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-cell--handle{justify-content:center;padding-inline:0}.rhythm-cell--playback{padding-inline:calc(8px * var(--ui-scale)) calc(8px * var(--ui-scale))}.rhythm-cell--actions{justify-content:center;gap:calc(8px * var(--ui-scale));padding-inline:calc(6px * var(--ui-scale))}.rhythm-cell--mix-actions{justify-content:center;gap:calc(10px * 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(7px * var(--ui-scale)) calc(14px * var(--ui-scale));min-height:calc(39px * var(--ui-scale));font-weight:400;font-size:calc(12.1px * var(--ui-scale));align-self:center}.rhythm-drag-handle{appearance:none;width:calc(24px * var(--ui-scale));min-height:calc(39px * var(--ui-scale));height:calc(39px * var(--ui-scale));color:#6e78916b;cursor:grab;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-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: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:#ab4444;background:linear-gradient(#fff0f0,#f4dddd);border-color:#ab444457;box-shadow:inset 0 1px #ffffffc7,0 1px 2px #ab444424,0 4px 10px #ab444424}.rhythm-summary-button{--summary-border:#7b859d47;--summary-background:linear-gradient(to bottom, #fafcfff0, #ecf1f8d6);--summary-color:#66708a;--summary-hover-border:#7b859d57;--summary-hover-background:var(--summary-background);--summary-hover-color:var(--summary-color);min-width:calc(35px * var(--ui-scale));min-height:calc(35px * 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 #ffffffd6,0 1px 3px #49536f0d}.rhythm-summary-button:disabled{opacity:.38}.rhythm-summary-button[data-state=all]{opacity:1}.rhythm-summary-button--solo[data-state=mixed]{--summary-background:linear-gradient(to right, #f4edddf0 0 50%, #fafbffd6 50% 100%), linear-gradient(to bottom, #fafcfff0, #ecf1f8d6);--summary-border:#aa8e4647;--summary-color:#675422;--summary-hover-border:#aa8e4657}.rhythm-summary-button--solo[data-state=all]{--summary-background:linear-gradient(to bottom, #f4edddfa, #e9ddbef0);--summary-border:#aa8e4657;--summary-color:#58471d;--summary-hover-border:#aa8e466b}.rhythm-summary-button--mute[data-state=mixed]{--summary-background:linear-gradient(to right, #f4ddddf0 0 50%, #fafbffd6 50% 100%), linear-gradient(to bottom, #fafcfff0, #ecf1f8d6);--summary-border:#b0696947;--summary-color:#783f3f;--summary-hover-border:#b0696957}.rhythm-summary-button--mute[data-state=all]{--summary-background:linear-gradient(to bottom, #f4ddddfa, #e7c1c1f0);--summary-border:#b0696957;--summary-color:#753e3e;--summary-hover-border:#b069696b}.rhythm-summary-button--invert:not(:disabled){--summary-color:#d7deef;--summary-hover-color:#d7deef}.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 #ffffffd6,0 4px 10px #49536f14}.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:focus-visible{outline:none}.rhythm-icon-button--ghost{width:calc(33px * var(--ui-scale));height:calc(33px * var(--ui-scale));color:#66708a;opacity:.5;box-shadow:none;background:0 0;border-color:#0000}.rhythm-icon-button--ghost:not(.rhythm-icon-button--danger):focus-visible{color:#48516a;opacity:.64;box-shadow:none;background:0 0;border-color:#0000}.rhythm-icon-button--danger{color:#ab4444;background:linear-gradient(#fff0f0,#f4dddd);border-color:#ab444457;box-shadow:inset 0 1px #ffffffc7,0 1px 2px #ab444424,0 4px 10px #ab444424}.rhythm-mix-button{width:calc(33px * var(--ui-scale));height:calc(33px * var(--ui-scale));color:#66708a;font-size:calc(10.6px * var(--ui-scale));letter-spacing:.08em;text-indent:.08em;background:linear-gradient(#fafbfff0,#ecf1f8d6);border-color:#7b859d2e;font-weight:700;box-shadow:inset 0 1px #ffffffd6,0 1px 3px #49536f0d}.rhythm-mix-button:focus-visible{color:#48516a;border-color:#7b859d47}.rhythm-mix-button--solo.rhythm-mix-button--active{color:#675422;background:linear-gradient(#f4edddfa,#e9ddbef0);border-color:#aa8e4657;box-shadow:inset 0 1px #ffffff6b,0 4px 12px #aa8e4624}.rhythm-mix-button--mute.rhythm-mix-button--active{color:#753e3e;background:linear-gradient(#f4ddddfa,#e7c1c1f0);border-color:#9d535357;box-shadow:inset 0 1px #ffffff6b,0 4px 12px #9d535324}@media (hover:hover) and (pointer:fine){.rhythm-drag-handle:hover{color:var(--accent-strong);opacity:1}.section-edge-button.rhythm-summary-button:not(:disabled):hover{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 #ffffffd6,0 4px 10px #49536f14}.rhythm-icon-button--ghost:not(.rhythm-icon-button--danger):hover{color:#48516a;opacity:.64;box-shadow:none;background:0 0;border-color:#0000}.rhythm-mix-button:hover{color:#48516a;border-color:#7b859d47}}.rhythm-indicators{--indicator-count:4;--indicator-gap:clamp(4px, .45vw, 8px);grid-template-columns:repeat(var(--indicator-count), minmax(0, 1fr));align-items:stretch;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--panel{--indicator-gap:clamp(5px, .6vw, 10px);align-self:stretch;min-height:100%}.rhythm-indicators--panel.rhythm-indicators--medium-density{--indicator-gap:clamp(2px, .28vw, 5px)}.rhythm-indicators--panel.rhythm-indicators--strip{min-height:100%}.rhythm-indicators--strip{min-height:calc(18px * var(--ui-scale));background:radial-gradient(circle,#ced6e9f0 0%,#dce2eff0 44%,#f0f3f9f0 100%);border:1px solid #9298ab47;border-radius:2px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0d,inset 0 -1px #9298ab0d,0 0 0 1px #989eae0d}.rhythm-indicators--strip:before{content:"";background-image:linear-gradient(90deg,#0000 0 calc(100% - 2px),#9298ab47 calc(100% - 2px) calc(100% - 1px),#ffffff0d calc(100% - 1px) 100%);background-size:calc(100% / var(--indicator-count)) 100%;background-repeat:repeat-x;position:absolute;inset:0}.rhythm-indicator{min-height:calc(18px * var(--ui-scale));border-radius:calc(var(--radius-medium) + 1px);background:radial-gradient(circle,#ced6e9f0 0%,#dce2eff0 200%),linear-gradient(90deg,#ffffff0d,#0000 42%);border:1px solid #9298ab47;transition:background .12s,border-color .12s,box-shadow .12s,transform .12s;box-shadow:inset 0 1px #ffffff0d,inset 0 -1px #9298ab0d,0 0 0 1px #989eae0d,0 1px 2px #2e35470d}.rhythm-indicator--active{background:radial-gradient(circle,#4d597af0 0%,#818ba7 250%),linear-gradient(90deg,#ffffff2e,#0000 42%);border-color:#4d597ab3;transform:translateY(-1px);box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #4d597a0d,0 0 0 1px #6e78912e,0 4px 12px #dce0ef2e}.rhythm-indicator--first-active{background:radial-gradient(circle,#4fb069f0 0%,#76d08efa 200%),linear-gradient(90deg,#ffffff47,#0000 42%);border-color:#3e9859c7;box-shadow:inset 0 1px #ffffff47,inset 0 -1px #4fb0690d,0 0 0 1px #4fb0692e,0 5px 14px #4fb0692e}.rhythm-indicators--medium-density .rhythm-indicator{border-radius:4px;box-shadow:inset 0 1px #ffffff0d,inset 0 -1px #9298ab0d,0 0 0 1px #989eae0d}.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:radial-gradient(circle,#4d597af0 0%,#818ba7 100%);position:absolute;box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #4d597a0d}.rhythm-indicator-strip__active--first{background:radial-gradient(circle,#4fb069f0 0%,#76d08efa 100%);box-shadow:inset 0 1px #ffffff47,inset 0 -1px #4fb0690d}.rhythm-playback-panel{--rhythm-playback-row-gap:calc(10px * var(--ui-scale));--rhythm-playback-row-min-height:calc(34px * var(--ui-scale));min-height:0;width:calc(100% + 2 * var(--page-pad-inline));max-width:none;margin-inline:calc(-1 * var(--page-pad-inline));margin-top:calc(var(--section-divider-space) + var(--section-divider-line-offset));margin-bottom:calc(-1 * var(--page-pad-bottom));padding:calc(14px * var(--ui-scale)) calc(16px * var(--ui-scale));border-top:1px solid var(--toolbar-panel-line);background:var(--toolbar-panel);isolation:isolate;flex:auto;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffffc7}.rhythm-playback-panel:before{content:"";opacity:1;pointer-events:none;background:linear-gradient(90deg,#c2cce524,#0000 16% 84%,#c2cce524),radial-gradient(circle,#ffffff94,#0000 62%);position:absolute;inset:0}.rhythm-playback-panel--focus{--rhythm-playback-row-gap:calc(16px * var(--ui-scale));--rhythm-playback-row-min-height:calc(42px * var(--ui-scale));margin-top:0;margin-bottom:calc(-1 * var(--page-pad-bottom));padding:calc(20px * var(--ui-scale)) calc(22px * var(--ui-scale));box-shadow:none;background:0 0;border-top:0;overflow:visible}.rhythm-playback-panel--focus:before{display:none}.rhythm-playback-stack{z-index:1;gap:var(--rhythm-playback-row-gap);flex-direction:column;flex:auto;min-height:0;display:flex;position:relative}.rhythm-playback-row{min-width:0;min-height:var(--rhythm-playback-row-min-height);padding-block:calc(2px * var(--ui-scale));flex:1 1 0;align-items:stretch;transition:opacity .14s;display:flex;position:relative}.rhythm-playback-row:not(:last-child):after{content:"";left:0;right:0;bottom:calc(var(--rhythm-playback-row-gap) * -.5);opacity:.72;pointer-events:none;background:linear-gradient(90deg,#ced6e92e,#0000 92%);height:1px;position:absolute}.rhythm-playback-row--suppressed{opacity:.56}.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}.metronome-page--phone .rhythm-playback-panel,.metronome-page--phone .rhythm-playback-panel--focus{margin-bottom:0}.metronome-page--phone .rhythms-section__heading{gap:calc(8px * var(--ui-scale));grid-template-columns:auto minmax(0,1fr) auto;width:100%}.metronome-page--phone .rhythms-section__heading-side:first-child{padding-right:0}.metronome-page--phone .rhythms-section__heading-side--end{gap:calc(8px * var(--ui-scale));padding-left:0}.metronome-page--phone .rhythms-section__mix-summary{gap:calc(6px * var(--ui-scale))}.metronome-page--phone .rhythm-table{gap:calc(12px * var(--ui-scale));width:100%;box-shadow:none;background:0 0;border:0;border-radius:0;grid-template-columns:minmax(0,1fr);padding:0;overflow:visible}.metronome-page--phone .rhythm-table__head{display:none}.metronome-page--phone .rhythm-table__row{grid-template-columns:calc(30px * var(--ui-scale)) minmax(0, 1fr);gap:calc(8px * var(--ui-scale));padding:calc(12px * var(--ui-scale));align-items:center;box-shadow:0 8px 18px #2e35470d}.metronome-page--phone .rhythm-table__row>.rhythm-cell--handle{grid-column:1;justify-content:center;align-self:stretch;min-height:0;padding:0}.metronome-page--phone .rhythm-table__row>.rhythm-table__entry{grid-column:2;grid-template-columns:calc(52px * var(--ui-scale)) calc(52px * var(--ui-scale)) calc(52px * var(--ui-scale)) calc(96px * var(--ui-scale));gap:calc(8px * var(--ui-scale));grid-template-areas:"note modifier count mode""mix mix actions actions";justify-self:center;align-items:center;min-width:0;display:grid}.metronome-page--phone .rhythm-table__row>.rhythm-table__entry>.rhythm-cell--note{grid-area:note;justify-self:stretch}.metronome-page--phone .rhythm-table__row>.rhythm-table__entry>.rhythm-cell--modifier{grid-area:modifier;justify-self:stretch}.metronome-page--phone .rhythm-table__row>.rhythm-table__entry>.rhythm-cell--count{grid-area:count;justify-self:stretch}.metronome-page--phone .rhythm-table__row>.rhythm-table__entry>.rhythm-cell--mode{grid-area:mode;justify-self:stretch}.metronome-page--phone .rhythm-table__row>.rhythm-table__entry>.rhythm-cell--mix-actions,.metronome-page--phone .rhythm-table__row>.rhythm-table__entry>.rhythm-cell--actions{min-height:0;padding:0}.metronome-page--phone .rhythm-table__row>.rhythm-table__entry>.rhythm-cell--mix-actions{grid-area:mix;justify-content:flex-start;justify-self:stretch}.metronome-page--phone .rhythm-table__row>.rhythm-table__entry>.rhythm-cell--actions{grid-area:actions;justify-content:flex-end;justify-self:stretch}.metronome-page--phone .rhythm-pill{width:100%;min-height:calc(44px * var(--ui-scale));padding:0 calc(12px * var(--ui-scale));justify-content:center}.metronome-page--phone .rhythm-drag-handle{opacity:.7;width:100%;height:100%;min-height:100%}.metronome-page--phone .rhythm-drag-handle svg{width:calc(27px * var(--ui-scale));height:calc(27px * var(--ui-scale))}@media (width>=768px) and (width<=1180px){.rhythm-table{width:min(100vw - 2 * var(--page-pad-inline), 1148px * var(--ui-scale));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(0, 1fr) max-content max-content}}.settings-modal{--settings-section-gap:calc(24px * var(--ui-scale));--settings-stack-gap:calc(14px * var(--ui-scale));--settings-control-gap:calc(24px * var(--ui-scale));--settings-inline-gap:calc(10px * var(--ui-scale));--settings-content-indent:calc(16px * var(--ui-scale));width:min(100vw - 48px, 760px * var(--ui-scale));max-width:min(100vw - 48px, 760px * var(--ui-scale));max-height:min(100vh - 48px, 620px * var(--ui-scale));align-content:start;justify-items:stretch;gap:calc(16px * var(--ui-scale));overflow:auto}.settings-modal__body{grid-template-columns:minmax(0, .95fr) minmax(calc(340px * var(--ui-scale)), 1fr);gap:calc(14px * var(--ui-scale));grid-template-areas:"volume pitches""playback intervals";display:grid}.settings-modal__section{gap:var(--settings-section-gap);min-width:0;padding:calc(12px * var(--ui-scale));border-radius:calc(18px * var(--ui-scale));background:linear-gradient(#fffffff0,#f0f3f9f0),linear-gradient(#dce0ef2e,#ccd5ea24);border:1px solid #6e78912e;align-content:start;display:grid;box-shadow:inset 0 1px #fffffff0,0 8px 20px #2e35470d}.settings-modal__section--volume{grid-area:volume}.settings-modal__section--pitches{grid-area:pitches}.settings-modal__section--playback{grid-area:playback}.settings-modal__section--intervals{grid-area:intervals}.settings-modal__section h4{font-family:Noto Sans Display,sans-serif;font-size:calc(15px * var(--ui-scale));letter-spacing:.02em;text-transform:uppercase;color:#66708a;margin:0;font-weight:560}.settings-modal__section-header{justify-content:space-between;align-self:start;align-items:baseline;display:flex}.settings-modal__stack{row-gap:var(--settings-stack-gap);padding-left:var(--settings-content-indent);display:grid}.settings-modal__stack--volume-grid{column-gap:var(--settings-control-gap);grid-template-columns:max-content minmax(0,1fr);align-items:center}.settings-modal__stack--compact-grid{column-gap:var(--settings-control-gap);grid-template-columns:max-content auto;justify-content:start;align-items:center}.settings-modal__row{display:contents}.settings-modal__row--disabled .settings-modal__label,.settings-modal__row--disabled .settings-modal__value{color:#818798}.settings-modal__label{font-size:calc(13.2px * var(--ui-scale));letter-spacing:.01em;color:#48516a;grid-column:1;align-self:center;font-weight:560}.settings-modal__slider-wrap{align-items:center;gap:var(--settings-control-gap);grid-column:2;grid-template-columns:minmax(0,1fr) auto;min-width:0;display:grid}.settings-modal__slider{appearance:none;width:100%;height:calc(44px * var(--ui-scale));cursor:pointer;background:0 0}.settings-modal__slider::-webkit-slider-runnable-track{height:calc(38px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#dee5f2fa,#ced6e9f0);box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #6e789124,0 2px 5px #2e354714}.settings-modal__slider::-webkit-slider-thumb{-webkit-appearance:none;margin-top:calc(-3px * var(--ui-scale));width:calc(44px * var(--ui-scale));height:calc(44px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#9298abfa,#6e7891f0);border:1px solid #6e789157;box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 4px 10px #2e35472e}.settings-modal__slider::-moz-range-track{height:calc(38px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#dee5f2fa,#ced6e9f0);border:0;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #6e789124,0 2px 5px #2e354714}.settings-modal__slider::-moz-range-thumb{width:calc(44px * var(--ui-scale));height:calc(44px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#9298abfa,#6e7891f0);border:1px solid #6e789157;box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 4px 10px #2e35472e}.settings-modal__slider::-moz-range-progress{height:calc(38px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#dee5f2fa,#ced6e9f0)}.settings-modal__slider:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 0 0 2px #fffffff0,0 5px 12px #2e35472e}.settings-modal__slider:focus-visible::-moz-range-thumb{box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 0 0 2px #fffffff0,0 5px 12px #2e35472e}.settings-modal__slider:disabled{cursor:default;width:100%}.settings-modal__slider:disabled::-webkit-slider-thumb{cursor:default}.settings-modal__slider:disabled::-moz-range-thumb{cursor:default}.settings-modal__slider:disabled::-moz-range-progress{background:linear-gradient(#d7deeff0,#9298abd6)}.settings-modal__select:disabled,.settings-modal__slider:disabled{opacity:.55;cursor:default}.settings-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:#6e7891}.settings-modal__select-pair,.settings-modal__stepper,.settings-modal__pitch-controls{align-items:center;gap:var(--settings-inline-gap);display:inline-flex}.settings-modal__pitch-controls,.settings-modal__interval-controls,.settings-modal__switch{grid-column:2;justify-self:start}.settings-modal__pitch-controls,.settings-modal__interval-controls{justify-content:flex-start;width:fit-content;max-width:100%}.settings-modal__pitch-controls{flex-wrap:wrap}.settings-modal__interval-controls,.settings-modal__switch{align-items:center;display:inline-flex}.settings-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(#fafcfffa,#f1f4f9f0);justify-content:center;align-items:center;padding:0;display:inline-flex}.settings-modal__stepper-button:disabled{opacity:.45;cursor:default}.settings-modal__stepper-button svg{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale))}.settings-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:#48516a;background:linear-gradient(#fafcfffa,#f1f4f9f0);border:1px solid #6e78912e;justify-content:center;align-items:center;font-weight:600;display:inline-flex;box-shadow:inset 0 1px #ffffffd6}.settings-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:1px solid var(--line);border-radius:calc(12px * var(--ui-scale));color:var(--ink);box-shadow:var(--pill-shadow);background:linear-gradient(#fafcfffa,#f1f4f9f0);flex:none}.settings-modal__select--note{min-width:calc(74px * var(--ui-scale))}.settings-modal__select--octave{min-width:calc(62px * var(--ui-scale))}.settings-modal__select--scale{min-width:calc(126px * var(--ui-scale))}.settings-modal__select--step{min-width:calc(72px * var(--ui-scale))}.settings-modal__switch{cursor:pointer}.settings-modal__switch-input{opacity:0;pointer-events:none;position:absolute}.settings-modal__switch-input:checked+.settings-modal__switch-track{background:linear-gradient(#dee5f2f0,#7b859df0);border-color:#d7deef6b}.settings-modal__switch-input:checked+.settings-modal__switch-track .settings-modal__switch-thumb{transform:translateX(calc(22.5px * var(--ui-scale)))}.settings-modal__switch-input:focus-visible+.settings-modal__switch-track{box-shadow:inset 0 1px #ffffffc7,0 0 0 2px #fffffff0,0 4px 10px #2e354714}.settings-modal__switch-track{width:calc(52.5px * var(--ui-scale));height:calc(30px * var(--ui-scale));padding:calc(2.5px * var(--ui-scale));border-radius:calc(999px * var(--ui-scale));background:linear-gradient(#dee5f2f0,#ced6e9f0);border:1px solid #6e789147;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 #2e354714}.settings-modal__switch-thumb{width:calc(22.5px * var(--ui-scale));height:calc(22.5px * var(--ui-scale));background:linear-gradient(#fffffffa,#f1f4f9f0);border-radius:50%;transition:transform .14s;box-shadow:inset 0 1px #fffffff0,0 2px 6px #49536f2e}.settings-modal__select:focus-visible,.settings-modal__slider:focus-visible,.settings-modal__stepper-button:focus-visible,.settings-modal__switch-input:focus-visible+.settings-modal__switch-track{outline:none}.settings-modal__select:focus-visible,.settings-modal__stepper-button:focus-visible{border-color:#6e78916b;box-shadow:inset 0 1px #ffffffc7,0 0 0 2px #fffffff0,0 4px 10px #2e354714}@media (hover:hover) and (pointer:fine){.settings-modal__slider:hover::-webkit-slider-thumb{box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 0 0 2px #fffffff0,0 5px 12px #2e35472e}.settings-modal__slider:hover::-moz-range-thumb{box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 0 0 2px #fffffff0,0 5px 12px #2e35472e}}@media (width<=860px){.settings-modal{width:min(100vw - 32px,520px);max-width:min(100vw - 32px,520px)}.settings-modal__body{grid-template-columns:minmax(0,1fr);grid-template-areas:"volume""playback""pitches""intervals"}}.settings-modal--phone{--settings-section-gap:calc(18px * var(--ui-scale));--settings-stack-gap:calc(12px * var(--ui-scale));--settings-control-gap:calc(14px * var(--ui-scale));--settings-inline-gap:calc(8px * var(--ui-scale));--settings-content-indent:0}.settings-modal__phone-scroll{padding:calc(14px * var(--ui-scale)) var(--page-pad-inline) calc(calc(24px * var(--ui-scale)) + env(safe-area-inset-bottom))}.settings-modal--phone .settings-modal__body{gap:calc(12px * var(--ui-scale));grid-template-columns:minmax(0,1fr);grid-template-areas:"volume""playback""pitches""intervals";width:100%}.speed-section__reset-button{--section-edge-icon-scale:1.1;transform:translateY(calc(2.15px * var(--ui-scale)))}.rate-control-section{--rate-heading-secondary-gap:calc(6px * var(--ui-scale));--rate-slider-height:calc(34px * var(--ui-scale));--rate-slider-track-height:calc(12px * var(--ui-scale));--rate-slider-thumb-size:calc(28px * var(--ui-scale));--rate-slider-tick-width:calc(2px * var(--ui-scale));--rate-slider-tick-protrusion:calc(4px * var(--ui-scale));--rate-slider-indicator-ratio:.5;--rate-slider-thumb-offset:calc((var(--rate-slider-track-height) - var(--rate-slider-thumb-size)) / 2);--rate-slider-active-height:max(var(--rate-slider-track-height), var(--rate-slider-thumb-size));--rate-slider-tick-height:calc(var(--rate-slider-active-height) + (2 * var(--rate-slider-tick-protrusion)));--rate-slider-stack-height:max(var(--rate-slider-height), var(--rate-slider-tick-height))}.rate-control-section[aria-label=Speed]{--rate-heading-secondary-gap:calc(12px * var(--ui-scale))}.rate-control-section__grid{gap:calc(12px * var(--ui-scale));justify-items:center;display:grid}.rate-control-section__presets{gap:calc(8px * var(--ui-scale));display:grid}.rate-control-section__slider-wrap{width:100%;height:var(--rate-slider-stack-height);isolation:isolate;align-items:center;display:flex;position:relative;overflow:visible}.rate-control-section__slider{z-index:1;appearance:none;width:100%;height:var(--rate-slider-height);cursor:pointer;background:0 0;display:block;position:relative}.rate-control-section__slider::-webkit-slider-runnable-track{height:var(--rate-slider-track-height);background:linear-gradient(#dee5f2fa,#ced6e9f0);border-radius:999px;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #6e789124,0 2px 5px #2e354714}.rate-control-section__slider::-webkit-slider-thumb{-webkit-appearance:none;margin-top:var(--rate-slider-thumb-offset);width:var(--rate-slider-thumb-size);height:var(--rate-slider-thumb-size);background:linear-gradient(#9298abfa,#6e7891f0);border:1px solid #6e789157;border-radius:999px;box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 4px 10px #2e35472e}.rate-control-section__slider::-moz-range-track{height:var(--rate-slider-track-height);background:linear-gradient(#dee5f2fa,#ced6e9f0);border:0;border-radius:999px;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #6e789124,0 2px 5px #2e354714}.rate-control-section__slider::-moz-range-thumb{width:var(--rate-slider-thumb-size);height:var(--rate-slider-thumb-size);background:linear-gradient(#9298abfa,#6e7891f0);border:1px solid #6e789157;border-radius:999px;box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 4px 10px #2e35472e}.rate-control-section__slider::-moz-range-progress{height:var(--rate-slider-track-height);background:linear-gradient(#d7deeff0,#9298abd6);border-radius:999px}.rate-control-section__slider:focus-visible{outline:none}.rate-control-section__slider:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 0 0 2px #fffffff0,0 5px 12px #2e35472e}.rate-control-section__slider:focus-visible::-moz-range-thumb{box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 0 0 2px #fffffff0,0 5px 12px #2e35472e}.rate-control-section__slider-tick{width:var(--rate-slider-tick-width);z-index:0;pointer-events:none;height:var(--rate-slider-tick-height);opacity:.74;box-shadow:none;background:#6e78916b;border-radius:999px;position:absolute;inset-block-start:50%;inset-inline-start:calc(var(--rate-slider-thumb-size) / 2 + (100% - var(--rate-slider-thumb-size)) * var(--rate-slider-indicator-ratio));transform:translate(-50%,-50%)}.rate-control-section__row{gap:calc(8px * var(--ui-scale));flex-wrap:nowrap;width:100%;display:flex}.rate-control-section__row--adjust{margin-top:calc(2px * var(--ui-scale));align-items:center;width:auto}.rate-control-section__gap{width:calc(24px * var(--ui-scale));flex:0 0 calc(24px * var(--ui-scale))}.rate-control-section__heading{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;width:100%;display:grid}.rate-control-section__heading-side{align-items:center;min-width:0;display:flex}.rate-control-section__heading-side--start{padding-right:calc(24px * var(--ui-scale));justify-content:flex-end}.rate-control-section__heading-center{justify-self:center;position:relative}.rate-control-section__heading-anchor,.rate-control-section__heading-title{white-space:nowrap;align-items:baseline;line-height:1;display:inline-flex}.rate-control-section__heading-anchor{visibility:hidden}.rate-control-section__heading-title{position:absolute;inset:0 auto auto 0}.rate-control-section__heading-secondary{margin-left:var(--rate-heading-secondary-gap)}.metronome-page--phone .rate-control-section__grid,.metronome-page--phone .rate-control-section__presets{width:100%}.metronome-page--phone .rate-control-section__row--adjust{gap:calc(8px * var(--ui-scale));grid-template-columns:repeat(5,minmax(0,1fr));width:100%;display:grid}.metronome-page--phone .rate-control-section__gap{display:none}.metronome-page--phone .rate-control-section__row--adjust .control-button--adjust{width:100%;min-width:0}@media (hover:hover) and (pointer:fine){.rate-control-section__slider:hover::-webkit-slider-thumb{box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 0 0 2px #fffffff0,0 5px 12px #2e35472e}.rate-control-section__slider:hover::-moz-range-thumb{box-shadow:inset 0 1px #ffffff47,inset 0 -1px #28324d47,0 0 0 2px #fffffff0,0 5px 12px #2e35472e}}@media (width>=768px) and (width<=1023.98px){.rate-control-section__row{gap:calc(6px * var(--ui-scale))}.rate-control-section__row .control-button:not(.control-button--adjust){min-width:calc(38px * var(--ui-scale))}}.control-button{border:1px solid var(--line);background:var(--pill);color:var(--ink);border-radius:var(--radius-medium);padding:calc(6px * var(--ui-scale)) 0;min-width:calc(40px * var(--ui-scale));min-height:calc(40px * 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:#6e7891;outline:none;box-shadow:inset 0 1px #ffffffd6,0 0 0 2px #dce0ef,0 4px 10px #2e354714}.control-button--adjust{min-width:calc(45px * var(--ui-scale))}.control-button--adjust.control-button--ghost{min-width:calc(45px * var(--ui-scale));min-height:calc(34px * var(--ui-scale));padding:calc(4px * var(--ui-scale)) 0;font-size:calc(11.2px * var(--ui-scale));letter-spacing:.01em;border-radius:999px;font-weight:500}.control-button--ghost{color:#66708a;opacity:.5;background:linear-gradient(#ffffff6b,#f0f3f92e);border-color:#6e789147;box-shadow:inset 0 1px #ffffffb3,inset 0 -1px #2e35470d}.control-button--ghost:not(:disabled):focus-visible{color:#48516a;opacity:.64;background:linear-gradient(#f0f3f9d6,#dee5f2b3);border-color:#6e789147;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #2e354714,0 3px 10px #2e35470d}.control-button--active{color:#2e3547;background:linear-gradient(#d7deef,#ccd5ea);border-color:#6e7891;box-shadow:inset 0 1px #ffffff6b,0 1px 2px #2e35470d,0 5px 12px #2e354714}@media (hover:hover) and (pointer:fine){.control-button--ghost:not(:disabled):hover{color:#48516a;opacity:.64;background:linear-gradient(#f0f3f9d6,#dee5f2b3);border-color:#6e7891;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #2e354714,0 3px 10px #2e35470d}}.toolbar{--toolbar-pad-top:calc(5px * var(--ui-scale))}@media (width<=767.98px){.toolbar{--toolbar-pad-top:calc(4px * var(--ui-scale))}}.toolbar{--toolbar-pad-bottom:calc(6px * var(--ui-scale))}@media (width<=767.98px){.toolbar{--toolbar-pad-bottom:calc(4px * var(--ui-scale))}}.toolbar{--toolbar-content-row-gap:0}@media (width<=767.98px){.toolbar{--toolbar-content-row-gap:calc(6px * var(--ui-scale))}}.toolbar{--toolbar-content-column-gap:calc(24px * var(--ui-scale))}@media (width<=767.98px){.toolbar{--toolbar-content-column-gap:calc(8px * var(--ui-scale))}}.toolbar{--toolbar-right-controls-gap:calc(32px * var(--ui-scale))}@media (width<=767.98px){.toolbar{--toolbar-right-controls-gap:calc(8px * var(--ui-scale))}}.toolbar{--toolbar-button-width:calc(52px * var(--ui-scale))}@media (width<=767.98px){.toolbar{--toolbar-button-width:calc(40px * var(--ui-scale))}}.toolbar{--toolbar-control-height:calc(40px * var(--ui-scale));--toolbar-play-button-width:calc(59.4px * var(--ui-scale))}@media (width<=767.98px){.toolbar{--toolbar-play-button-width:calc(40px * var(--ui-scale))}}.toolbar{--toolbar-ui-mode-width:calc(156px * var(--ui-scale))}@media (width<=767.98px){.toolbar{--toolbar-ui-mode-width:calc(120px * var(--ui-scale))}}.toolbar{--toolbar-transport-mode-width:calc(104px * var(--ui-scale))}@media (width<=767.98px){.toolbar{--toolbar-transport-mode-width:calc(84px * var(--ui-scale))}}.toolbar{z-index:1;width:calc(100% + 2 * var(--page-pad-inline));min-height:calc(46px * var(--ui-scale));margin-top:calc(-1 * var(--page-pad-top));margin-inline:calc(-1 * var(--page-pad-inline));padding:var(--toolbar-pad-top) var(--page-pad-inline) var(--toolbar-pad-bottom);border-bottom:1px solid var(--toolbar-panel-line);background:var(--toolbar-panel);box-shadow:var(--toolbar-panel-shadow);display:grid;position:sticky;top:0;overflow:hidden}.toolbar.control-section:not(:last-child){padding-bottom:var(--toolbar-pad-bottom)}.toolbar:before{content:"";pointer-events:none;background:linear-gradient(90deg,#c2cce524,#0000 18% 82%,#c2cce524),radial-gradient(circle,#ffffff94,#0000 62%);position:absolute;inset:0}.toolbar .toolbar-button{background:linear-gradient(#fffffff0,#f0f3f9c7);border-color:#7b859d47;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #2e354714,0 2px 6px #2e35470d}.toolbar .toolbar-button[data-transport-play-toggle]{width:var(--toolbar-play-button-width);min-width:var(--toolbar-play-button-width);background:linear-gradient(#fffffff0,#f0f3f9f0)}.toolbar .toolbar-button[data-transport-play-toggle][data-play-state=error]{color:#753e3e;background:linear-gradient(#f4ddddfa,#e7c1c1f0);border-color:#9d535357;box-shadow:inset 0 1px #ffffff6b,0 4px 12px #9d535324}.toolbar .segmented-control--joined{background:linear-gradient(#fffffff0,#f0f3f9c7);border-color:#7b859d47;box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #2e354714,0 2px 6px #2e35470d}.toolbar .segmented-control--joined .segmented-button{min-height:var(--toolbar-control-height)}.toolbar__content{align-items:center;row-gap:var(--toolbar-content-row-gap);column-gap:var(--toolbar-content-column-gap);z-index:1;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);width:100%;display:grid;position:relative}.toolbar__slot{pointer-events:auto;min-width:0}.toolbar__slot--left{justify-self:start}.toolbar__slot--center{justify-self:center}.toolbar__slot--right{justify-self:end}.toolbar__right-controls{justify-content:flex-end;align-items:center;gap:var(--toolbar-right-controls-gap);display:inline-flex}.toolbar__secondary-control{visibility:visible;opacity:1;transition:opacity .3s,visibility linear}.toolbar__secondary-control[data-secondary-controls-hidden]{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .8s,visibility 0s linear .8s}.toolbar__play-control{transition:opacity .3s,transform .3s}.toolbar__play-control--dimmed{opacity:.5;transition:opacity .8s,transform .8s;transform:scale(.985)}.toolbar-button{width:var(--toolbar-button-width);min-width:var(--toolbar-button-width);min-height:var(--toolbar-control-height);justify-content:center;align-items:center;padding:0;display:inline-flex}.toolbar-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}.toolbar-icon svg{flex:none;width:1em;height:1em;display:block}.toolbar-icon--ui-mode{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale));font-size:calc(18px * var(--ui-scale))}.toolbar-icon--transport-mode{width:calc(17px * var(--ui-scale));height:calc(17px * var(--ui-scale));font-size:calc(17px * var(--ui-scale))}.toolbar-icon--transport-mode svg{overflow:visible}.toolbar-spinner{width:calc(14px * var(--ui-scale));height:calc(14px * var(--ui-scale));border:calc(1.8px * var(--ui-scale)) solid currentColor;border-right-color:#0000;border-radius:999px;animation:.7s linear infinite toolbar-spinner-rotate}.segmented-control--ui-mode{width:var(--toolbar-ui-mode-width);grid-template-columns:repeat(3,minmax(0,1fr))}.segmented-control--ui-mode .segmented-button{min-height:var(--toolbar-control-height);justify-content:center;align-items:center;min-width:0;padding:0;line-height:1;display:inline-flex}.segmented-control--ui-mode .segmented-button svg{width:calc(18px * var(--ui-scale));height:calc(18px * var(--ui-scale))}.segmented-control--transport-mode{width:var(--toolbar-transport-mode-width);grid-template-columns:repeat(2,minmax(0,1fr))}.segmented-control--transport-mode .segmented-button{padding-inline:0}.toolbar--phone{flex:none;position:relative;top:auto}.toolbar--phone .toolbar__content--phone{justify-content:space-between;align-items:center;gap:0;display:flex}.toolbar--phone .toolbar__phone-control{min-width:0;display:inline-flex}@keyframes toolbar-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}