/* IGCSE ICT & Computer Science — shared styles (page + interactive toys).
   Layout: sticky top bar; one view at a time (overview, plan, qualification hubs, topic study pages, exams, formulas, practice, glossary).
   Colour means one thing each: green = Computer Science 0478, rose = ICT 0417;
   orange/blue/purple = Paper 1/2/3; amber = Why, teal = Example, red = Watch out, violet = Teacher. */
:root{
  --paper:#F5F7F4; --card:#FFFFFF; --ink:#18212B; --muted:#536070; --line:#D3DAE0; --on-colour:#FFFFFF;
  --cs:#1D6B47; --ict:#A62F6A; --p1:#C2501C; --p2:#2560C2; --p3:#7E40BC; --accent:#33415C;
  --why:#946000; --why-bg:#FFF3D4; --eg:#0B7482; --eg-bg:#DFF2F4; --warn:#BF3A2C; --warn-bg:#FBE6E3;
  --ok:#22804F; --ok-bg:#E1F2E8; --bad:#BF3A2C; --bad-bg:#FBE6E3; --mid:#946000; --mid-bg:#FFF3D4;
  --teach:#6B3FB8; --teach-bg:#EFE8FA;
  --pv0:#C8384E; --pv1:#C9611B; --pv2:#A07A00; --pv3:#2E8B57; --pv4:#11807F; --pv5:#2F63C4; --pv6:#7044BE; --pv7:#B23781;
  --lamp:#F5C542; --code-bg:#EEF1EE;
  --tint-none:#F5F7F4; --tint-cream:#FAF1D9; --tint-blue:#E6EFFA; --tint-mint:#E3F3EA; --tint-rose:#F9E7EA;
  --f-body:"Lexend","Atkinson Hyperlegible",system-ui,sans-serif;
  --f-mono:"Atkinson Hyperlegible Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --lh:1.65; --ls:0.01em; --ws:0.04em;
  --p:var(--accent);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#12171D; --card:#1A2129; --ink:#E7ECF1; --muted:#A2ADBA; --line:#313B46; --on-colour:#0E1318;
  --cs:#5BC88F; --ict:#F07AAE; --p1:#F2895A; --p2:#7AA5F2; --p3:#B88AF0; --accent:#C9D3E6;
  --why:#F0B743; --why-bg:#2E2612; --eg:#4CC3CF; --eg-bg:#122A2E; --warn:#F27D7D; --warn-bg:#3A1E20;
  --ok:#5FC795; --ok-bg:#163326; --bad:#F27D7D; --bad-bg:#3A1E20; --mid:#F0B743; --mid-bg:#2E2612;
  --teach:#B99BF2; --teach-bg:#241C33;
  --pv0:#F26D80; --pv1:#F59B53; --pv2:#E7C24C; --pv3:#63C690; --pv4:#4CC7C4; --pv5:#78A2F2; --pv6:#AA8CF1; --pv7:#E883BD;
  --code-bg:#151C22;
  --tint-none:#12171D; --tint-cream:#1F1C14; --tint-blue:#121B26; --tint-mint:#122019; --tint-rose:#22161A;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#12171D; --card:#1A2129; --ink:#E7ECF1; --muted:#A2ADBA; --line:#313B46; --on-colour:#0E1318;
  --cs:#5BC88F; --ict:#F07AAE; --p1:#F2895A; --p2:#7AA5F2; --p3:#B88AF0; --accent:#C9D3E6;
  --why:#F0B743; --why-bg:#2E2612; --eg:#4CC3CF; --eg-bg:#122A2E; --warn:#F27D7D; --warn-bg:#3A1E20;
  --ok:#5FC795; --ok-bg:#163326; --bad:#F27D7D; --bad-bg:#3A1E20; --mid:#F0B743; --mid-bg:#2E2612;
  --teach:#B99BF2; --teach-bg:#241C33;
  --pv0:#F26D80; --pv1:#F59B53; --pv2:#E7C24C; --pv3:#63C690; --pv4:#4CC7C4; --pv5:#78A2F2; --pv6:#AA8CF1; --pv7:#E883BD;
  --code-bg:#151C22;
  --tint-none:#12171D; --tint-cream:#1F1C14; --tint-blue:#121B26; --tint-mint:#122019; --tint-rose:#22161A;
  color-scheme:dark;
}
:root[data-tint="cream"]{--paper:var(--tint-cream)} :root[data-tint="blue"]{--paper:var(--tint-blue)}
:root[data-tint="mint"]{--paper:var(--tint-mint)} :root[data-tint="rose"]{--paper:var(--tint-rose)}
:root[data-font="atkinson"]{--f-body:"Atkinson Hyperlegible","Lexend",system-ui,sans-serif}
:root[data-spacing="wide"]{--lh:1.95; --ls:0.035em; --ws:0.14em}
html{font-size:17px} :root[data-size="s"]{font-size:15px} :root[data-size="l"]{font-size:20px} :root[data-size="xl"]{font-size:23px}

