/* Workbench homepage. Built from the prototype by port.mjs; edit there or here, not both. */

/* One blueprint sheet taped to a wooden desk. Desk objects sit around the edges and can be dragged.
   The switch in the top bar turns the desk lamp off: the room goes dark, a light follows the pointer,
   and anything with its own light (the PixelBoard, the phone) glows. */
:root{
  --bg:#17417f; --ink:#eef4ff; --ink2:rgba(238,244,255,.86); --line:rgba(238,244,255,.4);
  --grid:rgba(238,244,255,.06); --grid2:rgba(238,244,255,.12); --accent:#ffd36b;
  --paper:transparent; --paperInk:#eef4ff; --paperRule:rgba(238,244,255,.45);
  --desk:#3a281b;
  --f-display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body:"IBM Plex Sans", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --f-news:"Old Standard TT", Georgia, "Times New Roman", serif;
  --f-hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0; font-family:var(--f-body); font-size:16px; line-height:1.55; color:var(--ink); overflow-x:clip;
  background-color:var(--desk);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(91deg,rgba(0,0,0,.10) 0 2px,transparent 2px 13px,rgba(255,220,180,.035) 13px 15px,transparent 15px 31px,rgba(0,0,0,.06) 31px 34px,transparent 34px 57px),
    linear-gradient(90deg,#33231a,#43301f 30%,#3b2a1c 60%,#302016);
}
a{color:inherit}
a:focus-visible,button:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--f-mono)}
.label{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.hand{font-family:var(--f-hand);font-weight:500;color:var(--ink);font-size:22px;line-height:1;display:inline-block;transform:rotate(-3deg)}

/* the desk and the sheet */
.desk{padding:clamp(18px,4vw,64px) clamp(12px,6vw,130px) clamp(40px,6vw,90px)}
.sheet{
  position:relative; max-width:1180px; margin:0 auto;
  padding-inline:clamp(26px,5vw,64px); padding-block:30px 54px;
  background-color:var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.05),transparent 60%),
    radial-gradient(140% 100% at 50% 50%,transparent 55%,rgba(4,18,48,.45) 100%),
    radial-gradient(30% 18% at 78% 34%,rgba(255,255,255,.035),transparent 70%),
    radial-gradient(26% 14% at 18% 71%,rgba(0,10,40,.12),transparent 70%),
    linear-gradient(90deg,transparent calc(33.33% - 1px),rgba(0,12,40,.22) calc(33.33% - 1px),rgba(255,255,255,.08) 33.33%,transparent calc(33.33% + 1px),transparent calc(66.66% - 1px),rgba(0,12,40,.22) calc(66.66% - 1px),rgba(255,255,255,.08) 66.66%,transparent calc(66.66% + 1px)),
    repeating-linear-gradient(180deg,transparent 0 1099px,rgba(0,12,40,.2) 1099px 1100px,rgba(255,255,255,.07) 1100px 1101px,transparent 1101px 1102px),
    linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:300px 300px,auto,auto,auto,auto,auto,auto,100px 100px,100px 100px,20px 20px,20px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -20px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.35);
  border-radius:2px;
}
.sheet::before,.sheet::after{content:"";position:absolute;pointer-events:none}
.sheet::before{inset:18px;border:1.5px solid rgba(238,244,255,.55)}
.sheet::after{inset:23px;border:1px solid rgba(238,244,255,.22)}
.rail{position:absolute;pointer-events:none;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;color:rgba(238,244,255,.55);display:flex;justify-content:space-around;align-items:center}
.rail.t{top:2px;left:18px;right:18px;height:16px}
.rail.b{bottom:2px;left:18px;right:18px;height:16px}
.rail.l{left:0;top:18px;bottom:18px;width:18px;flex-direction:column}
.rail.r{right:0;top:18px;bottom:18px;width:18px;flex-direction:column}
.rail span{position:relative}
.rail.t span::after,.rail.b span::after{content:"";position:absolute;left:calc(50% + 14px);top:50%;width:1px;height:8px;background:rgba(238,244,255,.4);transform:translateY(-50%)}
.tape{position:absolute;width:118px;height:32px;z-index:31;pointer-events:none;
  background:
    repeating-linear-gradient(97deg,rgba(255,255,255,0) 0 9px,rgba(255,255,255,.16) 9px 10px,rgba(0,0,0,0) 10px 23px,rgba(90,70,30,.08) 23px 24px),
    linear-gradient(180deg,rgba(244,236,212,.5),rgba(226,214,180,.42));
  -webkit-backdrop-filter:blur(.4px) brightness(1.04);backdrop-filter:blur(.4px) brightness(1.04);
  clip-path:polygon(0 6%,4% 0,6.5% 13%,1% 24%,6% 37%,.5% 51%,5.5% 64%,1% 78%,5% 90%,2% 100%,98% 100%,95% 88%,99.5% 76%,94.5% 62%,99% 49%,94% 35%,99.5% 22%,95% 11%,98.5% 3%,96% 0)}
.tape.tl{top:-6px;left:-34px;transform:rotate(-38deg)}
.tape.tr{top:-6px;right:-34px;transform:rotate(38deg)}
.tape.bl{bottom:-6px;left:-34px;transform:rotate(38deg)}
.tape.br{bottom:-6px;right:-34px;transform:rotate(-38deg)}

/* desk objects */
.prop{position:absolute;z-index:30;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;transform-origin:50% 50%;
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg)) scale(var(--sc,1));
  filter:drop-shadow(var(--cx1,0px) var(--cy1,1px) 1.2px rgba(0,0,0,.7)) drop-shadow(var(--sx,2px) var(--sy,6px) var(--sb,6px) rgba(0,0,0,.5));transition:filter .2s}
.prop svg{display:block;width:100%;height:100%;overflow:visible}
.prop.dragging{cursor:grabbing;z-index:35;filter:drop-shadow(var(--cx1,0px) var(--cy1,1px) 3px rgba(14,7,2,.35)) drop-shadow(calc(var(--sx,2px)*2.2) calc(var(--sy,6px)*2.2) calc(var(--sb,6px)*2) rgba(14,7,2,.32))}
.prop.flat{pointer-events:none;z-index:1;cursor:default;opacity:.9;filter:none}
.prop.clip{z-index:32}

