/* cyberbase — core design system
   Tokens on :root. Subject accent comes from body[data-subject]. */
@import url("fonts.css");

:root{
  --bg:#0a0c11; --bg2:#0f121a; --panel:#141824; --panel2:#1b2030; --panel3:#232a3d;
  --line:#262d40; --line2:#323a52;
  --ink:#eef1f8; --ink2:#c3c9d8; --mut:#8790a8; --mut2:#5d6580;
  --ok:#3ddc97; --ok-s:rgba(61,220,151,.13);
  --bad:#ff5d73; --bad-s:rgba(255,93,115,.13);
  --warn:#ffc857; --warn-s:rgba(255,200,87,.13);
  --vio:#9b8cff; --vio-s:rgba(155,140,255,.14);
  --sky:#5cc8ff; --sky-s:rgba(92,200,255,.13);
  --ac:#ffb23f; --ac-s:rgba(255,178,63,.13); --ac-ink:#1d1300;
  --ac2:#ff7a3d;
  --disp:"Unbounded",system-ui,sans-serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:16px; --r2:12px; --r3:9px;
  --sh:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -14px rgba(0,0,0,.6);
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.2,1.5,.35,1);
  --tabh:64px;
  color-scheme:dark;
}
body[data-subject="kp"]{--ac:#34e2b7; --ac-s:rgba(52,226,183,.13); --ac-ink:#00231a; --ac2:#5cc8ff}
:root[data-theme="light"]{
  --bg:#f3f1ea; --bg2:#ebe8df; --panel:#fffdf8; --panel2:#f4f1e8; --panel3:#e9e5d9;
  --line:#e0dbcd; --line2:#cfc8b6;
  --ink:#16181f; --ink2:#363a47; --mut:#6c6f7c; --mut2:#9a9caa;
  --ok:#0f8a5a; --ok-s:rgba(15,138,90,.11);
  --bad:#d23048; --bad-s:rgba(210,48,72,.1);
  --warn:#a86a00; --warn-s:rgba(168,106,0,.11);
  --vio:#5b47d6; --vio-s:rgba(91,71,214,.1);
  --sky:#0a78b8; --sky-s:rgba(10,120,184,.1);
  --ac:#c86d00; --ac-s:rgba(200,109,0,.11); --ac-ink:#fff;
  --sh:0 1px 2px rgba(30,25,10,.06),0 10px 26px -16px rgba(30,25,10,.3);
  color-scheme:light;
}
:root[data-theme="light"] body[data-subject="kp"]{--ac:#00876a; --ac-s:rgba(0,135,106,.1); --ac-ink:#fff; --ac2:#0a78b8}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--ui);min-height:100vh;
  overflow-x:hidden;padding-bottom:calc(var(--tabh) + 24px + env(safe-area-inset-bottom,0px))}
body.notabs{padding-bottom:40px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
   radial-gradient(800px 400px at 85% -10%,var(--ac-s),transparent 70%),
   radial-gradient(600px 360px at -10% 30%,var(--vio-s),transparent 70%),
   linear-gradient(var(--line) 1px,transparent 1px) 0 0/44px 44px,
   linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/44px 44px;
  opacity:.55;mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.35) 60%,transparent)}
:root[data-theme="light"] body::before{opacity:.5}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}
img,svg{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.narrow{max-width:720px;margin:0 auto;padding:0 16px}
.mono{font-family:var(--mono)}
.mut{color:var(--mut)}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------- top bar */
.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px)}
.top .in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px;min-height:56px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.brand .lg{width:30px;height:30px;flex:none}
.brand b{font:700 14px/1 var(--disp);letter-spacing:.02em}
.brand b i{font-style:normal;color:var(--ac)}
.crumb{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:13px;color:var(--mut)}
.crumb a{text-decoration:none;white-space:nowrap}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tools{display:flex;align-items:center;gap:6px;flex:none}
.seg{display:flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--panel)}
.seg button{font:700 11px/1 var(--mono);letter-spacing:.08em;padding:8px 9px;color:var(--mut);min-width:34px}
.seg button.on{background:var(--ac);color:var(--ac-ink)}
.ib{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line2);
  background:var(--panel);color:var(--mut);transition:color .15s,border-color .15s}
