:root{--p:#5b3fd1;--p2:#7c5cff;--o:#ff8a3d;--b:#2fa7e0;--g:#22a06b;--r:#e5484d;--y:#ffc53d;--ink:#1f1d3a;--mut:#5d5a7a;--bg:#f6f4ff;--card:#fff;--line:#e2ddf7;--rad:20px;--sh:0 6px 20px rgba(60,40,140,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Assistant","Rubik","Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:18px;line-height:1.6;overflow-x:hidden}
.skip{position:absolute;right:-999px;top:0;background:#000;color:#fff;padding:8px;z-index:99}.skip:focus{right:8px}
a{color:var(--p)}
:focus-visible{outline:3px solid var(--o);outline-offset:2px}
.top{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(90deg,var(--p),var(--p2));color:#fff;box-shadow:var(--sh)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:20px}
.pz{width:30px;height:30px;border-radius:8px;background:var(--o);position:relative;display:inline-block}
.pz:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--o);left:-6px;top:9px}
.pz:before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--p2);right:-1px;top:9px}
.menu-btn{background:rgba(255,255,255,.18);color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:999px;padding:8px 16px;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.nav{position:sticky;top:64px;z-index:29;background:#fff;border-bottom:1px solid var(--line);padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;box-shadow:var(--sh);max-height:70vh;overflow:auto}
.nav[hidden]{display:none}
.nav a{display:block;padding:10px 12px;border-radius:14px;background:var(--bg);text-decoration:none;color:var(--ink);font-weight:700}
.nav a.on{background:var(--p);color:#fff}
.levelbar{display:flex;gap:8px;overflow-x:auto;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line);scrollbar-width:thin}
.lv{flex:0 0 auto;border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:16px;font-weight:700;cursor:pointer;min-height:44px;color:var(--ink)}
.lv[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
main{max-width:1000px;margin:0 auto;padding:16px 14px 40px;outline:none}
h1{font-size:30px;line-height:1.25;margin:.2em 0 .4em}
h2{font-size:24px;margin:1.2em 0 .5em}
h3{font-size:20px;margin:.8em 0 .3em}
.lead{font-size:19px;color:var(--mut)}
.card{background:var(--card);border-radius:var(--rad);box-shadow:var(--sh);padding:16px;margin:14px 0;border:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:var(--rad);padding:16px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);border:2px solid transparent;transition:transform .15s,border-color .15s;min-height:110px}
.tile:hover{transform:translateY(-3px);border-color:var(--p2)}
.tile .em{font-size:32px}
.tile b{font-size:19px}
.tile small{color:var(--mut);font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:12px 20px;font:inherit;font-weight:800;cursor:pointer;background:var(--p);color:#fff;min-height:48px;text-decoration:none;margin:4px}
.btn.alt{background:#fff;color:var(--p);border:2px solid var(--p)}
.btn.o{background:var(--o)}.btn.g{background:var(--g)}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pager{display:flex;justify-content:space-between;gap:8px;margin-top:24px;flex-wrap:wrap}
/* hero */
.hero{position:relative;background:linear-gradient(135deg,#ece6ff,#fff3e9);border-radius:28px;padding:22px 18px;overflow:hidden;box-shadow:var(--sh)}
.hero h1{font-size:32px;margin:0 0 6px}
.hero p{margin:0 0 10px;color:var(--mut)}
.art{position:relative;height:150px;margin:6px auto 0;max-width:340px;width:100%}
.piece{position:absolute;top:30px;width:110px;height:100px;border-radius:22px;box-shadow:0 14px 24px rgba(0,0,0,.18),inset 0 -8px 0 rgba(0,0,0,.12)}
.piece.a{right:40px;background:linear-gradient(160deg,#ffb27a,var(--o));animation:pa 3.2s ease-in-out infinite}
.piece.b{left:40px;background:linear-gradient(160deg,#7fd3ff,var(--b));animation:pb 3.2s ease-in-out infinite}
.piece.a:after{content:"";position:absolute;left:-22px;top:32px;width:36px;height:36px;border-radius:50%;background:var(--o)}
.piece i{position:absolute;top:30px;width:12px;height:16px;background:#1f1d3a;border-radius:50%}
.piece i:first-child{right:30px}.piece i:nth-child(2){right:62px}
.piece u{position:absolute;bottom:22px;right:38px;width:30px;height:12px;border-bottom:4px solid #1f1d3a;border-radius:0 0 30px 30px}
.spark{position:absolute;top:8px;left:50%;font-size:28px;transform:translateX(-50%);animation:sp 3.2s ease-in-out infinite}
@keyframes pa{0%,100%{transform:translateX(0) rotate(4deg)}50%{transform:translateX(-26px) rotate(0)}}
@keyframes pb{0%,100%{transform:translateX(0) rotate(-4deg)}50%{transform:translateX(26px) rotate(0)}}
@keyframes sp{0%,40%,100%{opacity:0;transform:translateX(-50%) scale(.6)}50%,60%{opacity:1;transform:translateX(-50%) scale(1.2)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{position:relative;background:#fff;border-radius:18px;padding:14px 64px 14px 14px;margin:10px 0;box-shadow:var(--sh)}
.steps li:before{counter-increment:s;content:counter(s);position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font-weight:800}
.steps b{display:block;font-size:19px}
.mist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mist div{background:#fff5f5;border:2px solid #ffd3d3;border-radius:18px;padding:12px}
/* texts */
.src{background:#fff;border-radius:var(--rad);padding:16px;margin:12px 0;box-shadow:var(--sh);border-top:8px solid var(--o)}
.src.b{border-top-color:var(--b)}
.src h3{margin-top:0}
.src .by{color:var(--mut);font-size:15px;margin-bottom:8px}
.src p{margin:0 0 10px}
.sn{cursor:pointer;border-radius:6px;padding:1px 2px;transition:background .15s}
.sn.hl{background:#fff176}
.sn.ok{background:#b9f6ca}
.sn.miss{outline:2px dashed var(--g);outline-offset:1px}
.sn.extra{background:#ffd6d6;text-decoration:line-through wavy rgba(229,72,77,.5)}
.nik{font-size:22px;line-height:2}
.big{font-size:24px;line-height:1.9}
.msg{padding:10px 14px;border-radius:14px;margin:10px 0;font-weight:700}
.msg.ok{background:#e3fcef;color:#0b6b3a}.msg.no{background:#fff0f0;color:#9b1c1f}.msg.info{background:#eef4ff;color:#1d3f8f}
/* merge */
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:60px;padding:10px;border:2px dashed var(--line);border-radius:18px;background:#fbfaff}
.chip{background:#fff;border:2px solid var(--p2);border-radius:14px;padding:8px 12px;font:inherit;font-size:16px;cursor:grab;text-align:right;min-height:44px;color:var(--ink);max-width:100%}
.chip.sel{background:var(--p);color:#fff}
.chip.good{border-color:var(--g);background:#e3fcef}.chip.bad{border-color:var(--r);background:#fff0f0}
.mtable{width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed}
.mtable th{background:var(--ink);color:#fff;border-radius:12px;padding:8px;font-size:16px}
.mtable th.crit{background:var(--p)}
.mtable td{background:#fff;border:2px dashed var(--line);border-radius:14px;padding:6px;vertical-align:top;min-height:64px;height:64px;font-size:15px}
.mtable td.drop{cursor:pointer}
.mtable td.drop.hot{border-color:var(--o);background:#fff7ef}
.mtable td.none{background:#f2f2f6;color:#8a87a3;border-style:solid;text-align:center}
.mtable td.rowh{background:#efeaff;border:0;font-weight:800;font-size:15px}
.mtable select{width:100%;font:inherit;font-size:14px;border-radius:10px;padding:6px;border:2px solid var(--line)}
@media (max-width:640px){
 .mtable,.mtable tbody,.mtable tr,.mtable td,.mtable th{display:block;width:100%}
 .mtable thead{display:none}
 .mtable tr{background:#fff;border-radius:18px;margin:10px 0;padding:8px;box-shadow:var(--sh)}
 .mtable td{margin:6px 0;height:auto;min-height:56px}
 .mtable td[data-lab]:before{content:attr(data-lab);display:block;font-size:13px;color:var(--mut);font-weight:700}
}
/* connectors */
.q{background:#fff;border-radius:18px;padding:14px;margin:10px 0;box-shadow:var(--sh)}
.q .s{font-size:19px;margin-bottom:8px}
.blank{display:inline-block;min-width:70px;border-bottom:3px solid var(--p);text-align:center;font-weight:800;color:var(--p)}
.opt{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font:inherit;font-weight:700;cursor:pointer;min-height:44px;color:var(--ink)}
.opt.good{background:#e3fcef;border-color:var(--g)}.opt.bad{background:#fff0f0;border-color:var(--r)}
.tag{display:inline-block;font-size:13px;background:#efeaff;color:var(--p);border-radius:999px;padding:2px 10px;font-weight:800}
.bank{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.bank div{background:#fff;border-radius:14px;padding:10px;border:1px solid var(--line)}
/* builder */
textarea,input[type=text]{width:100%;font:inherit;font-size:18px;border:2px solid var(--line);border-radius:14px;padding:10px;background:#fff;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
textarea:focus,input:focus{border-color:var(--p2);outline:none}
.starters{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.starters button{border:1px solid var(--line);background:#f4f1ff;border-radius:999px;padding:6px 12px;font:inherit;font-size:15px;cursor:pointer;min-height:40px;color:var(--ink)}
.check{list-style:none;padding:0;margin:0}
.check li{padding:6px 34px 6px 0;position:relative}
.check li:before{content:"⬜";position:absolute;right:0}
.check li.on:before{content:"✅"}
.check li.warn:before{content:"⚠️"}
.meter{height:12px;background:#eee;border-radius:99px;overflow:hidden}.meter i{display:block;height:100%;background:var(--g);width:0}
.frame{font-size:21px;line-height:2.4}
.frame input{width:auto;min-width:150px;display:inline-block;padding:4px 8px}
/* model */
.model span{border-radius:5px;padding:1px 2px}
.anno .k-open{background:#e3f2ff}.anno .k-merge{background:#efe1ff}.anno .k-ref{background:#fff1c2}.anno .k-conn{background:#c9f7d8;font-weight:800}.anno .k-close{background:#ffe0cc}.anno .k-bib{background:#eee}
.legend span{display:inline-block;padding:2px 10px;border-radius:999px;margin:3px;font-size:14px;font-weight:700}
/* rubric */
.rub{width:100%;border-collapse:collapse}
.rub td,.rub th{border-bottom:1px solid var(--line);padding:8px;text-align:right;vertical-align:top}
.rub label{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--line);border-radius:999px;padding:4px 10px;margin:3px;cursor:pointer;font-size:15px;min-height:40px}
.rub input{accent-color:var(--p)}
.total{font-size:28px;font-weight:800;color:var(--p)}
/* quiz */
.qz .opt{display:block;width:100%;text-align:right;border-radius:16px;margin:6px 0}
.prog{height:10px;background:#e8e4fb;border-radius:99px;overflow:hidden}.prog i{display:block;height:100%;background:var(--o)}
/* deck */
.deck{position:relative;background:linear-gradient(135deg,#2b1f6b,#5b3fd1);border-radius:26px;color:#fff;min-height:420px;padding:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;box-shadow:var(--sh)}
.deck:fullscreen{border-radius:0;min-height:100vh}
.deck h2{font-size:32px;margin:10px 0}
.deck p{font-size:21px;max-width:680px;margin:0 auto}
.deck .num{position:absolute;top:12px;left:16px;font-size:14px;opacity:.8}
.dart{height:150px;width:100%;max-width:320px;position:relative;margin-bottom:6px}
.blob{width:130px;height:130px;margin:0 auto;border-radius:42% 58% 55% 45%/50% 45% 55% 50%;background:radial-gradient(circle at 30% 30%,#ffd4b3,var(--o));display:grid;place-items:center;font-size:62px;box-shadow:0 18px 30px rgba(0,0,0,.3);animation:bob 3s ease-in-out infinite}
.blob.b2{background:radial-gradient(circle at 30% 30%,#c8eeff,var(--b))}
.blob.b3{background:radial-gradient(circle at 30% 30%,#d6ffe9,var(--g))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.gridart{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:200px;margin:0 auto}
.gridart i{height:34px;border-radius:8px;background:rgba(255,255,255,.25)}
.gridart i:nth-child(3n+1){background:var(--y)}
.gridart i:nth-child(5),.gridart i:nth-child(9){background:var(--o)}.gridart i:nth-child(6),.gridart i:nth-child(8){background:var(--b)}
.scale{position:relative;width:240px;height:130px;margin:0 auto}
.scale .beam{position:absolute;top:36px;left:10px;right:10px;height:10px;border-radius:9px;background:#fff;animation:tilt 3s ease-in-out infinite}
.scale .post{position:absolute;left:50%;top:36px;width:10px;height:80px;margin-left:-5px;background:#fff;border-radius:6px}
.scale .pan{position:absolute;top:56px;width:70px;height:34px;border-radius:0 0 40px 40px;background:var(--o)}
.scale .pan.l{left:0;background:var(--b)}.scale .pan.r{right:0}
@keyframes tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.stack{width:180px;margin:0 auto}
.stack i{display:block;height:36px;border-radius:12px;margin:6px auto;box-shadow:0 8px 14px rgba(0,0,0,.25)}
.stack i:nth-child(1){width:60%;background:var(--y)}.stack i:nth-child(2){width:85%;background:var(--b)}.stack i:nth-child(3){width:100%;background:var(--o)}
.bridge{display:flex;justify-content:center;align-items:flex-end;gap:0;height:120px}
.bridge i{width:70px;height:60px;border-radius:50% 50% 12px 12px;background:var(--g)}
.bridge b{width:80px;height:16px;background:var(--y);border-radius:8px;margin-bottom:44px;font-size:12px;color:#1f1d3a;line-height:16px}
.deckbar{display:flex;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.olist{counter-reset:o;list-style:none;padding:0}
.olist li{background:#fff;border-radius:18px;padding:14px;margin:10px 0;box-shadow:var(--sh);border-right:8px solid var(--p2)}
.olist .meta{color:var(--mut);font-size:15px}
/* teacher */
@media (max-width:640px){.plan{table-layout:fixed;width:100%}.plan td,.plan th{font-size:15px;padding:6px;word-break:break-word}.plan td:first-child{white-space:normal;width:22%}}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.tabs button{border:2px solid var(--p);background:#fff;color:var(--p);border-radius:999px;padding:8px 16px;font:inherit;font-weight:800;cursor:pointer;min-height:44px}
.tabs button[aria-selected="true"]{background:var(--p);color:#fff}
.plan{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden}
.plan td,.plan th{padding:10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
.plan th{background:#efeaff}
.plan td:first-child{white-space:nowrap;font-weight:800;color:var(--p)}
details{background:#fff;border-radius:16px;padding:10px 14px;margin:8px 0;box-shadow:var(--sh)}
summary{cursor:pointer;font-weight:800;font-size:18px;min-height:36px}
.note{background:#fff8e1;border:2px solid #ffe08a;border-radius:16px;padding:12px;margin:12px 0}
.printnote{font-size:15px;color:var(--mut);background:#fff;border:1px dashed var(--line);border-radius:12px;padding:8px 12px;display:inline-block}
.vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.vocab div{background:#fff;border-radius:16px;padding:10px;text-align:center;box-shadow:var(--sh)}
.vocab .e{font-size:34px}.vocab .w{font-size:22px;font-weight:800}
.foot{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px;background:#fff;border-top:1px solid var(--line);text-align:right}
.foot img{border-radius:50%}
.files a{display:flex;justify-content:space-between;gap:8px;align-items:center;background:#fff;border-radius:16px;padding:12px 14px;margin:8px 0;text-decoration:none;color:var(--ink);box-shadow:var(--sh);font-weight:700}
@media print{
 @page{margin:15mm}
 body{background:#fff;font-size:12pt;text-align:right}
 .top,.nav,.levelbar,.foot img,.pager,.btn,.menu-btn,.starters,.deckbar,.printnote,.tabs{display:none!important}
 main{max-width:none;padding:0}
 .card,.src,.q,.steps li,details,.olist li{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
 details{display:block}details>*{display:block}
 .hero{box-shadow:none;background:#fff;border:1px solid #ccc}
 .art{display:none}
}