/* phone */
.prop.phone:not(.dragging){filter:drop-shadow(var(--cx1,0px) var(--cy1,1px) 1px rgba(0,0,0,.9)) drop-shadow(calc(var(--cx1,0px)*2.4) calc(var(--cy1,1px)*2.4) 2.4px rgba(0,0,0,.6)) drop-shadow(var(--sx,2px) var(--sy,6px) var(--sb,6px) rgba(0,0,0,.5))}
.phone{--sc:.86;border-radius:27px;padding:2.6px;background:conic-gradient(from 200deg at 50% 50%,#d9d5ce 0deg,#a19d96 40deg,#5d5a55 110deg,#3c3a37 160deg,#4a4844 200deg,#77736d 250deg,#b9b5ae 300deg,#e6e3dd 340deg,#d9d5ce 360deg);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.5),inset 0 0 0 1.4px rgba(0,0,0,.25)}
.phone .bezel{height:100%;border-radius:24.5px;background:linear-gradient(135deg,#202024 0%,#060607 30%,#030303 70%,#141416 100%);padding:4px;box-shadow:inset 0 0 0 .6px rgba(255,255,255,.18)}
.phone .btn-side{position:absolute;width:3.2px;border-radius:1.6px;background:linear-gradient(90deg,#55524d,#e4e0d9 45%,#8c8881 70%,#3a3835);box-shadow:.6px .9px 1px rgba(0,0,0,.55)}
.phone .btn-side.a{left:-2px;top:58px;height:16px}.phone .btn-side.vu{left:-2px;top:86px;height:30px}.phone .btn-side.vd{left:-2px;top:124px;height:30px}
.phone .btn-side.pw{right:-2px;top:96px;height:46px;box-shadow:inset 0 .8px 0 rgba(255,255,255,.75),.6px .9px 1px rgba(0,0,0,.55)}.phone .btn-side.cc{right:-1.5px;top:196px;height:24px;width:2.5px;background:linear-gradient(90deg,#2a2826,#6a6660)}
.phone .scr{position:relative;height:100%;border-radius:21px;overflow:hidden;color:#fff;font-family:-apple-system,"SF Pro Display","SF Pro Text",system-ui,sans-serif;padding:30px 7px 10px;background:#0c1a3a}
.phone .wall{position:absolute;inset:0;filter:saturate(.78) brightness(.92);background:
  radial-gradient(60% 45% at 18% 78%,rgba(255,122,89,.85),transparent 70%),
  radial-gradient(55% 40% at 85% 62%,rgba(255,64,129,.7),transparent 70%),
  radial-gradient(70% 50% at 70% 10%,rgba(64,140,255,.9),transparent 70%),
  radial-gradient(60% 50% at 10% 25%,rgba(120,70,255,.8),transparent 70%),
  linear-gradient(170deg,#1a2d6e,#3b1e6b 55%,#7a2a58)}
.phone .scr>*:not(.wall){position:relative}
.phone .island{position:absolute!important;top:7px;left:50%;width:42px;height:12px;border-radius:7px;background:#000;transform:translateX(-50%);z-index:2}
.phone .status{position:absolute!important;top:7px;left:14px;right:12px;display:flex;justify-content:space-between;font-size:7.5px;font-weight:600}
.phone .sb{display:flex;gap:3px;align-items:center}
.phone .sig{display:block;width:10px;height:6px;background:linear-gradient(90deg,#fff 0 2px,transparent 2px 2.7px,#fff 2.7px 4.7px,transparent 4.7px 5.4px,#fff 5.4px 7.4px,transparent 7.4px 8.1px,rgba(255,255,255,.4) 8.1px);-webkit-mask:linear-gradient(to top left,#000 50%,transparent 50%);mask:linear-gradient(to top left,#000 50%,transparent 50%)}
.phone .bat{display:block;width:13px;height:6.5px;border-radius:2px;border:1px solid rgba(255,255,255,.55);background:linear-gradient(90deg,#fff 0 72%,transparent 72%) content-box;padding:.8px;position:relative}
.phone .pdate{text-align:center;font-size:9.5px;font-weight:600;opacity:.92;margin-top:4px}
.phone .ptime{text-align:center;font-size:52px;white-space:nowrap;font-weight:700;line-height:.95;letter-spacing:-.035em;margin:0 0 12px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.96);text-shadow:0 1px 8px rgba(0,0,0,.12)}
.phone .stack{position:absolute!important;left:6px;right:6px;bottom:46px}
.phone .note{display:flex;gap:6px;align-items:center;background:rgba(245,245,250,.72);-webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);border-radius:12px;padding:6.5px 7px;margin-top:4px;font-size:7.6px;line-height:1.22;text-decoration:none;color:#111}
.phone .app{flex:none;width:19px;height:19px;border-radius:4.5px;display:grid;place-items:center}
.phone .app svg{width:12px;height:12px}
.phone .app.yt{background:#ff0033}.phone .app.yt svg{fill:#fff;width:15px;height:15px}
.phone .app.tt{background:#010101}.phone .app.tt svg{fill:#fff;filter:drop-shadow(.7px .5px 0 #fe2c55) drop-shadow(-.7px -.5px 0 #25f4ee)}
.phone .app.li{background:#0a66c2}.phone .app.li svg{fill:#fff}
.phone .tx{min-width:0;flex:1}
.phone .note b{display:flex;justify-content:space-between;font-size:7.8px;font-weight:600;color:#000}
.phone .note em{font-style:normal;font-weight:500;color:rgba(40,40,46,.85)}
.phone .qa{position:absolute!important;bottom:13px;width:24px;height:24px;border-radius:50%;background:rgba(30,30,40,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center}
.phone .qa svg{width:11px;height:11px;fill:#fff}
.phone .qa.fl{left:16px}.phone .qa.cam{right:16px}
.phone .bar{position:absolute!important;bottom:4px;left:50%;width:48px;height:3px;border-radius:2px;background:rgba(255,255,255,.85);transform:translateX(-50%)}
.phone .glass{position:absolute!important;inset:0;pointer-events:none;background:linear-gradient(122deg,rgba(255,255,255,.17) 0,rgba(255,255,255,.13) 33%,rgba(255,255,255,0) 33.5%,rgba(255,255,255,0) 100%),radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.08),transparent 60%);box-shadow:inset 0 0 0 .6px rgba(255,255,255,.12)}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px;border-bottom:1px dashed var(--line)}
.brand{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;text-decoration:none}
.brand span{color:var(--ink2);font-weight:400}
.topbar nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar nav a{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink2)}
.topbar nav a:hover{color:var(--ink)}
.lamp{display:inline-flex;align-items:center;gap:9px;background:none;border:0;color:var(--ink);padding:5px 0;border-radius:0;cursor:pointer;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.lamp .rocker{width:20px;height:28px;border-radius:4px;border:1.5px solid var(--ink);position:relative;display:block}
.lamp .rocker::after{content:"";position:absolute;left:2px;right:2px;top:2px;height:11px;border-radius:2px;background:var(--accent);transition:top .18s}
.night .lamp .rocker::after{top:11px;background:var(--ink2)}
.lamp:hover{color:var(--accent)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);padding-block:clamp(28px,5vw,56px);align-items:start}
.eyebrow{display:flex;gap:14px;flex-wrap:wrap}
h1{font-family:var(--f-display);font-weight:800;font-size:clamp(48px,8vw,104px);line-height:.92;letter-spacing:-.03em;margin:.18em 0 .22em;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(17px,1.6vw,20px);max-width:34em;margin:0 0 26px;color:var(--ink)}
.spec{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:26px}
.spec th{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);text-align:left;vertical-align:top;padding:9px 16px 9px 0;width:9.5em;white-space:nowrap}
.spec td{padding:9px 0}
.spec tr{border-top:1px dashed var(--line)}
.spec tr:last-child{border-bottom:1px dashed var(--line)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.04em;text-decoration:none;padding:11px 16px;border:1.5px solid var(--ink);border-radius:4px;display:inline-flex;gap:8px;align-items:center}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn:hover{transform:translateY(-1px)}

/* devices */
.device{position:relative}
.dim{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:10px;text-transform:uppercase}
.dim::before,.dim::after{content:"";flex:1;height:1px;background:var(--accent);opacity:.8}
.board{position:relative;border:1.5px dashed var(--line);border-radius:10px;padding:clamp(10px,2vw,18px);transition:background .5s,box-shadow .5s,border-color .5s}
.night .board{z-index:60;background:#0d1014;border:1.5px solid #000;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 30px 60px -10px rgba(0,0,0,.8)}
#pixel{display:block;width:100%;aspect-ratio:1;max-width:100%;touch-action:none;cursor:crosshair}
.controls{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.modes{display:flex;gap:6px;flex-wrap:wrap}
.modes button,.dpad button{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:none;color:var(--ink);border:1px dashed var(--line);border-radius:4px;padding:7px 10px;cursor:pointer}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-style:solid;border-color:var(--ink)}
.readout{font-family:var(--f-mono);font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.dpad{display:none;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,36px);gap:4px;justify-content:center;margin-top:12px}
.dpad.show{display:grid}
.dpad button{padding:0;font-size:15px}
.dpad .u{grid-column:2}.dpad .l{grid-column:1;grid-row:2}.dpad .d{grid-column:2;grid-row:2}.dpad .r{grid-column:3;grid-row:2}
.callouts{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.callouts li{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink2);display:flex;gap:6px;align-items:center}
.callouts li::before{content:"";width:14px;height:1px;background:var(--accent)}
.callouts li.hand-li::before{display:none}
.callouts a{color:var(--ink)}

/* sections */
section{padding-block:clamp(36px,6vw,64px);border-top:1px dashed var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
h2{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1;letter-spacing:-.02em;margin:6px 0 0}
.sec-note{max-width:30em;color:var(--ink2);font-size:15px;margin:0}

/* eInk */

/* parts bin */
.parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.part{position:relative;border:1px dashed var(--line);border-radius:6px;display:flex;flex-direction:column;min-width:0;transition:transform .15s,border-color .15s}
.part:hover{transform:translateY(-2px);border-style:solid}
.part .strip{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px dashed var(--line);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.part .body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.part .ph{display:flex;align-items:center;gap:10px}
.part .ph img{width:36px;height:36px;border-radius:8px;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.part h3{font-family:var(--f-display);font-weight:700;font-size:20px;margin:0;letter-spacing:-.01em;overflow-wrap:anywhere}
.part h3 a{text-decoration:none}
.part h3 a::after{content:"";position:absolute;inset:0;border-radius:6px}
.part p{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink2);flex:1}
.part .meta{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--ink2);font-variant-numeric:tabular-nums;margin-top:4px}
.part .links{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}
.part .links a{position:relative;z-index:1;color:var(--accent);text-decoration:none}
.part .links a:hover{text-decoration:underline}
.part.secret{border-style:dashed;cursor:default}
.part.secret:hover{transform:none}
.part.secret .stamp{position:absolute;right:12px;bottom:40px;font-family:var(--f-mono);font-weight:600;font-size:13px;letter-spacing:.2em;color:#ffb3a6;border:2px solid #ffb3a6;padding:2px 8px;border-radius:3px;transform:rotate(-12deg);opacity:.85}
.chip{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;padding:2px 6px;border-radius:3px;border:1px solid currentColor}
.chip.bench{color:var(--accent)}
.chip.secret{color:#ff9a8a}

/* figure links */
.fig-links{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin-top:12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em}
.fig-links a{color:var(--accent);text-decoration:none}
.fig-links a:hover{text-decoration:underline}
.fig-links img{width:28px;height:28px;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.fig-links .tag{color:#ffb3a6;font-weight:500;border:1px solid currentColor;border-radius:3px;padding:2px 7px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}

/* ports */
.ports{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.port{display:flex;gap:14px;align-items:center;text-decoration:none;padding:14px;border:1px dashed var(--line);border-radius:6px;min-width:0;transition:border-color .15s,transform .15s}
.port:hover{border-style:solid;transform:translateY(-2px)}
.port .ico{flex:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:10px;display:grid;place-items:center;transition:background .15s,border-color .15s}
.port .ico svg{width:22px;height:22px;fill:var(--ink);transition:fill .15s}
.port .ico .fe{font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:-.04em}
.port:hover .ico{background:var(--accent);border-color:var(--accent)}
.port:hover .ico svg{fill:#17417f}
.port:hover .ico .fe{color:#17417f}
.port b{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.port span.t{display:block;font-size:14px;color:var(--ink2);overflow-wrap:anywhere}

/* title block */
.titleblock{margin-top:clamp(36px,6vw,64px);border:1.5px solid var(--ink);display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr}
.titleblock div{padding:10px 12px;border-left:1px solid var(--ink);min-width:0}
.titleblock div:first-child{border-left:0}
.titleblock .v{font-family:var(--f-mono);font-size:13px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.sketch-note{margin-top:12px;font-family:var(--f-mono);font-size:11px;color:var(--ink2);letter-spacing:.06em}

/* who: torn photo print and a torn bio scrap */
.who{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,72px);align-items:center;padding-block:8px 12px}
.drop{filter:drop-shadow(.6px 1.2px .8px rgba(0,0,0,.45)) drop-shadow(3px 7px 9px rgba(0,0,0,.32));position:relative}
.snap{margin:0;justify-self:center;align-self:center;width:min(100%,364px);transform:rotate(-3.2deg)}
.snap::after{content:"";position:absolute;right:1%;bottom:21%;width:44%;height:22px;background:radial-gradient(closest-side,rgba(0,0,0,.42),transparent);filter:blur(7px);transform:rotate(-8deg);z-index:-1}
.snap .print::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.32) 0,rgba(255,255,255,0) 6%),linear-gradient(200deg,transparent 70%,rgba(0,0,0,.08));pointer-events:none}
svg.fibres{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.scrap .paper2::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(180deg,rgba(150,120,60,.22),rgba(150,120,60,.06));pointer-events:none}
.scrap .tw{position:relative}
.snap .print{background:#f6f4ef;padding:12px 12px 14px;position:relative}
.snap .print::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 40%,rgba(0,0,0,.06));pointer-events:none}
.snap img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;filter:contrast(1.04) saturate(.92) sepia(.06)}
.snap .gloss{position:absolute;inset:12px 12px auto;aspect-ratio:3/4;background:linear-gradient(120deg,rgba(255,255,255,.18) 0,rgba(255,255,255,.04) 38%,transparent 38.5%);pointer-events:none}
.snap figcaption{font-family:var(--f-hand);font-size:21px;color:#2b3a55;padding:8px 6px 26px;transform:rotate(-1deg)}
.scrap{transform:rotate(1.1deg);max-width:560px;position:relative}
.scrap::after{content:"";position:absolute;left:-2%;top:-2%;width:44%;height:34%;background:radial-gradient(closest-side,rgba(0,0,0,.4),transparent);filter:blur(10px);transform:translate(6px,11px);z-index:-1}
.scrap .paper2{background:#f4f1e8;color:#2a2926;padding:34px clamp(22px,4vw,40px) 40px;font-family:"Special Elite","Courier New",monospace;font-size:15px;line-height:1.62;position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(130% 120% at 45% 35%,transparent 55%,rgba(110,90,50,.12) 100%),linear-gradient(180deg,rgba(255,255,255,.35),transparent 30%,transparent 75%,rgba(120,100,60,.1)),linear-gradient(135deg,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 8%)}
.scrap p{margin:0 0 .85em}
.scrap .who-k{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#625b4f;margin-bottom:12px}
.scrap .sig{font-family:var(--f-hand);font-size:28px;color:#1f3d7a;margin:6px 0 0;transform:rotate(-2deg);display:inline-block}
.scrap a{color:#1f3d7a}
.tape.on{position:absolute;width:96px;height:28px}
.snap .tape.on{top:-14px;left:50%;margin-left:-48px;transform:rotate(4deg);z-index:2}
.scrap .tape.on{top:-12px;right:46px;transform:rotate(-6deg)}

/* lights off */
.desk{position:relative}
/* the room: dark everywhere except a pool of lamp light; the sheet is cut out and handled separately */
#dark{position:absolute;inset:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,400px),rgba(255,214,150,.07) 0,rgba(4,9,22,0) 110px,rgba(4,9,22,.55) 210px,rgba(3,7,18,.93) 360px);
  -webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);
  -webkit-mask-size:100% 100%,var(--hw,0px) var(--hh,0px);mask-size:100% 100%,var(--hw,0px) var(--hh,0px);
  -webkit-mask-position:0 0,var(--hx,0px) var(--hy,0px);mask-position:0 0,var(--hx,0px) var(--hy,0px);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:xor;mask-composite:exclude}
/* the blueprint itself glows faintly in the dark: multiply keeps its white lines brighter than the blue */
#sheetDark{position:absolute;inset:0;z-index:49;pointer-events:none;opacity:0;transition:opacity .45s ease;mix-blend-mode:multiply;border-radius:2px;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,400px),#fff 0,#fff 90px,#a3b5da 230px,#5d74a6 480px,#465d90 900px)}
#glow{position:absolute;z-index:51;pointer-events:none;opacity:0;transition:opacity .45s ease;border-radius:2px;box-shadow:0 0 0 1px rgba(150,190,255,.18),0 0 70px 10px rgba(70,130,255,.22),0 0 220px 40px rgba(60,110,230,.12)}
.night #dark,.night #sheetDark,.night #glow{opacity:1}
.night .phone{z-index:60}
.night .phone .bezel{box-shadow:0 0 60px 14px rgba(150,120,255,.22)}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .who{grid-template-columns:minmax(0,1fr)}
  .snap{width:min(80%,300px)}
  .parts,.ports{grid-template-columns:repeat(2,minmax(0,1fr))}
  .titleblock{grid-template-columns:1fr 1fr}
  .titleblock div{border-left:0;border-top:1px solid var(--ink)}
  .titleblock div:first-child{grid-column:1/-1;border-top:0}
  .titleblock div:nth-child(odd):not(:first-child){border-left:1px solid var(--ink)}
}
@media (max-width:640px){
  .desk{padding-inline:16px}
  .sheet{padding-inline:22px}
  .sheet::before{inset:8px}.sheet::after{inset:12px}
  .rail{display:none}
  .prop.m-hide{display:none}
}
@media (max-width:520px){
  .parts,.ports{grid-template-columns:minmax(0,1fr)}
  .spec th{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---- anatomy kit */

.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:11px;font-weight:500;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}

/* ---- figures */
[data-fig="arclight"] .al-glass{fill:var(--anatomy-shade-0)}
[data-fig="arclight"] .al-well{fill:var(--anatomy-shade-1)}
[data-fig="arclight"] .al-bg{fill:var(--anatomy-face)}
[data-fig="arclight"] .al-bg2{fill:var(--anatomy-shade-2)}
[data-fig="arclight"] .al-win{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);vector-effect:non-scaling-stroke}
[data-fig="arclight"] .al-ink{fill:var(--anatomy-mid)}
[data-fig="arclight"] .al-ink-hi{fill:var(--anatomy-hi)}
[data-fig="arclight"] .al-fade{fill:var(--anatomy-shade-0)}
[data-fig="arclight"] .al-slot{fill:var(--anatomy-shade-0)}
[data-fig="arclight"] .al-lens{fill:var(--anatomy-shade-0)}
[data-fig="arclight"] .al-tally{fill:var(--anatomy-red);opacity:.15}
[data-fig="arclight"] .al-tally-pvw{fill:var(--anatomy-green);opacity:.55}
[data-fig="arclight"] .iso-line.al-rec{stroke:var(--anatomy-red)}
[data-fig="arclight"] .al-rec-fill{fill:var(--anatomy-red);opacity:.75}
[data-fig="arclight"] .al-tc{fill:var(--anatomy-hi);font-family:var(--anatomy-mono);letter-spacing:.02em}
[data-fig="arclight"] .iso-stage{outline:none;touch-action:pan-y;cursor:grab}
[data-fig="arclight"] .iso-stage:focus-visible{outline:1px solid var(--anatomy-mid);outline-offset:6px}

/* PixelBoard figure. The LED window is a cavity (black panel behind a diffuser), so it keeps a dark ground in every theme.
   Theme these tokens: --pb-well, --pb-wall, --pb-grid, --pb-off, --pb-screen, --pb-ui and the LED palette --pb-1 … --pb-12. */
[data-fig="pixelboard"]{
  --pb-well:#0d0d0f; --pb-wall:#1a1a1d; --pb-grid:#050506; --pb-off:#222226; --pb-screen:#0f0f12; --pb-ui:#5a5a62;
  --pb-1:#ff4d4d;  /* red */
  --pb-2:#ff8a3d;  /* orange */
  --pb-3:#ffb238;  /* amber */
  --pb-4:#ffe45c;  /* yellow */
  --pb-5:#57e389;  /* green */
  --pb-6:#4fd8ff;  /* cyan */
  --pb-7:#5b7cff;  /* blue */
  --pb-8:#e45cff;  /* magenta */
  --pb-9:#fff6e0;  /* white-hot */
  --pb-10:#9a2414; /* ember */
  --pb-11:#2f9e5a; /* green, dim */
  --pb-12:#1b5a35; /* green, dimmer */
}
.iso[data-theme="light"] [data-fig="pixelboard"]{
  --pb-well:#18181b; --pb-wall:#2a2a2e; --pb-grid:#0a0a0c; --pb-off:#2c2c31; --pb-screen:#1c1c20;
}
[data-fig="pixelboard"] .pb-well{fill:var(--pb-well)}
[data-fig="pixelboard"] .pb-wall{fill:var(--pb-wall);stroke:none}
[data-fig="pixelboard"] .pb-wall[data-shade="0"],[data-fig="pixelboard"] .pb-wall[data-shade="1"]{fill:var(--pb-well)}
[data-fig="pixelboard"] .pb-grid{fill:none;stroke:var(--pb-grid);stroke-width:1.1}
[data-fig="pixelboard"] .pb-leds circle{fill:var(--pb-off)}
[data-fig="pixelboard"] .pb-glows circle{fill:transparent}
[data-fig="pixelboard"] .pb-glows{filter:blur(2.4px);opacity:.75}
[data-fig="pixelboard"] .pb-screen{fill:var(--pb-screen);stroke:none}
[data-fig="pixelboard"] .pb-status{fill:var(--pb-1)}
[data-fig="pixelboard"] [data-c="1"]{fill:var(--pb-1)!important}
[data-fig="pixelboard"] [data-c="2"]{fill:var(--pb-2)!important}
[data-fig="pixelboard"] [data-c="3"]{fill:var(--pb-3)!important}
[data-fig="pixelboard"] [data-c="4"]{fill:var(--pb-4)!important}
[data-fig="pixelboard"] [data-c="5"]{fill:var(--pb-5)!important}
[data-fig="pixelboard"] [data-c="6"]{fill:var(--pb-6)!important}
[data-fig="pixelboard"] [data-c="7"]{fill:var(--pb-7)!important}
[data-fig="pixelboard"] [data-c="8"]{fill:var(--pb-8)!important}
[data-fig="pixelboard"] [data-c="9"]{fill:var(--pb-9)!important}
[data-fig="pixelboard"] [data-c="10"]{fill:var(--pb-10)!important}
[data-fig="pixelboard"] [data-c="11"]{fill:var(--pb-11)!important}
[data-fig="pixelboard"] [data-c="12"]{fill:var(--pb-12)!important}
[data-fig="pixelboard"] .pb-ui .iso-line{stroke:var(--pb-ui)}
[data-fig="pixelboard"] [data-pb-btn][data-on] .iso-line{stroke:var(--pb-5)}
[data-fig="pixelboard"] .pb-packet{fill:var(--anatomy-lit);stroke:var(--anatomy-paper);stroke-width:.4}
[data-fig="pixelboard"] .iso-stage{cursor:pointer;outline:none}
[data-fig="pixelboard"] .iso-stage:focus-visible{outline:1px solid var(--anatomy-mid);outline-offset:6px}
@media (prefers-reduced-motion:reduce){[data-fig="pixelboard"] .pb-data .iso-line{animation:none}}

[data-fig="newsprint"] .iso-stage{outline:none;cursor:pointer}
[data-fig="newsprint"] .iso-stage:focus-visible{outline:1px solid var(--anatomy-mid);outline-offset:4px}
[data-fig="newsprint"] .np-well{fill:var(--anatomy-shade-0);stroke:none}
[data-fig="newsprint"] .np-paper{fill:var(--anatomy-face);stroke:none}
[data-fig="newsprint"] .np-mast{fill:var(--anatomy-hi);font-family:"Old Standard TT",Georgia,"Times New Roman",serif;font-weight:700}
[data-fig="newsprint"] .np-rule{fill:none;stroke:var(--anatomy-hi);stroke-linecap:butt}
[data-fig="newsprint"] .np-head{fill:none;stroke:var(--anatomy-hi);stroke-width:2.2px;stroke-linecap:butt}
[data-fig="newsprint"] .np-type{fill:none;stroke:var(--anatomy-mid);stroke-width:.55px;stroke-linecap:butt}
[data-fig="newsprint"] .np-dot{fill:var(--anatomy-mid)}
[data-fig="newsprint"] .np-photo{stroke:none;opacity:.7}
[data-fig="newsprint"] .np-frame{fill:none;stroke:var(--anatomy-mid);stroke-width:.4px}
[data-fig="newsprint"] .np-scene{fill:var(--anatomy-hi);opacity:.55;stroke:none}
[data-fig="newsprint"] .np-flash{fill:var(--anatomy-hi);stroke:none}
[data-fig="newsprint"] .np-flash.np-flash-paper{fill:var(--anatomy-face)}
[data-fig="newsprint"] .np-flash.np-flash-paper{opacity:1!important}
[data-fig="newsprint"] .np-ghost{pointer-events:none}
[data-fig="newsprint"] [data-part$="-led"] circle{transition:opacity .08s}
[data-fig="newsprint"] .np-led-off circle{opacity:.18}
[data-fig="newsprint"] [data-part$="-led"]:not(.np-led-off) circle{opacity:1;fill:var(--anatomy-lit)}
[data-fig="newsprint"] .np-page path,[data-fig="newsprint"] .np-page rect,[data-fig="newsprint"] .np-ghost path{vector-effect:non-scaling-stroke}

[data-fig="cbot"] .cb-dark{fill:var(--anatomy-shade-0)}
[data-fig="cbot"] .cb-well{fill:var(--anatomy-shade-1)}
[data-fig="cbot"] .cb-drum-body{fill:var(--anatomy-shade-2)}
[data-fig="cbot"] .cb-drum{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);vector-effect:non-scaling-stroke}
[data-fig="cbot"] .cb-drum-shine{fill:none;stroke:var(--anatomy-top);stroke-width:2.4px;opacity:.55;vector-effect:non-scaling-stroke}
[data-fig="cbot"] .cb-paper{fill:var(--anatomy-face);stroke:none}
[data-fig="cbot"] .cb-card-text,[data-fig="cbot"] .cb-ticket-text{fill:var(--anatomy-hi);font-family:var(--anatomy-mono)}
[data-fig="cbot"] .cb-ticket-text{fill:var(--anatomy-lit);font-weight:600}
[data-fig="cbot"] .cb-card-cmd,[data-fig="cbot"] .cb-ticket-dim{fill:var(--anatomy-mid);font-family:var(--anatomy-mono)}
[data-fig="cbot"] .cb-led circle{opacity:.12;transition:opacity .25s var(--anatomy-ease)}
[data-fig="cbot"] .cb-led[data-on] circle{opacity:1;fill:var(--anatomy-lit)}
[data-fig="cbot"] .iso-stage{cursor:pointer;touch-action:pan-y}
[data-fig="cbot"] .iso-stage:focus{outline:none}
[data-fig="cbot"] .iso-stage:focus-visible{outline:1px solid var(--anatomy-muted);outline-offset:6px}
[data-fig="cbot"] .cb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){[data-fig="cbot"] .cb-led circle{transition:none}}


[data-fig="vibebike"] .vb-glass{fill:var(--anatomy-shade-0);stroke:none}
[data-fig="vibebike"] .vb-code{fill:var(--anatomy-lit);font-family:var(--anatomy-mono);font-size:1.95px;letter-spacing:.02em;white-space:pre}
[data-fig="vibebike"] .vb-code[data-dim]{fill:var(--anatomy-mid)}
[data-fig="vibebike"] .vb-cursor{fill:var(--anatomy-lit)}
[data-fig="vibebike"] .vb-cam{fill:var(--anatomy-mid)}
[data-fig="vibebike"] .iso-stage{outline:none;cursor:ew-resize;touch-action:pan-y}
[data-fig="vibebike"] .iso-stage:focus-visible{outline:1px solid var(--anatomy-mid);outline-offset:4px}


/* Anatomy figures: blueprint = cyanotype token set, built = kit light set */
.wb.iso{
  --anatomy-page:#17417f;--anatomy-card:#1a4787;--anatomy-text:#c9d8f2;--anatomy-strong:#eef4ff;--anatomy-muted:#bfd0ee;
  --anatomy-paper:#1a4787;--anatomy-face:#20508f;--anatomy-top:#2a5c9e;
  --anatomy-shade-0:#133a70;--anatomy-shade-1:#163f78;--anatomy-shade-2:#1a4580;--anatomy-shade-3:#1e4b89;
  --anatomy-lit-top:#3569ad;--anatomy-lit-shade:#24569a;
  --anatomy-hi:#eef4ff;--anatomy-mid:#a9c0e6;--anatomy-lo:#6f92c9;--anatomy-faint:#46699f;--anatomy-lit:#ffffff;
  --anatomy-halo:#071a3a;--anatomy-halo-opacity:.55;--anatomy-dot:#eef4ff;
  --anatomy-red:#ffb3a6;--anatomy-green:#9df0c0;--anatomy-blue:#bcd4ff;
  color-scheme:dark;
}

.wb.iso{background:none;color:var(--anatomy-text)}
.bench{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bench>.fig{min-width:0}
.bench>.fig:first-child{grid-column:1/-1}
.wb .iso-figure{margin:0}
.wb .iso-plate{border-radius:0;background:none;box-shadow:none}
/* the figure box holds the drawing and its legend, caption and links */
.wb .fig>.iso-figure{display:grid;grid-template-columns:minmax(0,1fr);border-radius:6px;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-lo);overflow:hidden}
.wb .fig>.iso-figure>.iso-legend{padding:0 22px 4px;margin:0}
.wb .fig>.iso-figure>.fig-links{padding:0 22px 20px;margin-top:8px}
/* the lead figure: drawing on the left, the words on the right */
@media (min-width:900px){
  .bench>.fig:first-child>.iso-figure{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:8px}
  .bench>.fig:first-child>.iso-figure>.iso-plate{grid-column:1;grid-row:1/-1}
  .bench>.fig:first-child>.iso-figure>.iso-legend{grid-column:2;grid-row:2;padding:0 28px 0 4px;align-self:end}
  .bench>.fig:first-child>.iso-figure>.fig-links{grid-column:2;grid-row:3;padding:0 28px 0 4px;margin-top:14px;align-self:start}
  .bench>.fig:first-child .iso-svg{max-width:none}
  /* corner labels and readout belong to the whole box, not just the drawing */
  .bench>.fig:first-child>.iso-figure{position:relative}
  .bench>.fig:first-child>.iso-figure>.iso-plate{position:static}
}
.wb .iso-legend{font-family:var(--f-body);font-size:13.5px}
.wb .iso-plate-corner{font-family:var(--f-mono)}
@media (max-width:900px){.bench{grid-template-columns:minmax(0,1fr)}}

/* phone notifications: real posts, two-line clamp, slide in at the top */
.phone .nt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.phone .app.bl{background:#17417f}.phone .app.bl svg{fill:#ffd36b}
.phone .app.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%)}.phone .app.ig svg{fill:#fff}
.phone .app.x{background:#000}.phone .app.x svg{fill:#fff;width:10px;height:10px}
.phone .note{max-height:44px;transition:transform .15s ease}
.phone .note:hover{transform:scale(1.02)}
.phone .note.in{animation:pNoteIn .55s cubic-bezier(.2,.8,.2,1) both}
.phone .note.out{animation:pNoteOut .45s ease both}
@keyframes pNoteIn{from{opacity:0;transform:translateY(10px) scale(.94);max-height:0;margin-top:0;padding-top:0;padding-bottom:0}to{opacity:1;transform:none;max-height:44px}}
@keyframes pNoteOut{to{opacity:0;transform:translateY(-8px) scale(.94);max-height:0;margin-top:0;padding-top:0;padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.phone .note.in,.phone .note.out{animation:none}}

/* ---------- The Raiz Observer, unfolded on the sheet ----------
   The same newsprint as the /blog/ front page, lying open on the blueprint: folded in quarters, so a strong
   centre crease across and a fainter one down the middle, a slight tilt, one corner curled up, and a shadow
   lit from the upper left like the other props. The drop shadow lives on the wrapper so it follows the curled corner. */
.np-wrap{position:relative;z-index:2;padding:8px clamp(0px,1.4vw,16px) 26px;filter:drop-shadow(3px 5px 3px rgba(0,8,30,.32)) drop-shadow(12px 22px 22px rgba(0,8,30,.34))}
.np{
  --np-ink:#1d1c1a; --np-ink2:#4a4740; --np-rule:rgba(29,28,26,.55); --np-hair:rgba(29,28,26,.2);
  position:relative;max-width:1000px;margin:0 auto;padding:clamp(16px,2.6vw,28px) clamp(16px,3vw,32px) clamp(18px,2.6vw,26px);
  color:var(--np-ink);font-family:var(--f-news);transform:rotate(-1.1deg);
  background-color:#f2eee3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(130% 110% at 30% 20%,transparent 55%,rgba(130,105,60,.13) 100%);
  background-size:200px 200px,100% 100%;
  box-shadow:inset 0 0 0 1px rgba(90,70,40,.12),inset 0 0 22px rgba(150,120,70,.16);
  /* the curled corner is cut away here and drawn back by .np-curl */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 42px),calc(100% - 42px) 100%,0 100%);
}
/* fold creases: a thin dark valley multiplied into the print (it darkens photos rather than whitening them), with a soft
   highlight on the far side in soft-light. The across fold is the strong one; the down fold runs in the gutter between the columns. */
.np::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:multiply;
  background:
    linear-gradient(180deg,transparent calc(50% - 9px),rgba(0,0,0,.05) calc(50% - 3px),rgba(0,0,0,.18) calc(50% - 1px),rgba(0,0,0,.18) calc(50% + .5px),transparent calc(50% + 1.5px)),
    linear-gradient(90deg,transparent calc(50% - 6px),rgba(0,0,0,.035) calc(50% - 2px),rgba(0,0,0,.12) calc(50% - .5px),rgba(0,0,0,.12) calc(50% + .5px),transparent calc(50% + 1px)),
    linear-gradient(180deg,transparent 47%,rgba(90,70,40,.05) 50.5%,rgba(90,70,40,.015) 80%,rgba(90,70,40,.06))}
.np::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:soft-light;
  background:
    linear-gradient(180deg,transparent calc(50% + 1px),rgba(255,255,255,.35) calc(50% + 2px),transparent calc(50% + 9px)),
    linear-gradient(90deg,transparent calc(50% + .5px),rgba(255,255,255,.3) calc(50% + 1.5px),transparent calc(50% + 7px)),
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 46%)}
.np-curl{position:absolute;right:0;bottom:0;width:42px;height:42px;z-index:5;pointer-events:none;
  background:linear-gradient(to top left,transparent 50%,rgba(60,45,20,.35) 50%,#d9d0bb 53%,#ece6d6 68%,#f8f4ea 100%);
  box-shadow:-3px -3px 6px -3px rgba(60,45,20,.25)}
.np a{color:inherit;text-decoration:none}
.np a:focus-visible{outline:3px solid #17417f;outline-offset:3px}

.np-ears{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:4px 14px;align-items:baseline;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--np-ink2);border-bottom:1px solid var(--np-hair);padding-bottom:6px}
.np-mast{font-family:'Manufacturing Consent','Old English Text MT',var(--f-news);font-weight:400;font-size:clamp(40px,6.2vw,76px);line-height:1;text-align:center;margin:12px 0 4px;letter-spacing:0}
.np-ears>:nth-child(2){text-align:center}.np-ears>:last-child{text-align:right}
.np-tag{text-wrap:balance;text-align:center;font-style:italic;font-size:14px;color:var(--np-ink2);padding-bottom:8px;border-bottom:4px double var(--np-rule);margin-bottom:16px}
.np-kicker{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--np-ink2);margin:0 0 6px}

.np-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.np-lead{padding-right:22px;min-width:0}
.np-lead h3{font-family:var(--f-news);font-weight:700;font-size:clamp(24px,2.7vw,34px);line-height:1.05;margin:0 0 10px;text-wrap:balance;color:var(--np-ink)}
.np-lead h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.np-photo{position:relative;display:block;margin:0 0 10px;border:1px solid var(--np-ink);outline:3px solid var(--np-ink);outline-offset:-5px;overflow:hidden;background:var(--np-ink)}
.np-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;filter:grayscale(1) contrast(1.12) sepia(.12)}
.np-photo::after,.np-frame::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(29,28,26,.4) .9px,transparent 1.25px);background-size:3.5px 3.5px;mix-blend-mode:multiply;transition:opacity .25s ease}
.np-dek{font-size:15.5px;line-height:1.45;margin:0 0 8px}
.np-dek::first-letter{float:left;font-size:3em;line-height:.82;font-weight:700;margin:.06em .08em 0 0}
.np-by{font-style:italic;font-size:13px;color:var(--np-ink2)}
.np-inside{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--np-rule)}
.np-inside li{padding:9px 0;border-bottom:1px solid var(--np-hair)}
.np-inside li:last-child{border-bottom:0;padding-bottom:0}
.np-inside .np-kicker{display:block;margin:0 0 3px}
.np-inside a{font-weight:700;font-size:17px;line-height:1.2}
.np-inside a:hover{text-decoration:underline;text-underline-offset:3px}

.np-watch{border-left:1px solid var(--np-hair);padding-left:22px;min-width:0}
.np-vid{display:block;outline:none}
.np-frame{position:relative;display:block;overflow:hidden;background:#1d1c1a;border:1px solid var(--np-ink);isolation:isolate}
.np-169{aspect-ratio:16/9}
.np-916{aspect-ratio:9/16}
.np-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) sepia(.14);transition:filter .25s ease}
.np-frame::before{z-index:1}
.np-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.3) 26px,transparent 40px),linear-gradient(transparent calc(100% - 46px),rgba(0,0,0,.55)),radial-gradient(closest-side,rgba(0,0,0,.26),transparent 75%)}
.np-play{position:absolute;z-index:3;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(242,238,227,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.5v13l10-6.5z' fill='%231d1c1a'/%3E%3C/svg%3E") 55% 50%/27px no-repeat;
  box-shadow:0 0 0 3px rgba(29,28,26,.85),0 6px 16px rgba(0,0,0,.45);transition:transform .18s ease,background-color .18s ease}
.np-shorts .np-play{width:38px;height:38px;margin:-19px 0 0 -19px;background-size:18px;box-shadow:0 0 0 2px rgba(29,28,26,.85),0 4px 10px rgba(0,0,0,.4)}
.np-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border-radius:4px;background:rgba(17,17,17,.85);color:#f6f3ea;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.np-chip svg{width:13px;height:13px;flex:0 0 auto}
.np-mark{left:7px;top:7px}
.np-dur{left:7px;bottom:7px}
.np-shorts .np-pn{display:none}
.np-noimg{background:radial-gradient(rgba(242,238,227,.12) 1px,transparent 1.4px) 0 0/5px 5px,linear-gradient(160deg,#34312b,#141311 70%)}
.np-vid:hover .np-frame img,.np-vid:focus-visible .np-frame img{filter:none}
.np-vid:hover .np-frame::before,.np-vid:focus-visible .np-frame::before{opacity:0}
.np-vid:hover .np-play,.np-vid:focus-visible .np-play{background-color:#ffd36b;transform:scale(1.08)}
.np-vid:focus-visible .np-frame{outline:3px solid #17417f;outline-offset:3px}
.np-vid:hover .np-vt,.np-vid:focus-visible .np-vt,.np-vid:hover .np-cap,.np-vid:focus-visible .np-cap{text-decoration:underline;text-decoration-color:rgba(255,211,107,.95);text-decoration-thickness:.42em;text-underline-offset:-.22em;text-decoration-skip-ink:none}
.np-vt{display:block;margin:7px 0 12px;font-size:16px;line-height:1.2;font-weight:700}
.np-shorts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.np-cap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;font-size:12.5px;line-height:1.25;font-weight:700}

.np-wire{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:16px;padding-top:12px;border-top:4px double var(--np-rule)}
.np-wire>*{padding:0 16px;border-left:1px solid var(--np-hair);min-width:0}
.np-wire>:first-child{padding-left:0;border-left:0}
.np-wire>:last-child{padding-right:0}
.np-src{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.np-src svg{width:18px;height:18px;padding:3px;background:#1d1c1a;color:#f2eee3;border-radius:2px;flex:0 0 auto}
.np-clip p{margin:0;font-style:italic;font-size:15px;line-height:1.32}
.np-clip p a::before{content:"\201C"}.np-clip p a::after{content:"\201D"}
.np-clip p a:hover{text-decoration:underline;text-underline-offset:3px}
.np-when{display:block;margin-top:5px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--np-ink2)}
.np-wire .np-more{grid-column:span 2;align-self:center;display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:22px;padding:12px 14px;border:2px solid var(--np-ink);border-left:2px solid var(--np-ink);background:rgba(255,255,255,.25);transition:background-color .18s ease}
.np-more:hover,.np-more:focus-visible{background:#ffd36b}
.np-more-t{font-family:var(--f-news);font-weight:700;font-size:24px;line-height:1.1}
.np-more-s{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--np-ink2)}

/* lights off: the paper dims a touch more than the sheet's glow so it reads as paper, not a light source */
.night .np{filter:brightness(.86)}

@media (max-width:760px){
  .np-body{grid-template-columns:minmax(0,1fr)}
  .np-lead{padding-right:0}
  .np-watch{border-left:0;padding-left:0;border-top:1px solid var(--np-rule);padding-top:12px;margin-top:6px}
  .np-wire{grid-template-columns:minmax(0,1fr)}
  .np-wire>*{padding:10px 0 0;border-left:0;border-top:1px solid var(--np-hair);margin-top:10px}
  .np-wire>:first-child{padding-top:0;border-top:0;margin-top:0}
  .np-wire .np-more{grid-column:auto;margin-left:0;padding:12px 14px;border:2px solid var(--np-ink)}
  .np{transform:rotate(-.6deg);clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%)}
  .np-curl{width:30px;height:30px}
}
@media (max-width:520px){
  .np-ears span:first-child{display:none}
  .np-ears{grid-template-columns:auto auto;justify-content:center;gap:4px 14px}
  .np-shorts{gap:8px}
  .np-shorts .np-play{width:34px;height:34px;margin:-17px 0 0 -17px;background-size:16px}
  .np-chip{font-size:10px;padding:3px 5px}
}
@media (prefers-reduced-motion:reduce){
  .np-frame img,.np-play,.np-more,.np-photo::after,.np-frame::before{transition:none}
  .np-vid:hover .np-play,.np-vid:focus-visible .np-play{transform:none}
}
.snap a.print{display:block;color:inherit;text-decoration:none;cursor:pointer}
.snap a.print:focus-visible{outline:3px solid #ffd36b;outline-offset:4px}
.snap:hover{transform:rotate(-2.4deg) translateY(-2px);transition:transform .2s ease}
@media (prefers-reduced-motion:reduce){.snap:hover{transform:rotate(-3.2deg)}}
/* nine channels (eight plus contact): a 3×3 grid on wide sheets */
@media (min-width:901px){.ports{grid-template-columns:repeat(3,minmax(0,1fr))}}