:root{--ink:#14143a;--mut:#55587a;--blue:#3d6bff;--vio:#8b4dff;--pink:#ff5fae;--lav:#f4f1ff;--r:22px;--sh:0 10px 40px rgba(90,70,200,.13),0 2px 6px rgba(90,70,200,.06)}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:radial-gradient(1200px 600px at 80% -10%,#ece6ff,transparent),linear-gradient(#fbfaff,#f3f0ff)}
a{color:inherit}main{max-width:1120px;margin:auto;padding:0 20px}
.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:24px;padding:14px max(20px,calc(50% - 540px));background:rgba(255,255,255,.75);backdrop-filter:blur(12px);border-bottom:1px solid #ece8fb}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;font-size:1.25rem;text-decoration:none}.nav nav{display:flex;gap:28px;margin-left:auto}.nav nav a{text-decoration:none}
.btn{border:0;border-radius:999px;padding:11px 22px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}.grad{color:#fff;background:linear-gradient(90deg,#4f8bff,#a65cff,#ff6fb5);box-shadow:0 6px 18px rgba(160,90,255,.35)}
.ghost{background:#fff;border:1px solid #ddd5ff;color:var(--vio);padding:7px 16px;margin-left:auto}
.hero{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:20px;padding:40px 0}
h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.1;margin:0 0 18px}.gt{background:linear-gradient(90deg,#3d6bff,#a65cff,#ff6fb5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mut);font-size:1.1rem;line-height:1.6}.pill{display:inline-block;margin-top:10px;background:#fff;padding:10px 18px;border-radius:999px;box-shadow:var(--sh);font-size:.9rem}
.hero-art{position:relative}#heroSphere{width:100%;height:auto;display:block}
.orb{position:absolute;border-radius:50%;animation:fl 6s ease-in-out infinite}.o1{width:46px;height:46px;left:4%;top:62%;background:radial-gradient(circle at 30% 30%,#9bb6ff,#2d4fe0)}
.o2{width:56px;height:56px;right:6%;top:68%;background:radial-gradient(circle at 30% 30%,#ffd0ea,#ff4f9f);animation-delay:-2s}.o3{width:24px;height:24px;left:16%;top:6%;background:radial-gradient(circle at 30% 30%,#d9c2ff,#7a3cf0);animation-delay:-4s}.o4{width:34px;height:34px;right:12%;top:4%;background:radial-gradient(circle at 30% 30%,#a8c0ff,#2a4fe0);animation-delay:-1s}
@keyframes fl{50%{transform:translateY(-14px)}}
.card{background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(248,245,255,.9));border:1px solid #fff;border-radius:var(--r);box-shadow:var(--sh);padding:24px;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(90,70,200,.18)}.play:hover{transform:none}
h2{margin:0 0 16px;font-size:1.6rem}.ico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lav);color:var(--vio)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}h3{margin:6px 0 12px;font-size:1.05rem}
.qcard{background:#fff;border-radius:16px;padding:14px;margin-bottom:14px;box-shadow:0 4px 16px rgba(90,70,200,.08)}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.dot.a{background:var(--blue)}.dot.b{background:var(--vio)}
.qrow{display:flex;gap:14px;align-items:center}.mini{width:100px;height:100px;flex:none}.qmath{flex:1;font-family:"Cambria Math",Georgia,serif}.qmath label{display:block;margin-top:6px}
input[type=range]{width:100%;accent-color:var(--vio)}.note{color:var(--mut);font-size:.85rem}
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gate{background:#fff;border-radius:14px;padding:14px 6px 8px;text-align:center;cursor:grab;box-shadow:0 4px 14px rgba(90,70,200,.1);user-select:none;touch-action:none}
.gate b{display:block;font-size:1.5rem;margin-bottom:8px}.gate span{display:block;color:#fff;border-radius:8px;padding:5px;font-size:.78rem}.h b{color:#1f3fae}.h span{background:var(--blue)}.x span{background:var(--pink)}.c b{color:var(--vio)}.c span{background:var(--vio)}.x{background:#fff2f8}.c{background:#f6f0ff}
.strip{margin:14px 0 4px;min-height:70px;border:2px dashed #cfc3f5;border-radius:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;background:#fbf9ff}.strip.over{background:#efe8ff}.hint{color:var(--mut);margin:auto}
.chip{display:flex;align-items:center;gap:6px;background:#fff;border-radius:10px;padding:6px 8px;box-shadow:0 2px 8px rgba(90,70,200,.15);font-weight:700}.chip button{border:0;background:var(--lav);border-radius:6px;font:inherit;font-size:.75rem;cursor:pointer;padding:3px 6px}
.row{display:flex;align-items:center;gap:10px;margin:12px 0}.sw input{display:none}.sw i{display:block;width:46px;height:26px;border-radius:99px;background:#d7d2ee;position:relative;cursor:pointer;transition:.3s}.sw i:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.3s}.sw input:checked+i{background:var(--vio)}.sw input:checked+i:after{left:23px}
.probs{background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 4px 16px rgba(90,70,200,.08)}.probs h4{margin:0 0 8px}.bar{display:grid;grid-template-columns:44px 1fr 52px;align-items:center;gap:10px;margin:8px 0;font-family:Georgia,serif}
.track{height:10px;background:#eceaf6;border-radius:9px;overflow:hidden}.fill{height:100%;border-radius:9px;background:linear-gradient(90deg,#3d6bff,#8b4dff);transition:width .4s}.bar:nth-child(odd) .fill{background:linear-gradient(90deg,#ff5fae,#b45cff)}
.badge{margin-left:auto;background:linear-gradient(90deg,#a65cff,#c77dff);color:#fff;border-radius:999px;padding:5px 14px;font-size:.85rem}#amps{color:var(--mut);font-family:Georgia,serif}
#tutorials{margin:44px 0}.sechead p{color:var(--mut);margin-top:-8px}.tuts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.tut svg{width:100%;height:120px}.tut p{color:var(--mut);font-size:.92rem;line-height:1.55}
.foot-cards{display:grid;grid-template-columns:1fr 1.3fr;gap:20px}.foot-cards h4{margin:0 0 10px;font-size:1.1rem}.slot{border:2px dashed #d8cdfa;border-radius:14px;padding:22px;text-align:center;color:var(--mut)}
.hw p{color:var(--mut);margin-top:0}.hw a{display:flex;justify-content:space-between;background:#fff;border-radius:10px;padding:10px 14px;margin:6px 0;text-decoration:none;box-shadow:0 2px 8px rgba(90,70,200,.08)}
footer{text-align:center;padding:30px;color:var(--mut)}
@media(max-width:820px){.hero,.pgrid,.foot-cards{grid-template-columns:1fr}.tuts{grid-template-columns:1fr}.nav nav{display:none}.nav .btn{margin-left:auto}.hero{padding-top:20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.gates{grid-template-columns:repeat(5,1fr)}.gate b{font-size:1.2rem}.gate span{font-size:.68rem}.y span{background:#22a39a}.z span{background:#e08a1e}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:12px}.sechead .btn{margin:0}
.chal{margin-top:20px}.chl{list-style:none;padding:0;display:grid;gap:8px}.chl li{background:#fff;border-radius:12px;padding:10px 14px;box-shadow:0 2px 8px rgba(90,70,200,.08)}.chl li.done{background:#eefcf3}
.page{max-width:860px;margin:30px auto}.page .card{margin-bottom:22px}.page h2{font-size:1.4rem}.page p,.page li{line-height:1.65;color:#2b2d50}.math{font-family:"Cambria Math",Georgia,serif;background:var(--lav);border-radius:12px;padding:12px 16px;overflow-x:auto;white-space:pre}
.toc{display:flex;flex-wrap:wrap;gap:8px}.toc a{background:#fff;border-radius:99px;padding:6px 14px;text-decoration:none;box-shadow:0 2px 8px rgba(90,70,200,.1);font-size:.9rem}
.soon{display:inline-block;background:#fff2d9;color:#8a5a00;border-radius:99px;padding:3px 10px;font-size:.8rem;margin-left:6px}.disc{font-size:.85rem;color:var(--mut)}
@media(max-width:820px){.gates{grid-template-columns:repeat(3,1fr)}.sechead{flex-direction:column;align-items:flex-start}}
@media (max-width:480px){.pgrid{grid-template-columns:minmax(0,1fr)}.pgrid>*{min-width:0}.pgrid .row{flex-wrap:wrap}.qrow{flex-wrap:wrap}.qmath{min-width:0;flex:1 1 100%}.qmath input{max-width:100%;box-sizing:border-box}.qcard{max-width:100%;box-sizing:border-box}}