@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root,:root[data-theme=light]{--bg:#f5f7f3;--surface:#fff;--surface-muted:#eef3ee;--text:#171c19;--muted:#65716b;--line:#dce4dc;--line-strong:#c7d2c8;--accent:#b84a62;--accent-hover:#c75670;--accent-active:#96384d;--accent-soft:#b84a6224;--accent-strong:var(--accent-hover);--accent-muted:#b84a625c;--accent-text:#fff;--focus:#b84a624d;--color-border:#11181338;--slider-thumb:#fff;--swatch-badge:#1014126b;--swatch-number:#fff;--toggle-track:#d8e4dc;--toggle-thumb:#fff;--shadow-soft:0 18px 45px #1e2b2314;--shadow-action:0 16px 34px #b84a6238;--shadow-thumb:0 4px 14px #151c1847;--font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--fs-display-xl:48px;--ls-display-xl:-2px;--fs-display-lg:32px;--ls-display-lg:-1.2px;--fs-display-md:24px;--ls-display-md:-.8px;--fs-display-sm:20px;--ls-display-sm:-.5px;--fs-body-lg:18px;--fs-body:16px;--fs-body-sm:14px;--ls-body-sm:-.2px;--fs-caption:12px;--fs-code:13px;color:var(--text);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--font-sans);font-synthesis:none;letter-spacing:0;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f1412;--surface:#171d1a;--surface-muted:#202824;--text:#edf4ef;--muted:#a5b2aa;--line:#2d3832;--line-strong:#415049;--accent:#b84a62;--accent-hover:#c75670;--accent-active:#96384d;--accent-soft:#b84a6224;--accent-strong:var(--accent-hover);--accent-muted:#b84a626b;--accent-text:#fff;--focus:#b84a6257;--color-border:#fff3;--slider-thumb:#eff7f2;--swatch-badge:#05090875;--swatch-number:#fff;--toggle-track:#2c3933;--toggle-thumb:#b84a62;--shadow-soft:0 18px 48px #0000003d;--shadow-action:0 16px 34px #b84a623d;--shadow-thumb:0 4px 16px #00000061;color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#0f1412;--surface:#171d1a;--surface-muted:#202824;--text:#edf4ef;--muted:#a5b2aa;--line:#2d3832;--line-strong:#415049;--accent:#b84a62;--accent-hover:#c75670;--accent-active:#96384d;--accent-soft:#b84a6224;--accent-strong:var(--accent-hover);--accent-muted:#b84a626b;--accent-text:#fff;--focus:#b84a6257;--color-border:#fff3;--slider-thumb:#eff7f2;--swatch-badge:#05090875;--swatch-number:#fff;--toggle-track:#2c3933;--toggle-thumb:#b84a62;--shadow-soft:0 18px 48px #0000003d;--shadow-action:0 16px 34px #b84a623d;--shadow-thumb:0 4px 16px #00000061;color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{background:var(--bg);min-width:320px;min-height:100%}body{background:linear-gradient(180deg, #ffffff57, transparent 260px), var(--bg);min-width:320px;min-height:100svh;margin:0}:root[data-theme=dark] body{background:linear-gradient(180deg, #ffffff09, transparent 260px), var(--bg)}button,input{font:inherit;letter-spacing:0}button{-webkit-tap-highlight-color:transparent}#root{min-height:100svh}.app-shell{flex-direction:column;gap:24px;width:min(1180px,100%);min-height:100svh;margin:0 auto;padding:28px;display:flex}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.brand-lockup{align-items:center;gap:14px;display:flex}.brand-mark{border:1px solid var(--line-strong);width:42px;height:42px;box-shadow:var(--shadow-soft);background:radial-gradient(circle at 72% 18%,#ffffffd9,#0000 20%),conic-gradient(from 20deg,#e85050,#f1c94c,#56b870,#42b8c6,#5e6fdc,#d75db6,#e85050);border-radius:8px;flex:none}.eyebrow{font-family:var(--font-mono);color:var(--muted);font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;margin:0;font-weight:400}.brand-lockup h1{color:var(--text);font-size:var(--fs-display-sm);letter-spacing:var(--ls-display-sm);margin:2px 0 0;font-weight:600;line-height:1.05}.theme-toggle{min-height:42px;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text);background:var(--surface);border:1px solid var(--line);cursor:pointer;box-shadow:var(--shadow-soft);border-radius:999px;align-items:center;gap:10px;padding:0 12px;font-size:11px;font-weight:400;display:inline-flex}.theme-toggle:hover{border-color:var(--accent-muted)}.theme-toggle:focus-visible,.primary-action:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.toggle-track{background:var(--toggle-track);border:1px solid var(--line);border-radius:999px;align-items:center;width:42px;height:24px;padding:3px;display:flex}.toggle-thumb{background:var(--toggle-thumb);width:16px;height:16px;box-shadow:var(--shadow-thumb);border-radius:50%;transition:transform .18s}:root[data-theme=dark] .toggle-thumb{transform:translate(18px)}.game-stack,.final-stack{flex-direction:column;gap:18px;display:flex}.status-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.status-grid div{background:var(--surface);border:1px solid var(--line);min-height:76px;box-shadow:var(--shadow-soft);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;display:flex}.status-grid span,.panel-heading span,.round-score span,.yesterday-total span{font-family:var(--font-mono);color:var(--muted);font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;font-weight:400}.status-grid strong{font-family:var(--font-mono);color:var(--text);font-size:var(--fs-display-sm);letter-spacing:0;font-weight:500;line-height:1}.swatch-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.target-swatch{border:1px solid var(--color-border);border-radius:8px;place-items:center;min-height:72px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff2e}.target-swatch span{width:28px;height:28px;font-family:var(--font-mono);color:var(--swatch-number);background:var(--swatch-badge);font-size:var(--fs-caption);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #ffffff47;border-radius:50%;place-items:center;font-weight:500;display:grid}.target-swatch.is-current{outline:3px solid var(--focus);outline-offset:2px}.target-swatch.is-complete:after{content:"";background:linear-gradient(135deg,#0000 0 48%,#ffffff9e 49% 51%,#0000 52% 100%);position:absolute;inset:0}.play-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.color-panel,.control-panel,.feedback-panel,.result-section,.final-hero{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-soft);border-radius:8px}.color-panel{padding:16px}.panel-heading,.section-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.panel-heading{margin-bottom:14px}.panel-heading strong{color:var(--text);font-size:var(--fs-body-sm);letter-spacing:var(--ls-body-sm);font-weight:500}.color-card{border:1px solid var(--color-border);border-radius:8px;min-height:320px;box-shadow:inset 0 0 0 1px #ffffff2e,inset 0 -32px 70px #0000001f}.control-panel,.feedback-panel{gap:18px;padding:18px;display:grid}.slider-control{gap:10px;display:grid}.slider-label{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.slider-label span{color:var(--text);font-size:var(--fs-body-sm);letter-spacing:var(--ls-body-sm);font-weight:500}.slider-label strong{font-family:var(--font-mono);color:var(--muted);font-size:var(--fs-body);font-variant-numeric:tabular-nums;font-weight:400}.slider-control input[type=range]{appearance:none;background:var(--slider-track);border:1px solid var(--line-strong);cursor:pointer;border-radius:999px;width:100%;height:16px;margin:0}.slider-control input[type=range]:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.slider-control input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb);border:3px solid var(--surface);width:26px;height:26px;box-shadow:var(--shadow-thumb);border-radius:50%}.slider-control input[type=range]::-moz-range-thumb{background:var(--slider-thumb);border:3px solid var(--surface);width:20px;height:20px;box-shadow:var(--shadow-thumb);border-radius:50%}.primary-action{min-height:52px;font-family:var(--font-sans);font-size:var(--fs-body);color:var(--accent-text);background:var(--accent);border:1px solid var(--accent);cursor:pointer;box-shadow:var(--shadow-action);border-radius:8px;margin-top:10px;padding:0 20px;font-weight:500;transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s}.primary-action:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 18px 40px #b84a623d}.primary-action:active{background:var(--accent-active);border-color:var(--accent-active);transform:translateY(0);box-shadow:0 10px 24px #96384d38}.round-score{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;display:flex}.round-score strong{color:var(--text);letter-spacing:-1.6px;font-size:44px;font-weight:600;line-height:1.05}.difference-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;display:grid}.difference-grid div{background:var(--surface-muted);border:1px solid var(--line);border-radius:8px;padding:14px}.difference-grid dt{font-family:var(--font-mono);color:var(--muted);font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;font-weight:400}.difference-grid dd{font-family:var(--font-mono);color:var(--text);font-size:var(--fs-display-sm);font-variant-numeric:tabular-nums;margin:6px 0 0;font-weight:500}.final-hero{text-align:center;place-items:center;gap:12px;padding:42px 24px;display:grid}.final-score{color:var(--text);letter-spacing:-3px;font-variant-numeric:tabular-nums;font-size:72px;font-weight:600;line-height:1}.final-score span{color:var(--muted);font-size:var(--fs-display-md);letter-spacing:-.5px;font-weight:400}.result-label{color:var(--text);font-size:var(--fs-display-md);letter-spacing:var(--ls-display-md);margin:-4px 0 0;font-weight:600}.already-played,.empty-state{color:var(--muted);font-size:var(--fs-body-sm);margin:0}.countdown-card{min-height:34px;font-family:var(--font-mono);color:var(--muted);background:var(--surface-muted);border:1px solid var(--line);font-size:var(--fs-caption);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:6px;margin:0;padding:6px 12px;display:inline-flex}.countdown-card strong{color:var(--text)}.result-section{gap:16px;padding:18px;display:grid}.section-heading h2{color:var(--text);font-size:var(--fs-display-sm);letter-spacing:var(--ls-display-sm);margin:0;font-weight:600;line-height:1.1}.section-heading span{font-family:var(--font-mono);color:var(--muted);font-size:var(--fs-caption);letter-spacing:.06em;font-weight:400}.round-breakdown{border-top:1px solid var(--line);display:grid}.round-accuracy-pills{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;display:grid}.round-accuracy-pill{background:var(--surface-muted);border:1px solid var(--line);text-align:center;border-radius:999px;align-content:center;gap:2px;min-height:58px;padding:10px;display:grid}.round-accuracy-pill span{font-family:var(--font-mono);color:var(--muted);font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;font-weight:400}.round-accuracy-pill strong{font-family:var(--font-mono);color:var(--text);font-size:var(--fs-body-sm);font-variant-numeric:tabular-nums;font-weight:500}.round-row{border-bottom:1px solid var(--line);grid-template-columns:minmax(120px,1fr) auto minmax(190px,auto);align-items:center;gap:14px;min-height:64px;padding:14px 0;display:grid}.round-row:last-child{border-bottom:0}.round-row-title{color:var(--text);align-items:center;gap:10px;display:flex}.round-row-title strong{font-size:var(--fs-body-sm);letter-spacing:var(--ls-body-sm);font-weight:500}.round-color-chip{border:1px solid var(--color-border);border-radius:50%;flex:none;width:28px;height:28px}.round-row-score{font-family:var(--font-mono);color:var(--text);font-size:var(--fs-body-sm);font-variant-numeric:tabular-nums;font-weight:500}.round-row-diffs{font-family:var(--font-mono);color:var(--muted);font-size:var(--fs-code);font-variant-numeric:tabular-nums;justify-content:flex-end;gap:10px;font-weight:400;display:flex}.yesterday-total{background:var(--surface-muted);border:1px solid var(--line);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 14px;display:flex}.yesterday-total strong{font-family:var(--font-mono);color:var(--text);font-size:var(--fs-body);font-variant-numeric:tabular-nums;font-weight:500}@media (width<=760px){.app-shell{gap:18px;padding:18px}.topbar{align-items:flex-start}.brand-lockup h1{font-size:var(--fs-display-sm)}.theme-toggle{min-height:38px;padding:0 10px}.status-grid,.play-grid,.difference-grid{grid-template-columns:1fr}.status-grid div{min-height:64px}.target-swatch{min-height:58px}.color-card{min-height:220px}.round-row{grid-template-columns:1fr;gap:8px}.round-row-diffs{flex-wrap:wrap;justify-content:flex-start}.round-accuracy-pills{grid-template-columns:repeat(2,minmax(0,1fr))}.final-score{font-size:3rem}}@media (width<=440px){.app-shell{padding:14px}.brand-mark{width:36px;height:36px}.brand-lockup{gap:10px}.brand-lockup h1{font-size:var(--fs-display-sm)}.theme-toggle span:last-child{display:none}.target-swatch span{width:24px;height:24px;font-size:var(--fs-caption)}.section-heading{flex-direction:column;align-items:flex-start;gap:4px}.round-accuracy-pills{grid-template-columns:1fr}}