@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@700;900&display=swap";:root{--color-bg:#07050f;--color-surface:#0e0b1a;--color-surface-2:#130f22;--color-surface-3:#0b0917;--color-border:#7c6fff1a;--color-border-accent:#7c6fff47;--color-primary:#7c6fff;--color-primary-light:#a99fff;--color-primary-dark:#5a4fd6;--color-primary-glow:#7c6fff38;--color-cyan:#64d2ff;--color-cyan-light:#9de3ff;--color-cyan-glow:#64d2ff2e;--color-violet:#b46eff;--color-violet-light:#d4aaff;--color-violet-glow:#b46eff2e;--color-magenta:#ff2ecb;--color-magenta-light:#ff85e0;--color-magenta-glow:#ff2ecb38;--color-pink:#ff4fa3;--color-pink-light:#ff8fc4;--color-pink-glow:#ff4fa333;--gradient-neon:linear-gradient(135deg, var(--color-magenta) 0%, var(--color-primary) 50%, var(--color-cyan) 100%);--gradient-neon-soft:linear-gradient(135deg, #ff2ecb26 0%, #7c6fff26 50%, #64d2ff26 100%);--gradient-hero:radial-gradient(ellipse 80% 60% at 30% 0%, #b46eff40 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 100% 30%, #64d2ff2e 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 10% 100%, #ff2ecb24 0%, transparent 60%);--gradient-text:linear-gradient(90deg, var(--color-magenta-light), var(--color-primary-light) 45%, var(--color-cyan-light));--color-success:#4fffb0;--color-success-glow:#4fffb026;--color-error:#ff4f7b;--color-error-glow:#ff4f7b26;--color-warning:#ffc76e;--color-xp:#7c6fff;--color-text:#e8e0ff;--color-text-muted:#e8e0ff80;--color-text-faint:#e8e0ff40;--font-ui:"Inter", sans-serif;--font-display:"Orbitron", sans-serif;--font-code:"JetBrains Mono", monospace;--sidebar-width:280px;--bottombar-height:64px;--sharpchan-width:240px;--sharpchan-height:320px;--topbar-height:56px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:32px;--radius-full:9999px;--shadow-sm:0 2px 8px #0006;--shadow-md:0 4px 24px #00000080;--shadow-lg:0 8px 48px #000000b3;--shadow-primary:0 0 20px var(--color-primary-glow), 0 0 60px #7c6fff14;--shadow-glow:0 0 30px var(--color-primary-glow);--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1)}.theme-steel{--color-primary:#6ee7ff;--color-primary-light:#a8f2ff;--color-primary-dark:#2fb8d8;--color-primary-glow:#6ee7ff3d;--color-border-accent:#6ee7ff4d;--color-xp:#6ee7ff;--color-magenta:#8fb8ff;--color-magenta-glow:#8fb8ff33;--gradient-neon:linear-gradient(135deg, #8fb8ff 0%, #6ee7ff 50%, #b8f4ff 100%);--gradient-text:linear-gradient(90deg, #a8d4ff, #6ee7ff 50%, #d4faff)}.theme-indigo-gold{--color-primary:#ffcc4d;--color-primary-light:#ffe08a;--color-primary-dark:#dd9a00;--color-primary-glow:#ffcc4d38;--color-border-accent:#ffcc4d4d;--color-xp:#ffcc4d;--color-cyan:#ff4fd8;--color-cyan-light:#ff9bec;--gradient-neon:linear-gradient(135deg, #ff4fd8 0%, #ffcc4d 55%, #fff1b8 100%);--gradient-text:linear-gradient(90deg, #ff9bec, #ffcc4d 55%, #fff1b8)}.theme-crimson{--color-primary:#ff2e6e;--color-primary-light:#ff85ac;--color-primary-dark:#c9124a;--color-primary-glow:#ff2e6e3d;--color-border-accent:#ff2e6e4d;--color-xp:#ff2e6e;--color-magenta:#ff2ecb;--gradient-neon:linear-gradient(135deg, #ff2ecb 0%, #ff2e6e 55%, #ffb347 100%);--gradient-text:linear-gradient(90deg, #ff8fe0, #ff2e6e 55%, #ffb347)}.theme-terminal{--color-primary:#39ff8f;--color-primary-light:#9fffcf;--color-primary-dark:#12cc63;--color-primary-glow:#39ff8f3d;--color-border-accent:#39ff8f4d;--color-xp:#39ff8f;--color-cyan:#39ff8f;--color-magenta:#64d2ff;--gradient-neon:linear-gradient(135deg, #64d2ff 0%, #39ff8f 55%, #d4ffe8 100%);--gradient-text:linear-gradient(90deg, #9fe8ff, #39ff8f 55%, #d4ffe8)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-ui);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border-accent);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary-dark)}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.text-primary{color:var(--color-primary)}.text-cyan{color:var(--color-cyan)}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.font-code{font-family:var(--font-code)}.font-display{font-family:var(--font-display)}.text-gradient{background:var(--gradient-text);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.spotlight{--spot-x:50%;--spot-y:50%;--spot-opacity:0;position:relative}.spotlight:before{content:"";border-radius:inherit;background:radial-gradient(420px circle at var(--spot-x) var(--spot-y), var(--color-magenta-glow), transparent 65%);opacity:var(--spot-opacity);transition:opacity var(--transition-base);pointer-events:none;z-index:0;position:absolute;inset:0}.spotlight:after{content:"";border-radius:inherit;background:radial-gradient(260px circle at var(--spot-x) var(--spot-y), var(--color-cyan-light), transparent 70%);opacity:var(--spot-opacity);transition:opacity var(--transition-base);-webkit-mask-composite:xor;pointer-events:none;z-index:1;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.spotlight>*{z-index:2;position:relative}.sidebar{width:var(--sidebar-width);border-right:1px solid var(--color-border-accent);z-index:50;height:100vh;transition:transform var(--transition-slow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0a0814f5;flex-direction:column;display:flex;position:fixed;top:0;left:0;transform:translate(-100%);box-shadow:4px 0 40px #000000b3}.sidebar--open{transform:translate(0)}.sidebar-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.sidebar-title{font-family:var(--font-display);color:var(--color-primary-light);letter-spacing:.12em;text-transform:uppercase;font-size:.85rem}.sidebar-close{color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;padding:4px 8px;font-size:1rem}.sidebar-close:hover{color:var(--color-text);background:var(--color-border)}.sidebar-nav{flex:1;padding:10px 0;overflow-y:auto}.sidebar-unit{margin-bottom:2px}.sidebar-unit-header{width:100%;color:var(--color-text);cursor:pointer;text-align:left;transition:background var(--transition-fast);font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.08em;background:0 0;border:none;align-items:center;gap:8px;padding:10px 16px;font-size:.75rem;font-weight:700;display:flex}.sidebar-unit-header:hover:not(:disabled){background:#7c6fff0f}.sidebar-unit-header--locked{opacity:.35;cursor:not-allowed}.sidebar-unit-icon{text-align:center;width:16px;color:var(--color-primary);flex-shrink:0;font-size:.8rem}.sidebar-unit-title{color:var(--color-primary);flex-shrink:0}.sidebar-unit-name{color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.sidebar-lessons{padding:0 0 6px;list-style:none}.sidebar-lesson-btn{width:100%;color:var(--color-text-muted);cursor:pointer;text-align:left;font-family:var(--font-ui);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;align-items:center;gap:10px;padding:7px 14px 7px 34px;font-size:.85rem;display:flex}.sidebar-lesson-btn:hover{color:var(--color-text);background:#7c6fff0f}.sidebar-lesson-btn--active{color:var(--color-primary-light);border-right:2px solid var(--color-primary);background:#7c6fff1f}.sidebar-lesson-btn--done{color:var(--color-success)}.sidebar-lesson-indicator{text-align:center;flex-shrink:0;width:16px;font-size:.7rem}.xp-display{font-family:var(--font-ui);align-items:center;gap:5px;display:flex}.xp-icon{color:var(--color-primary);font-size:.9rem;animation:2.5s ease-in-out infinite xp-pulse}.xp-value{color:var(--color-primary-light);font-size:.95rem;font-weight:800}.xp-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700}@keyframes xp-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}.progress-bar-wrapper{flex-direction:column;gap:3px;width:100%;display:flex}.progress-bar-track{border-radius:var(--radius-full);background:#7c6fff1a;width:100%;height:4px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), var(--color-cyan));border-radius:var(--radius-full);height:100%;box-shadow:0 0 8px var(--color-primary-glow);transition:width .7s cubic-bezier(.34,1.56,.64,1)}.progress-bar-label{color:var(--color-text-faint);font-size:.68rem;font-family:var(--font-ui)}.bottombar{border-top:1px solid var(--color-border-accent);z-index:10;-webkit-backdrop-filter:blur(12px);background:#0e0b1ae0;grid-area:bottombar;align-items:center;gap:16px;padding:0 20px;display:flex;position:relative}.bottombar:before{content:"";background:linear-gradient(90deg, transparent, var(--color-cyan), var(--color-primary), var(--color-cyan), transparent);opacity:.35;height:1px;position:absolute;top:0;left:0;right:0}.bottombar-left{flex-shrink:0}.bottombar-center{flex:1;min-width:0}.bottombar-right{flex-shrink:0;align-items:center;gap:12px;display:flex}.bottombar-shop-btn{border:1px solid var(--color-border-accent);border-radius:var(--radius-full);cursor:pointer;width:34px;height:34px;transition:all var(--transition-fast);background:#7c6fff14;justify-content:center;align-items:center;font-size:1rem;display:flex}.bottombar-shop-btn:hover{border-color:var(--color-primary);box-shadow:0 0 12px var(--color-primary-glow);background:#7c6fff26;transform:translateY(-1px)}.bottombar-level{color:var(--color-text-muted);font-size:.82rem;font-family:var(--font-ui)}.bottombar-level strong{color:var(--color-primary-light);margin-left:2px;font-size:1rem}.sharpchan-widget{bottom:calc(var(--bottombar-height) + 8px);width:var(--sharpchan-width);z-index:20;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;right:8px}.sharpchan-sprite-wrap{width:var(--sharpchan-width);height:var(--sharpchan-height);pointer-events:none;justify-content:center;align-items:flex-end;display:flex}.sharpchan-sprite-img{object-fit:contain;object-position:bottom center;filter:drop-shadow(0 4px 16px #00000080);width:100%;height:100%}.dialogue-bubble{background:var(--color-surface-2);border:1px solid var(--color-border-accent);border-radius:var(--radius-md);pointer-events:all;cursor:pointer;width:max-content;max-width:210px;box-shadow:var(--shadow-md), 0 0 12px #ff6eb41a;text-align:left;font-family:var(--font-ui);background-color:var(--color-surface-2);color:var(--color-text);padding:9px 13px;position:relative}.dialogue-bubble:hover{border-color:var(--color-pink)}.dialogue-bubble p{color:var(--color-text);margin:0;font-size:.81rem;line-height:1.55}.dialogue-tail{border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--color-border-accent);width:0;height:0;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}.dialogue-tail:after{content:"";border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--color-surface-2);width:0;height:0;position:absolute;top:-9px;left:50%;transform:translate(-50%)}.domain-expansion{z-index:200;cursor:pointer;background:#06040cf0;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.domain-glow{pointer-events:none;background:radial-gradient(60% 50% at 50% 60%,#ff2ecb33 0%,#64d2ff1a 50%,#0000 80%);position:absolute;inset:0}.domain-content{text-align:center;flex-direction:column;align-items:center;gap:20px;max-width:560px;padding:32px;display:flex;position:relative}.domain-sprite-wrap{justify-content:center;align-items:flex-end;width:300px;height:360px;display:flex}.domain-sprite-img{object-fit:contain;object-position:bottom center;filter:drop-shadow(0 0 40px #ff2ecb73)drop-shadow(0 0 80px #64d2ff40);width:100%;height:100%}.domain-dialogue{max-width:440px;color:var(--color-text);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0e0a14d9;border:1px solid #ff2ecb40;padding:18px 26px;font-size:1.05rem;line-height:1.75;box-shadow:0 0 30px #ff2ecb1a}.domain-tap-hint{color:#b4dcff80;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;animation:1.8s ease-in-out infinite domain-blink}@keyframes domain-blink{0%,to{opacity:.25}50%{opacity:1}}.animated-bg{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.aurora{position:absolute;inset:0}.aurora__blob{filter:blur(90px);opacity:.28;will-change:transform;border-radius:50%;position:absolute}.aurora__blob--1{background:radial-gradient(circle,#7c6fff99 0%,#0000 70%);width:600px;height:600px;animation:22s ease-in-out infinite alternate aurora-drift-1;top:-15%;left:-10%}.aurora__blob--2{background:radial-gradient(circle,#64d2ff73 0%,#0000 70%);width:500px;height:500px;animation:28s ease-in-out infinite alternate aurora-drift-2;top:20%;right:-8%}.aurora__blob--3{background:radial-gradient(circle,#ff2ecb52 0%,#0000 70%);width:450px;height:450px;animation:18s ease-in-out infinite alternate aurora-drift-3;bottom:-10%;left:25%}.aurora__blob--4{background:radial-gradient(circle,#7c6fff59 0%,#0000 70%);width:350px;height:350px;animation:24s ease-in-out infinite alternate aurora-drift-4;top:55%;left:55%}@keyframes aurora-drift-1{0%{transform:translate(0)scale(1)}to{transform:translate(80px,60px)scale(1.15)}}@keyframes aurora-drift-2{0%{transform:translate(0)scale(1.05)}to{transform:translate(-60px,80px)scale(.9)}}@keyframes aurora-drift-3{0%{transform:translate(0)scale(1)}to{transform:translate(40px,-70px)scale(1.1)}}@keyframes aurora-drift-4{0%{transform:translate(0)scale(.9)}to{transform:translate(-50px,-40px)scale(1.2)}}.particle-canvas{width:100%;height:100%;position:absolute;inset:0}.app-layout{grid-template-rows:var(--topbar-height) 1fr var(--bottombar-height);background:var(--color-bg);grid-template-columns:1fr;grid-template-areas:"topbar""main""bottombar";width:100vw;height:100vh;display:grid;position:relative;overflow:hidden}.topbar{border-bottom:1px solid var(--color-border-accent);z-index:10;-webkit-backdrop-filter:blur(12px);background:#0e0b1ad9;grid-area:topbar;align-items:center;gap:12px;padding:0 20px;display:flex;position:relative}.topbar:after{content:"";background:linear-gradient(90deg, transparent, var(--color-magenta), var(--color-primary), var(--color-cyan), transparent);opacity:.45;height:1px;position:absolute;bottom:0;left:0;right:0}.hamburger-btn{cursor:pointer;border-radius:var(--radius-sm);width:36px;height:36px;transition:background var(--transition-fast);background:0 0;border:none;flex-direction:column;flex-shrink:0;justify-content:center;gap:5px;padding:6px;display:flex}.hamburger-btn:hover{background:var(--color-border)}.hamburger-btn span{background:var(--color-text-muted);width:100%;height:2px;transition:background var(--transition-fast);border-radius:2px;display:block}.hamburger-btn:hover span{background:var(--color-primary-light)}.topbar-title{font-family:var(--font-display);letter-spacing:.06em;align-items:baseline;gap:1px;font-size:1.2rem;display:flex}.topbar-title-main{color:var(--color-text)}.topbar-title-plus{color:var(--color-magenta);font-size:1.1rem}.topbar-title-accent{color:var(--color-primary-light);font-size:.85rem;font-family:var(--font-ui);letter-spacing:.02em;opacity:.8;margin-left:3px;font-weight:600}.topbar-spacer{flex:1}.main-content{z-index:1;padding-right:calc(var(--sharpchan-width) + 16px);grid-area:main;position:relative;overflow:hidden auto}.sidebar-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:40;background:#000000b3;animation:.2s fadeIn;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.home-page{max-width:1180px;padding:28px 32px 40px}.home-grid{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:28px;display:grid}.home-main{flex-direction:column;gap:32px;min-width:0;display:flex}.hero-panel{border:1px solid var(--color-border-accent);border-radius:var(--radius-xl);background:var(--color-surface-2);flex-direction:column;gap:4px;padding:28px 32px;display:flex;position:relative;overflow:hidden}.hero-glow{background:var(--gradient-hero);pointer-events:none;position:absolute;inset:0}.hero-kicker{font-family:var(--font-code);letter-spacing:.14em;color:var(--color-cyan);opacity:.8;font-size:.7rem;position:relative}.hero-title{font-family:var(--font-display);letter-spacing:.01em;color:var(--color-text);margin-top:6px;font-size:1.9rem;font-weight:900;position:relative}.hero-sub{color:var(--color-text-muted);margin-bottom:18px;font-size:.9rem;position:relative}.home-stats{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.stat-card{border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);background:#0e0b1abf;flex-direction:column;gap:4px;padding:16px 18px;display:flex;position:relative;overflow:hidden}.stat-card:before{content:"";background:var(--gradient-neon);opacity:.75;height:2px;position:absolute;top:0;left:0;right:0}.stat-card:hover{border-color:var(--color-primary);box-shadow:0 0 24px var(--color-primary-glow)}.stat-card--xp .stat-icon{color:var(--color-magenta);opacity:.35;font-size:1.4rem;animation:2.5s ease-in-out infinite xp-pulse;position:absolute;top:14px;right:16px}.stat-card--shop{cursor:pointer;text-align:center;border-style:dashed;border-color:#7c6fff33;justify-content:center;align-items:center;gap:6px}.stat-card--shop:hover{background:#7c6fff14;border-style:solid}.stat-shop-icon{font-size:1.6rem}.stat-shop-arrow{color:var(--color-primary);opacity:.6;font-size:1rem;position:absolute;bottom:12px;right:16px}.stat-value{font-family:var(--font-display);color:var(--color-primary-light);font-size:1.8rem;font-weight:900;line-height:1}.stat-value-denom{color:var(--color-text-muted);font-size:1rem;font-weight:400}.stat-label{text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);font-size:.72rem;font-weight:700}.stat-sublabel{color:var(--color-text-faint);margin-top:2px;font-size:.7rem}.stat-bar-track{border-radius:var(--radius-full);background:#7c6fff1f;height:3px;margin-top:6px;overflow:hidden}.stat-bar-fill{background:var(--gradient-neon);border-radius:var(--radius-full);height:100%;box-shadow:0 0 6px var(--color-primary-glow);transition:width .8s cubic-bezier(.34,1.56,.64,1)}.stat-bar-fill--cyan{background:linear-gradient(90deg, var(--color-primary), var(--color-cyan));box-shadow:0 0 6px var(--color-cyan-glow)}.home-cta{flex-direction:column;gap:10px;display:flex;position:relative}.cta-btn{border-radius:var(--radius-md);font-family:var(--font-display);letter-spacing:.06em;cursor:pointer;transition:all var(--transition-base);border:none;align-self:flex-start;align-items:center;gap:10px;padding:14px 32px;font-size:.95rem;display:inline-flex}.cta-btn--primary{background:var(--gradient-neon);color:#fff;box-shadow:0 4px 24px var(--color-magenta-glow), 0 0 0 1px #7c6fff4d;background-position:0%;background-size:200% 200%}.cta-btn--primary:hover{box-shadow:0 8px 36px var(--color-magenta-glow), 0 0 0 1px var(--color-primary);background-position:100%;transform:translateY(-2px)}.cta-btn--primary:active{transform:translateY(0)}.cta-btn-icon{opacity:.9;font-size:.8rem}.cta-sub{color:var(--color-text-faint);padding-left:2px;font-size:.8rem}.home-section-title{font-family:var(--font-display);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.14em;align-items:center;gap:10px;margin-bottom:14px;font-size:.75rem;display:flex}.section-title-bar{background:var(--gradient-neon);border-radius:2px;width:3px;height:14px;display:inline-block}.unit-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.unit-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all var(--transition-base);background:#0e0b1abf;flex-direction:column;gap:6px;padding:16px 14px 14px;display:flex;position:relative;overflow:hidden}.unit-card--active{cursor:pointer;border-color:var(--color-border-accent)}.unit-card--active:hover{border-color:var(--color-primary);box-shadow:0 4px 24px var(--color-primary-glow);background:#7c6fff12;transform:translateY(-2px)}.unit-card--locked{opacity:.35;cursor:not-allowed}.unit-card-head{justify-content:space-between;align-items:center;display:flex}.unit-card-num{font-family:var(--font-display);color:var(--color-primary);letter-spacing:.1em;font-size:.65rem}.unit-card-pct{color:var(--color-cyan);font-size:.65rem;font-weight:700;font-family:var(--font-ui)}.unit-card-lock{opacity:.6;font-size:.7rem}.unit-card-title{color:var(--color-text);flex:1;font-size:.82rem;font-weight:600;line-height:1.3}.unit-card-meta{color:var(--color-text-faint);font-size:.68rem}.unit-card-bar-track{border-radius:var(--radius-full);background:#7c6fff1a;height:2px;margin-top:4px;overflow:hidden}.unit-card-bar-fill{background:var(--gradient-neon);border-radius:var(--radius-full);height:100%;transition:width 1s}.siblings-panel{border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0e0b1a99;padding:20px 18px;position:sticky;top:0}.siblings-intro{color:var(--color-text-faint);margin:-6px 0 16px;font-size:.76rem;line-height:1.5}.siblings-list{flex-direction:column;gap:8px;display:flex}.sibling-card{--sib-hue:var(--color-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:all var(--transition-fast);background:#ffffff04;align-items:center;gap:10px;padding:10px 12px;text-decoration:none;display:flex;position:relative;overflow:hidden}.sibling-card:before{content:"";background:var(--sib-hue);opacity:.6;width:2px;transition:opacity var(--transition-fast);position:absolute;top:0;bottom:0;left:0}.sibling-card:hover{border-color:var(--sib-hue);background:color-mix(in srgb, var(--sib-hue) 10%, transparent);box-shadow:0 0 16px color-mix(in srgb, var(--sib-hue) 35%, transparent);transform:translate(2px)}.sibling-card:hover:before{opacity:1}.sibling-card--self{cursor:default;border-style:dashed;border-color:color-mix(in srgb, var(--sib-hue) 45%, transparent);background:color-mix(in srgb, var(--sib-hue) 8%, transparent)}.sibling-card--self:hover{transform:none}.sibling-glyph{border-radius:var(--radius-sm);background:color-mix(in srgb, var(--sib-hue) 18%, transparent);width:32px;height:32px;color:var(--sib-hue);flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;display:flex}.sibling-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.sibling-name{color:var(--color-text);white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:600;overflow:hidden}.sibling-lang{color:var(--color-text-faint);font-size:.66rem;font-family:var(--font-code)}.sibling-arrow{color:var(--sib-hue);opacity:.7;flex-shrink:0;font-size:.85rem}.sibling-tag{text-transform:uppercase;letter-spacing:.06em;color:var(--sib-hue);border:1px solid color-mix(in srgb, var(--sib-hue) 50%, transparent);border-radius:var(--radius-full);white-space:nowrap;flex-shrink:0;padding:3px 8px;font-size:.6rem}@media (width<=980px){.home-grid{grid-template-columns:1fr}.siblings-panel{position:static}.unit-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=700px){.home-stats,.unit-grid{grid-template-columns:1fr 1fr}.hero-title{font-size:1.5rem}}.code-block{border:1px solid var(--color-border-accent);border-radius:var(--radius-md);font-family:var(--font-code);background:#07050fe6;font-size:.87rem;overflow:hidden}.code-block-label{text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary);font-size:.68rem;font-weight:700;font-family:var(--font-display);border-bottom:1px solid var(--color-border);background:#7c6fff14;padding:6px 14px}.code-block-pre{white-space:pre;margin:0;padding:14px 0;overflow-x:auto}.code-line{align-items:baseline;min-height:1.6em;padding:0 2px;display:flex}.code-line:hover{background:#7c6fff0a}.code-line-number{text-align:right;width:36px;color:var(--color-text-faint);-webkit-user-select:none;user-select:none;flex-shrink:0;padding-right:16px;font-size:.75rem}.code-line-content{padding-right:20px}.token-keyword{color:#7c9fff;font-weight:600}.token-type{color:#9ecbff}.token-string{color:#7eeaaa}.token-comment{color:#5a6075;font-style:italic}.token-number{color:#ffb86c}.token-method{color:var(--color-cyan)}.token-class-name{color:#e2c87a}.token-preprocessor{color:#b46eff;font-weight:600}.token-attribute{color:#c9a0ff;font-style:italic}.token-operator{color:#ff6e9c}.phase-indicator{align-items:center;gap:0;padding:0 4px;display:flex;position:relative}.phase-connectors{pointer-events:none;z-index:0;display:flex;position:absolute;top:50%;left:0;right:0}.phase-connector{background:var(--color-border);height:1px;transition:background var(--transition-base);flex:1;margin:0 44px}.phase-connector--done{background:var(--color-primary);box-shadow:0 0 4px var(--color-primary-glow)}.phase-tab{z-index:1;cursor:pointer;transition:opacity var(--transition-fast);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:8px 16px;display:flex;position:relative}.phase-tab:disabled{cursor:not-allowed;opacity:.3}.phase-tab-icon{background:var(--color-surface);border:1px solid var(--color-border-accent);width:32px;height:32px;color:var(--color-text-muted);transition:all var(--transition-base);border-radius:50%;justify-content:center;align-items:center;font-size:.8rem;display:flex}.phase-tab--active .phase-tab-icon{border-color:var(--color-primary);background:var(--color-primary-glow);color:var(--color-primary-light);box-shadow:0 0 14px var(--color-primary-glow), 0 0 0 1px var(--color-primary-dark)}.phase-tab--done .phase-tab-icon{border-color:var(--color-success);background:var(--color-success-glow);color:var(--color-success)}.phase-tab-label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-faint);white-space:nowrap;font-size:.65rem;font-weight:700;font-family:var(--font-display)}.phase-tab--active .phase-tab-label{color:var(--color-primary-light)}.phase-tab--done .phase-tab-label{color:var(--color-success)}.lesson-canvas{flex-direction:column;gap:22px;min-height:100%;padding:24px 28px;display:flex}.lesson-phase{flex-direction:column;gap:18px;display:flex}.phase-heading{font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;font-size:1rem}.phase-heading--work{color:var(--color-success)}.phase-heading--break{color:var(--color-error)}.phase-heading--try{color:var(--color-cyan)}.phase-explanation,.phase-prompt{color:var(--color-text);font-size:.94rem;line-height:1.8}.phase-explanation p,.phase-prompt p{margin:0 0 .85em;line-height:1.8}.phase-explanation p:last-child,.phase-prompt p:last-child{margin-bottom:0}.phase-explanation strong,.phase-prompt strong{color:var(--color-primary-light);font-weight:700}.phase-explanation em,.phase-prompt em{color:var(--color-text-muted);font-style:italic}.phase-explanation h1,.phase-explanation h2,.phase-explanation h3,.phase-prompt h1,.phase-prompt h2,.phase-prompt h3{font-family:var(--font-display);color:var(--color-primary-light);letter-spacing:.06em;text-transform:uppercase;margin:1.1em 0 .4em;font-size:.95rem}.phase-explanation ul,.phase-explanation ol,.phase-prompt ul,.phase-prompt ol{margin:.5em 0 .85em;padding-left:1.4em}.phase-explanation li,.phase-prompt li{margin-bottom:.3em;line-height:1.7}.phase-explanation code,.phase-prompt code{font-family:var(--font-code);color:var(--color-cyan);background:#7c6fff1a;border:1px solid #7c6fff33;border-radius:4px;padding:1px 6px;font-size:.85em}.phase-explanation pre,.phase-prompt pre{background:var(--color-surface-3);border:1px solid var(--color-border-accent);border-radius:var(--radius-md);margin:.8em 0;padding:14px 16px;overflow-x:auto}.phase-explanation pre code,.phase-prompt pre code{color:var(--color-text);background:0 0;border:none;padding:0;font-size:.87rem}.phase-explanation table,.phase-prompt table{border-collapse:collapse;width:100%;margin:.8em 0 1em;font-size:.86rem}.phase-explanation th,.phase-prompt th{color:var(--color-primary-light);text-align:left;border:1px solid var(--color-border-accent);text-transform:uppercase;letter-spacing:.06em;background:#7c6fff1a;padding:8px 12px;font-size:.75rem;font-weight:700}.phase-explanation td,.phase-prompt td{border:1px solid var(--color-border);color:var(--color-text);padding:7px 12px;line-height:1.5}.phase-explanation tr:nth-child(2n) td,.phase-prompt tr:nth-child(2n) td{background:#7c6fff08}.phase-explanation blockquote,.phase-prompt blockquote{border-left:3px solid var(--color-primary);color:var(--color-text-muted);margin:.8em 0;padding:4px 0 4px 14px;font-style:italic}.output-block{background:var(--color-surface-3);border:1px solid var(--color-success);border-radius:var(--radius-md);overflow:hidden}.output-label{text-transform:uppercase;letter-spacing:.1em;color:var(--color-success);font-size:.7rem;font-weight:700;font-family:var(--font-display);background:#4fffb012;padding:5px 14px;display:block}.output-block pre{font-family:var(--font-code);color:var(--color-success);margin:0;padding:12px 16px;font-size:.87rem}.error-block{background:var(--color-surface-3);border:1px solid var(--color-error);border-radius:var(--radius-md);overflow:hidden}.error-label{text-transform:uppercase;letter-spacing:.1em;background:var(--color-error-glow);color:var(--color-error);font-size:.7rem;font-weight:700;font-family:var(--font-display);padding:5px 14px;display:block}.error-block pre{font-family:var(--font-code);color:var(--color-error);white-space:pre-wrap;margin:0;padding:12px 16px;font-size:.84rem}.solution-block{border:1px solid var(--color-warning);border-radius:var(--radius-md);overflow:hidden}.solution-label{text-transform:uppercase;letter-spacing:.1em;color:var(--color-warning);font-size:.7rem;font-weight:700;font-family:var(--font-display);background:#ffc76e12;padding:6px 14px;display:block}.code-editor{background:var(--color-surface-3);border:1px solid var(--color-border-accent);border-radius:var(--radius-md);width:100%;min-height:160px;font-family:var(--font-code);color:var(--color-text);resize:vertical;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:14px 16px;font-size:.9rem;line-height:1.6}.code-editor:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-glow)}.mcq-input{background:var(--color-surface-3);border:1px solid var(--color-border-accent);border-radius:var(--radius-md);width:80px;font-family:var(--font-code);color:var(--color-text);text-align:center;text-transform:uppercase;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:10px 16px;font-size:1.1rem}.mcq-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-glow)}.validation-feedback{border-radius:var(--radius-md);padding:10px 16px;font-size:.88rem;font-weight:600}.validation-feedback--pass{background:var(--color-success-glow);border:1px solid var(--color-success);color:var(--color-success)}.validation-feedback--fail{background:var(--color-error-glow);border:1px solid var(--color-error);color:var(--color-error)}.attempt-counter{color:var(--color-text-faint);font-size:.76rem}.phase3-actions{flex-wrap:wrap;gap:12px;display:flex}.btn{border-radius:var(--radius-md);font-family:var(--font-display);letter-spacing:.06em;cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;border:none;align-self:flex-start;padding:10px 22px;font-size:.8rem;font-weight:700}.btn-primary{background:linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));color:#fff;box-shadow:0 2px 14px var(--color-primary-glow)}.btn-primary:hover{box-shadow:0 4px 24px var(--color-primary-glow), 0 0 0 1px var(--color-primary);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-ghost{color:var(--color-text-muted);border:1px solid var(--color-border-accent);background:0 0}.btn-ghost:hover{color:var(--color-text);border-color:var(--color-primary);background:var(--color-primary-glow)}.lesson-page{flex-direction:column;min-height:100%;display:flex}.lesson-page-header{border-bottom:1px solid var(--color-border);align-items:center;gap:16px;padding:16px 28px;display:flex}.lesson-back-btn{flex-shrink:0;padding:6px 14px;font-size:.82rem}.lesson-page-meta{align-items:center;gap:12px;min-width:0;display:flex}.lesson-id-badge{font-family:var(--font-code);background:var(--color-pink-glow);color:var(--color-pink-light);border-radius:var(--radius-full);border:1px solid var(--color-border-accent);flex-shrink:0;padding:3px 10px;font-size:.75rem}.lesson-title{font-family:var(--font-display);color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;font-size:1.15rem;overflow:hidden}.lesson-page-state{color:var(--color-text-muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:80px 32px;display:flex}.lesson-error{color:var(--color-error);font-size:.95rem}.loading-spinner{border:3px solid var(--color-border);border-top-color:var(--color-pink);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.unit-page{flex-direction:column;gap:28px;padding:28px 28px 40px;display:flex}.unit-page-header{flex-direction:column;gap:6px;display:flex}.unit-page-badge{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;color:var(--color-primary);font-size:.65rem;font-weight:700}.unit-page-title{font-family:var(--font-display);color:var(--color-text);letter-spacing:.04em;font-size:1.3rem}.unit-page-progress{color:var(--color-text-muted);font-size:.8rem}.unit-lessons-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;display:grid}.unit-lesson-card{border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-ui);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0e0b1abf;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;display:flex}.unit-lesson-card:hover{border-color:var(--color-primary);box-shadow:0 2px 16px var(--color-primary-glow);background:#7c6fff12;transform:translateY(-1px)}.unit-lesson-card--done{background:#4fffb00a;border-color:#4fffb04d}.unit-lesson-check{color:var(--color-text-faint);font-size:1rem}.unit-lesson-card--done .unit-lesson-check{color:var(--color-success)}.unit-lesson-id{color:var(--color-text);font-size:.8rem;font-weight:700}.unit-page-state{color:var(--color-text-muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:80px;display:flex}.shop-page{flex-direction:column;gap:32px;max-width:880px;padding:32px 32px 64px;display:flex}.shop-header{align-items:flex-start;gap:18px;display:flex}.shop-title{font-family:var(--font-display);color:var(--color-text);margin-bottom:4px;font-size:1.6rem}.shop-subtitle{color:var(--color-text-muted);max-width:480px;font-size:.88rem;line-height:1.6}.shop-level-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;gap:8px;padding:16px 18px;display:flex}.shop-level-row{align-items:center;gap:14px;display:flex}.shop-level-badge{font-family:var(--font-display);color:var(--color-bg);background:linear-gradient(135deg, var(--color-xp), #fa0);border-radius:var(--radius-full);flex-shrink:0;padding:4px 12px;font-size:.95rem}.shop-level-count{color:var(--color-text-faint);align-self:flex-end;font-size:.74rem}.shop-section{flex-direction:column;gap:14px;display:flex}.shop-section-title{font-family:var(--font-display);color:var(--color-pink-light);text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem}.shop-section-note{color:var(--color-text-faint);margin-top:-10px;font-size:.78rem;font-style:italic}.shop-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;display:grid}.shop-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex;overflow:hidden}.shop-card:not(.shop-card--locked):hover{border-color:var(--color-border-accent);box-shadow:var(--shadow-md)}.shop-card--equipped{border-color:var(--color-pink);box-shadow:var(--shadow-pink)}.shop-card--locked{opacity:.55}.shop-card-thumb{justify-content:center;align-items:center;height:130px;display:flex;position:relative;overflow:hidden}.shop-card-emoji{filter:drop-shadow(0 2px 8px #0006);font-size:2.4rem}.shop-card-outfit-preview{object-fit:contain;object-position:bottom center;height:150%;transition:filter var(--transition-fast)}.shop-card-lock{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#0a080c99;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute;inset:0}.shop-card-lock-icon{font-size:1.4rem}.shop-card-lock-label{color:var(--color-text);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:700}.shop-card-equipped-badge{color:var(--color-bg);background:var(--color-pink-light);border-radius:var(--radius-full);padding:3px 8px;font-size:.65rem;font-weight:800;position:absolute;top:8px;right:8px}.shop-card-body{flex-direction:column;flex:1;gap:4px;padding:12px 14px 4px;display:flex}.shop-card-name{color:var(--color-text);font-size:.88rem;font-weight:700}.shop-card-desc{color:var(--color-text-muted);font-size:.74rem;line-height:1.5}.shop-card-btn{text-align:center;align-self:stretch;margin:12px 14px 14px;padding:9px 14px;font-size:.8rem}.shop-card-btn:disabled{cursor:not-allowed;opacity:.6}.shop-card--dl .shop-card-thumb{position:relative}.shop-card-coming-soon{text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-faint);border-radius:var(--radius-full);white-space:nowrap;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a080c8c;padding:3px 10px;font-size:.6rem;font-weight:800;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.shop-toast{left:50%;bottom:calc(var(--bottombar-height) + 20px);background:var(--color-surface-2);border:1px solid var(--color-pink);color:var(--color-text);border-radius:var(--radius-full);box-shadow:var(--shadow-pink);z-index:60;pointer-events:none;padding:10px 20px;font-size:.85rem;font-weight:600;position:fixed}.shop-card--coming-soon{opacity:.7}.shop-card--coming-soon .shop-card-thumb{filter:saturate(.4)}.shop-card-outfit-preview--silhouette{filter:brightness(0)opacity(.35)!important}.shop-card-coming-soon-overlay{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#0a080c73;flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex;position:absolute;inset:0}.shop-card-coming-soon-icon{font-size:1.4rem}.shop-card-coming-soon-label{color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.08em;border-radius:var(--radius-full);white-space:nowrap;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a080c8c;padding:3px 10px;font-size:.65rem;font-weight:800}