/* Open Note — site/css/sections.css
   every section's own furniture, top to bottom of the page. */

/* the lamp over the desk */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.055),transparent 60%)}

.skip{position:fixed;top:-60px;left:16px;z-index:200;padding:10px 16px;border-radius:6px;
  background:var(--accent);color:#fff;font-family:var(--mono);font-size:12px;
  text-decoration:none;transition:top .15s}
.skip:focus{top:12px}

/* the lite glass — same material, no backdrop blur (from the app's inkbar) */
.glass-lite{
  color:var(--deskink);border-radius:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 45%,rgba(255,255,255,0) 75%),
    color-mix(in srgb, var(--desk) 56%, rgb(12 14 19 / .9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 1.5px 0 rgba(255,255,255,.12),
    0 10px 30px rgba(0,0,0,.35);
}

/* ================================================================
   HERO — a window onto one endless sheet
   ================================================================ */
.hero{padding:calc(var(--navh) + clamp(22px,4vh,46px)) 0 clamp(48px,7vh,84px)}
.heropaper{
  position:relative;height:min(86svh,820px);overflow:hidden;
  transform:rotate(-.35deg);
  cursor:grab;
  touch-action:pan-y;               /* fingers still scroll; a pressed chip arms touch */
}
.heropaper.panning{cursor:grabbing}
.heropaper.tool-ink{cursor:var(--pencil-cursor)}
.heropaper.inkarmed{touch-action:none}

/* the sheet itself — bigger than the window that shows it */
.herocanvas{
  position:absolute;left:0;top:0;width:2400px;height:1560px;
  will-change:transform;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:26px 26px;
}
.herocanvas .grain{z-index:0}

/* the hatched rails that grow the sheet in the app */
.herocanvas .rail{position:absolute;z-index:1;opacity:.45;pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0 3px,var(--accent2) 3px 5px)}
.herocanvas .rail.r{right:0;top:0;bottom:0;width:13px}
.herocanvas .rail.b{bottom:0;left:0;right:0;height:13px}

.herotext{position:absolute;left:84px;top:88px;z-index:3;width:min(560px,calc(100vw - 130px))}
.herotext .kicker{display:block;margin-bottom:20px;color:var(--soft)}
.herotext .kicker::before{content:"";display:inline-block;width:26px;height:2px;background:var(--accent);
  vertical-align:middle;margin-right:12px}
.herolede{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6;color:color-mix(in srgb, var(--ink) 78%, var(--paper));
  max-width:44ch;margin:22px 0 26px;text-wrap:pretty}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:3}
.heropaper .btn.ghost{color:var(--soft)}
.heropaper .btn.ghost:hover{color:var(--ink);border-color:color-mix(in srgb, var(--ink) 25%, transparent)}
.slug{position:absolute;left:46px;top:16px;z-index:2;display:flex;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.folio{position:absolute;right:20px;top:14px;z-index:8;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--soft)}

/* --- the wordmark: the logo is the O, and Note keeps becoming Source --- */
.brandline{color:var(--ink)}
.brandline .row1{display:flex;align-items:center;gap:.05em;height:.94em}
.o-logo{height:.78em;width:auto;border-radius:20%;flex:none;
  box-shadow:0 .045em .14em rgba(0,0,0,.32)}