.ib:hover{color:var(--ink);border-color:var(--mut2)}
.ib svg{width:18px;height:18px}
.who{display:flex;align-items:center;gap:7px;padding:0 10px 0 4px;height:36px;border-radius:10px;border:1px solid var(--line2);
  background:var(--panel);font-size:12.5px;font-weight:600;max-width:150px}
.who .av{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font:700 12px/1 var(--disp);
  background:var(--ac);color:var(--ac-ink);flex:none}
.who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.crumb .hidem{display:none}.who span{display:none}.who{padding:0 4px}.brand b{display:none}}

/* --------------------------------------------------- bottom part tab bar */
.parts{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line)}
.parts .in{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.parts a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px 6px;border-radius:12px;
  text-decoration:none;color:var(--mut);font:600 10.5px/1.1 var(--ui);text-align:center;position:relative;transition:color .2s}
.parts a svg{width:22px;height:22px;transition:transform .3s var(--spring)}
.parts a.on{color:var(--ink)}
.parts a.on::before{content:"";position:absolute;inset:0;border-radius:12px;background:var(--ac-s);
  border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);animation:tabin .35s var(--spring)}
.parts a.on svg{color:var(--ac);transform:translateY(-1px) scale(1.08)}
.parts a:active svg{transform:scale(.9)}
@keyframes tabin{from{transform:scale(.7);opacity:0}}

/* ------------------------------------------------------------ type */
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ac)}
h1.disp{font:700 clamp(26px,5.4vw,52px)/1.04 var(--disp);letter-spacing:-.02em;text-wrap:balance}
h2.disp{font:700 clamp(21px,3.4vw,32px)/1.12 var(--disp);letter-spacing:-.01em;text-wrap:balance}
h3{font:700 18px/1.3 var(--ui)}
.lead{font-size:16.5px;color:var(--ink2);max-width:62ch;text-wrap:pretty}
.prose p{color:var(--ink2);text-wrap:pretty}
.prose p+p{margin-top:.75em}
.prose b,.prose strong{color:var(--ink);font-weight:650}
.prose code,.ic{font:500 .9em var(--mono);background:var(--panel2);border:1px solid var(--line);padding:1px 6px;border-radius:6px;color:var(--ink)}
.prose ul{margin:.6em 0 0 1.1em;color:var(--ink2)}
.prose li+li{margin-top:.35em}

/* ------------------------------------------------------------ surfaces */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.card.tight{padding:14px}
.codeblock{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:14px 15px;
  font:13px/1.75 var(--mono);color:var(--ink2);overflow-x:auto;white-space:pre}
.codeblock .a{color:var(--ac)} .codeblock .v{color:var(--vio)} .codeblock .o{color:var(--ok)} .codeblock .x{color:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:.06em;padding:6px 9px;border-radius:99px;
  border:1px solid var(--line2);color:var(--mut);background:var(--panel)}
.pill.ac{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 45%,transparent);background:var(--ac-s)}
.pill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-s)}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:var(--bad-s)}

/* ------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border-radius:13px;
  font:700 15px/1.1 var(--ui);border:1.5px solid var(--line2);background:var(--panel);color:var(--ink);text-decoration:none;
  transition:transform .12s var(--ease),border-color .15s,background .15s,box-shadow .2s;user-select:none}
.btn:hover{border-color:var(--mut2)}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:var(--ac-ink);box-shadow:0 8px 24px -10px var(--ac)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#03210f}
.btn.bad{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.sm{min-height:36px;padding:8px 12px;font-size:13px;border-radius:10px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn svg{width:18px;height:18px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.grow{flex:1}

/* ------------------------------------------------------- answer options */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel2);border:1.5px solid var(--line);
  border-radius:14px;padding:13px 14px;min-height:58px;font-size:15.5px;line-height:1.35;color:var(--ink);
  transition:border-color .15s,background .15s,transform .1s;animation:rise .45s var(--ease) both}
