:root{--font-display:var(--font-onest), "Onest", system-ui, sans-serif;--font-text:var(--font-inter), "Inter", system-ui, sans-serif;--font-num:var(--font-onest), "Onest", system-ui, sans-serif;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:24px;--r-pill:999px;--r-sheet:32px;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--fs-12:.75rem;--fs-13:.8125rem;--fs-14:.875rem;--fs-15:.9375rem;--fs-16:1rem;--fs-18:1.125rem;--fs-24:1.5rem;--fs-30:1.875rem;--tap:48px;--btn-h:52px;--play:84px;--header-h:60px;--header-h-desk:76px;--nav-h:64px;--nav-inset:16px;--safe-bottom:env(safe-area-inset-bottom,0px);--measure:44rem;--wide:1280px;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.4, .64, 1);--dur-ui:.16s;--dur-view:.28s;--color-bg:#f3f1ec;--color-surface:#fff;--color-surface-2:#faf9f6;--color-text:#16171a;--color-muted:#5d5e63;--color-faint:#16171a1f;--color-border:#00000014;--color-accent:#ff9f45;--color-accent-strong:#d9681a;--color-accent-text:#1a0b00;--color-accent-soft:#f08a2e29;--color-on:#16171a;--color-on-text:#fff;--color-track:#16171a1a;--color-scrim:#16171a59;--color-ok:#1d7a4c;--color-warn:#b45309;--color-nav:#fff;--shadow-1:0 1px 2px #0000000d;--shadow-play:0 4px 14px #00000029;--shadow-overlay:0 24px 60px #28190a2e, 0 2px 8px #0000000f;--border:inset 0 0 0 1px var(--color-border);--theme-color:#f3f1ec;--wood:#c98a52;--wood-dark:#8f5a2e;--wood-face:#f4e9d6;--wood-grain:#6e3e1838;--wood-ink:#4a2c12;--steel:#2b2c31;--vinyl:#1b1c20;--vinyl-groove:#3a3b42;--device:#22232a;--device-ink:#fff;--led-off:#ffffff1a;--led-on:#f3f1ec;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg:#0f1013;--color-surface:#1c1d22;--color-surface-2:#17181c;--color-text:#fff;--color-muted:#ffffffa3;--color-faint:#ffffff24;--color-border:#ffffff12;--color-accent:#ff9f45;--color-accent-strong:#ff9f45;--color-accent-text:#1a0b00;--color-accent-soft:#ff9f452e;--color-on:#fff;--color-on-text:#111;--color-track:#ffffff1f;--color-scrim:#0000008c;--color-ok:#4ade80;--color-warn:#fbbf24;--color-nav:#17181c;--shadow-1:none;--shadow-play:0 4px 14px #00000029;--shadow-overlay:0 24px 60px #0000008c;--theme-color:#0f1013;--wood:#8a5a33;--wood-dark:#5e3a1d;--wood-face:#e8dcc6;--wood-grain:#1e0f044d;--wood-ink:#3a220d;--steel:#d9d6cf;--vinyl:#050506;--vinyl-groove:#2a2b30;--device:#08090b;--led-off:#ffffff17;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--color-bg:#0f1013;--color-surface:#1c1d22;--color-surface-2:#17181c;--color-text:#fff;--color-muted:#ffffffa3;--color-faint:#ffffff24;--color-border:#ffffff12;--color-accent:#ff9f45;--color-accent-strong:#ff9f45;--color-accent-text:#1a0b00;--color-accent-soft:#ff9f452e;--color-on:#fff;--color-on-text:#111;--color-track:#ffffff1f;--color-scrim:#0000008c;--color-ok:#4ade80;--color-warn:#fbbf24;--color-nav:#17181c;--shadow-1:none;--shadow-play:0 4px 14px #00000029;--shadow-overlay:0 24px 60px #0000008c;--theme-color:#0f1013;--wood:#8a5a33;--wood-dark:#5e3a1d;--wood-face:#e8dcc6;--wood-grain:#1e0f044d;--wood-ink:#3a220d;--steel:#d9d6cf;--vinyl:#050506;--vinyl-groove:#2a2b30;--device:#08090b;--led-off:#ffffff17;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-accent=coral]{--color-accent:#ff7a5c;--color-accent-strong:#c8442a;--color-accent-text:#1f0600;--color-accent-soft:#ff7a5c2e}:root[data-accent=sun]{--color-accent:#f5c542;--color-accent-strong:#8a6a00;--color-accent-text:#1c1400;--color-accent-soft:#f5c5422e}:root[data-accent=sky]{--color-accent:#5aa9ff;--color-accent-strong:#1f6fd1;--color-accent-text:#001428;--color-accent-soft:#5aa9ff2e}:root[data-accent=mint]{--color-accent:#3dd19a;--color-accent-strong:#12805a;--color-accent-text:#00180e;--color-accent-soft:#3dd19a2e}:root[data-accent=rose]{--color-accent:#ff7ea8;--color-accent-strong:#c23b6f;--color-accent-text:#22000d;--color-accent-soft:#ff7ea82e}@media (prefers-color-scheme:dark){:root[data-accent=coral]:not([data-theme=light]){--color-accent-strong:#ff7a5c}:root[data-accent=sun]:not([data-theme=light]){--color-accent-strong:#f5c542}:root[data-accent=sky]:not([data-theme=light]){--color-accent-strong:#5aa9ff}:root[data-accent=mint]:not([data-theme=light]){--color-accent-strong:#3dd19a}:root[data-accent=rose]:not([data-theme=light]){--color-accent-strong:#ff7ea8}}:root[data-accent=coral][data-theme=dark]{--color-accent-strong:#ff7a5c}:root[data-accent=sun][data-theme=dark]{--color-accent-strong:#f5c542}:root[data-accent=sky][data-theme=dark]{--color-accent-strong:#5aa9ff}:root[data-accent=mint][data-theme=dark]{--color-accent-strong:#3dd19a}:root[data-accent=rose][data-theme=dark]{--color-accent-strong:#ff7ea8}@media (min-width:1024px){:root{--play:76px}}
html{background:var(--color-bg)}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-text);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}:where(button){font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}:where(button:disabled){cursor:default}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.025em;text-wrap:balance;font-weight:700}a{color:inherit}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.04em}.sr{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.lbl{margin:0 0 var(--s-2);font-size:var(--fs-13);color:var(--color-muted);font-weight:600}.hint{margin:var(--s-2) 0 0;color:var(--color-muted);font-size:var(--fs-13);display:block}.hint.err{color:var(--color-warn)}kbd{font-family:var(--font-text);font-size:var(--fs-12);box-shadow:var(--border);background:var(--color-surface);border-radius:6px;padding:1px 6px}.btn{min-block-size:var(--btn-h);padding-inline:var(--s-4);border-radius:var(--r-pill);background:var(--color-surface);box-shadow:var(--border), var(--shadow-1);font-weight:600;font-size:var(--fs-16);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui);justify-content:center;align-items:center;gap:6px;display:inline-flex}.btn:active{transform:scale(.96)}.btn.sm{min-block-size:40px;padding-inline:var(--s-3);font-size:var(--fs-14)}.btn.pri{background:var(--color-accent);color:var(--color-accent-text);box-shadow:none}.btn.on,.btn[aria-pressed=true]{background:var(--color-on);color:var(--color-on-text);box-shadow:none}.ib{border-radius:var(--r-pill);block-size:44px;inline-size:44px;color:var(--color-text);transition:background-color var(--dur-ui);place-items:center;display:inline-grid}.ib:hover{background:var(--color-faint)}.link-btn{color:var(--color-accent-strong);font-weight:600;font-size:var(--fs-14);text-underline-offset:3px;text-decoration:underline}.pill{border-radius:var(--r-pill);background:var(--color-surface);min-block-size:40px;box-shadow:var(--border);font-size:var(--fs-14);white-space:nowrap;align-items:center;gap:6px;max-inline-size:100%;padding-inline:14px 10px;font-weight:600;display:inline-flex}.pill>span{text-overflow:ellipsis;overflow:hidden}.chip{border-radius:var(--r-md);background:var(--color-surface);min-block-size:44px;box-shadow:var(--border);font-size:var(--fs-15);white-space:nowrap;justify-content:center;align-items:center;gap:6px;padding-inline:14px;font-weight:600;text-decoration:none;display:inline-flex}.chip[aria-pressed=true]{background:var(--color-on);color:var(--color-on-text);box-shadow:none}.chip .glyph{font-size:var(--fs-13);opacity:.7;text-align:center;min-inline-size:1.2em}.chips{gap:var(--s-2);flex-wrap:wrap;display:flex}.seg{background:var(--color-surface);box-shadow:var(--border);border-radius:20px;grid-auto-columns:1fr;grid-auto-flow:column;gap:2px;padding:4px;display:grid}.seg button{min-block-size:36px;font-size:var(--fs-14);color:var(--color-muted);white-space:nowrap;transition:background-color var(--dur-ui), color var(--dur-ui);border-radius:16px;padding-inline:10px;font-weight:600}.seg button[aria-checked=true]{background:var(--color-on);color:var(--color-on-text)}.text-in{font:inherit;font-size:var(--fs-16);color:var(--color-text);background:var(--color-surface-2);box-shadow:var(--border);border-radius:var(--r-md);min-block-size:44px;padding-inline:var(--s-3);border:0;inline-size:100%}.text-in[aria-invalid]{box-shadow:inset 0 0 0 2px var(--color-warn)}.card{background:var(--color-surface);border-radius:var(--r-xl);box-shadow:var(--border), var(--shadow-1);padding:var(--s-4)}.switch{appearance:none;background:var(--color-track);cursor:pointer;block-size:28px;inline-size:48px;transition:background-color var(--dur-ui);border-radius:999px;flex:none;margin:0;position:relative}.switch:after{content:"";block-size:22px;inline-size:22px;transition:transform var(--dur-ui) var(--ease-out);background:#fff;border-radius:50%;position:absolute;inset-block-start:3px;inset-inline-start:3px;box-shadow:0 1px 3px #00000040}.switch:checked{background:var(--color-accent)}.switch:checked:after{transform:translate(20px)}[dir=rtl] .switch:checked:after{transform:translate(-20px)}input[type=range]{appearance:none;background:0 0;block-size:28px;inline-size:100%;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--color-accent) var(--v,50%), var(--color-track) var(--v,50%));border-radius:3px;block-size:6px}input[type=range]::-moz-range-track{background:var(--color-track);border-radius:3px;block-size:6px}input[type=range]::-moz-range-progress{background:var(--color-accent);border-radius:3px;block-size:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:50%;block-size:24px;inline-size:24px;margin-block-start:-9px;box-shadow:0 1px 4px #0000004d}input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:50%;block-size:24px;inline-size:24px;box-shadow:0 1px 4px #0000004d}.range-row{align-items:center;gap:var(--s-3);min-block-size:44px;font-size:var(--fs-14);grid-template-columns:minmax(7rem,auto) 1fr 3ch;font-weight:600;display:grid}.range-row output{text-align:end;color:var(--color-muted);font-variant-numeric:tabular-nums}.row{justify-content:space-between;align-items:center;gap:var(--s-3);min-block-size:48px;font-size:var(--fs-15);font-weight:600;display:flex}.skip{position:absolute;inset-inline-start:-9999px}.skip:focus{z-index:50;background:var(--color-surface);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);inset-block-start:var(--s-4);inset-inline-start:var(--s-4)}header.top{z-index:20;justify-content:space-between;align-items:center;gap:var(--s-3);block-size:var(--header-h);padding-inline:var(--s-4);background:var(--color-bg);display:flex;position:sticky;inset-block-start:0}.logo{font-family:var(--font-display);letter-spacing:-.035em;color:var(--color-text);align-items:center;gap:10px;font-size:1.375rem;font-weight:700;text-decoration:none;display:inline-flex}.logo b{color:var(--color-accent-strong);font-weight:700}.mark{background:var(--color-accent);block-size:26px;inline-size:26px;-webkit-mask:var(--mark-shape) center / contain no-repeat;-webkit-mask:var(--mark-shape) center / contain no-repeat;mask:var(--mark-shape) center / contain no-repeat;--mark-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M10.4 1.5h5.2a1 1 0 0 1 1 .8L21 22H5l4.4-19.7a1 1 0 0 1 1-.8z'/%3E%3Crect x='3.5' y='21.5' width='19' height='3' rx='1'/%3E%3C/svg%3E");flex:none;position:relative}.mark:after{content:"";background:var(--color-bg);transform-origin:50% 100%;border-radius:2px;block-size:17px;inline-size:2.6px;position:absolute;inset-block-end:4px;inset-inline-start:calc(50% - 1.3px);transform:rotate(17deg)}.logo:hover .mark:after{animation:mark-tick 1s var(--ease-out) 2}@keyframes mark-tick{25%{transform:rotate(-17deg)}50%{transform:rotate(17deg)}75%{transform:rotate(-17deg)}}@media (prefers-reduced-motion:reduce){.logo:hover .mark:after{animation:none}}.acts{gap:2px;display:flex}.dnav{display:none}.tabbar{z-index:30;block-size:calc(76px + var(--safe-bottom));padding:8px 8px calc(10px + var(--safe-bottom));background:var(--color-nav);box-shadow:0 -1px 0 var(--color-border);grid-auto-columns:1fr;grid-auto-flow:column;align-items:center;display:grid;position:fixed;inset-block-end:0;inset-inline:0}.tabbar a{block-size:100%;color:var(--color-muted);font-size:var(--fs-12);-webkit-tap-highlight-color:transparent;align-content:center;justify-items:center;gap:4px;font-weight:600;text-decoration:none;display:grid}.tab-ic{block-size:30px;inline-size:56px;transition:background-color var(--dur-ui);border-radius:15px;place-items:center;display:grid}.tab-lb{white-space:nowrap;text-overflow:ellipsis;max-inline-size:100%;overflow:hidden}.tabbar [aria-current=page]{color:var(--color-text)}.tabbar [aria-current=page] .tab-ic{background:var(--color-accent-soft);color:var(--color-accent-strong)}main{padding-block-end:calc(96px + var(--safe-bottom))}dialog.sheet{box-sizing:border-box;overscroll-behavior:contain;background:var(--color-surface);max-block-size:92dvh;inline-size:auto;max-inline-size:none;color:var(--color-text);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-overlay);border:0;margin:0;padding:0;position:fixed;inset-block:auto 0;inset-inline:0;overflow-y:auto}dialog.sheet[open]{animation:sheet-in var(--dur-view) var(--ease-out)}dialog.sheet::backdrop{background:var(--color-scrim)}@keyframes sheet-in{0%{opacity:0;transform:translateY(40px)}}.sheet-in{padding:10px var(--s-5) calc(var(--s-6) + var(--safe-bottom));gap:var(--s-5);display:grid}.grab{background:var(--color-faint);border-radius:3px;justify-self:center;block-size:5px;inline-size:40px}.sheet-head{justify-content:space-between;align-items:center;gap:var(--s-3);display:flex}.sheet-head h2{font-size:var(--fs-24);margin:0}.sheet-sec{gap:var(--s-2);display:grid}.sheet-foot{gap:var(--s-2);padding-block:var(--s-3) var(--s-2);background:inherit;grid-template-columns:1fr 1fr;display:grid;position:sticky;inset-block-end:calc(-1 * (var(--s-6) + var(--safe-bottom)))}.sheet-foot .btn{white-space:nowrap;padding-inline:var(--s-3)}.custom-meter{gap:var(--s-2);grid-template-columns:1fr auto;display:grid}.sub-toggles{gap:var(--s-2);display:flex}.sub-dot{block-size:44px;inline-size:44px;box-shadow:inset 0 0 0 2px var(--color-faint);border-radius:50%}.sub-dot[aria-pressed=true]{background:var(--color-accent);box-shadow:none}.sub-dot:disabled{background:var(--color-on)}.acc-bars{gap:var(--s-2);align-items:flex-end;block-size:112px;display:flex}.acc-bars.compact{block-size:64px}.acc-bar{border-radius:12px;flex:1;grid-template-rows:1fr auto;align-items:end;gap:4px;block-size:100%;min-inline-size:22px;display:grid}.acc-bar span{background:var(--color-faint);min-block-size:6px;transition:block-size var(--dur-ui) var(--ease-out);border-radius:10px;display:block}.acc-bar[data-acc=f] span{background:var(--color-accent)}.acc-bar[data-acc=mf] span{background:var(--color-muted)}.acc-bar[data-acc=mute] span{box-shadow:inset 0 0 0 1.5px var(--color-faint);background:0 0}.acc-bar b{font-size:var(--fs-12);color:var(--color-muted);font-weight:600}.compact .acc-bar b{display:none}.tool-page{padding-block-start:0}.metro{gap:var(--s-6);padding:var(--s-2) var(--s-4) var(--s-4);max-inline-size:var(--wide);margin-inline:auto;display:grid;position:relative}.metro-main{gap:var(--s-3);justify-items:stretch;min-inline-size:0;display:grid}.metro-head{justify-content:space-between;align-items:center;gap:var(--s-3);min-inline-size:0;display:flex}.tool-h1{font-size:var(--fs-18);letter-spacing:-.02em;color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;margin:0;font-weight:600;overflow:hidden}.tool-answer{display:none}.tool-note{margin:var(--s-2) 0 0;text-align:center;max-inline-size:34rem;font-size:var(--fs-13);color:var(--color-muted);justify-self:center;line-height:1.45}.modes{inline-size:100%}.visual-wrap{place-items:center;display:grid;position:relative}.orbit{aspect-ratio:1;touch-action:none;inline-size:clamp(220px,100dvh - 530px,min(100%,300px));position:relative}.orbit-svg{-webkit-user-select:none;user-select:none;block-size:100%;inline-size:100%;display:block;overflow:visible}.orbit-field{fill:var(--color-surface);stroke:var(--color-border);stroke-width:1px}.orbit-bezel line{stroke:var(--color-text);stroke-opacity:.16;stroke-width:1.2px;stroke-linecap:round}.orbit-bezel line[data-major]{stroke-opacity:.32;stroke-width:1.6px}.orbit-ring{fill:none;stroke:var(--color-faint);stroke-width:2px}.orbit-grip{fill:none;stroke:#0000;stroke-width:56px;cursor:grab}.orbit-tick{fill:var(--color-faint)}.orbit-tail path{fill:none;stroke:var(--color-accent);stroke-linecap:round}.orbit-halo{fill:var(--color-accent)}.orbit-beat{fill:var(--color-bg);stroke:var(--color-text);stroke-opacity:.7;stroke-width:2.5px;transition:fill 90ms, r .16s var(--ease-out)}.orbit-beat[data-acc=f]{fill:var(--color-text);fill-opacity:.85;stroke:none}.orbit-beat[data-acc=mf]{stroke-width:3.5px}.orbit-beat[data-acc=mute]{stroke-dasharray:3 3;stroke-opacity:.5}.orbit-beat[data-on]{fill:var(--color-accent);fill-opacity:1;stroke:none}.orbit-hit{fill:#0000;cursor:pointer;outline:none}.orbit-hit:focus-visible{stroke:var(--color-accent);stroke-width:2px}.orbit-dot{fill:var(--color-text)}.orbit-center{text-align:center;pointer-events:none;place-items:center;display:grid;position:absolute;inset:22%}.orbit-center>*{pointer-events:auto}.bpm-display{justify-items:center;gap:4px;display:grid}.bpm-value{font-family:var(--font-num);letter-spacing:-.05em;font-variant-numeric:tabular-nums;border-radius:var(--r-md);padding-inline:6px;font-size:clamp(4rem,22vw,5.5rem);font-weight:700;line-height:1}.bpm-input{text-align:center;border-radius:var(--r-md);background:var(--color-surface);inline-size:4.2ch;color:var(--color-text);box-shadow:inset 0 0 0 2px var(--color-accent);border:0;font-size:clamp(3rem,18vw,4.5rem);font-weight:700}.bpm-term{font-size:var(--fs-13);color:var(--color-muted);margin:0}.bpm-hint{display:none}@media (hover:hover){.bpm-hint{display:inline}}.bar-counter{text-align:center;font-size:var(--fs-13);color:var(--color-muted);font-variant-numeric:tabular-nums;min-block-size:1.4em;margin:0}.metro[data-mode=steady] .bar-counter:empty{min-block-size:0}.mode-summary{text-align:center;font-size:var(--fs-14);color:var(--color-muted);margin:0}.mode-summary b{color:var(--color-text)}.tempo-row{grid-template-columns:1fr 1fr 1.4fr 1fr 1fr;gap:6px;display:grid}.tempo-row .btn{font-variant-numeric:tabular-nums;padding-inline:0}.tempo-row .tap[data-flash]{background:var(--color-accent-soft)}.play-row{place-items:center;gap:var(--s-3);padding-block:var(--s-2);grid-template-columns:1fr auto 1fr;display:grid}.play-row>.play{grid-column:2}.play-side.start{grid-column:1;justify-self:start}.play-side.end{grid-column:3;justify-self:end}.play{inline-size:var(--play);block-size:var(--play);background:var(--color-accent);color:var(--color-accent-text);box-shadow:var(--shadow-play);transition:transform var(--dur-ui) var(--ease-spring);-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:50%;place-items:center;display:grid}.play:active{transform:scale(.94)}.play svg{margin-inline-start:3px}.play[aria-pressed=true] svg{margin:0}.metro-side{display:none}.chips.grid2,.chips.grid3,.chips.grid4{gap:6px;display:grid}.chips.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.chips.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.chips.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}.chips.grid2 .chip,.chips.grid3 .chip,.chips.grid4 .chip{padding-inline:8px}.sub-chip{justify-content:flex-start}.panel{background:var(--color-surface);border-radius:var(--r-xl);box-shadow:var(--border), var(--shadow-1);padding:var(--s-4) var(--s-5);gap:var(--s-3);display:grid}.panel-head{justify-content:space-between;align-items:center;display:flex}.panel-title{font-size:var(--fs-15);margin:0;font-weight:600}.keys{text-align:center}.beat-flash{z-index:60;pointer-events:none;background:var(--flash,var(--color-accent));opacity:0;position:fixed;inset:0}.noscript{padding:var(--s-3);border-radius:var(--r-md);background:var(--color-accent-soft)}.wrap{max-inline-size:var(--measure);padding-inline:var(--s-4);margin-inline:auto}.page-text{padding-block:var(--s-8) var(--s-10)}.page-text>.lead{display:none}.content h1{font-size:var(--fs-30);margin-block:var(--s-6) var(--s-3);line-height:1.15}.content h2{font-size:var(--fs-24);margin-block:var(--s-8) var(--s-3);line-height:1.2}.content h3{font-size:var(--fs-18);margin-block:var(--s-6) var(--s-2)}.content p,.content li{line-height:1.6}.content .lead{font-size:var(--fs-18);color:var(--color-muted)}.content table{border-collapse:collapse;inline-size:100%;font-size:var(--fs-15)}.content th,.content td{text-align:start;border-block-end:1px solid var(--color-border);vertical-align:top;padding:10px 8px}.table-scroll{overflow-x:auto}.faq details{border-block-end:1px solid var(--color-border);padding-block:var(--s-3)}.faq summary{cursor:pointer;align-items:center;min-block-size:44px;font-weight:600;display:flex}.faq details p{margin-block:var(--s-2) 0;color:var(--color-muted)}.crumbs ol{margin:0 0 var(--s-4);font-size:var(--fs-14);color:var(--color-muted);flex-wrap:wrap;gap:6px;padding:0;list-style:none;display:flex}.crumbs li+li:before{content:"/";opacity:.5;margin-inline-end:6px}.crumbs a{text-decoration:none}.related h2{font-size:var(--fs-18)}.link-chips{gap:var(--s-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.link-chips .chip{font-size:var(--fs-14);min-block-size:40px}footer.site{padding-block:var(--s-8) calc(var(--s-8) + 76px + var(--safe-bottom));border-block-start:1px solid var(--color-border);font-size:var(--fs-14);margin-block-start:var(--s-8)}footer.site .wrap{max-inline-size:var(--wide);gap:var(--s-6);display:grid}.foot-tools{gap:var(--s-5);grid-template-columns:repeat(2,1fr);display:grid}.foot-h{margin:0 0 var(--s-2);font-weight:600}.foot-tools ul,.foot-legal{gap:6px;margin:0;padding:0;list-style:none;display:grid}.foot-tools a,.foot-legal a{color:var(--color-muted);text-decoration:none}.foot-tools a:hover,.foot-legal a:hover{color:var(--color-text);text-decoration:underline}.foot-legal{flex-wrap:wrap;gap:8px 16px;display:flex}.pyxl-lang ul{flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;display:flex}.pyxl-lang a{color:var(--color-muted)}.pyxl-lang [aria-current]{color:var(--color-text);font-weight:700}.pyxl-locale-suggest{background:var(--color-surface);border-block-end:1px solid var(--color-border);padding:10px var(--s-4);font-size:var(--fs-14)}.pyxl-locale-suggest button{color:var(--color-muted);text-decoration:underline}@media (min-width:1024px){header.top{block-size:var(--header-h-desk);padding-inline:var(--s-8);border-block-end:1px solid var(--color-border)}.dnav{gap:30px;display:flex}.dnav a{color:var(--color-muted);font-size:var(--fs-15);padding-block:6px;font-weight:600;text-decoration:none}.dnav a:hover{color:var(--color-text)}.dnav a[aria-current=page]{color:var(--color-text);box-shadow:inset 0 -2px 0 var(--color-accent)}.tabbar{display:none}main{padding-block-end:0}footer.site{padding-block-end:var(--s-8)}.foot-tools{grid-template-columns:repeat(4,1fr)}.metro{max-inline-size:1360px;padding:20px var(--s-8) 24px;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:20px 24px}.metro-main{grid-area:1/1/span 2;align-content:start;justify-items:center;gap:14px}.metro-left{grid-area:1/2;position:static!important}.metro-right{grid-area:2/2;position:static!important}.metro-side{align-content:start;gap:14px;display:grid;position:sticky;inset-block-start:calc(var(--header-h-desk) + 20px)}.metro-side .panel{gap:var(--s-5);padding:var(--s-5)}.metro-side .sheet-sec{gap:8px}.metro-side .lbl{font-size:var(--fs-12);text-transform:none;margin:0}.metro-side .chip{min-block-size:38px;font-size:var(--fs-14);border-radius:10px}.metro-side .sub-dot{block-size:32px;inline-size:32px}.metro-side .range-row{min-block-size:34px;font-size:var(--fs-13);grid-template-columns:5.5rem 1fr 3ch}.metro-side .custom-meter .text-in{min-block-size:38px}.metro-side .seg button{min-block-size:32px}.metro-main>*{inline-size:min(100%,560px)}.metro-head{justify-content:center}.metro-head .pill,.tool-answer,.bar-counter:empty{display:none}.tool-h1{font-size:var(--fs-15);color:var(--color-muted);letter-spacing:0;text-align:center;font-weight:600}.visual-wrap{inline-size:100%}.orbit{inline-size:clamp(300px,100dvh - 400px,480px)}.bpm-value{font-size:clamp(5.5rem,13dvh,8.5rem)}.tempo-row{grid-template-columns:repeat(5,72px);justify-content:center}.play-row{inline-size:min(100%,380px);padding-block:0}@media (min-width:1240px){.metro{min-block-size:calc(100dvh - var(--header-h-desk));grid-template-rows:auto;grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(260px,300px)}.metro-left{grid-area:1/1;position:sticky!important}.metro-main{grid-area:1/2}.metro-right{grid-area:1/3;position:sticky!important}}.metro-side .acc-bars{gap:6px;block-size:92px}.metro-side .sl-empty p{display:none}.sl-aside:has(.sl-empty) .panel-head .link-btn{display:none}.page-text{max-inline-size:1100px;padding-block:var(--s-10);border-block-start:1px solid var(--color-border);column-gap:48px;row-gap:var(--s-4);font-size:var(--fs-14);color:var(--color-muted);grid-template-columns:1fr 1fr;align-items:start;display:grid}.page-text>*{grid-column:1;margin:0}.page-text>.lead{font-size:var(--fs-15);color:var(--color-text);display:block}.page-text>.faq{grid-area:2/2/span 4}.page-text>.related{grid-column:1/-1}.page-text>.crumbs{grid-row:1}.page-text h2{font-size:var(--fs-16);margin:0 0 6px}.page-text>.crumbs{grid-column:1/-1}.page-text .faq summary{min-block-size:36px;font-size:var(--fs-14);color:var(--color-text)}.page-text .related .chip{min-block-size:32px;font-size:var(--fs-13);box-shadow:none;background:var(--color-surface);padding-inline:10px;font-weight:500}dialog.sheet{border-radius:var(--r-sheet);max-block-size:86dvh;inline-size:min(560px,92vw);inset:50% auto auto 50%;transform:translate(-50%,-50%)}dialog.sheet[open]{animation:none}.grab{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
:root[data-os=ios]{--glass:color-mix(in srgb, var(--color-surface) 62%, transparent);--glass-strong:color-mix(in srgb, var(--color-surface) 78%, transparent);--glass-edge:inset 0 0 0 .5px color-mix(in srgb, var(--color-text) 14%, transparent), inset 0 1px 0 #ffffff38;--glass-blur:saturate(1.8) blur(22px)}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){:root[data-os=ios] header.top{background:color-mix(in srgb, var(--color-bg) 72%, transparent);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}:root[data-os=ios] .tabbar{background:var(--glass);block-size:64px;box-shadow:var(--glass-edge), 0 8px 28px #0000002e;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:32px;padding:6px;inset-block-end:calc(8px + var(--safe-bottom));inset-inline:16px}:root[data-os=ios] .tabbar a{border-radius:26px;gap:2px}:root[data-os=ios] .tabbar .tab-ic{background:0 0;block-size:26px;inline-size:auto}:root[data-os=ios] .tabbar [aria-current=page]{background:color-mix(in srgb, var(--color-text) 9%, transparent);color:var(--color-accent-strong)}:root[data-os=ios] .tabbar [aria-current=page] .tab-ic{background:0 0}:root[data-os=ios] .pill,:root[data-os=ios] .seg,:root[data-os=ios] .tempo-row .btn,:root[data-os=ios] .panel{background:var(--glass);box-shadow:var(--glass-edge);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}:root[data-os=ios] dialog.sheet{background:var(--glass-strong);box-shadow:var(--glass-edge), var(--shadow-overlay);-webkit-backdrop-filter:saturate(1.8)blur(30px);backdrop-filter:saturate(1.8)blur(30px)}:root[data-os=ios] dialog.sheet::backdrop{background:#00000047}:root[data-os=ios] .sheet-foot{background:0 0}}:root[data-os=android]{--r-pill:20px}:root[data-os=android] .tabbar{block-size:calc(80px + var(--safe-bottom));background:var(--color-surface);box-shadow:none;border-block-start:1px solid var(--color-border)}:root[data-os=android] .tabbar a{gap:4px;font-weight:500}:root[data-os=android] .tabbar .tab-ic{block-size:32px;inline-size:64px;transition:background-color var(--dur-ui);border-radius:16px;place-items:center;display:grid}:root[data-os=android] .tabbar [aria-current=page] .tab-ic{background:var(--color-accent-soft);color:var(--color-accent-strong)}:root[data-os=android] :is(.btn,.pill,.chip):not([aria-pressed=true],.pri,.on){box-shadow:none;background:var(--color-surface-2)}:root[data-os=android] .chip[aria-pressed=true],:root[data-os=android] .panel{box-shadow:none}:root[data-os=android] dialog.sheet{box-shadow:none;border-radius:28px 28px 0 0}:root[data-os=android] .play{border-radius:28px}:root[data-os=android] :is(.btn,.chip,.pill,.seg button,.tabbar a,.play,.ib){position:relative;overflow:hidden}.ripple{pointer-events:none;opacity:.16;animation:ripple .42s var(--ease-out) forwards;background:currentColor;border-radius:50%;position:absolute;transform:scale(0)}@keyframes ripple{to{opacity:0;transform:scale(1)}}@media (min-width:1024px){:root[data-os] .tabbar{display:none}}@media (prefers-reduced-transparency:reduce){:root[data-os=ios] .tabbar,:root[data-os=ios] dialog.sheet,:root[data-os=ios] .panel,:root[data-os=ios] .pill,:root[data-os=ios] .seg{background:var(--color-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}@media (prefers-reduced-motion:reduce){.ripple{display:none}}
