:root{color-scheme:light;--color-bg: #f5ead8;--color-surface: #ebddc5;--color-text: #201e1d;--color-accent: #c67139;--color-accent-2: #7a8a5e;--color-divider: color-mix(in srgb, var(--color-text) 16%, transparent);--color-elevated: var(--color-neutral-800);--color-accent-text: var(--color-accent-700);--color-accent-fill: var(--color-accent-700);--color-accent-2-fill: var(--color-accent-2-700);--color-accent-2-text: var(--color-accent-2-700);--color-on-accent: var(--color-bg);--color-on-elevated: #f5ead8;--vinyl-groove-a: #2e2b25;--vinyl-groove-b: #474238;--color-outline: transparent;--color-neutral-100: #f9f4ed;--color-neutral-200: #eee7db;--color-neutral-300: #dcd3c4;--color-neutral-400: #c0b6a5;--color-neutral-500: #a19786;--color-neutral-600: #82796a;--color-neutral-700: #645c50;--color-neutral-800: #474238;--color-neutral-900: #2e2b25;--color-accent-100: #fff2eb;--color-accent-200: #ffe1d0;--color-accent-300: #ffc6a5;--color-accent-400: #f6a06b;--color-accent-500: #d67f48;--color-accent-600: #b2622d;--color-accent-700: #8c491a;--color-accent-800: #643312;--color-accent-900: #402310;--color-accent-2-100: #f0fae1;--color-accent-2-200: #e1eecc;--color-accent-2-300: #ccdbb2;--color-accent-2-400: #aebf92;--color-accent-2-500: #8fa073;--color-accent-2-600: #728157;--color-accent-2-700: #56633f;--color-accent-2-800: #3d472b;--color-accent-2-900: #272e1b;--color-wrong: #b2622d;--color-right: #56633f;--font-heading: "Caprasimo", ui-serif, Georgia, serif;--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--space-1: 4.4px;--space-2: 8.8px;--space-3: 13.2px;--space-4: 17.6px;--space-6: 26.4px;--space-8: 35.2px;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 28px;--radius-pill: 999px;--shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);--shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);--shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}html{overflow-x:hidden}body{margin:0;width:100%;max-width:100vw;overflow-x:hidden;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:15px;line-height:1.55;-webkit-tap-highlight-color:transparent}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:400;line-height:1.12;letter-spacing:-.015em;margin:0}p{margin:0}a{color:var(--color-accent-text);text-underline-offset:3px}a:hover{color:var(--color-accent-800)}button{font-family:inherit;touch-action:manipulation}img{display:block;max-width:100%}:focus{outline:none}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}.text-muted{color:var(--color-neutral-700)}.nsb{scrollbar-width:none;overflow-x:auto;overflow-y:hidden;max-width:100%}.nsb::-webkit-scrollbar{display:none}.app-shell{min-height:100dvh;width:100%;max-width:100vw;overflow-x:hidden;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);box-sizing:border-box;display:flex;flex-direction:column;align-items:center}.app-shell>router-outlet+*{display:block;width:100%}.screen{width:100%;max-width:448px;min-width:0;display:flex;flex-direction:column;flex:1;padding:20px 20px 30px;gap:16px}app-timeline,app-spotify-bar{display:block;min-width:0;max-width:100%}app-song-card{display:block;flex-shrink:0;width:92px}.screen-head{display:flex;align-items:center;gap:12px;padding-top:8px}.kicker{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-text)}.kicker--light{color:var(--color-accent-300)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-size:15px;line-height:1.2;color:var(--color-text);background:transparent;border:1px solid transparent;padding:12px 20px;border-radius:var(--radius-pill);transition:background .12s ease,border-color .12s ease}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--color-accent-fill);color:var(--color-on-accent)}.btn-primary:hover:not(:disabled){background:var(--color-accent-800)}.btn-secondary{border-color:var(--color-divider)}.btn-secondary:hover:not(:disabled){background:color-mix(in srgb,var(--color-text) 7%,transparent)}.btn-sage{background:var(--color-accent-2-fill);color:var(--color-on-accent)}.btn-sage:hover:not(:disabled){background:var(--color-accent-2-800)}.btn-ghost{color:var(--color-accent-text)}.btn-ghost:hover:not(:disabled){background:color-mix(in srgb,var(--color-accent) 10%,transparent)}.btn-dashed{border:2px dashed color-mix(in srgb,var(--color-text) 20%,transparent)}.btn-dashed:hover:not(:disabled){border-color:var(--color-accent);background:var(--color-accent-100)}.btn-block{width:100%}.btn-lg{padding:17px;font-size:20px}.btn-round{width:40px;height:40px;padding:0;border-radius:var(--radius-pill);border:1px solid var(--color-divider);font-size:17px;flex-shrink:0}.btn-round:hover:not(:disabled){background:color-mix(in srgb,var(--color-text) 7%,transparent)}.input,.select{width:100%;min-height:40px;padding:10px 16px;font:inherit;font-size:14px;color:var(--color-text);caret-color:var(--color-accent);background:var(--color-neutral-100);border:1px solid var(--color-divider);border-radius:var(--radius-pill);outline:none}.input::placeholder{color:var(--color-neutral-500)}.input:focus-visible,.select:focus-visible{border-color:var(--color-accent)}.input--heading{font-family:var(--font-heading);font-size:20px}.hue-slider{appearance:none;-webkit-appearance:none;height:8px;border-radius:var(--radius-pill);background:linear-gradient(90deg,#e05252,#d9a441,#93b054,#4fa9a0,#5a86d6,#9a63c9,#e05252);outline:none;cursor:pointer}.hue-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:var(--radius-pill);background:var(--color-neutral-100);border:2px solid var(--color-neutral-800);cursor:pointer}.hue-slider::-moz-range-thumb{width:20px;height:20px;border-radius:var(--radius-pill);background:var(--color-neutral-100);border:2px solid var(--color-neutral-800);cursor:pointer}.panel{border-radius:var(--radius-lg);background:var(--color-surface);padding:16px}.panel--dashed{background:transparent;border:2px dashed color-mix(in srgb,var(--color-text) 20%,transparent)}.panel--sage{background:var(--color-accent-2-200)}.panel-title{font-family:var(--font-heading);font-size:19px;margin-bottom:12px}.pill-row{display:flex;align-items:center;gap:12px;border-radius:var(--radius-pill);background:var(--color-surface);padding:11px 14px}.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 12px;border-radius:var(--radius-pill)}.tag-accent{background:var(--color-accent-200);color:var(--color-accent-800)}.tag-sage{background:var(--color-accent-2-200);color:var(--color-accent-2-900)}.tag-warn{background:var(--color-accent-300);color:var(--color-accent-900)}.notice{border-radius:var(--radius-md);padding:10px 14px;font-size:12px;line-height:1.5}.notice-error{background:color-mix(in srgb,var(--color-wrong) 15%,transparent);color:var(--color-accent-text)}.notice-warn{background:var(--color-accent-200);color:var(--color-accent-800)}.plinth{border-radius:var(--radius-lg);background:var(--color-elevated);padding:20px;width:100%;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;overflow:hidden;border:1px solid var(--color-outline);box-shadow:var(--shadow-lg)}.plinth .kicker{color:var(--color-accent-300)}.vinyl{--size: 176px;width:var(--size);height:var(--size);flex-shrink:0;border-radius:var(--radius-pill);background:repeating-radial-gradient(circle,var(--vinyl-groove-a) 0 2px,var(--vinyl-groove-b) 2px 4px);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}.vinyl--sm{--size: 44px;box-shadow:none;background:repeating-radial-gradient(circle,var(--vinyl-groove-a) 0 1.5px,var(--vinyl-groove-b) 1.5px 3px)}.vinyl--spin,.vinyl--spin-fast{will-change:transform}.vinyl--spin{animation:spin 14s linear infinite}.vinyl--spin-fast{animation:spin 4.5s linear infinite}.vinyl__label{width:40%;height:40%;min-width:34px;min-height:34px;border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--font-heading);line-height:1}.vinyl--sm .vinyl__label{width:14px;height:14px;min-width:0;min-height:0}.tonearm{position:absolute;right:16px;top:20px;width:9px;height:108px;border-radius:var(--radius-pill);background:var(--color-neutral-400);transform:rotate(16deg);transform-origin:top center;z-index:0}.plinth__timer{position:relative;z-index:1}.tonearm--down{height:132px;animation:drop .6s ease-out forwards}.tonearm__pivot{position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:var(--radius-pill);background:var(--color-neutral-300)}.meter{height:8px;flex:1;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-text) 12%,transparent);overflow:hidden}.meter>span{display:block;height:100%;border-radius:var(--radius-pill);background:var(--color-accent)}.chip{flex-shrink:0;width:30px;height:30px;border-radius:var(--radius-pill);background:var(--color-neutral-400);color:var(--color-on-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:13px}.chip--active{background:var(--color-accent-fill)}.tabnum{font-variant-numeric:tabular-nums}.wait-dot{width:9px;height:9px;border-radius:var(--radius-pill);background:var(--color-accent-300);animation:bob 1.2s ease-in-out infinite}.skeleton{display:inline-block;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-neutral-300) 0,var(--color-neutral-100) 40%,var(--color-neutral-300) 80%);background-size:240px 100%;animation:shimmer 1.4s linear infinite}.progress-indeterminate{width:100%;height:8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-on-elevated) 16%,transparent);overflow:hidden;position:relative}.progress-indeterminate>span{position:absolute;top:0;left:0;width:38%;height:100%;border-radius:var(--radius-pill);background:var(--color-accent);animation:groove 1.5s ease-in-out infinite}.tonearm--loading{animation:needle 2.2s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes glow{0%,to{box-shadow:0 0 #c6713980}50%{box-shadow:0 0 0 12px #c6713900}}@keyframes drop{0%{transform:rotate(-14deg)}to{transform:rotate(-24deg)}}@keyframes toastin{0%{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}@keyframes pop{0%{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}@keyframes shimmer{0%{background-position:-240px 0}to{background-position:240px 0}}@keyframes needle{0%,to{transform:rotate(14deg)}50%{transform:rotate(19deg)}}@keyframes groove{0%{transform:translate(-100%)}to{transform:translate(260%)}}@media(prefers-reduced-motion:reduce){.vinyl--spin,.vinyl--spin-fast{animation-duration:40s}.skeleton,.progress-indeterminate>span,.wait-dot{animation:none}.btn,.tonearm--down,.tonearm--loading,[style*=animation]{animation:none!important}}