@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--color-bg:#171307;--color-bg-horizon:#2b2311;--gradient-dusk:radial-gradient(ellipse 120% 70% at 50% 0%, #3a2c14 0%, #201a0c 45%, #0e0c06 100%);--color-surface:#161c14;--color-surface-2:#1c2318;--color-surface-3:#131810;--color-border:#b4a8781f;--color-border-accent:#c9a53f47;--color-pink:var(--color-primary);--color-pink-light:var(--color-primary-light);--color-pink-glow:var(--color-primary-glow);--color-primary:#c9a53f;--color-primary-light:#e0c26a;--color-primary-dark:#9a7c28;--color-primary-glow:#c9a53f24;--color-cyan:#6b8f5a;--color-cyan-light:#94b781;--color-cyan-glow:#6b8f5a29;--color-violet:#8fa3ab;--color-violet-light:#b3c4ca;--color-violet-glow:#8fa3ab24;--color-success:#4fd07a;--color-success-glow:#4fd07a26;--color-error:#c65f4a;--color-error-glow:#c65f4a26;--color-warning:#d9a441;--color-xp:#c9a53f;--color-text:#ece6d8;--color-text-muted:#ece6d880;--color-text-faint:#ece6d840;--font-ui:"Inter", sans-serif;--font-display:"Inter", sans-serif;--font-code:"JetBrains Mono", monospace;--sidebar-width:280px;--bottombar-height:64px;--gochan-width:240px;--gochan-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 #c9a53f14;--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);--gradient-aurora:linear-gradient(120deg, #9a7c28 0%, #c9a53f 22%, #e0c26a 40%, #b7a25c 55%, #6b8f5a 78%, #325632 100%);--gradient-aurora-soft:linear-gradient(135deg, #c9a53f38 0%, #e0c26a29 35%, #6b8f5a24 70%, #3256321a 100%);--gradient-primary:linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), var(--color-cyan));--gradient-text:linear-gradient(90deg, var(--color-primary-light), var(--color-cyan-light));--gradient-glass-bg:linear-gradient(180deg, #161c148c, #0e120dd1);--gradient-glass-bg-strong:linear-gradient(180deg, #141811d1, #0c0f0af0);--acacia-color:#0b0906}.theme-steel{--color-primary:#8a9a7a;--color-primary-light:#aebd9d;--color-primary-dark:#66755a;--color-primary-glow:#8a9a7a29;--color-border-accent:#8a9a7a47;--color-xp:#8a9a7a;--gradient-aurora:linear-gradient(120deg, #4c5643 0%, #66755a 22%, #8a9a7a 40%, #aebd9d 55%, #6f7c63 78%, #333b2c 100%);--color-bg:#14170f;--gradient-dusk:radial-gradient(ellipse 120% 70% at 50% 0%, #313a29 0%, #1b2016 45%, #0c0f0a 100%);--acacia-color:#0a0d08}.theme-indigo-gold{--color-primary:#d4af37;--color-primary-light:#e8cc6e;--color-primary-dark:#a3822a;--color-primary-glow:#d4af372e;--color-border-accent:#d4af3747;--color-xp:#d4af37;--color-cyan:#d4af37;--color-cyan-light:#e8cc6e;--gradient-aurora:linear-gradient(120deg, #6b5217 0%, #a3822a 22%, #d4af37 40%, #e8cc6e 55%, #b3922c 78%, #5e460f 100%);--color-bg:#1a1305;--gradient-dusk:radial-gradient(ellipse 120% 70% at 50% 0%, #4a3a10 0%, #261d09 45%, #110d04 100%);--acacia-color:#0d0a03}.theme-crimson{--color-primary:#b3532f;--color-primary-light:#d1815e;--color-primary-dark:#833c20;--color-primary-glow:#b3532f2e;--color-border-accent:#b3532f47;--color-xp:#b3532f;--gradient-aurora:linear-gradient(120deg, #4a2313 0%, #833c20 22%, #b3532f 40%, #d1815e 55%, #8f4429 78%, #341809 100%);--color-bg:#180d07;--gradient-dusk:radial-gradient(ellipse 120% 70% at 50% 0%, #47250f 0%, #241309 45%, #100a05 100%);--acacia-color:#0c0603}.theme-terminal{--color-primary:#4a7c4e;--color-primary-light:#7ba57e;--color-primary-dark:#325632;--color-primary-glow:#4a7c4e2e;--color-border-accent:#4a7c4e47;--color-xp:#4a7c4e;--color-cyan:#4a7c4e;--gradient-aurora:linear-gradient(120deg, #16290f 0%, #325632 22%, #4a7c4e 40%, #7ba57e 55%, #3d6b40 78%, #0f1c0a 100%);--color-bg:#0c130d;--gradient-dusk:radial-gradient(ellipse 120% 70% at 50% 0%, #1c3320 0%, #101d13 45%, #080f09 100%);--acacia-color:#060a06}*,: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(--gradient-dusk), 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);background:var(--gradient-glass-bg-strong);border-right:1px solid var(--color-border-accent);z-index:50;height:100vh;transition:transform var(--transition-slow);-webkit-backdrop-filter:blur(20px);flex-direction:column;display:flex;position:fixed;top:0;left:0;transform:translate(-100%);box-shadow:4px 0 40px #0009}.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:#c9a53f0f}.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:#c9a53f0f}.sidebar-lesson-btn--active{color:var(--color-primary-light);border-right:2px solid var(--color-primary);background:#c9a53f1f}.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:#c9a53f1a;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{background:var(--gradient-glass-bg-strong);border-top:1px solid var(--color-border-accent);z-index:10;-webkit-backdrop-filter:blur(18px);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:#c9a53f14;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:#c9a53f26;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}.gochan-widget{bottom:calc(var(--bottombar-height) + 8px);width:var(--gochan-width);z-index:20;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;right:8px}.gochan-sprite-wrap{width:var(--gochan-width);height:var(--gochan-height);pointer-events:none;justify-content:center;align-items:flex-end;display:flex}.gochan-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;background:var(--gradient-dusk), var(--color-bg);position:fixed;inset:0;overflow:hidden}.savanna-sky{background:var(--gradient-aurora);opacity:.22;mix-blend-mode:screen;background-size:180% 180%;animation:34s ease-in-out infinite alternate savanna-sky-drift;position:absolute;inset:-10%}@keyframes savanna-sky-drift{0%{background-position:10% 20%}to{background-position:90% 80%}}.savanna-sun{background:radial-gradient(circle, var(--color-primary-glow) 0%, transparent 65%);opacity:.9;filter:blur(10px);width:700px;height:700px;animation:12s ease-in-out infinite alternate sun-breathe;position:absolute;bottom:18%;left:50%;transform:translate(-50%,40%)}@keyframes sun-breathe{0%{transform:translate(-50%,40%)scale(1)}to{transform:translate(-50%,40%)scale(1.12)}}.aurora{position:absolute;inset:0}.aurora__blob{filter:blur(100px);opacity:.32;will-change:transform;border-radius:50%;position:absolute}.aurora__blob--1{background:radial-gradient(circle, var(--color-primary-glow) 0%, transparent 70%);width:620px;height:620px;animation:22s ease-in-out infinite alternate aurora-drift-1;top:-18%;left:-12%}.aurora__blob--2{background:radial-gradient(circle, var(--color-cyan-glow) 0%, transparent 70%);width:520px;height:520px;animation:28s ease-in-out infinite alternate aurora-drift-2;top:15%;right:-10%}.aurora__blob--3{background:radial-gradient(circle, var(--color-primary-glow) 0%, transparent 70%);width:460px;height:460px;animation:18s ease-in-out infinite alternate aurora-drift-3;bottom:-12%;left:30%}@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)}}.acacia-line{opacity:.9;height:26vh;min-height:160px;max-height:260px;position:absolute;bottom:0;left:0;right:0}.acacia-svg{width:100%;height:100%;display:block}.particle-canvas{width:100%;height:100%;position:absolute;inset:0}.savanna-vignette{background:radial-gradient(80% 60% at 50% 15%,#0000 0%,#0a080459 75%),linear-gradient(#0000 60%,#0806038c 100%);position:absolute;inset:0}@media (width<=700px){.acacia-line{height:16vh;min-height:110px}.savanna-sun{width:420px;height:420px}}.app-layout{grid-template-rows:var(--topbar-height) 1fr var(--bottombar-height);width:100vw;height:100vh;transition:color var(--transition-slow);background:0 0;grid-template-columns:1fr;grid-template-areas:"topbar""main""bottombar";display:grid;position:relative;overflow:hidden}.topbar{background:var(--gradient-glass-bg-strong);border-bottom:1px solid var(--color-border-accent);z-index:10;-webkit-backdrop-filter:blur(16px);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(--gochan-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}}.sisters-rail{flex-direction:column;gap:4px;min-width:0;display:flex}.sisters-title{font-family:var(--font-display);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.14em;align-items:center;gap:10px;margin-bottom:2px;font-size:.75rem;display:flex}.sisters-title-bar{background:linear-gradient(to bottom, var(--color-primary), var(--color-violet))}.sisters-subtitle{color:var(--color-text-faint);margin-bottom:14px;font-size:.76rem}.sisters-list{flex-direction:column;gap:10px;display:flex}.sister-card{border-radius:var(--radius-lg);background:var(--gradient-glass-bg);border:1px solid var(--color-border);-webkit-backdrop-filter:blur(10px);color:inherit;transition:border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);align-items:center;gap:12px;padding:12px 14px;text-decoration:none;display:flex;position:relative;overflow:hidden}.sister-card:before{content:"";background:linear-gradient(90deg, var(--sister-accent-dark), var(--sister-accent));opacity:.85;height:2px;position:absolute;top:0;left:0;right:0}.sister-card:hover{border-color:var(--sister-accent);box-shadow:0 4px 20px #0000004d, 0 0 16px color-mix(in srgb, var(--sister-accent) 35%, transparent);transform:translateY(-2px)}.sister-card:hover .sister-card-arrow{opacity:1;transform:translate(2px,-2px)}.sister-card--self{border-color:var(--color-border-accent)}.sister-card-badge{border-radius:var(--radius-md);background:linear-gradient(155deg, color-mix(in srgb, var(--sister-accent) 35%, transparent), color-mix(in srgb, var(--sister-accent-dark) 55%, transparent));border:1px solid color-mix(in srgb, var(--sister-accent) 45%, transparent);width:40px;height:40px;box-shadow:0 0 14px color-mix(in srgb, var(--sister-accent) 25%, transparent);flex-shrink:0;justify-content:center;align-items:center;font-size:1.15rem;display:flex}.sister-card-body{flex-direction:column;gap:2px;min-width:0;display:flex}.sister-card-name{color:var(--color-text);align-items:center;gap:6px;font-size:.85rem;font-weight:700;display:flex}.sister-card-you{text-transform:uppercase;letter-spacing:.06em;color:var(--color-primary-light);background:var(--color-primary-glow);border:1px solid var(--color-border-accent);border-radius:var(--radius-full);padding:1px 6px;font-size:.6rem;font-weight:700}.sister-card-tagline{color:var(--color-text-muted);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.72rem;line-height:1.35;display:-webkit-box;overflow:hidden}.sister-card-arrow{color:var(--sister-accent);opacity:.5;transition:opacity var(--transition-fast), transform var(--transition-fast);flex-shrink:0;align-self:flex-start;margin-top:2px;font-size:.9rem}@media (width<=1000px){.sisters-list{flex-flow:wrap}.sister-card{flex:220px}}.home-page{grid-template-columns:minmax(0,800px) minmax(240px,300px);align-items:start;gap:32px;max-width:1180px;padding:28px 32px 40px;display:grid}.home-main{flex-direction:column;gap:32px;min-width:0;display:flex}@media (width<=1000px){.home-page{grid-template-columns:1fr;max-width:800px}}.home-hero{border-radius:var(--radius-xl);isolation:isolate;cursor:default;border:1px solid var(--color-border-accent);height:460px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.hero-layer{will-change:transform;transition:transform .15s ease-out;position:absolute;inset:0}.hero-sky{background:var(--gradient-aurora);background-size:160% 160%;animation:22s ease-in-out infinite alternate aurora-drift}.hero-sky:after{content:"";background:radial-gradient(at 30% 30%,#0000 0%,#0e120d59 65%,#0e120dbf 100%);position:absolute;inset:0}@keyframes aurora-drift{0%{background-position:0 30%}to{background-position:100% 70%}}.hero-gochan{pointer-events:none;justify-content:flex-end;align-items:flex-end;padding-right:4%;display:flex}.hero-gochan-img{object-fit:contain;object-position:bottom;filter:drop-shadow(0 20px 40px #0000008c);width:auto;height:108%;max-height:520px}.hero-grass{pointer-events:none;height:30%;inset:auto -3% -2px}.hero-grass-svg{width:100%;height:100%;display:block}.hero-copy{z-index:3;max-width:480px;position:absolute;top:40px;left:40px;right:40px}.hero-title{font-family:var(--font-display);color:var(--color-text);text-shadow:0 2px 20px #0006;font-size:2.4rem;font-weight:800;line-height:1.15}.hero-title-accent{background:var(--gradient-text);color:#0000;-webkit-background-clip:text;background-clip:text}.hero-tagline{color:var(--color-text-muted);max-width:360px;margin-top:10px;font-size:.95rem}.hero-glass-panel{z-index:4;background:var(--gradient-glass-bg);border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-md);flex-direction:column;gap:16px;padding:20px 22px 22px;display:flex;position:absolute;bottom:-34px;left:24px;right:24px}.hero-glass-panel .home-stats{margin:0}.hero-glass-panel .home-cta{gap:6px}.home-units{margin-top:44px}@media (width<=700px){.home-hero{height:auto;min-height:560px}.hero-copy{max-width:none;top:28px;left:24px;right:24px}.hero-title{font-size:1.8rem}.hero-gochan{justify-content:center;padding-right:0}.hero-glass-panel{margin-top:60px;position:static}.hero-glass-panel .home-stats{grid-template-columns:1fr 1fr}}.home-stats{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.stat-card{background:var(--gradient-glass-bg);border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);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:#c9a53f33;justify-content:center;align-items:center;gap:6px}.stat-card--shop:hover{background:#c9a53f14;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:#c9a53f1f;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:var(--gradient-primary);color:var(--color-bg);box-shadow:0 4px 24px var(--color-primary-glow), 0 0 0 1px #c9a53f4d;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{background:var(--gradient-glass-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);transition:all var(--transition-base);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:#c9a53f12;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:#c9a53f1a;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:#c9a53f14;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:#c9a53f0a}.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:#8fa3ab;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:#c9a53f1a;border:1px solid #c9a53f33;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:#c9a53f1a;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:#c9a53f08}.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);background:var(--gradient-glass-bg);-webkit-backdrop-filter:blur(10px);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{background:var(--gradient-glass-bg);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(10px);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:#c9a53f12;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(--gradient-glass-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);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:var(--gradient-primary);border-radius:var(--radius-full);box-shadow:0 2px 12px var(--color-primary-glow);flex-shrink:0;padding:4px 12px;font-size:.95rem;font-weight:800}.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);background:var(--gradient-text);color:#0000;text-transform:uppercase;letter-spacing:.06em;-webkit-background-clip:text;background-clip:text;width:fit-content;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(--gradient-glass-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);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-primary);box-shadow:0 4px 20px var(--color-primary-glow)}.shop-card--equipped{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary), 0 4px 20px var(--color-primary-glow)}.shop-card--locked{opacity:.55}.shop-card-thumb{justify-content:center;align-items:center;height:130px;display:flex;position:relative;overflow:hidden}.shop-card-thumb:before{content:"";background:var(--gradient-primary);opacity:.85;z-index:1;height:2px;position:absolute;top:0;left:0;right:0}.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(--gradient-primary);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-border-accent);color:var(--color-text);border-radius:var(--radius-full);box-shadow:0 4px 24px var(--color-primary-glow), var(--shadow-md);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}