@font-face{font-family:Space Grotesk Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(./space-grotesk-vietnamese-wght-normal-D0rl6rjA.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Grotesk Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(./space-grotesk-latin-ext-wght-normal-D9tNdqV9.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Grotesk Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(./space-grotesk-latin-wght-normal-BhU9QXUp.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--color-bg:#f4f1ec;--color-surface:#fbfaf7;--color-text:#1b1a18;--color-text-muted:#6b665f;--color-line:#dcd6cc;--color-control:#8f897f;--color-accent:#c63f1f;--color-on-accent:#fff;--color-accent-soft:#c63f1f1f;--color-focus:#c63f1f;--font-sans:"Space Grotesk Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.25rem;--text-tempo:clamp(5.5rem, 26vw, 9rem);--gutter:16px;--space-1:.25rem;--space-2:.5rem;--space-3:1rem;--space-4:1.5rem;--space-5:2.5rem;--space-6:3.5rem;--radius-sm:10px;--radius:14px;--touch-min:44px;--content-width:34rem;--play-size:5.5rem;--ease-out:cubic-bezier(.2, .7, .2, 1);--duration-fast:.12s}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}:root:not([data-theme=light]){--color-bg:#141311;--color-surface:#1c1b18;--color-text:#f2efe9;--color-text-muted:#a29d94;--color-line:#34312c;--color-control:#6f6a61;--color-accent:#ff7552;--color-on-accent:#1a0d08;--color-accent-soft:#ff755224;--color-focus:#ff7552}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#141311;--color-surface:#1c1b18;--color-text:#f2efe9;--color-text-muted:#a29d94;--color-line:#34312c;--color-control:#6f6a61;--color-accent:#ff7552;--color-on-accent:#1a0d08;--color-accent-soft:#ff755224;--color-focus:#ff7552}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{min-height:100vh;background:var(--color-bg);min-height:100dvh;color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-md);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}button,input,select{font:inherit;color:inherit}button,label,select{touch-action:manipulation}:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}:root[data-input=pointer] :focus-visible,:root[data-input=pointer] :focus-visible .slider-thumb,:root[data-input=pointer] :focus-visible .switch-track,:root[data-input=pointer] .segment-input:focus-visible+.segment-face{outline:none}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}.app{width:min(100%, var(--content-width));min-height:100vh;min-height:100dvh;padding:var(--space-3) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));flex-direction:column;margin-inline:auto;display:flex}.app-body{display:contents}.app-header{min-height:var(--touch-min);justify-content:space-between;align-items:center;display:flex}.app-title{font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin:0;font-weight:500}.app-main{justify-content:center;gap:clamp(var(--space-3), 4.4vh, var(--space-5));padding-block:var(--space-4);flex-direction:column;flex:1;display:flex}.transport{align-items:end;gap:var(--space-2);padding-top:var(--space-3);grid-template-columns:1fr auto 1fr;display:grid}.section-label{margin-bottom:var(--space-2);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);padding:0;font-weight:600}.app:has(.beats.is-multirow){--text-tempo:clamp(4rem, 17vw, 6rem)}.app:has(.beats.is-multirow) .app-main{gap:clamp(var(--space-3), 3vh, var(--space-5))}@media (max-height:760px){:root{--text-tempo:clamp(4.5rem, 19vw, 6.5rem);--play-size:4.75rem}.app{padding-top:var(--space-2);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom))}.app-main{gap:var(--space-4);padding-block:var(--space-2)}.tempo{gap:var(--space-2)}.app .segment-face{min-height:46px}.app .time-signatures .segment-face{min-height:44px;padding:2px}.app .subdivisions .segment-face{min-height:44px;padding:2px 6px}.app .subdivisions svg{height:1.7rem}.beats{--body-height:20px;--cap-height:11px}.beat{min-height:54px;padding:6px 0}}@media (max-height:700px){:root{--text-tempo:clamp(4rem, 17vw, 5.5rem)}.app-main{gap:var(--space-3);padding-block:0}.app:has(.beats.is-multirow){--text-tempo:3.4rem}.app:has(.beats.is-multirow) .app-main{gap:12px}.app .beats.is-multirow .beat{min-height:38px}.transport{padding-top:var(--space-2)}}@media (min-width:48rem) and (min-height:62rem){.app{padding-top:var(--space-4)}.app-main{gap:var(--space-6)}}@media (orientation:landscape) and (max-height:500px){:root{--text-tempo:4.25rem;--play-size:4.25rem}.app{padding-top:0;padding-bottom:calc(var(--space-1) + env(safe-area-inset-bottom));column-gap:var(--space-4);grid-template:"header header""beats beats""tempo ts""tempo sub""tempo play"/minmax(0,.65fr) minmax(0,1.35fr);align-items:center;row-gap:4px;width:min(100%,60rem);display:grid}.app-header{grid-area:header}.beat{min-height:48px;padding:4px 0}.app-main{display:contents}.beats{grid-area:beats}.tempo{grid-area:tempo}.time-signatures{grid-area:ts}.time-signatures .segmented-options{gap:var(--space-1);grid-template-columns:repeat(8,1fr)}.subdivisions{grid-area:sub}.transport{grid-area:play;padding-top:0}}.tempo{align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.tempo-readout{-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex}.tempo-number{font-size:var(--text-tempo);letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-weight:300;line-height:.9}.tempo-caption{align-items:center;gap:var(--space-1);margin-top:var(--space-2);font-size:var(--text-sm);letter-spacing:.12em;color:var(--color-text-muted);font-weight:500;display:inline-flex}.tempo-unit-icon{width:.8rem;height:1.1rem;display:inline-flex}.tempo-unit-icon svg{width:100%;height:100%}.slider{--thumb-size:28px;width:100%;padding:10px calc(var(--thumb-size) / 2) 18px;touch-action:pan-y;cursor:pointer;border-radius:var(--radius-sm);-webkit-user-select:none;user-select:none}.slider:focus-visible{outline:none}.slider-rail{height:var(--thumb-size);align-items:center;display:flex;position:relative}.slider-track{background:var(--color-line);border-radius:999px;width:100%;height:4px;position:relative;overflow:hidden}.slider-fill{background:var(--color-accent);position:absolute;inset:0 auto 0 0}.slider-marks{height:6px;position:absolute;inset:auto 0 -10px}.slider-mark{background:var(--color-line);width:1px;height:100%;position:absolute;top:0;transform:translate(-50%)}.slider-thumb{width:var(--thumb-size);height:var(--thumb-size);background:var(--color-surface);border:2px solid var(--color-accent);transition:transform var(--duration-fast) var(--ease-out);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 3px #0000002e}.slider:hover .slider-thumb,.slider.is-dragging .slider-thumb{transform:translate(-50%,-50%)scale(1.12)}.slider.is-dragging .slider-thumb{background:var(--color-accent)}.slider:focus-visible .slider-thumb{outline:3px solid var(--color-focus);outline-offset:3px}.segmented{border:0;min-width:0;margin:0;padding:0}.segmented-options{gap:var(--space-2);display:grid}.segment{cursor:pointer;display:block;position:relative}.segment-face{justify-content:center;align-items:center;gap:var(--space-1);min-height:56px;padding:var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-muted);transition:border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);flex-direction:column;display:flex}.segment:hover .segment-face{border-color:var(--color-text-muted);color:var(--color-text)}.segment-input:checked+.segment-face{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-text)}.segment-input:focus-visible+.segment-face{outline:3px solid var(--color-focus);outline-offset:2px}.time-signatures .segmented-options{gap:var(--space-1);grid-template-columns:repeat(4,1fr)}.time-signatures .segment-face{min-height:46px;padding:3px}@media (min-width:27rem){.time-signatures .segmented-options{grid-template-columns:repeat(8,1fr);gap:6px}.time-signatures .segment-face{min-height:56px;padding:var(--space-2)}}@media (min-width:30rem){.time-signatures .segmented-options{gap:var(--space-2)}}.fraction{font-size:var(--text-md);font-variant-numeric:tabular-nums;flex-direction:column;align-items:center;font-weight:600;line-height:1;display:inline-flex}.fraction>span:first-child{border-bottom:1.5px solid;padding:0 .15em .2em}.fraction>span:last-child{padding-top:.2em}.subdivisions .segmented-options{gap:var(--space-1);grid-template-columns:repeat(4,1fr)}.subdivisions .segment-face{min-height:46px;padding:3px 6px}.subdivisions svg{max-width:100%;height:1.75rem}.subdivisions .segment-input:checked+.segment-face svg{color:var(--color-accent)}@media (min-width:27rem){.subdivisions .segmented-options{gap:6px}.subdivisions .segment-face{min-height:56px;padding:var(--space-2)}.subdivisions svg{height:1.85rem}}@media (min-width:30rem){.subdivisions .segmented-options{gap:var(--space-2)}}.play-button{width:var(--play-size);height:var(--play-size);background:var(--color-accent);color:var(--color-on-accent);cursor:pointer;box-shadow:0 6px 20px var(--color-accent-soft);transition:transform var(--duration-fast) var(--ease-out);border:0;border-radius:50%;place-items:center;display:grid;position:relative}.play-button svg{width:40%;height:40%}.play-button:not(.is-playing) svg{transform:translate(6%)}.play-button:active{transform:scale(.96)}.play-button:focus-visible{outline-offset:5px}.play-button:after{content:"";border:2px solid var(--color-accent);opacity:0;pointer-events:none;border-radius:50%;position:absolute;inset:0}.play-button.pulse:after{animation:beat-ring .42s var(--ease-out)}.play-button.pulse-strong:after{animation:beat-ring-strong .52s var(--ease-out);border-width:3px}@keyframes beat-ring{0%{opacity:.45;transform:scale(1)}to{opacity:0;transform:scale(1.28)}}@keyframes beat-ring-strong{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}@media (prefers-reduced-motion:reduce){.play-button.pulse:after,.play-button.pulse-strong:after{animation:none}}.beats{--beat-columns:4;--bar-width:16px;--body-height:26px;--cap-height:14px;--beat-color:var(--color-text-muted);grid-template-columns:repeat(var(--beat-columns), minmax(44px, 56px));justify-content:center;gap:4px;display:grid}.beat{border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:0;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-height:68px;padding:8px 0;display:flex}.beat:hover{background:var(--color-accent-soft)}.beat-bar{height:calc(var(--cap-height) + var(--body-height) + 2px);flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;display:flex}.beat-cap,.beat-body{width:var(--bar-width);background:var(--beat-color);border:1.5px solid var(--beat-color);transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);border-radius:4px}.beat-cap{height:var(--cap-height)}.beat-body{height:var(--body-height)}.beat[data-state=normal] .beat-cap,.beat[data-state=mute] .beat-cap{visibility:hidden}.beat[data-state=mute] .beat-body{height:var(--bar-width);background:0 0;border-radius:50%}.accent-off .beat[data-state=accent] .beat-cap{background:0 0;border-style:dashed}.beats.is-multirow{--body-height:16px;--cap-height:9px}.beats.is-multirow .beat{gap:4px;min-height:42px;padding:4px 0}.beat.is-active{--beat-color:var(--color-accent)}.accent-off .beat.is-active[data-state=accent] .beat-cap{border-color:var(--color-accent)}.beat-dots{gap:3px;height:4px;display:flex}.beat-dot{background:var(--color-line);border-radius:50%;width:4px;height:4px}.beat-dot.is-active{background:var(--color-accent)}@media (prefers-reduced-motion:reduce){.beat-cap,.beat-body{transition:none}}.side-control{gap:var(--space-1);flex-direction:column;min-width:0;display:flex}.side-control-start{align-items:flex-start}.side-control-end{align-items:flex-end}.control-label{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);cursor:pointer;font-weight:600}.select-wrap{max-width:100%;position:relative}.select{appearance:none;max-width:100%;min-height:var(--touch-min);border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-text);font-size:var(--text-sm);cursor:pointer;text-overflow:ellipsis;border-radius:999px;padding:0 1.8rem 0 .8rem;font-weight:500}.select:hover{border-color:var(--color-text-muted)}.select-wrap svg{width:.9rem;height:.9rem;color:var(--color-text-muted);pointer-events:none;position:absolute;top:50%;right:.65rem;transform:translateY(-50%)}.switch{min-width:var(--touch-min);min-height:var(--touch-min);cursor:pointer;background:0 0;border:0;align-items:center;padding:0;display:inline-flex}.switch-track{background:var(--color-control);width:48px;height:28px;transition:background-color var(--duration-fast) var(--ease-out);border-radius:999px;position:relative}.switch-thumb{background:var(--color-surface);width:22px;height:22px;transition:transform var(--duration-fast) var(--ease-out);border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #00000040}.switch[aria-checked=true] .switch-track{background:var(--color-accent)}.switch[aria-checked=true] .switch-thumb{transform:translate(20px)}.switch:focus-visible{outline:none}.switch:focus-visible .switch-track{outline:3px solid var(--color-focus);outline-offset:3px}.header-actions{align-items:center;gap:var(--space-1);margin-right:calc(var(--space-2) * -1);display:flex}.icon-button{width:var(--touch-min);height:var(--touch-min);color:var(--color-text-muted);cursor:pointer;transition:color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid}.icon-button:hover{color:var(--color-text);background:var(--color-accent-soft)}.icon-button svg{width:22px;height:22px}