:root{--bg: #fdf8f8;--paper-base: #F9F8F4;--surface: #fdf8f8;--surface-bright: #fdf8f8;--surface-dim: #ddd9d8;--surface-container-lowest: #ffffff;--surface-container-low: #f7f3f2;--surface-container: #f1edec;--surface-container-high: #ebe7e6;--surface-container-highest: #e5e2e1;--surface-variant: #e5e2e1;--inverse-surface: #313030;--inverse-on-surface: #f4f0ef;--personal-tint: #E8F0FE;--fog-grey: #F0F2F2;--surface-base: var(--bg);--surface-1: var(--surface-container-low);--surface-2: var(--surface-container);--surface-3: var(--surface-container-high);--surface-overlay: rgba(28, 27, 27, .45);--surface-card: var(--surface-container-lowest);--surface-input: var(--surface-container);--surface-chip: var(--surface-container-high);--surface-raised: var(--surface-container-low);--surface-glass: rgba(253, 248, 248, .85);--on-surface: #1c1b1b;--on-surface-variant: #444748;--on-background: #1c1b1b;--ink: var(--on-surface);--ink-soft: var(--on-surface-variant);--ink-muted: #747878;--ink-dim: #858383;--ink-faint: #c4c7c7;--text-primary: var(--ink);--text-secondary: var(--ink-soft);--text-muted: var(--ink-muted);--text-disabled: var(--ink-faint);--text-inverse: #ffffff;--text-link: var(--ink);--primary: #000000;--on-primary: #ffffff;--primary-fixed: #e5e2e1;--primary-fixed-dim: #c8c6c5;--on-primary-fixed: #1c1b1b;--on-primary-fixed-variant: #474746;--primary-container: #1c1b1b;--on-primary-container: #858383;--inverse-primary: #c8c6c5;--secondary: #506354;--on-secondary: #ffffff;--secondary-container: #d0e5d2;--on-secondary-container: #546758;--secondary-fixed: #d3e8d5;--secondary-fixed-dim: #b7ccb9;--on-secondary-fixed: #0e1f13;--on-secondary-fixed-variant:#394b3d;--tertiary: #000000;--on-tertiary: #ffffff;--tertiary-container: #1c1b1a;--on-tertiary-container: #868382;--tertiary-fixed: #e6e2df;--tertiary-fixed-dim: #cac6c4;--on-tertiary-fixed: #1c1b1a;--on-tertiary-fixed-variant:#484645;--error: #ba1a1a;--on-error: #ffffff;--error-container: #ffdad6;--on-error-container: #93000a;--outline: #747878;--outline-variant: #c4c7c7;--sage-accent: #829680;--must-gold: #F2C94C;--rec-silver: #BDBDBD;--pill-must: #a16207;--pill-rec: #15803d;--pill-skip: var(--error);--accent-primary: var(--primary);--accent-primary-dim: rgba(0,0,0,.08);--accent-primary-mid: rgba(0,0,0,.16);--accent-primary-rgb: 0 0 0;--accent-primary-text: var(--on-primary);--accent-danger: var(--error);--accent-danger-rgb: 186 26 26;--accent-danger-dim: rgba(186, 26, 26, .1);--accent-warning: var(--must-gold);--accent-warning-rgb: 242 201 76;--accent-info: #2563eb;--accent-info-rgb: 37 99 235;--accent-info-dim: rgba(37, 99, 235, .1);--accent-success: var(--sage-accent);--accent-success-rgb: 130 150 128;--accent-success-dim: rgba(130, 150, 128, .14);--amber: var(--must-gold);--amber-soft: var(--rec-silver);--amber-ink: var(--on-surface);--amber-dim: #d6b13d;--tier-must-bg: var(--must-gold);--tier-must-text: var(--on-surface);--tier-must-border: var(--must-gold);--tier-rec-bg: var(--rec-silver);--tier-rec-text: var(--on-surface);--tier-rec-border: var(--rec-silver);--tier-liked-bg: var(--surface-container-highest);--tier-liked-text: var(--on-surface-variant);--tier-liked-border: var(--outline-variant);--tier-skip-bg: transparent;--tier-skip-text: var(--error);--tier-skip-border: var(--error);--border: var(--outline-variant);--border-dim: rgba(196, 199, 199, .5);--border-subtle: var(--border-dim);--border-default: var(--border);--border-strong: var(--outline);--border-accent: var(--must-gold);--border-glass: rgba(0, 0, 0, .06);--shadow-card: 0px 4px 20px rgba(0, 0, 0, .06);--shadow-card-up: 0px -4px 20px rgba(0, 0, 0, .06);--shadow-sm: 0px 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0px 4px 20px rgba(0, 0, 0, .06);--shadow-lg: 0px 8px 32px rgba(0, 0, 0, .1);--shadow-hero: 0px 24px 64px rgba(0, 0, 0, .16), 0px 8px 24px rgba(0, 0, 0, .1);--shadow-inset: inset 0 1px 0 rgba(255,255,255,.3);--glow-primary: 0 0 12px rgba(0, 0, 0, .1);--glow-primary-sm: 0 0 8px rgba(0, 0, 0, .08);--glow-card: var(--shadow-card);--font-display: "Hanken Grotesk", -apple-system, system-ui, sans-serif;--font-ui: "Inter", -apple-system, system-ui, sans-serif;--font-mono: "Geist", "JetBrains Mono", ui-monospace, Menlo, monospace;--font-serif: var(--font-display);--text-xs: 11px;--text-sm: 13px;--text-base: 14px;--text-lg: 17px;--text-md: 18px;--text-xl: 22px;--text-2xl: 28px;--text-3xl: 32px;--text-hero: 44px;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-black: 800;--leading-tight: 1.05;--leading-display: 1.21;--leading-normal: 1.41;--leading-relaxed: 1.5;--leading-note: 1.44;--tracking-tight: -.02em;--tracking-normal: -.01em;--tracking-wide: .02em;--tracking-wider: .05em;--tracking-caps: .05em;--tracking-stamp: .1em;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 48px;--space-gutter: 12px;--space-safe: 20px;--radius-1: 4px;--radius-2: 8px;--radius-3: 12px;--radius-4: 16px;--radius-5: 24px;--radius-full: 9999px;--radius-sm: var(--radius-1);--radius-md: var(--radius-3);--radius-lg: var(--radius-3);--radius-xl: var(--radius-4);--duration-fast: .11s;--duration-normal: .18s;--duration-slow: .32s;--duration-sheet: .36s;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--top-bar-height: auto;--bottom-nav-height: 76px;--tab-bar-height: var(--bottom-nav-height);--sidebar-width: 232px;--content-max: 640px;--sheet-max-height: 92dvh;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px);--z-base: 0;--z-above: 1;--z-sticky: 10;--z-fab: 40;--z-tab-bar: 50;--z-sidebar: 50;--z-sheet: 100;--z-overlay: 200;--z-modal: 300;--z-toast: 400}html{color-scheme:light}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulseGlow{0%,to{box-shadow:0 0 #f59e0b00}50%{box-shadow:0 0 24px #f59e0b73}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:var(--text-base);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{overscroll-behavior:none}a{color:var(--text-link);text-decoration:none}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;background:var(--surface-input);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:10px 12px;outline:none;transition:border-color var(--duration-fast) var(--ease-smooth)}input:focus,textarea:focus,select:focus{border-color:var(--border-strong)}::placeholder{color:var(--text-muted)}::selection{background:var(--accent-primary-mid);color:var(--text-primary)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:999px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:var(--border-strong);background-clip:padding-box}.container{max-width:var(--content-max);margin:0 auto;padding:var(--space-4)}.pagePad{padding-top:var(--safe-top);padding-bottom:calc(var(--tab-bar-height) + var(--safe-bottom))}.label-caps{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}[data-theme=dark]{--bg: #1a1816;--paper-base: #1a1816;--surface: #1a1816;--surface-bright: #242120;--surface-dim: #100f0e;--surface-container-lowest: #242120;--surface-container-low: #2a2725;--surface-container: #312e2c;--surface-container-high: #3a3633;--surface-container-highest: #45413d;--surface-variant: #45413d;--inverse-surface: #f4f0ef;--inverse-on-surface: #1c1b1b;--personal-tint: #1c2845;--fog-grey: #1f1d1c;--surface-base: var(--bg);--surface-1: var(--surface-container-low);--surface-2: var(--surface-container);--surface-3: var(--surface-container-high);--surface-overlay: rgba(0, 0, 0, .55);--surface-card: var(--surface-container-lowest);--surface-input: var(--surface-container);--surface-chip: var(--surface-container-high);--surface-raised: var(--surface-container-low);--surface-glass: rgba(26, 24, 22, .85);--on-surface: #f0ede9;--on-surface-variant: #b8b4ae;--on-background: #f0ede9;--ink: var(--on-surface);--ink-soft: var(--on-surface-variant);--ink-muted: #8a857f;--ink-dim: #6e6964;--ink-faint: #4a4642;--text-primary: var(--ink);--text-secondary: var(--ink-soft);--text-muted: var(--ink-muted);--text-disabled: var(--ink-faint);--text-inverse: #1c1b1b;--text-link: var(--ink);--primary: #f0ede9;--on-primary: #1a1816;--primary-fixed: #3a3633;--primary-fixed-dim: #4a4642;--on-primary-fixed: #f0ede9;--on-primary-fixed-variant: #b8b4ae;--primary-container: #f0ede9;--on-primary-container: #1a1816;--inverse-primary: #1a1816;--secondary: #a8c4ac;--on-secondary: #1a1816;--secondary-container: #2c3a2f;--on-secondary-container: #c8e0cc;--tertiary: #f0ede9;--on-tertiary: #1a1816;--tertiary-container: #3a3633;--on-tertiary-container: #c8c5c2;--error: #ff8a85;--on-error: #4a0008;--error-container: #5c1a1a;--on-error-container: #ffdad6;--outline: #8a857f;--outline-variant: #45413d;--must-gold: #F2C94C;--rec-silver: #8a857f;--pill-must: var(--must-gold);--pill-rec: #4ade80;--pill-skip: var(--error);--accent-primary: var(--primary);--accent-primary-dim: rgba(240, 237, 233, .08);--accent-primary-mid: rgba(240, 237, 233, .16);--accent-primary-rgb: 240 237 233;--accent-primary-text: var(--on-primary);--accent-danger: var(--error);--accent-danger-rgb: 255 138 133;--accent-danger-dim: rgba(255, 138, 133, .14);--accent-warning: var(--must-gold);--accent-warning-rgb: 242 201 76;--accent-info: #6a92ff;--accent-info-rgb: 106 146 255;--accent-info-dim: rgba(106, 146, 255, .14);--accent-success: #a8c4ac;--accent-success-rgb: 168 196 172;--accent-success-dim: rgba(168, 196, 172, .14);--amber: var(--must-gold);--amber-soft: var(--rec-silver);--amber-ink: var(--on-surface);--amber-dim: #b8923a;--tier-must-bg: var(--must-gold);--tier-must-text: #1a1816;--tier-must-border: var(--must-gold);--tier-rec-bg: var(--rec-silver);--tier-rec-text: #1a1816;--tier-rec-border: var(--rec-silver);--tier-liked-bg: var(--surface-container-highest);--tier-liked-text: var(--on-surface-variant);--tier-liked-border: var(--outline-variant);--tier-skip-bg: transparent;--tier-skip-text: var(--error);--tier-skip-border: var(--error);--border: var(--outline-variant);--border-dim: rgba(138, 133, 127, .3);--border-subtle: var(--border-dim);--border-default: var(--border);--border-strong: var(--outline);--border-accent: var(--must-gold);--border-glass: rgba(255, 255, 255, .06);--shadow-card: 0px 4px 20px rgba(0, 0, 0, .4);--shadow-card-up: 0px -4px 20px rgba(0, 0, 0, .4);--shadow-sm: 0px 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0px 4px 20px rgba(0, 0, 0, .4);--shadow-lg: 0px 8px 32px rgba(0, 0, 0, .5);--shadow-hero: 0px 24px 64px rgba(0, 0, 0, .6), 0px 8px 24px rgba(0, 0, 0, .4);--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .04);--glow-primary: 0 0 12px rgba(240, 237, 233, .1);--glow-primary-sm: 0 0 8px rgba(240, 237, 233, .08);--glow-card: var(--shadow-card)}