:root{--bg:#07101f;--panel:#101d34;--text:#edf3ff;--muted:#aab7cc;--accent:#63c7ff;--accent2:#9b7cff;--line:#243a5d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 10%,#18264b 0,#07101f 40%);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}header{position:sticky;top:0;z-index:5;height:64px;padding:0 5%;display:flex;align-items:center;gap:40px;background:#07101feF;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.logo{font-size:22px;font-weight:800;color:var(--accent);text-decoration:none}.logo span{color:var(--text);margin-left:10px}nav{display:flex;gap:28px;flex:1;justify-content:center}nav a{color:var(--muted);text-decoration:none}nav a:hover{color:var(--accent)}#theme{background:none;border:0;color:var(--text);font-size:23px;cursor:pointer}.hero{min-height:620px;display:flex;align-items:center;padding:70px 7%;background:linear-gradient(90deg,rgba(7,16,31,.98) 0%,rgba(7,16,31,.82) 35%,rgba(7,16,31,.2) 100%),url('anime-learning.png') center/cover}.hero-copy{max-width:590px}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:2px}h1{font-size:clamp(42px,6vw,72px);line-height:1.05;margin:10px 0 22px}h1 span{color:var(--accent)}h2{font-size:30px;margin:0 0 25px}section{max-width:1200px;margin:auto;padding:70px 5%}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cards article{background:linear-gradient(145deg,#111f38,#0b172b);border:1px solid var(--line);border-radius:14px;padding:25px}.cards b{font-size:19px}.cards p{color:var(--muted);min-height:72px}.cards small{padding:5px 10px;border-radius:20px;background:#20365e;color:#a9c8ff}.buttons{display:flex;gap:14px}.btn{display:inline-block;border:1px solid var(--accent);border-radius:25px;padding:11px 22px;color:white;background:linear-gradient(100deg,#315ed5,#7448b9);text-decoration:none;cursor:pointer}.btn.ghost{background:transparent}.progress{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}label{display:block;margin-top:16px;color:var(--muted)}label span{float:right}.bar{height:10px;background:#182a49;border-radius:10px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:10px}blockquote{font-size:24px;margin:0;padding:30px;border-left:2px solid var(--accent2)}cite{display:block;font-size:15px;color:var(--muted);margin-top:15px}.game-section{display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:center}.game-section p{color:var(--muted)}canvas{width:100%;background:#081323;border:1px solid var(--line);border-radius:15px}.game-section #status{font-size:14px}footer{text-align:center;padding:30px;color:#71809a;border-top:1px solid var(--line)}body.light{--bg:#eef4ff;--panel:#fff;--text:#162238;--muted:#52627a;--line:#ccd8ec;background:#eef4ff}.light header{background:#eef4ffeF}.light .hero{background:linear-gradient(90deg,rgba(238,244,255,.98) 0%,rgba(238,244,255,.82) 35%,rgba(238,244,255,.15) 100%),url('anime-learning.png') center/cover}@media(max-width:800px){nav{display:none}.cards{grid-template-columns:1fr 1fr}.progress,.game-section{grid-template-columns:1fr}.hero{min-height:540px;padding:50px 7%}}@media(max-width:520px){.cards{grid-template-columns:1fr}h1{font-size:45px}}