.flipword{display:block;height:.94em;overflow:hidden}
.flipword .roll{display:block}
.flipword .w{display:block;height:.94em}
.flipword .w.alt{color:var(--accent)}
html.js .flipword .roll{animation:wordroll 8s cubic-bezier(.65,0,.2,1) 2.4s infinite}
@keyframes wordroll{
  0%,46%{transform:translateY(0)}
  54%,88%{transform:translateY(-50%)}
  96%,100%{transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){ html.js .flipword .roll{animation:none} }

/* --- the layers over the paper: string under items, ink over them --- */
.stringlayer,.inklayer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.stringlayer{z-index:5}
.inklayer{z-index:7}

/* --- things on the sheet --- */
.hitem{position:absolute;z-index:4;user-select:none;-webkit-user-select:none;touch-action:none;
  cursor:grab;will-change:transform}
.hitem.dragging{cursor:grabbing;z-index:9;filter:drop-shadow(0 12px 16px rgba(0,0,0,.3))}
.hitem:active{cursor:grabbing}
/* the app's real items on the hero sheet drag like everything else taped on */
.herocanvas .item{z-index:4;user-select:none;-webkit-user-select:none;touch-action:none;
  cursor:grab;will-change:transform}
.herocanvas .item.dragging{cursor:grabbing;z-index:9;filter:drop-shadow(0 12px 16px rgba(0,0,0,.3))}
.herocanvas .item.editing{cursor:auto}
.herocanvas .item > .tools{display:none}     /* the sheet is for playing, not configuring */
.herocanvas .item.editing > .tools,
.herocanvas .item:focus-within > .tools{display:flex}
.herocanvas .item .txt{min-width:60px}

.pinhead{position:absolute;top:-8px;left:50%;margin-left:-8px;width:16px;height:16px;border-radius:50%;
  z-index:6;background:radial-gradient(circle at 34% 30%,#ff8a70,#cf3a24 58%,#8e2211);
  box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.5)}
.hphoto .pinhead{left:auto;right:18px;margin-left:0}

.hsticky{left:690px;top:118px;width:200px}
.stickynote{
  background:var(--stickypaper);color:var(--ink);padding:20px 18px 26px;
  font-family:var(--hand);font-size:21px;line-height:1.15;font-weight:600;
  box-shadow:0 10px 22px rgba(0,0,0,.3);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.stickynote::after{content:"";position:absolute;right:0;bottom:0;width:20px;height:20px;
  background:linear-gradient(315deg,transparent 50%,rgba(0,0,0,.16) 50%,rgba(0,0,0,.05) 72%,transparent 72%)}
.stickynote small{display:block;margin-top:7px;font-size:15px;font-weight:600;
  color:color-mix(in srgb, var(--ink) 58%, var(--stickypaper))}

/* the checklist is the app's real item now — js/demo-hero.js mounts it */

.hphoto{left:1250px;top:200px;width:244px;margin:0;
  background:var(--cardpaper);padding:9px 9px 7px;box-shadow:0 12px 26px rgba(0,0,0,.32)}
.hphoto img{display:block;width:100%;height:auto;border-radius:2px}
.hphoto figcaption{font-family:var(--mono);font-size:10px;color:var(--soft);padding-top:7px;letter-spacing:.04em}
.washi{position:absolute;left:-26px;top:-13px;width:96px;height:26px;transform:rotate(-38deg);z-index:2;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 2px,transparent 2px 8px),
    var(--tape);
  box-shadow:0 1px 3px rgba(0,0,0,.18)}

.heq{left:430px;top:664px;background:var(--cardpaper);color:var(--ink);
  padding:12px 18px 9px;border-radius:3px;box-shadow:0 10px 22px rgba(0,0,0,.28);text-align:center}
.heq math{font-size:1.25rem}
.eqtag{display:block;margin-top:6px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft)}

/* the little cards further out — souvenirs of the sections below */
.hmol{left:1430px;top:620px;width:236px;display:block;text-decoration:none;
  background:var(--cardpaper);color:var(--ink);border-radius:4px;
  padding:10px 14px 8px;box-shadow:0 10px 22px rgba(0,0,0,.28)}
.hcard-head{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink)}
.hcard-head span{color:var(--soft)}
.hmolart{margin:4px 0 2px}
.hmolart svg{display:block;width:100%;height:auto}
.hcard-foot{font-family:var(--hand);font-size:18px;font-weight:600;color:var(--accent);padding-top:2px}

