:root{--bg-deep: #0a0e17;--bg-primary: #0f1520;--bg-secondary: #151d2e;--bg-tertiary: #1a2438;--bg-overlay: rgba(10, 14, 23, .92);--surface-panel: rgba(21, 29, 46, .86);--surface-panel-strong: rgba(21, 29, 46, .94);--surface-panel-muted: rgba(15, 21, 32, .72);--surface-line: rgba(139, 149, 168, .14);--surface-line-strong: rgba(139, 149, 168, .24);--primary-400: #0fbfa3;--primary-500: #0d9e87;--primary-600: #0a7d6b;--primary-soft: rgba(15, 191, 163, .12);--primary-medium: rgba(15, 191, 163, .22);--accent-300: #ffb733;--accent-400: #d4930a;--accent-500: #b37a08;--accent-soft: rgba(212, 147, 10, .14);--accent-medium: rgba(212, 147, 10, .24);--signal-correct: #2dd4a0;--signal-wrong: #f0605a;--signal-warning: #e6a817;--signal-info: #4a9eff;--correct-soft: rgba(45, 212, 160, .14);--wrong-soft: rgba(240, 96, 90, .14);--warning-soft: rgba(230, 168, 23, .14);--info-soft: rgba(74, 158, 255, .14);--text-primary: #e8ecf2;--text-secondary: #8b95a8;--text-tertiary: #7b8598;--text-muted: #5a6478;--highlight: #8fff6a;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-heading: "Space Grotesk", system-ui, sans-serif;--font-body: "IBM Plex Sans", system-ui, sans-serif;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--space-3xl: 32px;--space-4xl: 48px;--pad-page-x: clamp(12px, 4vw, 20px);--pad-card: clamp(14px, 4vw, 24px);--pad-panel: clamp(12px, 3.5vw, 20px);--radius-sm: 10px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-pill: 999px;--shadow-card: 0 8px 24px rgba(0, 0, 0, .3);--shadow-elevated: 0 16px 40px rgba(0, 0, 0, .4);--shadow-glow: 0 0 30px rgba(15, 191, 163, .16);--gradient-panel: linear-gradient(180deg, rgba(26, 36, 56, .94), rgba(15, 21, 32, .88));--gradient-panel-strong: linear-gradient(180deg, rgba(21, 29, 46, .98), rgba(10, 14, 23, .92));--gradient-practice: linear-gradient(135deg, var(--primary-500), var(--signal-info));--gradient-mock: linear-gradient(135deg, var(--accent-500), var(--accent-300));--gradient-success: linear-gradient(135deg, var(--primary-600), var(--signal-correct));--gradient-danger: linear-gradient(135deg, var(--signal-wrong), #b63b33);--ease-out: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration-normal: .25s}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}:root{color-scheme:dark}body{background:var(--bg-deep);background-image:linear-gradient(#0f1520f7,#0f1520f7),repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(13,158,135,.03) 40px,rgba(13,158,135,.03) 41px),repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(13,158,135,.03) 40px,rgba(13,158,135,.03) 41px);color:var(--text-primary);font-family:var(--font-body);text-rendering:optimizeLegibility;overflow-wrap:break-word;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}button,input,textarea,select{font:inherit}@keyframes floatUp{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-180%) scale(1.6)}}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-120%)}to{opacity:1;transform:translate(-50%)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes glow{0%,to{box-shadow:0 0 8px #fbbf244d}50%{box-shadow:0 0 25px #fbbf24b3}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes rainbow{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes sparkle{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}@keyframes chestOpen{0%{transform:scale(1) rotateY(0)}50%{transform:scale(1.3) rotateY(180deg)}to{transform:scale(1) rotateY(360deg)}}@keyframes scratchReveal{0%{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(100% at 50% 50%)}}@keyframes bossEntrance{0%{transform:scale(0) rotate(-180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(400px) rotate(720deg);opacity:0}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}