@font-face{font-family:'Archivo';font-weight:500;font-style:normal;font-display:swap;src:url(/buildawebpage/assets/fonts/ab74eca5ad.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url(/buildawebpage/assets/fonts/d9e8c29fdd.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url(/buildawebpage/assets/fonts/abada6cd4c.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-weight:400;font-style:normal;font-display:swap;src:url(/buildawebpage/assets/fonts/e66067814f.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-weight:400;font-style:italic;font-display:swap;src:url(/buildawebpage/assets/fonts/fa9b900403.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-weight:500;font-style:normal;font-display:swap;src:url(/buildawebpage/assets/fonts/5613e2fc83.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-weight:500;font-style:italic;font-display:swap;src:url(/buildawebpage/assets/fonts/3d184d574e.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/buildawebpage/assets/fonts/08949f728d.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/buildawebpage/assets/fonts/01d2854474.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;src:url(/buildawebpage/assets/fonts/0d1f0b8d07.woff2) format('woff2');}
:root{
  --ground:#F1F4F3;
  --grid:#DFE6E4;
  --sheet:#FFFFFF;
  --ink:#141F1D;
  --ink-soft:#54615E;
  --ink-faint:#566662;
  --rule:#D6DEDC;
  --accent:#0D6E6B;
  --accent-soft:#E3EFEE;
  --signal:#9A5413;
  --signal-soft:#F6EBDE;
  --good:#2A7550;
  --bad:#A93A2E;
  --bad-soft:#FBE9E6;
  --key:#4B4AA8;
  --key-soft:#ECECFA;
  --shadow:0 1px 2px rgba(20,31,29,.05), 0 8px 28px -18px rgba(20,31,29,.35);
}
/*wbm:scheme*/
:root:not([data-theme="light"]){ }
:root[data-theme="light"]{ color-scheme:light; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; } }
:root[data-theme="dark"]{ color-scheme:dark; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1514;
    --grid:#182322;
    --sheet:#151F1E;
    --ink:#E7EEEC;
    --ink-soft:#9AACA8;
    --ink-faint:#8A9C98;
    --rule:#263532;
    --accent:#5AD3C6;
    --accent-soft:#12302E;
    --signal:#E0A063;
    --signal-soft:#2A2016;
    --good:#68C48F;
    --bad:#E58274;
    --bad-soft:#35191A;
    --key:#A9A8F0;
    --key-soft:#1F1F3A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0D1514;
  --grid:#182322;
  --sheet:#151F1E;
  --ink:#E7EEEC;
  --ink-soft:#9AACA8;
  --ink-faint:#8A9C98;
  --rule:#263532;
  --accent:#5AD3C6;
  --accent-soft:#12302E;
  --signal:#E0A063;
  --signal-soft:#2A2016;
  --good:#68C48F;
  --bad:#E58274;
  --bad-soft:#35191A;
  --key:#A9A8F0;
  --key-soft:#1F1F3A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{
  margin:0;
  background-color:var(--ground);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;
  color:var(--ink);
  font-family:"Newsreader", Georgia, "Times New Roman", serif;
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.ui{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;}
code,kbd,.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}
code{overflow-wrap:anywhere;}
pre code{overflow-wrap:normal;}
p,li,dd,.txt,.opt,.sym{overflow-wrap:break-word;}

/* ---------- masthead ---------- */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.lesson h2:focus,#view-roadmap h2:focus,main:focus{outline:none;}
html{scroll-padding-top:90px;}
@media (max-width:640px){ html{scroll-padding-top:16px;} }
.skip-link{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--accent); color:var(--sheet); font:600 14px "Archivo",sans-serif; padding:10px 16px; border-radius:3px; text-decoration:none;}
.skip-link:focus{left:12px; outline:2px solid var(--ink); outline-offset:2px;}
.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--sheet);
  position:sticky; top:0; z-index:40;
}
.masthead-in{
  max-width:1240px; margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:baseline; gap:12px; margin-right:auto;}
.brand .mark{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent);
  padding:3px 7px; border-radius:2px;
}
.brand h1{font-size:19px; margin:0; font-weight:700; letter-spacing:-.01em;}
.brand .sub{font-size:12px; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace;}
@media (max-width:640px){ .masthead{position:static;} .masthead-in{padding:10px 16px; gap:10px;} .brand .sub{display:none;} }
.progress-wrap{display:flex; align-items:center; gap:10px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-soft); letter-spacing:.06em;}
.bar{width:130px; height:6px; background:var(--rule); border-radius:99px; overflow:hidden;}
.bar span{display:block; height:100%; width:0%; background:var(--accent); transition:width .4s ease;}
.ghost-btn{
  font-family:"Archivo",sans-serif; font-size:12px; font-weight:600; letter-spacing:.04em;
  background:transparent; color:var(--ink-soft); border:1px solid var(--rule);
  padding:6px 11px; border-radius:3px; cursor:pointer;
}
.ghost-btn:hover{border-color:var(--accent); color:var(--accent);}
.ghost-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ---------- shell ---------- */
.shell{max-width:1240px; margin:0 auto; padding:0 22px 90px; display:grid; grid-template-columns:274px minmax(0,1fr); gap:34px; align-items:start;}
@media (max-width:940px){ .shell{grid-template-columns:minmax(0,1fr); gap:18px;} }
.shell > *{min-width:0;}

/* ---------- index rail ---------- */
.rail{position:sticky; top:76px; max-height:calc(100vh - 96px); overflow:auto; padding:18px 0 30px; }
@media (max-width:940px){ .rail{position:static; max-height:none; padding-top:14px;} }
.rail-title{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 12px; display:flex; justify-content:space-between; align-items:center;
}
.rail-title button{background:none;border:none;color:var(--ink-faint);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.ph-group{border-top:1px solid var(--rule);}
.ph-head{
  width:100%; text-align:left; background:none; border:0; padding:11px 4px 11px 0; cursor:pointer;
  display:grid; grid-template-columns:26px 1fr auto; align-items:baseline; gap:8px; color:var(--ink);
}
.ph-head:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.ph-num{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent); font-weight:600;}
.ph-name{font-family:"Archivo",sans-serif; font-size:13.5px; font-weight:600; line-height:1.3;}
.ph-meta{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.ph-mods{display:none; padding:0 0 10px 26px;}
.ph-group.open .ph-mods{display:block;}
.mod-link{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--ink-soft);
  font-family:"Archivo",sans-serif; font-size:12.5px; line-height:1.35; padding:5px 6px 5px 0;
  display:grid; grid-template-columns:14px 30px 1fr; gap:7px; align-items:baseline; border-radius:3px;
}
.mod-link:hover{color:var(--ink);}
.mod-link:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.mod-link.active{color:var(--accent); font-weight:600;}
.pref-link{width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--ink-soft); font-family:"Archivo",sans-serif; font-size:12.5px; line-height:1.35; padding:5px 6px 5px 0; margin-bottom:8px; border-radius:3px;}
.pref-link:hover{color:var(--ink);}
.pref-link:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.pref-link.active{color:var(--accent); font-weight:600;}
.mod-link .n{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.tick{
  width:13px;height:13px;border:1px solid var(--rule);border-radius:2px;display:inline-block;
  position:relative; top:2px; flex:none;
}
.done .tick{background:var(--accent); border-color:var(--accent);}
.done .tick::after{content:"";position:absolute;left:3.5px;top:1px;width:4px;height:7px;border:solid var(--sheet);border-width:0 1.6px 1.6px 0;transform:rotate(42deg);}

/* ---------- sheet ---------- */
.sheet{
  background:var(--sheet); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow);
  padding:38px 42px 46px; margin-top:18px;
}
@media (max-width:640px){ .sheet{padding:26px 20px 34px;} }
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px;
}
.sheet h2{font-size:clamp(26px,3.4vw,38px); line-height:1.12; margin:0 0 14px; letter-spacing:-.02em; text-wrap:balance;}
.sheet h3{font-size:20px; margin:38px 0 10px; letter-spacing:-.01em; text-wrap:balance;}
.sheet h4{font-size:15px; margin:24px 0 6px; letter-spacing:.01em;}
.lede{font-size:20px; color:var(--ink-soft); max-width:62ch; margin:0 0 8px;}
.sheet p{max-width:66ch;}
.sheet li{max-width:62ch;}
hr.rule{border:0; border-top:1px solid var(--rule); margin:34px 0;}

/* ---------- icon system ---------- */
.ic{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-.14em;}
.eyebrow .ic{width:12px; height:12px; vertical-align:-1px;}
.ic-term{color:var(--accent); width:1.05em; height:1.05em; margin-right:.3em;}
.callout.co{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:start; border-left:4px solid var(--c); background:var(--cs); border-radius:0 6px 6px 0;}
.callout.co .label{color:var(--c); font-weight:600;}
.co-type{font-weight:700;}
.co-badge{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--sheet); color:var(--c); border:2px solid var(--c);}
.co-badge .ic{width:24px; height:24px;}
.co-body p:last-child{margin-bottom:0;}
.co-crit{--c:var(--bad); --cs:var(--bad-soft);}
.co-crit .co-badge{background:var(--bad); color:var(--sheet); border-color:var(--bad); width:48px; height:48px; margin:-2px;}
.co-crit .co-badge .ic{width:30px; height:30px; stroke-width:3;}
.co-note{--c:var(--signal); --cs:var(--signal-soft);}
.co-tip{--c:var(--accent); --cs:var(--accent-soft);}
.co-key{--c:var(--key); --cs:var(--key-soft);}
.co-try{--c:var(--ink); --cs:var(--ground);}
.co-key .big{font-size:20px; font-weight:500; line-height:1.4;}
@media (max-width:480px){
  .callout.co{display:block; padding:14px 14px;}
  .co-badge{float:left; margin:0 10px 6px 0; width:34px; height:34px;} .co-badge .ic{width:19px; height:19px;}
  .co-crit .co-badge{width:38px; height:38px; margin:0 10px 6px 0;} .co-crit .co-badge .ic{width:23px; height:23px;}
  .callout.co .label{min-height:34px; padding-top:3px; margin-bottom:8px;}
  .co-body::after{content:""; display:block; clear:both;}
}
.sheet h3.h-try{display:flex; align-items:center; gap:12px;}
.try-badge{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--ink); color:var(--ink);}
.try-badge .ic{width:20px; height:20px;}
/* round-trip diagram (0.1) */
.rtfig{border:1px solid var(--rule); border-radius:6px; padding:18px 14px 12px; margin:22px 0; background:var(--sheet);}
.rtflow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:6px;}
.rtnode{text-align:center;}
.rtnode .circ{width:66px; height:66px; border-radius:50%; margin:0 auto 6px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);}
.rtnode .circ .ic{width:34px; height:34px; stroke-width:1.6;}
.rtnode b{display:block; font:600 14px "Archivo",sans-serif;}
.rtnode small{display:block; font-size:13px; color:var(--ink-soft); line-height:1.35;}
.rtarrows{display:grid; gap:10px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-soft); text-align:center; min-width:92px;}
.rtarrows span{display:block; border-bottom:2px solid var(--accent); position:relative; padding-bottom:3px;}
.rtarrows span::after{content:""; position:absolute; right:-2px; bottom:-5px; border:4px solid transparent; border-left:7px solid var(--accent);}
.rtarrows span.back{border-color:var(--signal);}
.rtarrows span.back::after{right:auto; left:-2px; border-left:4px solid transparent; border-right:7px solid var(--signal);}
.rtfig figcaption{font-size:14px; color:var(--ink-soft); text-align:center; margin:12px auto 0;}
@media (max-width:600px){
  .rtflow{grid-template-columns:1fr;}
  .rtarrows{grid-template-columns:1fr 1fr; min-width:0; margin:2px 10px;}
  .rtarrows span{border-bottom:0; border-left:2px solid var(--accent); padding:0 0 0 8px; min-height:34px; text-align:left;}
  .rtarrows span::after{right:auto; left:-6px; bottom:-4px; border:5px solid transparent; border-top:7px solid var(--accent); border-bottom:0;}
  .rtarrows span.back{border-left-color:var(--signal);}
  .rtarrows span.back::after{left:-6px; bottom:auto; top:-4px; border:5px solid transparent; border-bottom:7px solid var(--signal); border-top:0;}
}
/* icon key (roadmap) */
.ikey{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:10px; margin:14px 0 0;}
.krow{display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px; border:1px solid var(--rule); border-radius:6px; padding:10px 12px; background:var(--sheet);}
.krow .mini{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--c); color:var(--c); background:var(--cs);}
.krow .mini .ic{width:20px; height:20px;}
.krow.k-crit .mini{background:var(--bad); color:var(--sheet);} .krow.k-crit .mini .ic{stroke-width:3;}
.krow.k-concept .mini{border:0; background:var(--accent-soft); color:var(--accent);}
.krow b{font:600 14px "Archivo",sans-serif; display:block;}
.krow span{font-size:14.5px; color:var(--ink-soft); line-height:1.45; display:block;}
.krow.k-crit{--c:var(--bad); --cs:var(--bad-soft);} .krow.k-note{--c:var(--signal); --cs:var(--signal-soft);}
.krow.k-tip{--c:var(--accent); --cs:var(--accent-soft);} .krow.k-key{--c:var(--key); --cs:var(--key-soft);} .krow.k-try{--c:var(--ink); --cs:var(--ground);}
.krow .kt{font-style:normal; white-space:nowrap;}
.ikey-foot{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; font-size:15px; color:var(--ink-soft);}

