@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Be+Vietnam+Pro:wght@400;500;600&display=swap";
*,:before,:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p,body{margin:0}img,svg{max-width:100%;display:block}.page{min-height:100vh}.page-col{flex-direction:column;min-height:100vh;display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.container{max-width:760px;margin:0 auto;padding:48px 24px}.container-wide{max-width:900px;margin:0 auto;padding:48px 24px}.text-center{text-align:center}:root{--bg:#0a0a2e;--surface:#0d0d3a;--elevated:#12124a;--border:#1e1e6a;--border-strong:#3030a0;--text:#f0f0ff;--text-muted:#8898cc;--text-subtle:#303080;--accent:#9775fa;--accent-dim:#9775fa1f;--accent-text:#b39dfc;--accent-hover:#7c5cf6;--accent2:#f783ac;--accent2-dim:#f783ac1f;--accent2-text:#f9a8c9;--accent2-hover:#e06e97;--success:#69db7c;--success-dim:#69db7c1f;--success-text:#69db7c;--warning:#ffd43b;--warning-dim:#ffd43b1f;--danger:#ff6b6b;--danger-dim:#ff6b6b1f;--yellow:#ffd43b;--cyan:#66d9ef;--orange:#ffa94d;--title-shadow:3px 3px 0 #ff6b6b, 6px 6px 0 #9775fa;--glow-accent:0 0 10px #9775fa99, 0 0 30px #9775fa33;--glow-accent2:0 0 10px #f783ac99, 0 0 30px #f783ac33;--glow-success:0 0 10px #69db7c99, 0 0 30px #69db7c33;--card-shadow:none;--shadow-hover:0 0 20px #9775fa33;--btn-shadow-purple:#5b21b6;--btn-shadow-pink:#a0246e;--btn-shadow-green:#2d9d45;--btn-shadow-yellow:#a06010;--btn-shadow-ghost:#0a0a40;--scrollbar-track:#0d0d3a;--scrollbar-thumb:#1e1e6a;--font-heading:"Press Start 2P", cursive;--font-body:"VT323", monospace}.academic{--bg:#f8f9fa;--surface:#fff;--elevated:#f0f4f8;--border:#e2e8f0;--border-strong:#cbd5e1;--text:#1e293b;--text-muted:#475569;--text-subtle:#94a3b8;--accent:#3b82f6;--accent-dim:#3b82f614;--accent-text:#2563eb;--accent-hover:#1d4ed8;--accent2:#ec4899;--accent2-dim:#ec489914;--accent2-text:#db2777;--accent2-hover:#be185d;--success:#22c55e;--success-dim:#22c55e14;--success-text:#16a34a;--warning:#f59e0b;--warning-dim:#f59e0b14;--danger:#ef4444;--danger-dim:#ef444414;--yellow:#facc15;--cyan:#06b6d4;--orange:#f97316;--title-shadow:2px 2px 0 #3b82f626;--glow-accent:none;--glow-accent2:none;--glow-success:none;--card-shadow:0 1px 3px #00000014, 0 4px 12px #0000000d;--shadow-hover:0 4px 12px #0000001a, 0 8px 24px #00000014;--btn-shadow-purple:#1e40af;--btn-shadow-pink:#9d174d;--btn-shadow-green:#15803d;--btn-shadow-yellow:#92400e;--btn-shadow-ghost:#cbd5e1;--scrollbar-track:#f1f5f9;--scrollbar-thumb:#cbd5e1;--font-heading:"Plus Jakarta Sans", sans-serif;--font-body:"Be Vietnam Pro", sans-serif}html{scroll-behavior:smooth}body{background-color:var(--bg);color:var(--text);background-image:repeating-linear-gradient(0deg,#0000000d 0 1px,#0000 1px 3px);min-height:100vh;font-family:-apple-system,Segoe UI,Helvetica Neue,Arial,sans-serif;font-size:15px;line-height:1.6;transition:background-color .2s,color .2s}.academic body{background-image:none}.font-pixel{font-family:var(--font-heading);line-height:1.8}.font-vt{font-family:var(--font-body);line-height:1.4}.academic .font-pixel{letter-spacing:.01em;font-weight:700;line-height:1.5}.academic .font-vt{font-weight:400;line-height:1.6}.text-accent{color:var(--accent-text);text-shadow:var(--glow-accent)}.text-accent2{color:var(--accent2-text);text-shadow:var(--glow-accent2)}.text-success{color:var(--success-text);text-shadow:var(--glow-success)}.text-warning{color:var(--warning)}.text-danger{color:var(--danger)}.text-muted{color:var(--text-muted)}.text-subtle{color:var(--text-subtle)}.text-yellow{color:var(--yellow)}.text-cyan{color:var(--cyan)}.title-arcade{color:var(--yellow);text-shadow:var(--title-shadow);animation:3s ease-in-out infinite float}.card{background:var(--surface);border:1.5px solid var(--border);box-shadow:var(--card-shadow);border-radius:14px;transition:transform .2s,box-shadow .2s,border-color .2s}.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.card-accent{border:2px solid var(--accent);background:var(--accent-dim)}.card-accent2{border:2px solid var(--accent2);background:var(--accent2-dim)}.card-success{border:2px solid var(--success);background:var(--success-dim)}.card-warning{border:2px solid var(--warning);background:var(--warning-dim)}.card-danger{border:2px solid var(--danger);background:var(--danger-dim)}.divider{border:none;border-top:1px solid var(--border);margin:2.5rem 0}.btn{font-family:var(--font-heading);cursor:pointer;letter-spacing:.04em;white-space:nowrap;border:none;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:13px 24px;font-size:9px;line-height:1.4;text-decoration:none;transition:transform 80ms,box-shadow 80ms,filter 80ms;display:inline-flex}.btn:hover:not(:disabled){filter:brightness(1.08)}.btn:active:not(:disabled){transform:translateY(4px)!important}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 5px 0 var(--btn-shadow-purple)}.btn-primary:active:not(:disabled){box-shadow:0 1px 0 var(--btn-shadow-purple)}.btn-accent2{background:var(--accent2);color:#fff;box-shadow:0 5px 0 var(--btn-shadow-pink)}.btn-accent2:active:not(:disabled){box-shadow:0 1px 0 var(--btn-shadow-pink)}.btn-danger{background:var(--danger);color:#fff;box-shadow:0 5px 0 color-mix(in srgb, var(--danger) 70%, #000)}.btn-danger:active:not(:disabled){box-shadow:0 1px 0 color-mix(in srgb, var(--danger) 70%, #000)}.btn-play{background:var(--success);color:#fff;box-shadow:0 5px 0 var(--btn-shadow-green)}.btn-play:active:not(:disabled){box-shadow:0 1px 0 var(--btn-shadow-green)}.btn-yellow{background:var(--yellow);color:#1a1030;box-shadow:0 5px 0 var(--btn-shadow-yellow)}.btn-yellow:active:not(:disabled){box-shadow:0 1px 0 var(--btn-shadow-yellow)}.btn-ghost{background:var(--elevated);color:var(--text-muted);border:1.5px solid var(--border);box-shadow:0 3px 0 var(--btn-shadow-ghost)}.btn-ghost:hover:not(:disabled){color:var(--text);border-color:var(--border-strong)}.btn-ghost:active:not(:disabled){box-shadow:0 1px 0 var(--btn-shadow-ghost)}.btn-outline{color:var(--accent-text);border:2px solid var(--accent);box-shadow:0 4px 0 var(--btn-shadow-purple);background:0 0}.btn-outline:active:not(:disabled){box-shadow:0 1px 0 var(--btn-shadow-purple)}.badge{font-family:var(--font-heading);letter-spacing:.05em;border-radius:4px;padding:4px 10px;font-size:7px;line-height:1.6;display:inline-block}.badge-accent{background:var(--accent-dim);color:var(--accent-text);border:1px solid var(--accent)}.badge-accent2{background:var(--accent2-dim);color:var(--accent2-text);border:1px solid var(--accent2)}.badge-success{background:var(--success-dim);color:var(--success-text);border:1px solid var(--success)}.badge-warning{background:var(--warning-dim);color:var(--warning);border:1px solid var(--warning)}.badge-danger{background:var(--danger-dim);color:var(--danger);border:1px solid var(--danger)}.badge-ghost{background:var(--elevated);color:var(--text-muted);border:1px solid var(--border)}.input{background:var(--surface);border:2px solid var(--border);color:var(--text);font-family:var(--font-body);border-radius:6px;outline:none;width:100%;padding:11px 14px;font-size:20px;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.input::placeholder{color:var(--text-subtle)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes rainbow{0%{color:#ff6b6b}14%{color:#ffa94d}28%{color:#ffd43b}42%{color:#69db7c}56%{color:#66d9ef}70%{color:#9775fa}85%{color:#f783ac}to{color:#ff6b6b}}@keyframes marquee{0%{transform:translate(100vw)}to{transform:translate(-100%)}}@keyframes flicker{0%,94%,to{opacity:1}95%{opacity:.85}97%{opacity:.7}98%{opacity:1}}@keyframes starTwinkle{0%,to{opacity:.15}50%{opacity:.9}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.float{animation:3s ease-in-out infinite float}.pulse{animation:2s ease-in-out infinite pulse}.blink{animation:1.2s ease-in-out infinite blink}.rainbow{animation:4s linear infinite rainbow}.title-flicker{animation:8s ease-in-out infinite flicker}.marquee-text{white-space:nowrap;animation:22s linear infinite marquee;display:inline-block}.academic .font-pixel{font-size:14px!important}.academic h1.font-pixel{font-size:22px!important}.academic h2.font-pixel{font-size:18px!important}.academic .font-vt{font-size:15px!important}.academic .btn{letter-spacing:.03em;border-radius:32px;padding:10px 20px;font-weight:700;font-size:12px!important}.academic .badge{text-transform:uppercase;letter-spacing:.1em;border-radius:8px;padding:5px 12px;font-weight:700;font-size:10px!important}.academic label.font-pixel{font-size:12px!important}.academic .card{border:1px solid var(--border);box-shadow:var(--card-shadow);border-radius:16px}.academic .card:hover{box-shadow:var(--shadow-hover);transform:scale(1.02)}.academic .card-accent{border:1px solid var(--accent-dim);border-top:3px solid var(--accent);background:var(--accent-dim)}.academic .card-accent2{border:1px solid var(--accent2-dim);border-top:3px solid var(--accent2);background:var(--accent2-dim)}.academic .card-success{border:1px solid var(--success-dim);border-top:3px solid var(--success);background:var(--success-dim)}.academic .card-warning{border:1px solid var(--warning-dim);border-top:3px solid var(--warning);background:var(--warning-dim)}.academic .card-danger{border:1px solid var(--danger-dim);border-top:3px solid var(--danger);background:var(--danger-dim)}.badge-decorative{border:2.5px solid #fff;transform:rotate(-2deg);box-shadow:0 2px 6px #0000001f}.academic .input{border-radius:12px;font-size:16px}.academic .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.academic nav{-webkit-backdrop-filter:blur(16px)!important;background:#fffc!important;border-bottom-color:#e2e8f099!important}.academic .divider{background:linear-gradient(90deg, transparent, var(--border), transparent);border:none;height:1px;margin:2.5rem 0}.section-alt{background:var(--elevated);border-radius:16px;padding:28px}.section-accent{background:var(--accent-dim);border-radius:16px;padding:28px}.academic .float:not(.game-element),.academic .title-flicker:not(.game-element){animation:none}.academic .title-arcade:not(.game-element){color:var(--accent-text);text-shadow:var(--title-shadow);animation:none}.game-element{font-family:"Press Start 2P",cursive!important}.theme-selector{gap:12px;display:flex}.theme-selector-option{background:var(--surface);border:2px solid var(--border);cursor:pointer;border-radius:14px;flex-direction:column;flex:1;align-items:center;gap:10px;padding:20px 16px;transition:border-color .2s,box-shadow .2s,transform .2s;display:flex}.theme-selector-option:hover{border-color:var(--border-strong);transform:translateY(-2px)}.theme-selector-option.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.theme-selector-icon{font-size:32px;line-height:1}.theme-selector-label{font-family:var(--font-heading);color:var(--text);letter-spacing:.05em;font-size:9px}.theme-selector-desc{font-family:var(--font-body);color:var(--text-muted);text-align:center;font-size:14px}.trust-strip{flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;display:flex}.benefit-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;display:grid}.subject-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;display:grid}.step-number{width:48px;height:48px;font-family:var(--font-heading);color:#fff;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 16px;font-size:16px;display:flex}.cta-banner{background:var(--elevated);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;padding:72px 24px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}