@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-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;--pluspluschan-width:240px;--pluspluschan-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:#8fb8d0;--color-primary-light:#b8d4e8;--color-primary-dark:#6090aa;--color-primary-glow:#8fb8d038;--color-border-accent:#8fb8d047;--color-xp:#8fb8d0}.theme-indigo-gold{--color-primary:#9b6fff;--color-primary-light:#c4a0ff;--color-primary-dark:#7044dd;--color-primary-glow:#9b6fff38;--color-border-accent:#9b6fff47;--color-xp:gold;--color-cyan:gold;--color-cyan-light:#ffe566}.theme-crimson{--color-primary:#ff4f7b;--color-primary-light:#ff8fa8;--color-primary-dark:#c25;--color-primary-glow:#ff4f7b38;--color-border-accent:#ff4f7b47;--color-xp:#ff4f7b}.theme-terminal{--color-primary:#4fffb0;--color-primary-light:#9fffd8;--color-primary-dark:#2acc80;--color-primary-glow:#4fffb038;--color-border-accent:#4fffb047;--color-xp:#4fffb0;--color-cyan:#4fffb0}*,: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)}.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}.pluspluschan-widget{bottom:calc(var(--bottombar-height) + 8px);width:var(--pluspluschan-width);z-index:20;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;right:8px}.pluspluschan-sprite-wrap{width:var(--pluspluschan-width);height:var(--pluspluschan-height);pointer-events:none;justify-content:center;align-items:flex-end;display:flex}.pluspluschan-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:#0a0805ed;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%,#ff78142e 0%,#ff50a014 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 #ff8c0080)drop-shadow(0 0 80px #ff50a033);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:#14100ad9;border:1px solid #ff8c0040;padding:18px 26px;font-size:1.05rem;line-height:1.75;box-shadow:0 0 30px #ff78141a}.domain-tap-hint{color:#ffc87866;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,#b46eff66 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-primary), var(--color-cyan), var(--color-primary), transparent);opacity:.4;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-cyan);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(--pluspluschan-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{flex-direction:column;gap:32px;max-width:800px;padding:28px 32px 40px;display:flex}.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:linear-gradient(90deg, var(--color-primary), var(--color-cyan));opacity:.7;height:2px;position:absolute;top:0;left:0;right:0}.stat-card:hover{border-color:var(--color-primary);box-shadow:0 0 20px var(--color-primary-glow)}.stat-card--xp .stat-icon{color:var(--color-primary);opacity:.3;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:linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));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}.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:linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), var(--color-cyan));color:#fff;box-shadow:0 4px 24px var(--color-primary-glow), 0 0 0 1px #7c6fff4d;background-position:0%;background-size:200% 200%}.cta-btn--primary:hover{box-shadow:0 8px 32px var(--color-primary-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:linear-gradient(to bottom, var(--color-primary), var(--color-cyan));border-radius:2px;width:3px;height:14px;display:inline-block}.unit-grid{grid-template-columns:repeat(5,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:linear-gradient(90deg, var(--color-primary), var(--color-cyan));border-radius:var(--radius-full);height:100%;transition:width 1s}@media (width<=700px){.home-stats,.unit-grid{grid-template-columns:1fr 1fr}}.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-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}