/* ---------- print-only / screen-only (book export) ---------- */
.print-only{display:none;}
@media print{ .print-only{display:block !important;} .screen-only{display:none !important;} }
/* ---------- practice terminal (5.1) ---------- */
.ts-miss{margin:12px 16px 10px; padding-left:22px; font-size:15.5px;}
.ts-miss li{margin:3px 0; color:var(--ink-soft);}
.ts-miss li.done{color:var(--good);}
.ts-miss li.done::marker{content:"✓  "; font-weight:700;}
.tsim{margin:0 16px 10px; background:#0F1716; color:#D8E6E3; border-radius:6px; padding:12px 14px; font-family:"IBM Plex Mono",monospace; font-size:13.5px; line-height:1.55; border:1px solid #263532; cursor:text;}
.tsim-out{max-height:260px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere;}
.tsim-out .tp, .tsim-prompt{color:#5AD3C6;}
.tsim-out .dir{color:#8FC1FF;}
.tsim-out .err{color:#F0A08F;}
.tsim-out .note{color:#9AACA8;}
.tsim-line{display:flex; gap:8px; align-items:baseline; margin:0;}
.tsim-prompt{flex:none; white-space:nowrap; max-width:60%; overflow:hidden; text-overflow:ellipsis;}
.tsim-line input{flex:1; min-width:0; background:transparent; border:0; outline:0; color:inherit; font:inherit; padding:2px 0; caret-color:#5AD3C6;}
.tsim:focus-within{box-shadow:0 0 0 2px var(--accent);}
.ts-keys{font-size:14px; color:var(--ink-soft);}
@media (max-width:480px){ .tsim-line input{font-size:16px;} .tsim{font-size:12.5px;} }
/* ---------- git three areas (5.2) ---------- */
.gs-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 16px;}
.gs-col{border:1px solid var(--rule); border-radius:6px; padding:10px 10px 12px; background:var(--sheet); min-width:0;}
.gs-col h5{margin:0; font:600 14px "Archivo",sans-serif;}
.gs-sub{margin:0 0 8px; font-size:13px; color:var(--ink-faint);}
.gs-chip{display:block; font-family:"IBM Plex Mono",monospace; font-size:12.5px; padding:4px 8px; border-radius:4px; margin-top:6px; background:var(--ground); border:1px solid var(--rule); overflow-wrap:anywhere;}
.gs-chip.mod{border-color:var(--bad); color:var(--bad);}
.gs-chip.mod::after{content:" · changed";}
.gs-chip.stg{border-color:var(--good); color:var(--good);}
.gs-chip.head{border-color:var(--accent); color:var(--accent); font-weight:600;}
.gs-chip.old{color:var(--ink-soft);}
.gs-chip.none{color:var(--ink-faint); border-style:dashed; background:transparent;}
.gs-out{margin:0 16px 14px; min-height:5.5em; white-space:pre-wrap;}
@media (max-width:600px){ .gs-cols{grid-template-columns:1fr;} }
/* ---------- branch graph (5.3) ---------- */
.br-graph{margin:12px 16px; overflow-x:auto; border:1px solid var(--rule); border-radius:6px; background:var(--sheet); padding:4px 0;}
.br-graph svg{display:block;}
.br-edge{stroke-width:3;} .br-edge.l0{stroke:var(--accent);} .br-edge.l1{stroke:var(--key);}
.br-dot{stroke:var(--sheet); stroke-width:2;} .br-dot.l0{fill:var(--accent);} .br-dot.l1{fill:var(--key);}
.br-dot.k-team{fill:var(--sheet); stroke:var(--accent); stroke-width:3;}
.br-dot.k-merge{stroke:var(--accent); stroke-width:3; fill:var(--sheet);}
.br-name{font:600 12px "IBM Plex Mono",monospace;} .br-name.l0{fill:var(--accent);} .br-name.l1{fill:var(--key);}
.br-head{font:700 10px "IBM Plex Mono",monospace; fill:var(--ink); letter-spacing:.08em;}
.br-out{margin:0 16px 14px; min-height:6.5em; white-space:pre-wrap;}
/* ---------- semver explorer (5.4) ---------- */
.sv-list{display:flex; flex-wrap:wrap; gap:8px; margin:10px 16px;}
.sv-chip{font:500 14px "IBM Plex Mono",monospace; padding:6px 10px; border-radius:4px; border:1px solid var(--rule);}
.sv-chip.ok{color:var(--good); border-color:var(--good); background:color-mix(in srgb, var(--good) 10%, transparent);}
.sv-chip.no{color:var(--ink-faint); text-decoration:line-through;}
.sv-why{margin:4px 16px 16px; font-size:16px;}
#sv-ranges button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent);}
/* ---------- bundler demo (5.5) ---------- */
.arr-ops .tgl input{width:34px; padding:0; border:0; border-radius:99px; background:var(--rule);}
.arr-ops .tgl input:checked{background:var(--accent);}
#bd-ops{gap:18px; align-items:center;}
.bd-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 16px;}
.bd-col{border:1px solid var(--rule); border-radius:6px; padding:10px 12px; background:var(--sheet); min-width:0;}
.bd-col h5{margin:0 0 6px; font:600 14px "Archivo",sans-serif;}
.bd-col ul{list-style:none; margin:0; padding:0; font:13px/1.6 "IBM Plex Mono",monospace; overflow-wrap:anywhere;}
.bd-col li{padding:3px 0; border-top:1px dashed var(--rule);}
.bd-col li:first-child{border-top:0;}
.bd-dim{color:var(--ink-faint); text-decoration:line-through;}
.bd-js{color:var(--accent); font-weight:600;}
@media (max-width:600px){ .bd-cols{grid-template-columns:1fr;} }
/* ---------- deploy pipeline (5.6) ---------- */
.dp-steps{margin:12px 16px; padding-left:24px; font-size:15.5px;}
.dp-steps li{margin:4px 0; color:var(--ink-faint); transition:color .2s;}
.dp-steps li.run{color:var(--accent); font-weight:600;}
.dp-steps li.done{color:var(--good);}
.dp-steps li.done::marker{content:"✓  ";}
.dp-steps li.fail{color:var(--bad); font-weight:600;}
.dp-steps li.fail::marker{content:"✗  ";}
.dp-log{margin:0 16px 14px; min-height:7.5em; max-height:220px; overflow:auto; white-space:pre-wrap;}
/* ---------- stepping debugger (5.7) ---------- */
.db-wrap{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:10px; margin:12px 16px;}
.db-code{margin:0; padding:10px 0 10px 40px; background:var(--ground); border:1px solid var(--rule); border-radius:6px; font:13px/1.7 "IBM Plex Mono",monospace; overflow-x:auto; min-width:0;}
.db-code li{white-space:pre; padding-right:10px; color:var(--ink-soft);}
.db-code li::marker{color:var(--ink-faint); font-size:11px;}
.db-code li.bp::marker{color:var(--bad); font-weight:700;}
.db-code li.cur{background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--ink); font-weight:600;}
.db-code li.err{background:color-mix(in srgb, var(--bad) 18%, transparent);}
.db-side{border:1px solid var(--rule); border-radius:6px; padding:8px 12px; background:var(--sheet); min-width:0;}
.db-side h5{margin:8px 0 4px; font:600 12px "IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
.db-side h5:first-child{margin-top:0;}
.db-scope{display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; margin:0; font:13px/1.5 "IBM Plex Mono",monospace;}
.db-scope dt{color:var(--key);} .db-scope dd{margin:0; overflow-wrap:anywhere;}
.db-stack{margin:0; padding-left:20px; font:13px/1.6 "IBM Plex Mono",monospace;}
.db-stack li:first-child{font-weight:700; color:var(--accent);}
@media (max-width:700px){ .db-wrap{grid-template-columns:1fr;} }
/* ---------- redraw demo (6.1) ---------- */
.fw-modes .pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.fw-list{list-style:none; margin:0; padding:10px 16px; display:grid; gap:8px;}
.fw-list li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:10px; align-items:center;}
.fw-list .nm{font-weight:600; font-family:"Archivo",sans-serif; font-size:15px; overflow-wrap:anywhere;}
.fw-list input{font:inherit; font-size:14px; padding:6px 8px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink); min-width:0; width:100%;}
.fw-list input:focus{outline:2px solid var(--accent); outline-offset:-1px;}
@media (max-width:480px){ .fw-list input{font-size:16px;} }
/* ---------- component slicer (6.2) ---------- */
.sl-wrap{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
@media (max-width:700px){ .sl-wrap{grid-template-columns:1fr;} }
.sl-page{margin:12px; padding:8px; border:2px dashed var(--rule); border-radius:6px; background:#fff; color:#141F1D; display:grid; gap:8px; font:13px/1.3 "Archivo",sans-serif; min-width:0;}
.sl-b{border:1px dashed #B8C4C1; border-radius:4px; padding:6px 8px; min-width:0; transition:background .15s, outline-color .15s;}
.sl-head{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.sl-grow{flex:1 1 90px;}
.sl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px;}
.sl-card{display:grid; gap:5px; justify-items:start;}
.sl-img{width:100%; height:38px; border-radius:3px; background:#DFE6E4;}
.sl-nm{font-weight:600;}
.sl-btn{background:#E3EFEE;}
.sl-foot{font-size:12px; color:#54615E;}
.sl-page .hl{outline:3px solid var(--key); outline-offset:1px; background:#ECECFA;}
.sl-page.dim .sl-b:not(.hl){opacity:.9;}
.sl-side{padding:12px 14px 12px 4px;}
.sl-side h6{margin:0 0 8px; font:400 10px "IBM Plex Mono",monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);}
.sl-tree{display:grid; gap:4px;}
.sl-node{text-align:left; font:500 13px "IBM Plex Mono",monospace; padding:5px 9px; margin-left:calc(var(--d) * 14px); border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink-soft); cursor:pointer;}
.sl-node:hover{border-color:var(--key); color:var(--key);}
.sl-node[aria-pressed="true"]{border-color:var(--key); color:var(--key); background:var(--key-soft); font-weight:600;}
.sl-node:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
@media (max-width:480px){ .sl-node{margin-left:calc(var(--d) * 8px);} }
/* ---------- JSX checker (6.3) ---------- */
#jx-code{font-size:12.5px; min-height:270px;}
/* ---------- props playground (6.4) ---------- */
.pp-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:0;}
@media (max-width:700px){ .pp-wrap{grid-template-columns:1fr;} }
.pp-form{display:grid; gap:10px; padding:14px 16px; align-content:start;}
.pp-form label{display:grid; gap:4px;}
.pp-form label > span{font:400 10.5px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.pp-form input[type="text"], .pp-form input[type="number"]{border:1px solid var(--rule); border-radius:3px; padding:8px 10px; font:14px "IBM Plex Mono",monospace; background:var(--sheet); color:var(--ink); width:100%; min-width:0;}
.pp-form .pp-chk{display:flex; align-items:center; gap:9px; cursor:pointer;}
.pp-form .pp-chk input{width:16px; height:16px; accent-color:var(--accent);}
.pp-form .pp-chk span{font:14px "IBM Plex Mono",monospace; letter-spacing:0; text-transform:none; color:var(--ink);}
.pp-prev{padding:14px 16px; min-width:0;}
.pp-prev h6{margin:0 0 6px; font:400 10px "IBM Plex Mono",monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);}
.pp-code{margin:0 0 12px; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere;}
.pp-card{border:1px solid var(--rule); border-radius:6px; padding:10px 12px; background:var(--sheet); min-width:0;}
.pp-card b{display:block; font:600 15px "Archivo",sans-serif; overflow-wrap:anywhere;}
.pp-card span.pr{font:14px "IBM Plex Mono",monospace; color:var(--ink-soft);}
.pp-card em{display:inline-block; margin-left:8px; font:600 11px "Archivo",sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:1px 7px; border:1px solid var(--accent); color:var(--accent); border-radius:99px; font-style:normal;}
.pp-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; padding:0 16px 14px; min-height:8px;}
/* ---------- state demo (6.5) ---------- */
.st-read{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px 16px 4px;}
.st-box{border:1px solid var(--rule); border-radius:6px; padding:8px 10px; background:var(--sheet); min-width:0;}
.st-box h6{margin:0 0 2px; font:400 10px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.st-box b{font:700 26px "Archivo",sans-serif; font-variant-numeric:tabular-nums;}
.st-ops .pick{font-size:12px; letter-spacing:0; text-align:left; overflow-wrap:anywhere;}
@media (max-width:480px){ .st-box b{font-size:22px;} .st-box h6{letter-spacing:.06em;} }
/* ---------- keys demo (6.6) ---------- */
.ky-modes .pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.ky-list{list-style:none; margin:0; padding:10px 16px; display:grid; gap:8px;}
.ky-list li{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:10px; align-items:center;}
.ky-list .nm{font:600 15px "Archivo",sans-serif; overflow-wrap:anywhere;}
.ky-list input{font:inherit; font-size:14px; padding:6px 8px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink); min-width:0; width:100%;}
@media (max-width:480px){ .ky-list input{font-size:16px;} }
/* ---------- effect race demo (6.7) ---------- */
.ef-modes .pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.ef-read{grid-template-columns:repeat(2,minmax(0,1fr));}
.ef-read .st-box b{font-size:20px; overflow-wrap:anywhere;}
#ef-log div.bad{color:var(--bad);} #ef-log div.good{color:var(--good);}
/* ---------- router demo (6.8) ---------- */
.rt-modes .pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.rt-bar{display:flex; gap:6px; padding:10px 16px 4px;}
.rt-bar input{flex:1; min-width:0; font:14px "IBM Plex Mono",monospace; padding:7px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink);}
.rt-nav{display:flex; gap:6px; flex-wrap:wrap; padding:6px 16px 8px;}
.rt-view{margin:4px 16px 8px; padding:12px 14px; border:1px dashed var(--rule); border-radius:6px; background:var(--sheet); min-height:96px;}
.rt-view h4{margin:0 0 6px; font:600 17px "Archivo",sans-serif;}
.rt-view p{margin:0 0 8px; font-size:15.5px;}
.rt-view button.lnk{background:none; border:0; padding:0; font:inherit; color:var(--accent); text-decoration:underline; cursor:pointer;}
.rt-read{padding-top:4px;}
.rt-read .st-box b{font-size:16px; overflow-wrap:anywhere;}
.rt-read .st-box:nth-child(n+2) b{font-size:24px;}
@media (max-width:480px){ .rt-bar input{font-size:16px;} .rt-read{grid-template-columns:1fr;} }
/* ---------- styling demo (6.9) ---------- */
.sx-tabs .pick[aria-pressed="true"], .sx-modes .pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.sx-p[hidden]{display:none;}
.sx-code{margin:10px 16px; font-size:12.5px; overflow-x:auto;}
.sx-stage{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:4px 16px 10px;}
.sx-stage1{grid-template-columns:1fr; justify-items:start; padding:14px 16px;}
.sx-comp{border:1px solid var(--rule); border-radius:6px; padding:10px 12px; background:#fff; color:#141F1D; min-width:0;}
.sx-comp h6{margin:0 0 4px; font:400 10px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.sx-comp .sx-title{margin:0 0 4px; font:700 18px "Archivo",sans-serif;}
.sx-comp code{font-size:11.5px; color:#54615E; overflow-wrap:anywhere;}
.sx-chips{display:flex; flex-wrap:wrap; gap:6px; padding:12px 16px 0;}
.sx-chips .pick{font-size:12px; letter-spacing:0;}
.sx-chips .pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.sx-btn{font:inherit; font-size:15px; background:#fff; color:#141F1D; border:1px solid #999; padding:2px 8px; border-radius:2px; cursor:default;}
.sx-out{padding:0 16px 6px;}
.sx-out h6{margin:8px 0 2px; font:400 10px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.sx-out pre{margin:4px 0 8px; font-size:12.5px; white-space:pre-wrap; overflow-wrap:anywhere; min-height:1.8em;}
@media (max-width:480px){ .sx-stage{grid-template-columns:1fr;} }
/* ---------- type checker demo (6.10) ---------- */
.tsc-schema{margin:0; border-radius:0; border-left:3px solid var(--key); font-size:12.5px;}
#tsc-code{font-size:12.5px; min-height:190px;}
/* ---------- backend picker (7.1) ---------- */
.nb{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.nb-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.nb-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.nb-item{display:flex; gap:11px; align-items:flex-start; padding:10px 14px; border-bottom:1px solid var(--rule); cursor:pointer; font-size:16px;}
.nb-item input{margin-top:5px; flex:none;}
.nb-out{padding:14px 16px;}
.nb-out h6{margin:0 0 6px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.nb-out ul{margin:0 0 12px; padding-left:20px;}
.nb-out li{margin:3px 0; font-size:15.5px;}
/* ---------- node terminal (7.2) ---------- */
.nd{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.nd-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.nd-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.nd-picks{display:flex; gap:8px; flex-wrap:wrap;}
.nd-pick,.nd-run{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer; text-align:left;}
.nd-pick:hover,.nd-run:hover{border-color:var(--accent); color:var(--accent);}
.nd-pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.nd-code,.nd-out{margin:0; border-radius:0; border-left:3px solid var(--key); font-size:12.5px;}
.nd-out{border-left-color:var(--rule); min-height:56px; white-space:pre-wrap;}
.nd-runs{display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-top:1px solid var(--rule);}
.nd .sv-why{margin:10px 16px 14px;}
/* ---------- API simulator (7.3) ---------- */
.ap{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.ap-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.ap-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.ap-presets{display:flex; gap:8px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--rule);}
.ap-pre{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer;}
.ap-pre:hover{border-color:var(--accent); color:var(--accent);}
.ap-form{display:grid; gap:10px; padding:12px 14px;}
.ap-form label{display:grid; gap:4px; font-size:13px; color:var(--ink-soft);}
.ap-form input,.ap-form select,.ap-form textarea{font-family:"IBM Plex Mono",monospace; font-size:13px; padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink);}
.ap-form button{justify-self:start;}
.ap-status{margin:0; padding:10px 14px; border-top:1px solid var(--rule); font-family:"IBM Plex Mono",monospace; font-size:13px;}
.ap-status.good{color:var(--good);} .ap-status.bad{color:var(--bad);}
.ap-out{margin:0; border-radius:0; border-left:3px solid var(--key); font-size:12.5px; white-space:pre-wrap; min-height:56px;}
.ap .sv-why{margin:10px 16px 14px;}
/* ---------- REST builder (7.4) ---------- */
.rg{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.rg-head{padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.rg-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px;}
.rg-form{display:grid; gap:10px; padding:12px 14px;}
.rg-row{display:grid; gap:6px;}
.rg-lab{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);}
.rg-picks{display:flex; gap:8px; flex-wrap:wrap;}
.rg-pick{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer;}
.rg-pick:hover{border-color:var(--accent); color:var(--accent);}
.rg-pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.rg-chk{display:inline-flex; gap:6px; align-items:center; font-size:14px; color:var(--ink-soft); cursor:pointer;}
.rg-req{margin:0; border-radius:0; border-left:3px solid var(--key); font-size:13px; white-space:pre-wrap;}
.rg-facts{display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0; padding:12px 16px 14px; font-size:15px;}
.rg-facts dt{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); padding-top:4px;}
.rg-facts dd{margin:0;}
@media (max-width:520px){ .rg-facts{grid-template-columns:1fr;} .rg-facts dt{padding-top:6px;} }
/* ---------- tiny database (7.5) ---------- */
.sq-tables{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:14px; margin:14px 0;}
.sq-tables>div{min-width:0;}
.sq-tables .tblwrap{overflow-x:auto;}
@media (max-width:700px){ .sq-tables{grid-template-columns:minmax(0,1fr);} }
.sq-cap{margin:0 0 4px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.sq{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.sq-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.sq-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.sq-picks{display:flex; gap:8px; flex-wrap:wrap;}
.sq-pick{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer;}
.sq-pick:hover{border-color:var(--accent); color:var(--accent);}
.sq-pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.sq-sql{margin:0; border-radius:0; border-left:3px solid var(--key); font-size:12.5px;}
.sq-res{padding:12px 14px; overflow-x:auto;}
.sq .sv-why{margin:4px 16px 14px;}
/* ---------- injection lab (7.6) ---------- */
.ij{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.ij-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.ij-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.ij-picks,.ij-presets{display:flex; gap:8px; flex-wrap:wrap;}
.ij-presets{padding:12px 14px; border-bottom:1px solid var(--rule);}
.ij-pick,.ij-pre{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer;}
.ij-pick:hover,.ij-pre:hover{border-color:var(--accent); color:var(--accent);}
.ij-pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.ij-form{padding:12px 14px;}
.ij-form label{display:grid; gap:4px; font-size:13px; color:var(--ink-soft);}
.ij-form input{font-family:"IBM Plex Mono",monospace; font-size:13px; padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink);}
.ij-sql{margin:0; border-radius:0; border-left:3px solid var(--key); font-size:12.5px; white-space:pre-wrap; overflow-wrap:anywhere;}
.ij-res{margin:0; padding:10px 14px; border-top:1px solid var(--rule); font-family:"IBM Plex Mono",monospace; font-size:13px;}
.ij-res.good{color:var(--good);} .ij-res.bad{color:var(--bad);}
.ij .sv-why{margin:6px 16px 14px;}
/* ---------- login simulator (7.7) ---------- */
.au{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.au-form{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
@media (max-width:600px){ .au-form{grid-template-columns:1fr;} }
.au-form label{display:grid; gap:4px; font-size:13px; color:var(--ink-soft);}
.au-form input{font-family:"IBM Plex Mono",monospace; font-size:13px; padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink); min-width:0;}
.au-btns{display:flex; gap:8px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--rule);}
.au-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:0; border-bottom:1px solid var(--rule);}
@media (max-width:600px){ .au-grid{grid-template-columns:minmax(0,1fr);} }
.au-box{padding:12px 14px; min-width:0;}
.au-grid .au-box:first-child{border-right:1px solid var(--rule);}
@media (max-width:600px){ .au-grid .au-box:first-child{border-right:0; border-bottom:1px solid var(--rule);} }
.au-box h6{margin:0 0 8px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.au-box p{margin:0; font-family:"IBM Plex Mono",monospace; font-size:12.5px; overflow-wrap:anywhere;}
.au-db{margin:0; font-size:11.5px; white-space:pre-wrap; overflow-wrap:anywhere;}
.au-log{list-style:none; margin:0; padding:0; max-height:260px; overflow:auto;}
.au-log li{padding:6px 0; border-top:1px solid var(--rule); font-size:14px; color:var(--ink-soft);}
.au-log li:first-child{border-top:0;}
.au-log li b.good{color:var(--good);} .au-log li b.bad{color:var(--bad);}
.au-log code{font-size:12px; overflow-wrap:anywhere;}
.au .sv-why{margin:10px 16px 14px;}
/* ---------- XSS lab (7.8) ---------- */
.hz{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.hz-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.hz-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.hz-picks,.hz-presets{display:flex; gap:8px; flex-wrap:wrap;}
.hz-presets{padding:12px 14px; border-bottom:1px solid var(--rule);}
.hz-pick,.hz-pre{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer;}
.hz-pick:hover,.hz-pre:hover{border-color:var(--accent); color:var(--accent);}
.hz-pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.hz-form{padding:12px 14px; border-bottom:1px solid var(--rule);}
.hz-form label{display:grid; gap:4px; font-size:13px; color:var(--ink-soft);}
.hz-form textarea{font-family:"IBM Plex Mono",monospace; font-size:13px; padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink); resize:vertical;}
.hz-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-bottom:1px solid var(--rule);}
@media (max-width:600px){ .hz-grid{grid-template-columns:minmax(0,1fr);} }
.hz-box{padding:12px 14px; min-width:0;}
.hz-grid .hz-box:first-child{border-right:1px solid var(--rule);}
@media (max-width:600px){ .hz-grid .hz-box:first-child{border-right:0; border-bottom:1px solid var(--rule);} }
.hz-box h6{margin:0 0 8px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.hz-code{margin:0; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere;}
.hz-view{font-size:16px; overflow-wrap:anywhere;}
.hz-alert{border:2px solid var(--bad); border-radius:3px; padding:8px 10px; margin-top:8px; font-size:14px; color:var(--ink);}
.hz-alert strong{color:var(--bad);}
.hz .sv-why{margin:10px 16px 14px;}
/* ---------- stack picker (7.9) ---------- */
.sk{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.sk-q{padding:12px 14px; border-bottom:1px solid var(--rule);}
.sk-lab{margin:0 0 8px; font-family:"Archivo",sans-serif; font-weight:600; font-size:14px;}
.sk-opts{display:flex; gap:8px; flex-wrap:wrap;}
.sk-pick{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer; text-align:left;}
.sk-pick:hover{border-color:var(--accent); color:var(--accent);}
.sk-pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.sk-out{padding:14px 16px;}
.sk-out h6{margin:0 0 6px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.sk-out ul{margin:0 0 12px; padding-left:20px;}
.sk-out li{margin:3px 0; font-size:15.5px;}
.sk-foot{padding:0 14px 14px;}
/* ---------- test runner (8.1) ---------- */
.vt{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.vt-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.vt-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.vt-picks{display:flex; gap:8px; flex-wrap:wrap;}
.vt-pick{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer; text-align:left;}
.vt-pick:hover{border-color:var(--accent); color:var(--accent);}
.vt-pick[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.vt-code{margin:0; border-radius:0; border-left:3px solid var(--key); font-size:12.5px;}
.vt-bar{padding:10px 14px; border-bottom:1px solid var(--rule);}
.vt-list{list-style:none; margin:0; padding:6px 14px;}
.vt-list li{display:grid; grid-template-columns:22px 1fr; gap:8px; padding:6px 0; border-top:1px solid var(--rule); font-size:15px;}
.vt-list li:first-child{border-top:0;}
.vt-list .mk{font-family:"IBM Plex Mono",monospace; font-weight:600;}
.vt-list li.ok .mk{color:var(--good);} .vt-list li.bad .mk{color:var(--bad);}
.vt-list small{display:block; color:var(--ink-soft); font-family:"IBM Plex Mono",monospace; font-size:12px; overflow-wrap:anywhere;}
.vt-sum{margin:0; padding:10px 14px; border-top:1px solid var(--rule); font-family:"IBM Plex Mono",monospace; font-size:13px;}
.vt .sv-why{margin:8px 16px 14px;}
/* ---------- page-speed workbench (8.2) ---------- */
.spd{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.spd-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.spd-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.spd-presets{display:flex; gap:8px; flex-wrap:wrap;}
.spd-controls{padding:6px 14px 10px;}
.spd-row{display:grid; grid-template-columns:150px 1fr; gap:8px 12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule);}
@media (max-width:600px){ .spd-row{grid-template-columns:1fr;} }
.spd-lab{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.spd-opts{display:flex; gap:8px; flex-wrap:wrap;}
.spd-opts button{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer; text-align:left;}
.spd-opts button:hover{border-color:var(--accent); color:var(--accent);}
.spd-opts button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.spd-out{padding:12px 14px; display:grid; gap:10px; background:var(--ground);}
.spd-m{display:grid; grid-template-columns:48px 1fr; gap:4px 12px; align-items:center;}
.spd-m b{font-family:"IBM Plex Mono",monospace; font-size:13px;}
.spd-m .bar{height:10px; border:1px solid var(--rule); border-radius:2px; background:var(--sheet); position:relative; overflow:hidden;}
.spd-m .fill{position:absolute; inset:0 auto 0 0; background:var(--ink-faint);}
.spd-m.good .fill{background:var(--good);} .spd-m.bad .fill{background:var(--bad);} .spd-m.mid .fill{background:var(--accent);}
.spd-m span.v{grid-column:2; font-size:14px; color:var(--ink-soft);}
.spd-note{margin:0; font-size:15px;}
/* ---------- rendering strategy lab (8.3) ---------- */
.rn{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.rn-row{display:grid; grid-template-columns:150px 1fr; gap:8px 12px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--rule);}
@media (max-width:600px){ .rn-row{grid-template-columns:1fr;} }
.rn-lab{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.rn-opts{display:flex; gap:8px; flex-wrap:wrap;}
.rn-opts button{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer; text-align:left;}
.rn-opts button:hover{border-color:var(--accent); color:var(--accent);}
.rn-opts button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.rn-out{padding:12px 14px; display:grid; gap:10px; background:var(--ground);}
.rn-name{margin:0; font-family:"Archivo",sans-serif; font-weight:600; font-size:15px;}
.rn-steps{margin:0; padding-left:22px; font-size:15px; color:var(--ink-soft);}
.rn-steps li{margin:3px 0;}
.rn-facts{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:4px 12px; margin:0; font-size:14px;}
.rn-facts dt{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); padding-top:3px;}
.rn-facts dd{margin:0;}
.rn-fit{margin:0; padding:9px 12px; border:1px solid var(--rule); border-left-width:4px; border-radius:3px; background:var(--sheet); font-size:15px;}
.rn-fit.good{border-left-color:var(--good);} .rn-fit.mid{border-left-color:var(--accent);} .rn-fit.bad{border-left-color:var(--bad);}
/* ---------- pipeline simulator (8.4) ---------- */
.ci{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.ci-row{display:grid; grid-template-columns:150px 1fr; gap:8px 12px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--rule);}
@media (max-width:600px){ .ci-row{grid-template-columns:1fr;} }
.ci-lab{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.ci-opts{display:flex; gap:8px; flex-wrap:wrap;}
.ci-opts button:not(.ghost-btn){font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer; text-align:left;}
.ci-opts button:not(.ghost-btn):hover{border-color:var(--accent); color:var(--accent);}
.ci-opts button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.ci-out{padding:12px 14px; display:grid; gap:8px; background:var(--ground);}
.ci-stage{display:grid; grid-template-columns:78px 1fr; gap:4px 12px; align-items:baseline; padding:7px 10px; border:1px solid var(--rule); border-left-width:4px; border-radius:3px; background:var(--sheet); font-size:14px;}
.ci-stage b{font-family:"IBM Plex Mono",monospace; font-size:12px;}
.ci-stage.pass{border-left-color:var(--good);} .ci-stage.fail{border-left-color:var(--bad);} .ci-stage.skip{opacity:.55;} .ci-stage.wait{color:var(--ink-faint);}
.ci-live{margin:0; padding:9px 12px; border:1px solid var(--rule); border-left-width:4px; border-radius:3px; background:var(--sheet); font-size:15px;}
.ci-live.good{border-left-color:var(--good);} .ci-live.bad{border-left-color:var(--bad);} .ci-live.mid{border-left-color:var(--accent);}
/* ---------- dialog keyboard lab (8.5) ---------- */
.kd{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.kd-ctl{padding:4px 14px;}
.kd-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule); font-size:14px;}
.kd-opts{display:flex; gap:8px;}
.kd-opts button{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:6px 12px; border-radius:3px; cursor:pointer;}
.kd-opts button:hover{border-color:var(--accent); color:var(--accent);}
.kd-opts button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.kd-keys{display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.kd-out{padding:12px 14px; display:grid; gap:10px; background:var(--ground);}
.kd-page{display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
.kd-page li, .kd-dlg li{font-family:"IBM Plex Mono",monospace; font-size:12px; padding:6px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet);}
.kd-page li.on, .kd-dlg li.on{outline:3px solid var(--accent); outline-offset:1px; font-weight:600;}
.kd-dlg{margin:0; padding:10px; list-style:none; display:flex; gap:8px; flex-wrap:wrap; border:2px solid var(--ink-soft); border-radius:3px; background:var(--sheet);}
.kd-dlg .ttl{font-family:"Archivo",sans-serif; font-weight:600; font-size:13px; width:100%; padding:0; border:0; background:none;}
.kd-info{margin:0; font-size:15px;}
.kd-info.bad{color:var(--bad); font-weight:600;}
/* ---------- structure comparison (8.6) ---------- */
.ac{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.ac-row{display:grid; grid-template-columns:150px 1fr; gap:8px 12px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--rule);}
@media (max-width:600px){ .ac-row{grid-template-columns:1fr;} }
.ac-lab{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.ac-opts{display:flex; gap:8px; flex-wrap:wrap;}
.ac-opts button{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 12px; border-radius:3px; cursor:pointer; text-align:left;}
.ac-opts button:hover{border-color:var(--accent); color:var(--accent);}
.ac-opts button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.ac-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding:12px 14px; background:var(--ground);}
@media (max-width:600px){ .ac-cols{grid-template-columns:1fr;} }
.ac-col h4{margin:0 0 8px; font-family:"Archivo",sans-serif; font-size:14px;}
.ac-files{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.ac-files li{font-family:"IBM Plex Mono",monospace; font-size:12px; padding:5px 9px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink-faint);}
.ac-files li.hit{border-color:var(--bad); color:var(--bad); font-weight:600; box-shadow:inset 0 -2px 0 var(--bad);}
.ac-n{margin:8px 0 0; font-size:15px;}
.ac-why{margin:0; padding:10px 14px; border-top:1px solid var(--rule); font-size:15px;}
/* ---------- review lab (8.7) ---------- */
.cr{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.cr-lines{display:grid; background:var(--sheet);}
.cr-line{display:grid; grid-template-columns:28px minmax(0,1fr) 128px; gap:4px 10px; align-items:center; padding:5px 12px; border-bottom:1px solid var(--rule);}
@media (max-width:600px){ .cr-line{grid-template-columns:24px minmax(0,1fr);} .cr-line select{grid-column:2;} }
.cr-n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-faint);}
.cr-code{font-family:"IBM Plex Mono",monospace; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; margin:0;}
.cr-line select{font-family:"IBM Plex Mono",monospace; font-size:12px; padding:4px 6px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink-soft);}
.cr-line.ok{background:var(--ground); box-shadow:inset 3px 0 0 var(--good);}
.cr-line.miss{background:var(--ground); box-shadow:inset 3px 0 0 var(--bad);}
.cr-foot{display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; background:var(--ground); border-top:1px solid var(--rule);}
.cr-out{padding:0 14px 12px; background:var(--ground); display:grid; gap:6px;}
.cr-out p{margin:0; font-size:15px;}
.cr-out p.sc{font-weight:600;}
/* ---------- project card lab (8.8) ---------- */
.pj{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.pj-ctl{padding:4px 14px;}
.pj-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule); font-size:14px;}
.pj-row .pts{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-faint); margin-left:6px;}
.pj-opts{display:flex; gap:8px;}
.pj-opts button{font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:6px 12px; border-radius:3px; cursor:pointer;}
.pj-opts button:hover{border-color:var(--accent); color:var(--accent);}
.pj-opts button[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent);}
.pj-keys{display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.pj-out{padding:12px 14px; display:grid; gap:10px; background:var(--ground);}
.pj-card{border:1px solid var(--rule); border-radius:3px; background:var(--sheet); padding:12px 14px; display:grid; gap:6px;}
.pj-card h4{margin:0; font-family:"Archivo",sans-serif; font-size:16px;}
.pj-card p{margin:0; font-size:14px; color:var(--ink-soft);}
.pj-card .pj-empty{color:var(--ink-faint); font-style:italic;}
.pj-verdict{margin:0; padding:9px 12px; border:1px solid var(--rule); border-left-width:4px; border-radius:3px; background:var(--sheet); font-size:15px;}
.pj-verdict.good{border-left-color:var(--good);} .pj-verdict.mid{border-left-color:var(--accent);} .pj-verdict.bad{border-left-color:var(--bad);}
/* ---------- weekly routine planner (8.9) ---------- */
.rw{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.rw-keys{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.rw-left{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; margin-right:auto;}
.rw-ctl{padding:4px 14px;}
.rw-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule); font-size:14px;}
.rw-step{display:flex; gap:8px; align-items:center;}
.rw-step button{font-family:"IBM Plex Mono",monospace; font-size:14px; width:32px; height:32px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); border-radius:3px; cursor:pointer;}
.rw-step button:hover{border-color:var(--accent); color:var(--accent);}
.rw-step button:disabled{opacity:.4; cursor:not-allowed;}
.rw-step .v{font-family:"IBM Plex Mono",monospace; font-size:12px; min-width:54px; text-align:center;}
.rw-out{padding:12px 14px; display:grid; gap:8px; background:var(--ground);}
.rw-bar{display:flex; height:14px; border:1px solid var(--rule); border-radius:2px; overflow:hidden; background:var(--sheet);}
.rw-bar span{display:block; height:100%;}
.rw-bar .in{background:var(--ink-faint);} .rw-bar .do{background:var(--good);} .rw-bar .noise{background:var(--bad);}
.rw-leg{margin:0; font-size:13px; color:var(--ink-soft);}
.rw-verdict{margin:0; padding:9px 12px; border:1px solid var(--rule); border-left-width:4px; border-radius:3px; background:var(--sheet); font-size:15px;}
.rw-verdict.good{border-left-color:var(--good);} .rw-verdict.mid{border-left-color:var(--accent);} .rw-verdict.bad{border-left-color:var(--bad);}
/* ---------- security map (7.10) ---------- */
.smap{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.smap-keys{display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.smap-keys button{font-family:"Archivo",sans-serif; font-size:13px; font-weight:600; padding:7px 11px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); border-radius:3px; cursor:pointer;}
.smap-keys button:hover{border-color:var(--accent); color:var(--accent);}
.smap-keys button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--sheet);}
.smap-keys button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.smap-out{padding:14px; display:grid; gap:10px;}
.smap-out h4{margin:0; font-size:17px;}
.smap-row{display:grid; grid-template-columns:116px minmax(0,1fr); gap:4px 12px; font-size:15px;}
.smap-row b{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding-top:3px;}
.smap-row span{min-width:0;}
.smap-who{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--rule); border-radius:2px; width:max-content;}
.smap-who.You{border-color:var(--signal); color:var(--signal); background:var(--signal-soft);}
.smap-who.Host{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.smap-who.Shared{border-color:var(--key); color:var(--key); background:var(--key-soft);}
@media (max-width:640px){ .smap-row{grid-template-columns:minmax(0,1fr);} }
/* cross-references */
a.xref{color:inherit; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:3px;}
a.xref:hover{color:var(--accent);}
.xback{position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:50; font:600 14px "Archivo",sans-serif; background:var(--ink); color:var(--sheet); border:0; border-radius:999px; padding:10px 18px; box-shadow:var(--shadow); cursor:pointer; max-width:calc(100vw - 32px);}
.xback[hidden]{display:none;}
@media print{ .xback{display:none !important;} a.xref{text-decoration:none;} }
/* icons off */
.no-icons .ic, .no-icons .co-badge, .no-icons .try-badge, .no-icons .rtfig, .no-icons .ikey{display:none !important;}
.no-icons .callout.co{display:block;}
.no-icons .sheet h3.h-try{display:block;}

.statline{display:flex; flex-wrap:wrap; gap:26px; padding:18px 0 4px; border-top:1px solid var(--rule); margin-top:26px;}
.stat b{display:block; font-family:"Archivo",sans-serif; font-size:26px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.stat span{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}

/* phase cards */
.phase-card{border-top:2px solid var(--ink); padding:22px 0 8px; margin-top:30px;}
.phase-card .top{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;}
.plate{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:42px; line-height:.9; letter-spacing:-.03em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.phase-card h3{margin:0 0 4px; font-size:22px;}
.phase-card .metaphor{margin:0; color:var(--ink-soft); font-size:17px; max-width:60ch;}
.phase-card .tags{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule); color:var(--ink-soft); padding:3px 7px; border-radius:2px; white-space:nowrap;
}
.chip.k-quiz{border-color:var(--accent); color:var(--accent);}
.chip.k-build{border-color:var(--signal); color:var(--signal);}
.chip.k-explain{border-color:var(--ink-faint); color:var(--ink-faint);}
.mod-table{margin-top:18px; border-top:1px solid var(--rule);}
.mod-row{
  display:grid; grid-template-columns:46px minmax(0,1fr) 92px 74px; gap:12px; align-items:baseline;
  padding:11px 6px 11px 0; border-bottom:1px solid var(--rule); width:100%; text-align:left;
  background:none; border-left:0; border-right:0; border-top:0; cursor:pointer; color:inherit; font:inherit;
}
.mod-row:hover{background:var(--accent-soft);}
.mod-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.mod-row .num{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.mod-row .ttl{display:block; font-family:"Archivo",sans-serif; font-size:15px; font-weight:600; line-height:1.3;}
.mod-row .pro{display:block; font-size:15px; color:var(--ink-soft); line-height:1.45; margin-top:2px; max-width:64ch;}
.mod-row .dur{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; text-align:right;}
@media (max-width:720px){
  .mod-row{grid-template-columns:40px 1fr; }
  .mod-row .dur, .mod-row .kind{grid-column:2; text-align:left;}
}
.project-note{
  margin-top:14px; padding:14px 16px; border-left:3px solid var(--signal); background:var(--signal-soft);
  border-radius:0 3px 3px 0; font-size:16px;
}
.project-note b{font-family:"Archivo",sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); display:block; margin-bottom:3px;}

/* callouts */
.callout{border:1px solid var(--rule); border-left:3px solid var(--accent); background:var(--accent-soft); padding:16px 18px; border-radius:0 3px 3px 0; margin:22px 0;}
.callout p:last-child{margin-bottom:0}
.callout .label{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px;}
.callout.warn{border-left-color:var(--signal); background:var(--signal-soft);}
.callout.warn .label{color:var(--signal);}

/* analogy split */
.analogy{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin:22px 0;}
@media (max-width:640px){ .analogy{grid-template-columns:1fr;} }
.analogy .col{padding:16px 18px;}
.analogy .col+.col{border-left:1px solid var(--rule);}
@media (max-width:640px){ .analogy .col+.col{border-left:0; border-top:1px solid var(--rule);} }
.analogy h4{margin:0 0 10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace;}
.analogy dl{margin:0; display:grid; grid-template-columns:auto; gap:9px;}
.analogy dt{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px;}
.analogy dd{margin:0 0 2px; font-size:15.5px; color:var(--ink-soft); line-height:1.45;}

/* round trip */
.trip{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.trip-head{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--rule); background:var(--ground);}
.trip-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.btn{
  font-family:"Archivo",sans-serif; font-size:13px; font-weight:600; background:var(--accent); color:var(--sheet);
  border:0; padding:8px 15px; border-radius:3px; cursor:pointer; letter-spacing:.01em;
}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.btn[disabled]{opacity:.45; cursor:default; filter:none;}
.trip-steps{list-style:none; margin:0; padding:0; counter-reset:s;}
.trip-steps li{
  display:grid; grid-template-columns:34px 1fr; gap:14px; padding:13px 16px; border-bottom:1px solid var(--rule);
  opacity:.35; transition:opacity .35s ease, background .35s ease;
}
.trip-steps li:last-child{border-bottom:0}
.trip-steps li.lit{opacity:1; background:var(--accent-soft);}
.trip-steps li.seen{opacity:1;}
.trip-steps .sn{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent); font-weight:600; padding-top:3px;}
.trip-steps .sb{font-family:"Archivo",sans-serif; font-weight:600; font-size:14.5px; display:block; margin-bottom:1px;}
.trip-steps .sd{font-size:15.5px; color:var(--ink-soft); line-height:1.45;}
@media (prefers-reduced-motion:reduce){ .trip-steps li{opacity:1; transition:none;} }

/* url dissector */
.urlbox{border:1px solid var(--rule); border-radius:3px; padding:20px 18px; margin:22px 0; background:var(--ground);}
.urlline{font-family:"IBM Plex Mono",monospace; font-size:clamp(13px,2.2vw,17px); word-break:break-all; line-height:2.1;}
.useg{border:0; background:transparent; font:inherit; color:var(--ink); cursor:pointer; padding:3px 2px; border-bottom:2px solid transparent; border-radius:2px;}
.useg:hover{border-bottom-color:var(--accent); color:var(--accent);}
.useg:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.useg.on{background:var(--accent); color:var(--sheet); border-bottom-color:var(--accent);}
.uout{margin-top:14px; min-height:64px; border-top:1px dashed var(--rule); padding-top:12px;}
.uout .un{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:block;}
.uout .ut{font-family:"Archivo",sans-serif; font-weight:600; font-size:15px; margin:3px 0 3px;}
.uout .ud{font-size:16px; color:var(--ink-soft); margin:0; max-width:62ch;}

/* live editor */
.lab{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.lab-head{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.lab-head .t{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-right:auto;}
.lab-body{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:700px){ .lab-body{grid-template-columns:1fr;} }
.lab-body textarea{
  border:0; border-right:1px solid var(--rule); resize:vertical; min-height:230px; padding:14px;
  font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.65; background:var(--sheet); color:var(--ink);
  tab-size:2;
}
.lab-body textarea:focus{outline:2px solid var(--accent); outline-offset:-2px;}
@media (max-width:700px){ .lab-body textarea{border-right:0; border-bottom:1px solid var(--rule);} }
.lab-body iframe{width:100%; min-height:230px; border:0; background:#fff;}

/* glossary */
.gloss{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:0; border-top:1px solid var(--rule); margin:18px 0;}
.gloss div{border-bottom:1px solid var(--rule); padding:12px 14px 12px 0;}
.gloss dt{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; color:var(--accent); margin-bottom:2px;}
.gloss dd{margin:0; font-size:15.5px; color:var(--ink-soft); line-height:1.45;}

/* steps list */
ol.doit{counter-reset:d; list-style:none; padding:0; margin:16px 0;}
ol.doit li{counter-increment:d; position:relative; padding:9px 0 9px 30px; border-bottom:1px solid var(--rule); max-width:64ch;}
ol.doit li::before{content:counter(d); position:absolute; left:0; top:12px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent); font-weight:600;}
kbd{font-size:12.5px; border:1px solid var(--rule); border-bottom-width:2px; border-radius:3px; padding:1px 5px; background:var(--ground);}

/* quiz */
.quiz{border:2px solid var(--ink); border-radius:4px; margin:26px 0 0; overflow:hidden;}
.quiz-head{padding:16px 20px; border-bottom:1px solid var(--rule); background:var(--ground);}
.quiz-head .label{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--signal);}
.quiz-head h3{margin:4px 0 0; font-size:20px;}
.q{padding:20px; border-bottom:1px solid var(--rule);}
.q .qt{font-family:"Archivo",sans-serif; font-weight:600; font-size:16px; margin:0 0 12px; display:grid; grid-template-columns:26px 1fr; gap:8px;}
.q .qt i{font-family:"IBM Plex Mono",monospace; font-style:normal; color:var(--ink-faint); font-size:12px; padding-top:3px;}
.opts{display:grid; gap:7px;}
.opt{
  text-align:left; border:1px solid var(--rule); background:var(--sheet); color:var(--ink); font:inherit; font-size:16px;
  padding:10px 13px; border-radius:3px; cursor:pointer; line-height:1.4; display:grid; grid-template-columns:20px 1fr; gap:9px; align-items:baseline;
}
.opt i{font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:12px; color:var(--ink-faint);}
.opt:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--accent);}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.opt.right{border-color:var(--good); background:color-mix(in srgb, var(--good) 12%, transparent);}
.opt.wrong{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent);}
.opt:disabled,.opt[aria-disabled="true"]{cursor:default;}
.opt.right > span::after{content:"  \2713 right"; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; color:var(--good); white-space:nowrap;}
.opt.wrong > span::after{content:"  \2715 your pick"; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; color:var(--bad); white-space:nowrap;}
.explain{margin-top:11px; font-size:15.5px; color:var(--ink-soft); border-left:3px solid var(--rule); padding-left:12px; display:none;}
.explain.show{display:block;}
.quiz-foot{padding:18px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.score{font-family:"Archivo",sans-serif; font-weight:700; font-size:17px; font-variant-numeric:tabular-nums;}
.verdict{font-size:16px; color:var(--ink-soft); max-width:52ch;}

/* footer nav */
.nextbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:30px; padding-top:22px; border-top:1px solid var(--rule);}
.nextbar .hint{font-size:15.5px; color:var(--ink-soft);}
a{color:var(--accent);}

/* ---------- layer-stripping demo (0.2) ---------- */
.demo{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.demo-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.demo-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.tgl{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; user-select:none;}
.tgl input{appearance:none; width:34px; height:18px; border-radius:99px; background:var(--rule); position:relative; cursor:pointer; transition:background .2s; margin:0; flex:none;}
.tgl input::after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--sheet); transition:transform .2s;}
.tgl input:checked{background:var(--accent);}
.tgl input:checked::after{transform:translateX(16px);}
.tgl input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.demo-stage{background:#fff; padding:18px; min-height:210px;}
.demo .demo-note{margin:0; padding:13px 16px; border-top:1px solid var(--rule); background:var(--ground); font-size:15.5px; color:var(--ink-soft); max-width:none;}
.demo #cart-status{max-width:none;}
.demo-note b{color:var(--ink);}
#cart-status{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-faint); padding:0 16px 12px; background:var(--ground); margin:0;}

/* ---------- comparison table ---------- */
.tblwrap{overflow-x:auto; margin:22px 0; border:1px solid var(--rule); border-radius:3px;}
table.cmp{border-collapse:collapse; width:100%; min-width:620px; font-size:15.5px;}
table.cmp th, table.cmp td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--rule); vertical-align:top;}
table.cmp thead th{font-family:"Archivo",sans-serif; font-size:14px; background:var(--ground); position:sticky; top:0;}
table.cmp tbody th{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:400; white-space:nowrap;}
table.cmp code{font-size:12.5px;}
table.cmp tr:last-child th, table.cmp tr:last-child td{border-bottom:0;}

/* ---------- triage drill ---------- */
.triage{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.triage-head{padding:12px 16px; background:var(--ground); border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.triage-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.triage-head .sc{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.case{padding:15px 16px; border-bottom:1px solid var(--rule);}
.case:last-child{border-bottom:0;}
.case .sym{font-size:16.5px; margin:0 0 10px; max-width:64ch;}
.case .sym i{font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:11.5px; color:var(--ink-faint); margin-right:8px;}
.picks{display:flex; gap:8px; flex-wrap:wrap;}
.pick{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; border:1px solid var(--rule); background:var(--sheet); color:var(--ink-soft); padding:7px 14px; border-radius:3px; cursor:pointer;}
.pick:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--accent); color:var(--accent);}
.pick:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.pick.right{border-color:var(--good); color:var(--good); background:color-mix(in srgb, var(--good) 12%, transparent);}
.pick.wrong{border-color:var(--bad); color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent);}
.pick:disabled,.pick[aria-disabled="true"]{cursor:default;}
.pick.right::after{content:"  \2713"; font-weight:700;}
.pick.wrong::after{content:"  \2715"; font-weight:700;}
.why{margin:10px 0 0; font-size:15.5px; color:var(--ink-soft); border-left:3px solid var(--rule); padding-left:12px; display:none; max-width:64ch;}
.why.show{display:block;}
pre.snip{background:var(--ground); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:0 3px 3px 0; padding:13px 15px; overflow-x:auto; font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.7; margin:18px 0;}

/* ---------- file tree (0.3) ---------- */
pre.tree{background:var(--ground); border:1px solid var(--rule); border-radius:3px; padding:16px 18px; overflow-x:auto;
  font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.85; margin:18px 0; color:var(--ink-soft);}
pre.tree b{color:var(--accent); font-weight:600;}
pre.tree em{color:var(--ink); font-style:normal;}
pre.tree span.cmt{color:var(--ink-faint);}

/* ---------- path finder (0.3) ---------- */
.finder{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.finder-head{padding:12px 16px; background:var(--ground); border-bottom:1px solid var(--rule); font-family:"Archivo",sans-serif; font-weight:600; font-size:14px;}
.finder-body{display:grid; grid-template-columns:1fr 1fr; gap:0;}
@media (max-width:700px){ .finder-body{grid-template-columns:1fr;} }
.finder-col{padding:14px 16px;}
.finder-col + .finder-col{border-left:1px solid var(--rule);}
@media (max-width:700px){ .finder-col + .finder-col{border-left:0; border-top:1px solid var(--rule);} }
.finder-col h5{margin:0 0 9px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.fopts{display:flex; flex-direction:column; gap:5px;}
.fopt{font-family:"IBM Plex Mono",monospace; font-size:12.5px; text-align:left; border:1px solid var(--rule); background:var(--sheet);
  color:var(--ink-soft); padding:7px 11px; border-radius:3px; cursor:pointer;}
.fopt:hover{border-color:var(--accent); color:var(--accent);}
.fopt:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.fopt[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--sheet);}
.finder-out{border-top:1px solid var(--rule); padding:16px; background:var(--ground);}
.finder-out .big{font-family:"IBM Plex Mono",monospace; font-size:clamp(15px,2.6vw,21px); color:var(--accent); font-weight:600; word-break:break-all; margin:0 0 8px;}
.finder-out .why{font-size:15.5px; color:var(--ink-soft); margin:0 0 10px; max-width:64ch; display:block; border:0; padding:0;}
.finder-out .code{font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--sheet); border:1px solid var(--rule); border-radius:3px; padding:9px 12px; overflow-x:auto; color:var(--ink); margin:0;}

/* ---------- filename checker (0.3) ---------- */
.checker{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.checker-head{padding:12px 16px; background:var(--ground); border-bottom:1px solid var(--rule); font-family:"Archivo",sans-serif; font-weight:600; font-size:14px;}
.checker input[type="text"]{width:100%; border:0; border-bottom:1px solid var(--rule); padding:14px 16px; font-family:"IBM Plex Mono",monospace;
  font-size:15px; background:var(--sheet); color:var(--ink);}
.checker input[type="text"]:focus{outline:2px solid var(--accent); outline-offset:-2px;}
.rules{list-style:none; margin:0; padding:0;}
.rules li{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:9px 16px; border-bottom:1px solid var(--rule); font-size:15px; align-items:baseline;}
.rules li .mk{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600;}
.rules li.ok .mk{color:var(--good);} .rules li.no .mk{color:var(--bad);} .rules li.tip .mk{color:var(--signal);}
.rules li.no span:last-child, .rules li.tip span:last-child{color:var(--ink);}
.rules li span:last-child{color:var(--ink-soft);}
.fixed{padding:14px 16px; background:var(--ground); display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;}
.fixed .lbl{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);}
.fixed .val{font-family:"IBM Plex Mono",monospace; font-size:15px; color:var(--accent); font-weight:600; word-break:break-all;}

/* ---------- os switch + shortcut table (0.4) ---------- */
.oswitch{display:inline-flex; border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin:0;}
.oswitch button{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--sheet); color:var(--ink-soft); border:0; padding:7px 14px; cursor:pointer;}
.oswitch button + button{border-left:1px solid var(--rule);}
.oswitch button[aria-pressed="true"]{background:var(--accent); color:var(--sheet);}
.oswitch button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.keys{border:1px solid var(--rule); border-radius:3px; margin:14px 0 22px; overflow:hidden;}
.keyrow{display:grid; grid-template-columns:170px 1fr; gap:16px; padding:12px 16px; border-bottom:1px solid var(--rule); align-items:baseline;}
.keyrow:last-child{border-bottom:0;}
.keyrow .combo{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--accent); font-weight:600; white-space:nowrap;}
.keyrow .what b{font-family:"Archivo",sans-serif; font-size:14.5px; display:block; margin-bottom:1px;}
.keyrow .what span{font-size:15.5px; color:var(--ink-soft); line-height:1.45;}
@media (max-width:620px){ .keyrow{grid-template-columns:1fr; gap:4px;} }

/* ---------- devtools panel explorer (0.4) ---------- */
.devt{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.devt-bar{display:flex; overflow-x:auto; background:var(--ground); border-bottom:1px solid var(--rule);}
.devt-bar button{font-family:"Archivo",sans-serif; font-size:13px; font-weight:600; background:none; border:0;
  border-bottom:2px solid transparent; padding:11px 15px; color:var(--ink-soft); cursor:pointer; white-space:nowrap;}
.devt-bar button:hover{color:var(--ink);}
.devt-bar button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.devt-bar button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent); background:var(--sheet);}
.devt-panel{padding:18px;}
.devt-panel h5{margin:0 0 4px; font-family:"Archivo",sans-serif; font-size:17px;}
.devt-panel .use{margin:0 0 12px; color:var(--ink-soft); font-size:16px; max-width:62ch;}
.devt-panel .try{border-left:3px solid var(--signal); background:var(--signal-soft); padding:11px 14px; border-radius:0 3px 3px 0; font-size:15.5px; max-width:64ch;}
.devt-panel .try b{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--signal); display:block; margin-bottom:3px;}
.devt-panel .later{margin:12px 0 0; font-size:14px; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace;}

/* ---------- workbench + challenges (1.1) ---------- */
.tabsim{display:flex; align-items:center; gap:8px; padding:7px 12px; background:var(--ground); border-bottom:1px solid var(--rule);}
.tabsim .dot{width:9px; height:9px; border-radius:50%; background:var(--rule); flex:none;}
.tabsim .tname{font-family:"Archivo",sans-serif; font-size:12px; color:var(--ink-soft); background:var(--sheet);
  border:1px solid var(--rule); border-bottom-color:var(--sheet); border-radius:4px 4px 0 0; padding:5px 12px; margin-bottom:-8px;
  max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lab-body.tall textarea{min-height:360px; font-size:12.5px;}
.lab-body.tall iframe{min-height:360px;}
.chal{border-top:1px solid var(--rule); background:var(--ground); padding:6px 0;}
.chal-head{padding:9px 16px 4px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.chal-head .t{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-right:auto;}
.chal-head .sc{font-family:"Archivo",sans-serif; font-weight:700; font-size:14px; font-variant-numeric:tabular-nums;}
.chal ul{list-style:none; margin:0; padding:4px 16px 12px;}
.chal li{display:grid; grid-template-columns:20px 1fr; gap:10px; padding:6px 0; font-size:15.5px; align-items:baseline; color:var(--ink-soft);}
.chal li .mk{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600; color:var(--ink-faint);}
.chal li.pass{color:var(--ink);}
.chal li.pass .mk{color:var(--good);}
.chal li code{font-size:12.5px;}

/* ---------- outline linter (1.2) ---------- */
.olint{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.olint-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; background:var(--ground); border-bottom:1px solid var(--rule);}
.olint-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.olint-body{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:700px){ .olint-body{grid-template-columns:1fr;} }
.olint-body textarea{border:0; border-right:1px solid var(--rule); resize:vertical; min-height:250px; padding:14px;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.65; background:var(--sheet); color:var(--ink); tab-size:2;}
.olint-body textarea:focus{outline:2px solid var(--accent); outline-offset:-2px;}
@media (max-width:700px){ .olint-body textarea{border-right:0; border-bottom:1px solid var(--rule);} }
.olint-side{padding:14px 16px; min-height:250px;}
.olint-side h6{margin:0 0 9px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.otree{list-style:none; margin:0 0 16px; padding:0;}
.otree li{display:flex; gap:9px; align-items:baseline; padding:3px 0; font-size:15.5px;}
.otree .lv{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--accent); border:1px solid var(--rule); border-radius:2px; padding:1px 5px; flex:none;}
.otree .tx{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.olint-msgs{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); padding-top:10px;}
.olint-msgs li{display:grid; grid-template-columns:18px 1fr; gap:8px; font-size:15px; padding:4px 0; color:var(--ink-soft);}
.olint-msgs .mk{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13px;}
.olint-msgs li.bad .mk{color:var(--bad);} .olint-msgs li.bad span:last-child{color:var(--ink);}
.olint-msgs li.ok .mk{color:var(--good);}

/* ---------- link builder (1.3) ---------- */
.lb{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.lb-head{padding:12px 16px; background:var(--ground); border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:10px;}
.lb-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px;}
.lb-head .oswitch{flex-wrap:wrap;}
.lb-fields{padding:14px 16px; display:grid; gap:12px;}
.lb-fields label{display:grid; gap:4px;}
.lb-fields label > span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.lb-fields input[type="text"]{border:1px solid var(--rule); border-radius:3px; padding:9px 11px; font-family:"IBM Plex Mono",monospace; font-size:13.5px; background:var(--sheet); color:var(--ink); width:100%;}
.lb-fields input[type="text"]:focus{outline:2px solid var(--accent); outline-offset:-1px;}
.lb-fields .chk{display:flex; align-items:center; gap:9px; font-size:15.5px; cursor:pointer;}
.lb-fields .chk input{width:16px; height:16px; accent-color:var(--accent);}
.lb-out{border-top:1px solid var(--rule); padding:14px 16px; background:var(--ground);}
.lb-out pre{margin:0 0 10px; font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.7; background:var(--sheet); border:1px solid var(--rule); border-radius:3px; padding:10px 12px; overflow-x:auto; color:var(--ink);}
.lb-out .does{margin:0 0 8px; font-size:15.5px; color:var(--ink-soft); max-width:64ch;}
.lb-out .does b{color:var(--ink);}
.lb-warn{list-style:none; margin:0; padding:0;}
.lb-warn li{display:grid; grid-template-columns:18px 1fr; gap:8px; font-size:15px; padding:3px 0; color:var(--ink);}
.lb-warn li .mk{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--signal);}
.lb-warn li.ok .mk{color:var(--good);}
.lb-warn li.ok{color:var(--ink-soft);}
.lk{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}

/* ---------- image demo (1.4) ---------- */
.imgdemo{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.imgdemo-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.imgdemo-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.imgdemo-stage{background:#fff; padding:18px; display:flex; justify-content:center; min-height:220px; align-items:center;}
.imgdemo-stage img{max-width:100%; height:auto; font-family:Georgia,serif; color:#333; font-size:15px;}
.imgdemo-code{margin:0; padding:12px 16px; border-top:1px solid var(--rule); font-family:"IBM Plex Mono",monospace; font-size:12.5px; overflow-x:auto; background:var(--ground); color:var(--ink);}

/* ---------- landmark viewer (1.5) ---------- */
.lmk{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.lmk-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.lmk-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.lmk-body{display:grid; grid-template-columns:1.2fr 1fr;}
@media (max-width:700px){ .lmk-body{grid-template-columns:1fr;} }
.lmk-body pre{margin:0; padding:14px 16px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.7; overflow-x:auto; border-right:1px solid var(--rule); color:var(--ink); background:var(--sheet);}
@media (max-width:700px){ .lmk-body pre{border-right:0; border-bottom:1px solid var(--rule);} }
.lmk-body pre b{color:var(--accent); font-weight:600;}
.lmk-side{padding:14px 16px;}
.lmk-side h6{margin:0 0 10px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.lmk-side ul{list-style:none; margin:0 0 12px; padding:0;}
.lmk-side li{display:flex; gap:10px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--rule); font-size:15.5px;}
.lmk-side li .k{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent); min-width:98px;}
.lmk-side .none{color:var(--bad); font-size:15.5px;}
.lmk-side p{margin:0; font-size:15px; color:var(--ink-soft);}

/* ---------- form lab (1.6) ---------- */
.flab{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.flab-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.flab-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.flab-body{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:760px){ .flab-body{grid-template-columns:1fr;} }
.flab form{padding:16px; display:grid; gap:13px; border-right:1px solid var(--rule); background:#fff; color:#16211f; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15px;}
@media (max-width:760px){ .flab form{border-right:0; border-bottom:1px solid var(--rule);} }
.flab form label{display:grid; gap:4px; font-weight:600; font-size:14px;}
.flab form input,.flab form select,.flab form textarea{font:inherit; font-weight:400; padding:8px 10px; border:1px solid #b9c4c1; border-radius:6px; background:#fff; color:#16211f;}
.flab form input:focus,.flab form select:focus,.flab form textarea:focus{outline:2px solid #0D6E6B; outline-offset:1px;}
.flab form input:user-invalid,.flab form textarea:user-invalid{border-color:#A93A2E; background:#fdf3f2;}
.flab form fieldset{border:1px solid #d5ddda; border-radius:6px; padding:8px 12px 10px; margin:0;}
.flab form legend{font-weight:600; font-size:14px; padding:0 4px;}
.flab form .row{display:flex; gap:16px; flex-wrap:wrap; font-weight:400;}
.flab form .row label{display:flex; gap:6px; align-items:center; font-weight:400;}
.flab form .hint{font-weight:400; font-size:12.5px; color:#5a6663;}
.flab form button{font:inherit; font-weight:600; background:#0D6E6B; color:#fff; border:0; border-radius:6px; padding:10px; cursor:pointer;}
.flab-out{padding:16px; background:var(--ground);}
.flab-out h6{margin:0 0 9px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.flab-out pre{margin:0 0 12px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.7; background:var(--sheet); border:1px solid var(--rule); border-radius:3px; padding:10px 12px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; color:var(--ink);}
.flab-out p{margin:0 0 8px; font-size:15px; color:var(--ink-soft);}
.flab-opts{display:flex; gap:14px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--rule); background:var(--ground); font-size:15px;}
.flab-opts label{display:flex; gap:7px; align-items:center; cursor:pointer;}
.flab-opts input{accent-color:var(--accent);}
.itype-stage{padding:18px 16px; background:#fff; color:#16211f; font-family:system-ui,-apple-system,sans-serif;}
.itype-stage label{display:grid; gap:6px; font-weight:600; font-size:14px; max-width:340px;}
.itype-stage input{font:inherit; font-weight:400; padding:8px 10px; border:1px solid #b9c4c1; border-radius:6px;}

/* ---------- table reader (1.7) ---------- */
.trd{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.trd-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.trd-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.trd-stage{padding:16px; background:#fff; overflow-x:auto;}
.trd-stage table{border-collapse:collapse; font-family:system-ui,-apple-system,sans-serif; font-size:14.5px; color:#16211f; min-width:420px;}
.trd-stage caption{text-align:left; font-weight:600; padding-bottom:8px;}
.trd-stage th,.trd-stage td{border:1px solid #d5ddda; padding:8px 12px; text-align:left;}
.trd-stage th{background:#eef3f2;}
.trd-stage td{cursor:pointer;}
.trd-stage td:hover,.trd-stage td.sel{background:#e3efee; outline:2px solid #0D6E6B; outline-offset:-2px;}
.trd-stage.plain th{background:#fff; font-weight:400;}
.trd-say{padding:14px 16px; border-top:1px solid var(--rule); background:var(--ground);}
.trd-say h6{margin:0 0 6px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.trd-say .voice{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--accent); margin:0 0 6px;}
.trd-say p{margin:0; font-size:15px; color:var(--ink-soft);}

/* ---------- contrast checker + tab tour (1.8) ---------- */
.ctool{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.ctool-head{padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule); font-family:"Archivo",sans-serif; font-weight:600; font-size:14px;}
.ctool-ctrl{display:flex; gap:18px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--rule);}
.ctool-ctrl label{display:flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.ctool-ctrl input[type=color]{width:40px; height:30px; border:1px solid var(--rule); border-radius:3px; padding:0; background:none;}
.ctool-ctrl .presets{display:flex; gap:6px; flex-wrap:wrap;}
.ctool-sample{padding:22px 18px;}
.ctool-sample .big{font-family:"Archivo",sans-serif; font-size:26px; font-weight:700; margin:0 0 6px;}
.ctool-sample .small{font-size:15px; margin:0; max-width:none;}
.ctool-res{display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:12px 16px; border-top:1px solid var(--rule); background:var(--ground);}
.ctool-res .ratio{font-family:"Archivo",sans-serif; font-weight:700; font-size:22px; font-variant-numeric:tabular-nums; margin-right:8px;}
.ctool-res .badge{font-family:"IBM Plex Mono",monospace; font-size:11px; padding:4px 8px; border-radius:2px; border:1px solid;}
.ctool-res .badge.ok{color:var(--good); border-color:var(--good);}
.ctool-res .badge.no{color:var(--bad); border-color:var(--bad);}
.ttour-stage{padding:18px 16px; background:#fff; color:#16211f; font-family:system-ui,-apple-system,sans-serif; display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.ttour-stage a{color:#0D6E6B;}
.ttour-stage button,.ttour-stage .fake{font:inherit; padding:8px 14px; border-radius:6px; border:1px solid #0D6E6B; background:#0D6E6B; color:#fff; cursor:pointer;}
.ttour-stage input{font:inherit; padding:7px 9px; border:1px solid #b9c4c1; border-radius:6px;}
.ttour-stage :focus-visible{outline:3px solid #C9731B; outline-offset:2px;}
.ttour-stage label{display:flex; gap:6px; align-items:center;}
.ttour-log{padding:12px 16px; border-top:1px solid var(--rule); background:var(--ground); font-size:15px; color:var(--ink-soft);}
.ttour-log ol{margin:6px 0 0; padding-left:22px;}

/* ---------- selector playground (2.1) ---------- */
.selp{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.selp-head{padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule); display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.selp-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.selp-input{display:flex; gap:0; border-bottom:1px solid var(--rule);}
.selp-input input{flex:1; border:0; padding:13px 16px; font-family:"IBM Plex Mono",monospace; font-size:15px; background:var(--sheet); color:var(--ink);}
.selp-input input:focus{outline:2px solid var(--accent); outline-offset:-2px;}
.selp-input .brace{font-family:"IBM Plex Mono",monospace; font-size:15px; padding:13px 14px; color:var(--ink-faint); background:var(--sheet);}
.selp-body{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:760px){ .selp-body{grid-template-columns:1fr;} }
.selp-body pre{margin:0; padding:14px 16px; font-family:"IBM Plex Mono",monospace; font-size:12px; line-height:1.7; overflow-x:auto; border-right:1px solid var(--rule); color:var(--ink-soft); background:var(--sheet);}
@media (max-width:760px){ .selp-body pre{border-right:0; border-bottom:1px solid var(--rule);} }
.selp-stage{padding:14px 16px; background:#fff; color:#16211f; font-family:system-ui,-apple-system,sans-serif; font-size:14.5px;}
.selp-stage *{transition:background .15s;}
.selp-stage .hit{outline:2px solid #C9731B; outline-offset:2px; background:#FBE9D4 !important;}
.selp-stage h3{font-size:18px; margin:0 0 6px;}
.selp-stage p{margin:0 0 8px;}
.selp-stage ul{margin:0 0 8px; padding-left:20px;}
.selp-stage a{color:#0D6E6B;}
.selp-stage nav ul{display:flex; gap:14px; list-style:none; padding:0;}
.selp-out{padding:11px 16px; border-top:1px solid var(--rule); background:var(--ground); font-size:15px; color:var(--ink-soft);}
.selp-out b{color:var(--ink); font-family:"IBM Plex Mono",monospace;}

/* ---------- box model explorer (2.2) ---------- */
.bmx{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.bmx-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.bmx-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.bmx-ctrl{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 18px; padding:12px 16px; border-bottom:1px solid var(--rule);}
.bmx-ctrl label{display:grid; grid-template-columns:78px 1fr 48px; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.bmx-ctrl input[type=range]{accent-color:var(--accent); width:100%;}
.bmx-ctrl output{font-variant-numeric:tabular-nums; color:var(--ink); text-align:right;}
.bmx-stage{background:#fff; padding:14px; overflow-x:auto;}
.bmx-margin{display:inline-block; background:repeating-linear-gradient(45deg,#FBE9D4,#FBE9D4 6px,#fff5ea 6px,#fff5ea 12px); outline:1px dashed #C9731B;}
.bmx-box{box-sizing:content-box; border-style:solid; border-color:#0D6E6B; background:#cfe6e3; font-family:system-ui,-apple-system,sans-serif; color:#16211f;}
.bmx-content{background:#fff; outline:1px dashed #7b8a87; font-size:14px; line-height:1.4;}
.bmx-legend{display:flex; gap:14px; flex-wrap:wrap; padding:8px 16px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-soft); border-top:1px solid var(--rule);}
.bmx-legend i{display:inline-block; width:12px; height:12px; vertical-align:-2px; margin-right:5px; border:1px solid #7b8a87;}
.bmx-math{padding:12px 16px; border-top:1px solid var(--rule); background:var(--ground); font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink); overflow-x:auto;}
.bmx-math p{margin:0 0 4px; font-family:"Newsreader",Georgia,serif; font-size:15px; color:var(--ink-soft);}

/* ---------- color mixer (2.3) ---------- */
.cmix{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.cmix-head{padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule); font-family:"Archivo",sans-serif; font-weight:600; font-size:14px;}
.cmix-body{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:720px){ .cmix-body{grid-template-columns:1fr;} }
.cmix-ctrl{padding:14px 16px; display:grid; gap:12px; border-right:1px solid var(--rule);}
@media (max-width:720px){ .cmix-ctrl{border-right:0; border-bottom:1px solid var(--rule);} }
.cmix-ctrl label{display:grid; grid-template-columns:92px 1fr 52px; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.cmix-ctrl input[type=range]{width:100%; accent-color:var(--accent);}
.cmix-ctrl output{text-align:right; color:var(--ink); font-variant-numeric:tabular-nums;}
.cmix-swatch{min-height:150px; display:flex; align-items:flex-end; padding:14px; background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; position:relative;}
.cmix-swatch .fill{position:absolute; inset:0;}
.cmix-swatch .lbl{position:relative; font-family:"Archivo",sans-serif; font-weight:700; font-size:20px;}
.cmix-codes{padding:12px 16px; border-top:1px solid var(--rule); background:var(--ground); display:grid; gap:6px;}
.cmix-codes div{display:grid; grid-template-columns:62px 1fr; gap:10px; font-family:"IBM Plex Mono",monospace; font-size:13px; align-items:baseline;}
.cmix-codes span:first-child{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.cmix-codes code{color:var(--ink); overflow-wrap:anywhere;}
.cmix-tints{display:grid; grid-template-columns:repeat(9,1fr); border-top:1px solid var(--rule);}
.cmix-tints div{height:44px; display:flex; align-items:flex-end; justify-content:center; font-family:"IBM Plex Mono",monospace; font-size:9.5px; padding-bottom:3px;}

/* ---------- type tuner + scale (2.4) ---------- */
.ttune{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.ttune-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.ttune-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.ttune-ctrl{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 18px; padding:12px 16px; border-bottom:1px solid var(--rule);}
.ttune-ctrl label{display:grid; grid-template-columns:96px 1fr 56px; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.ttune-ctrl input[type=range]{width:100%; accent-color:var(--accent);}
.ttune-ctrl output{text-align:right; color:var(--ink); font-variant-numeric:tabular-nums;}
.ttune-ctrl select{font:inherit; font-size:12px; padding:4px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink); grid-column:2 / 4;}
.ttune-stage{background:#fff; color:#1b2321; padding:22px 18px; overflow:hidden;}
.ttune-stage h4{margin:0 0 .5em; font-weight:700; line-height:1.2;}
.ttune-stage p{margin:0 0 .8em;}
.ttune-meter{display:flex; gap:10px; flex-wrap:wrap; padding:11px 16px; border-top:1px solid var(--rule); background:var(--ground);}
.ttune-meter span{font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding:4px 8px; border-radius:2px; border:1px solid;}
.ttune-meter .ok{color:var(--good); border-color:var(--good);}
.ttune-meter .no{color:var(--bad); border-color:var(--bad);}
.scale-stage{background:#fff; color:#1b2321; padding:16px 18px; overflow-x:auto;}
.scale-row{display:grid; grid-template-columns:72px 90px 1fr; gap:12px; align-items:baseline; padding:4px 0; border-bottom:1px solid #edf1f0;}
.scale-row .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-faint);}
.scale-row .v{font-family:"IBM Plex Mono",monospace; font-size:11px; color:#0D6E6B;}
.scale-row .x{font-family:"Archivo",sans-serif; font-weight:600; line-height:1.15; white-space:nowrap;}
.scale-code{margin:0; padding:12px 16px; border-top:1px solid var(--rule); background:var(--ground); font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.7; overflow-x:auto; color:var(--ink);}

/* ---------- flexbox playground (2.5) ---------- */
.fxp{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.fxp-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.fxp-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.fxp-ctrl{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px 18px; padding:12px 16px; border-bottom:1px solid var(--rule);}
.fxp-ctrl label{display:grid; grid-template-columns:118px 1fr; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.fxp-ctrl select{font-family:"IBM Plex Mono",monospace; font-size:12px; padding:5px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink);}
.fxp-ctrl .chk{display:flex; gap:8px; cursor:pointer;}
.fxp-ctrl .chk input{accent-color:var(--accent);}
.fxp-stage{background:#fff; padding:14px;}
.fxp-box{display:flex; min-height:190px; border:2px dashed #9fb3af; border-radius:6px; padding:8px; background:repeating-linear-gradient(0deg,#fafcfb,#fafcfb 18px,#f2f6f5 18px,#f2f6f5 19px);}
.fxp-box > div{background:#0D6E6B; color:#fff; font-family:"Archivo",sans-serif; font-weight:700; border-radius:5px; padding:10px 14px; font-size:14px; display:flex; align-items:center; justify-content:center; min-width:52px;}
.fxp-box > div:nth-child(2){padding:22px 14px;}
.fxp-box > div:nth-child(3){font-size:12px; padding:6px 22px;}
.fxp-box > div.grow{background:#C9731B;}
.fxp-code{margin:0; padding:12px 16px; border-top:1px solid var(--rule); background:var(--ground); font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.7; overflow-x:auto; color:var(--ink);}
.fxp-goals{border-top:1px solid var(--rule); padding:10px 16px 14px;}
.fxp-goals h6{margin:4px 0 8px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.fxp-goals ul{list-style:none; margin:0; padding:0;}
.fxp-goals li{display:grid; grid-template-columns:20px 1fr; gap:10px; padding:5px 0; font-size:15.5px; color:var(--ink-soft);}
.fxp-goals li .mk{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--ink-faint);}
.fxp-goals li.pass{color:var(--ink);} .fxp-goals li.pass .mk{color:var(--good);}

/* ---------- grid tools (2.6) ---------- */
.gdt{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.gdt-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.gdt-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.gdt-body{display:grid; grid-template-columns:1fr 1.2fr;}
@media (max-width:760px){ .gdt-body{grid-template-columns:1fr;} }
.gdt-edit{padding:12px 16px; border-right:1px solid var(--rule); display:grid; gap:8px; align-content:start;}
@media (max-width:760px){ .gdt-edit{border-right:0; border-bottom:1px solid var(--rule);} }
.gdt-edit label{display:grid; gap:4px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);}
.gdt-edit textarea,.gdt-edit input{font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.6; padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink); resize:vertical; text-transform:none; letter-spacing:0;}
.gdt-edit textarea{min-height:120px;}
.gdt-stage{background:#fff; padding:14px;}
.gdt-grid{display:grid; gap:8px; min-height:260px; font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; color:#16211f;}
.gdt-grid > div{border-radius:5px; display:flex; align-items:center; justify-content:center; padding:8px; text-transform:lowercase;}
.gdt-msg{padding:10px 16px; border-top:1px solid var(--rule); background:var(--ground); font-size:15px; color:var(--ink-soft);}
.gal-ctrl{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px 18px; padding:12px 16px; border-bottom:1px solid var(--rule);}
.gal-ctrl label{display:grid; grid-template-columns:130px 1fr 58px; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.gal-ctrl input{accent-color:var(--accent); width:100%;}
.gal-ctrl output{text-align:right; color:var(--ink);}
.gal-wrap{background:#fff; padding:14px; overflow-x:auto;}
.gal-box{display:grid; gap:10px; border:2px dashed #9fb3af; border-radius:6px; padding:10px; box-sizing:border-box;}
.gal-box div{background:#cfe6e3; border:1px solid #0D6E6B; border-radius:5px; height:64px; display:flex; align-items:center; justify-content:center; font-family:"Archivo",sans-serif; font-weight:700; color:#0D6E6B; font-size:13px;}

/* ---------- device simulator (2.7) ---------- */
.dsim{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.dsim-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.dsim-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.dsim-ctrl{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--rule); font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.dsim-ctrl input{flex:1; min-width:160px; accent-color:var(--accent);}
.dsim-ctrl output{color:var(--ink); min-width:56px; text-align:right;}
.dsim-stage{background:repeating-linear-gradient(45deg,var(--ground),var(--ground) 8px,var(--sheet) 8px,var(--sheet) 16px); padding:14px; overflow-x:auto;}
.dsim-stage iframe{display:block; margin:0 auto; height:460px; border:1px solid #9fb3af; border-radius:10px; background:#fff; box-shadow:0 8px 24px -16px rgba(0,0,0,.5);}
.dsim-bps{display:flex; flex-wrap:wrap; gap:8px; padding:10px 16px; border-top:1px solid var(--rule); background:var(--ground);}
.dsim-bps span{font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding:4px 9px; border-radius:2px; border:1px solid var(--rule); color:var(--ink-faint);}
.dsim-bps span.on{border-color:var(--accent); color:var(--sheet); background:var(--accent);}

/* ---------- theme lab (2.8) ---------- */
.tlab{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.tlab-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.tlab-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.tlab-ctrl{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 18px; padding:12px 16px; border-bottom:1px solid var(--rule);}
.tlab-ctrl label{display:grid; grid-template-columns:96px 1fr 50px; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.tlab-ctrl input[type=range]{accent-color:var(--accent); width:100%;}
.tlab-ctrl input[type=color]{width:44px; height:28px; border:1px solid var(--rule); border-radius:3px; padding:0; background:none;}
.tlab-ctrl output{text-align:right; color:var(--ink);}
.tlab-body{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:760px){ .tlab-body{grid-template-columns:1fr;} }
.tlab-demo{--bg:#fbf8f3; --surface:#ffffff; --text:#1b2321; --muted:#5b6663; --line:#e3ddd3; --brand:#0d6e6b; --radius:10px; --space:16px;
  background:var(--bg); color:var(--text); padding:calc(var(--space) * 1.25); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; border-right:1px solid var(--rule); transition:background .25s,color .25s;}
@media (max-width:760px){ .tlab-demo{border-right:0; border-bottom:1px solid var(--rule);} }
.tlab-demo .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space); display:grid; gap:calc(var(--space) * .6); transition:background .25s,border-color .25s;}
.tlab-demo .tag{justify-self:start; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:color-mix(in oklch, var(--brand) 14%, transparent); padding:3px 8px; border-radius:calc(var(--radius) / 2);}
.tlab-demo h4{margin:0; font-size:19px;}
.tlab-demo p{margin:0; color:var(--muted); font-size:14px; line-height:1.5;}
.tlab-demo .price{color:var(--text); font-weight:700; font-size:18px;}
.tlab-demo .row{display:flex; gap:calc(var(--space) * .5); flex-wrap:wrap;}
.tlab-demo button{font:inherit; font-weight:600; font-size:14px; border-radius:calc(var(--radius) * .7); padding:calc(var(--space) * .55) var(--space); cursor:pointer;}
.tlab-demo .pri{background:var(--brand); color:var(--on-brand,#fff); border:1px solid var(--brand);}
.tlab-demo .sec{background:transparent; color:var(--brand); border:1px solid var(--line);}
.tlab-code{margin:0; padding:14px 16px; font-family:"IBM Plex Mono",monospace; font-size:12px; line-height:1.7; overflow-x:auto; background:var(--sheet); color:var(--ink);}
.tlab-code b{color:var(--accent); font-weight:600;}

/* ---------- motion labs (2.9) ---------- */
.mlab{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.mlab-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.mlab-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.mlab-head label{display:flex; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.mlab-head input[type=range]{accent-color:var(--accent); width:120px;}
.race{padding:10px 16px 14px; background:#fff;}
.lane{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:center; padding:5px 0; border-bottom:1px dashed #e3e9e7;}
.lane code{font-size:11.5px; color:#3d4a47; background:none;}
.track{position:relative; height:26px; background:#f3f6f5; border-radius:13px;}
.ball{position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#0D6E6B;}
.race.go .ball{left:calc(100% - 23px);}
.tfx-body{display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:760px){ .tfx-body{grid-template-columns:1fr;} }
.tfx-ctrl{padding:12px 16px; display:grid; gap:10px; border-right:1px solid var(--rule); align-content:start;}
@media (max-width:760px){ .tfx-ctrl{border-right:0; border-bottom:1px solid var(--rule);} }
.tfx-ctrl label{display:grid; grid-template-columns:92px 1fr 56px; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.tfx-ctrl input{accent-color:var(--accent); width:100%;}
.tfx-ctrl output{text-align:right; color:var(--ink);}
.tfx-stage{background:#fff; display:flex; align-items:center; justify-content:center; min-height:230px; overflow:hidden; position:relative;}
.tfx-ghost{position:absolute; width:150px; height:96px; border:2px dashed #b8c6c3; border-radius:10px;}
.tfx-card{width:150px; height:96px; border-radius:10px; background:#0D6E6B; color:#fff; font-family:"Archivo",sans-serif; font-weight:700; display:flex; align-items:center; justify-content:center; transition:transform .25s ease-out; box-shadow:0 10px 20px -12px rgba(0,0,0,.5);}
.hovdemo{display:flex; gap:14px; flex-wrap:wrap; padding:16px; background:#fff; justify-content:center;}
.hovdemo button{font:600 14px system-ui,sans-serif; border:0; border-radius:8px; padding:12px 18px; background:#0D6E6B; color:#fff; cursor:pointer;}
.hovdemo .h1:hover{background:#0a8a86;}
.hovdemo .h2{transition:background-color .2s ease-out, transform .2s ease-out;}
.hovdemo .h2:hover{background:#0a8a86; transform:translateY(-2px);}
.hovdemo .h2:active{transform:translateY(0) scale(.97);}
.hovdemo .h3{transition:all 1.4s linear;}
.hovdemo .h3:hover{background:#c9731b; transform:rotate(8deg) scale(1.25);}
.hovdemo small{display:block; font:12px "IBM Plex Mono",monospace; color:#5b6663; text-align:center; margin-top:6px;}
@media (prefers-reduced-motion: reduce){ .ball,.tfx-card,.hovdemo button{transition:none !important;} }

/* ---------- modern css labs (2.10) ---------- */
.mcl{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.mcl-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.mcl-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.mcl-head label{display:flex; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.mcl-head input[type=range]{accent-color:var(--accent); width:150px;}
.mcl-stage{background:#fff; padding:14px; overflow-x:auto; color:#1b2321; font-family:system-ui,-apple-system,"Segoe UI",sans-serif;}
.mcl-note{padding:10px 16px; border-top:1px solid var(--rule); background:var(--ground); font-size:15px; color:var(--ink-soft);}
.cq-wrap{container-type:inline-size; border:2px dashed #9fb3af; border-radius:8px; padding:10px; resize:none;}
.cq-card{display:grid; gap:10px; background:#fbf8f3; border:1px solid #e3ddd3; border-radius:10px; padding:12px;}
.cq-card .img{background:linear-gradient(135deg,#0D6E6B,#5ad3c6); border-radius:8px; aspect-ratio:16/9;}
.cq-card h4{margin:0; font-size:16px;} .cq-card p{margin:0; font-size:13.5px; color:#55605d;}
@container (min-width: 380px){ .cq-card{grid-template-columns:140px 1fr; align-items:center;} .cq-card .img{aspect-ratio:1;} }
@container (min-width: 560px){ .cq-card{grid-template-columns:220px 1fr;} .cq-card h4{font-size:20px;} }
.has-list{display:grid; gap:8px;}
.has-list label{display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid #d9e2e0; border-radius:8px; cursor:pointer; transition:background-color .15s, border-color .15s;}
.has-list label:has(input:checked){background:#e3efee; border-color:#0D6E6B;}
.has-list input{accent-color:#0D6E6B;}
.has-total{margin-top:10px; font-size:14px; color:#55605d;}
.has-box:has(input:checked) .has-total{color:#0D6E6B; font-weight:600;}
.fl-demo{border:1px dashed #9fb3af; border-radius:8px; padding:12px; overflow:hidden;}
.fl-demo h3{margin:0; font-family:"Archivo",sans-serif; line-height:1.1;}

/* ---------- step-through tracer (3.1) ---------- */
.trace{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.trace-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.trace-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.trace-body{display:grid; grid-template-columns:1.3fr 1fr;}
@media (max-width:760px){ .trace-body{grid-template-columns:1fr;} }
.trace-code{margin:0; padding:10px 0; font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.9; border-right:1px solid var(--rule); background:var(--sheet); overflow-x:auto;}
@media (max-width:760px){ .trace-code{border-right:0; border-bottom:1px solid var(--rule);} }
.trace-code div{padding:0 14px 0 8px; white-space:pre; color:var(--ink-soft); border-left:3px solid transparent;}
.trace-code div .ln{display:inline-block; width:26px; color:var(--ink-faint); font-size:11px;}
.trace-code div.cur{background:var(--signal-soft); border-left-color:var(--signal); color:var(--ink);}
.trace-code div.done{color:var(--ink);}
.trace-code .cm{color:var(--ink-faint);}
.trace-side{padding:12px 14px; display:grid; gap:12px; align-content:start;}
.trace-side h6{margin:0 0 6px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.mem{display:grid; gap:4px;}
.mem div{display:grid; grid-template-columns:110px 1fr; font-family:"IBM Plex Mono",monospace; font-size:13px; padding:5px 8px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet);}
.mem div.fresh{border-color:var(--signal); background:var(--signal-soft);}
.mem div span:first-child{color:var(--accent);}
.cons{font-family:"IBM Plex Mono",monospace; font-size:13px; background:#16211f; color:#d8f3ee; border-radius:3px; padding:8px 10px; min-height:70px; white-space:pre-wrap;}
.trace-say{padding:11px 16px; border-top:1px solid var(--rule); background:var(--ground); font-size:15.5px; color:var(--ink-soft); min-height:48px;}

/* ---------- type detective + jars (3.2) ---------- */
.tdet{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.tdet-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 16px; background:var(--ground); border-bottom:1px solid var(--rule);}
.tdet-head .t{font-family:"Archivo",sans-serif; font-weight:600; font-size:14px; margin-right:auto;}
.tdet-in{display:flex; border-bottom:1px solid var(--rule); align-items:center; background:var(--sheet);}
.tdet-in span{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--ink-faint); padding:0 0 0 16px; white-space:nowrap;}
.tdet-in input{flex:1; min-width:0; border:0; padding:13px 12px; font-family:"IBM Plex Mono",monospace; font-size:15px; background:transparent; color:var(--ink);}
.tdet-in input:focus{outline:2px solid var(--accent); outline-offset:-2px;}
.tdet-presets{display:flex; flex-wrap:wrap; gap:6px; padding:10px 16px; border-bottom:1px solid var(--rule);}
.tdet-out{padding:14px 16px; display:grid; gap:6px;}
.tdet-out .ty{font-family:"IBM Plex Mono",monospace; font-size:20px; font-weight:600; color:var(--accent);}
.tdet-out .ty.bad{color:var(--bad);}
.tdet-out p{margin:0; font-size:15.5px; color:var(--ink-soft); max-width:64ch;}
.jars{display:grid; grid-template-columns:1fr 1fr; gap:0;}
@media (max-width:640px){ .jars{grid-template-columns:1fr;} }
.jar{padding:16px; display:grid; gap:10px; align-content:start;}
.jar + .jar{border-left:1px solid var(--rule);}
@media (max-width:640px){ .jar + .jar{border-left:0; border-top:1px solid var(--rule);} }
.jar pre{margin:0; font-family:"IBM Plex Mono",monospace; font-size:13px; background:var(--sheet); border:1px solid var(--rule); border-radius:3px; padding:9px 11px; color:var(--ink); overflow-x:auto;}
.jar .val{font-family:"IBM Plex Mono",monospace; font-size:14px; padding:10px 12px; border:2px solid var(--accent); border-radius:8px; background:var(--accent-soft);}
.jar .val.locked{border-style:double; border-width:4px;}
.jar .res{font-size:15px; color:var(--ink-soft); min-height:44px;}
.jar .res.err{color:var(--bad);}

/* ---------- decision machine (3.3) ---------- */
.dm-ctrl{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 18px; padding:12px 16px; border-bottom:1px solid var(--rule);}
.dm-ctrl label{display:grid; grid-template-columns:78px 1fr 40px; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft);}
.dm-ctrl .chk{display:flex; gap:8px; cursor:pointer;}
.dm-ctrl input[type=range]{width:100%; accent-color:var(--accent);}
.dm-ctrl select{font-family:"IBM Plex Mono",monospace; font-size:12px; padding:5px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink); grid-column:2/4;}
.dm-ctrl output{text-align:right; color:var(--ink);}
.dm-ctrl input[type=checkbox]{accent-color:var(--accent);}
.dm-result{padding:12px 16px; border-top:1px solid var(--rule); background:var(--ground); display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;}
.dm-result .price{font-family:"Archivo",sans-serif; font-size:24px; font-weight:700; color:var(--accent);}
.dm-result span{font-size:15px; color:var(--ink-soft);}
.trace-code div.skip{opacity:.4;}
.trace-code div.hit{background:var(--accent-soft); border-left-color:var(--accent); color:var(--ink);}
.cmpx{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 16px; border-bottom:1px solid var(--rule); background:var(--sheet);}
.cmpx input,.cmpx select{font-family:"IBM Plex Mono",monospace; font-size:14px; padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink);}
.cmpx input{width:120px;}

/* ---------- function machine (3.5) ---------- */
.fmach{display:grid; grid-template-columns:1fr auto 1.4fr auto 1fr; align-items:center; gap:10px; padding:18px 16px; background:var(--sheet);}
@media (max-width:760px){ .fmach{grid-template-columns:1fr; } .fmach .arrow{transform:rotate(90deg); justify-self:center;} }
.fm-in,.fm-out{border:2px dashed var(--rule); border-radius:10px; padding:12px; display:grid; gap:8px; text-align:center;}
.fm-in h6,.fm-out h6,.fm-box h6{margin:0; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.fm-arg{font-family:"IBM Plex Mono",monospace; font-size:14px; background:var(--signal-soft); border:1px solid var(--signal); border-radius:6px; padding:6px 8px;}
.fm-box{border:2px solid var(--accent); border-radius:12px; padding:12px 14px; background:var(--accent-soft); display:grid; gap:6px;}
.fm-box pre{margin:0; font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.7; white-space:pre-wrap; color:var(--ink);}
.fm-box pre b{color:var(--signal);}
.fm-ret{font-family:"Archivo",sans-serif; font-size:26px; font-weight:700; color:var(--accent);}
.fmach .arrow{font-size:22px; color:var(--ink-faint);}
.fm-calls{padding:10px 16px 14px; border-top:1px solid var(--rule);}
.fm-calls table{border-collapse:collapse; width:100%; font-family:"IBM Plex Mono",monospace; font-size:13px;}
.fm-calls td,.fm-calls th{text-align:left; padding:6px 8px; border-bottom:1px solid var(--rule);}
.fm-calls th{font-weight:400; color:var(--ink-faint); font-size:11px; letter-spacing:.1em; text-transform:uppercase;}

/* ---------- array workbench (3.6) ---------- */
.arr-row{display:flex; gap:6px; flex-wrap:wrap; padding:18px 16px 10px; background:var(--sheet); align-items:flex-end; min-height:104px;}
.arr-cell{display:grid; gap:4px; text-align:center; animation:cellIn .25s ease-out;}
.arr-cell .box{min-width:86px; padding:12px 10px; border:2px solid var(--accent); border-radius:8px; background:var(--accent-soft); font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink);}
.arr-cell .idx{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-faint);}
.arr-cell.hl .box{border-color:var(--signal); background:var(--signal-soft);}
.arr-empty{font-family:"IBM Plex Mono",monospace; color:var(--ink-faint); font-size:13px;}
@keyframes cellIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ .arr-cell{animation:none;} }
.arr-ops{display:flex; gap:6px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--rule);}
.arr-ops input{font-family:"IBM Plex Mono",monospace; font-size:13px; padding:6px 8px; border:1px solid var(--rule); border-radius:3px; width:130px; background:var(--sheet); color:var(--ink);}
.arr-ops input.sm{width:56px;}
.arr-log{padding:10px 16px; border-top:1px solid var(--rule); background:var(--ground); font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink); min-height:64px; display:grid; gap:3px;}
.arr-log .note{font-family:"Newsreader",Georgia,serif; font-size:15px; color:var(--ink-soft);}

/* ---------- object inspector (3.7) ---------- */
.obj-card{margin:16px; border:2px solid var(--accent); border-radius:12px; background:var(--sheet); overflow:hidden; max-width:520px;}
.obj-card .top{padding:8px 14px; background:var(--accent); color:var(--sheet); font-family:"IBM Plex Mono",monospace; font-size:12.5px;}
.obj-row{display:grid; grid-template-columns:130px 1fr; gap:10px; padding:7px 14px; border-top:1px solid var(--rule); font-family:"IBM Plex Mono",monospace; font-size:13px; animation:cellIn .25s ease-out;}
.obj-row .k{color:var(--accent);}
.obj-row.hl{background:var(--signal-soft);}
.obj-row .nested{display:grid; gap:2px; padding-left:10px; border-left:2px solid var(--rule);}
.menu-tbl{margin:0 16px 14px; border-collapse:collapse; width:calc(100% - 32px); font-size:14.5px;}
.menu-tbl th,.menu-tbl td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--rule);}
.menu-tbl th{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.menu-tbl td.n{font-variant-numeric:tabular-nums;}

.mfr-stages{display:grid; gap:10px; margin:14px 16px;}
.mfr-stage{border:1px solid var(--rule); border-radius:8px; padding:10px 12px; background:var(--sheet);}
.mfr-stage .lbl{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; overflow-wrap:anywhere;}
.mfr-chips{display:flex; flex-wrap:wrap; gap:6px;}
.mfr-chip{font-family:"IBM Plex Mono",monospace; font-size:12.5px; padding:4px 8px; border-radius:4px; background:var(--accent-soft); color:var(--ink); border:1px solid var(--rule); max-width:100%; overflow-wrap:anywhere;}
.mfr-chip.gone{opacity:.35; text-decoration:line-through; background:transparent;}
.mfr-chip.one{background:var(--signal-soft); font-size:15px; font-weight:600;}
.mfr-arrow{text-align:center; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace; font-size:12px; overflow-wrap:anywhere;}
.errmsg{margin:14px 16px; padding:12px 14px; border-radius:6px; background:#2a1215; color:#ffb4b4; font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.7; overflow-wrap:anywhere;}
.errmsg .part{cursor:pointer; border-bottom:1px dashed currentColor; border-radius:2px; padding:0 2px;}
.errmsg .part:hover,.errmsg .part.on{background:rgba(255,255,255,.14);}
.errmsg .dim{color:#c98f8f;}
.bug-code{margin:14px 16px; border:1px solid var(--rule); border-radius:6px; overflow:hidden; font-family:"IBM Plex Mono",monospace; font-size:13px;}
.bug-code button{display:flex; gap:10px; width:100%; text-align:left; background:var(--sheet); color:var(--ink); border:0; border-bottom:1px solid var(--rule); padding:6px 10px; font:inherit; cursor:pointer; white-space:pre-wrap; overflow-wrap:anywhere;}
.bug-code button:last-child{border-bottom:0;}
.bug-code button .ln{color:var(--ink-faint); min-width:1.6em; flex:none;}
.bug-code button:hover{background:var(--accent-soft);}
.bug-code button.right{background:var(--signal-soft); font-weight:600;}
.bug-code button.wrong{text-decoration:line-through; opacity:.6;}
.scope-box{border:2px solid var(--rule); border-radius:10px; padding:10px 12px; margin-top:8px; background:var(--sheet);}
.scope-box.lit{border-color:var(--accent);}
.scope-box > .sname{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px;}
.scope-wrap{margin:14px 16px;}
.svar{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:12.5px; padding:3px 8px; margin:2px 4px 2px 0; border-radius:4px; border:1px solid var(--rule); overflow-wrap:anywhere;}
.svar.yes{background:var(--accent-soft); border-color:var(--accent);}
.svar.no{opacity:.4; text-decoration:line-through;}
.svar.here{outline:2px solid var(--signal); outline-offset:1px;}
.tk-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:14px 16px;}
.tk{border:1px solid var(--rule); border-radius:8px; padding:12px; background:var(--sheet);}
.tk .nm{font-weight:600; margin-bottom:6px;}
.tk .num{font-family:"IBM Plex Mono",monospace; font-size:26px; color:var(--accent); margin:4px 0 8px;}
.tk .priv{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-faint);}
.xl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:14px 16px;}
.xl-grid .col .lbl{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px;}
.xl-grid .col.old pre{opacity:.75;}
.xl-grid pre.snip{margin:0;}
.dvars{display:flex; flex-wrap:wrap; gap:8px; margin:12px 16px;}
.dvar{font-family:"IBM Plex Mono",monospace; font-size:12.5px; padding:6px 10px; border-radius:6px; border:1px solid var(--accent); background:var(--accent-soft); overflow-wrap:anywhere; max-width:100%;}
.dvar b{color:var(--accent); font-weight:600;}
.cs-wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:14px 16px;}
.cs-code{font-family:"IBM Plex Mono",monospace; font-size:12.5px; border:1px solid var(--rule); border-radius:6px; padding:8px 0; background:var(--sheet); overflow-x:auto;}
.cs-code div{padding:1px 10px; white-space:pre;}
.cs-code div.cur{background:var(--signal-soft); box-shadow:inset 3px 0 0 var(--signal);}
.cs-side .lbl{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px;}
.stk{display:flex; flex-direction:column-reverse; gap:4px; min-height:150px; border:2px dashed var(--rule); border-top:0; border-radius:0 0 8px 8px; padding:6px;}
.stk .fr{font-family:"IBM Plex Mono",monospace; font-size:12.5px; padding:7px 10px; border-radius:5px; background:var(--accent-soft); border:1px solid var(--accent); overflow-wrap:anywhere;}
.stk .fr.top{background:var(--accent); color:var(--sheet);}
.cs-queue{display:flex; gap:6px; flex-wrap:wrap; min-height:34px; border:1px dashed var(--rule); border-radius:6px; padding:6px; margin-bottom:10px;}
.cs-queue .fr{font-family:"IBM Plex Mono",monospace; font-size:12px; padding:4px 8px; border-radius:4px; background:var(--signal-soft); border:1px solid var(--signal);}
.cs-out{font-family:"IBM Plex Mono",monospace; font-size:12.5px; border:1px solid var(--rule); border-radius:6px; padding:8px 10px; min-height:40px; background:var(--sheet); margin-top:10px; white-space:pre-wrap;}
.ghost-btn.on{border-color:var(--accent); color:var(--accent);}
.tb-in{display:block; width:calc(100% - 32px); margin:10px 16px; min-height:120px; font-family:"IBM Plex Mono",monospace; font-size:13px; line-height:1.5; padding:10px; border:1px solid var(--rule); border-radius:6px; background:var(--sheet); color:var(--ink); resize:vertical; box-sizing:border-box;}
.tb-tree{margin:10px 16px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; border:1px solid var(--rule); border-radius:8px; padding:8px; background:var(--sheet); overflow-x:auto; min-height:40px;}
.tb-tree button{display:block; background:none; border:0; color:var(--ink); font:inherit; padding:2px 6px; cursor:pointer; border-radius:3px; text-align:left; white-space:nowrap;}
.tb-tree button.txt{color:var(--ink-faint); font-style:italic;}
.tb-tree button.fix{color:var(--signal); font-weight:600;}
.tb-tree button:hover,.tb-tree button.on{background:var(--accent-soft);}
.wk-stage{margin:14px 16px;}
.wk-menu{border:1px solid var(--rule); border-radius:10px; padding:12px 14px; background:var(--sheet); max-width:380px;}
.wk-menu h4{margin:0 0 2px; font-size:18px;} .wk-menu p{margin:0;} .wk-addr{font-size:13px; color:var(--ink-soft);} .wk-menu ul{margin:8px 0; padding-left:20px;} .wk-note{font-size:13px; color:var(--ink-faint);}
.wk-hl{outline:3px solid var(--signal); outline-offset:2px; border-radius:3px;}
.sel-page{margin:14px 16px; border:1px solid var(--rule); border-radius:10px; padding:12px 14px; background:var(--sheet);}
.sel-page h3{margin:0; font-size:17px;} .sel-page h4{margin:10px 0 4px; font-size:14px;} .sel-page p{margin:0;} .sel-page .tagline{font-size:12.5px; color:var(--ink-soft);}
.sel-page ul{margin:0; padding-left:18px;} .sel-page li{padding:2px 0; font-size:14px;} .sel-page .price{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-soft);}
.sel-hit{outline:2px solid var(--accent); outline-offset:1px; border-radius:3px; background:var(--accent-soft);}
.sel-first{outline:3px solid var(--signal);}
.sel-first::after{content:"1st"; font-family:"IBM Plex Mono",monospace; font-size:10px; background:var(--signal); color:#fff; padding:0 4px; border-radius:3px; margin-left:6px;}
.sel-bar{display:flex; align-items:center; gap:4px; margin:10px 16px; font-size:13px; flex-wrap:wrap;}
.sel-bar input{flex:1 1 140px; min-width:0; font-family:"IBM Plex Mono",monospace; font-size:13px; padding:6px 8px; border:1px solid var(--rule); border-radius:4px; background:var(--sheet); color:var(--ink);}
.bk-stage{margin:14px 16px;}
.bk-card{border:2px solid var(--rule); border-radius:10px; padding:12px 14px; background:var(--sheet); max-width:380px;}
.bk-card h4{margin:0; font-size:18px;} .bk-card .by{margin:0 0 6px; font-size:13px; color:var(--ink-soft);} .bk-card .pr{font-family:"IBM Plex Mono",monospace; margin:0 0 6px;}
.bk-card ul{margin:4px 0 0; padding-left:18px; font-size:14px;} .bk-card .flag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; background:var(--signal-soft); border:1px solid var(--signal); padding:1px 6px; border-radius:3px; margin-bottom:6px;}
.bk-card.sold{opacity:.55;} .bk-card.sold .pr{text-decoration:line-through;}
.bk-card[data-status="reserved"]{border-color:var(--signal);}
.lb-pick{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:14px 16px 10px;}
.lb-pick label{display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink-soft);}
.lb-pick select,.lb-targets input{font:inherit; font-size:14.5px; padding:6px 8px; border:1px solid var(--rule); border-radius:5px; background:var(--sheet); color:var(--ink); max-width:100%;}
.lb-targets{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 16px;}
.lb-targets input{flex:1 1 140px; min-width:0;}
.lb-box{padding:10px 14px; border:1px dashed var(--accent); border-radius:6px; font-size:13.5px;}
.lb-flash{animation:lbflash .5s;}
@keyframes lbflash{0%{box-shadow:0 0 0 4px var(--signal);} 100%{box-shadow:0 0 0 0 transparent;}}
@media (prefers-reduced-motion: reduce){.lb-flash{animation:none; outline:3px solid var(--signal);}}
.ev-log2{margin:0 16px 16px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; border:1px solid var(--rule); border-radius:6px; padding:8px 10px; height:140px; overflow:auto; background:var(--sheet);}
.ev-log2 div{padding:2px 0; border-bottom:1px solid var(--rule); overflow-wrap:anywhere;}
.bb-wrap{position:relative; margin:14px 16px; padding:26px 12px 12px; border:2px solid var(--rule); border-radius:10px; transition:background .2s;}
.bb-card{position:relative; padding:26px 12px 12px; border:2px solid var(--accent); border-radius:8px; background:var(--sheet); transition:background .2s;}
.bb-p{margin:0 0 8px; font-size:14px;}
.bb-lbl{position:absolute; top:5px; left:10px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-faint);}
.bb-hot{background:var(--signal-soft) !important;}
.tip-app{margin:14px 16px; display:grid; gap:12px; max-width:420px;}
.tip-app > label{display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:600; flex-wrap:wrap;}
.tip-money{display:flex; align-items:center; gap:4px; font-family:"IBM Plex Mono",monospace;}
.tip-money input{width:110px; font:inherit; font-size:16px; padding:6px 8px; border:1px solid var(--rule); border-radius:5px; background:var(--sheet); color:var(--ink);}
.tip-pcts{display:flex; gap:6px; flex-wrap:wrap;}
.tip-pcts .on{background:var(--accent); color:var(--sheet);}
.tip-ppl{display:flex; align-items:center; gap:8px;} .tip-ppl output{min-width:2ch; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:17px;}
.tip-out{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid var(--rule); padding-top:10px;}
.tip-out span{display:block; font-size:12px; color:var(--ink-faint);} .tip-out b{font-family:"IBM Plex Mono",monospace; font-size:17px; color:var(--accent);}
.fv2-err{margin:2px 0 0; font-size:13.5px; color:var(--bad);}
.fv2-err:not(:empty)::before{content:"⚠ ";}
.tm-modes{display:flex; flex-wrap:wrap; gap:6px 16px; margin:14px 16px 8px; font-size:14px;}
.tm-form{margin:0 16px 12px; display:grid; gap:4px; max-width:420px;}
.tm-form label{font-weight:600; font-size:14px;}
.tm-form input,.rz-row input,.rz-row textarea{font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--rule); border-radius:5px; background:var(--sheet); color:var(--ink); max-width:100%; min-width:0; box-sizing:border-box; width:100%;}
.tm-row{display:flex; gap:8px; margin-top:8px;} .tm-row input{flex:1;}
.tm-form input[aria-invalid="true"],.rz-row [aria-invalid="true"]{border-color:var(--bad); box-shadow:0 0 0 1px var(--bad);}
.rz-form{margin:14px 16px 18px; display:grid; gap:10px; max-width:460px;}
.rz-row{display:grid; gap:4px; min-width:0;} .rz-row label{font-weight:600; font-size:14px;}
.rz-two{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
.rz-hint{font-weight:400; font-size:12.5px; color:var(--ink-faint); margin:0;}
.rz-summary{border:2px solid var(--bad); border-radius:8px; padding:10px 14px; background:var(--sheet);}
.rz-summary:focus{outline:3px solid var(--signal); outline-offset:2px;}
.rz-summary h4{margin:0 0 6px; font-size:15px; color:var(--bad);} .rz-summary ul{margin:0; padding-left:18px;} .rz-summary a{color:var(--bad);}
.rz-done{border:2px solid var(--good); border-radius:8px; padding:10px 14px;}
.si-form{display:flex; flex-wrap:wrap; gap:10px; margin:14px 16px 4px;}
.si-form label{display:flex; flex-direction:column; gap:3px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-faint); flex:1 1 140px; min-width:0;}
.si-form input,.gl-form input,.pf-form select{font:inherit; font-family:"IBM Plex Mono",monospace; font-size:14px; padding:6px 8px; border:1px solid var(--rule); border-radius:5px; background:var(--sheet); color:var(--ink); min-width:0;}
#si-body td{font-family:"IBM Plex Mono",monospace; font-size:12.5px; overflow-wrap:anywhere;}
.gl-form{display:flex; gap:8px; margin:14px 16px 6px;} .gl-form input{flex:1; font-family:inherit;}
.gl-list{list-style:none; margin:6px 16px; padding:0; min-height:28px;}
.gl-list li{display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--rule);}
.gl-list li span{flex:1;} .gl-list li.done span{text-decoration:line-through; color:var(--ink-faint);}
.gl-list li button{background:none; border:0; color:var(--bad); cursor:pointer; font-size:13px;}
.gl-lbl{margin:8px 16px 4px; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-faint); overflow-wrap:anywhere;}
.pf-wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:14px 16px;}
.pf-form{display:grid; gap:10px; font-size:14px;} .pf-form fieldset{border:1px solid var(--rule); border-radius:6px; padding:6px 10px; margin:0;} .pf-form legend{font-size:12px; color:var(--ink-faint);}
.pf-card{border:1px solid var(--rule); border-radius:10px; padding:14px; background:var(--sheet);}
.pf-card .t{font-size:34px; font-weight:700; color:var(--accent); font-family:"IBM Plex Mono",monospace;}
.pf-card.compact{padding:6px 10px;} .pf-card.compact .t{font-size:20px;} .pf-card.compact .extra{display:none;}
.fz-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:14px 16px 6px;}
.fz-clock{font-family:"IBM Plex Mono",monospace; font-size:30px; color:var(--accent); min-width:6ch;}
.pr-box{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:14px 16px 6px;}
.pr-state{font-family:"IBM Plex Mono",monospace; font-size:14px; padding:6px 12px; border-radius:20px; border:2px solid var(--signal); background:var(--signal-soft);}
.pr-state.ok{border-color:var(--good); background:transparent; color:var(--good);}
.pr-state.bad{border-color:var(--bad); background:transparent; color:var(--bad);}
.pr-val{font-family:"IBM Plex Mono",monospace; font-size:13px; overflow-wrap:anywhere;}
.tp-lanes{margin:12px 16px; display:grid; gap:7px;}
.tp-lane{display:grid; grid-template-columns:64px 1fr; gap:8px; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:12px;}
.tp-track{position:relative; height:20px; background:var(--ground); border:1px solid var(--rule); border-radius:4px; overflow:hidden;}
.tp-bar{position:absolute; top:0; bottom:0; width:0; background:var(--accent-soft); border-right:3px solid var(--accent);}
.tp-bar.ok{background:var(--accent);} .tp-bar.bad{background:var(--bad); border-color:var(--bad);}
.tp-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:0 16px 12px;}
.tp-card{border:1px solid var(--rule); border-radius:8px; padding:8px 10px; font-size:13.5px; background:var(--sheet);}
.tp-card b{display:block; font-size:11px; font-family:"IBM Plex Mono",monospace; color:var(--ink-faint); font-weight:400; text-transform:uppercase; letter-spacing:.1em;}
.tp-card.bad{border-color:var(--bad); color:var(--bad);}
.hx-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; margin:12px 16px;}
.hx-lbl{margin:0 0 4px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.hx-pre{margin:0; min-height:140px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px;}
.hx-tgls{display:flex; gap:10px; flex-wrap:wrap; margin-left:auto;}
.ls7-bar{display:flex; gap:10px; align-items:center; margin:14px 16px 6px; flex-wrap:wrap;}
.ls7-bar input{flex:1 1 180px; min-width:0; font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--rule); border-radius:5px; background:var(--sheet); color:var(--ink);}
.ls7-status{font-size:13px; color:var(--ink-soft);}
.ls7-results{list-style:none; margin:4px 16px; padding:0; min-height:30px;}
.ls7-results li{padding:6px 0; border-bottom:1px solid var(--rule); font-size:14.5px;}
.ls7-results li small{color:var(--ink-faint);}
.ls7-results li.err{color:var(--bad); border:0;}
.ev-log3{margin:0 16px 16px; font-family:"IBM Plex Mono",monospace; font-size:12px; border:1px solid var(--rule); border-radius:6px; padding:8px 10px; height:130px; overflow:auto; background:var(--sheet);}
.ev-log3 div{padding:1px 0; overflow-wrap:anywhere;}
.rt-tbl td{font-family:"IBM Plex Mono",monospace; font-size:12.5px; overflow-wrap:anywhere;}
.rt-tbl td.lost{color:var(--bad);} .rt-tbl td.changed{color:var(--signal);}
.fx-item{padding:12px 16px; border-bottom:1px solid var(--rule);}
.fx-item h4{margin:0 0 6px; font-size:14.5px;}
.fx-item textarea{display:block; width:100%; box-sizing:border-box; min-height:64px; font-family:"IBM Plex Mono",monospace; font-size:13px; padding:8px; border:1px solid var(--rule); border-radius:5px; background:var(--sheet); color:var(--ink); resize:vertical;}
.fx-item .fx-msg{margin:6px 0 0; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--bad); overflow-wrap:anywhere;}
.fx-item.ok textarea{border-color:var(--good);} .fx-item.ok .fx-msg{color:var(--good);}
.pf8-tree{margin:12px 16px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.65; border:1px solid var(--rule); border-radius:8px; padding:10px; background:var(--sheet); overflow-x:auto; white-space:pre;}
.pf8-tree .v{cursor:pointer; border-radius:3px; padding:0 2px; color:var(--accent);}
.pf8-tree .v:hover,.pf8-tree .v:focus{background:var(--accent-soft);}
.pf8-tree .v:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.pf8-tree .v.on{background:var(--signal-soft); color:var(--ink);}
.pf8-tree .k{color:var(--ink-soft);}
/* ---------- recall + solution components ---------- */
.recall{margin:18px 0 6px; border-left:4px solid var(--ink-faint); background:var(--ground); border-radius:0 8px 8px 0; padding:10px 14px;}
.recall summary{cursor:pointer; font-weight:600; font-size:15px; list-style:none;}
.recall summary::-webkit-details-marker{display:none;}
.recall summary::before{content:"↺ "; color:var(--ink-soft);}
.recall .rk{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:2px; font-weight:400;}
.recall p{margin:8px 0 0; font-size:15.5px;}
.recall[open] summary::after{content:"";}
.solution{margin:0; border-top:1px dashed var(--rule); padding:12px 18px 14px;}
.solution summary{cursor:pointer; font-weight:600; color:var(--accent); font-size:15px;}
.solution summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.solution .sol-body{margin-top:10px;}
.solution .sol-body h5{margin:12px 0 4px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:400;}
.solution .sol-body p,.solution .sol-body li{font-size:15px;}
.solution .sol-body pre.snip{margin:6px 0;}
.practice-tag{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-faint); margin-left:6px;}
/* ---------- right/wrong code pair ---------- */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin:20px 0;}
@media (max-width:640px){ .pair{grid-template-columns:1fr;} }
.pair .side{padding:14px 16px;}
.pair .side + .side{border-left:1px solid var(--rule);}
@media (max-width:640px){ .pair .side + .side{border-left:0; border-top:1px solid var(--rule);} }
/* ---------- small screens only (phones): nothing here applies above 640px ---------- */
@media (max-width:640px){
  .pair{grid-template-columns:minmax(0,1fr);}
  .pair .side{min-width:0;}
  .pair pre, .sheet pre{max-width:100%; overflow-x:auto;}
  .menu-tbl{display:block; overflow-x:auto; width:auto; max-width:calc(100% - 32px);}
  .menu-tbl th{letter-spacing:.06em;}
  .q .qt{grid-template-columns:26px minmax(0,1fr);}
  .opts{grid-template-columns:minmax(0,1fr);}
  .opt{min-width:0;}
  .q .qt span, .opt span{min-width:0; overflow-wrap:anywhere;}
  .oswitch{display:flex; flex-wrap:wrap; max-width:100%;}
  .oswitch button{flex:1 1 auto;}
}
.pair h6{margin:0 0 8px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:400;}
.pair .good h6{color:var(--good);} .pair .bad h6{color:var(--bad);}
.pair pre{margin:0 0 8px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.7; overflow-x:auto; color:var(--ink);}
.pair p{margin:0; font-size:15px; color:var(--ink-soft);}

/* ---------- decision tool (0.5) ---------- */
.picker{border:1px solid var(--rule); border-radius:3px; margin:22px 0; overflow:hidden;}
.picker-head{padding:12px 16px; background:var(--ground); border-bottom:1px solid var(--rule); font-family:"Archivo",sans-serif; font-weight:600; font-size:14px;}
.reqs{padding:6px 0;}
.reqgrp{padding:8px 16px 10px;}
.reqgrp h6{margin:6px 0 6px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.req{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:6px 0; cursor:pointer; align-items:start;}
.req input{appearance:none; width:16px; height:16px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); cursor:pointer; position:relative; margin:4px 0 0; flex:none;}
.req input:checked{background:var(--accent); border-color:var(--accent);}
.req input:checked::after{content:""; position:absolute; left:4.5px; top:1px; width:5px; height:9px; border:solid var(--sheet); border-width:0 2px 2px 0; transform:rotate(42deg);}
.req input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.req .rt{font-size:16px; line-height:1.45; max-width:58ch;}
.verdict-card{border-top:1px solid var(--rule); padding:18px 16px; background:var(--ground);}
.vbadge{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--accent); color:var(--accent); padding:4px 9px; border-radius:2px; margin-bottom:9px;}
.vbadge.t3{border-color:var(--signal); color:var(--signal);}
.verdict-card h5{margin:0 0 6px; font-family:"Archivo",sans-serif; font-size:21px; letter-spacing:-.01em;}
.verdict-card .vwhy{margin:0 0 10px; font-size:16px; color:var(--ink-soft); max-width:64ch;}
.verdict-card ul{margin:0 0 10px; padding-left:20px;}
.verdict-card li{font-size:15.5px; color:var(--ink-soft); margin-bottom:3px;}
.verdict-card .vlearn{margin:0; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-faint);}

/* ---------- scenario reveals (0.5) ---------- */
.scen{border:1px solid var(--rule); border-radius:3px; margin:16px 0; overflow:hidden;}
.scen .client{padding:15px 16px; font-size:16.5px; line-height:1.5; max-width:66ch;}
.scen .client i{font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:5px;}
.scen .revealbar{padding:0 16px 15px;}
.scen .answer{display:none; border-top:1px solid var(--rule); padding:15px 16px; background:var(--ground);}
.scen .answer.show{display:block;}
.scen .answer b{font-family:"Archivo",sans-serif; font-size:15px; display:block; margin-bottom:4px;}
.scen .answer p{margin:0 0 8px; font-size:15.5px; color:var(--ink-soft); max-width:64ch;}
.scen .answer p:last-child{margin-bottom:0;}

/* ---------- build checklist (0.3) ---------- */
.build{border:2px solid var(--ink); border-radius:4px; margin:26px 0 0; overflow:hidden;}
.build-head{padding:16px 20px; border-bottom:1px solid var(--rule); background:var(--ground);}
.build-head .label{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--signal);}
.build-head h3{margin:4px 0 0; font-size:20px;}
.build-body{padding:6px 0;}
.bitem{display:grid; grid-template-columns:26px 1fr; gap:10px; padding:11px 20px; border-bottom:1px solid var(--rule); align-items:start; cursor:pointer;}
.bitem:last-child{border-bottom:0;}
.bitem input{appearance:none; width:17px; height:17px; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); cursor:pointer; position:relative; margin:3px 0 0; flex:none;}
.bitem input:checked{background:var(--accent); border-color:var(--accent);}
.bitem input:checked::after{content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--sheet); border-width:0 2px 2px 0; transform:rotate(42deg);}
.bitem input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.bitem .txt{font-size:16px; line-height:1.5; max-width:60ch;}
.bitem input:checked ~ .txt{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--rule);}
.build-foot{padding:16px 20px; border-top:1px solid var(--rule); display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;}
.build-foot .score{font-family:"Archivo",sans-serif; font-weight:700; font-size:17px; font-variant-numeric:tabular-nums;}
.build-foot .verdict{font-size:16px; color:var(--ink-soft); max-width:56ch;}

/* ---------- print: A4, full color (book export; also works with Ctrl+P) ---------- */
@page{ size:A4; margin:16mm 15mm 18mm; }
@media print{
  :root{ color-scheme:light; }
  html{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body{ background:#fff !important; background-image:none !important; font-size:10.5pt; line-height:1.5; color:var(--ink); }
  .masthead,.rail,.nextbar,.xback,#view-roadmap,.mark-done,.quiz-foot,.ghost-btn{ display:none !important; }
  .shell{ display:block; max-width:none; margin:0; padding:0; }
  main{ display:block; }
  #view-lesson{ display:block !important; }
  article.lesson{ display:block !important; break-before:page; }
  article.lesson:first-of-type{ break-before:auto; }
  .sheet{ border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; background:#fff !important; }
  .sheet h2{ font-size:22pt; }
  .sheet h3{ font-size:14pt; margin-top:20pt; }
  .sheet h4{ font-size:11pt; }
  h2,h3,h4,h5,.eyebrow,.quiz-head,.callout > .label{ break-after:avoid; }
  p,li,dd{ orphans:3; widows:3; }
  .callout,.co,.tblwrap,table,tr,pre,.snip,figure,.keyrow,.quiz .q,.case{ break-inside:avoid; }
  .print-only > p,.print-only > h4{ break-inside:avoid; }
  pre,.snip{ white-space:pre-wrap; font-size:9pt; line-height:1.4; }
  table{ font-size:9.5pt; width:100%; }
  .tblwrap{ overflow:visible !important; }
  details > *{ display:revert; }
  .quiz .opt,.case .opt{ cursor:default; }
  a{ color:inherit; }
  a.xref{ text-decoration:none; color:var(--accent); }
  a[href^="http"]:not(.xref)::after{ content:" (" attr(href) ")"; font-size:8pt; color:var(--ink-soft); overflow-wrap:anywhere; }
  #keys,#cost-out{ display:none !important; }
}
/*wbm:css:start*/
.colophon{--wbm-mark:"jennetjagonwham"; max-width:1240px; margin:0 auto; padding:26px 22px 60px; border-top:1px solid var(--rule); color:var(--ink-soft); font-size:14px; line-height:1.5;}
.colophon p{margin:0 0 6px; max-width:78ch;}
.colophon-meta{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--ink-faint);}
.wbm-m{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media print{ .colophon{display:none !important;} }
/*wbm:css:end*/

/* site build additions */
a.mod-link, a.mod-row { text-decoration:none; }
.mod-link.locked { opacity:.62; }
.mod-row.locked .ttl::after { content:" \00B7  full pack"; font-size:.82em; font-weight:400; color:var(--ink-faint); }
.crumbs { font-size:14px; margin:0 0 14px; color:var(--ink-soft); }
.crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 8px; }
.crumbs li + li::before { content:"\203A"; margin-right:8px; color:var(--ink-faint); }
.crumbs a { color:inherit; }
#view-lesson > .crumbs { margin-top:18px; }
.grp-lead { font-size:19px; line-height:1.5; color:var(--ink-soft); max-width:62ch; }
.grp-main { max-width:900px; margin:0 auto; padding:28px 16px 56px; }

.sheet h1{font-size:clamp(26px,3.4vw,38px); line-height:1.12; margin:0 0 14px; letter-spacing:-.02em; text-wrap:balance;}
.brand .sitename{font-size:19px; margin:0; font-weight:700; letter-spacing:-.01em;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;}
.lesson h1:focus{outline:none;}
@media print{.sheet h1{font-size:22pt;}}

/* selling and utility pages */
.top-links { margin-left:auto; display:flex; gap:6px 18px; flex-wrap:wrap; font:600 13px "Archivo",sans-serif; }
.top-links a { color:var(--ink-soft); text-decoration:none; padding:6px 0; }
.top-links a:hover { color:var(--accent); }
.foot-links { max-width:900px; margin:0 auto; padding:0 16px 12px; display:flex; gap:6px 22px; flex-wrap:wrap; font:600 14px "Archivo",sans-serif; }
.foot-links a { color:var(--ink-soft); }
.land .sheet { margin-bottom:22px; }
.land .hero h1 { font-size:clamp(34px,6vw,58px); line-height:1.05; margin:0 0 14px; letter-spacing:-.03em; }
a.btn, a.ghost-btn { display:inline-block; text-decoration:none; }
.btn.big, .ghost-btn.big { font-size:16px; padding:13px 22px; border-radius:4px; }
.ghost-btn.big { letter-spacing:0; }
.cta { margin:18px 0; display:flex; gap:12px; flex-wrap:wrap; }
.trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.trio h3 { margin:0 0 6px; font-size:19px; }
.trio p { margin:0; color:var(--ink-soft); }
.phases-list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.phases-list li { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:start; }
.phases-list .ph-n { font:600 15px "IBM Plex Mono",monospace; color:var(--accent); border:1px solid var(--rule); text-align:center; padding:6px 0; background:var(--accent-soft); }
.phases-list .ph-d { color:var(--ink-soft); }
.land-cmp th, .land-cmp td { text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--rule); }
.land-cmp { min-width:0 !important; }
.land details { border-top:1px solid var(--rule); padding:12px 0; }
.land summary { cursor:pointer; font:600 17px "Archivo",sans-serif; }
.land details p { margin:10px 0 0; color:var(--ink-soft); }
.plain-list { padding-left:20px; }
.legal h2 { font-size:22px; margin:28px 0 8px; letter-spacing:-.01em; }
.draft-ribbon { border-left:4px solid var(--signal); background:var(--signal-soft); padding:12px 16px; border-radius:0 6px 6px 0; margin:0 0 18px; }
.sitebar { display:flex; flex-wrap:wrap; gap:4px 20px; align-items:center; padding:8px 22px; background:#141F1D; font:600 13px "Archivo",sans-serif; }
.sitebar a { color:#F1F4F3; text-decoration:none; padding:3px 0; }
.sitebar a:hover, .sitebar a:focus-visible { text-decoration:underline; }
.sitebar .sb-brand { margin-right:auto; }
.upsell { max-width:900px; margin:22px 0 8px; padding:16px 20px; border:1px solid var(--rule); border-left:4px solid var(--accent); background:var(--sheet); border-radius:0 6px 6px 0; }
.upsell p { margin:0; }
@media print { .sitebar, .upsell { display:none !important; } }
.grp-note { color:var(--ink-faint); font-size:14px; margin-top:22px; }
.land h2 { margin-top:26px; }
.land .hero h2, .land section:first-child h2 { margin-top:0; }
.plain-list li { margin:6px 0; }
.pay-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:18px 0; }
.pay p { margin:8px 0 0; color:var(--ink-soft); font-size:15px; }
.price { font:700 32px "Archivo",sans-serif; margin:6px 0 0; }
.callout-soon { border-left:4px solid var(--signal); background:var(--signal-soft); padding:16px 20px; border-radius:0 6px 6px 0; }
.callout-soon h2 { margin-top:0; }
@media (max-width:520px){ .top-links { margin-left:0; width:100%; } }