/* twinpad — "the lab": a real cloning lab at night. Full-bleed photo zones (containment floor, operator bench, cryo room) with physical
   objects laid over them: paper forms, a thermal receipt printer, taped specimen tags, steel plates, graduated cylinders.
   One dark theme. Fonts: Barlow Condensed (display), Barlow (body), B612 Mono (data), Libre Barcode 39 Text (barcodes).
   Every start state that hides something for an animation sits behind html.js (set inline before first paint): no JS, nothing hidden. */
:root{
  --night:#0b0c0d;
  --steel:#16191b;
  --rule:#2b3033;
  --bone:#ebe5d8;
  --dust:#9a948a;
  --amber:#f5a524;
  --amber-hi:#ffcf7a;
  --paper:#ede7d8;
  --paper-edge:#d6cdb8;
  --ink:#1c1b18;
  --ink-soft:#5b574e;
  --pen:#14306b;
  --stamp:#c23a2c;
  --hazard:#e9b300;
  --up:#9fd98f;
  --dn:#ff7d66;
  --up-ink:#1d6a2b;
  --dn-ink:#b3261e;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --data:"B612 Mono",ui-monospace,Menlo,monospace;
  --barcode:"Libre Barcode 39 Text","B612 Mono",monospace;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --brushed:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--night);color:var(--bone);font:16px/1.55 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
