:root{--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-xs:.8125rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:clamp(1.6rem, 5.5vw, 2.4rem);--font-size-hero:clamp(2.6rem, 13vw, 4.25rem);--font-size-total:clamp(2.75rem, 14vw, 4.5rem);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--gutter:clamp(1rem, 4vw, 2rem);--radius-sm:.5rem;--radius-md:.875rem;--radius-lg:1.25rem;--radius-pill:999px;--tap:2.75rem;--border-w:1px;--focus-w:3px;--ease-out:cubic-bezier(.2, .8, .2, 1);--dur-fast:.12s;--dur-med:.22s;--dur-slow:.42s;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--c-bg:#0b0d12;--c-bg-glow:#2dd4bf1a;--c-surface:#141821;--c-surface-2:#1c212d;--c-surface-3:#262c3a;--c-border:#2d3444;--c-border-strong:#4a5368;--c-text:#eef1f6;--c-text-muted:#a6aec0;--c-accent:#5eead4;--c-accent-hover:#99f6e4;--c-on-accent:#042f2a;--c-accent-soft:#5eead424;--c-focus:#fcd34d;--c-success:#6ee7a8;--c-warn:#fcd34d;--c-warn-soft:#fcd34d1a;--c-danger:#fda4a4;--c-danger-soft:#fda4a41a;--c-art-from:#334155;--c-art-to:#0f766e;--shadow-lg:0 20px 50px -20px #0009;--shadow-sm:0 1px 2px #0006}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--c-bg:#f5f7fa;--c-bg-glow:#0d948814;--c-surface:#fff;--c-surface-2:#eef1f5;--c-surface-3:#e2e7ee;--c-border:#d3d9e2;--c-border-strong:#8a94a6;--c-text:#10141b;--c-text-muted:#4a5365;--c-accent:#0f766e;--c-accent-hover:#115e59;--c-on-accent:#fff;--c-accent-soft:#0f766e1a;--c-focus:#1d4ed8;--c-success:#067647;--c-warn:#8a5300;--c-warn-soft:#d977061a;--c-danger:#b42318;--c-danger-soft:#b4231814;--c-art-from:#cbd5e1;--c-art-to:#5eead4;--shadow-lg:0 20px 50px -24px #0f172a40;--shadow-sm:0 1px 2px #0f172a14}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--c-bg:#f5f7fa;--c-bg-glow:#0d948814;--c-surface:#fff;--c-surface-2:#eef1f5;--c-surface-3:#e2e7ee;--c-border:#d3d9e2;--c-border-strong:#8a94a6;--c-text:#10141b;--c-text-muted:#4a5365;--c-accent:#0f766e;--c-accent-hover:#115e59;--c-on-accent:#fff;--c-accent-soft:#0f766e1a;--c-focus:#1d4ed8;--c-success:#067647;--c-warn:#8a5300;--c-warn-soft:#d977061a;--c-danger:#b42318;--c-danger-soft:#b4231814;--c-art-from:#cbd5e1;--c-art-to:#5eead4;--shadow-lg:0 20px 50px -24px #0f172a40;--shadow-sm:0 1px 2px #0f172a14}@media (prefers-reduced-motion:reduce){:root{--dur-fast:0s;--dur-med:0s;--dur-slow:0s}}*,:before,:after{box-sizing:border-box}html{font-family:var(--font-sans);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;line-height:1.5}body{background:radial-gradient(60rem 30rem at 15% -10%, var(--c-bg-glow), transparent 70%), var(--c-bg);min-height:100dvh;color:var(--c-text);overflow-wrap:anywhere;margin:0}img{max-width:100%;display:block}h1,h2,p{margin:0}a{color:var(--c-accent);text-underline-offset:.2em}a:hover{color:var(--c-accent-hover)}:focus-visible{outline:var(--focus-w) solid var(--c-focus);outline-offset:2px;border-radius:var(--radius-sm)}[tabindex="-1"]:focus{outline:none}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}[hidden]{display:none!important}.app{max-width:76rem;padding:0 var(--gutter) var(--space-6);margin:0 auto}.topbar{padding-block:var(--space-3);justify-content:space-between;align-items:center;display:flex}.brand{align-items:center;gap:var(--space-2);min-height:var(--tap);font-weight:750;font-size:var(--font-size-lg);letter-spacing:-.01em;color:var(--c-text);text-decoration:none;display:inline-flex}.brand:hover{color:var(--c-text)}.brand__mark{background:conic-gradient(from 210deg, var(--c-accent) 0 75%, var(--c-surface-3) 75% 100%);width:1.5rem;height:1.5rem;box-shadow:inset 0 0 0 .35rem var(--c-bg);border-radius:50%}.offline-banner{margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--c-warn-soft);border:var(--border-w) solid var(--c-warn);color:var(--c-text)}.layout{gap:var(--space-6);align-items:start;display:grid}@media (min-width:60rem){.layout{gap:var(--space-7);padding-top:var(--space-5);grid-template-columns:minmax(22rem,27rem) minmax(0,1fr)}.composer{top:var(--composer-top,var(--space-4));align-self:start;position:sticky}}.footer{margin-top:var(--space-7);color:var(--c-text-muted);font-size:var(--font-size-sm)}.composer__title{font-size:var(--font-size-xl);letter-spacing:-.02em;font-weight:750;line-height:1.15}.composer__title em{color:var(--c-accent);font-style:normal}.composer__lede{margin-top:var(--space-2);color:var(--c-text-muted)}.composer__form{gap:var(--space-5);margin-top:var(--space-5);padding:var(--space-5) var(--space-4);background:var(--c-surface);border:var(--border-w) solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:grid}@media (min-width:30rem){.composer__form{padding:var(--space-5)}}.duration{gap:var(--space-4);display:grid}.duration__fields{border:0;justify-content:center;align-items:flex-start;min-width:0;margin:0;padding:0;display:flex}.duration__group{align-items:flex-start;display:flex}.duration__colon{font-size:var(--font-size-hero);color:var(--c-text-muted);padding-top:calc(var(--tap) + var(--space-1));margin-inline:clamp(0rem, 1vw, var(--space-1));line-height:1}.duration__field{justify-items:center;gap:var(--space-1);display:grid}.duration__input{width:2.3ch;font:inherit;font-size:var(--font-size-hero);letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:center;color:var(--c-text);border:0;border-bottom:2px solid var(--c-border);padding:var(--space-1) 0;transition:border-color var(--dur-fast);background:0 0;border-radius:0;font-weight:700;line-height:1}.duration__input:hover{border-bottom-color:var(--c-border-strong)}.duration__input:focus-visible{border-bottom-color:var(--c-accent)}.duration__input[aria-invalid=true]{border-bottom-color:var(--c-danger)}.duration__unit{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-muted)}.stepper{width:var(--tap);height:var(--tap);border:var(--border-w) solid var(--c-border);background:var(--c-surface-2);color:var(--c-text);cursor:pointer;transition:background var(--dur-fast), transform var(--dur-fast);border-radius:50%;place-items:center;display:grid}.stepper:hover{background:var(--c-surface-3)}.stepper:active{transform:scale(.94)}.chips{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.chip{min-height:var(--tap);padding:0 var(--space-4);border-radius:var(--radius-pill);border:var(--border-w) solid var(--c-border);color:var(--c-text);font:inherit;cursor:pointer;transition:background var(--dur-fast), border-color var(--dur-fast);background:0 0;font-weight:600}.chip:hover{background:var(--c-surface-2)}.chip[aria-pressed=true]{background:var(--c-accent-soft);border-color:var(--c-accent)}.chip__hint{color:var(--c-text-muted);font-weight:400}.field{gap:var(--space-2);border:0;min-width:0;margin:0;padding:0;display:grid}.field__label{padding:0;font-weight:650}.field__label--small{font-size:var(--font-size-sm);color:var(--c-text-muted);font-weight:600}.field__hint{font-size:var(--font-size-sm);color:var(--c-text-muted)}.field__hint--warn{color:var(--c-warn)}.field-error{font-size:var(--font-size-sm);color:var(--c-danger);text-align:center;font-weight:600}.tempo .field-error{text-align:start}.input{width:100%;min-height:var(--tap);padding:0 var(--space-3);font:inherit;color:var(--c-text);background:var(--c-surface-2);border:var(--border-w) solid var(--c-border-strong);border-radius:var(--radius-sm);transition:border-color var(--dur-fast)}.input::placeholder{color:var(--c-text-muted);opacity:1}.input:hover{border-color:var(--c-text-muted)}.input[aria-invalid=true]{border-color:var(--c-danger)}.input:disabled{opacity:.6}.input--num{font-variant-numeric:tabular-nums;width:6.5rem}.select{appearance:none;padding-right:var(--space-6);background-image:linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%), linear-gradient(135deg, var(--c-text-muted) 50%, transparent 50%);background-position:calc(100% - 1.15rem),calc(100% - .8rem);background-repeat:no-repeat;background-size:.35rem .35rem}.more{gap:var(--space-4);border-top:var(--border-w) solid var(--c-border);padding-top:var(--space-3);display:grid}.more__toggle{align-items:center;gap:var(--space-2);width:100%;min-height:var(--tap);font:inherit;color:var(--c-text);cursor:pointer;text-align:start;background:0 0;border:0;padding:0;font-weight:650;display:flex}.more__chev{transition:transform var(--dur-med) var(--ease-out);margin-left:auto;display:grid}.more__toggle[aria-expanded=true] .more__chev{transform:rotate(180deg)}.more__panel{gap:var(--space-5);animation:rise var(--dur-med) var(--ease-out);display:grid}.combo{position:relative}.combo__msg{font-size:var(--font-size-sm);color:var(--c-text-muted);margin-top:var(--space-1)}.combo__msg:empty{display:none}.listbox{z-index:10;inset-inline:0;top:calc(100% + var(--space-1));padding:var(--space-1);background:var(--c-surface);border:var(--border-w) solid var(--c-border-strong);border-radius:var(--radius-md);max-height:18rem;box-shadow:var(--shadow-lg);margin:0;list-style:none;position:absolute;overflow-y:auto}.option{align-items:center;gap:var(--space-3);min-height:var(--tap);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);cursor:pointer;display:flex}.option[aria-selected=true]{background:var(--c-accent-soft);outline:2px solid var(--c-accent);outline-offset:-2px}.option__img{background:var(--c-surface-3);object-fit:cover;border-radius:50%;flex:none;width:2rem;height:2rem}.option__name{flex:1;min-width:0;font-weight:600}.option__meta{font-size:var(--font-size-xs);color:var(--c-text-muted)}.picks{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.pick{max-width:100%;padding-left:var(--space-3);border-radius:var(--radius-pill);background:var(--c-accent-soft);border:var(--border-w) solid var(--c-accent);animation:pop var(--dur-med) var(--ease-out);align-items:center;font-weight:600;display:inline-flex}.pick__name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pick__remove{width:var(--tap);height:var(--tap);color:var(--c-text);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;display:grid}.pick__remove:hover{color:var(--c-danger)}.segmented{padding:var(--space-1);gap:var(--space-1);background:var(--c-surface-2);border-radius:var(--radius-md);grid-template-columns:repeat(3,1fr);display:grid}.segmented__opt{position:relative}.segmented__opt input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.segmented__opt span{min-height:var(--tap);padding:0 var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-sm);text-align:center;color:var(--c-text-muted);transition:background var(--dur-fast), color var(--dur-fast);place-items:center;font-weight:600;display:grid}.segmented__opt input:checked+span{background:var(--c-surface);color:var(--c-text);box-shadow:var(--shadow-sm)}.segmented__opt input:focus-visible+span{outline:var(--focus-w) solid var(--c-focus);outline-offset:1px}.bpm-row{align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;display:flex}.bpm-field{gap:var(--space-1);display:grid}.bpm-row__dash{padding-bottom:var(--space-2);color:var(--c-text-muted)}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-4);font:inherit;color:var(--c-text);background:var(--c-surface-2);border:var(--border-w) solid var(--c-border);border-radius:var(--radius-pill);cursor:pointer;transition:background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);font-weight:650;display:inline-flex}.btn:hover:not(:disabled){background:var(--c-surface-3)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{cursor:not-allowed;opacity:.55}.btn--primary{color:var(--c-on-accent);background:var(--c-accent);border-color:#0000}.btn--primary:hover:not(:disabled){background:var(--c-accent-hover)}.btn--ghost{background:0 0}.btn--xl{min-height:3.5rem;font-size:var(--font-size-lg);width:100%}.icon-btn{width:var(--tap);height:var(--tap);color:var(--c-text);background:var(--c-surface);border:var(--border-w) solid var(--c-border);cursor:pointer;border-radius:50%;place-items:center;display:grid}.icon-btn:hover{background:var(--c-surface-2)}.badge{padding:.1rem var(--space-2);border-radius:var(--radius-pill);font-size:var(--font-size-xs);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--c-text);background:var(--c-surface-3);align-items:center;font-weight:650;display:inline-flex}.badge--accent{background:var(--c-accent-soft);color:var(--c-accent)}.badge--muted{color:var(--c-text-muted);border:var(--border-w) dashed var(--c-border-strong);background:0 0}.tag{padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--c-surface-2);border:var(--border-w) solid var(--c-border);font-size:var(--font-size-sm);color:var(--c-text-muted);gap:.35em;display:inline-flex}.tag strong{color:var(--c-text)}.notes{gap:var(--space-2);display:grid}.notes:empty{display:none}.note{gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--c-surface);border:var(--border-w) solid var(--c-border);font-size:var(--font-size-sm);color:var(--c-text-muted);align-items:flex-start;display:flex}.note svg{flex:none;margin-top:.1em}.note--warn{background:var(--c-warn-soft);border-color:var(--c-warn);color:var(--c-text)}.note--warn svg{color:var(--c-warn)}.output{min-width:0;scroll-margin-top:var(--space-4)}.panel{justify-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-4);text-align:center;background:var(--c-surface);border:var(--border-w) solid var(--c-border);border-radius:var(--radius-lg);animation:rise var(--dur-med) var(--ease-out);display:grid}.panel__title{font-size:var(--font-size-lg);font-weight:700}.panel__text{color:var(--c-text-muted);max-width:34rem}.panel__busy{color:var(--c-warn);font-weight:600}.panel__busy:empty{display:none}.panel__icon{background:var(--c-accent-soft);width:3.5rem;height:3.5rem;color:var(--c-accent);border-radius:50%;place-items:center;display:grid}.panel--error .panel__icon{background:var(--c-danger-soft);color:var(--c-danger)}.panel--offline .panel__icon,.panel--busy .panel__icon,.panel--no-music .panel__icon{background:var(--c-warn-soft);color:var(--c-warn)}.panel--empty{background:0 0;border-style:dashed}@media (max-width:59.99rem){.panel--empty{display:none}}.panel--progress{font-variant-numeric:tabular-nums}.eq{align-items:flex-end;gap:.3rem;height:2.5rem;display:flex}.eq span{border-radius:var(--radius-pill);background:var(--c-accent);transform-origin:bottom;width:.45rem;height:100%;animation:.9s ease-in-out infinite eq}.eq span:nth-child(2){animation-delay:-300ms}.eq span:nth-child(3){animation-delay:-600ms}.eq span:nth-child(4){animation-delay:-150ms}.progress-bar{border-radius:var(--radius-pill);background:var(--c-surface-3);width:min(18rem,100%);height:.3rem;overflow:hidden}.progress-bar span{border-radius:inherit;background:var(--c-accent);width:40%;height:100%;animation:slide 1.2s var(--ease-out) infinite;display:block}@media (prefers-reduced-motion:reduce){.eq span,.progress-bar span{animation:none}.eq span:nth-child(odd){transform:scaleY(.6)}.progress-bar span{opacity:.6;width:100%}}.result{gap:var(--space-4);display:grid}.result__head{gap:var(--space-2);display:grid}.result__total{align-items:baseline;column-gap:var(--space-3);row-gap:var(--space-1);flex-wrap:wrap;font-weight:750;display:flex}.result__clock{font-size:var(--font-size-total);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}.result__diff{align-items:center;gap:var(--space-1);font-size:var(--font-size-lg);font-weight:650;display:inline-flex}.result__diff:before{content:"—";color:var(--c-text-muted);margin-right:var(--space-1)}.result__diff.is-exact{color:var(--c-success)}.result__diff.is-off{color:var(--c-warn)}.result__sub{color:var(--c-text-muted)}.result__tags{gap:var(--space-2);flex-wrap:wrap;display:flex}.result__tags:empty{display:none}.actions{gap:var(--space-2);padding:var(--space-3);background:var(--c-surface);border:var(--border-w) solid var(--c-border);border-radius:var(--radius-lg);flex-wrap:wrap;display:flex}.actions .btn{flex:auto}.tracks{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid;container-type:inline-size}.track{align-items:center;column-gap:var(--space-3);row-gap:var(--space-1);padding:var(--space-2);background:var(--c-surface);border:var(--border-w) solid var(--c-border);border-radius:var(--radius-md);animation:rise var(--dur-slow) var(--ease-out) both;animation-delay:calc(var(--i,0) * 25ms);grid-template-columns:3.5rem minmax(0,1fr) auto;grid-template-areas:"art main dur""art foot foot";display:grid}@media (prefers-reduced-motion:reduce){.track{animation-delay:0s}}.track__art{border-radius:var(--radius-sm);object-fit:cover;background:linear-gradient(135deg, var(--c-art-from), var(--c-art-to));grid-area:art;align-self:start;width:3.5rem;height:3.5rem}.track__main{grid-area:main;min-width:0}.track__title,.track__artist{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track__title{font-weight:650}.track__artist{font-size:var(--font-size-sm);color:var(--c-text-muted)}.track__dur{font-variant-numeric:tabular-nums;color:var(--c-text-muted);grid-area:dur;justify-self:end;font-weight:600}.track__foot{align-items:center;gap:var(--space-1) var(--space-2);flex-wrap:wrap;grid-area:foot;display:flex}.track__bpm{grid-area:bpm}.track__links{gap:var(--space-1);grid-area:links;margin-left:auto;display:flex}.link-pill{min-height:var(--tap);min-width:var(--tap);padding:0 var(--space-3);border-radius:var(--radius-pill);font-size:var(--font-size-sm);white-space:nowrap;overflow-wrap:normal;color:var(--c-text);border:var(--border-w) solid var(--c-border);transition:background var(--dur-fast), border-color var(--dur-fast);flex:none;align-items:center;gap:.3em;font-weight:600;text-decoration:none;display:inline-flex}.link-pill:hover{color:var(--c-text);background:var(--c-surface-2);border-color:var(--c-border-strong)}@container (width>=40rem){.track{grid-template-columns:3.5rem minmax(0,1fr) auto auto auto;grid-template-areas:"art main bpm dur links"}.track__foot{display:contents}.track__art{align-self:center}.track__dur{text-align:end;min-width:3.5rem}}.howto{border:var(--border-w) solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-surface)}.howto summary{min-height:var(--tap);padding:var(--space-2) var(--space-4);cursor:pointer;align-items:center;font-weight:650;display:flex}.howto[open] summary{border-bottom:var(--border-w) solid var(--c-border)}.howto .prose{padding:var(--space-3) var(--space-4) var(--space-4);color:var(--c-text-muted);gap:var(--space-2);display:grid}.howto ol{gap:var(--space-2);margin:0;padding-left:1.25rem;display:grid}.howto strong{color:var(--c-text)}@keyframes rise{0%{opacity:0;transform:translateY(6px)}}@keyframes pop{0%{opacity:0;transform:scale(.92)}}@keyframes eq{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}