*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); line-height:var(--lh); letter-spacing:var(--ls); word-spacing:var(--ws);
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:0 80px}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--paper)}
h1,h2,h3,h4,h5{line-height:1.25; text-wrap:balance; margin:0; letter-spacing:0}
h1{font-size:clamp(1.8rem,4.6vw,2.7rem); font-weight:700} h2{font-size:1.45rem; font-weight:700} h3{font-size:1.08rem; font-weight:600} h4{font-size:0.95rem; font-weight:700}
p{margin:0; max-width:66ch}
b,strong{font-weight:700}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
code{font-family:var(--f-mono); font-size:0.92em; background:color-mix(in srgb,var(--ink) 7%,transparent); padding:1px 6px; border-radius:6px; word-spacing:0; overflow-wrap:anywhere; letter-spacing:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums; word-spacing:0; letter-spacing:0}
.muted{color:var(--muted)} .small{font-size:0.86rem}
[hidden]{display:none!important}
ul.l,ol.l{margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:6px} ul.l li,ol.l li{max-width:66ch}
ul.l li::marker,ol.l li::marker{color:var(--p); font-weight:700}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--paper); margin-inline:-4px; padding:10px 4px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; border-bottom:2px solid var(--line)}
.brand{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; font-weight:700; padding:4px 6px; border-radius:10px}
.brand .mark{display:grid; grid-template-columns:repeat(2,10px); gap:3px}
.brand .mark i{width:10px; height:10px; border-radius:3px; display:block}
.brand span{display:flex; flex-direction:column; line-height:1.2}
.brand small{font-weight:500; color:var(--muted); font-size:0.76rem}
.nav{display:flex; gap:4px; overflow-x:auto; flex:1; min-width:0; padding:2px; scrollbar-width:thin}
.nav button{all:unset; box-sizing:border-box; cursor:pointer; flex:none; font-size:0.84rem; font-weight:600; padding:6px 11px; border-radius:99px; border:2px solid transparent; white-space:nowrap}
.nav button:hover{border-color:var(--line)}
.nav button:focus-visible{outline:3px solid var(--accent)}
.nav button[aria-current="page"]{background:var(--q,var(--accent)); color:var(--card); border-color:var(--q,var(--accent))}
.nav button[data-q="cs"]{--q:var(--cs)} .nav button[data-q="ict"]{--q:var(--ict)}
.tools{display:flex; gap:6px; margin-left:auto; align-items:center}
.search{position:relative; flex:0 1 200px; min-width:140px}
.search input{width:100%; min-height:40px; padding:6px 12px; border-radius:12px; border:2px solid var(--line); background:var(--card); font-size:0.92rem}
.search input:focus{border-color:var(--accent); outline:none}
.qres{position:absolute; top:calc(100% + 6px); right:0; left:0; min-width:min(360px,calc(100vw - 32px)); background:var(--card); border:2px solid var(--line); border-radius:14px; box-shadow:0 12px 40px color-mix(in srgb,var(--ink) 25%,transparent); z-index:40; max-height:60vh; overflow:auto; padding:6px; display:flex; flex-direction:column; gap:2px}
.qres button{all:unset; box-sizing:border-box; display:flex; gap:10px; align-items:center; width:100%; padding:8px 10px; border-radius:10px; cursor:pointer; min-width:0}
.qres button[aria-selected="true"],.qres button:hover{background:color-mix(in srgb,var(--accent) 12%,var(--card))}
.qres .qk{font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--on-colour); background:var(--c,var(--accent)); padding:2px 8px; border-radius:99px; flex:none}
.qres .qt{display:flex; flex-direction:column; min-width:0} .qres .ql{font-weight:600; font-size:0.92rem} .qres .qs{font-size:0.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qres .qnone{padding:10px; color:var(--muted); font-size:0.9rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 14px; border-radius:12px; border:2px solid var(--line); background:var(--card); cursor:pointer; font-weight:600; font-size:0.92rem; text-decoration:none; transition:border-color .15s, background .15s; text-align:center}
.btn:hover{border-color:var(--p)}
.btn.primary{background:var(--p); border-color:var(--p); color:var(--on-colour)}
.btn.primary:hover{filter:brightness(1.07)}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.btn.small{min-height:38px; padding:4px 10px; font-size:0.84rem}
.btn.sw[aria-pressed="true"],.btn[aria-pressed="true"]{border-color:var(--p); background:color-mix(in srgb,var(--p) 14%,var(--card)); font-weight:700}
.topbar .btn{min-height:40px; padding:6px 12px; font-size:0.86rem}
.topbar .btn:hover{border-color:var(--accent)}
#qBtn{display:none}
@media (max-width:760px){
  .topbar{padding:6px 4px; gap:6px 8px}
  .nav{order:3; flex-basis:100%; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .nav::after{content:""; flex:none; width:24px}
  .nav button{font-size:0.8rem; padding:5px 10px}
  .search{order:4; flex-basis:100%; display:none} body.qopen .search{display:block} #qBtn{display:inline-flex}
  .brand small{display:none}
}

/* settings */
.settings{margin:12px auto 0; max-width:1180px; background:var(--card); border:2px solid var(--line); border-radius:16px; padding:16px; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.setting{display:flex; flex-direction:column; gap:8px; min-width:0}
.setting > span{font-weight:600; font-size:0.88rem}
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg button{min-height:40px; padding:6px 12px; border-radius:10px; border:2px solid var(--line); background:transparent; cursor:pointer; font-size:0.86rem; display:inline-flex; align-items:center; gap:6px}
.seg button[aria-pressed="true"]{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--card)); font-weight:700}
.swatch{width:16px; height:16px; border-radius:50%; display:inline-block; border:1px solid var(--line); flex:none}

/* ---------- shell ---------- */
.wrap{max-width:1180px; margin:0 auto; padding-top:22px; display:flex; flex-direction:column; gap:40px}
.view{display:flex; flex-direction:column; gap:32px; min-width:0}
.sec{display:flex; flex-direction:column; gap:16px; min-width:0}
.sechead{display:flex; flex-direction:column; gap:6px; max-width:780px}
.sechead p{color:var(--muted); font-size:1.02rem}
.eyebrow{font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted)}
.grid2{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); align-items:start}
.grid3{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); align-items:start}
.card{background:var(--card); border:2px solid var(--line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.qbadge{display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:99px; background:var(--qc); color:var(--on-colour); font-size:0.76rem; font-weight:700; white-space:nowrap}
.qbadge.cs{--qc:var(--cs)} .qbadge.ict{--qc:var(--ict)}
.ppill{display:inline-flex; align-items:center; gap:6px; padding:1px 10px; border-radius:99px; font-size:0.76rem; font-weight:700; color:var(--pc); background:color-mix(in srgb,var(--pc) 13%,transparent); border:2px solid color-mix(in srgb,var(--pc) 45%,transparent); white-space:nowrap}
.ppill.p1{--pc:var(--p1)} .ppill.p2{--pc:var(--p2)} .ppill.p3{--pc:var(--p3)} .ppill.p23{--pc:var(--p3)}
.tag{display:inline-block; padding:1px 10px; border-radius:99px; font-size:0.8rem; font-weight:700; background:color-mix(in srgb,var(--ink) 9%,transparent)}
.tag.ok{background:var(--ok-bg); color:var(--ok)} .tag.bad{background:var(--bad-bg); color:var(--bad)} .tag.warnc{background:var(--mid-bg); color:var(--mid)}
.yes{color:var(--ok); font-weight:700} .no{color:var(--bad); font-weight:700}

/* callouts */
.co{border:2px solid var(--fg); background:var(--bg); border-radius:14px; padding:12px 16px; display:flex; flex-direction:column; gap:6px; max-width:76ch; min-width:0}
.co .colbl{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:0.78rem; color:var(--fg); text-transform:uppercase; letter-spacing:0.07em}
.co .colbl i{display:grid; place-items:center; min-width:24px; height:24px; padding:0 5px; border-radius:99px; background:var(--fg); color:var(--bg); font-style:normal; font-size:0.74rem; letter-spacing:0}
.co.why{--fg:var(--why); --bg:var(--why-bg)} .co.eg{--fg:var(--eg); --bg:var(--eg-bg)} .co.warn{--fg:var(--warn); --bg:var(--warn-bg)} .co.teach{--fg:var(--teach); --bg:var(--teach-bg)}
.co.key{--fg:var(--p); --bg:color-mix(in srgb,var(--p) 10%,var(--card))}
.co p{max-width:none}
.co pre{margin:0; white-space:pre-wrap; font-family:inherit}

/* tables */
.scrollx{overflow-x:auto; max-width:100%; min-width:0}
.tt{border-collapse:separate; border-spacing:0; width:100%; min-width:min(100%,420px); font-size:0.94rem; border:2px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card)}
.tt caption{caption-side:top; text-align:left; font-weight:700; padding:0 0 6px; color:var(--p)}
.tt th{background:color-mix(in srgb,var(--p) 12%,var(--card)); text-align:left; font-weight:700; padding:8px 12px; border-bottom:2px solid var(--line); vertical-align:bottom}
.tt td{padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.tt tr:last-child td{border-bottom:0}
.tt tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.tt.center td,.tt.center th{text-align:center}
.tt tr.hot td{background:color-mix(in srgb,var(--p) 18%,var(--card))!important; font-weight:700}
.tt tr.dim td{opacity:.45}
.tt td.mono,.tt th.mono{font-family:var(--f-mono)}

/* code */
.codewrap{display:flex; flex-direction:column; gap:0; min-width:0; border:2px solid var(--line); border-radius:12px; overflow:hidden; background:var(--code-bg)}
.codetabs{display:flex; flex-wrap:wrap; gap:4px; padding:6px 6px 0; border-bottom:2px solid var(--line); background:var(--card)}
.codetabs button{all:unset; cursor:pointer; padding:5px 12px; border-radius:8px 8px 0 0; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); border:2px solid transparent; border-bottom:0; margin-bottom:-2px}
.codetabs button[aria-selected="true"]{color:var(--ink); background:var(--code-bg); border-color:var(--line)}
.codetabs button:focus-visible{outline:3px solid var(--p)}
.codebox{margin:0; padding:12px 14px; font-family:var(--f-mono); font-size:0.92rem; line-height:1.6; overflow-x:auto; word-spacing:0; letter-spacing:0; white-space:pre; tab-size:4; background:var(--code-bg)}
.codebox .ln{display:inline-block; width:2.2em; color:var(--muted); user-select:none}
.codebox .hl{background:color-mix(in srgb,var(--p) 22%,transparent); font-weight:700; border-radius:3px}
.codebox .cm{color:var(--muted); font-style:italic}
.codebox .kw{color:var(--p2); font-weight:700}
.codebox .st{color:var(--pv3)}

/* ---------- toys (interactive widgets) ---------- */
.toy{background:var(--card); border:2px dashed var(--p); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:14px; min-width:0}
.toy > header{display:flex; align-items:flex-start; gap:10px}
.toy > header i{display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px; background:var(--p); color:var(--on-colour); font-style:normal; font-weight:700; font-size:0.85rem}
.toy > header div{display:flex; flex-direction:column; gap:2px; min-width:0}
.toy > header p{color:var(--muted); font-size:0.92rem}
.toy .tbody{display:flex; flex-direction:column; gap:14px; min-width:0}
.toyerr{color:var(--bad); font-weight:600}
@media (max-width:560px){ .toy{padding:12px} }
.toyrow{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.stack{display:flex; flex-direction:column; gap:6px; min-width:0}
.grow{flex:1; min-width:0}
.f{display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:0.9rem; min-width:0}
.f.inline{flex-direction:row; align-items:center; flex-wrap:wrap}
input[type=text],input[type=number],input[type=search],select,textarea{min-height:46px; padding:8px 12px; border-radius:12px; border:2px solid var(--line); background:var(--paper); font-size:1.02rem; width:100%; font-weight:400}
input:focus,select:focus,textarea:focus{border-color:var(--p); outline:none}
.f.inline select,.f.inline input{width:auto}
textarea{min-height:160px; resize:vertical; line-height:1.5; font-family:var(--f-mono); font-size:0.92rem}
input[type=range]{width:100%; accent-color:var(--p); min-height:32px}
input[type=checkbox],input[type=radio]{accent-color:var(--p); width:20px; height:20px}
.fields2{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.split2{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); align-items:start}
.eqline{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-weight:600}
.chip{display:inline-flex; align-items:center; justify-content:center; min-width:2.2em; padding:4px 12px; border-radius:10px; font-family:var(--f-mono); font-weight:700; color:var(--on-colour); background:var(--c,var(--p)); word-spacing:0}
.chip.soft{background:color-mix(in srgb,var(--c,var(--p)) 13%,var(--card)); color:var(--ink); border:2px solid var(--c,var(--p))}
.op{color:var(--muted); font-weight:700}
.stats{display:flex; flex-wrap:wrap; gap:10px}
.stat{display:flex; flex-direction:column; padding:10px 14px; border-radius:12px; background:color-mix(in srgb,var(--p) 8%,var(--card)); border:2px solid color-mix(in srgb,var(--p) 38%,var(--line)); min-width:120px; flex:1 1 120px}
.stat span{font-size:0.78rem; color:var(--muted); font-weight:600}
.stat b{font-size:1.35rem; font-family:var(--f-mono); overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.bigval{font-size:2.4rem; font-weight:700; line-height:1; font-family:var(--f-mono)}
.say{font-size:1rem; padding:12px 14px; border-radius:12px; background:color-mix(in srgb,var(--p) 8%,var(--card)); border:2px solid color-mix(in srgb,var(--p) 35%,var(--line)); max-width:none}
.say.ok{background:var(--ok-bg); border-color:var(--ok)} .say.bad{background:var(--bad-bg); border-color:var(--bad)} .say.mid{background:var(--mid-bg); border-color:var(--mid)}
.bits{font-family:var(--f-mono); letter-spacing:0.08em}
.cols8{display:grid; grid-template-columns:repeat(8,minmax(30px,1fr)); gap:5px; min-width:290px}
.ph{text-align:center; font-weight:700; font-size:0.8rem; padding:3px 0; border-radius:8px; color:var(--on-colour); background:var(--c); font-family:var(--f-mono)}
.bit{all:unset; box-sizing:border-box; aspect-ratio:1/1.05; max-width:100%; border-radius:12px; border:3px solid var(--c,var(--p)); background:color-mix(in srgb,var(--c,var(--p)) 7%,var(--card)); color:var(--muted); font-family:var(--f-mono); font-weight:700; font-size:1.5rem; cursor:pointer; display:grid; place-items:center; text-align:center}
.bit.on{background:var(--c,var(--p)); color:var(--on-colour)}
.bit:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.bit.lost{opacity:.35; border-style:dashed}
.cells{display:flex; flex-wrap:wrap; gap:6px}
.cell{display:flex; flex-direction:column; align-items:center; min-width:48px; padding:6px 8px; border-radius:10px; border:2px solid var(--line); font-family:var(--f-mono); font-weight:700; font-size:1.05rem; background:var(--card); transition:opacity .2s, background .2s}
.cell small{font-size:0.7rem; color:var(--muted); font-weight:400}
.cell.now{border-color:var(--p); background:color-mix(in srgb,var(--p) 20%,var(--card))}
.cell.done{opacity:.6} .cell.gone{opacity:.25} .cell.found{border-color:var(--ok); background:var(--ok-bg)}
.bars{display:flex; gap:8px; align-items:flex-end; height:170px; padding:8px; border-radius:12px; background:var(--paper); border:2px solid var(--line)}
.barw{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; min-width:0}
.bar{width:100%; max-width:52px; border-radius:8px 8px 4px 4px; background:color-mix(in srgb,var(--p) 28%,var(--card)); border:2px solid color-mix(in srgb,var(--p) 50%,var(--line)); transition:height .3s}
.bar.now{background:var(--p); border-color:var(--p)} .bar.sorted{background:var(--ok-bg); border-color:var(--ok)}
.lane{display:flex; flex-direction:column; gap:6px}
.lanel{font-size:0.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.07em}
.box{border:2px dashed var(--line); border-radius:12px; padding:8px; min-height:54px; display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start}
.pk{display:flex; flex-direction:column; padding:4px 10px; border-radius:10px; border:2px solid var(--c,var(--p)); background:color-mix(in srgb,var(--c,var(--p)) 12%,var(--card)); animation:pop .25s ease}
.pk small{font-size:0.7rem; color:var(--muted)}
@keyframes pop{from{transform:translateY(-6px); opacity:.3}to{transform:none; opacity:1}}
.log{display:flex; flex-direction:column; gap:6px}
.lg{padding:6px 12px; border-radius:10px; background:color-mix(in srgb,var(--ink) 5%,var(--card)); border:2px solid var(--line); font-size:0.94rem}
.lg.ok{border-color:color-mix(in srgb,var(--ok) 60%,var(--line)); background:var(--ok-bg)} .lg.err{background:var(--bad-bg); border-color:var(--bad)} .lg.now{border-color:var(--p); background:color-mix(in srgb,var(--p) 12%,var(--card))}
.screen{padding:10px 14px; border-radius:10px; background:var(--ink); color:var(--paper); font-family:var(--f-mono); white-space:pre-wrap; word-spacing:0; letter-spacing:0; min-height:3em; overflow-x:auto}
.choice{all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:10px; align-items:center; padding:10px 14px; border-radius:12px; border:2px solid var(--line); background:var(--paper); min-height:46px; line-height:1.4}
.choice:hover{border-color:var(--p)} .choice:focus-visible{outline:3px solid var(--p)}
.choice.right{border-color:var(--ok); background:var(--ok-bg); font-weight:700} .choice.wrong{border-color:var(--bad); background:var(--bad-bg)}
.choice[aria-pressed="true"]{border-color:var(--p); background:color-mix(in srgb,var(--p) 14%,var(--card)); font-weight:700}
.reg{border:2px solid var(--line); border-radius:12px; padding:8px 12px; display:flex; flex-direction:column; transition:background .2s; min-width:0}
.reg span{font-weight:700; font-size:0.85rem} .reg b{font-size:1.3rem; font-family:var(--f-mono)} .reg small{color:var(--muted); font-size:0.74rem}
.reg.hot{border-color:var(--p); background:color-mix(in srgb,var(--p) 16%,var(--card))}
.lamp{display:inline-block; width:22px; height:22px; border-radius:50%; background:color-mix(in srgb,var(--ink) 12%,var(--card)); border:2px solid var(--line); vertical-align:middle}
.lamp.on{background:var(--lamp); border-color:var(--lamp); box-shadow:0 0 12px var(--lamp)}
.meter{height:14px; border-radius:99px; background:var(--line); overflow:hidden}
.meter i{display:block; height:100%; background:var(--c,var(--p)); transition:width .25s}
.preview{border:2px solid var(--line); border-radius:12px; background:#FFFFFF; min-height:200px; width:100%}
.dg{display:block; width:100%; height:auto; font-family:var(--f-body)}
.dgscroll{overflow-x:auto; max-width:100%; border:2px solid var(--line); border-radius:14px; background:var(--card); padding:8px}
.dgscroll svg{min-width:520px}
.dg text{fill:var(--ink); font-size:14px; letter-spacing:0; word-spacing:0} .dg .t-small{font-size:12px; fill:var(--muted)} .dg .t-bold{font-weight:700} .dg .t-on{fill:var(--on-colour)} .dg .t-mono{font-family:var(--f-mono)}
.dg .ln{stroke:var(--muted); stroke-width:2; fill:none} .dg .dash{stroke-dasharray:5 4} .dg .box{fill:var(--card); stroke:var(--line); stroke-width:2}
.dg .fill-p{fill:var(--p)} .dg .soft-p{fill:color-mix(in srgb,var(--p) 14%,var(--card)); stroke:var(--p); stroke-width:2}
.dg .fill-cs{fill:var(--cs)} .dg .fill-ict{fill:var(--ict)} .dg .fill-p1{fill:var(--p1)} .dg .fill-p2{fill:var(--p2)} .dg .fill-p3{fill:var(--p3)}
.dg .soft-p1{fill:color-mix(in srgb,var(--p1) 14%,var(--card)); stroke:var(--p1); stroke-width:2} .dg .soft-p2{fill:color-mix(in srgb,var(--p2) 14%,var(--card)); stroke:var(--p2); stroke-width:2} .dg .soft-p3{fill:color-mix(in srgb,var(--p3) 14%,var(--card)); stroke:var(--p3); stroke-width:2}
.dg .soft-ok{fill:var(--ok-bg); stroke:var(--ok); stroke-width:2} .dg .soft-warn{fill:var(--warn-bg); stroke:var(--warn); stroke-width:2} .dg .soft-why{fill:var(--why-bg); stroke:var(--why); stroke-width:2} .dg .soft-eg{fill:var(--eg-bg); stroke:var(--eg); stroke-width:2}
.dg .st-p{stroke:var(--p)} .dg .st-ok{stroke:var(--ok)} .dg .st-warn{stroke:var(--warn)} .dg .arrowhead{fill:var(--muted)}
.dg .t-p{fill:var(--p)} .dg .t-ok{fill:var(--ok)} .dg .t-warn{fill:var(--warn)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }