:root{
  --bg:#f6f3ff;--bg2:#ffffff;--ink:#231b3d;--mute:#6b6488;--line:#e3dcf7;--brand:#7c5cff;--brand2:#5a3fe0;--brand-ink:#fff;
  --ok:#17a673;--ok-bg:#e3f8ef;--warn:#e08a00;--warn-bg:#fff4dc;--bad:#d64561;--bad-bg:#fde8ec;--sea:#34b3e4;--sand:#ffd98a;--leaf:#47b85c;
  --card-sh:0 2px 0 rgba(35,27,61,.06),0 8px 24px -12px rgba(60,40,140,.25);--r:18px;--r2:12px;
  --font:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
:root[data-theme="pink"]{--bg:#fff1f7;--bg2:#fff;--ink:#3b1830;--mute:#8a5a77;--line:#f8d3e6;--brand:#ec4f9c;--brand2:#c92f7d;--sea:#ff9ccc}
:root[data-theme="night"]{--bg:#141127;--bg2:#1f1a3a;--ink:#f1edff;--mute:#a79fcb;--line:#342c5c;--brand:#9d86ff;--brand2:#bfb0ff;--brand-ink:#14102a;
  --ok-bg:#123b2e;--warn-bg:#3f300d;--bad-bg:#45172a;--card-sh:0 8px 24px -12px #000;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="pink"]){--bg:#141127;--bg2:#1f1a3a;--ink:#f1edff;--mute:#a79fcb;--line:#342c5c;--brand:#9d86ff;--brand2:#bfb0ff;--brand-ink:#14102a;--ok-bg:#123b2e;--warn-bg:#3f300d;--bad-bg:#45172a;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.5 var(--font);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--brand2)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:8px;z-index:99;background:var(--bg2);padding:8px 12px}
h1,h2,h3{line-height:1.2;margin:.2em 0 .4em;font-weight:900}
h1{font-size:clamp(26px,5vw,40px)}h2{font-size:clamp(21px,3.6vw,28px)}h3{font-size:19px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;background:color-mix(in srgb,var(--bg2) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;gap:8px;align-items:center;text-decoration:none;color:var(--ink)}.brand small{display:block;font-size:12px;color:var(--mute);margin-top:-4px}
.logo{font-size:30px}
.nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.nav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:800;font-size:15px}
.nav a[aria-current="page"]{background:var(--brand);color:var(--brand-ink)}
.who{display:flex;gap:8px;align-items:center;font-size:14px}
main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:18px 16px 40px}
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding:14px 16px;color:var(--mute);font-size:13px;border-top:1px solid var(--line)}
.loading{padding:60px;text-align:center;color:var(--mute)}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--card-sh)}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{flex:1}
.btn{appearance:none;border:0;border-radius:14px;padding:12px 20px;min-height:48px;font:800 17px var(--font);cursor:pointer;background:var(--brand);color:var(--brand-ink);box-shadow:0 3px 0 var(--brand2);transition:transform .12s, box-shadow .12s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brand2)}
.btn.big{font-size:20px;padding:16px 28px;min-height:60px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.soft{background:color-mix(in srgb,var(--brand) 14%,var(--bg2));color:var(--ink);box-shadow:none}
.btn.small{min-height:36px;padding:6px 12px;font-size:14px;border-radius:10px}
.btn.ok{background:var(--ok);box-shadow:0 3px 0 #0c7c54}.btn.bad{background:var(--bad);box-shadow:0 3px 0 #a72a44}
.btn:disabled{opacity:.5;cursor:not-allowed}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:800;background:var(--line);color:var(--ink)}
.pill.demo{background:var(--warn-bg);color:var(--warn)}.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.bad{background:var(--bad-bg);color:var(--bad)}
.mute{color:var(--mute)}.small{font-size:14px}
.hero{display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:center;padding:10px 0 24px}
.hero .art{font-size:110px;text-align:center;filter:drop-shadow(0 10px 20px rgba(124,92,255,.3));animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-2deg)}}
@media (max-width:720px){.hero{grid-template-columns:1fr}.hero .art{font-size:80px}}
.tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);cursor:pointer;border:0;text-align:left;font:inherit}
.tile .ico{font-size:40px}
.tile:hover{transform:translateY(-2px)}.tile{transition:transform .15s}
.map{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media (max-width:560px){.map{grid-template-columns:repeat(4,1fr)}}
.day{border-radius:14px;padding:8px 6px;text-align:center;background:var(--bg2);border:2px solid var(--line);font-size:13px}
.day b{display:block;font-size:20px}.day.past{background:color-mix(in srgb,var(--ok) 15%,var(--bg2))}.day.today{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.mission{background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#ff8ac5));color:#fff;border:0}
.mission .btn{background:#fff;color:var(--brand2);box-shadow:0 3px 0 rgba(0,0,0,.15)}
.stars{font-weight:900;font-size:20px}
/* exercise */
.ex{max-width:760px;margin:0 auto}
.ex .instr{color:var(--mute);font-weight:800;margin-bottom:4px}
.ex .prompt{font-size:clamp(20px,3.4vw,26px);font-weight:800;margin:6px 0 14px}
.passage{background:var(--bg);border-left:5px solid var(--brand);padding:12px 14px;border-radius:10px;margin:8px 0 14px}
.ex img.pic{max-width:100%;max-height:340px;border-radius:12px;display:block;margin:6px auto 12px;background:#fff}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.opt{min-height:56px;border-radius:14px;border:2px solid var(--line);background:var(--bg2);font:800 18px var(--font);color:var(--ink);text-align:left;padding:10px 14px;cursor:pointer;display:flex;gap:10px;align-items:center}
.opt .k{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--line);font-size:15px;flex:none}
.opt[aria-pressed="true"]{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--bg2))}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt:disabled{cursor:default}
.tiles{display:flex;flex-wrap:wrap;gap:8px;min-height:58px;padding:8px;border-radius:14px;border:2px dashed var(--line)}
.tiles.answer{background:color-mix(in srgb,var(--brand) 6%,var(--bg2));border-style:solid}
.wtile{padding:10px 14px;border-radius:12px;background:var(--sand);color:#3b2a00;font:800 18px var(--font);border:0;box-shadow:0 3px 0 #d9a93c;cursor:pointer;min-height:48px}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mcol{display:flex;flex-direction:column;gap:8px}
.mitem{min-height:52px;border-radius:12px;border:2px solid var(--line);background:var(--bg2);font:800 18px var(--font);color:var(--ink);cursor:pointer;padding:8px 12px}
.mitem.sel{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.mitem[data-pair]{border-style:solid}
.mitem.drop-over{background:color-mix(in srgb,var(--brand) 18%,var(--bg2))}
input.type{width:100%;font:800 22px var(--font);padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--bg2);color:var(--ink)}
.fb{margin-top:14px;padding:14px 16px;border-radius:14px}
.fb.ok{background:var(--ok-bg)}.fb.bad{background:var(--bad-bg)}.fb.cue{background:var(--warn-bg)}
.fb .rule{margin-top:6px;font-weight:800}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.progress{height:12px;border-radius:99px;background:var(--line);overflow:hidden}.progress i{display:block;height:100%;background:var(--brand);transition:width .4s}
.gamebar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.overlay{position:fixed;inset:0;background:rgba(20,14,40,.55);display:grid;place-items:center;z-index:50;padding:16px}
.overlay .card{max-width:440px;width:100%;text-align:center}
/* audio */
.player{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg);padding:10px;border-radius:14px;margin:8px 0 12px}
.player .btn{min-height:44px}
.player input[type=range]{width:110px}
/* games scenery */
.scene{border-radius:var(--r);padding:14px;margin-bottom:14px;position:relative;overflow:hidden}
.scene.ostrov{background:linear-gradient(#bfe9ff,var(--sea))}
.scene.detektiv{background:linear-gradient(135deg,#3a2f5c,#5c4a8a);color:#fff}
.scene.masterskaya{background:linear-gradient(#ffe7b8,#ffd08a)}
.scene.pochta{background:linear-gradient(#ffd6e8,#c9b8ff)}
.scene.radio{background:linear-gradient(#0f3d4a,#1c6b6b);color:#e6fff9}
.scene.sad{background:linear-gradient(#d9f7d2,#9fdd95)}
.path{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.node{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff8;font-size:20px;border:3px solid #fff}
.node.done{background:var(--sand)}.node.cur{animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.evidence{display:flex;gap:8px;flex-wrap:wrap}.evidence span{background:#fff2;border:1px dashed #fff8;border-radius:10px;padding:4px 10px;font-size:14px}
.beds{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.bed{height:56px;border-radius:12px;background:#8b6b4a;display:grid;place-items:end center;font-size:30px;padding-bottom:4px;transition:background .4s}
.bed.alive{background:#6fbf5f}
.bigwin{font-size:80px;animation:pop .6s ease-out}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.radioboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.radioboard .opt{background:#0b2d36;color:#e6fff9;border-color:#2c8f8f}
.radioboard .opt[aria-pressed="true"]{background:#1f8a7a}
.radioboard .opt.right{background:#137a52}.radioboard .opt.wrong{background:#7a2236}
/* exam */
.timer{font:900 22px var(--font);font-variant-numeric:tabular-nums}
.timer.low{color:var(--bad)}
.qblock{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.qnum{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--brand);color:var(--brand-ink);font-weight:900;margin-right:6px}
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.sheet a{display:grid;place-items:center;height:36px;border-radius:8px;background:var(--line);text-decoration:none;color:var(--ink);font-weight:800}
.sheet a.has{background:var(--brand);color:var(--brand-ink)}
/* parent */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{border:0;background:var(--bg2);border:1px solid var(--line);padding:8px 14px;border-radius:999px;font:800 15px var(--font);color:var(--ink);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
table{border-collapse:collapse;width:100%;font-size:15px}th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bar{height:10px;border-radius:9px;background:var(--line);min-width:80px}.bar i{display:block;height:100%;border-radius:9px;background:var(--ok)}
.spark{display:flex;gap:3px;align-items:flex-end;height:60px}.spark i{flex:1;background:var(--brand);border-radius:3px 3px 0 0;min-height:2px}
textarea,select,input[type=text],input[type=number],input[type=date],input[type=password]{font:600 16px var(--font);padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);width:100%}
label.f{display:block;margin:8px 0}label.f span{display:block;font-size:14px;color:var(--mute);font-weight:800}
.editor .opt-row{display:flex;gap:6px;align-items:center;margin:4px 0}
.prob{color:var(--bad);font-size:14px}
details summary{cursor:pointer;font-weight:800}
.guide section{margin:18px 0}
.shot{border:2px solid var(--line);border-radius:16px;padding:12px;background:var(--bg);font-size:14px}
.shot .mbtn{display:inline-block;background:var(--brand);color:var(--brand-ink);border-radius:10px;padding:4px 10px;font-weight:800;margin:2px}
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;position:relative;padding-left:44px;margin:10px 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:10px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:900}
.toast{visibility:hidden;opacity:0;position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(120px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:800;transition:transform .3s;z-index:60;max-width:90vw}
.toast.show{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}
.net{position:fixed;top:70px;right:12px;background:var(--warn-bg);color:var(--ink);padding:8px 12px;border-radius:10px;font-size:14px;z-index:40;box-shadow:var(--card-sh)}
.garden{display:flex;flex-wrap:wrap;gap:6px;font-size:42px;min-height:70px;padding:10px;border-radius:16px;background:linear-gradient(#c8f0ff 40%,#9fdd95 40%)}
.reduced *,.reduced *::before,.reduced *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:560px){body{font-size:16px}.top{padding:8px 12px;gap:6px}.nav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto}.nav a{padding:6px 10px;font-size:14px;white-space:nowrap}.who{margin-left:auto}.brand small{display:none}.match{grid-template-columns:1fr 1fr}.btn.big{width:100%}}
main:focus{outline:none}
