/* ═══ TOKENS ═══
   A light workbench with a crimson accent. Every section is an instrument on the bench.
   Only two things stay dark: the printer's build plate and the radio's scope screen. */
:root{
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --nav-h:56px;
  --bg:#eceeef; --bg-dot:rgba(22,24,27,.085); --ink:#16181b; --ink-2:#4c545a; --ink-3:#7c858b; --line:#cdd2d5; --line-2:#a3abb0; --hover:rgba(22,24,27,.05);
  --nav-bg:rgba(236,238,239,.9); --shadow:0 1px 2px rgba(20,24,28,.06), 0 16px 40px rgba(20,24,28,.10);
  --accent:#c8102e; --accent-ink:#ffffff; --accent-text:#a80d27; --accent-soft:#fbe8eb; --accent-dark:#ff5470;
  --case:#ffffff; --case-2:#f5f6f7; --case-line:#dde1e4; --case-ink:#16181b; --case-ink-2:#4c545a; --case-ink-3:#848c92; --field:#fbfbfc; --err:#c0182c;
  /* physical objects */
  --paper:#ffffff; --paper-2:#f3f3f0; --paper-ink:#16181b; --paper-line:#d8d9d4; --paper-mute:#62676b;
  --machine:#e1e4e6; --machine-line:#c7ccd0;
  --face:#d8dbde; --face-ink:#1d2024; --face-ink-2:#5c6369;
  --scope:#140b0d; --led:#ff3352; --led-dim:#4a1820;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--bg); background-image:radial-gradient(var(--bg-dot) 1px,transparent 1.3px); background-size:22px 22px; color:var(--ink); font-family:var(--display); font-size:16px; line-height:1.55}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:fixed; left:12px; top:-60px; z-index:100; background:var(--accent); color:var(--accent-ink); padding:8px 12px; font:600 13px var(--mono); text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1280px; margin:0 auto; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px))}
section[id]{scroll-margin-top:calc(var(--nav-h) + 8px)}

/* ═══ SHARED BITS ═══ */
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border:1px solid var(--ink); border-radius:2px; background:transparent; font:500 12.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer; white-space:nowrap; color:var(--ink)}
.btn:hover{background:var(--hover)}
.btn.pri{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.pri:hover{background:var(--accent-text); border-color:var(--accent-text)}
.sbtn{appearance:none; font:500 11.5px var(--mono); letter-spacing:.04em; padding:7px 11px; border-radius:2px; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; white-space:nowrap}
.sbtn:disabled{opacity:.4; cursor:default}
.sbtn.on{background:var(--accent); border-color:var(--accent); color:#fff}
.sec{padding-block:120px 20px}
.sec-h{display:grid; gap:12px; margin-bottom:30px; max-width:760px}
.plate{justify-self:start; display:inline-flex; align-items:center; gap:10px; margin:0; padding:5px 10px; border:1px solid var(--line); border-radius:2px; font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); background:rgba(255,255,255,.5)}
.plate::before,.plate::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--line-2)}
.plate::before{transition:background .3s, box-shadow .3s}
.sec.live .plate::before{background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), 0 0 8px rgba(200,16,46,.6)}
.rise{opacity:0; transform:translateY(28px); transition:opacity .7s ease-out, transform .8s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1; transform:none}
.sec h2{margin:0; font-weight:820; font-variation-settings:"wdth" 112; font-size:clamp(44px,7vw,84px); line-height:.95; letter-spacing:-.03em; text-wrap:balance}
.sec h2 em{font-style:normal; color:var(--accent)}
.sec-sub{margin:0; color:var(--ink-2); font-size:17.5px; max-width:58ch}

