:root{--bg:#0b0f17;--text:#fff;--muted:#a9b3c6;--accent:#6be7c8;--accent-2:#7aa2ff;--good:#8df2a4;--bad:#ff7a86;
--c-crust:#8b5e3c;--c-mantle:#d9672b;--c-outer:#ffca3a;--c-inner:#fff2b3}
*{box-sizing:border-box}html,body{margin:0;background:#0b0f17;color:var(--text);font-family:Inter,system-ui}
.app-header{position:sticky;top:0;background:rgba(11,15,23,.6);backdrop-filter:blur(10px);padding:.6rem .8rem;border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:.8rem}.logo{font-size:1.6rem}.title p{margin:0;color:var(--muted)}
.progress-wrap{width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:.6rem}
.progress{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s ease}
main{max-width:1100px;margin:0 auto;padding:1rem}
.video-card{border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden}
.video-frame{position:relative;aspect-ratio:16/9}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cta{padding:.8rem;display:flex;justify-content:center}.btn{background:var(--accent);color:#03261e;border:0;border-radius:12px;padding:.8rem 1.1rem;font-weight:800;cursor:pointer}.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.25)}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:1rem;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.q-type{color:var(--muted);font-size:.85rem}.q-title{margin:.2rem 0 .4rem}
.options{display:grid;gap:.6rem;margin-top:.8rem}
.opt{padding:1rem;border-radius:12px;background:#0f1626;border:1px solid rgba(255,255,255,.12);cursor:pointer;color:var(--text);text-align:left}
.opt:hover,.opt:focus-visible{border-color:var(--accent);outline:none}
.opt.selected{outline:2px solid rgba(255,255,255,.3)}
.opt.correct{outline:2px solid var(--good)}.opt.wrong{outline:2px solid var(--bad)}
.controls{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}.controls .btn{flex:1;min-width:140px}
.hidden{display:none}
.badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:.25rem .6rem;border-radius:999px;color:var(--text)}
.slider-wrap{display:flex;align-items:center;gap:.8rem}input[type=range]{width:100%}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.draggable{padding:.6rem .7rem;border-radius:10px;background:#121a2a;border:1px solid rgba(255,255,255,.1);cursor:grab;color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.drop{min-height:48px;padding:.6rem .7rem;border-radius:10px;background:#0b111d;border:1px dashed rgba(255,255,255,.25);color:var(--text);transition:transform .12s ease,border-color .12s ease,background-color .12s ease}
.pieces{display:flex;gap:12px;overflow-x:auto;padding:.6rem}
.piece{padding:10px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.15);color:#051013;font-weight:800;user-select:none;cursor:grab;min-width:140px;text-align:center;touch-action:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.piece.crust{background:var(--c-crust);color:#fff}
.piece.mantle{background:var(--c-mantle);color:#fff}
.piece.outer{background:var(--c-outer)}
.piece.inner{background:var(--c-inner);color:#333}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:.8rem 0}
.slot{height:80px;border-radius:16px;border:2px dashed rgba(255,255,255,.35);display:grid;place-items:center;color:var(--muted);transition:transform .12s ease,border-color .12s ease,background-color .12s ease}
.slot.ok{border-color:var(--good);color:#cfeedd}
.slot.active, .drop.active{transform:scale(1.06);border-color:var(--accent)}
.model{position:relative;width:260px;height:260px;margin: 0 auto 1rem auto}
.model .layer{position:absolute;border-radius:50%;inset:0}
.model .crust{background:var(--c-crust)}
.model .mantle{background:var(--c-mantle);inset:14%}
.model .outer{background:var(--c-outer);inset:32%}
.model .inner{background:var(--c-inner);inset:48%}

/* Micro-interactions */
@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(1.5deg)}50%{transform:rotate(0)}75%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
.dragging{transform:scale(.98)}
.wiggle{animation:wiggle .45s ease-in-out infinite}