:root{color-scheme:dark;--color-background:#0a0a0c;--color-surface:#141418;--color-raised:#1c1c23;--color-border:#2a2a34;--color-text:#fafafc;--color-muted:#a1a1b2;--color-primary:#10b981;--color-on-primary:#04140e;--color-success-surface:#102a23;--color-danger:#ff737d;--color-danger-surface:#351b22;--color-warning:#f5b544;--color-warning-surface:#2e2410;--color-info:#7cb4ff;--color-info-surface:#142338;--color-purple:#8b5cf6;--color-purple-text:#c5adff;--color-purple-border:#654399;--color-progress-track:#483458;--gradient-playing:linear-gradient(135deg, #302047, #17121f);--font-sans:Inter, Arial, sans-serif;--font-mono:"JetBrains Mono", "DejaVu Sans Mono", monospace;--text-xs:.625rem;--text-sm:.75rem;--text-body:.875rem;--text-base:1rem;--text-title:1.125rem;--text-track:1.3125rem;--text-heading:2rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--radius-sm:.5rem;--radius-input:.625rem;--radius-card:.875rem;--radius-banner:.75rem;--radius-playing:1.125rem;--radius-dialog:1.5rem;--radius-pill:100px;--control-height:3.25rem;--touch-target:3rem;--page-mobile:390px;--page-wide:1200px}*{box-sizing:border-box}html{background:var(--color-background);color:var(--color-text);font-family:var(--font-sans);line-height:1.4}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}a{color:var(--color-primary);text-underline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:var(--text-heading)}h2{font-size:var(--text-title);font-weight:400}h3{font-size:var(--text-base)}img{object-fit:cover;max-inline-size:100%}fieldset{min-inline-size:0;margin:0}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;padding:0;position:absolute;overflow:hidden}.stack{gap:var(--space-4);display:grid}.row{gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.between{justify-content:space-between}.muted{color:var(--color-muted);font-size:var(--text-sm)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.button{justify-content:center;align-items:center;gap:var(--space-2);min-block-size:var(--control-height);padding:var(--space-2) var(--space-5);border-radius:var(--radius-card);background:var(--color-primary);color:var(--color-on-primary);font-size:var(--text-base);overflow-wrap:anywhere;border:1px solid #0000;font-weight:700;display:inline-flex}.button--secondary{background:var(--color-raised);color:var(--color-text)}.button--danger{background:var(--color-danger-surface);color:var(--color-danger)}.button--ghost{color:var(--color-primary);background:0 0}.button--outline{border-color:var(--color-border);color:var(--color-text);background:0 0}.button--full{inline-size:100%}.button:not(:disabled):hover{filter:brightness(1.12)}.card{padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);min-inline-size:0}.banner{border:1px solid var(--banner-color);border-radius:var(--radius-banner);color:var(--banner-color);background:var(--banner-background);align-items:flex-start;gap:10px;padding:12px 14px;display:flex}.banner--warning{--banner-color:var(--color-warning);--banner-background:var(--color-warning-surface)}.banner--danger{--banner-color:var(--color-danger);--banner-background:var(--color-danger-surface)}.banner--info{--banner-color:var(--color-info);--banner-background:var(--color-info-surface)}.banner--success{--banner-color:var(--color-primary);--banner-background:var(--color-success-surface)}.banner strong{font-size:.8125rem}.banner p{font-size:var(--text-sm);color:var(--color-muted);margin-block-start:2px}.credit-chip{align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);background:var(--color-success-surface);color:var(--color-primary);font:700 .6875rem var(--font-mono);white-space:nowrap;padding:7px;display:inline-flex}.credit-chip--balance{padding:0 var(--space-3);border-radius:var(--radius-pill);min-block-size:var(--touch-target);font-family:var(--font-sans);font-size:var(--text-sm)}.credit-chip button{min-inline-size:38px;min-block-size:var(--touch-target);color:inherit;font-size:var(--text-track);background:0 0;border:0}.track{padding:10px 10px 0}.track__summary{align-items:center;gap:var(--space-2);display:flex}.track__rank{font-size:var(--text-sm);color:var(--color-muted);flex:0 0 20px}.track__art{border-radius:9px;flex-shrink:0;block-size:38px;inline-size:38px}.track__details{flex:1;min-inline-size:0}.track__title{text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;font-weight:700;overflow:hidden}.track__artist{color:var(--color-muted);font-size:var(--text-xs);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track__actions{justify-content:space-between;align-items:center;gap:var(--space-2);min-block-size:58px;display:flex}.track__hint{color:var(--color-muted);font-size:var(--text-xs)}.track__actions .button{min-block-size:var(--touch-target);font-size:var(--text-sm);padding:0 10px}komuz-tabs,komuz-stepper,komuz-otp,komuz-keypad{min-inline-size:0;display:block}.tabs{padding:var(--space-1);gap:var(--space-1);border-radius:var(--radius-banner);background:var(--color-surface);display:flex}.tabs [role=tab]{min-inline-size:0;min-block-size:var(--touch-target);padding:var(--space-2);border-radius:var(--radius-input);color:var(--color-muted);overflow-wrap:anywhere;background:0 0;border:0;flex:1}.tabs [aria-selected=true]{background:var(--color-raised);color:var(--color-text);font-weight:700}[role=tabpanel]{padding-block-start:var(--space-4)}[hidden]{display:none!important}.choice{justify-content:space-between;align-items:center;gap:var(--space-3);min-block-size:var(--touch-target);font-size:var(--text-body);cursor:pointer;display:flex}.choice input{accent-color:var(--color-primary);flex-shrink:0;block-size:24px;inline-size:24px}.switch{appearance:none;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-raised);padding:3px;block-size:28px!important;inline-size:48px!important}.switch:before{content:"";background:var(--color-muted);border-radius:50%;block-size:20px;inline-size:20px;display:block}.switch:checked{background:var(--color-primary)}.switch:checked:before{background:var(--color-on-primary);transform:translate(19px)}.radio-group{gap:var(--space-2);border:0;padding:0;display:grid}.radio-group legend,.field-label{font-weight:600;font-size:var(--text-body);margin-block-end:var(--space-2);display:block}.radio-group .choice{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-input);flex-direction:row-reverse;justify-content:flex-end}.radio-group .choice:has(:checked){border-color:var(--color-primary);background:var(--color-success-surface)}.stepper{grid-template-columns:var(--control-height) minmax(0, 1fr) var(--control-height);gap:var(--space-2);display:grid}.stepper button{border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-raised);color:var(--color-primary);min-block-size:var(--control-height);font-size:var(--text-track)}.stepper input{text-align:center;border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface);inline-size:100%;min-inline-size:0;color:var(--color-text);font-family:var(--font-mono);appearance:textfield}.stepper input::-webkit-inner-spin-button{appearance:none}.otp{position:relative}.otp input{opacity:0;cursor:text;inline-size:100%;position:absolute;inset:0}.otp__digits{gap:var(--space-2);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.otp__digits span{border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface);min-block-size:60px;font:700 1.5625rem var(--font-mono);place-items:center;display:grid}.otp:focus-within .otp__digits [data-active]{border:2px solid var(--color-primary)}.otp:focus-within{outline:2px solid var(--color-primary);outline-offset:4px;border-radius:var(--radius-input)}.keypad{gap:7px var(--space-2);background:var(--color-surface);border-radius:var(--radius-banner);grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 18px;display:grid}.keypad button{min-block-size:var(--control-height);border-radius:var(--radius-input);background:var(--color-raised);color:var(--color-text);border:0;font-size:1.5rem}.dialog{color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-dialog);padding:var(--space-6);max-block-size:calc(100dvh - 32px);inline-size:min(440px,100% - 32px);overflow-y:auto}.dialog::backdrop{background:#000000bf}.dialog__header{gap:var(--space-3);justify-content:space-between;align-items:center;margin-block-end:var(--space-4);display:flex}.dialog__header h2{font-weight:700}.dialog__close{min-inline-size:var(--touch-target);min-block-size:var(--touch-target);padding:0}.dialog__description{margin-block-end:var(--space-4)}.dialog--sheet{border-radius:var(--radius-dialog) var(--radius-dialog) 0 0;inline-size:min(100%,520px);margin:auto auto 0;padding-block-end:max(var(--space-6), env(safe-area-inset-bottom))}.playing{min-block-size:188px;padding:var(--space-4);border-color:var(--color-purple-border);border-radius:var(--radius-playing);background:var(--gradient-playing);box-shadow:0 4px 24px #8b5cf621}.playing__status{justify-content:space-between;gap:var(--space-2);color:var(--color-purple-text);font-size:var(--text-xs);display:flex}.playing__track{align-items:center;gap:14px;margin-block:14px;display:flex}.playing__track img{border-radius:9px;flex-shrink:0;block-size:78px;inline-size:78px}.playing__track h3{font-size:var(--text-track);font-weight:400}.playing__track p{color:var(--color-purple-text);margin-block:3px;font-size:.8125rem}.playing__track small{color:var(--color-muted);font-size:var(--text-xs)}.playing progress{appearance:none;background:var(--color-progress-track);block-size:4px;inline-size:100%;color:var(--color-purple);border:0;border-radius:2px;display:block}.playing progress::-webkit-progress-bar{background:var(--color-progress-track);border-radius:2px}.playing progress::-webkit-progress-value{background:var(--color-purple);border-radius:2px}.playing progress::-moz-progress-bar{background:var(--color-purple);border-radius:2px}.playing__time{color:var(--color-purple-text);font-size:var(--text-xs);justify-content:space-between;margin-block-start:6px;display:flex}.playing__time span:last-child{color:var(--color-muted)}@media (prefers-reduced-motion:no-preference){.button,.switch{transition:background .12s,filter .12s}}.turnstile-slot{justify-content:center;display:flex}.turnstile-slot:empty{display:none}