:root{--ink-900:#1a1612;--ink-800:#2d2820;--ink-700:#4a4236;--ink-500:#7a6e5f;--ink-400:#a89e8e;--ink-300:#c8bfb0;--ink-200:#e2dcd3;--ink-100:#f0ece5;--ink-50:#faf8f4;--paper:#faf8f4;--paper-warm:#f5f0e8;--paper-tint:#ede7db;--ink-sd-design-drill:#b45309;--ink-sd-socratic-seminar:#c2410c;--ink-sd-bootcamp:#9a3412;--ink-sd-workout:#92400e;--ink-algo-standard-mock:#4338ca;--ink-algo-challenging-mock:#6d28d9;--ink-algo-coding-drills:#0e7490;--ink-algo-concept-drills:#1d4ed8;--ink-algo-workout:#5b21b6;--ink-oo-dm-workout:#065f46;--color-sd-design-drill:var(--ink-sd-design-drill);--color-sd-socratic-seminar:var(--ink-sd-socratic-seminar);--color-sd-bootcamp:var(--ink-sd-bootcamp);--color-sd-workout:var(--ink-sd-workout);--color-algo-standard-mock:var(--ink-algo-standard-mock);--color-algo-challenging-mock:var(--ink-algo-challenging-mock);--color-algo-coding-drills:var(--ink-algo-coding-drills);--color-algo-concept-drills:var(--ink-algo-concept-drills);--color-algo-workout:var(--ink-algo-workout);--color-oo-dm-workout:var(--ink-oo-dm-workout);--bg-primary:var(--paper);--bg-secondary:var(--paper-warm);--bg-tertiary:var(--paper-tint);--bg-card:#fff;--bg-card-hover:var(--ink-50);--bg-glass:#faf8f4eb;--text-primary:var(--ink-900);--text-secondary:var(--ink-500);--text-muted:var(--ink-400);--border-subtle:var(--ink-200);--border-default:var(--ink-300);--border-strong:var(--ink-700);--color-accent:var(--ink-algo-standard-mock);--color-accent-hover:#3730a3;--color-success:var(--ink-oo-dm-workout);--color-warning:var(--ink-sd-design-drill);--color-error:#b91c1c;--font-display:"DM Serif Display", Georgia, serif;--font-body:"Literata", "Georgia", serif;--font-mono:"IBM Plex Mono", "Courier New", monospace;--font-sans:"Literata", Georgia, serif;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--spacing-xs:var(--space-xs);--spacing-sm:var(--space-sm);--spacing-md:var(--space-md);--spacing-lg:var(--space-lg);--spacing-xl:var(--space-xl);--spacing-2xl:var(--space-2xl);--radius-sm:3px;--radius-md:6px;--radius-lg:10px;--radius-full:9999px;--shadow-sm:0 1px 3px #1a161214, 0 1px 2px #1a16120f;--shadow-md:0 4px 16px #1a16121a, 0 2px 6px #1a16120f;--shadow-lg:0 12px 40px #1a161224, 0 4px 12px #1a161214;--shadow-glow:0 0 0 3px #4338ca26;--transition-fast:.12s ease;--transition-base:.22s ease;--transition-slow:.4s ease;--topnav-height:56px;--sidebar-width:260px;--sidebar-collapsed-width:72px;--header-height:56px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--border-color:var(--border-subtle)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-size:16px}body{font-family:var(--font-body);background:var(--paper);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1, "liga" 1, "onum" 1;line-height:1.65}a{color:var(--color-accent);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-accent-hover)}.display{font-family:var(--font-display);letter-spacing:-.01em;line-height:1.1}.mono{font-family:var(--font-mono);letter-spacing:-.02em}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-md);transition:box-shadow var(--transition-fast), border-color var(--transition-fast)}.card:hover{box-shadow:var(--shadow-sm);border-color:var(--border-default)}.badge{padding:2px var(--space-sm);border-radius:var(--radius-sm);font-size:.6875rem;font-weight:600;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;align-items:center;line-height:1.5;display:inline-flex}.glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle)}.rule{border:none;border-top:1px solid var(--border-subtle);margin:var(--space-lg) 0}.rule--heavy{border-top:2px solid var(--ink-900)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes columnReveal{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.28s forwards fadeUp}.skeleton{background:linear-gradient(90deg, var(--paper-tint) 25%, var(--ink-100) 50%, var(--paper-tint) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.6s infinite shimmer}.section-rule{background:var(--ink-900);width:100%;height:2px;margin-bottom:var(--space-sm)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--paper-tint)}::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--ink-500)}body.live-mode #app-layout{grid-template-rows:1fr;grid-template-columns:1fr}body.live-mode #app-topbar,body.live-mode nav{display:none}body.live-mode #app-main{grid-area:1/1;min-height:100vh;padding:0}