.hcode{left:1880px;top:330px;width:286px;display:block;text-decoration:none;
  background:#1e1e1e;border-radius:8px;padding:10px 13px 8px;
  box-shadow:0 12px 26px rgba(0,0,0,.35);
  --c-cm:#6a9955;--c-st:#ce9178;--c-nm:#b5cea8;--c-kw:#569cd6;--c-fl:#c586c0;
  --c-ty:#4ec9b0;--c-fn:#dcdcaa;--c-cn:#4fc1ff;--c-pp:#c586c0;--c-vr:#9cdcfe;--c-op:#d4d4d4}
.hcdots{display:flex;gap:5px;margin-bottom:8px}
.hcdots i{width:8px;height:8px;border-radius:50%;background:#ff5f57}
.hcdots i:nth-child(2){background:#febc2e}
.hcdots i:nth-child(3){background:#28c840}
.hcode pre{margin:0;font-family:var(--mono);font-size:11px;line-height:1.6;color:#d4d4d4;overflow:hidden}
.hcode .hcard-foot{color:#58b3c0}

.hfound{left:2020px;top:1290px;width:216px}

/* --- the stylus chip, and the map --- */
.stylusbar{position:absolute;left:22px;bottom:18px;z-index:8;display:flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:11px}

.heromap{position:absolute;right:16px;bottom:16px;z-index:8;width:132px;height:86px;
  border-radius:9px;overflow:hidden;cursor:pointer;touch-action:none}
.hmview{position:absolute;border:1.5px solid var(--accent);border-radius:3px;
  background:color-mix(in srgb, var(--accent) 13%, transparent);pointer-events:none}
.hmdot{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
  background:color-mix(in srgb, var(--deskink) 55%, transparent);pointer-events:none}

@media (max-width:860px){
  .heropaper{height:min(88svh,780px);transform:none}
  .herotext{left:26px;top:58px;width:calc(100vw - 116px)}
  .slug{left:26px}
  .folio{display:none}                 /* the map already says how big the sheet is */
  .hsticky{left:88px;top:590px}
  .heq{left:470px;top:700px}
  .stylusbar{left:10px;bottom:10px;padding:7px 8px;gap:5px}
  .stylusbar .tbtn{padding:6px 8px}
  .heromap{width:104px;height:68px;right:10px;bottom:64px}
}

/* ================================================================
   VIGNETTES (shared)
   ================================================================ */
.vignette{margin:0;min-width:0}
.solidpaper{position:relative;overflow:hidden}
.solidpaper > svg:not(.grain){display:block;width:100%;height:auto;position:relative;z-index:1}
.solidhint{position:absolute;left:18px;top:12px;z-index:2;font-family:var(--hand);
  font-size:19px;color:var(--soft);pointer-events:none}
/* .demobar, not .props — the app's own properties popover (js/app-props.js)
   injects a fixed-position .props of its own, and the two must not collide */
.demobar{
  position:relative;z-index:3;width:fit-content;max-width:100%;margin:-26px auto 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 16px;border-radius:12px;
}
.demobar label{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:color-mix(in srgb, var(--deskink) 70%, transparent)}
.demobar input[type=range]{width:86px;accent-color:var(--accent)}
.demobar output{font-size:10px;min-width:4ch;color:var(--deskink)}
.demobar .readout{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--deskink);white-space:nowrap}
.vcap{margin-top:20px;font-size:.94rem;line-height:1.55;color:var(--desksoft);max-width:56ch;text-wrap:pretty}
.vcap b{color:var(--deskink);font-weight:600}
.copy .kicker{display:block;margin-bottom:14px}
.copy h2{margin-bottom:20px}
.copy p{margin:0 0 1.05em}
.copy h3{margin:26px 0 10px;color:var(--deskink)}
code{font-family:var(--mono);font-size:.84em;background:color-mix(in srgb, var(--deskink) 9%, transparent);
  padding:.12em .4em;border-radius:4px}

/* the solid & plot papers want a fixed frame for their SVGs */
.plotpaper,.piepaper{padding:0}
.plotsvg{cursor:default}
.plotsvg .vhandle{cursor:grab}
.plotsvg .vhandle:active{cursor:grabbing}

/* ================================================================
   THE APP'S OWN ITEMS ON THE PAGE
   The widgets themselves (molecule, circuit, checklist, periodic table,
   text, sticker) carry their looks in the vendored js/app-*.js files and
   inject them at load. What lives here is only the host furniture the
   app's core stylesheet would normally provide: the .item chrome, its
   toolbar, and the hosts that play the page surface.
   ================================================================ */
.appage{position:relative;--scale:1}
.item{position:absolute;font-size:calc(var(--fs,18)*var(--scale)*1px)}
.item.hug{width:max-content}
/* the toolbar over an item — the app's mk() buttons */
.item > .tools{position:absolute;bottom:calc(100% + 9px);left:0;z-index:30;
  display:flex;gap:3px;padding:4px;border-radius:10px;white-space:nowrap;
  font-size:13px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 45%,rgba(255,255,255,0) 75%),
    color-mix(in srgb, var(--desk) 56%, rgb(12 14 19 / .9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.085),0 8px 22px rgba(0,0,0,.3)}
.item > .tools[hidden]{display:none}
.item > .tools button{min-width:27px;height:27px;padding:0 7px;border-radius:7px;border:0;
  color:rgba(233,234,239,.84);background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-family:var(--mono);font-size:12px;line-height:1;cursor:pointer;
  transition:background .12s,color .12s}
.item > .tools button:hover{background:rgba(255,255,255,.12);color:#fff}
.item > .tools button.on{background:var(--accent);color:#fff}
/* handles the site leaves out — except the molecule's scale dot */
.item .rs{display:none}
.item[data-type="molecule"] .rs{display:block;position:absolute;right:-7px;bottom:-7px;
  width:14px;height:14px;border-radius:50%;background:var(--accent2);cursor:nwse-resize;
  box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;transition:opacity .15s}
.item[data-type="molecule"]:hover .rs{opacity:.9}
/* dead buttons on a page that has no page: the app's "move about the sheet"
   tools, and the truth table's "put it on the sheet" */
.item > .tools [data-lc-act="move-canvas"]{display:none}
.lgttfoot{display:none}
/* the app's floating glass panels sit over the site's fixed nav */
#props.props,#molask.molask,#molexport.molexport,#lgtt.lgtt,#ptpick.ptpick,
.molmenu.molmenu{z-index:320}

/* ================================================================
   MOLECULE — the app's molecule item, mounted whole
   ================================================================ */
.molstage{max-width:1040px;margin:0 auto}
.molepaper{overflow:hidden}
.molhost{height:520px}
.molchips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:16px}
.molchips .tbtn{color:color-mix(in srgb, var(--deskink) 78%, transparent);
  border-color:color-mix(in srgb, var(--deskink) 17%, transparent)}
.molchips .tbtn:hover{color:var(--deskink);border-color:var(--accent)}
.molchips .tbtn.on{color:var(--deskink);border-color:var(--accent)}
.molstage .vcap{margin:16px auto 0;max-width:72ch;text-align:center}

/* ================================================================
   LOGIC — the app's contained circuit, mounted whole
   ================================================================ */
.logicstage{max-width:1040px;margin:0 auto}
.logicpaper{overflow:hidden}
.circhost{height:560px}
.logicstage .vcap{margin:14px auto 0;max-width:72ch;text-align:center}
/* the app's status strip (#saveTag) — lgSay() speaks through it */
.savetag{display:block;margin:10px auto 0;width:fit-content;max-width:90%;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--accent2);
  min-height:16px;text-align:center;opacity:0;transition:opacity .25s}
.savetag.show{opacity:1}

@media (max-width:860px){
  /* the drawing rail lies down over the paper's top edge, the component rail
     docks under its header, and the 3D companion drops below the drawing —
     all three are absolute glass at desktop widths */
  .item .molrail{position:static;flex-direction:row;margin:0 0 8px;width:max-content;max-width:100%;flex-wrap:wrap}
  .item[data-type="molecule"] .mol3win{position:static;width:auto !important;max-width:max-content;margin-top:10px}
  .item[data-type="molecule"] .mol3win .mol3svg{max-width:74vw;height:auto}
  .molhost{height:600px}
  .circhost{height:520px}
  .item .lcrail{position:static;width:100%;max-height:250px;margin:0 0 10px}
  .item > .tools{flex-wrap:wrap;white-space:normal}
}

/* ================================================================
   CODE — the cell, exactly as the app dresses it
   (colour variables and token classes vendored from items/write/code.js)
   ================================================================ */
.cbx{overflow:hidden;border-radius:10px;box-shadow:0 22px 54px rgba(0,0,0,.42);font-size:13.5px;
  --c-bg:#1e1e1e;--c-fg:#d4d4d4;--c-bar:#2d2d30;--c-sel:#264f78;
  --c-cm:#6a9955;--c-st:#ce9178;--c-es:#d7ba7d;--c-nm:#b5cea8;--c-kw:#569cd6;--c-fl:#c586c0;
  --c-ty:#4ec9b0;--c-fn:#dcdcaa;--c-cn:#4fc1ff;--c-pp:#c586c0;--c-vr:#9cdcfe;--c-op:#d4d4d4}
.cbx[data-sch=light]{--c-bg:#ffffff;--c-fg:#1f1f1f;--c-bar:#ececec;--c-sel:#add6ff;
  --c-cm:#008000;--c-st:#a31515;--c-es:#ee0000;--c-nm:#098658;--c-kw:#0000ff;--c-fl:#af00db;
  --c-ty:#267f99;--c-fn:#795e26;--c-cn:#0070c1;--c-pp:#af00db;--c-vr:#001080;--c-op:#1f1f1f}
.cbx[data-sch=monokai]{--c-bg:#272822;--c-fg:#f8f8f2;--c-bar:#1d1e19;--c-sel:#49483e;
  --c-cm:#75715e;--c-st:#e6db74;--c-es:#ae81ff;--c-nm:#ae81ff;--c-kw:#f92672;--c-fl:#f92672;
  --c-ty:#66d9ef;--c-fn:#a6e22e;--c-cn:#ae81ff;--c-pp:#a6e22e;--c-vr:#f8f8f2;--c-op:#f92672}
.cbx[data-sch=dracula]{--c-bg:#282a36;--c-fg:#f8f8f2;--c-bar:#1e1f29;--c-sel:#44475a;
  --c-cm:#6272a4;--c-st:#f1fa8c;--c-es:#ff79c6;--c-nm:#bd93f9;--c-kw:#ff79c6;--c-fl:#ff79c6;
  --c-ty:#8be9fd;--c-fn:#50fa7b;--c-cn:#bd93f9;--c-pp:#ff79c6;--c-vr:#f8f8f2;--c-op:#ff79c6}
.cbx[data-sch=solar]{--c-bg:#fdf6e3;--c-fg:#657b83;--c-bar:#eee8d5;--c-sel:#d8d2c0;
  --c-cm:#93a1a1;--c-st:#2aa198;--c-es:#dc322f;--c-nm:#d33682;--c-kw:#859900;--c-fl:#859900;
  --c-ty:#b58900;--c-fn:#268bd2;--c-cn:#cb4b16;--c-pp:#cb4b16;--c-vr:#657b83;--c-op:#657b83}
/* Theme: the terminal mixed from the site's own ink and paper; a dark paper
   (.cdk, measured) goes deeper than the paper instead of lighter than the ink */
.cbx[data-sch=auto]{--c-bg:color-mix(in srgb,var(--ink) 88%,var(--paper));
  --c-fg:color-mix(in srgb,var(--paper) 82%,#fff);
  --c-bar:color-mix(in srgb,var(--ink) 76%,var(--paper))}
.cbx[data-sch=auto].cdk{--c-bg:color-mix(in srgb,var(--paper) 46%,#000);
  --c-fg:color-mix(in srgb,var(--ink) 88%,#fff);
  --c-bar:color-mix(in srgb,var(--paper) 68%,#000)}
/* the bar */
.cbar{display:flex;align-items:center;gap:.55em;padding:.45em .8em;background:var(--c-bar);color:var(--c-fg)}
.cdots{display:flex;gap:.38em;margin-right:auto}
.cdots i{width:.68em;height:.68em;border-radius:50%;background:#ff5f57}
.cdots i:nth-child(2){background:#febc2e}
.cdots i:nth-child(3){background:#28c840}
.clwrap{display:flex;align-items:center}
.clwrap::after{content:"▾";font-size:.7em;opacity:.55;margin-left:.25em;pointer-events:none}
.cbx .clang{appearance:none;background:transparent;border:0;padding:0;margin:0;outline:none;
  color:color-mix(in srgb,var(--c-fg) 78%,var(--c-bar));font-family:var(--mono);font-size:.8em;letter-spacing:.03em}
.cbx select.clang{cursor:pointer}
.cbx select.clang option{background:var(--c-bar);color:var(--c-fg)}
.csch{background:transparent;border:0;padding:.1em .35em;border-radius:.35em;cursor:pointer;
  color:color-mix(in srgb,var(--c-fg) 78%,var(--c-bar));font-family:var(--mono);font-size:.9em}
.csch:hover{background:color-mix(in srgb,var(--c-fg) 14%,transparent);color:var(--c-fg)}
.ccopy{display:flex;align-items:center;gap:.4em;background:transparent;border:0;padding:.18em .35em;border-radius:.35em;
  color:color-mix(in srgb,var(--c-fg) 78%,var(--c-bar));font-family:var(--mono);font-size:.8em;cursor:pointer}
.ccopy:hover{background:color-mix(in srgb,var(--c-fg) 14%,transparent);color:var(--c-fg)}
.ccopy .ic{width:1.25em;height:1.25em}
.ccopy .cok{display:none}
.ccopy.did{color:#2ea043}
.ccopy.did .cok{display:inline}
/* the window */
.cwin{margin:0;padding:.85em 1em;background:var(--c-bg);min-height:2.4em;max-height:30em;
  white-space:pre-wrap;overflow-wrap:break-word;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--c-fg) 32%,transparent) transparent;
  cursor:text}
.ced{display:block;outline:none;font-family:var(--mono);color:var(--c-fg);line-height:1.6;tab-size:4;
  caret-color:var(--c-fg);min-height:1.6em;user-select:text;-webkit-user-select:text}
.ced::selection,.ced ::selection{background:var(--c-sel)}
/* the tokens — they only sit where the colour variables are defined */
.tk-cm{color:var(--c-cm);font-style:italic}
.tk-st{color:var(--c-st)}
.tk-es{color:var(--c-es)}
.tk-nm{color:var(--c-nm)}
.tk-kw{color:var(--c-kw)}
.tk-fl{color:var(--c-fl)}
.tk-ty{color:var(--c-ty)}
.tk-fn{color:var(--c-fn)}
.tk-cn{color:var(--c-cn)}
.tk-pp{color:var(--c-pp)}
.tk-vr{color:var(--c-vr)}
.tk-op{color:var(--c-op)}

/* ================================================================
   PIE — the legend is the editor
   ================================================================ */
.piepaper{padding-bottom:8px}
.pielegend{position:relative;z-index:2;display:grid;gap:2px;padding:0 26px 18px;max-width:340px;margin:0 auto}
.plrow{display:flex;align-items:center;gap:10px}
.plrow .dot{flex:none;width:11px;height:11px;border-radius:3.5px}
.plrow input{background:none;border:0;color:var(--ink);padding:4px 2px;min-width:0;border-radius:3px}
.plrow input:hover{background:color-mix(in srgb, var(--ink) 6%, transparent)}
.plrow input:focus{outline:none;background:color-mix(in srgb, var(--ink) 8%, transparent)}
.plrow .pname{flex:1;font-family:var(--body);font-size:15.5px}
.plrow .pval{width:74px;text-align:right;font-family:var(--mono);font-size:13px}
.plrow .px{flex:none;width:22px;height:22px;border-radius:5px;color:var(--soft);font-size:13px;line-height:1;
  display:grid;place-items:center;opacity:0;transition:opacity .15s,color .15s}
.plrow:hover .px,.plrow:focus-within .px{opacity:1}
.plrow .px:hover{color:var(--accent)}
.piesvg text{font-family:var(--mono)}

/* ================================================================
   SCIENCE — the rest of the shelf, in cards
   ================================================================ */
.keeprow.scirow{grid-template-columns:repeat(4,1fr)}
@media (max-width:1020px){ .keeprow.scirow{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .keeprow.scirow{grid-template-columns:1fr} }
.scifine{margin:28px 0 0;color:var(--desksoft);max-width:76ch;line-height:1.75}
.scifine b{font-family:var(--mono);font-size:.88em;color:var(--deskink)}

/* ================================================================
   DECK — flip cards
   ================================================================ */
.deckstage{max-width:560px;margin:0 auto}
.deckprog{height:3px;border-radius:2px;background:var(--deskline);overflow:hidden;margin-bottom:26px}
.deckprog i{display:block;height:100%;width:0;background:var(--accent2);transition:width .35s cubic-bezier(.2,.7,.3,1)}
.deckstack{--dch:300px;position:relative;height:calc(var(--dch) + 30px);perspective:1500px}
/* the rest of the deck, waiting underneath */
.deckstack::before,.deckstack::after{content:"";position:absolute;inset:0;margin:auto;
  width:min(440px,96%);height:var(--dch);border-radius:10px;background:var(--cardpaper);
  box-shadow:0 14px 30px rgba(0,0,0,.3);z-index:0}
.deckstack::before{transform:rotate(1.7deg) translate(5px,7px)}
.deckstack::after{transform:rotate(-1.2deg) translate(-4px,5px)}
.dcard{position:absolute;inset:0;margin:auto;width:min(440px,96%);height:var(--dch);z-index:1;
  transform-style:preserve-3d;cursor:pointer;will-change:transform;border-radius:10px}
.dface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:10px;background:var(--cardpaper);color:var(--ink);overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;
  padding:52px 34px 26px;text-align:center;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent) 1.4px,transparent 1.4px),
    linear-gradient(color-mix(in srgb, var(--accent2) 22%, transparent) 1px,transparent 1px);
  background-size:100% 100%,100% 30px;
  background-position:0 38px,0 52px;
  background-repeat:no-repeat,repeat-y;
}
.dface.back{transform:rotateY(180deg)}
.dface .q{font-size:1.24rem;font-weight:600;line-height:1.4;text-wrap:balance;margin-top:auto}
.dface .q b{font-family:var(--mono);font-weight:500;font-size:.8em;word-break:break-all}
.dface > :last-child{margin-bottom:auto}
.dface .a{font-size:1.06rem;line-height:1.55;color:color-mix(in srgb, var(--ink) 82%, var(--cardpaper))}
.dface .sideTag{position:absolute;top:11px;left:16px;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.dface math{font-size:1.5rem}
.dopts{width:100%;max-width:330px;display:grid;gap:7px;margin-top:2px}
.dopt{display:flex;align-items:center;gap:11px;text-align:left;padding:9px 13px;border-radius:7px;
  border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);font-size:.98rem;color:var(--ink);
  transition:border-color .12s, background-color .12s, transform .1s ease-out}
.dopt:hover{border-color:var(--ink)}
.dopt:active{transform:scale(.97)}
.dopt .key{font-family:var(--mono);font-size:11px;color:var(--soft)}
.dopt.good{border-color:var(--accent2);background:color-mix(in srgb, var(--accent2) 16%, transparent)}
.dopt.bad{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 13%, transparent)}
.deckrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.deckbtns{display:flex;gap:8px}
.deckbtns .tbtn{min-width:52px;justify-content:center}
.deckscore,.deckcount{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--desksoft);min-width:70px}
.deckcount{text-align:right}
.deckscore b{color:var(--accent2)} .deckscore i{color:var(--accent);font-style:normal}
/* the scoreboard, when the run is done */
.dboard{position:absolute;inset:0;margin:auto;width:min(440px,96%);height:var(--dch);z-index:2;border-radius:10px;
  background:var(--cardpaper);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.35);
  padding:22px 26px;display:flex;flex-direction:column;gap:10px}
.dboard h3{font-size:1.15rem;color:var(--ink)}
.dboard .pct{font-family:var(--disp);font-size:2.6rem;line-height:1;color:var(--ink)}
.dboard .bar{height:8px;border-radius:4px;overflow:hidden;display:flex;background:color-mix(in srgb, var(--ink) 10%, transparent)}
.dboard .bar i{height:100%}
.dboard .bar .g{background:var(--accent2)} .dboard .bar .r{background:var(--accent)}
.dboard ul{list-style:none;margin:2px 0 0;padding:0;overflow:auto;flex:1;font-size:.86rem}
.dboard li{display:flex;gap:9px;padding:3px 0;color:var(--soft)}
.dboard li b{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dboard .acts{display:flex;gap:8px;justify-content:flex-end}
.dboard .tbtn{border-color:color-mix(in srgb, var(--ink) 25%, transparent);color:var(--ink)}
.dboard .tbtn:hover{border-color:var(--accent)}

/* ================================================================
   KEEP (and the science cards, which share its shelf)
   ================================================================ */
.keeprow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.5vw,26px)}
@media (max-width:860px){ .keeprow:not(.scirow){grid-template-columns:1fr} }
.keepcard{padding:28px 26px 24px;color:var(--ink)}
.keepcard .ic{width:30px;height:30px;color:var(--accent);margin-bottom:14px}
.keepcard h3{color:var(--ink);font-size:1.2rem;margin-bottom:8px}
.keepcard p{margin:0;font-size:.97rem;line-height:1.6;color:color-mix(in srgb, var(--ink) 72%, var(--paper))}
.keepcard b{font-family:var(--mono);font-weight:500;font-size:.88em}

/* ================================================================
   BUILT
   ================================================================ */
.statrow{display:flex;flex-wrap:wrap;gap:0;margin-bottom:clamp(40px,6vh,60px);
  border:1px solid var(--deskline);border-radius:12px;overflow:hidden}
.stat{flex:1 1 150px;padding:22px 20px 18px;border-right:1px solid var(--deskline);min-width:140px}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--disp);font-weight:700;font-size:2.7rem;line-height:1;color:var(--accent)}
.stat span{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--desksoft);line-height:1.5}
@media (max-width:860px){ .stat{flex:1 1 33%;border-bottom:1px solid var(--deskline)} }
.builtsplit{display:grid;grid-template-columns:5fr 6fr;gap:clamp(26px,4vw,56px);align-items:start}
@media (max-width:980px){ .builtsplit{grid-template-columns:1fr} }
.builtsplit .copy h3:first-child{margin-top:0}
.marvels{list-style:none;margin:0;padding:0}
.marvels li{position:relative;padding:0 0 12px 24px;color:var(--desksoft);font-size:.98rem;line-height:1.6}
.marvels li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.marvels b{color:var(--deskink);font-weight:600}

/* ================================================================
   QUESTIONS
   ================================================================ */
.qwrap{max-width:780px}
.faq details{border-bottom:1px solid var(--deskline)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 2px;cursor:pointer;font-family:var(--body);font-weight:600;font-size:1.12rem;color:var(--deskink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--desksoft);
  transition:transform .2s cubic-bezier(.2,.7,.3,1.4);flex:none}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faq details p{margin:0;padding:0 2px 22px;color:var(--desksoft);max-width:64ch;line-height:1.65}
.faq details b{color:var(--deskink);font-weight:600}
.faq details a{color:var(--deskink);text-decoration-color:var(--accent)}

/* ================================================================
   GET
   ================================================================ */
.getsec{padding-bottom:clamp(90px,12vh,150px)}
.getcard{padding:clamp(48px,8vw,92px) clamp(26px,7vw,90px);text-align:center;transform:rotate(.3deg)}
.getin{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0}
.getcard .kicker{color:var(--soft);margin-bottom:16px}
.getcard h2{color:var(--ink);font-size:clamp(2.8rem,6vw,4.6rem)}
.getlede{color:color-mix(in srgb, var(--ink) 72%, var(--paper));font-size:1.1rem;margin:18px 0 30px;max-width:44ch}
.getcard .ctarow{justify-content:center}
.getcard .btn{border-color:color-mix(in srgb, var(--ink) 30%, transparent);color:var(--ink)}
.getcard .btn.primary{border-color:var(--accent);color:#fff}
.getfine{margin:22px 0 0;color:var(--soft)}
.getfine code{background:color-mix(in srgb, var(--ink) 8%, transparent)}

@media (max-width:640px){
  .deckstack{--dch:352px}
  .dface{padding:46px 22px 22px;gap:10px}
  .dface .q{font-size:1.12rem}
  .dopt{padding:8px 11px;font-size:.92rem}
}