.opt:nth-child(2){animation-delay:.05s}.opt:nth-child(3){animation-delay:.1s}.opt:nth-child(4){animation-delay:.15s}
.opt:hover{border-color:var(--mut2)}
.opt:active{transform:scale(.985)}
.opt .k{flex:0 0 30px;height:30px;border-radius:9px;display:grid;place-items:center;font:700 13px/1 var(--mono);
  background:var(--panel);border:1px solid var(--line2);color:var(--mut)}
.opt.right{border-color:var(--ok);background:var(--ok-s)} .opt.right .k{background:var(--ok);color:#03210f;border-color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-s);animation:shake .4s} .opt.wrong .k{background:var(--bad);color:#2b0007;border-color:var(--bad)}
.opt.dim{opacity:.45}
.opt[disabled]{pointer-events:none}
.opt code{font:500 .92em var(--mono)}

.verdict{border-radius:14px;padding:14px 16px;border:1px solid var(--line);background:var(--panel2);animation:rise .4s var(--ease) both}
.verdict.ok{border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:var(--ok-s)}
.verdict.bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent);background:var(--bad-s)}
.verdict .h{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;display:block}
.verdict.ok .h{color:var(--ok)} .verdict.bad .h{color:var(--bad)}
.verdict p{font-size:14.5px;color:var(--ink2)} .verdict p+p{margin-top:8px}

.meter{height:6px;background:var(--panel3);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2));border-radius:99px;transition:width .5s var(--ease)}
.dots{display:flex;gap:4px}
.dots span{flex:1;height:6px;border-radius:3px;background:var(--panel3);transition:background .3s}
.dots span.done{background:var(--ok)} .dots span.miss{background:var(--warn)} .dots span.now{background:var(--ac);animation:pulse 1.2s infinite}

/* ------------------------------------------------------------ inputs */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.inp{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line2);background:var(--bg2);font-size:16px}
.inp:focus{outline:0;border-color:var(--ac)}
.inp.mono{font-family:var(--mono);letter-spacing:.06em}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
input[type=range]{accent-color:var(--ac);width:100%}

/* ------------------------------------------------------------ modal / toast */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(5,6,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:16px;animation:fade .2s both}
.modal{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:22px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);animation:pop .4s var(--spring) both;max-height:calc(100vh - 32px);overflow:auto}
.modal h3{font:700 19px/1.25 var(--disp);margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 30px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:95;
  background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;padding:11px 16px;border-radius:12px;animation:rise .3s var(--ease);
  max-width:calc(100vw - 32px)}

/* ------------------------------------------------------------ result card */
.result{text-align:center}
.result .big{font:700 clamp(54px,14vw,84px)/1 var(--disp);color:var(--ac);letter-spacing:-.04em}
.result .of{font:600 13px/1 var(--mono);color:var(--mut);margin-top:8px;letter-spacing:.08em}
.rcode{margin-top:16px;padding:12px;border-radius:12px;background:var(--bg2);border:1px dashed var(--line2);
  font:600 14px/1.4 var(--mono);color:var(--ac);word-break:break-all;user-select:all}
.stars{display:flex;justify-content:center;gap:6px;margin-top:12px}
.stars svg{width:30px;height:30px;color:var(--line2)}
.stars svg.on{color:var(--warn);animation:pop .5s var(--spring) both}

/* ------------------------------------------------------------ hero/page */
.page-head{padding:28px 0 18px}
.page-head .lead{margin-top:10px}
.section{padding:14px 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}

/* lesson part header (shared by quiz/quest/play/lab) */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:22px 0 16px}
.phead .t{min-width:0}
.phead .num{font:700 12px/1 var(--mono);color:var(--mut);letter-spacing:.12em;margin-bottom:8px;display:block}

/* ------------------------------------------------------------ motion */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}}
@keyframes pop{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:none}}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-6px)}}
@keyframes pulse{50%{opacity:.45}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{50%{transform:translateY(-6px)}}
.rise{animation:rise .55s var(--ease) both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}.d5{animation-delay:.3s}.d6{animation-delay:.36s}
.shake{animation:shake .45s}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:99}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.how{margin-bottom:16px}.how h3{font-size:17px;margin-bottom:10px}.how ol{margin:0;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.5}.how li::marker{color:var(--ac);font-weight:700}