button,input,select{font:inherit;color:inherit}
ol,ul{margin:0;padding:0}
.wrap{max-width:1240px;margin:0 auto;padding-inline:16px}
@media(min-width:720px){.wrap{padding-inline:32px}}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px}
.skip{position:absolute;left:12px;top:-80px;z-index:80;padding:10px 14px;background:var(--amber);color:#1a1004;font:700 12px/1 var(--data);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:3px}
.skip:focus{top:12px}
.mono{font-family:var(--data)}
.dim{color:var(--dust)}
.small{font-size:12px}
.up{color:var(--up)}
.dn{color:var(--dn)}
code{font:400 .92em var(--data);color:var(--amber-hi)}
code,.mono code{text-transform:none!important;letter-spacing:0!important}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.9;margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(54px,9.4vw,128px);letter-spacing:-.005em}
h2{font-weight:800;font-size:clamp(40px,6.2vw,84px);margin-block:18px 16px}
h1 em,h2 em,.h3 em{font-style:normal;color:var(--amber)}
.h3{font:800 clamp(28px,3.4vw,40px)/.95 var(--display);text-transform:uppercase;margin:0 0 18px}
.lede{font-size:clamp(17px,1.5vw,19px);color:#d3ccbe;max-width:50ch}
.sec-lede{font-size:17px;color:#c9c2b4;max-width:60ch}
.lede b,.sec-lede b{color:var(--bone);font-weight:600}
.lede a,.sec-lede a{color:var(--amber-hi);text-underline-offset:3px}

/* ---------- nav + status board ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(11,12,13,.86);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 23px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--bone);flex:none}
.brand img{width:37px;height:30px;flex:none}
.nav-links{display:flex;align-items:center;gap:22px;font:600 14px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.nav-links a{text-decoration:none;padding-block:12px;white-space:nowrap}
.nav-links a:hover{color:var(--amber)}
.nav-links a[aria-current]{color:var(--bone);box-shadow:inset 0 -2px 0 var(--amber)}
.menu{display:none;position:relative}
.menu summary{list-style:none;display:flex;align-items:center;gap:9px;min-height:44px;padding:0 4px 0 10px;cursor:pointer;font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{position:relative;width:18px;height:12px;border-block:2px solid currentColor}
.menu summary i::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:currentColor;transition:transform .2s}
.menu[open] summary{color:var(--amber)}
.menu[open] summary i{border-color:transparent}
.menu[open] summary i::before{transform:rotate(45deg)}
.menu[open] summary i::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:currentColor;transform:rotate(-45deg)}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 32px));display:grid;padding:8px;border-radius:6px;background:var(--brushed),linear-gradient(180deg,#2a2f33,#171a1d);border:1px solid #3a4146;box-shadow:0 30px 60px -20px #000}
.menu-panel a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-bottom:1px solid #2a2f33;text-decoration:none;font:700 17px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a[aria-current]{color:var(--amber)}
@media(max-width:1000px){.nav-links .opt{display:none}.menu{display:block}}
@media(max-width:640px){.nav-links{gap:14px;font-size:13px;letter-spacing:.12em}.nav .wrap{gap:10px}.brand{font-size:21px}}

.board{display:flex;align-items:stretch;background:#060707;border-bottom:1px solid var(--rule);font:400 11px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.board-roll{flex:1;min-width:0;overflow:hidden;white-space:nowrap;padding:9px 0;position:relative}
/* the status board is an LED ticker behind a dark lens: a fine dot pitch over the characters, and the unlit dots faintly visible */
@media(min-resolution:1.5dppx){.board-roll{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='3.6'/%3E%3C/svg%3E") 0 0/1.7px 1.7px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='3.6'/%3E%3C/svg%3E") 0 0/1.7px 1.7px}}
.board-track{display:inline-flex;animation:board 80s linear infinite}
.board-track span{display:inline-flex;align-items:center;gap:10px;padding-right:44px}
.board-track span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber-hi);box-shadow:0 0 0 1px rgba(245,165,36,.35)}
.board-track .px b{color:var(--bone);font-weight:400}
.board-track .px i{font-style:normal}
@keyframes board{to{transform:translateX(-50%)}}
.board-ca{flex:none;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;background:#0f1112;border-left:1px solid var(--rule);color:var(--dust);min-width:0;max-width:62%}
.board-ca b{color:var(--amber);font-weight:700;white-space:nowrap}
.board-ca code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--bone)}
.board-ca a{white-space:nowrap;color:var(--amber-hi);text-decoration:none}
@media(max-width:640px){.board-ca a{display:none}.board-ca code{max-width:9.5em}}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;font:700 16px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:15px 24px;border-radius:3px;background:var(--amber);color:#1a1004;border:0;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),inset 0 1px 0 rgba(255,236,190,.55),0 1px 0 rgba(0,0,0,.6),0 12px 22px -14px rgba(0,0,0,.95)}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{background:var(--amber-hi)}
.btn.ghost{background:rgba(11,12,13,.45);color:var(--bone);box-shadow:inset 0 0 0 1px rgba(235,229,216,.35)}
.btn.ghost:hover{color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.btn.sm{min-height:40px;padding:11px 16px;font-size:14px}
.btn[aria-disabled=true],.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:inset 0 0 0 1px rgba(235,229,216,.25);background:rgba(11,12,13,.45);color:var(--dust)}
.copy{flex:none;min-height:32px;padding:6px 10px;border:1px solid rgba(255,207,122,.5);border-radius:2px;background:transparent;color:var(--amber-hi);font:700 10.5px/1 var(--data);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.copy:hover{background:rgba(245,165,36,.12)}
.copy.ok{background:var(--amber);color:#1a1004;border-color:var(--amber)}

/* ---------- zone sign ---------- */
.zone{display:inline-flex;align-items:stretch;font:700 12px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;border:1px solid #3a4044;border-radius:3px;overflow:hidden;background:var(--steel);color:var(--bone);vertical-align:middle}
.zone b{border-radius:2px 0 0 2px}
.zone b{display:grid;place-items:center;min-width:30px;padding:0 6px;background:var(--amber);color:#1a1004;font-size:15px;letter-spacing:0}
.zone span{padding:8px 12px}
/* in headings the sign hangs from the ceiling on two wires (fading up into the dark); it swings once when it comes into view */
:is(.sec-head,.page-head,.banner,.file-head,.nf) .zone{position:relative;overflow:visible}
:is(.sec-head,.page-head,.banner,.file-head,.nf) .zone::before{content:"";position:absolute;left:12px;right:12px;bottom:100%;height:20px;pointer-events:none;transform-origin:50% 100%;
  background:linear-gradient(90deg,#6c747a 0 1px,transparent 1px calc(100% - 1px),#6c747a calc(100% - 1px));-webkit-mask:linear-gradient(transparent,#000 85%);mask:linear-gradient(transparent,#000 85%)}
/* two parallel wires: the sign stays level and swings sideways on an arc (rising a hair at the ends), the wires lean */
.zone.in{animation:swing 2.8s ease-in-out both}
.zone.in::before{animation:lean 2.8s ease-in-out both}
@keyframes swing{0%{translate:0 0}9%{translate:-6px -.9px;rotate:-.5deg}25%{translate:4.4px -.5px;rotate:.35deg}41%{translate:-2.8px -.2px;rotate:-.2deg}57%{translate:1.6px 0;rotate:.1deg}72%{translate:-.7px 0;rotate:0deg}86%{translate:.25px 0}100%{translate:0 0}}
@keyframes lean{0%{transform:skewX(0)}9%{transform:skewX(-16.7deg)}25%{transform:skewX(12.4deg)}41%{transform:skewX(-8deg)}57%{transform:skewX(4.6deg)}72%{transform:skewX(-2deg)}86%{transform:skewX(.7deg)}100%{transform:skewX(0)}}

/* ---------- steel ---------- */
.steel{position:relative;background:var(--brushed),linear-gradient(180deg,#2a2f33,#171a1d);border:1px solid #3a4146;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.9)}
.steel.screws::after{content:"";position:absolute;inset:7px;pointer-events:none;
  background:radial-gradient(circle at 5px 5px,#7a828a 0 1.6px,#252a2e 2.2px 3.6px,transparent 4.2px),radial-gradient(circle at calc(100% - 5px) 5px,#7a828a 0 1.6px,#252a2e 2.2px 3.6px,transparent 4.2px),radial-gradient(circle at 5px calc(100% - 5px),#7a828a 0 1.6px,#252a2e 2.2px 3.6px,transparent 4.2px),radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),#7a828a 0 1.6px,#252a2e 2.2px 3.6px,transparent 4.2px)}
.paper{position:relative;background-color:var(--paper);background-image:var(--noise);color:var(--ink);border-radius:2px;box-shadow:0 1px 0 var(--paper-edge),0 36px 60px -24px rgba(0,0,0,.85),0 8px 18px rgba(0,0,0,.35)}
.readout{padding:12px 14px;background:linear-gradient(180deg,#050606,#0d0f10);border:1px solid #2e3437;border-radius:3px;box-shadow:inset 0 1px 3px rgba(0,0,0,.9);min-width:0}
.readout span{display:block;font:400 10px/1.2 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.readout b{display:block;margin-top:8px;font:700 27px/1 var(--display);letter-spacing:.02em;color:var(--amber);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.readout small{display:block;margin-top:6px;font:400 10.5px/1.3 var(--data);letter-spacing:.06em;color:var(--dust);text-transform:none}
.readout a{color:inherit;text-decoration:none}
.readout a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(640px,88svh,900px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#050505}
.stage{position:absolute;inset:0;z-index:-2;transform-origin:68% 45%;animation:push 46s ease-in-out infinite alternate}
/* first visit of the session: the room is dark until app.js strikes the lights (html.boot is set before first paint by the home's inline
   script; if app.js never takes over, the cover lifts by itself) */
html.boot .stage::after{content:"";position:absolute;inset:0;background:#030405;opacity:.94;animation:bootcover .6s 3s forwards}
@keyframes bootcover{to{opacity:0}}
html.boot .board-roll{animation:board-wait .4s 3s both}
@keyframes board-wait{from{opacity:.14}}
html.booting:not(.board-on) .board-roll{opacity:.14}
html.boot .board-track,html.booting:not(.board-on) .board-track{animation-play-state:paused}
html.booting.board-on .board-roll{animation:strike .5s steps(1) both}
@keyframes strike{0%{opacity:.6}12%{opacity:.14}30%{opacity:.85}42%{opacity:.3}58%,100%{opacity:1}}
@supports (animation-timeline:view()){
  .stage{animation:push 46s ease-in-out infinite alternate,lag linear both;animation-timeline:auto,view();animation-range:normal,exit 0% exit 100%}
  @keyframes lag{to{translate:0 24%}}
}
.stage img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage canvas.lights{image-rendering:auto}
/* mist lying on the wet floor: two banks of the same vapor drifting at different speeds (it sits under the light canvas, so it
   stays in the dark until the room is lit). Screen-blended: it only ever lifts the darks, like light scattered by vapor. */
.mist{position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 50%,#000 82%,rgba(0,0,0,.5));mask:linear-gradient(transparent,#000 50%,#000 82%,rgba(0,0,0,.5))}
.mist i{position:absolute;left:0;bottom:0;width:200%;height:100%;background:url(/img/lab/vapor.webp) 0 100%/50% 100% repeat-x;mix-blend-mode:screen;opacity:.2;animation:mist 110s linear infinite}
.mist i + i{height:70%;opacity:.14;background-position:0 0;animation-duration:170s;animation-direction:reverse}
@keyframes mist{to{transform:translateX(-50%)}}
@media(max-width:760px){.mist{height:30%}.mist i{opacity:.16}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(8,9,10,.94) 0%,rgba(8,9,10,.62) 32%,rgba(8,9,10,0) 58%),linear-gradient(0deg,var(--night) 0%,rgba(11,12,13,0) 26%)}
@keyframes push{from{scale:1}to{scale:1.06}}
.hero-copy{position:relative;padding-block:120px 72px;width:100%}
.hero-copy > *{max-width:620px}
.hero-copy > .facts{max-width:none}
.hero h1{margin-block:22px 22px}
.hero .actions{margin-top:30px}
.facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin:36px 0 0;padding:0;list-style:none;font:400 11px/1.3 var(--data);letter-spacing:.13em;text-transform:uppercase;color:var(--dust)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:5px;height:5px;background:var(--amber)}
.facts a{text-decoration:none;color:var(--bone)}
.facts a b{color:var(--amber);font-weight:700}
.facts a:hover{color:var(--amber)}
.plate{display:inline-flex;align-items:center;gap:10px;font:700 11px/1 var(--data);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--hazard);padding:7px 10px 7px 7px;border-radius:2px;box-shadow:0 6px 18px -6px rgba(0,0,0,.7)}
.plate::before{content:"";width:24px;height:13px;background:repeating-linear-gradient(-45deg,var(--ink) 0 4px,var(--hazard) 4px 8px)}
.callout{position:absolute;z-index:2;display:none;pointer-events:none;width:0;height:0}
.callout i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--amber-hi);background:radial-gradient(circle,var(--amber-hi) 0 2px,transparent 2.6px);box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.45)}
.callout s{position:absolute;top:0;height:1px;width:44px;background:rgba(255,207,122,.75);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.callout[data-side="left"] s{right:8px;transform-origin:100% 50%}
.callout[data-side="right"] s{left:8px;transform-origin:0 50%}
.callout span{position:absolute;top:0;transform:translateY(-50%);width:230px;padding:10px 12px;background:rgba(8,9,10,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,207,122,.35);border-radius:2px;font:400 11.5px/1.45 var(--data);letter-spacing:.03em;color:var(--bone)}
.callout[data-side="left"] span{right:50px}
.callout[data-side="right"] span{left:50px}
.callout b{display:block;color:var(--amber);font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
html.js .hero .callout.on{display:block}
/* the annotations are pinned onto the photo once the room is lit: marker, then the leader line, then the label */
html.js .hero:not(.pinned) .callout i{scale:0}
html.js .hero:not(.pinned) .callout s{scale:0 1}
html.js .hero:not(.pinned) .callout span{opacity:0}
.callout:nth-of-type(2){--d:.16s}.callout:nth-of-type(3){--d:.32s}
.hero.pinned .callout i{animation:pin .3s var(--d,0s) cubic-bezier(.3,1.6,.5,1) both}
.hero.pinned .callout s{animation:lead .26s calc(var(--d,0s) + .14s) cubic-bezier(.2,.8,.2,1) both}
.hero.pinned .callout span{animation:label .34s calc(var(--d,0s) + .3s) cubic-bezier(.2,.8,.2,1) both}
@keyframes pin{from{scale:0}}
@keyframes lead{from{scale:0 1}}
@keyframes label{from{opacity:0;translate:0 5px}}
@media(max-width:1099px){html.js .hero .callout.on{display:none}}
@media(max-width:760px){
  .hero{min-height:720px}
  .stage img{object-position:76% 40%}
  .hero::after{background:linear-gradient(0deg,var(--night) 6%,rgba(11,12,13,.9) 40%,rgba(11,12,13,.25) 66%,rgba(11,12,13,.15) 100%)}
  .hero-copy{padding-block:280px 44px}
}

/* ---------- sections ---------- */
.sec{position:relative;padding-block:clamp(72px,10vw,128px)}
.sec-head{display:grid;gap:4px;margin-bottom:clamp(32px,5vw,56px)}

/* ---------- intake: paper form + thermal printer ---------- */
.intake{overflow:hidden;isolation:isolate}
.intake-bg{position:absolute;inset:0;z-index:-1}
.intake-bg img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;opacity:.55}
.intake-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0%,rgba(11,12,13,.55) 30%,rgba(11,12,13,.7) 70%,var(--night) 100%)}
.intake-grid{display:grid;gap:40px;align-items:start}
@media(min-width:960px){.intake-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:56px}}
.form{padding:44px clamp(18px,3vw,36px) 28px;display:grid;gap:22px;min-width:0}
@media(min-width:960px){.form{transform:rotate(-.7deg)}}
.form::before{content:"";position:absolute;top:-16px;left:50%;width:150px;height:34px;transform:translateX(-50%);border-radius:6px 6px 10px 10px;background:linear-gradient(180deg,#c9ced3,#7d858c 55%,#5d646a);box-shadow:0 4px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.form-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:2.5px solid var(--ink);padding-bottom:12px}
.form-head b{display:block;font:800 clamp(26px,3.4vw,34px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.form-head small{display:block;margin-top:6px;font:400 11px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.form-head .no{font:400 11px/1 var(--data);letter-spacing:.1em;color:var(--ink-soft);white-space:nowrap}
.form-head .no b{display:inline;font:400 15px/1 var(--data);color:var(--pen);letter-spacing:.04em;text-transform:none}
.field{display:grid;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field > span,.field legend{font:700 11px/1.3 var(--data);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:0}
.field i{font-style:normal;font-weight:400;letter-spacing:.06em;text-transform:none;color:#7f796d}
.field input[type="text"]{width:100%;min-width:0;background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:6px 2px 8px;font:400 20px/1.2 var(--data);color:var(--pen)}
.field input::placeholder{color:#a39c8d}
.field input:focus{outline:none;border-bottom-color:var(--stamp);background:rgba(194,58,44,.05)}
/* the operator underlines the field being filled with a ballpoint: a hand-drawn stroke in pen ink, drawn left to right */
label.field{position:relative}
label.field::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-3px;height:5px;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.35,.55,.2,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6C40 2.4 80 4.2 130 3.1S230 2 280 3.5 360 4.1 399 2.6' fill='none' stroke='%2314306b' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
label.field:focus-within::after{transform:scaleX(1)}
/* RECEIVED: the inked impression the rubber stamp leaves on the request (ink texture = SVG filter #ink) */
.imprint{position:absolute;right:clamp(10px,6%,46px);top:clamp(64px,13%,100px);z-index:3;display:grid;justify-items:center;gap:4px;padding:9px 16px 8px;border:3.5px solid currentColor;border-radius:7px;
  color:#b8281b;font:800 clamp(30px,4vw,40px)/.9 var(--display);letter-spacing:.14em;text-transform:uppercase;rotate:-8deg;mix-blend-mode:multiply;opacity:.92;filter:url(#ink);pointer-events:none}
.imprint span{font:700 11px/1 var(--data);letter-spacing:.16em}
.imprint{animation:imprint .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes imprint{0%{opacity:0;scale:1.08}1%{opacity:1;scale:.985}100%{opacity:.92;scale:1}}
@media(max-width:959px){.imprint{top:auto;bottom:clamp(96px,22%,150px);right:14px}}
#composer.jolt{animation:jolt .16s ease-out}
@keyframes jolt{30%{translate:0 2px}}
.rubber.done{animation:slam .26s cubic-bezier(.5,0,.6,1)}
@keyframes slam{0%{translate:0 0}35%{translate:0 -5px;scale:1.03}70%{translate:0 2px;scale:.97}100%{translate:0 0}}
.boxes > div{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:8px}
.chk{position:relative;display:inline-flex;align-items:center;cursor:pointer;font:700 15px/1 var(--data);letter-spacing:.03em;min-height:30px;color:var(--ink)}
.chk input{position:absolute;left:0;top:50%;opacity:0;width:22px;height:22px;margin:-11px 0 0;cursor:pointer}
.chk span::before{content:"";display:inline-block;width:20px;height:20px;border:2px solid var(--ink);margin-right:9px;vertical-align:-5px;background:transparent}
.chk input:checked + span::before{background:linear-gradient(45deg,transparent 44%,var(--pen) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--pen) 44% 56%,transparent 56%)}
.chk input:checked + span{color:var(--pen)}
.chk input:focus-visible + span::before{outline:2px solid var(--stamp);outline-offset:2px}
.chk-more{min-height:34px;padding:6px 10px;border:1.5px dashed var(--ink-soft);border-radius:2px;background:transparent;color:var(--ink);font:700 12px/1 var(--data);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.chk-more:hover{border-style:solid;color:var(--stamp);border-color:var(--stamp)}
.form-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;border-top:1.5px dashed #9a937f;padding-top:18px}
.sig{font:400 12px/1.4 var(--data);color:var(--ink-soft)}
.rubber{font:800 22px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);background:transparent;border:3px solid var(--stamp);border-radius:4px;padding:12px 18px;cursor:pointer;transform:rotate(-2.5deg);box-shadow:inset 0 0 0 2px rgba(194,58,44,.25);min-height:52px}
.rubber:hover{background:var(--stamp);color:var(--paper)}
.rubber[disabled]{cursor:progress;opacity:.75}
.rubber.done{background:var(--stamp);color:var(--paper);transform:rotate(-4deg)}
.form .err{font:700 12.5px/1.4 var(--data);color:var(--stamp);min-height:1.4em}
.form .err.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.nojs{font:400 12px/1.5 var(--data);color:var(--ink-soft)}
#composer.armed:not(.in){translate:-26px 44px;rotate:-3.2deg}
#composer.in{animation:on-bench .85s cubic-bezier(.2,.7,.25,1) both}
@keyframes on-bench{from{translate:-26px 44px;rotate:-3.2deg}62%{rotate:.25deg}to{translate:0 0;rotate:0deg}}
@media(max-width:959px){#composer.armed:not(.in){translate:0 34px;rotate:-1.6deg}@keyframes on-bench{from{translate:0 34px;rotate:-1.6deg}}}
#printer.in .printer-led::before{animation:self-test .9s steps(1) both}
@keyframes self-test{0%,18%,46%{opacity:.25}10%,30%,60%,100%{opacity:1}}
#printer.in:not(.used) .receipt{animation:feed .6s .45s cubic-bezier(.3,.7,.3,1) backwards}
@keyframes feed{from{translate:0 -22px}}
/* a new job: fresh paper is pushed out of the slot (the old slip was torn off) */
.printer.used:not(.torn) .receipt{animation:feed .32s cubic-bezier(.3,.7,.3,1)}
@media(max-width:520px){.rubber{width:100%;transform:none}.rubber.done{transform:none}}

.printer{display:grid;min-width:0}
.printer-body{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 20px;border-radius:12px 12px 5px 5px;background:linear-gradient(180deg,#30363a,#191c1f);border:1px solid #41484d;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 26px -10px rgba(0,0,0,.8);font:400 11px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.printer-body::after{content:"";position:absolute;left:22px;right:22px;bottom:5px;height:5px;border-radius:3px;background:#030303;box-shadow:inset 0 1px 2px #000}
.printer-led{display:inline-flex;align-items:center;gap:8px;color:var(--amber-hi)}
.printer-led::before{content:"";width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe6b0,var(--amber) 55%,#a86410);box-shadow:0 0 3px rgba(245,165,36,.75),0 0 0 2px rgba(0,0,0,.45)}
.printer.busy .printer-led::before{animation:blink .5s steps(2) infinite}
.printer.fail .printer-led{color:#ff9a86}
.printer.fail .printer-led::before{background:radial-gradient(circle at 40% 35%,#ffb4a6,#e5482f 55%,#8e1d10);box-shadow:0 0 3px rgba(229,72,47,.8),0 0 0 2px rgba(0,0,0,.45)}
.printer.live .printer-led::before{background:radial-gradient(circle at 40% 35%,#e2ffd9,#8fe07c 55%,#3d7a2f);box-shadow:0 0 3px rgba(143,224,124,.75),0 0 0 2px rgba(0,0,0,.45)}
.receipt{position:relative;z-index:1;margin:-6px 24px 0;padding:22px 18px 30px;background:#f6f3ea;background-image:var(--noise);color:#26241f;font:400 12.5px/1.65 var(--data);box-shadow:0 26px 40px -20px rgba(0,0,0,.85);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom/20px 10px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom/20px 10px repeat-x}
.receipt pre{margin:0;font:inherit;white-space:pre-wrap;word-break:break-word}
.receipt pre .now{animation:blink 1s steps(2) infinite}
/* thermal printing: the line under the head darkens as it heats */
.receipt pre .hot{animation:heat .32s steps(4) both}
@keyframes heat{from{color:#b4ad9f}}
/* the finished job: torn off against the serrated bar, it drops onto the bench, a fresh edge waits in the slot */
.printer{position:relative}
.printer::before{content:"";position:absolute;z-index:1;left:24px;right:24px;top:40px;height:18px;background:#f6f3ea;background-image:var(--noise);opacity:0;
  -webkit-mask:conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom/16px 8px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat;
  mask:conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom/16px 8px repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat}
@media(max-width:520px){.printer::before{left:12px;right:12px}}
.printer.torn::before{opacity:1}
.printer.torn .receipt{animation:torn .7s cubic-bezier(.3,.6,.25,1) both;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000 90deg,#000 0) top/16px 8px repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 18px) no-repeat,conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom/20px 10px repeat-x;
  mask:conic-gradient(from -45deg at bottom,#0000 90deg,#000 0) top/16px 8px repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 18px) no-repeat,conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom/20px 10px repeat-x}
.receipt.torn-slip{-webkit-mask:conic-gradient(from -45deg at bottom,#0000 90deg,#000 0) top/16px 8px repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 18px) no-repeat,conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom/20px 10px repeat-x;
  mask:conic-gradient(from -45deg at bottom,#0000 90deg,#000 0) top/16px 8px repeat-x,linear-gradient(#000 0 0) center/100% calc(100% - 18px) no-repeat,conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom/20px 10px repeat-x}
@keyframes torn{0%{translate:0 0;rotate:0deg}30%{translate:2px -4px;rotate:-.6deg}100%{translate:8px 26px;rotate:1.4deg}}
#printer .receipt.discard{position:absolute;z-index:0;margin:0;pointer-events:none;animation:discard .5s linear forwards}
@keyframes discard{12%{translate:5px 14px;rotate:2.5deg;animation-timing-function:cubic-bezier(.45,0,.9,.6)}to{translate:40px 200px;rotate:11deg;opacity:0}}
.printer.torn .receipt{translate:8px 26px;rotate:1.4deg}
.receipt pre .bad{color:var(--dn-ink);font-weight:700}
.receipt pre .ok{color:var(--up-ink);font-weight:700}
.receipt-cta{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.receipt-cta a{display:inline-flex;align-items:center;min-height:42px;padding:10px 14px;border:2px solid #26241f;border-radius:2px;font:700 12px/1 var(--data);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#26241f}
.receipt-cta a.go{background:#26241f;color:#f6f3ea}
.receipt-cta a:hover{border-color:var(--stamp);color:var(--stamp)}
.receipt-cta a.go:hover{background:var(--stamp);border-color:var(--stamp);color:#fff}
@media(max-width:520px){.receipt{margin-inline:12px;padding-inline:14px;font-size:12px}}
.by-x{margin-top:44px;display:grid;gap:8px;max-width:760px}
.by-x > p{font-size:16px;color:#c9c2b4}
.cmd{display:flex;align-items:flex-start;gap:10px;padding:10px 10px 10px 12px;background:rgba(0,0,0,.55);border:1px solid var(--rule);border-radius:2px}
.cmd code{flex:1;min-width:0;padding-top:7px;font-size:14px;line-height:1.5;word-break:break-word}
.cmd code i{font-style:normal;color:var(--dust)}
@keyframes blink{50%{opacity:.15}}

/* ---------- pods (containment) ---------- */
.pods{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:repeat(3,minmax(0,1fr))}
.pod{display:flex;flex-direction:column;min-width:0}
.pod > a{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tank{position:relative;aspect-ratio:2/3;max-width:100%;overflow:hidden;border-radius:4px;background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.tank > img{width:100%;height:100%;object-fit:cover}
.led{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;font:700 10px/1 var(--data);letter-spacing:.16em;text-transform:uppercase;color:var(--amber-hi);background:rgba(0,0,0,.6);padding:7px 9px;border-radius:2px}
.led::before{content:"";width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe6b0,var(--amber) 55%,#a86410);box-shadow:0 0 3px rgba(245,165,36,.7)}
.tank[data-state="empty"] .led::before,.tank[data-state="asleep"] .led::before{background:#6b5a3a;box-shadow:none}
.tank[data-state="sim"] .led::before{background:#8b8f93;box-shadow:none}
.tank[data-state="growing"] .led::before{animation:blink 1.2s steps(2) infinite}
.fizz{position:absolute;pointer-events:none;mix-blend-mode:screen;opacity:.8;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 84%,transparent)}
.fizz canvas{display:block;width:100%;height:100%}
.fizz.a{left:28%;right:28%;top:12%;bottom:24%}
.fizz.b{left:27%;right:28%;top:24%;bottom:29%}
.vapor{position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 45%);mask:linear-gradient(transparent,#000 45%)}
.vapor::before,.vapor::after{content:"";position:absolute;left:0;bottom:0;width:200%;height:100%;background:url(/img/lab/vapor.webp) 0 100%/50% 100% repeat-x;mix-blend-mode:screen;opacity:.42;animation:mist 38s linear infinite}
.vapor::after{height:62%;opacity:.3;animation-duration:57s;animation-direction:reverse}
.tag{position:relative;margin:-64px 16px 0;padding:16px 16px 12px;background-color:var(--paper);background-image:var(--noise);color:var(--ink);border-radius:2px;box-shadow:0 1px 0 var(--paper-edge),0 22px 30px -16px rgba(0,0,0,.9);transform:rotate(var(--r,-1deg));transform-origin:50% 0}
.pods.in .tag,.file-pod.in .tag{animation:sway 1.9s ease-in-out both}
.pods.in .pod:nth-child(2) .tag{animation-delay:.14s}.pods.in .pod:nth-child(3) .tag{animation-delay:.28s}
@keyframes sway{0%{rotate:0deg}16%{rotate:2.2deg}38%{rotate:-1.4deg}60%{rotate:.7deg}80%{rotate:-.25deg}100%{rotate:0deg}}
.tag::before{content:"";position:absolute;top:-11px;left:50%;width:88px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(236,228,206,.62);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tag-top{display:flex;justify-content:space-between;gap:8px;font:700 10.5px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1.5px solid var(--ink);padding-bottom:8px}
.tag-top time{font:inherit}
.tag h3{font-weight:800;font-size:clamp(28px,2.6vw,34px);margin:12px 0 8px;color:var(--ink)}
.tag p{color:#3a372f;font-size:15px;line-height:1.45}
.code{position:relative;margin-top:12px;font:400 42px/1 var(--barcode);color:var(--ink);white-space:nowrap;overflow:hidden}
.code::after{content:"";position:absolute;left:0;right:0;top:46%;height:1.5px;background:#ff2d16;box-shadow:0 0 0 1px rgba(255,45,22,.22);opacity:0;pointer-events:none}
:is(.pod > a:hover,.pod > a:focus-visible,.kl:hover,.kl:focus-visible,.reg tr:hover) .code::after{animation:laser .6s linear both}
@keyframes laser{0%{opacity:1;translate:0 -1px}8%{opacity:.35}14%{opacity:1;translate:0 1px}30%{translate:0 0}50%{opacity:.9;translate:0 -1px}64%{opacity:1;translate:0 0}74%{opacity:0}80%{opacity:.8}86%,100%{opacity:0}}
@media(max-width:860px){
  .pods{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80%,330px);overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 16px 26px;margin-inline:-16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .pods::-webkit-scrollbar{display:none}
  .pod{scroll-snap-align:center}
}
.swipe{display:none;margin-top:4px;font:400 11px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
@media(max-width:860px){.swipe{display:block}}
/* a live twin's pod: its real art taped on the tag as an ID photo */
.pod.live .tag{padding-bottom:10px}
.pod.live > a:hover .tank > img{filter:brightness(1.12)}
.pod.live > a:hover .tag{transform:rotate(0deg) translateY(-3px)}
.pod.live .tag{transition:transform .25s}
.tag-id{display:flex;align-items:center;gap:14px;margin-top:12px;min-width:0}
.tag-id > div{min-width:0;flex:1;container-type:inline-size}
.idph{position:relative;flex:none;width:88px;aspect-ratio:1;background:#d8d0bd;border:4px solid #fbf8f0;box-shadow:0 2px 6px rgba(0,0,0,.35);transform:rotate(-2deg)}
.idph img,.idph .ph-none{width:100%;height:100%;object-fit:cover}
.idph .seal{left:-4px;bottom:-6px;font-size:7.5px;padding:3px 4px}
.tag-id h3{margin:0 0 6px;font-size:min(clamp(26px,2.4vw,32px),calc(100cqi / (var(--tw,4) * 1.02)));white-space:nowrap}
.tag-id .who{font:400 12px/1.35 var(--data);color:#3a372f}
.tag-id .who b{display:block;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0;padding-top:10px;border-top:1.5px dashed #a59d88}
.tag-data div{min-width:0}
.tag-data dt{font:700 9.5px/1.2 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.tag-data dd{margin:4px 0 0;font:700 17px/1.1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--pen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){.tag-data dd{font-size:16px}}
.tag-data dd .up{color:var(--up-ink)}
.tag-data dd .dn{color:var(--dn-ink)}
.tag-data dd i{font-style:normal;font-weight:400;font-size:11px;color:var(--ink-soft)}
.pod.live .code{font-size:38px}
.registry-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:clamp(40px,6vw,64px);padding:20px 22px}
.registry-strip p{font:400 13px/1.6 var(--data);letter-spacing:.06em;color:var(--bone)}
.registry-strip p b{color:var(--amber);font-weight:700}
.registry-strip p a{color:var(--amber-hi);text-underline-offset:3px}
.registry-strip .actions{gap:10px}

/* reference specimens: the invented example faces (never live coins) */
.refs{margin-top:clamp(56px,8vw,96px)}
.refs-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin-bottom:26px}
.refs-head p{font-size:16px;color:#c9c2b4;max-width:56ch}
.refs-head .h3{margin:0}
.ref-row{display:grid;gap:26px 18px;grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1100px){.ref-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.ref-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}}
.ref{position:relative;padding:8px 8px 12px;background-color:#f4efe2;background-image:var(--noise);color:var(--ink);border-radius:2px;box-shadow:0 18px 28px -16px rgba(0,0,0,.9);transform:rotate(var(--r,-1.4deg));min-width:0}
.ref:nth-child(2n){--r:1.2deg}.ref:nth-child(3n){--r:-.6deg}
.ref{transform-origin:50% 0}
.ref-row.in .ref{animation:sway 1.7s ease-in-out both}
.ref-row.in .ref:nth-child(2){animation-delay:.07s}.ref-row.in .ref:nth-child(3){animation-delay:.14s}.ref-row.in .ref:nth-child(4){animation-delay:.21s}.ref-row.in .ref:nth-child(5){animation-delay:.28s}.ref-row.in .ref:nth-child(6){animation-delay:.35s}
.ref::before{content:"";position:absolute;top:-9px;left:50%;width:62px;height:18px;transform:translateX(-50%) rotate(2deg);background:rgba(236,228,206,.62);box-shadow:0 1px 3px rgba(0,0,0,.25);z-index:2}
.ref .rph{position:relative;aspect-ratio:1;overflow:hidden;background:#d8d0bd}
.ref .rph img{width:100%;height:100%;object-fit:cover}
.ref .rph .ex{position:absolute;right:6px;top:6px;font:700 9px/1 var(--data);letter-spacing:.14em;color:var(--stamp);border:1.5px solid var(--stamp);padding:3px 4px;background:rgba(244,239,226,.85);transform:rotate(4deg)}
.ref .rt{display:block;margin-top:10px;font:800 21px/1 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.ref .ra{display:block;margin-top:4px;font:700 10.5px/1.3 var(--data);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.ref .ra i{font-style:normal;text-transform:none}
.ref .rv{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:#3a372f}
.ref .rl{display:block;margin-top:8px;font:400 9.5px/1.35 var(--data);letter-spacing:.04em;color:#7f796d}

/* ---------- allocation: graduated cylinders (scale 0-50%) + fee calculator ---------- */
.feecalc{display:grid;gap:14px;align-items:center;padding:20px 22px 22px;margin-bottom:clamp(36px,5vw,56px)}
@media(min-width:900px){.feecalc{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px}}
.feecalc label{font:400 13px/1.5 var(--data);letter-spacing:.06em;color:var(--bone)}
.feecalc label b{display:inline-block;min-width:3.6ch;font:700 28px/1 var(--display);letter-spacing:.02em;color:var(--amber);font-variant-numeric:tabular-nums}
.feecalc .note{grid-column:1/-1;font:400 12px/1.55 var(--data);color:var(--dust);letter-spacing:.03em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(180deg,#050606,#1a1d20);border:1px solid #3a4146;box-shadow:inset 0 1px 3px #000}
input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(180deg,#050606,#1a1d20);border:1px solid #3a4146}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:30px;margin-top:-12px;border-radius:3px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px) center/10px 14px no-repeat,linear-gradient(180deg,#ffd27f,#e8901a);border:1px solid #6b4a10;box-shadow:0 3px 5px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.5)}
input[type=range]::-moz-range-thumb{width:22px;height:30px;border-radius:3px;background:linear-gradient(180deg,#ffd27f,#e8901a);border:1px solid #6b4a10;box-shadow:0 3px 5px rgba(0,0,0,.7)}
.cyls{display:grid;gap:28px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
@media(max-width:860px){.cyls{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px}}
.cyl{display:grid;gap:18px;min-width:0}
.tube-wrap{position:relative;height:280px;padding-left:34px}
@media(max-width:520px){.tube-wrap{height:230px}}
.scale{position:absolute;left:0;top:0;bottom:16px;width:30px;font:400 10px/1 var(--data);color:var(--dust)}
.scale span{position:absolute;right:0;transform:translateY(50%);bottom:calc(var(--t) * 2%)}
.tube{position:relative;height:calc(100% - 16px);width:min(100%,92px);border:2px solid rgba(220,226,230,.5);border-top:0;border-radius:0 0 22px 22px;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 30%,rgba(255,255,255,.1) 70%,rgba(255,255,255,.03));overflow:hidden}
.tube::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,transparent 0 calc(10% - 1px),rgba(235,229,216,.45) calc(10% - 1px) 10%) left/34% 100% no-repeat}
.tube::after{content:"";position:absolute;top:0;bottom:0;left:16%;width:7%;z-index:3;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.04));border-radius:4px}
.fluid{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v) * 2%);background:linear-gradient(90deg,rgba(90,40,0,.35),rgba(255,255,255,0) 22%,rgba(255,240,200,.18) 62%,rgba(90,40,0,.4)),linear-gradient(180deg,#ffc35a,#e8901a 60%,#b9650c)}
.fluid::before{content:"";position:absolute;left:-4%;right:-4%;top:-7px;height:14px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#ffe3a8,#f3a632 70%);rotate:var(--tilt,0deg)}
.cyls.armed:not(.in) .fluid{translate:0 101%}
.cyls.in .fluid{animation:fill-up 1.6s cubic-bezier(.33,.08,.2,1) both}
.cyls.in .fluid::before{animation:meniscus 1.5s 1.25s ease-out both}
.cyl:nth-child(2) .fluid{animation-delay:.14s}.cyl:nth-child(3) .fluid{animation-delay:.28s}.cyl:nth-child(4) .fluid{animation-delay:.42s}
.cyl:nth-child(2) .fluid::before{animation-delay:1.39s}.cyl:nth-child(3) .fluid::before{animation-delay:1.53s}.cyl:nth-child(4) .fluid::before{animation-delay:1.67s}
@keyframes fill-up{from{translate:0 101%}}
@keyframes meniscus{0%{scale:1 1}14%{scale:1 1.8}32%{scale:1 .62}50%{scale:1 1.32}68%{scale:1 .86}84%{scale:1 1.08}100%{scale:1 1}}
.cyl-read b{font-variant-numeric:tabular-nums}
.fluid .fizz{inset:12% 8% 4%}
.base{height:16px;width:min(calc(100% + 24px),120px);margin-left:-12px;border-radius:3px;background:linear-gradient(180deg,#3a4146,#1a1d20);border:1px solid #4a5258}
.cyl-read b{display:block;font:800 clamp(44px,5vw,64px)/.9 var(--display);color:var(--bone)}
.cyl-read b small{font-size:.45em;margin-left:2px}
.cyl-read .who{display:block;margin:8px 0 6px;font:700 12px/1.2 var(--data);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.cyl-read p{font-size:15px;color:#bfb8aa;max-width:28ch}
.cyl-read .usd{letter-spacing:.02em;display:inline-flex;align-items:baseline;gap:8px;margin-top:12px;padding:7px 10px;background:linear-gradient(180deg,#050606,#0d0f10);border:1px solid #2e3437;border-radius:3px;font:700 22px/1 var(--display);color:var(--amber);font-variant-numeric:tabular-nums}
.cyl-read .usd::before{content:"of the fees";font:400 9.5px/1 var(--data);letter-spacing:.12em;text-transform:uppercase;color:var(--dust);text-shadow:none;order:2}

/* ---------- supply (pairs) ---------- */
.supply{display:grid;gap:14px;align-items:stretch;margin-bottom:34px}
@media(min-width:900px){.supply{grid-template-columns:minmax(240px,.7fr) minmax(0,2fr)}}
.supply > .readout b{font-size:clamp(56px,7vw,88px);line-height:.95}
.supply > .readout{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.pxcats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none}
.pxcats a{display:block;height:100%;text-decoration:none}
.pxcats a:hover{border-color:var(--amber)}
.pxcats a b{font-size:30px}
@media(max-width:600px){.pxcats{gap:8px}.pxcats .readout{padding:10px}.pxcats a b{font-size:24px}.pxcats .readout span{font-size:9px;letter-spacing:.1em}}
.pxwall{display:grid;gap:10px;margin:0 -16px 34px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
@media(min-width:720px){.pxwall{margin-inline:-32px}}
.pxrow{overflow:hidden}
.pxtrack{display:flex;width:max-content;gap:10px;animation:board 160s linear infinite}
.pxrow.r1 .pxtrack{animation-direction:reverse;animation-duration:190s}
.pxrow.r2 .pxtrack{animation-duration:220s}
.pxt{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:var(--brushed),linear-gradient(180deg,#22272a,#14171a);border:1px solid #343b40;border-radius:3px;white-space:nowrap}
.pxt b{font:800 18px/1 var(--display);letter-spacing:.03em}
.pxt .mono{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.pxi,.pi{position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;background:#2b3033;font:700 11px/1 var(--data);color:var(--bone)}
.pxi img,.pi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0c0d}
.pxi i,.pi i{font-style:normal}

/* ---------- owner desk ---------- */
.owner-plate{display:grid;gap:28px;align-items:center;padding:clamp(28px,5vw,56px)}
@media(min-width:900px){.owner-plate{grid-template-columns:minmax(0,1fr) auto}}
.owner-plate h2{margin-top:16px}
.owner-plate .sec-lede a{color:var(--amber-hi)}

/* ---------- manual (FAQ) ---------- */
.faq{display:grid;gap:10px;max-width:920px}
.faq details{background:var(--brushed),linear-gradient(180deg,#22272a,#16191b);border:1px solid #343b40;border-radius:4px}
.faq summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 18px;cursor:pointer;font:700 clamp(19px,2vw,23px)/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:attr(data-q);flex:none;display:grid;place-items:center;min-width:46px;height:26px;padding:0 6px;background:var(--amber);color:#1a1004;font:700 11px/1 var(--data);letter-spacing:.08em;border-radius:2px}
.faq summary::after{content:"+";margin-left:auto;font:400 24px/1 var(--data);color:var(--amber)}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--amber-hi)}
.faq details p{padding:0 18px 18px 78px;color:#c9c2b4;max-width:72ch}
.faq details p a{color:var(--amber-hi)}
.faq-more{margin-top:24px}
/* each answer slides out like a drawer on its rails (where the browser can animate a details' content to its auto height) */
.faq details{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .42s cubic-bezier(.25,.8,.25,1),content-visibility .42s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq summary::after{transition:rotate .3s cubic-bezier(.3,.7,.3,1)}
.faq details[open] summary::after{rotate:180deg}
@media(max-width:600px){.faq details p{padding-left:18px}}

/* ---------- core ($TWINPAD) ---------- */
.hazard{padding:12px;border-radius:9px;background:repeating-linear-gradient(-45deg,var(--hazard) 0 18px,#121212 18px 36px)}
.core-plate{padding:clamp(28px,6vw,72px) clamp(20px,5vw,64px);text-align:center;display:grid;justify-items:center;gap:14px}
.core-title{font-weight:800;font-size:clamp(60px,15vw,200px);line-height:.85;margin:6px 0 4px;color:#e2e6e9;text-shadow:0 -1px 0 rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.12)}
.ca{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background:rgba(0,0,0,.45);border:1px solid #3a4146;border-radius:3px;font:400 12px/1.2 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--dust);max-width:100%}
.ca b{color:var(--amber-hi);letter-spacing:.1em}
.ca code{font-size:13px;color:var(--bone);overflow-wrap:anywhere;word-break:break-all}
.core-note{font:400 12px/1.6 var(--data);color:var(--dust);max-width:62ch;letter-spacing:.03em}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding-block:44px 64px;background:#08090a}
.foot-grid{display:grid;gap:22px}
@media(min-width:960px){.foot-grid{grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:40px}}
.foot p{font:400 12px/1.65 var(--data);color:var(--dust);letter-spacing:.04em;max-width:72ch}
.foot p .parody{display:inline-block;margin-right:8px;padding:2px 6px;border:1px solid var(--stamp);color:#ff9a86;font-weight:700;letter-spacing:.14em;border-radius:2px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 14px;font:600 14px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;max-width:420px}
.foot-links a{display:inline-block;padding:10px 4px;text-decoration:none;color:var(--bone)}
.foot-links a:hover{color:var(--amber)}

/* ---------- photo banner (registry, pods, pairs) ---------- */
.banner{position:relative;min-height:clamp(380px,56svh,560px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#050505}
.banner > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* the cryo room's LN2 vapor rolls along the floor in front of everything but the copy */
.banner > .mist{z-index:0;height:46%}
.banner > .mist ~ .wrap{position:relative;z-index:1}
.banner.cryo > .mist{-webkit-mask:linear-gradient(transparent,#000 62%,#000 85%,rgba(0,0,0,.4));mask:linear-gradient(transparent,#000 62%,#000 85%,rgba(0,0,0,.4))}
.banner.cryo > .mist i{opacity:.24;background-size:50% 165%;background-position:0 35%;animation-duration:80s}
.banner.cryo > .mist i + i{opacity:.17;background-size:50% 130%;animation-duration:120s}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--night) 0%,rgba(11,12,13,.55) 45%,rgba(11,12,13,.25) 100%)}
.banner .wrap{width:100%;padding-block:120px 44px}
.banner h1{margin-block:18px 14px}
.banner.sm{min-height:clamp(320px,44svh,440px)}
.banner.sm h1{font-size:clamp(50px,8vw,104px)}
.banner .stamp-at{display:block;margin-top:14px;font:400 11px/1.5 var(--data);letter-spacing:.08em;color:var(--dust)}
@media(max-width:600px){.coins .chead .ptitle br{display:none}}
@media(max-width:760px){.banner .wrap{padding-block:150px 34px}.banner::after{background:linear-gradient(0deg,var(--night) 4%,rgba(11,12,13,.7) 50%,rgba(11,12,13,.3) 100%)}}

/* ---------- registry (leaderboard) ---------- */
.stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-block:8px 36px}
@media(max-width:620px){.stats-row{grid-template-columns:none}}
.reg-wrap{padding:6px 18px 10px}
table.reg{width:100%;border-collapse:collapse;font:400 13px/1.4 var(--data)}
.reg th{text-align:left;padding:16px 12px 12px;font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);border-bottom:1px solid #3a4146}
.reg td{padding:14px 12px;border-bottom:1px solid #2b3033;vertical-align:middle}
.reg tr:last-child td{border-bottom:0}
.reg .rk{font:800 24px/1 var(--display);color:var(--dust);width:56px}
.reg tr:first-child .rk{color:var(--amber)}
.reg .spc a{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none}
.reg .spc b{font:800 26px/1 var(--display);letter-spacing:.02em;color:var(--bone)}
.reg .spc .code{margin:0;font-size:30px;color:#c9c2b4;opacity:.8;line-height:.9}
.reg .spc a:hover b{color:var(--amber)}
.reg .num{font:700 24px/1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--amber);white-space:nowrap}
.reg td a.btn{white-space:nowrap}
@media(max-width:700px){
  .reg-wrap{padding:4px 12px}
  .reg thead{display:none}
  .reg tr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 4px;border-bottom:1px solid #2b3033}
  .reg tr:last-child{border-bottom:0}
  .reg td{padding:0;border:0}
  .reg .rk{grid-row:1/3}
  .reg .spc{grid-column:2}
  .reg td.who{grid-column:2;grid-row:2;font-size:12px;color:#c9c2b4}
  .reg td.pair{display:none}
  .reg td.num{grid-column:3;grid-row:1;font-size:16px;text-align:right}
  .reg td.go{grid-column:3;grid-row:2;text-align:right}
  .reg td.go .btn{min-height:36px;padding:8px 10px;font-size:12px}
}
.drawer{margin-top:clamp(48px,7vw,80px);display:grid;gap:14px}
.drawer .steel{padding:10px 18px}
.lbl{list-style:none}
.lbl li{border-bottom:1px solid #2b3033}
.lbl li:last-child{border-bottom:0}
@media(min-width:900px){.lbl{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(5,auto);column-gap:48px}.lbl li:nth-child(5){border-bottom:0}}
.lbl a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:58px;padding:8px 2px;text-decoration:none}
.lbl a:hover .lt b{color:var(--amber)}
.lbl .rk{font:800 22px/1 var(--display);color:var(--dust)}
.lbl .lt{display:grid;gap:3px;min-width:0}
.lbl .lt b{font:700 20px/1.1 var(--display);letter-spacing:.03em;overflow-wrap:anywhere}
.lbl .lt span{font:400 11px/1.3 var(--data);letter-spacing:.08em;text-transform:uppercase;color:var(--dust)}
.lbl .lv{font:700 24px/1 var(--display);color:var(--amber)}
.empty{padding:52px 20px 56px;text-align:center;display:grid;justify-items:center;gap:10px}
.empty .code{color:var(--bone);opacity:.7;margin:0 0 6px;font-size:46px}
.empty b{font:800 30px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--bone)}
.empty p{font-size:16px;color:#c9c2b4;max-width:46ch;margin-bottom:10px}
.empty p a{color:var(--amber-hi)}
.drawer .empty{padding:30px 12px 34px}

/* ---------- /coins: filters + specimen cards ---------- */
.coins-body{padding-block:8px 96px}
.filters{padding:18px;margin-bottom:24px}
.cfilter{display:grid;gap:10px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr) auto;align-items:stretch}
@media(max-width:900px){.cfilter{grid-template-columns:1fr 1fr}.cfilter .csearch{grid-column:1/-1}.cfilter .btn{grid-column:1/-1}}
.csearch{position:relative;display:flex;align-items:center;min-height:50px;background:#060707;border:1px solid #3a4146;border-radius:3px}
.csearch svg{position:absolute;left:14px;width:18px;height:18px;color:var(--dust);pointer-events:none}
.csearch input{width:100%;height:100%;min-height:50px;padding:0 14px 0 42px;background:transparent;border:0;outline:0;font:400 15px/1 var(--data);color:var(--bone)}
.csearch input::placeholder{color:#6f6a62}
.csearch:focus-within{border-color:var(--amber)}
.csel{position:relative;display:block;min-height:50px;background:#060707;border:1px solid #3a4146;border-radius:3px}
.csel select{display:block;height:100%;min-height:50px;padding:24px 34px 8px 12px;width:100%;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:3px;font:700 15px/1.1 var(--data);color:var(--bone);cursor:pointer;text-overflow:ellipsis}
.csel select option,.csel select optgroup{background:#16191b;color:var(--bone)}
.csel .mono{position:absolute;left:12px;top:9px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);pointer-events:none}
.csel::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(45deg);pointer-events:none}
.csel:focus-within{border-color:var(--amber)}
@media(max-width:600px){.csel select{font-size:13.5px}}
.cfilter .btn{min-height:50px}
html.js .cfilter .btn{display:inline-flex}
.cbad{margin-top:12px;font:400 12.5px/1.5 var(--data);color:#ffb3a5}
.cbad a{color:var(--amber-hi)}
.csort{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font:400 11px/1 var(--data);letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.csort > a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid #3a4146;border-radius:2px;text-decoration:none;color:var(--bone)}
.csort > a.on{background:var(--amber);border-color:var(--amber);color:#1a1004;font-weight:700}
.csort .sep{flex:0 0 1px;align-self:stretch;background:#3a4146}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;border:1px dashed var(--amber);border-radius:2px;text-decoration:none;color:var(--amber-hi)}
.fchip i{font-style:normal}
.ccount{margin-left:auto;color:var(--bone)}
body.loading #results{opacity:.45;transition:opacity .2s}
body.loading #ccount::after{content:" · loading…";color:var(--amber)}
.cres{padding-top:12px}
.cgrid{display:grid;gap:34px 22px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}}
.kl{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit}
.kl .ph{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px 12px 4px 4px;background:#050505;border:5px solid #2c3236;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #000,0 26px 40px -26px #000}
.kl .ph > img,.kl .ph > .ph-none{width:100%;height:100%;object-fit:cover}
.kl .ph::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent 7%,rgba(255,255,255,.18) 11%,transparent 17%,transparent 82%,rgba(255,255,255,.09) 87%,transparent 91%),linear-gradient(0deg,rgba(245,165,36,.32),rgba(245,165,36,0) 34%);
  box-shadow:inset 0 0 36px rgba(0,0,0,.55)}
.kl .ph::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;z-index:2;background:linear-gradient(180deg,#9aa2a8,#4a5157);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.kl .stamp{position:absolute;z-index:3;top:16px;left:9px;display:inline-flex;align-items:center;gap:7px;font:700 9.5px/1 var(--data);letter-spacing:.16em;text-transform:uppercase;color:var(--amber-hi);background:rgba(0,0,0,.66);padding:6px 8px;border-radius:2px}
.kl .stamp i,.kl .stamp::before{content:"";width:7px;height:7px;border-radius:50%;background:#6b5a3a}
.kl .stamp i{display:none}
.kl .st-awake::before{background:var(--amber);box-shadow:0 0 3px rgba(245,165,36,.75)}
.kl .st-sim{color:#c9cdd0}
.kl .st-sim::before{background:#8b8f93}
.kl .pairb{position:absolute;z-index:3;top:16px;right:9px;font:700 10px/1 var(--data);letter-spacing:.08em;color:var(--ink);background:var(--paper);padding:5px 7px;border-radius:2px;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seal{position:absolute;z-index:3;left:9px;bottom:9px;font:700 9.5px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:#fff3dd;background:rgba(194,58,44,.93);padding:5px 6px;border-radius:2px;font-style:normal}
.kl .meta{position:relative;z-index:2;display:grid;gap:5px;margin:-16px 10px 0;padding:14px 13px 10px;background-color:var(--paper);background-image:var(--noise);color:var(--ink);border-radius:2px;box-shadow:0 1px 0 var(--paper-edge),0 18px 26px -14px rgba(0,0,0,.9);transform:rotate(var(--r,-.8deg));transition:transform .25s;container-type:inline-size}
.cgrid .kl:nth-child(2n) .meta{--r:.7deg}.cgrid .kl:nth-child(3n) .meta{--r:-.3deg}
.kl .meta::before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:18px;transform:translateX(-50%) rotate(-3deg);background:rgba(236,228,206,.62);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.kl .ap{display:flex;justify-content:space-between;gap:6px;font:700 9.5px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1.5px solid var(--ink);padding-bottom:7px}
.kl .ap time{font:inherit}
.kl .t{display:block;margin-top:4px;font:800 min(clamp(22px,2.1vw,30px),calc((100cqi - 4px) / (var(--tw,4) * 1.02)))/1 var(--display);text-transform:uppercase;white-space:nowrap}
.kl .who{font:400 11.5px/1.35 var(--data);color:#3a372f;min-width:0}
.kl .who b{display:block;color:var(--ink);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl .mk{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font:400 12px/1.3 var(--data);color:#3a372f}
.kl .mk b{font:700 18px/1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--pen)}
.kl .mk .dim{color:#7f796d}
.kl .mk .up{color:var(--up-ink)}
.kl .mk .dn{color:var(--dn-ink)}
.kl .code{margin-top:4px;font-size:30px;line-height:.9}
.kl:hover .meta{transform:rotate(0deg) translateY(-3px)}
/* motion-sensor lighting on the floor: jars further down wait dim and their lamp strikes as their row comes into view */
html.js .cgrid .kl.armed:not(.in) .ph > :is(img,.ph-none){opacity:.26}
html.js .cgrid .kl.armed:not(.in) .ph::after{opacity:.35}
.cgrid .kl.in .ph > :is(img,.ph-none),.cgrid .kl.in .ph::after{animation:jar-on .75s steps(1) both;animation-delay:calc(var(--k,0) * 110ms)}
@keyframes jar-on{0%{opacity:.26}9%{opacity:.8}15%{opacity:.32}27%{opacity:.95}33%{opacity:.7}40%,100%{opacity:1}}
.kl:hover .ph{border-color:#4a5258}
.kl:focus-visible{outline:none}
.kl:focus-visible .ph{outline:2px solid var(--amber-hi);outline-offset:3px}
.ph-none{display:grid;place-items:center;align-content:center;gap:6px;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#3a3125,#100e0b 70%);color:var(--amber-hi)}
.ph-none b{font:800 clamp(30px,5vw,54px)/1 var(--display);letter-spacing:.04em}
.ph-none i{font:400 10px/1 var(--data);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.idph .ph-none b{font-size:24px}.idph .ph-none i{font-size:7px;letter-spacing:.08em}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:44px;font:400 12px/1 var(--data);letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.pager a,.pager .off{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #3a4146;border-radius:3px;text-decoration:none;color:var(--bone)}
.pager a:hover{border-color:var(--amber);color:var(--amber)}
.pager .off{opacity:.35}
.pager b{color:var(--amber)}

/* ---------- specimen file (coin page) ---------- */
.crumb{padding-block:28px 0;font:400 11px/1.4 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.crumb a{text-decoration:none;display:inline-block;padding-block:8px}.crumb a:hover{color:var(--amber)}
.file-grid{display:grid;gap:34px;padding-block:22px 40px;align-items:start}
@media(min-width:960px){.file-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;grid-template-areas:"pod head" "pod body";column-gap:64px;row-gap:26px}.file-head{grid-area:head}.file-pod{grid-area:pod}.file-body{grid-area:body}}
.file-head{min-width:0}
.file-head .zone{margin-bottom:16px}
.state{display:inline-flex;align-items:center;gap:8px;margin-left:10px;padding:7px 10px;background:rgba(0,0,0,.5);border:1px solid #2e3437;border-radius:2px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;vertical-align:middle}
.state .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#6b5a3a}
.state.on{color:var(--amber-hi)}
.state.on .dot{background:var(--amber);box-shadow:0 0 3px rgba(245,165,36,.75);animation:blink 1.6s steps(2) infinite}
.ktitle{margin-block:18px 12px;font-size:min(clamp(56px,8vw,112px),calc(100cqi / (var(--tw,4) * 1.02)));white-space:nowrap}
.file-head{container-type:inline-size}
.kwho{font-size:clamp(18px,1.8vw,22px);color:#d3ccbe}
.kwho a{color:var(--bone);text-decoration-color:var(--amber);text-underline-offset:4px}
.kwho .dim{color:var(--dust)}
.kvibe{margin-top:10px;font:600 clamp(19px,2vw,24px)/1.25 var(--body);color:var(--amber-hi)}
.kmeta{margin-top:12px;font-size:12px;line-height:1.55;letter-spacing:.03em}
.kmeta a{color:var(--amber-hi)}
.kcta{display:grid;gap:12px;margin-top:24px}
.kcta .btn{justify-self:start}
.knobuy{display:inline-flex;justify-self:start;padding:14px 18px;border:2px dashed #5d646a;border-radius:3px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c9cdd0}
.knote{font-size:12px;letter-spacing:.04em}
.mintrow{display:flex;align-items:center;gap:10px;min-width:0;max-width:620px;padding:8px 8px 8px 12px;background:rgba(0,0,0,.5);border:1px solid #2e3437;border-radius:3px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.mintrow code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--bone)}
.mintrow .copy{min-height:40px}
.mintrow a{color:var(--dust);display:inline-block;padding:6px 4px;margin:-6px -4px;white-space:nowrap;text-decoration:none}
.mintrow a:hover{color:var(--amber)}
.file-pod{min-width:0}
.file-pod .tank{max-height:760px}
@media(max-width:959px){.file-pod .tank{aspect-ratio:auto;height:min(440px,62vh)}.file-pod .tank > img{object-position:50% 35%}}
.file-pod .tag{margin:-36% 18px 0}
@media(max-width:959px){.file-pod .tag{margin-top:-120px}}
.idphoto{position:relative;margin:14px auto 0;width:min(100%,340px);aspect-ratio:1;background:#d8d0bd;border:6px solid #fbf8f0;box-shadow:0 3px 10px rgba(0,0,0,.35);transform:rotate(-1.2deg)}
.idphoto > img,.idphoto > .ph-none,.idphoto .bimg{width:100%;height:100%;object-fit:cover}
.idphoto::before,.idphoto::after{content:"";position:absolute;z-index:2;width:58px;height:18px;background:rgba(236,228,206,.7);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.idphoto::before{left:-16px;top:6px;transform:rotate(-38deg)}
.idphoto::after{right:-16px;bottom:8px;transform:rotate(-38deg)}
.file-pod .tag h3{margin-top:16px}
.file-pod .tag p{font:400 13px/1.45 var(--data)}
.file-body{display:grid;gap:22px;min-width:0}
.dossier{margin-top:26px;padding:30px clamp(18px,3vw,30px) 22px}
.dossier-tab{position:absolute;top:-26px;left:22px;height:28px;padding:8px 16px 0;background-color:var(--paper);background-image:var(--noise);border-radius:6px 6px 0 0;font:700 11px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px;margin:0}
.fields div{border-bottom:1.5px solid var(--ink);padding-bottom:6px;min-width:0}
.fields dt{font:700 10.5px/1.2 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.fields dd{margin:6px 0 0;font:400 17px/1.25 var(--data);color:var(--pen);overflow-wrap:anywhere}
.fields dd a{color:inherit;text-underline-offset:3px}
@media(max-width:480px){.fields{grid-template-columns:none}}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats > div{padding:12px 14px;background:linear-gradient(180deg,#050606,#0d0f10);border:1px solid #2e3437;border-radius:3px;box-shadow:inset 0 1px 3px rgba(0,0,0,.9);min-width:0}
.stats > div > .mono.dim:first-child{display:block;font-size:10px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase}
.stats > div > b{display:block;margin-top:8px;font:700 26px/1.05 var(--display);letter-spacing:.02em;color:var(--amber);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats > div > b a{color:inherit;text-underline-offset:3px}
.stats > div > b .up{color:var(--up);text-shadow:none}
.stats > div > b .dn{color:var(--dn);text-shadow:none}
.stats .sunit{display:block;margin-top:5px;font-size:10px;letter-spacing:.08em}
.stats.nomkt{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:stretch}
.stats .snone{display:flex;align-items:center;padding:12px 14px;border:1px dashed #3a4146;border-radius:3px;font-size:12px;line-height:1.5}
@media(max-width:560px){.stats.nomkt{grid-template-columns:none}}
.two-up{display:grid;gap:32px;padding-block:24px 96px}
@media(min-width:960px){.two-up{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:start}}
/* the observation log is a CRT in a steel bezel: curved dark glass, fine scanlines, amber phosphor (no bloom), a faint reflection of
   the room on the glass. It powers on when it comes into view (the beam draws a line, the raster opens) and new lines are written
   in by the beam, bright, then decay to the phosphor's resting level. */
.monitor{border-radius:10px;background:#020303;border:10px solid;border-color:#262b2f #15181a #0f1113 #1c2023;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #2c3236,0 30px 60px -30px #000;overflow:hidden}
.monitor-bar{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid #1d2326;font:400 10.5px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.monitor-bar .on{color:#8fe07c}
.monitor-body{position:relative;margin:0;padding:18px 16px 24px;min-height:170px;font:400 14px/1.7 var(--data);color:var(--amber);text-shadow:0 0 1px rgba(245,165,36,.55);border-radius:12px/16px;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,#0b0c0a,#060706 62%,#020202);box-shadow:inset 0 0 38px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.03);overflow-wrap:anywhere;transform-origin:50% 50%}
.monitor-body::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(162deg,rgba(255,255,255,.055),rgba(255,255,255,0) 26%),repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px)}
.monitor-body::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:#ffe2b0;opacity:0;mix-blend-mode:screen}
html.js .monitor.armed:not(.in) .monitor-body{transform:scale(.5,.006)}
.monitor.in .monitor-body{animation:crt-on .62s cubic-bezier(.2,.75,.25,1) both}
.monitor.in .monitor-body::after{animation:crt-flash .62s ease-out both}
@keyframes crt-on{0%{transform:scale(.5,.006)}22%{transform:scale(1,.006)}60%{transform:scale(1,1.02)}100%{transform:none}}
@keyframes crt-flash{0%,20%{opacity:.9}38%{opacity:.16}70%,100%{opacity:0}}
/* a line the beam just wrote: drawn left to right, bright, decaying to the resting phosphor */
.monitor .fresh{animation:beam-write .5s steps(18,end) both,decay 1.6s ease-out both}
.monitor .fresh *{animation:decay 1.6s ease-out both}
@keyframes beam-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes decay{from{color:#fff4dc}}
.kfeed::after{content:"█";padding-top:10px;color:var(--amber);animation:blink 1s steps(2) infinite}
@media print{html.js .armed:not(.in),html.js .armed:not(.in) *{transform:none!important;translate:none!important;rotate:none!important}}
.monitor-body .empty{display:block;padding:0;text-align:left;font-size:14px}
.monitor-body .empty::before{content:"> "}
.monitor-body .empty::after{content:"█";margin-left:4px;animation:blink 1s steps(2) infinite}
.kfeed{list-style:none;display:grid}
.kfeed li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:10px 0;border-bottom:1px dashed rgba(245,165,36,.18)}
.kfeed li:last-child{border-bottom:0}
.kfeed .fk{grid-column:1/-1;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-hi);text-shadow:none}
.kfeed .fk::before{content:"> "}
.kfeed p{font-size:14px;line-height:1.6;color:#ffd99a}
.kfeed .fm{align-self:end;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#a87a2c;text-shadow:none;white-space:nowrap}
.kfeed .fm a{color:#c99a4a;display:inline-block;padding:6px 4px;margin:-6px -4px}
@media(max-width:560px){.kfeed li{grid-template-columns:none}.kfeed .fm{justify-self:start}}
.klore{margin-bottom:22px;padding:24px 22px 20px}
.klore h3{font:800 24px/1 var(--display);margin:0 0 12px}
.klore .dim{color:#5b574e}
.klore .mono{font-size:13px}
.claim{padding:28px 24px;display:grid;gap:14px;align-content:start}
.claim h3{font:800 clamp(28px,3vw,38px)/.95 var(--display);margin:6px 0 0}
.claim p{color:#c9c2b4}
.claim p b{color:var(--amber-hi)}
.claim .btn{justify-self:start}

/* ---------- treasury desk (coin page): the instrument panel of the twin's treasury ----------
   Status lamp behind a lens, cream-faced analog meters behind glass (needle on the price vs its 1 h / 6 h averages, pump zone red,
   dip zone amber), a backlit regime annunciator, the on-chain readouts, a logbook of the last decisions and the engraved house rules. */
.tdesk{padding-block:8px 8px}
.tdesk > .h3{margin-bottom:16px}
.tdesk-plate{display:grid;gap:18px;padding:clamp(18px,3vw,26px)}
.tdesk-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.tlamp{flex:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#5a5f62,#202426 60%,#0b0d0e);box-shadow:0 0 0 3px #15181a,0 0 0 4px #4a5258,inset 0 -2px 3px rgba(0,0,0,.6)}
.tlamp.t-ok{background:radial-gradient(circle at 38% 32%,#eaffd9,#7fd765 45%,#2c6b1f 80%);box-shadow:0 0 0 3px #15181a,0 0 0 4px #4a5258}
.tlamp.t-wait{background:radial-gradient(circle at 38% 32%,#fff0c8,#f5a524 45%,#8a5308 80%);box-shadow:0 0 0 3px #15181a,0 0 0 4px #4a5258}
.tlamp.t-stop{background:radial-gradient(circle at 38% 32%,#ffc9bd,#e0432e 45%,#6d140a 80%);box-shadow:0 0 0 3px #15181a,0 0 0 4px #4a5258}
.tstatus{display:grid;gap:3px}
.tstatus span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}
.tstatus b{font:800 clamp(24px,2.6vw,30px)/.95 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--bone)}
.tmode{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:1.5px dashed #6c747a;border-radius:2px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#c9cdd0}
.tmode.live{border-style:solid;border-color:#5fae4c;color:#a9e59a}
.tnext{margin-left:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.tnext b{display:inline-block;margin-left:6px;padding:5px 8px;border-radius:2px;background:#050606;border:1px solid #2e3437;color:var(--amber);font:700 14px/1 var(--data);letter-spacing:.04em;text-transform:none;font-variant-numeric:tabular-nums}
.treason{padding:10px 12px;border-radius:3px;background:#060707;border:1px solid #2a3033;box-shadow:inset 0 1px 3px #000;font-size:13px;line-height:1.5;color:var(--bone)}
.treason::before{content:"› ";color:var(--amber)}
.tdesk-inst{display:grid;gap:18px;align-items:start}
@media(min-width:900px){.tdesk-inst{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.dials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dial{margin:0;display:grid;gap:8px;min-width:0}
.dial svg{display:block;width:100%;height:auto;padding:8px 8px 2px;border-radius:6px 6px 3px 3px;
  background:radial-gradient(ellipse 90% 120% at 50% 100%,#f3ecd8,#e3d9be 62%,#cdbf9c);border:6px solid #1a1e21;box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 1px #3d454a}
.dial{position:relative}
.dial::after{content:"";position:absolute;left:6px;right:6px;top:6px;aspect-ratio:120/72;border-radius:3px;pointer-events:none;background:linear-gradient(158deg,rgba(255,255,255,.28),rgba(255,255,255,0) 34%)}
.d-face{fill:none;stroke:#2a2620;stroke-width:1.1}
.d-ticks{fill:none;stroke:#2a2620;stroke-width:1.1}
.z-pump{fill:none;stroke:#c23a2c;stroke-width:3.4}
.z-dip{fill:none;stroke:#d48b10;stroke-width:3.4}
.dial text{font:600 6.2px var(--data);fill:#3b362c;text-anchor:middle}
.dial text.d-unit{font-size:6px;fill:#7a715f}
.needle{transform:rotate(var(--a));transform-origin:60px 62px;transform-box:view-box}
.needle path{stroke:#121212;stroke-width:1.4;stroke-linecap:round}
.needle circle{fill:#121212;stroke:#4d4740;stroke-width:.8}
.dial.nov .needle path{stroke:#8a8272}
.dial figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dial figcaption span{font:400 9.5px/1.2 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.dial figcaption b{font:700 20px/1 var(--display);letter-spacing:.02em;color:var(--amber);font-variant-numeric:tabular-nums}
html.js .tdesk.armed:not(.in) .needle{transform:rotate(-90deg)}
.tdesk.in .needle{animation:needle 1.7s cubic-bezier(.22,.62,.25,1) both}
.tdesk .patched .needle,.tdesk .patched .tlamp{animation:none}
html.js .tdesk.armed:not(.in) .tlamp{filter:brightness(.3) saturate(.4)}
.tdesk.in .tlamp{animation:lamp-warm 1.1s steps(1,end) .2s both}
@keyframes needle{0%{transform:rotate(-90deg)}55%{transform:rotate(calc(var(--a) + 7deg))}75%{transform:rotate(calc(var(--a) - 2.5deg))}90%{transform:rotate(calc(var(--a) + .8deg))}100%{transform:rotate(var(--a))}}
.tdesk-side{display:grid;gap:14px;min-width:0}
.annun{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;border-radius:3px;background:#0a0b0c;border:1px solid #2e3437}
.annun li{display:grid;place-items:center;min-height:34px;padding:4px 2px;border-radius:2px;background:linear-gradient(180deg,#1b1f22,#121517);box-shadow:inset 0 0 0 1px #000;
  font:700 9.5px/1.1 var(--data);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#5a6066}
.annun li.on{background:linear-gradient(180deg,#ffcf7a,#f5a524);color:#1a1004;box-shadow:inset 0 0 0 1px #8a5308}
.annun li.pump.on{background:linear-gradient(180deg,#ff8a74,#c23a2c);color:#fff3ee;box-shadow:inset 0 0 0 1px #6d140a}
.annun li.stale.on,.annun li.unknown.on{background:linear-gradient(180deg,#e7e2d4,#bdb6a6);color:#24221d;box-shadow:inset 0 0 0 1px #6d675a}
.treadouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;margin:0}
.treadouts div{padding:8px 10px;border-radius:3px;background:linear-gradient(180deg,#050606,#0d0f10);border:1px solid #2e3437;box-shadow:inset 0 1px 3px rgba(0,0,0,.9);min-width:0}
.treadouts dt{font:400 9px/1.2 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.treadouts dd{margin:5px 0 0;font:700 14px/1.15 var(--data);color:var(--amber-hi);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.treadouts dd time{font:inherit}
.tdesk-log h3{margin:0 0 8px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}
.tlog{list-style:none;display:grid;border-radius:3px;background:#060707;border:1px solid #2a3033;box-shadow:inset 0 1px 3px #000}
.tlog li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;padding:9px 12px;border-bottom:1px dashed #23292c}
.tlog li:last-child{border-bottom:0}
.tl-at{font-size:10.5px;letter-spacing:.08em;color:var(--dust);white-space:nowrap}
.tl-at time{font:inherit}
.tl-out{justify-self:start;padding:3px 6px;border:1px solid currentColor;border-radius:2px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#9aa0a5}
.o-executed .tl-out{color:#8fe07c}.o-pending .tl-out{color:var(--amber-hi)}.o-deferred .tl-out,.o-waiting .tl-out{color:var(--amber)}
.o-refused .tl-out,.o-failed .tl-out,.o-expired .tl-out{color:#ff8a74}
.tlog p{font-size:13.5px;line-height:1.45;color:#d9d3c6;min-width:0}
.tl-amt{font-size:11px;letter-spacing:.04em;color:var(--amber-hi);white-space:nowrap}
.tl-amt a{color:#c99a4a;display:inline-block;padding:6px 4px;margin:-6px -4px -6px 2px}
@media(max-width:640px){.tlog li{grid-template-columns:auto minmax(0,1fr)}.tlog p,.tl-amt{grid-column:1/-1}}
.tlog-empty{padding:12px;border:1px dashed #3a4146;border-radius:3px;font-size:12px;line-height:1.55;color:var(--dust)}
.trules{padding-top:12px;border-top:1px solid #2e3437;font-size:11px;line-height:1.7;letter-spacing:.03em;color:#9aa0a5}
.trules b{margin-right:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}

/* ---------- $TWINPAD burn ledger: a steel logbook in the core plate (home), a ledger sheet in the manual (/docs) ----------
   The desk lamp and its reason, the counter bank of the totals (they run up like lab counters), the run windows and the last runs
   that landed, each with its transaction. Coming into view: the lamp warms up, the entries feed in (steel) or get stamped (paper). */
.burn{width:100%;max-width:860px;display:grid;gap:14px;text-align:left;container-type:inline-size}
.burn-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding-bottom:10px}
.burn-head b{font:800 clamp(22px,2.6vw,28px)/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.burn-head span{font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.burn-head i{font-style:normal;white-space:nowrap}
.burn-body{display:grid;gap:14px;min-width:0}
.burn-body p{margin:0}
.burn-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.burn-checked{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.burn-checked time{font:inherit}
.burn-note{padding:12px 14px;border-radius:3px;font-size:12px;line-height:1.6;letter-spacing:.03em}
.burn-wait{display:none}
html.js .burn-wait{display:block}
.burn-count{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0}
.burn-count div{min-width:0;padding:10px 12px 11px;border-radius:3px}
.burn-count dt{font:400 9px/1.2 var(--data);letter-spacing:.16em;text-transform:uppercase}
.burn-count dd{margin:7px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.burn-count dd b{font:800 clamp(28px,3.2vw,36px)/.95 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.burn-count small{font:400 9.5px/1 var(--data);letter-spacing:.12em;text-transform:uppercase}
.burn-next{display:flex;flex-wrap:wrap;gap:8px 20px}
.burn-next div{display:flex;align-items:center;gap:8px}
.burn-next span{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.burn-next b{padding:5px 8px;border-radius:2px;font:700 13px/1 var(--data);font-variant-numeric:tabular-nums;white-space:nowrap}
.burn-log h3{margin:0 0 8px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.burn-runs{list-style:none;display:grid;margin:0;padding:0}
.burn-runs li{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;padding:9px 12px}
.br-at{font-size:10.5px;letter-spacing:.06em;white-space:nowrap}
.br-at time{font:inherit}
.br-rg{padding:3px 6px;border:1px solid currentColor;border-radius:2px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.br-what{font-size:14px;line-height:1.45;min-width:0}
.br-what i{font-style:normal}
.br-usd{font-size:12.5px;opacity:.8}
.br-tx{font-size:11px;white-space:nowrap;display:inline-block;padding:6px 4px;margin:-6px -4px}
.br-stamp{display:none}
.burn-market{font-size:12px;line-height:1.55}
.burn-market b{margin-right:6px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
/* the ledger's own width decides (home core plate, the manual, a phone): 5 counters across, then burned first and wider */
@container (max-width:700px){.burn-count{grid-template-columns:repeat(3,minmax(0,1fr))}.burn-count .c-burned{order:-1;grid-column:span 2}}
@container (max-width:460px){.burn-count{grid-template-columns:repeat(2,minmax(0,1fr))}.burn-count .c-burned{grid-column:1/-1}
  .burn-runs li{grid-template-columns:auto minmax(0,1fr) auto}.br-rg{justify-self:start}.br-what{grid-column:1/-1;order:3}}
/* steel: the logbook in the core plate */
.burn.steel{margin-top:8px;padding:clamp(14px,2.6vw,22px);border-radius:4px;background:linear-gradient(180deg,#0b0d0e,#121517);border:1px solid #2e3437;box-shadow:inset 0 2px 10px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06)}
.burn.steel .burn-head{border-bottom:1px solid #2a3033}
.burn.steel .burn-head b{color:var(--bone)}
.burn.steel .burn-head span,.burn.steel .burn-checked,.burn.steel .burn-next span,.burn.steel .burn-log h3,.burn.steel .br-at,.burn.steel .burn-count dt,.burn.steel .burn-count small{color:var(--dust)}
.burn.steel .burn-note{border:1px dashed #3a4146;color:var(--dust)}
.burn.steel .burn-note:not(.mono){font-size:13.5px}
.burn.steel .burn-count div{background:linear-gradient(180deg,#050606,#0d0f10);border:1px solid #2e3437;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.burn.steel .burn-count b{color:var(--amber-hi)}
.burn.steel .c-burned b{color:#ff9e86}
.burn.steel .burn-next b{background:#050606;border:1px solid #2e3437;color:var(--amber)}
.burn.steel .burn-runs{border-radius:3px;background:#060707;border:1px solid #2a3033;box-shadow:inset 0 1px 3px #000}
.burn.steel .burn-runs li{border-bottom:1px dashed #23292c}
.burn.steel .burn-runs li:last-child{border-bottom:0}
.burn.steel .br-rg{color:#9aa0a5}
.burn.steel .br-what{color:#d9d3c6}
.burn.steel .br-what b{color:var(--amber-hi)}
.burn.steel .br-tx{color:#c99a4a}
/* paper: the ledger sheet in the manual (its type wins over the manual's own p/li rules) */
.burn.paper{margin:18px 0 8px;padding:16px clamp(14px,2.4vw,20px) 18px;border:1.5px solid var(--ink);border-radius:2px;background:rgba(255,255,255,.2);box-shadow:3px 3px 0 rgba(28,27,24,.12)}
.burn.paper .burn-head{border-bottom:3px double var(--ink)}
.burn.paper .burn-head b,.burn.paper .tstatus b,.burn.paper .burn-count b,.burn.paper .br-what b{color:var(--ink)}
.burn.paper .burn-head span,.burn.paper .burn-checked,.burn.paper .tstatus span,.burn.paper .burn-next span,.burn.paper .burn-log h3,.burn.paper .br-at,.burn.paper .br-rg,.burn.paper .burn-count dt,.burn.paper .burn-count small{color:var(--ink-soft)}
.burn.paper .burn-note{border:1.5px dashed #b8af98;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.burn.paper .tlamp{width:14px;height:14px;background:#b8af98;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.burn.paper .tlamp.t-ok{background:var(--up-ink)}
.burn.paper .tlamp.t-wait{background:#c27c0e}
.burn.paper .tlamp.t-stop{background:var(--stamp)}
.burn.paper .tmode{border-color:var(--ink-soft);color:var(--ink-soft)}
.burn.paper .tmode.live{border-color:var(--up-ink);color:var(--up-ink)}
.burn.paper .treason{padding:4px 0 4px 12px;border:0;border-left:3px solid var(--ink);border-radius:0;background:none;box-shadow:none;font-size:13px;line-height:1.55;color:var(--ink)}
.burn.paper .treason::before{color:var(--stamp)}
.burn.paper .burn-count div{border:1.5px solid var(--ink);border-radius:2px}
.burn.paper .c-burned b{color:var(--stamp)}
.burn.paper .burn-next b{border:1.5px solid var(--ink);color:var(--ink)}
.burn.paper .burn-runs{border-top:1.5px solid var(--ink)}
.burn.paper .burn-runs li{padding:10px 92px 10px 2px;border-bottom:1.5px solid #b8af98;font-size:14px;line-height:1.45;color:#2c2a25}
.burn.paper .br-what{font-size:14px;color:#2c2a25}
.burn.paper .br-tx{color:var(--pen)}
.burn.paper .br-stamp{display:block;position:absolute;right:4px;top:50%;margin-top:-13px;padding:4px 7px 3px;border:2px solid var(--stamp);border-radius:3px;font:800 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);opacity:.8;transform:rotate(-8deg);mix-blend-mode:multiply}
.burn.paper .burn-market{font-size:12.5px;line-height:1.6;color:var(--ink-soft)}
.burn.paper .burn-market b{color:var(--ink)}
.burn.paper .trules{padding-top:12px;border-top:1.5px solid #b8af98;font-size:11.5px;line-height:1.7;color:var(--ink-soft)}
.burn.paper .trules b{color:var(--ink)}
@container (max-width:460px){.burn.paper .burn-runs li{padding-right:70px}.burn.paper .br-stamp{font-size:11px;padding:3px 5px 2px}}
/* coming into view (app.js reveal: .armed → .in; only after the API answered there is anything inside) */
html.js .burn.armed:not(.in) .tlamp{filter:brightness(.3) saturate(.4)}
html.js .burn.steel.armed:not(.in) .burn-runs li{clip-path:inset(0 0 100% 0)}
html.js .burn.paper.armed:not(.in) .br-stamp{opacity:0}
.burn.in .tlamp{animation:lamp-warm 1.1s steps(1,end) both}
.burn.steel.in .burn-runs li{animation:ledger-feed .5s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(.35s + var(--i,0) * .12s)}
.burn.paper.in .br-stamp{animation:ledger-stamp .42s cubic-bezier(.5,0,.6,1) both;animation-delay:calc(.45s + var(--i,0) * .22s)}
@keyframes lamp-warm{0%{filter:brightness(.3) saturate(.4)}18%{filter:brightness(.75)}26%{filter:brightness(.4) saturate(.6)}44%{filter:brightness(.9)}52%{filter:brightness(.6)}70%,100%{filter:none}}
@keyframes ledger-feed{0%{clip-path:inset(0 0 100% 0);transform:translateY(-7px)}100%{clip-path:inset(0);transform:none}}
@keyframes ledger-stamp{0%{opacity:0;transform:scale(1.9) rotate(-15deg)}70%{opacity:.88;transform:scale(.95) rotate(-7deg)}100%{opacity:.8;transform:scale(1) rotate(-8deg)}}

/* ---------- replication log (a twin being born) ---------- */
.kbirth .ktitle{font-size:min(clamp(48px,7vw,96px),calc(100cqi / (var(--tw,4) * 1.02)))}
.kbirth .ktitle + p em{font-style:normal;color:var(--amber)}
.birth-lede{margin-top:6px}
.bsteps{list-style:none;display:grid;gap:2px}
.bsteps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:6px 0;color:#7d6136;text-shadow:none}
.bsteps li .mono{color:inherit}
.bsteps li::after{content:"····";white-space:nowrap;font-family:var(--data);color:inherit}
@media(max-width:959px){.kbirth .file-pod{order:3}.kbirth .file-body{order:2}}
.bsteps li.done{color:var(--amber)}
.bsteps li.done::after{content:"OK";color:#8fe07c}
.bsteps li.doing{color:var(--amber-hi)}
.bsteps li.doing::after{content:"RUN█";animation:blink 1s steps(2) infinite}
.kbirth.failed .bsteps li::after{content:"--"}
.bimg.bph{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#3a3125,#100e0b 70%);font:800 30px/1 var(--display);color:var(--amber-hi);overflow:hidden;text-overflow:ellipsis;padding:10px;text-align:center;overflow-wrap:anywhere}

/* ---------- pairs page ---------- */
.pjump{position:sticky;top:58px;z-index:20;background:rgba(11,12,13,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.pjump .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.pjump .wrap::-webkit-scrollbar{display:none}
.pjump a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid #3a4146;border-radius:2px;text-decoration:none;font:700 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.pjump a b{font:700 11px/1 var(--data);color:var(--amber)}
.pjump a:hover{border-color:var(--amber)}
.pcat{padding-block:56px 24px;scroll-margin-top:120px}
.pcat .sec-head{margin-bottom:24px}
.pcat h2{font-size:clamp(36px,5vw,64px)}
.pgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.pr{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 12px;text-align:left;background:var(--brushed),linear-gradient(180deg,#1f2427,#141719);border:1px solid #30373c;border-radius:3px;text-decoration:none;color:inherit;cursor:pointer;min-width:0;width:100%}
.pr:hover{border-color:var(--amber)}
.pr[aria-selected=true]{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.pr .pi{width:34px;height:34px}
.pt{display:grid;gap:3px;min-width:0;flex:1}
.pt b{font:800 18px/1 var(--display);letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt span{font-size:12.5px;line-height:1.2;color:var(--dust);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc{flex:none;font:400 9.5px/1 var(--data);letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
@media(max-width:600px){
  .pjump{display:block;position:sticky}
  .pgrid{grid-template-columns:1fr 1fr;gap:6px}
  .pgrid .pr{min-height:52px;padding:8px;gap:8px}
  .pgrid .pr .pi{width:32px;height:32px}
  .pgrid .pt span,.pgrid .pc{display:none}
  .pgrid .pt b{font-size:16px}
}

/* ---------- manual (docs) ---------- */
.manual{max-width:900px;margin:0 auto;padding:clamp(34px,5vw,56px) clamp(18px,4vw,52px) clamp(30px,4vw,44px)}
.manual::before{content:"";position:absolute;top:-16px;left:50%;width:150px;height:34px;transform:translateX(-50%);border-radius:6px 6px 10px 10px;background:linear-gradient(180deg,#c9ced3,#7d858c 55%,#5d646a);box-shadow:0 4px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.manual-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:2.5px solid var(--ink);padding-bottom:12px;margin-bottom:8px}
.manual-head b{font:800 clamp(26px,3.4vw,34px)/1 var(--display);text-transform:uppercase}
.manual-head small{font:400 11px/1.3 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.manual .toc{display:flex;flex-wrap:wrap;gap:6px 8px;margin:14px 0 6px}
.manual .toc a{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;border:1.5px solid var(--ink);border-radius:2px;font:700 11px/1 var(--data);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.manual .toc a:hover{background:var(--ink);color:var(--paper)}
.manual h2{font-size:clamp(28px,3.6vw,40px);margin:38px 0 12px;color:var(--ink);display:flex;align-items:baseline;gap:12px;scroll-margin-top:90px}
.manual h2 .mono{font:700 13px/1 var(--data);color:var(--stamp);letter-spacing:.08em}
.manual p,.manual li{font-size:16.5px;line-height:1.65;color:#2c2a25}
.manual p + p{margin-top:12px}
.manual b{color:var(--ink)}
.manual a{color:var(--pen);text-underline-offset:3px}
.manual code{color:var(--pen);font-size:.9em;overflow-wrap:anywhere;word-break:break-all}
.manual ul{padding-left:22px;display:grid;gap:8px}
.manual table{width:100%;border-collapse:collapse;margin:16px 0;font:400 13.5px/1.45 var(--data)}
.manual th,.manual td{text-align:left;padding:10px 10px;border-bottom:1.5px solid #b8af98;vertical-align:top}
.manual th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom-color:var(--ink)}
.manual td:first-child{font-weight:700;color:var(--pen);white-space:nowrap}
@media(max-width:560px){.manual table{font-size:12.5px}.manual th,.manual td{padding:8px 6px}}
.doc-page{padding-block:56px 96px}
.doc-page:has(> .banner){padding-top:0}
.doc-page > .banner + .wrap{padding-top:clamp(28px,4vw,48px)}
.banner.room > img{object-position:70% 45%}
.banner.claim-room > img{object-position:78% 50%}
@media(max-width:760px){.banner.room > img{object-position:74% 40%}}
.page-head{padding-block:52px 34px}
.page-head h1{font-size:clamp(50px,8vw,104px);margin-block:18px 14px}

/* ---------- claim (owner desk) ---------- */
.claim-steps{display:grid;gap:14px;margin-top:34px}
@media(min-width:900px){.claim-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.claim-steps .box{display:grid;gap:12px;align-content:start;padding:26px 22px}
.claim-steps .n{font:400 42px/1 var(--barcode);color:var(--bone);opacity:.75}
.claim-steps h3{font:800 28px/1 var(--display)}
.claim-steps p{color:#c9c2b4}
.claim-steps .btn{justify-self:start}
.claim-steps #held{color:var(--amber)}
.claim-steps #xwho{color:var(--dust);font-size:12px;line-height:1.5}
.claimlist{display:grid;gap:16px;margin-top:28px}
.claimrow{padding:20px clamp(16px,3vw,26px);display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.claimrow .ch{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.claimrow .ch a{font:800 26px/1 var(--display);text-transform:uppercase;color:var(--ink);text-decoration:none}
.claimrow .ch span{font:700 11px/1 var(--data);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.claimrow .ch b{margin-left:auto;font:700 24px/1 var(--display);letter-spacing:.02em;color:var(--pen)}
.claimrow .addr{display:block;min-width:0}
.claimrow .addr input{width:100%;min-height:48px;padding:6px 2px;background:transparent;border:0;border-bottom:1.5px solid var(--ink);font:400 16px/1.2 var(--data);color:var(--pen);outline:0}
.claimrow .addr input:focus{border-bottom-color:var(--stamp)}
.claimrow .addr input::placeholder{color:#a39c8d}
.claimrow .rubber{font-size:18px;padding:10px 14px;min-height:48px;transform:rotate(-1.5deg)}
.claimrow .cmsg{grid-column:1/-1;font:400 12.5px/1.5 var(--data);color:var(--ink-soft)}
.claimrow .cmsg a{color:var(--pen)}
@media(max-width:560px){.claimrow{grid-template-columns:none}.claimrow .rubber{transform:none}}
.cmsg{font:400 13px/1.55 var(--data);color:var(--dust)}
.cnote{margin-top:22px;font:400 12px/1.6 var(--data);color:var(--dust)}

/* ---------- pair picker (modal) ---------- */
.pk{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(4,5,6,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.pk.on{opacity:1}
.pk[hidden]{display:none}
.pk-in{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:12px;width:min(920px,100%);height:min(760px,calc(100svh - 32px));padding:18px;border-radius:8px;background:var(--brushed),linear-gradient(180deg,#262b2f,#15181a);border:1px solid #3e464c;box-shadow:0 40px 90px -30px #000;transform:translateY(12px);transition:transform .25s}
.pk.on .pk-in{transform:none}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 12px/1 var(--data);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.pk-head b{color:var(--amber);margin-left:6px}
.x{min-height:40px;padding:0 12px;border:1px solid #4a5258;border-radius:2px;background:transparent;font:700 11px/1 var(--data);letter-spacing:.12em;text-transform:uppercase;color:var(--bone);cursor:pointer}
.x:hover{border-color:var(--amber);color:var(--amber)}
.pk-search{position:relative;display:flex;align-items:center;min-height:52px;background:#060707;border:1px solid #3a4146;border-radius:3px}
.pk-search svg{position:absolute;left:14px;width:18px;height:18px;color:var(--dust)}
.pk-search input{width:100%;min-height:52px;padding:0 14px 0 42px;background:transparent;border:0;outline:0;font:400 16px/1 var(--data);color:var(--bone)}
.pk-search:focus-within{border-color:var(--amber)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:38px;padding:0 12px;border:1px solid #4a5258;border-radius:2px;background:rgba(0,0,0,.35);font:700 12px/1 var(--data);letter-spacing:.06em;color:var(--bone);cursor:pointer}
.chip:hover{border-color:var(--amber)}
.chip[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:#1a1004}
.pk-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;font-size:11px}
.pk-tabs::-webkit-scrollbar{display:none}
.pk-tabs button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid #3a4146;border-radius:2px;background:transparent;font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--dust);cursor:pointer}
.pk-tabs button span{font:400 10px/1 var(--data);color:inherit;opacity:.8}
.pk-tabs button[aria-selected=true]{color:var(--bone);border-color:var(--amber);box-shadow:inset 0 -2px 0 var(--amber)}
.pk-list{display:grid;align-content:start;gap:6px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.pk-empty{grid-column:1/-1;padding:24px 4px;font:400 13px/1.5 var(--data);color:var(--dust)}
.pk-foot{font:400 11px/1.4 var(--data);letter-spacing:.06em;color:var(--dust)}
@media(max-width:600px){.pk{padding:0;place-items:end stretch}.pk-in{height:92svh;width:100%;border-radius:12px 12px 0 0;padding:14px}.pk-list{grid-template-columns:none}}

/* ---------- 404 / offline ---------- */
.nf{padding-block:40px 96px}
.nf-grid{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.nf-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px}}
.nf .pod{max-width:360px}
.nf h1{margin-block:18px 20px}
.nf .nfa{margin-top:28px}
.nfnote{margin-top:18px;font-size:12px;line-height:1.6}
.nf.off .tank > img{filter:brightness(.45) saturate(.6)}
/* the empty pod's lamp has a bad ballast: now and then it stutters */
.nf:not(.off) .tank::after{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;animation:ballast 7.5s steps(1) infinite 1.2s}
@keyframes ballast{0%,60.9%,63.4%,65.9%,100%{opacity:0}61%{opacity:.58}62.4%{opacity:.18}64%{opacity:.66}65%{opacity:.08}}

/* ---------- airlock: every page is entered through a pair of steel doors (cross-document view transition) ----------
   The leaves are real elements of the NEW page, rendered only while it is being entered (html.vt, set by the inline flag on pagereveal),
   each captured as its own snapshot and slid by transform: they slam shut over the old page, rebound, latch (lamp red → green) and
   slide open on the new one. Without cross-document view transitions, with reduced motion or without JS: a plain load (or the
   browser's default cross-fade). app.js skips it for another filter / page of the same listing. */
.airlock{display:none;position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden}
.leaf{position:absolute;top:0;bottom:0;width:50%;display:grid;align-content:center;overflow:hidden;font-style:normal;--rivet:radial-gradient(circle at 42% 38%,#e7ebee 0 .8px,#9aa2a8 1.7px,#3a4045 2.9px,rgba(0,0,0,.55) 3.5px,transparent 4.2px);
  background:var(--noise),
    var(--rivet) 0 0/16px 46px repeat-y,
    var(--rivet) 23px calc(30% - 3.2px)/46px 16px repeat-x,var(--rivet) 23px calc(72% + 3.5px)/46px 16px repeat-x,
    linear-gradient(180deg,transparent 0 calc(30% - 10px),#121517 calc(30% - 10px),#80888e calc(30% - 8px),#545b60 30%,#30363a calc(30% + 8px),#0b0d0e calc(30% + 10px),transparent 0,transparent calc(72% - 10px),#121517 calc(72% - 10px),#80888e calc(72% - 8px),#545b60 72%,#30363a calc(72% + 8px),#0b0d0e calc(72% + 10px),transparent 0),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,0) 30%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.6)),
    var(--light)}
.leaf.l{left:0;view-transition-name:airlock-l;--light:linear-gradient(90deg,#1a1d20,#2e3337 30%,#4c5358 70%,#5d6569 88%,#4a5156);background-position:0 0,14px 0,23px calc(30% - 3.2px),23px calc(72% + 3.5px),0 0,0 0,0 0,0 0;box-shadow:inset -1px 0 0 #000,14px 0 26px -6px rgba(0,0,0,.75);justify-items:end}
.leaf.r{right:0;view-transition-name:airlock-r;--light:linear-gradient(270deg,#1a1d20,#2e3337 30%,#4c5358 70%,#5d6569 88%,#4a5156);background-position:0 0,calc(100% - 14px) 0,61px calc(30% - 3.2px),61px calc(72% + 3.5px),0 0,0 0,0 0,0 0;box-shadow:inset 1px 0 0 #000,-14px 0 26px -6px rgba(0,0,0,.75);justify-items:start}
/* leading edge: hazard band + rubber gasket; the latch lamp sits on the left leaf */
.leaf::after{content:"";position:absolute;top:0;bottom:0;width:38px;background:linear-gradient(90deg,#060606 0 9px,#2a2c2e 9px 10px,transparent 10px),linear-gradient(90deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35)),repeating-linear-gradient(-45deg,#d9a700 0 13px,#121212 13px 26px)}
.leaf.l::after{right:0;transform:scaleX(-1)}
.leaf.r::after{left:0}
.leaf.l::before{content:"";position:absolute;right:52px;top:calc(50% - 21vh);width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#ffb1a1,#d8331e 55%,#6d130a);box-shadow:0 0 0 3px #15181a,0 0 0 4px #5d656b,0 0 4px 4px rgba(216,51,30,.35)}
html.vt .leaf.l::before{animation:latch .68s steps(1) both}
@keyframes latch{0%,39%{background:radial-gradient(circle at 38% 34%,#ffb1a1,#d8331e 55%,#6d130a)}40%,100%{background:radial-gradient(circle at 38% 34%,#e4ffd8,#5fd047 55%,#1f5c14);box-shadow:0 0 0 3px #15181a,0 0 0 4px #5d656b,0 0 4px 4px rgba(95,208,71,.35)}}
.leaf b{font:800 clamp(64px,24vh,230px)/.8 var(--display);letter-spacing:-.01em;text-transform:uppercase;color:rgba(222,170,10,.86);margin-inline:66px;white-space:nowrap;
  -webkit-mask:var(--wear);mask:var(--wear)}
.leaf{--wear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -5.5 4.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E")}
.leaf.r b{font-size:clamp(26px,min(7.2vh,5.2vw),68px);line-height:.9;letter-spacing:.02em;white-space:normal;max-width:min(80%,9em)}
.leaf small{margin:14px 66px 0;font:700 11px/1.3 var(--data);letter-spacing:.2em;text-transform:uppercase;color:rgba(235,229,216,.55)}
@media(max-width:600px){.leaf::after{width:28px;background-size:auto,auto,auto}.leaf b{margin-inline:42px;font-size:min(24vh,30vw)}.leaf.r b{font-size:min(6vh,8vw)}.leaf small{margin-inline:42px;font-size:9px}.leaf.l::before{right:38px}}
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
html.vt .airlock{display:block}
html.vt::view-transition-old(root){animation:lock-out .68s steps(1,end) both}
html.vt::view-transition-new(root){animation:lock-in .68s steps(1,end) both}
@keyframes lock-out{0%,32%{opacity:1}33%,100%{opacity:0}}
@keyframes lock-in{0%,32%{opacity:0}33%,100%{opacity:1}}
html.vt::view-transition-new(airlock-l),html.vt::view-transition-new(airlock-r){animation:none;opacity:1}
html.vt::view-transition-group(airlock-l){animation:leaf-l .68s both}
html.vt::view-transition-group(airlock-r){animation:leaf-r .68s both}
/* slam (accelerating, no dwell at the start), hit + rebound, latch, then the heavy slide open */
@keyframes leaf-l{
  0%{transform:translateX(-100%);animation-timing-function:cubic-bezier(.38,0,.82,.62)}
  27%{transform:translateX(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  30.5%{transform:translateX(-1.5%) translateY(1px);animation-timing-function:cubic-bezier(.6,0,.8,.6)}
  33%{transform:translateX(0)}
  46%{transform:translateX(0);animation-timing-function:cubic-bezier(.6,0,.3,1)}
  100%{transform:translateX(-100%)}}
@keyframes leaf-r{
  0%{transform:translateX(200%);animation-timing-function:cubic-bezier(.38,0,.82,.62)}
  27%{transform:translateX(100%);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  30.5%{transform:translateX(101.5%) translateY(1px);animation-timing-function:cubic-bezier(.6,0,.8,.6)}
  33%{transform:translateX(100%)}
  46%{transform:translateX(100%);animation-timing-function:cubic-bezier(.6,0,.3,1)}
  100%{transform:translateX(200%)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .faq details::details-content{transition:none}
  html{scroll-behavior:auto}
}