/* ═══ NAV ═══ */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; height:calc(var(--nav-h) + env(safe-area-inset-top,0px)); padding-top:env(safe-area-inset-top,0px); padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px)); display:flex; align-items:center; gap:24px; transition:background .25s,border-color .25s; border-bottom:1px solid transparent}
.nav::after{content:""; position:absolute; left:0; bottom:-1px; height:2px; width:calc(var(--p,0) * 100%); background:var(--accent); transition:width .1s linear}
.nav.solid{background:var(--nav-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--line)}
.brand{display:flex; align-items:center; gap:10px; font-weight:780; font-variation-settings:"wdth" 108; font-size:16px; text-decoration:none; white-space:nowrap}
.brand-mark{width:18px; height:18px; border-radius:3px; background:var(--accent); position:relative}
.brand-mark::after{content:""; position:absolute; left:4px; top:4px; width:4px; height:4px; border-radius:50%; background:#fff}
.nav nav{display:flex; gap:4px; margin-left:auto; min-width:0; overflow-x:auto; scrollbar-width:none}
.nav nav::-webkit-scrollbar{display:none}
.nav nav a{font:500 11.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); padding:8px 10px; border-bottom:2px solid transparent; white-space:nowrap}
.nav nav a:hover{color:var(--ink)}
.nav nav a.on{color:var(--ink); border-bottom-color:var(--accent)}
.nav .cv{font:600 11.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:7px 11px; border:1px solid var(--accent); color:var(--accent-text); border-radius:2px; white-space:nowrap}
.nav .cv:hover{background:var(--accent); color:#fff}
@media (max-width:820px){ .brand span:last-child{display:none} .nav{gap:10px} .nav nav a{padding:8px 7px; letter-spacing:.06em} }
@media (max-width:520px){ .nav nav a[href="#skills"]{display:none} .nav nav a{font-size:10.5px; padding:8px 5px} }
@media (max-width:420px){ .nav nav a[href="#about"]{display:none} }

/* back to top */
.totop{position:fixed; z-index:45; right:max(18px,env(safe-area-inset-right,0px)); bottom:max(18px,env(safe-area-inset-bottom,0px)); display:grid; place-items:center; gap:1px; width:52px; height:52px; border-radius:4px; border:1px solid var(--ink); background:var(--case); color:var(--ink); box-shadow:var(--shadow); font:600 9.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .2s, transform .2s, background .15s}
.totop svg{width:16px; height:16px; display:block}
.totop.show{opacity:1; transform:none; pointer-events:auto}
.totop:hover{background:var(--accent); border-color:var(--accent); color:#fff}
@media (prefers-reduced-motion:reduce){ .totop{transition:none} }

/* ═══ INTRO · JOB 0001 ═══ */
.job{min-height:min(100vh,1000px); min-height:min(100svh,1000px); padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 18px); padding-bottom:32px; display:grid; align-content:center}
/* width:100% matters: as a grid item with auto margins the wrapper would otherwise shrink to fit its
   content, and the live g-code line would resize the whole hero every time it changed */
.job .wrap{max-width:1480px; width:100%}
.job-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; align-items:center}
.job-machine{background:var(--machine); border:1px solid var(--machine-line); border-radius:10px; padding:10px; box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.7); min-width:0}
.job-plate{position:relative; width:min(100%, calc((100vh - var(--nav-h) - 150px) * 1.6129)); margin-inline:auto; aspect-ratio:1000/620; border-radius:6px; overflow:hidden; background:#cfd3d6}
.job-plate canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.job-tip{position:absolute; pointer-events:none; background:rgba(20,22,25,.94); color:#f2f2f0; border-radius:3px; padding:6px 9px; font:500 11.5px var(--mono); white-space:nowrap; transform:translate(-50%,calc(-100% - 14px))}
.job-tip b{color:var(--accent-dark); font-weight:600}
/* one fixed row: tools · g-code ticker · controls, so nothing reflows while the job runs */
.job-bar{display:grid; grid-template-columns:auto minmax(0,1fr) 104px; align-items:center; gap:16px; height:46px; padding:10px 6px 2px}
.job-tools{display:flex; gap:6px; list-style:none; margin:0; padding:0; overflow:hidden}
.job-tools li{font:500 11px var(--mono); color:#6b747a; border:1px solid #c3c8cc; border-radius:2px; padding:4px 7px; white-space:nowrap; background:rgba(255,255,255,.4)}
.job-tools li b{font-weight:600; margin-right:4px}
.job-tools li.active{color:var(--ink); border-color:var(--accent); background:#fff}
.job-tools li.active b{color:var(--accent)}
.job-tools li.done{color:#2f7a4e; border-color:#b7d6c3}
.job-gcode{min-width:0; font:12px var(--mono); color:var(--accent-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.job-ctl{display:flex; justify-content:flex-end}
.job-ctl .sbtn{color:var(--ink-2)}
.job-intro{display:grid; gap:18px; align-content:center}
.job-kicker{margin:0; font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text)}
.job-name{margin:0; font-weight:850; font-variation-settings:"wdth" 100; font-size:clamp(38px,3.8vw,52px); line-height:.95; letter-spacing:-.03em; text-wrap:balance}
.job-name em{font-style:normal; color:var(--accent)}
.job-lede{margin:0; color:var(--ink-2); font-size:17px}
.job-cta{display:flex; flex-wrap:wrap; gap:10px}
.job-try{display:grid; gap:6px; padding-top:16px; border-top:1px dashed var(--line)}
.job-try label{font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.job-try label::before{content:"▸ "; color:var(--accent)}
.job-try div{display:flex; gap:6px}
.job-try input{flex:1; min-width:0; font:500 14px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); background:var(--case); border:1px solid var(--line-2); border-radius:3px; padding:8px 10px}
.job-try input::placeholder{text-transform:none; letter-spacing:0; color:var(--ink-3)}
.job-try input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.job-try .sbtn{color:var(--accent-text); border-color:var(--accent); background:var(--case)}
.job-try .sbtn:hover{background:var(--accent); color:#ffffff}
.job-try-msg{margin:0; min-height:1.2em; font:500 11.5px var(--mono); color:var(--accent-text)}
@media (max-width:1100px){ .job-grid{grid-template-columns:1fr; gap:26px} .job-plate{width:min(100%, calc((100vh - var(--nav-h) - 130px) * 1.6129))} .job{min-height:0} .job-intro{max-width:640px} }
@media (max-width:560px){ .job-machine{padding:6px; border-radius:8px} .job-bar{grid-template-columns:minmax(0,1fr) 96px; gap:8px; height:40px} .job-gcode{display:none} .job-tools li{padding:3px 5px; font-size:10.5px} }

/* ═══ DATASHEET (about + skills) ═══ */
.sheet{background:var(--paper); color:var(--paper-ink); border:1px solid #dfe1e2; border-radius:3px; box-shadow:var(--shadow); padding:clamp(20px,4vw,48px); position:relative}
.sheet-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:8px 20px; padding-bottom:14px; border-bottom:4px solid var(--paper-ink)}
.sheet-pn{display:block; font-weight:880; font-variation-settings:"wdth" 120; font-size:clamp(34px,5vw,56px); line-height:.9; letter-spacing:-.02em}
.sheet-pn em{font-style:normal; color:var(--accent)}
.sheet-pd{display:block; margin-top:8px; font-weight:600; font-size:clamp(15px,1.8vw,19px)}
.sheet-meta{font:500 11.5px var(--mono); color:var(--paper-mute); text-align:right}
.sheet-body{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; padding-top:26px}
.sheet h3{margin:0 0 10px; font-weight:780; font-variation-settings:"wdth" 100; font-size:14px; letter-spacing:.06em; text-transform:uppercase; padding-bottom:6px; border-bottom:1px solid var(--paper-line)}
.sheet p{margin:0 0 14px; max-width:64ch}
.sheet .blk{margin-bottom:26px}
.sheet ul.feat{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.sheet ul.feat li{position:relative; padding-left:18px}
.sheet ul.feat li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; background:var(--accent)}
.spec{width:100%; border-collapse:collapse; font-size:14px}
.spec th,.spec td{text-align:left; padding:7px 8px; border:1px solid var(--paper-line); vertical-align:top}
.spec thead th{background:var(--paper-2); font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase}
.spec td.v{font:600 14px var(--mono); white-space:nowrap; font-variant-numeric:tabular-nums}
.spec button{appearance:none; border:0; background:none; padding:0; cursor:pointer; text-decoration:underline; text-decoration-color:#c2c4c0; text-underline-offset:3px; font:inherit; color:inherit; text-align:left}
.spec button:hover{color:var(--accent-text); text-decoration-color:currentColor}
.sheet .note{font-size:14px; color:var(--paper-mute)}
.sheet .feat-row{margin-top:4px}
.sheet ul.feat.grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 28px}
@media (max-width:860px){ .sheet ul.feat.grid{grid-template-columns:1fr} }
/* figure 1 · functional block diagram */
.fbd{margin:4px 0 0}
.fbd figcaption{display:grid; gap:4px; margin-bottom:6px}
.fbd figcaption h3{margin:0}
.fbd figcaption .note{margin:0}
.fbd-scroll{overflow-x:auto; margin:0 -8px; padding:0 8px}
.fbd-scroll svg{display:block; width:100%; min-width:860px; height:auto}
.fbd-lane{cursor:pointer; transition:opacity .2s; outline:none}
.fbd-lane.dim{opacity:.35}
.fbd-hit{fill:transparent}
.fbd-lane.on .fbd-hit,.fbd-lane:focus-visible .fbd-hit{fill:var(--accent-soft)}
.fbd-ln{font:800 17px var(--display); fill:var(--paper-ink)}
.fbd-ls{font:500 11.5px var(--mono); fill:var(--paper-mute)}
.fbd-box{fill:#ffffff; stroke:var(--paper-ink); stroke-width:1.4}
.fbd-lane.on .fbd-box{stroke:var(--accent)}
.fbd-t{font:700 14.5px var(--display); fill:var(--paper-ink)}
.fbd-s{font:500 11px var(--mono); fill:var(--paper-mute)}
.fbd-wire{stroke:var(--paper-ink); stroke-width:1.4}
.fbd-wire.air{stroke-dasharray:4 4}
.fbd-head{fill:var(--paper-ink)}
.fbd-air{font:600 12px var(--mono); fill:var(--accent-text)}
.fbd-pkt{fill:var(--accent); filter:drop-shadow(0 0 3px rgba(200,16,46,.6))}
.sheet-foot{display:flex; justify-content:space-between; margin-top:14px; padding-top:10px; border-top:1px solid var(--paper-line); font:500 11px var(--mono); color:var(--paper-mute)}
@media (max-width:860px){ .sheet-body{grid-template-columns:1fr; gap:10px} .sheet-meta{text-align:left} }
@media (max-width:520px){ .spec th:nth-child(3),.spec td:nth-child(3){display:none} }

/* ═══ RECEIVER · RX-5 ═══ */
.rx{display:grid; gap:14px}
.rx-face{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; padding:18px; border-radius:10px; border:1px solid #c3c8cc; background:var(--face) repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px); color:var(--face-ink); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.8)}
.rx-screen{position:relative; min-height:360px; background:var(--scope); border-radius:10px; box-shadow:inset 0 0 0 6px #2a2d30, inset 0 0 60px rgba(0,0,0,.85); overflow:hidden}
.rx-screen canvas{position:absolute; left:8px; top:8px; width:calc(100% - 16px); height:calc(100% - 16px)}
.rx-lock{position:absolute; top:16px; right:18px; font:600 10.5px var(--mono); letter-spacing:.14em; color:#6a2632; padding:3px 7px; border:1px solid #5a1c26; border-radius:2px}
.rx-lock.on{color:var(--led); border-color:var(--led); box-shadow:0 0 12px rgba(255,51,82,.45)}
.rx-chan{position:absolute; left:18px; bottom:14px; right:18px; font:11px var(--mono); color:#b4546a; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rx-screen.xy canvas{cursor:crosshair}
.rx-tip{position:absolute; z-index:2; pointer-events:none; background:rgba(24,8,12,.95); border:1px solid var(--led); color:#ffe3e8; font:500 11.5px/1.45 var(--mono); padding:6px 10px; border-radius:3px; transform:translate(-50%, calc(-100% - 14px)); white-space:nowrap; font-variant-numeric:tabular-nums}
.rx-tip b{color:#fff; font-weight:600}
.rx-tip .ok{color:#7fe3a3} .rx-tip .mid{color:#ffd166} .rx-tip .bad{color:#ff7a8c}
.rx-ctl{display:grid; align-content:start; gap:14px; min-width:0}
.rx-disp{background:var(--scope); border-radius:6px; padding:10px 14px 9px; box-shadow:inset 0 0 0 3px #2a2d30; font-family:var(--mono); color:var(--led)}
.rx-f{display:flex; align-items:baseline; justify-content:space-between}
.rx-f b{font-size:40px; font-weight:500; font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(255,51,82,.55); line-height:1.1}
.rx-f span{font-size:12px; color:#b4546a}
.rx-rds{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; margin-top:4px; font-size:12px; border-top:1px solid #3a1820; padding-top:6px}
.rx-rds .ps{font-weight:600; letter-spacing:.1em; white-space:pre; color:var(--led)}
.rx-rds .rt{white-space:pre; overflow:hidden; color:#e06a7e}
.rx-band{width:100%; height:66px; display:block; cursor:pointer; border-radius:4px; touch-action:none; box-shadow:inset 0 0 0 1px #c3c8cc}
.rx-kr{display:grid; grid-template-columns:140px minmax(0,1fr); gap:14px; align-items:center}
.rx-knob{width:140px; height:140px; touch-action:none; cursor:grab; border-radius:50%}
.rx-knob svg{width:100%; height:100%; display:block}
.rx-meter{display:grid; gap:7px; font:10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--face-ink-2)}
.rx-seg{display:grid; grid-template-columns:repeat(10,1fr); gap:3px}
.rx-seg i{height:16px; background:#c3c7ca; border-radius:1px; box-shadow:inset 0 1px 1px rgba(0,0,0,.15)}
.rx-seg i.on{background:var(--accent); box-shadow:0 0 6px rgba(200,16,46,.45)}
.rx-btns{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.rx-btns .sbtn{color:var(--face-ink); background:rgba(255,255,255,.5)}
.rx-btns .sbtn.on{background:var(--accent); color:#fff}
/* presets: chunky push-buttons, each with an indicator LED that lights on the tuned station */
.rx-plbl{margin:2px 0 -6px; font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--face-ink)}
.rx-plbl::before{content:"▸ "; color:var(--accent)}
.rx-presets{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px}
.rx-presets button{appearance:none; position:relative; display:grid; gap:3px; justify-items:center; padding:16px 4px 10px; border-radius:4px; border:1.5px solid var(--face-ink); background:#fff; box-shadow:0 4px 0 var(--face-ink); font:800 13px var(--mono); letter-spacing:.03em; color:var(--face-ink); cursor:pointer; min-width:0; transition:transform .08s, box-shadow .08s, background .15s, color .15s}
.rx-presets button::before{content:""; position:absolute; top:6px; left:50%; width:16px; height:4px; margin-left:-8px; border-radius:2px; background:#c9cdd0}
.rx-presets button i{font-style:normal; font-weight:500; font-size:10px; color:var(--face-ink-2)}
.rx-presets button:hover{border-color:var(--accent); box-shadow:0 4px 0 var(--accent-text); color:var(--accent-text)}
.rx-presets button:hover::before{background:#f2a3b0}
.rx-presets button:active{transform:translateY(3px); box-shadow:0 1px 0 var(--face-ink)}
.rx-presets button.on{background:var(--accent); border-color:var(--accent-text); box-shadow:0 4px 0 #6e0718; color:#fff}
.rx-presets button.on i{color:#ffd3da}
.rx-presets button.on::before{background:#fff; box-shadow:0 0 8px #fff}
.rx-presets button span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
@media (max-width:1000px){ .rx-face{grid-template-columns:1fr} .rx-screen{min-height:250px} .rx-ctl{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start} .rx-disp,.rx-band,.rx-presets,.rx-plbl{grid-column:1/-1} }
@media (max-width:600px){ .rx-face{padding:12px; gap:12px} .rx-screen{min-height:210px} .rx-ctl{grid-template-columns:1fr} .rx-kr{grid-template-columns:112px minmax(0,1fr)} .rx-knob{width:112px; height:112px} .rx-f b{font-size:32px} }

/* broadcast output */
.rx-out{position:relative; background:var(--case); color:var(--case-ink); border:1px solid var(--case-line); border-radius:10px; padding:clamp(18px,3vw,34px); min-height:200px; box-shadow:var(--shadow)}
.rx-status{font:500 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent-text); margin-bottom:16px; min-height:1.4em; white-space:pre-wrap; word-break:break-word}
.rx-status .scr{text-transform:none; letter-spacing:0; font-size:13px; color:var(--case-ink-2)}
.rx-idle{display:grid; gap:12px}
.rx-idle p{margin:0; color:var(--case-ink-2); max-width:60ch}
.rx-idle ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.rx-idle button{appearance:none; background:transparent; border:1px solid var(--case-line); border-radius:2px; padding:8px 12px; cursor:pointer; font:500 12.5px var(--mono); color:var(--case-ink)}
.rx-idle button:hover{border-color:var(--accent)}
.rx-idle button b{color:var(--accent-text); font-weight:500; margin-right:6px}
.js .bc{display:none}
.js .bc.on{display:block; animation:bcin .45s ease-out}
.bc.lost{opacity:.32; filter:saturate(.4); transition:opacity .3s}
@keyframes bcin{from{opacity:0; transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){ .js .bc.on{animation:none} }
.bc+.bc{margin-top:40px}
.js .bc+.bc{margin-top:0}
.bc-h{display:grid; gap:6px; margin-bottom:22px}
.bc-cat{margin:0; font:500 11.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text)}
.bc h3{margin:0; font-weight:830; font-variation-settings:"wdth" 112; font-size:clamp(32px,4.4vw,52px); line-height:1; letter-spacing:-.025em}
.bc-tag{margin:0; color:var(--case-ink-2); font-size:17px}
.bc-body{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:36px}
.bc-ov{margin:0 0 18px; font-size:17px; max-width:62ch}
.bc-feat{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.bc-feat li{padding-left:16px; border-left:2px solid var(--case-line); color:var(--case-ink-2); font-size:15px; max-width:64ch}
.bc-feat b{color:var(--case-ink); font-weight:650}
.bc-side{display:grid; gap:18px; align-content:start; min-width:0}
.bc-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:0; background:var(--case-line); border:1px solid var(--case-line); border-radius:4px; overflow:hidden}
.bc-stats div{background:var(--case-2); padding:12px 14px}
.bc-stats dt{font:600 22px var(--mono); color:var(--accent-text); font-variant-numeric:tabular-nums; line-height:1.1}
.bc-stats dd{margin:3px 0 0; font-size:12.5px; color:var(--case-ink-2); line-height:1.3}
.bc-stack{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.bc-stack li{font:500 11.5px var(--mono); padding:4px 8px; border:1px solid var(--case-line); border-radius:2px; color:var(--case-ink-2)}
.bc-gal{margin:0; display:grid; gap:8px}
.bc-gal a{display:block; border-radius:4px; overflow:hidden; border:1px solid var(--case-line); background:var(--case-2)}
.bc-gal img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top left}
.bc-gal figcaption{font-size:13px; color:var(--case-ink-2)}
.bc-thumbs{display:flex; gap:6px; flex-wrap:wrap}
.bc-thumbs button{appearance:none; padding:0; border:1px solid var(--case-line); border-radius:3px; overflow:hidden; width:64px; height:42px; background:var(--case-2); cursor:pointer; opacity:.6}
.bc-thumbs button.on{opacity:1; border-color:var(--accent)}
.bc-thumbs img{width:100%; height:100%; object-fit:cover; object-position:top left}
.bc-note{font-size:13.5px; color:var(--case-ink-3); margin:0}

/* LOOM · toolchanger live assembly */
.tcv-box{margin:0; border:1px solid var(--case-line); border-radius:6px; overflow:hidden; background:var(--case-2)}
.tcv{position:relative; height:300px; overflow:hidden; background:linear-gradient(rgba(22,24,27,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(22,24,27,.05) 1px,transparent 1px), radial-gradient(120% 96% at 50% 4%,#ffffff 0%,#f0f2f3 100%); background-size:24px 24px,24px 24px,100% 100%}
#tc-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab}
#tc-canvas.dragging{cursor:grabbing}
.tcv-tag{position:absolute; top:12px; left:14px; font:500 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--case-ink-3); pointer-events:none}
.tcv-hint{position:absolute; bottom:10px; right:12px; font:500 10px var(--mono); letter-spacing:.08em; color:var(--case-ink-3); transition:opacity .4s; pointer-events:none}
.tcv-rail{position:absolute; top:14px; right:14px; display:flex; gap:3px; pointer-events:none}
.tcv-rail i{width:16px; height:3px; border-radius:1px; background:rgba(22,24,27,.14)}
.tcv-rail i.done{background:var(--accent)}
.tcv-load{position:absolute; inset:0; display:grid; place-items:center; font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--case-ink-3); transition:opacity .5s}
.tcv-load.gone{opacity:0; pointer-events:none}
.cal{position:absolute; left:0; top:0; pointer-events:none; opacity:0; transition:opacity .35s; will-change:transform}
.cal-dot{position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.cal-leg{position:absolute; left:0; top:0; width:46px; height:1px; background:var(--accent); transform-origin:0 50%; transform:rotate(-34deg)}
.cal-lbl{position:absolute; left:40px; top:-40px; white-space:nowrap; font:500 12px var(--mono); color:var(--case-ink); background:rgba(255,255,255,.96); border:1px solid var(--accent); border-radius:2px; padding:4px 8px; font-variant-numeric:tabular-nums}
.cal.flip .cal-leg{transform:rotate(214deg)}
.cal.flip .cal-lbl{left:auto; right:40px}
.cal-lbl b{color:var(--accent-text); font-weight:600}
.cal-lbl span{display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--case-ink-3); margin-top:2px}
.tcv-cap{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; padding:12px 14px; border-top:1px solid var(--case-line); background:var(--case); min-height:84px}
.tcv-step{font:600 11px var(--mono); color:var(--accent-text); padding-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap}
.tcv-txt{display:grid; gap:3px; transition:opacity .12s}
.tcv-txt b{font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase}
.tcv-txt span{font-size:13.5px; color:var(--case-ink-2); line-height:1.45}
.tcv-eng{display:grid; text-align:right}
.tcv-eng b{font:600 15px var(--mono); color:var(--case-ink-3); font-variant-numeric:tabular-nums; transition:color .3s}
.tcv-eng b.hot{color:var(--accent)}
.tcv-eng span{font:500 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--case-ink-3)}
@media (max-width:520px){ .tcv{height:240px} .tcv-cap{grid-template-columns:minmax(0,1fr) auto} .tcv-step{display:none} }
@media (max-width:900px){ .bc-body{grid-template-columns:1fr; gap:24px} }

/* ═══ LOGIC ANALYZER · LA-8 ═══ */
.la{display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; background:var(--case); color:var(--case-ink); border:1px solid var(--case-line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow)}
.la-top{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--case-line); background:var(--case-2); font:500 11px var(--mono); letter-spacing:.06em; color:var(--case-ink-2); text-transform:uppercase}
.la-top b{color:var(--case-ink); font-weight:600}
.la-zoom{display:inline-flex; gap:4px; margin-left:auto}
.la-zoom .sbtn{color:var(--case-ink-2); padding:4px 9px; min-width:30px}
.la-top .la-play{ color:var(--accent-text); border-color:var(--accent); background:var(--case)}
.la-top .la-play:hover{background:var(--accent); color:#ffffff}
.la-top .rec{display:inline-flex; align-items:center; gap:6px}
.la-top .rec::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.la-scr{position:relative; background:#fdfdfd; min-width:0}
.la-scr canvas{display:block; width:100%; touch-action:pan-y; cursor:ew-resize}
.la-read{border-left:1px solid var(--case-line); padding:16px; display:grid; gap:12px; align-content:start; overflow:auto}
.la-t{font:600 13px var(--mono); color:var(--case-ink)}
.la-t span{color:var(--case-ink-3); font-weight:500}
.la-card{border-left:3px solid var(--c,#888); padding:2px 0 2px 12px}
.la-card h4{margin:0; font-weight:720; font-size:16px; line-height:1.25}
.la-card .org{margin:2px 0 0; font-size:13px; color:var(--case-ink-2)}
.la-card .when{margin:2px 0 0; font:500 11.5px var(--mono); color:var(--case-ink-3)}
.la-card .desc{margin:8px 0 0; font-size:14px; color:var(--case-ink-2)}
.la-steps{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:5px}
.la-steps li{position:relative; display:flex; flex-wrap:wrap; gap:0 8px; align-items:baseline; padding-left:18px; font-size:13px; color:var(--case-ink-3)}
.la-steps li::before{content:""; position:absolute; left:1px; top:.38em; width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; box-sizing:border-box}
.la-steps li:not(:last-child)::after{content:""; position:absolute; left:4.5px; top:1.2em; width:1px; height:calc(100% - .5em); background:var(--case-line)}
.la-steps li.past{color:var(--case-ink-2)}
.la-steps li.past::before{background:currentColor}
.la-steps li.on{color:var(--case-ink)}
.la-steps li.on::before{background:var(--c); border-color:var(--c); box-shadow:0 0 0 3px var(--accent-soft)}
.la-steps b{font-weight:650}
.la-steps span{font:500 11px var(--mono)}
.la-card .sbtn{margin-top:8px; color:var(--case-ink-2)}
.la-card .sbtn:hover{color:var(--accent-text)}
.la-empty{margin:0; color:var(--case-ink-3); font-size:14px}
.js .la-list{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
.la-list{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:18px}
@media (max-width:980px){ .la{grid-template-columns:1fr} .la-read{border-left:0; border-top:1px solid var(--case-line); max-height:none} }

/* ═══ SKILLS · APPLICATION CIRCUIT (datasheet p.2) ═══ */
.pins-chip{margin-top:14px}
.pins-chip svg{width:100%; height:auto; display:block; overflow:visible}
.pins-chip .chip-pn{font:800 44px var(--display); fill:#eef0f2; letter-spacing:-.5px}
.pins-chip .chip-sub{font:500 12px var(--mono); fill:#8f98a3}
.pins-chip .chip-sub.dim{font-size:11px; fill:#5f6870}
.pins-chip g.pin{cursor:pointer; transition:opacity .2s}
.pins-chip g.pin.nc{cursor:default}
.pins-chip g.pin.dim{opacity:.32}
.pins-chip .lead{fill:#b4b9be; stroke:#868d93; stroke-width:1; transition:fill .15s}
.pins-chip .lead.nc{fill:#e2e3e0; stroke:#c8cac5}
.pins-chip .lbl{font:500 15px var(--mono); fill:var(--paper-ink)}
.pins-chip .lbl.nc{fill:#a7a9a5}
.pins-chip .num{font:500 10px var(--mono); fill:#9ea3a8}
.pins-chip .pwr .lbl{fill:#2b6d47}
.pins-chip g.pin.on .lead,.pins-chip g.pin.lit .lead{fill:var(--accent); stroke:var(--accent-text)}
.pins-chip g.pin.on .lbl,.pins-chip g.pin.lit .lbl{fill:var(--accent-text); font-weight:600}
.pins-chip g.pin.on .num,.pins-chip g.pin.lit .num{fill:#ffffff}
.pins-chip .mod{cursor:pointer; transition:opacity .2s}
.pins-chip .mod.dim{opacity:.4}
.pins-chip .mod-box{fill:#ffffff; stroke:var(--paper-ink); stroke-width:1.5; transition:fill .15s}
.pins-chip .mod-n{font:800 19px var(--display); fill:var(--paper-ink)}
.pins-chip .mod-s{font:500 11.5px var(--mono); fill:var(--paper-mute)}
.pins-chip .mod-c{font:600 13px var(--mono); fill:var(--paper-mute)}
.pins-chip .mod-pad{fill:#b4b9be; stroke:#868d93}
.pins-chip .mod:hover .mod-box{stroke:var(--accent)}
.pins-chip .mod.on .mod-box{fill:var(--accent); stroke:var(--accent-text)}
.pins-chip .mod.on .mod-n,.pins-chip .mod.on .mod-s,.pins-chip .mod.on .mod-c{fill:#ffffff}
.pins-chip .mod.on .mod-pad{fill:#ffffff; stroke:var(--accent-text)}
.pins-chip .net-halo{fill:none; stroke:var(--paper); stroke-width:8; stroke-linecap:round}
.pins-chip .net{fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:12 7; animation:netflow .8s linear infinite}
@keyframes netflow{to{stroke-dashoffset:-19}}
@media (prefers-reduced-motion:reduce){ .pins-chip .net{animation:none; stroke-dasharray:none} }
.pins-chip.narrow .mods,.pins-chip.narrow .nets{display:none}
.pins-chip.narrow .lbl{font-size:19px}
.pins-chip.narrow .num{font-size:12px}
.pins-mods{display:none}
.pins-mods button{appearance:none; display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:10px 12px; border:1.5px solid var(--paper-ink); background:#ffffff; border-radius:4px; font:inherit; color:var(--paper-ink); cursor:pointer; text-align:left}
.pins-mods button b{font-weight:800; font-size:14px}
.pins-mods button span{font:500 11px var(--mono); color:var(--paper-mute)}
.pins-mods button.on{background:var(--accent); border-color:var(--accent-text); color:#ffffff}
.pins-mods button.on span{color:#ffd3da}
@media (max-width:760px){ .pins-mods{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:16px} }
.pins-read{border:1px solid var(--paper-line); border-left:3px solid var(--accent); border-radius:3px; padding:16px 18px; margin-top:8px; background:#fbfbfa; min-height:172px}
.pins-read .pn{font:600 11.5px var(--mono); letter-spacing:.06em; color:var(--paper-mute); text-transform:uppercase}
.pins-read h4{margin:2px 0 0; font-weight:800; font-variation-settings:"wdth" 108; font-size:26px; line-height:1.1}
.pins-read p{margin:8px 0 0; max-width:70ch}
.pins-read .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.pins-read .chips span{font:500 12px var(--mono); padding:5px 9px; border:1px solid var(--paper-line); border-radius:2px; background:#ffffff}
.pins-read .use{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; align-items:center; font:500 11.5px var(--mono); color:var(--paper-mute)}
.pins-read .use button,.pins-read .use span{appearance:none; border:1px solid var(--paper-ink); background:transparent; border-radius:2px; padding:5px 9px; font:600 11px var(--mono); letter-spacing:.04em; color:var(--paper-ink)}
.pins-read .use span{border-style:dashed; border-color:var(--paper-line)}
.pins-read .use button{cursor:pointer}
.pins-read .use button:hover{background:var(--accent); border-color:var(--accent); color:#ffffff}
.pins-read .go{display:inline-flex; margin-top:14px; padding:8px 12px; border:1px solid var(--accent); border-radius:2px; background:transparent; color:var(--accent-text); font:600 12px var(--mono); letter-spacing:.04em; text-decoration:none; cursor:pointer}
.pins-read .go:hover{background:var(--accent); color:#ffffff}
.pins-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-top:12px}
.pins-foot .sbtn{color:var(--paper-ink)}
.pins-legend{margin:0; font:500 11px var(--mono); color:var(--paper-mute)}
.pins-tbl{margin-top:12px}
.pin-table{width:100%; border-collapse:collapse; font-size:13.5px}
.pin-table th,.pin-table td{text-align:left; padding:5px 7px; border-bottom:1px solid var(--paper-line); vertical-align:top}
.pin-table thead th{font:600 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--paper-mute); border-bottom:2px solid var(--paper-ink)}
.pin-table td:first-child{font:500 12px var(--mono); color:var(--paper-mute); width:2.6em}
.pin-table td.nm{font:600 12.5px var(--mono); white-space:nowrap}
.pin-table td.ty{font:500 11px var(--mono); color:var(--paper-mute)}
.pin-table tr{cursor:pointer}
.pin-table tr.grp td{cursor:default; padding-top:12px; font:700 11px var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--paper-ink); background:transparent; border-bottom:1px solid var(--paper-ink); width:auto}
.pin-table tbody tr:not(.grp):hover td,.pin-table tr.on td{background:var(--accent-soft)}
.pin-table tr.on td.nm{color:var(--accent-text)}

/* ═══ TRANSMITTER · TX-1 ═══ */
.tx{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); background:var(--case); color:var(--case-ink); border:1px solid var(--case-line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow)}
.tx-form{display:grid; gap:14px; padding:22px; align-content:start}
.tx-form label{display:grid; gap:6px; font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--case-ink-2)}
.tx-form input,.tx-form textarea{font:15px var(--display); color:var(--case-ink); background:var(--field); border:1px solid var(--case-line); border-radius:3px; padding:11px 12px; width:100%; resize:vertical}
.tx-form textarea{min-height:140px; line-height:1.5}
.tx-form input:focus,.tx-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.tx-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tx-row .sbtn{color:var(--case-ink-2)}
.tx-err{margin:0; color:var(--err); font-size:14px; min-height:1.3em}
.tx-wf{position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto auto; background:#fbfbfb; border-left:1px solid var(--case-line); min-height:540px}
.tx-wf canvas#tx-wfall{cursor:crosshair}
.tx-wf .hd{display:flex; justify-content:space-between; gap:10px; padding:10px 14px; font:500 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--case-ink-3); border-bottom:1px solid var(--case-line); background:var(--case-2)}
.tx-wf canvas{display:block; width:100%; height:100%}
.tx-spec{height:70px !important; border-bottom:1px solid var(--case-line)}
.tx-ax{display:flex; justify-content:space-between; padding:6px 14px 0; font:10.5px var(--mono); color:var(--case-ink-3)}
.tx-stat{padding:8px 14px 10px; font:500 12px var(--mono); color:var(--accent-text); min-height:2.4em}
.tx-paint{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 12px; padding:9px 14px; border-top:1px solid var(--case-line); background:var(--case); font:500 11px var(--mono); color:var(--case-ink-3)}
.tx-paint div{display:flex; flex-wrap:wrap; gap:5px}
.tx-paint .sbtn{color:var(--accent-text); border-color:var(--case-line); background:var(--case); padding:5px 10px; font-size:12px}
.tx-paint .sbtn:hover,.tx-paint .sbtn.on{background:var(--accent); border-color:var(--accent); color:#ffffff}
.tx-paint .tx-drawbtn{display:none}
@media (pointer:coarse){ .tx-paint .tx-drawbtn{display:inline-flex} }
#tx-wfall{cursor:crosshair}
.tx-logwrap{border-top:1px solid var(--case-line); background:var(--case)}
.tx-logh{display:flex; justify-content:space-between; padding:8px 14px 4px; font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--case-ink-3)}
.tx-log{list-style:none; margin:0; padding:0 14px 10px; display:grid; align-content:start; gap:0; min-height:126px; font:12px var(--mono)}
.tx-log li{display:grid; grid-template-columns:62px 64px minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:3px 0; border-bottom:1px dashed var(--case-line); color:var(--case-ink-2); animation:logIn .5s ease-out}
.tx-log li:first-child{color:var(--case-ink)}
.tx-log time{color:var(--case-ink-3)}
.tx-log b{font-weight:600; color:var(--case-ink)}
.tx-log span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tx-log i{font-style:normal; color:var(--case-ink-3); white-space:nowrap}
.tx-log li.me b{color:var(--accent-text)}
@keyframes logIn{from{background:var(--accent-soft)}}
@media (prefers-reduced-motion:reduce){ .tx-log li{animation:none} }
@media (max-width:560px){ .tx-log li{grid-template-columns:58px 56px minmax(0,1fr)} .tx-log i{display:none} }
.tx-hint{margin:-6px 0 0; font:500 11.5px var(--mono); color:var(--accent-text)}
.tx-hint::before{content:"● "; animation:blink 1.6s steps(2,start) infinite}
@keyframes blink{50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){ .tx-hint::before{animation:none} }
.direct{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:14px; background:var(--case-line); border:1px solid var(--case-line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow)}
.direct div{background:var(--case); padding:14px 16px; display:grid; gap:4px; min-width:0}
.direct span{font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--case-ink-3)}
.direct a,.direct b{font-weight:600; font-size:15px; overflow-wrap:anywhere; text-decoration:none; color:var(--case-ink)}
.direct a:hover{color:var(--accent-text)}
.direct b{user-select:all}
.direct .sbtn{justify-self:start; color:var(--case-ink-2); margin-top:2px; padding:4px 8px}
@media (max-width:900px){ .tx{grid-template-columns:1fr} .tx-wf{border-left:0; border-top:1px solid var(--case-line); min-height:320px} .direct{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .direct{grid-template-columns:1fr} }

/* ═══ IMAGE POP-UP ═══ */
.lb{width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:#f2f2f0; overflow:hidden}
.lb::backdrop{background:rgba(18,20,23,.88); backdrop-filter:blur(3px)}
.lb[open]{display:grid; place-items:center; animation:lbin .2s ease-out}
@keyframes lbin{from{opacity:0}}
.lb-fig{margin:0; display:grid; gap:12px; justify-items:center; max-width:min(1280px,92vw); padding:56px 64px 28px}
.lb-fig img{max-width:100%; max-height:calc(100vh - 170px); width:auto; height:auto; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff}
.lb-fig figcaption{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; align-items:baseline; font-size:14px; color:#c9cdd0; text-align:center}
.lb-t{font-weight:700; color:#fff}
.lb-n{font:500 12px var(--mono); color:#8f969c}
.lb-x{position:fixed; top:max(16px,env(safe-area-inset-top,0px)); right:max(16px,env(safe-area-inset-right,0px)); width:44px; height:44px; border-radius:4px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.3); color:#fff; font-size:18px; cursor:pointer}
.lb-nav{position:fixed; top:50%; transform:translateY(-50%); width:48px; height:64px; border-radius:4px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.3); color:#fff; font-size:32px; line-height:1; cursor:pointer}
.lb-prev{left:max(12px,env(safe-area-inset-left,0px))}
.lb-next{right:max(12px,env(safe-area-inset-right,0px))}
.lb-x:hover,.lb-nav:hover{background:var(--accent); border-color:var(--accent)}
.bc-gal a{cursor:zoom-in}
@media (max-width:600px){ .lb-fig{padding:64px 12px 20px} .lb-nav{top:auto; bottom:max(14px,env(safe-area-inset-bottom,0px)); transform:none; height:48px} }
@media (prefers-reduced-motion:reduce){ .lb[open]{animation:none} }

/* ═══ FOOTER ═══ */
.foot{padding-block:80px 40px; color:var(--ink-3); font:500 12px var(--mono); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px}
.foot a{color:var(--ink-2)}