/* THE FOUNDRY — one-page app (Forge / Bench / Archive / Rewards). Identity: a night-shift foundry floor — soot ground,
   furnace orange, bone type; every bay carries its own accent (--acc): Forge orange, Bench teal, Archive plasma, Rewards
   patina. Display = Oswald (stamped caps), body = Archivo, data = JetBrains Mono. Deliberately single-theme (dark). */
:root{
  --ground:#14110d; --ground2:#0d0a07; --ink0:#0a0708; --panel:#1d1811; --panel2:#241d15; --line:#39301f; --line2:#2a2318;
  --ink:#f4ead9; --bone:#e8ddc9; --dim:#c1b39c; --muted:#948870; --faint:#6d634f;
  --orange:#ff5a00; --orange-s:#ff7a2e; --ember:#ffb43a; --molten:#ffd27a;
  --steel:#7d94a0; --teal:#57c7d6; --teal-s:#7fe0ee; --ok:#63b97e; --v333:#b98bff; --gold:#ffcf5a; --bad:#ff8a8a;
  --acc:var(--orange); --acc-rgb:255,90,0;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace; --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:"Oswald","Archivo Narrow",var(--sans);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink0)}
body{margin:0;color:var(--ink);font-family:var(--sans);line-height:1.55;min-height:100vh;
  background:radial-gradient(120% 80% at 50% 120%,#3a1200,#140a06 45%,#0a0708 100%) fixed var(--ink0);overflow-x:hidden}
a{color:var(--orange-s);text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--molten);outline-offset:2px;border-radius:6px}
::selection{background:var(--orange);color:#160f08}
.mono{font-family:var(--mono)} .tnum{font-variant-numeric:tabular-nums}

/* ---- ambient ember background (fixed, behind everything) ---- */
#bgwash{position:fixed;inset:0;z-index:-3;pointer-events:none}
#bgwash::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(60% 42% at 50% 100%,rgba(255,90,0,.34),transparent 70%);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.4;mix-blend-mode:screen}
#bggrain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#meter{position:fixed;top:0;left:0;height:2px;z-index:40;width:0;
  background:linear-gradient(90deg,#7a2e00,var(--orange) 70%,#fff5e0);box-shadow:0 0 10px rgba(255,120,30,.7)}

/* ---- NAV ---- */
nav.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:11px clamp(14px,3vw,34px);
  background:linear-gradient(180deg,rgba(13,10,7,.92),rgba(13,10,7,.66));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.brand span{color:var(--orange)}
.brand svg{width:22px;height:22px;flex:0 0 auto}
.navlinks{display:flex;gap:2px;margin-left:6px}
.navlinks a{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 11px;border-radius:8px;transition:color .15s}
.navlinks a::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;background:var(--orange);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .22s}
.navlinks a:hover,.navlinks a.on{color:var(--ink)} .navlinks a.on::after{transform:scaleX(1)}
.spacer{flex:1}
.chip{font-family:var(--mono);font-size:12px;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 13px;white-space:nowrap}
.chip b{color:var(--ember)}
button.cta,a.cta{white-space:nowrap;flex-shrink:0;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:800;font-size:13.5px;color:#160f08;
  background:linear-gradient(180deg,#ff7a2e,var(--orange) 55%,#e04c00);border:0;padding:11px 20px;border-radius:10px;cursor:pointer;
  transition:filter .15s,transform .06s,box-shadow .2s;box-shadow:0 4px 18px rgba(255,90,0,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.cta::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transition:left .55s ease;pointer-events:none}
.cta:hover::before{left:130%}
.cta:hover{filter:brightness(1.07);box-shadow:0 6px 26px rgba(255,90,0,.42),inset 0 1px 0 rgba(255,255,255,.35)}
.cta:active{transform:translateY(1px) scale(.985)}
.cta.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line);font-weight:700;box-shadow:none}
.cta.ghost:hover{border-color:var(--orange-s)}
.cta:disabled{opacity:.42;pointer-events:none;box-shadow:none}
.cta.big{font-size:16px;padding:15px 28px;border-radius:12px}
.cta.wide{width:100%}
.nav-social{display:flex;gap:6px;align-items:center}
.nav-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--panel);border:1px solid var(--line);color:var(--dim);transition:all .14s}
.nav-ico:hover{color:var(--ink);border-color:var(--orange);box-shadow:0 4px 14px rgba(255,90,0,.2)} .nav-ico svg{width:17px;height:17px;fill:currentColor}
.nav-txt{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 11px;transition:all .14s}
.nav-txt:hover{color:var(--ink);border-color:var(--orange)}
.nav-col{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--bone);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 11px 6px 6px;white-space:nowrap;transition:all .14s}
/* the Junkyard: mint, like the yard's own glow, so it reads as "somewhere else to go" rather than one more section */
.nav-junk{display:inline-flex;align-items:center;gap:7px;margin-right:10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9ff5d2;background:linear-gradient(180deg,rgba(95,240,184,.13),rgba(95,240,184,.04));border:1px solid rgba(95,240,184,.38);border-radius:999px;padding:7px 14px 7px 11px;box-shadow:0 0 16px rgba(95,240,184,.12);transition:all .14s}
.nav-junk svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.nav-junk:hover{color:#fff;border-color:#5ff0b8;box-shadow:0 0 22px rgba(95,240,184,.32)}
.nav-junk:focus-visible{outline:2px solid #5ff0b8;outline-offset:3px}
.nav-col .osmark{width:20px;height:20px;flex:0 0 auto} .nav-col i{font-style:normal;color:var(--muted);font-size:11px}
.nav-col:hover{color:var(--ink);border-color:#2081e2;box-shadow:0 4px 14px rgba(32,129,226,.25)} .nav-col:hover i{color:#2081e2}
.get333{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bone);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 11px 5px 5px;white-space:nowrap;transition:all .14s}
.get333 .osmark{width:19px;height:19px;flex:0 0 auto} .get333 i{font-style:normal;color:var(--muted)}
.get333:hover{color:var(--ink);border-color:#2081e2;box-shadow:0 4px 14px rgba(32,129,226,.25)} .get333:hover i{color:#2081e2}
.get333.big{margin:0;padding:9px 16px 9px 9px;font-size:12px} .get333.big .osmark{width:22px;height:22px}
.trayempty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;text-align:center}
.hcols{display:none;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
/* 1400, not 1180: with the Junkyard button in the bar too, the OpenSea pills move down into the hero sooner, or the wallet
   button gets crushed to "connec / wallet" between the two widths */
@media(max-width:1400px){.nav-social .nav-col{display:none} .hcols{display:flex}}
@media(max-width:1020px){.nav-txt{display:none} .nav-junk span{display:none} .nav-junk{padding:7px 9px;margin-right:6px}}
@media(max-width:860px){.navlinks,.nav-social,.nav-junk{display:none}}
@media(max-width:480px){#balChip{display:none!important} .brand{font-size:16px} .hk{letter-spacing:.06em;font-size:10px}}
/* the eyebrow WRAPS on a narrow phone. It used to be white-space:nowrap, which made it 371px wide at 320px and
   dragged the whole hero column (headline included) past the screen edge, where #hero's overflow:hidden cut it. */
@media(max-width:420px){.hk{flex-wrap:wrap;justify-content:center;row-gap:2px;white-space:normal}}
#connectBtn[data-connected]{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
#connectBtn[data-connected]::after{content:"";width:8px;height:8px;border-radius:50%;background:#3ad07a;box-shadow:0 0 8px #3ad07a;flex:0 0 auto}

/* phone: the section links move to a bottom dock */
.dock{display:none}
@media(max-width:860px){
  .dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:35;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;border-radius:16px;
    background:rgba(16,12,8,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.6)}
  .dock a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border-radius:11px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .dock a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .dock a.on{color:var(--ink);background:var(--panel2)} .dock a.on svg{color:var(--da,var(--orange))}
  body{padding-bottom:84px}
}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,3.4vw,30px)}

/* ---- HERO ---- */
#hero{position:relative;padding:clamp(18px,4vh,44px) 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(20px,4vw,60px);align-items:center}
.hero-grid>*{min-width:0}   /* a grid item defaults to min-width:auto = 'never narrower than my content' */
.hero-copy{z-index:5;max-width:600px;min-width:0}
.hk{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--orange);margin-bottom:16px}
.hk::before{content:"";width:34px;height:2px;background:linear-gradient(90deg,transparent,var(--orange))}
.htitle{font-family:var(--disp);font-weight:700;font-size:clamp(44px,6.6vw,96px);line-height:.88;text-transform:uppercase;letter-spacing:.005em;margin:0 0 18px;text-wrap:balance}
.htitle .l{display:inline-block;animation:stamp .5s cubic-bezier(.2,1.4,.3,1) backwards}
.htitle .hot{background:linear-gradient(180deg,#fff0c8 0%,#ffb43a 28%,#ff5a00 62%,#a82e00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,100,10,.45))}
@keyframes stamp{0%{transform:translateY(-.5em) scale(1.3);opacity:0;filter:blur(4px)}70%{transform:translateY(.04em) scale(.97)}100%{transform:none;opacity:1;filter:none}}
.hsub{color:var(--dim);font-size:clamp(15px,1.25vw,17px);max-width:520px;margin:0 0 24px} .hsub b{color:var(--bone)}
.hcta{display:flex;gap:12px;flex-wrap:wrap}
.hfacts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;margin-top:30px;border-top:1px solid var(--line2);padding-top:16px}
.hfact{padding:0 22px 0 0;margin-right:22px;border-right:1px solid var(--line2)} .hfact:last-child{border-right:0;margin-right:0;padding-right:0}
.hfact .n{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.1vw,28px);color:var(--ink);line-height:1.1;white-space:nowrap} .hfact .n small{font-size:.55em;color:var(--ember);margin-left:3px;letter-spacing:.04em}
.hfact .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px;white-space:nowrap}
.hfacts.you .hfact .n{color:var(--molten)}

.hero-stage{position:relative;width:min(100%,560px);aspect-ratio:1;display:grid;place-items:center;justify-self:center;perspective:1200px}
.htilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.hglow{position:absolute;inset:-14%;background:radial-gradient(closest-side,rgba(255,90,0,.28),transparent 72%);filter:blur(10px);animation:breathe 7s ease-in-out infinite}
.hbloom{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;filter:blur(42px) saturate(1.5) brightness(1.1);opacity:.55;pointer-events:none}
.hplinth{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:70%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,120,30,.5),rgba(255,90,0,.12) 60%,transparent);filter:blur(6px)}
.hframe{position:absolute;inset:6%;border-radius:24px;overflow:hidden;background:radial-gradient(120% 100% at 50% 26%,#231a10,#0b0806);
  box-shadow:0 44px 130px rgba(255,90,0,.22),inset 0 0 90px rgba(255,90,0,.08),0 0 0 1px rgba(255,150,60,.16)}
.hframe iframe,.hframe .hposter{position:absolute;inset:0;width:100%;height:100%;border:0}
.hframe .hposter{object-fit:cover;transition:opacity .7s ease;z-index:2}
.hframe .hposter.b{opacity:0}
.hframe.flip .hposter.a{opacity:0} .hframe.flip .hposter.b{opacity:1}
.hframe iframe{z-index:1;opacity:0;transition:opacity .9s ease}
.hframe.live iframe{opacity:1;z-index:3} .hframe.live .hposter{opacity:0!important;pointer-events:none}
.hframe::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 -50px 80px rgba(11,8,6,.55),inset 0 0 50px rgba(0,0,0,.35)}
/* HUD brackets on the turntable */
.hud{position:absolute;inset:2.5%;pointer-events:none;z-index:6}
.hud i{position:absolute;width:26px;height:26px;border:2px solid rgba(255,160,70,.55)}
.hud i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:10px}
.hud i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:10px}
.hud i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:10px}
.hud i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:10px}
.htag{position:absolute;left:9%;bottom:9%;z-index:7;display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:11px;background:rgba(12,9,6,.72);border:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:70%}
.htag .t1{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.htag .t2{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hlive{position:absolute;right:9%;top:9%;z-index:7;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);padding:6px 10px;border-radius:999px;
  background:rgba(12,9,6,.72);border:1px solid var(--line);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:7px;transition:border-color .15s}
.hlive:hover{border-color:var(--orange-s)}
.hlive .d{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.hlive.loading .d{background:var(--ember);animation:blink 1s steps(2) infinite}
.hlive.on{cursor:default} .hlive.on .d{background:#3ad07a;box-shadow:0 0 8px #3ad07a}
@keyframes blink{50%{opacity:.25}}

/* conveyor of real robots */
.belt{position:relative;margin-top:clamp(26px,5vh,54px);padding:16px 0 18px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(255,90,0,.05),rgba(0,0,0,.25));overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.belt::before,.belt::after{content:"";position:absolute;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 28px);opacity:.7;animation:beltmove 1.2s linear infinite}
.belt::before{top:3px} .belt::after{bottom:3px}
@keyframes beltmove{to{background-position:-28px 0}}
.belt-track{display:flex;gap:12px;width:max-content;will-change:transform}
.belt{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none} .belt.dragging{cursor:grabbing} .belt.dragging .bt{pointer-events:none}
.belt:hover::before,.belt:hover::after,.belt.still::before,.belt.still::after{animation-play-state:paused}
.beltwrap{position:relative}
.belt-arrow{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--bone);
  background:rgba(14,11,8,.62);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:.0;transform:scale(.9);transition:opacity .18s,transform .18s,border-color .15s,color .15s,box-shadow .2s}
.belt-arrow.l{left:clamp(6px,2vw,26px)} .belt-arrow.r{right:clamp(6px,2vw,26px)}
.belt-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.beltwrap:hover .belt-arrow,.belt-arrow:focus-visible{opacity:1;transform:none}
.belt-arrow:hover{color:#fff;border-color:var(--orange);box-shadow:0 8px 26px rgba(255,90,0,.35)} .belt-arrow:active{transform:scale(.94)}
@media(hover:none){.belt-arrow{display:none}}
.bt{position:relative;flex:0 0 auto;width:112px;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0c0a07;cursor:pointer;padding:0;transition:transform .15s,border-color .15s,box-shadow .2s}
.bt img{width:100%;height:100%;object-fit:cover;display:block}
.bt span{position:absolute;left:5px;bottom:5px;font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--bone);background:rgba(12,10,7,.72);border-radius:5px;padding:1px 5px}
.bt:hover{transform:translateY(-4px) scale(1.04);border-color:var(--orange);box-shadow:0 10px 26px rgba(255,90,0,.3)}
.bt.on{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.beltcap{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:10px 0 0}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center} .hero-stage{order:-1;width:min(86vw,460px)}
  .hero-copy{margin:0 auto} .journey{justify-content:center} .hk::before{display:none} .hsub{margin-left:auto;margin-right:auto} .hcta{justify-content:center}
  .hfacts{grid-template-columns:repeat(2,1fr);gap:14px 0;justify-content:stretch} .hfact{margin:0;padding:0 8px;border-right:0}
  .bt{width:88px}
}

/* ---- SECTIONS / bays ---- */
section.bay{padding:clamp(64px,10vh,120px) 0 clamp(40px,6vh,70px);position:relative;scroll-margin-top:60px;overflow:hidden}
section.bay::before{content:attr(data-n);position:absolute;top:clamp(10px,3vh,40px);right:max(10px,calc(50% - 600px));font-family:var(--disp);font-weight:700;font-size:clamp(130px,24vw,330px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(var(--acc-rgb),.13);pointer-events:none;user-select:none;z-index:0}
section.bay>.wrap{position:relative;z-index:1}
#forge{--acc:var(--orange);--acc-rgb:255,90,0} #bench{--acc:var(--teal);--acc-rgb:87,199,214}
#archive{--acc:var(--v333);--acc-rgb:185,139,255} #rewards{--acc:var(--ok);--acc-rgb:99,185,126}
.slab{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.snum{font-family:var(--mono);font-size:12px;color:var(--acc);letter-spacing:.1em;border:1px solid rgba(var(--acc-rgb),.4);border-radius:6px;padding:3px 7px}
.stag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5.4vw,62px);text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:.95}
h2 span{color:var(--acc);text-shadow:0 0 34px rgba(var(--acc-rgb),.35)}
.sdesc{color:var(--dim);font-size:15.5px;max-width:640px;margin:12px 0 34px} .sdesc b{color:var(--bone)}
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
.seam{height:40px;display:flex;align-items:center;justify-content:center}
.seam svg{width:min(760px,90%);height:24px}
.seam path{fill:none;stroke:url(#weld);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.4s ease}
.seam.in path{stroke-dashoffset:0}

/* surfaces: a pointer-follow heat spot on every card */
.card,.fcard,.tray,.stat{--mx:50%;--my:0%;position:relative;border:1px solid var(--line);border-radius:18px;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(var(--acc-rgb),.09),transparent 62%),linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.03)}
.card{padding:22px}
.cardhd{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;margin-bottom:14px;flex-wrap:wrap}
.cardhd .t{font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.03em}
.cardhd .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* shown only while no round is open — the same condition that renames the heading, so it clears itself */
.cardhd .soon{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);
  border:1px solid rgba(255,180,58,.42);background:rgba(255,180,58,.09);border-radius:999px;padding:3px 9px;
  align-self:center;white-space:nowrap;margin-right:auto}   /* sit beside the title, not floated to the middle by space-between */
.lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- FORGE ---- */
.fgrid{display:grid;grid-template-columns:124px minmax(0,1fr) minmax(0,1.08fr);gap:22px;align-items:start}
.rrail{display:flex;flex-direction:column;gap:9px;position:sticky;top:80px}
.rrailhd{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 2px 2px}
.rrailwrap{display:flex;flex-direction:column;gap:9px;max-height:520px;overflow-y:auto;padding:2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rrailstrip{display:flex;gap:9px;overflow-x:auto;padding:3px 2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rtile{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--ground2);cursor:pointer;padding:7px 7px 8px;transition:border-color .12s,transform .08s,box-shadow .18s;flex:0 0 auto}
.rtile:hover{transform:translateY(-2px);border-color:rgba(var(--acc-rgb),.7)}
.rtile.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 8px 22px rgba(var(--acc-rgb),.18)}
.rtile canvas{width:100%;height:auto;display:block;border-radius:8px;background:#0c0a07}
.rtimg{position:absolute;top:7px;left:7px;width:calc(100% - 14px);aspect-ratio:1;object-fit:cover;border-radius:8px;background:#0c0a07;display:block}
.rtile.off .rtimg{filter:grayscale(.85) brightness(.7)}
.rtempty{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--faint);border:1px dashed var(--line);border-radius:12px;padding:14px 12px;text-align:center}
.rrailstrip .rtempty{min-width:150px} .rrailstrip .rtile{width:96px}
.rtile .rtn{font-family:var(--mono);font-weight:700;font-size:11px;color:var(--bone);margin-top:5px;display:flex;justify-content:space-between;align-items:center;gap:4px}
.rtile .rtt{font-family:var(--mono);font-size:9.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtile .rtw{font-family:var(--mono);font-weight:700;font-size:10px;color:var(--ember)}
.rtile .rtdot{position:absolute;top:11px;right:11px;width:8px;height:8px;border-radius:50%;background:var(--v333);box-shadow:0 0 8px var(--v333);z-index:2}
.rtile .rtpips{position:absolute;left:11px;top:11px;display:flex;gap:2px;z-index:2}
.rtile .rtpips i{width:5px;height:9px;border-radius:2px;background:rgba(12,10,7,.7);border:1px solid rgba(255,255,255,.18)} .rtile .rtpips i.f{background:var(--orange);border-color:var(--molten)}
.rrailadd{display:none}
.archpick{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.archpickhd{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}

.stage{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:radial-gradient(120% 120% at 50% 15%,#2a2013,#0b0906);aspect-ratio:1;display:grid;place-items:center;
  box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 0 1px rgba(var(--tier-rgb,255,90,0),.0);transition:box-shadow .5s}
.stage[data-tier="1"]{--tier-rgb:255,140,50} .stage[data-tier="2"]{--tier-rgb:255,190,80} .stage[data-tier="3"]{--tier-rgb:87,199,214}
.stage[data-tier="4"]{--tier-rgb:185,139,255} .stage[data-tier="5"]{--tier-rgb:255,215,110}
.stage[data-tier]:not([data-tier="0"]){box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(var(--tier-rgb),.55),0 0 60px rgba(var(--tier-rgb),.16)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.stage img.mach{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s,filter .8s}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 -60px 70px rgba(11,8,6,.5),inset 0 34px 50px rgba(11,8,6,.28)}
.stage[data-tier="0"] img.mach{filter:grayscale(.8) brightness(.62)}
#fFlash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:4;mix-blend-mode:screen;background:radial-gradient(circle at 50% 45%,rgba(255,240,205,.95),rgba(255,120,0,.5) 40%,transparent 70%)}
#fStamp{position:absolute;left:0;right:0;top:50%;z-index:5;text-align:center;opacity:0;transition:opacity .5s,transform .5s cubic-bezier(.2,1.5,.3,1);transform:translateY(-50%) scale(1.5) rotate(-7deg);pointer-events:none}
#fStamp.on{opacity:1;transform:translateY(-50%) scale(1) rotate(-7deg)}
#fStamp .b{display:inline-block;font-family:var(--disp);font-weight:700;font-size:clamp(34px,5vw,56px);text-transform:uppercase;letter-spacing:.06em;color:var(--molten);border:4px solid var(--molten);border-radius:12px;padding:0 18px;
  background:rgba(12,8,4,.55);text-shadow:0 0 24px rgba(255,120,30,.8);box-shadow:0 0 40px rgba(255,120,30,.4)}
#fStamp .s{font-family:var(--mono);font-size:12px;color:var(--molten);letter-spacing:.08em;margin-top:10px;text-shadow:0 1px 6px #000}
.factive{position:absolute;left:12px;top:12px;z-index:5;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--bone);background:rgba(12,10,7,.72);border:1px solid var(--line);border-radius:8px;padding:5px 10px;letter-spacing:.02em;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.ftier{position:absolute;right:12px;top:12px;z-index:5;width:54px;height:54px;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:22px;color:#160f08;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(160deg,#fff,rgb(var(--tier-rgb,255,140,50)) 45%,rgba(0,0,0,.5) 140%)}
.stage[data-tier="0"] .ftier{background:#2a241a;color:var(--faint)}
.ftraits{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;gap:5px}
.ftraits span{font-family:var(--mono);font-size:10px;color:var(--bone);background:rgba(12,10,7,.72);border:1px solid var(--line);border-radius:7px;padding:3px 8px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.ftraits span b{color:var(--muted);font-weight:500;margin-right:5px}
.fopen{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--teal);background:rgba(12,10,7,.72);border:1px solid rgba(87,199,214,.45);border-radius:7px;padding:3px 9px;cursor:pointer}
.fopen:hover{background:rgba(87,199,214,.16)}
.stage .hud{inset:5px;z-index:4} .stage .hud i{border-color:rgba(var(--tier-rgb,255,160,70),.45);width:20px;height:20px}
.stage-empty{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;padding:24px;font-family:var(--mono);font-size:12.5px;color:var(--dim);line-height:1.7}
/* the message used to sit straight on the waiting robot's face, which read as an accident rather than a
   placeholder. It now darkens the robot behind it and stands on its own plate. */
.stage-empty::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 55% at 50% 50%,rgba(10,7,8,.90),rgba(10,7,8,.55) 62%,transparent 88%)}
.stage-empty>div{max-width:34ch;padding:16px 20px;border-radius:14px;background:rgba(13,10,7,.72);border:1px solid var(--line2);
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
/* a way in for a visitor with no wallet: the Forge used to stop dead at "connect" */
.se-or{display:block;margin:12px 0 8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.se-try{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.se-try button{font-family:var(--mono);font-size:12px;color:var(--bone);background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:6px 11px;cursor:pointer;transition:border-color .15s,color .15s}
.se-try button:hover{border-color:var(--orange-s);color:var(--ink)}
.stage-empty b{display:block;font-family:var(--disp);font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}

/* the ladder = a furnace gauge: molten metal climbs the track as the robot is forged up */
.ladder{--fill:0;position:relative;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding-left:22px}
.ladder::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:8px;border-radius:6px;background:#0a0806;border:1px solid var(--line);box-shadow:inset 0 0 6px #000}
.ladder::after{content:"";position:absolute;left:5px;top:7px;width:6px;border-radius:5px;height:calc((100% - 14px) * var(--fill));
  background:linear-gradient(180deg,#fff0c8,var(--ember) 18%,var(--orange) 60%,#a82e00);box-shadow:0 0 14px rgba(255,110,20,.75);transition:height .9s cubic-bezier(.3,.8,.2,1)}
.rung{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto 54px;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--ground2);transition:border-color .14s,transform .1s,box-shadow .2s,opacity .2s}
.rung::before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:var(--line)}
.rung.reached::before{background:var(--orange);box-shadow:0 0 8px var(--orange)}
.rung.reached{border-color:#5a4415;background:linear-gradient(90deg,rgba(255,90,0,.13),var(--ground2) 70%)}
.rung.target{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),0 8px 28px rgba(255,90,0,.18);animation:targetpulse 2.4s ease-in-out infinite}
@keyframes targetpulse{50%{box-shadow:0 0 0 1px var(--orange),0 8px 38px rgba(255,90,0,.36)}}
.rung.locked{opacity:.62}
/* UPGRADES NOT OPEN YET (founder 2026-09-21: "no need for users to start upgrading unless we start the
   reward system"). Activating still matters — it is what lets a robot wear a part — so only the tiers
   above it go grey. They are dimmed rather than hidden: the ladder is the explanation of what tiers
   ARE, and hiding it would make the reward weights look like they came from nowhere. */
.rung.soon{opacity:.34;filter:grayscale(1)}
.rung.soon .rs{color:var(--faint)}
.ladder-soon{display:flex;align-items:center;gap:10px;margin:2px 0 2px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}
.ladder-soon::before,.ladder-soon::after{content:"";height:1px;background:var(--line2);flex:1}
.ladder-soon b{font-weight:700;color:var(--ember)}
.rung .rn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;border:1px solid var(--line);color:var(--muted)}
.rung.reached .rn{background:var(--orange);color:#160f08;border-color:var(--orange)}
.rung .rt{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.rung .rs{font-family:var(--mono);font-weight:700;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-radius:5px;padding:1px 6px;color:var(--faint);border:1px solid var(--line2)}
.rung.reached .rs{color:#160f08;background:var(--ok);border-color:var(--ok)} .rung.target .rs{color:#160f08;background:var(--molten);border-color:var(--molten)}
.rung .rbar{height:4px;border-radius:3px;background:#0a0806;margin-top:6px;overflow:hidden}
.rung .rbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#7a2e00,var(--orange),var(--molten));width:0;transition:width 1s cubic-bezier(.3,.8,.2,1)}
.rung .rc{font-family:var(--mono);font-size:12.5px;color:var(--molten);white-space:nowrap}
.rung .rw{font-family:var(--disp);font-weight:700;color:var(--ember);font-size:20px;text-align:right}
.fsum{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.fsum>div{border:1px solid var(--line2);border-radius:11px;background:var(--ground2);padding:9px 12px}
.fsum .v{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);line-height:1.2} .fsum .v em{font-style:normal;color:var(--ember)} .fsum .v small{font-family:var(--mono);font-size:11px;color:var(--ok);margin-left:6px;font-weight:700}
.fgarage{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px} .fgarage[hidden]{display:none} .fgarage .lab{margin-right:4px}
.gchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--bone);border:1px solid var(--line);border-radius:9px;padding:3px 9px 3px 3px;background:var(--ground2)}
.gchip img{width:24px;height:24px;border-radius:6px;object-fit:cover;display:block} .gchip b{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:700} .gchip.v{padding-left:9px;border-color:#40306a} .gchip.v b{color:var(--v333)}
.gnone{font-family:var(--mono);font-size:11px;color:var(--faint)}
.fsteps{display:none;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 12px}
.fsteps.on{display:grid}
.fsteps span{position:relative;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-top:10px;text-align:center}
.fsteps span::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:3px;background:var(--line2)}
.fsteps span.done{color:var(--dim)} .fsteps span.done::before{background:var(--ok)}
.fsteps span.now{color:var(--molten)} .fsteps span.now::before{background:linear-gradient(90deg,var(--orange),var(--molten),var(--orange));background-size:200% 100%;animation:flow 1.1s linear infinite}
@keyframes flow{to{background-position:-200% 0}}
.fline{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:4px 0 12px;line-height:1.55;overflow-wrap:anywhere} .fline b{color:var(--dim)}
.ftx{display:none;font-family:var(--mono);font-size:11.5px;margin:-4px 0 12px} .ftx.on{display:block}
@media(max-width:520px){.rung{grid-template-columns:30px minmax(0,1fr) auto 46px;gap:9px;padding:10px 11px} .rung .rs{display:none} .rung .rt{font-size:14px} .rung .rc{font-size:12px} .rung .rw{font-size:18px}}
@media(max-width:940px){
  .fgrid{grid-template-columns:1fr}
  .rrail{position:static} .rrailwrap{flex-direction:row;max-height:none;overflow-x:auto} .rrail .rtile{width:96px}
}

/* ---- BENCH ---- */
.bench-card{padding:clamp(14px,2vw,22px)}
.bench-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.bench-robots{display:flex;gap:7px;overflow-x:auto;padding:2px;min-width:0;flex:1 1 300px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.brobot{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font-family:var(--mono);font-weight:700;font-size:12px;color:var(--ink);background:#12100c;border:1px solid var(--line);border-radius:11px;padding:4px 11px 4px 4px;cursor:pointer;transition:border-color .12s,transform .08s}
.brobot img{width:30px;height:30px;border-radius:8px;object-fit:cover;background:#0c0a07;display:block}
.brobot:hover{border-color:var(--teal);transform:translateY(-1px)} .brobot.on{border-color:var(--teal);color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.bench-tok{display:flex;gap:6px;align-items:center;margin-left:auto}
.bench-tok input{width:104px;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:#0e0c09;color:var(--ink);font:500 13px var(--mono)}
.bench-tok input:focus{outline:none;border-color:var(--teal)}
.bbtn{font-family:var(--mono);font-size:12px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#15120d;color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s,transform .06s}
.bbtn:hover{border-color:var(--teal)} .bbtn:active{transform:translateY(1px)}
.bbtn.primary{background:linear-gradient(180deg,var(--teal-s),var(--teal));color:#08211f;border-color:var(--teal);font-weight:700}
.bbtn[disabled]{opacity:.42;cursor:default;pointer-events:none}
.bench-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.bench-frame{position:relative;aspect-ratio:1/1;width:100%;max-width:min(100%,max(420px,calc(100vh - 190px)));margin:0 auto;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 120% at 50% 20%,#14222a,#07090b)}
.bench-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.bench-frame .hud{inset:6px;z-index:3} .bench-frame .hud i{border-color:rgba(87,199,214,.5);width:20px;height:20px}
.bench-over{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;padding:24px;background:radial-gradient(90% 90% at 50% 40%,rgba(10,16,20,.55),rgba(5,7,9,.94));transition:opacity .5s}
.bench-over[hidden]{display:none}
.bench-over .bo-t{font-family:var(--disp);font-weight:700;font-size:clamp(22px,3vw,30px);text-transform:uppercase;letter-spacing:.04em}
.bench-over .bo-s{font-family:var(--mono);font-size:12px;color:var(--dim);margin:8px auto 16px;max-width:340px;line-height:1.6}
.bench-over .bo-try{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.bench-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;filter:blur(3px) saturate(.6);z-index:0}
.spin{width:42px;height:42px;margin:0 auto 14px;border-radius:50%;border:3px solid rgba(87,199,214,.2);border-top-color:var(--teal);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bench-help{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--muted)} .bench-help b{color:var(--teal);font-weight:700}
.bench-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.bgroup{border:1px solid var(--line2);border-radius:14px;background:rgba(10,8,6,.5);padding:12px}
.bgroup>.lab{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.bench-switch{display:grid;gap:7px}
.bench-switch label{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bench-switch label.changed span{color:var(--teal)} .bench-switch label.changed span::after{content:" •"}
.bench-switch select{appearance:none;-webkit-appearance:none;font-family:var(--mono);font-size:12px;padding:8px 30px 8px 10px;border-radius:9px;border:1px solid var(--line);color:var(--ink);min-width:0;width:100%;cursor:pointer;
  background:#15120d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2357c7d6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center}
.bench-switch select:hover:not(:disabled){border-color:var(--teal)} .bench-switch label.changed select{border-color:rgba(87,199,214,.6)}
.bench-switch select:disabled{opacity:.45;cursor:default}
.bench-switch option,.bench-switch optgroup{background:#15120d;color:var(--ink)}
.bench-swrow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:3px}
.bench-fixed{font-family:var(--mono);font-size:11px;color:var(--muted)}
/* Shown under the parts tray while the shop is deliberately small, so one part reads as "this is the
   start" rather than "this is all there is". Hidden automatically once there are several on sale. */
.tray-soon{margin-top:10px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);border-top:1px dashed var(--line2);padding-top:10px}
.tray-search{width:100%;box-sizing:border-box;margin:0 0 8px;padding:8px 11px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:8px;color:inherit;font:inherit;font-size:13px}
.tray-search:focus{outline:none;border-color:#4bc0c8}
.bench-tray{display:grid;grid-template-columns:1fr;gap:6px;max-height:318px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.part{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:11px;background:#15120d;overflow:hidden;transition:border-color .12s,transform .08s}
.part:hover{border-color:var(--teal);transform:translateY(-1px)} .part.has{border-color:rgba(87,199,214,.7);background:rgba(87,199,214,.07)}
.part-main{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;background:none;border:0;color:var(--ink);padding:8px 9px;cursor:pointer}
.part-main .pi{grid-row:1/3;font-size:22px;line-height:1;width:40px;text-align:center} .part-main .pi img{width:40px;height:40px;border-radius:8px;object-fit:cover;display:block} .part-main .pn2{font:700 12px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part-main .pp{font:500 10.5px var(--mono);color:var(--molten);white-space:nowrap} .part.owned .pp{color:var(--ok)}
.part-buy{flex:0 0 auto;border:0;border-left:1px solid var(--line);background:linear-gradient(180deg,#ff7a2e,var(--orange));color:#160f08;font:800 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 11px;cursor:pointer}
.part-move{flex:0 0 auto;align-self:stretch;width:34px;border:0;border-left:1px solid var(--line);background:rgba(87,199,214,.10);color:var(--teal);font-size:15px;cursor:pointer;transition:background .12s}
.part-move:hover{background:rgba(87,199,214,.22)} .part-move:disabled{opacity:.4;cursor:default}
.part-buy:hover{filter:brightness(1.1)} .part-buy:disabled{opacity:.5;cursor:default}
.bench-item.unowned{border-color:rgba(255,210,122,.5)} .bench-item.unowned .bi-head span{color:var(--molten)}
.bench-list{display:flex;flex-direction:column;gap:8px}
.bench-empty{color:var(--muted);font-size:12.5px;font-family:var(--mono)}
/* the basic-colour swatches under a worn part */
.bi-tints{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.bi-tints .sw{width:19px;height:19px;border-radius:6px;border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0;
  transition:transform .12s,box-shadow .12s,border-color .12s}
.bi-tints .sw:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.55)}
.bi-tints .sw.on{border-color:var(--ink);box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.bi-tints .sw.none{background:#2a2318;position:relative}
.bi-tints .sw.none::after{content:"";position:absolute;inset:3px;border-radius:3px;
  background:linear-gradient(135deg,transparent 44%,var(--muted) 44%,var(--muted) 56%,transparent 56%)}
.bench-item{border:1px solid var(--line);border-radius:11px;padding:9px 10px;background:#100e0a}
.bench-item .bi-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;margin-bottom:7px}
.bench-item .bi-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px} .bench-item .bi-x:hover{color:var(--bad);background:rgba(255,120,120,.1)}
.bench-nudge{display:grid;grid-template-columns:40px 1fr 1fr;gap:4px 6px;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bench-nudge button{font:700 13px var(--mono);padding:4px 0;border-radius:7px;border:1px solid var(--line);background:#15120d;color:var(--ink);cursor:pointer} .bench-nudge button:hover{border-color:var(--teal);color:var(--teal)}
.bench-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bench-actions .bbtn.primary{flex:1 1 auto;padding:11px 14px;font-size:13px}
.bench-dirty{display:none;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--molten);letter-spacing:.06em;text-transform:uppercase} .bench-dirty.on{display:inline-flex}
.bench-dirty::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--molten);box-shadow:0 0 8px var(--molten)}
.bench-status{font-family:var(--mono);font-size:12px;color:var(--muted);min-height:1.2em;line-height:1.55;overflow-wrap:anywhere}
.crates{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,300px);gap:22px;align-items:center;margin-top:22px}
.crate-art{width:120px;height:120px;display:grid;place-items:center;position:relative}
/* the real model sits on top of the CSS box and hides it only once it has actually loaded */
.crate-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
/* and the same trap here: this `display:block` beat [hidden], so before the 3D crate is built its
   empty canvas still lay over the drawn crate at inset:0 with cursor:pointer — invisible, but taking
   the clicks meant for the art underneath it. */
.crate-art canvas[hidden]{display:none}
.crate-art.live .cbox{display:none}
.crate-art.live{width:190px;height:190px}
@media(max-width:900px){.crate-art.live{width:140px;height:140px}}
.cbox{position:relative;width:92px;height:80px;border-radius:10px;border:2px solid #6b5426;background:linear-gradient(160deg,#4a3a1c,#2a2010 60%,#1a1409);box-shadow:0 14px 30px rgba(0,0,0,.55),inset 0 0 0 5px rgba(0,0,0,.25),0 0 40px rgba(87,199,214,.18);animation:cratebob 3.4s ease-in-out infinite}
.cbox i{position:absolute;left:-2px;right:-2px;height:9px;background:linear-gradient(180deg,#8a6c33,#5a4520);border-radius:3px} .cbox i:nth-child(1){top:14px} .cbox i:nth-child(2){bottom:12px}
.cbox b{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#bff4fb,var(--teal) 55%,#1f6b76);box-shadow:0 0 18px var(--teal)}
@keyframes cratebob{50%{transform:translateY(-5px) rotate(-1.5deg)}}
.crate-count{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .crate-count .n{font-family:var(--disp);font-weight:700;font-size:40px;line-height:1;color:var(--teal);text-shadow:0 0 22px rgba(87,199,214,.4)} .crate-count .k{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.crate-loot{display:flex;flex-wrap:wrap;gap:6px}
.crate-loot span{font-family:var(--mono);font-size:11px;color:var(--bone);border:1px solid var(--line);border-radius:8px;padding:4px 9px;background:rgba(10,8,6,.5)} .crate-loot span b{color:var(--teal);margin-left:6px} .crate-loot span.has{border-color:rgba(99,185,126,.6)} .crate-loot span.has::after{content:" ✓";color:var(--ok)}
.crate-act{display:flex;flex-direction:column;gap:10px} #crOpen{background:linear-gradient(180deg,var(--teal-s),var(--teal) 55%,#2e8a97);box-shadow:0 4px 18px rgba(87,199,214,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.crate-fine{font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--faint)}
@media(max-width:900px){.crates{grid-template-columns:auto minmax(0,1fr)} .crate-act{grid-column:1/-1} .crate-art{width:84px;height:84px} .cbox{transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.cbox{animation:none}}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.fcard{padding:22px 24px;transition:border-color .15s,transform .12s}
.fcard:hover{border-color:rgba(var(--acc-rgb),.5);transform:translateY(-2px)}
.fcard .ft{font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;margin-bottom:6px;letter-spacing:.02em} .fcard .fd{color:var(--dim);font-size:14px} .fcard .fd b{color:var(--bone)}
.fcard .fa{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
@media(max-width:900px){.bench-body{grid-template-columns:1fr} .feat{grid-template-columns:1fr} .bench-tok{margin-left:0}}

/* ---- ARCHIVE machine ---- */
.mach{display:flex;flex-direction:column;gap:16px}
.machwrap{position:relative;border:1px solid #33285a;border-radius:20px;overflow:hidden;aspect-ratio:3/2;min-height:600px;background:#0b0810;box-shadow:0 26px 64px rgba(0,0,0,.5),0 0 80px rgba(140,90,255,.08),inset 0 0 110px rgba(120,80,255,.05)}
.machwrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#archFrames{position:absolute;inset:0;z-index:2;pointer-events:none}
/* THE LIVE 3D REACTOR sits behind everything in the stage; the rod windows and the HUD stay on top of
   it. It only becomes visible once the scene has reported its slots, so a browser that cannot run it
   simply keeps the hand-drawn 2D reactor and nobody sees a blank box. */
.arch3d{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s ease;pointer-events:none;background:transparent}
.machwrap.is3d .arch3d{opacity:1}
/* invisible, but STILL THE INPUT SURFACE: clicking a loaded rod to eject it is bound to this canvas,
   and killing its pointer events took ejecting away with it. It stays live and now also carries the
   drag that turns the reactor. */
.machwrap.is3d > canvas{opacity:0;cursor:grab}
.machwrap.is3d > canvas:active{cursor:grabbing}
/* a holder that has turned to the back of the ring takes its rod window with it */
.archframe.away,.archshot.away{opacity:0;transition:opacity .25s ease}
.archframe{position:absolute;border:0;border-radius:9px;overflow:hidden;pointer-events:none;background:#08060e}
/* over the 3D the rod art needs its own frame, since the drawn window underneath is gone */
/* Over the 3D an overlay is mapped onto the holder glass by a matrix3d built from its four projected
   corners. It is anchored top-left and carries no radius or shadow of its own — but it keeps a REAL
   pixel size, set per frame in positionFrames(). A 1x1 box scaled up by the transform looked fine for
   a still, and rendered the 333's animation as a BLACK SQUARE: an iframe lays its document out in the
   viewport it is GIVEN, so a 1x1 iframe draws one pixel and then magnifies it. */
.machwrap.is3d .archframe,.machwrap.is3d .archshot{left:0;top:0;transform-origin:0 0;border-radius:0;box-shadow:none}
/* ZOOM TO FILL. A 333's animation frames its robot with a wide margin of its own, so dropped into a
   cradle it read as a small picture floating in a big black pane (founder: "what is that space
   between the nft and the screen, it's too much free space"). The overlay is a clipping frame and
   the artwork is laid out OVERSIZE inside it, then cropped — the robot fills the glass and it still
   renders at its full resolution, which a CSS scale would not do. */
.machwrap.is3d .archframe{overflow:hidden;background:#000}
.machwrap.is3d .archframe > iframe{position:absolute;border:0;left:-26%;top:-26%;width:152%;height:152%}
.machwrap.is3d .archshot{object-fit:cover}
.machwrap.is3d .archframe{outline:0}
.archshot{position:absolute;border-radius:6px;object-fit:cover;pointer-events:none;box-shadow:0 0 0 2px #c9a227,0 0 22px rgba(190,120,255,.45)}
.machtop{position:absolute;top:12px;left:14px;z-index:3;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.machk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.bgsel{display:flex;gap:5px}
.bgchip{font-family:var(--mono);font-size:10.5px;color:var(--dim);background:rgba(20,16,12,.72);border:1px solid var(--line);border-radius:8px;padding:5px 9px;cursor:pointer;transition:.12s}
.bgchip:hover{color:var(--ink);border-color:var(--v333)} .bgchip.on{color:#160f26;background:var(--v333);border-color:var(--v333);font-weight:700}
/* THE ONE YOU ARE LOOKING AT. On the 3D reactor the rods sit small on their cradles and at a slight
   angle, so "which 333 is that?" was a squint (founder: "add a corner section where the nft shows as
   image there so we know which one is selected"). Hovering a cradle puts it here, big and square on;
   with nothing hovered it holds the last rod loaded, so the panel is never an empty box. */
/* `hidden` ONLY HIDES IF NOTHING OVERRIDES display. The browser hides [hidden] with a UA rule, and any
   author `display:` beats it — so these four were setting hidden and staying on screen: the reward-weight
   box and the wallet total sat there showing dashes while signed out, and the reactor's corner card showed
   an empty frame reading "#—". The rest of this file already pairs every such class with its own
   [hidden] rule (.fgarage, .rd-you, .machdemo…); these four had been missed. */
.fsum[hidden],.ptotal[hidden],.machpick[hidden],.stage-empty[hidden]{display:none}
.machpick{position:absolute;left:14px;top:52px;z-index:4;display:flex;gap:10px;align-items:center;padding:9px;
  border:1px solid var(--line2);border-radius:14px;background:rgba(10,8,16,.82);backdrop-filter:blur(6px);
  box-shadow:0 14px 40px rgba(0,0,0,.55);pointer-events:none;max-width:290px}
.machpick .mpimg{width:96px;height:96px;border-radius:10px;overflow:hidden;background:#07050c;flex:0 0 auto;
  box-shadow:0 0 0 1px var(--line2),0 0 20px rgba(170,110,255,.28)}
.machpick .mpimg img{width:100%;height:100%;object-fit:cover;display:block}
.machpick .mpmeta{display:flex;flex-direction:column;gap:3px;min-width:0}
.machpick .mpk{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);line-height:1.45}
.machpick .mpn{font-weight:800;font-size:17px;color:var(--bone)}
@media (max-width:760px){.machpick{left:10px;top:46px;max-width:150px}.machpick .mpimg{width:62px;height:62px}}
.machhud{position:absolute;top:12px;right:14px;z-index:3;display:flex;align-items:baseline;gap:8px;background:rgba(12,9,16,.66);border:1px solid #33285a;border-radius:12px;padding:8px 12px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.machbonus{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--v333);text-shadow:0 0 18px rgba(140,90,255,.5)}
.machhudl{font-family:var(--mono);font-size:10.5px;color:var(--muted)} .machhudl b{color:var(--bone)}
/* a pill, not bare text: once the reactor is turned, a bay's stand swings through here and bare text sat on the model */
.machstatus{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;z-index:3;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--v333);pointer-events:none;padding:6px 14px;border-radius:999px;background:rgba(10,6,20,.72);border:1px solid rgba(168,120,255,.22);backdrop-filter:blur(6px)}
.machdemo{position:absolute;left:14px;bottom:36px;z-index:3;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#160f26;background:var(--molten);border-radius:6px;padding:2px 8px}
.machdemo[hidden]{display:none}
.tray{padding:14px 16px}
.trayhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.traylabel{font-family:var(--disp);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.02em}
.trayhint{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.traystrip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;min-height:96px;scrollbar-width:thin;scrollbar-color:#40306a transparent}
.chip333{position:relative;flex:0 0 auto;width:80px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border:1px solid #40306a;border-radius:12px;
  background:linear-gradient(180deg,#191233,#0e0a1c);cursor:grab;touch-action:none;user-select:none;transition:transform .1s,border-color .12s,box-shadow .15s}
.chip333:hover{transform:translateY(-3px);border-color:var(--v333);box-shadow:0 8px 20px rgba(140,90,255,.3)} .chip333:active{cursor:grabbing}
.chip333 canvas{width:60px;height:60px;display:block} .chip333 .chipimg{width:60px;height:60px;object-fit:cover;border-radius:8px;display:block}
.chip333 .chiplab{font-family:var(--mono);font-size:9.5px;color:#d9c9ff}
/* a rod the chain has not named yet: shown so the holder sees their count, never draggable (no token id to attach) */
.chip333.pending{opacity:.5;cursor:progress;animation:rodwait 1.6s ease-in-out infinite} .chip333.pending:hover{transform:none;box-shadow:none}
@keyframes rodwait{50%{opacity:.28}} @media (prefers-reduced-motion:reduce){.chip333.pending{animation:none}}
.trayretry{align-self:center;margin-left:6px;padding:9px 16px;border-radius:10px;border:1px solid var(--v333);background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.trayretry:hover{background:rgba(168,120,255,.14)}
.chip333.used{opacity:.42;cursor:pointer;border-color:var(--line2)} .chip333.used:hover{transform:none;box-shadow:none;border-color:var(--v333)}
.chip333 .chipon{position:absolute;top:5px;right:5px;font-family:var(--mono);font-size:8px;font-weight:700;color:#160f26;background:var(--ok);border-radius:5px;padding:1px 4px;text-transform:uppercase}
.chip333.otherbot{opacity:.5;cursor:pointer;border-color:var(--line2)} .chip333.otherbot:hover{transform:translateY(-2px);opacity:.72;border-color:var(--ember);box-shadow:none}
.chip333 .chipother{position:absolute;top:5px;right:5px;font-family:var(--mono);font-size:8px;font-weight:700;color:#160f08;background:var(--ember);border-radius:5px;padding:1px 4px}
.trayempty{font-family:var(--mono);font-size:12px;color:var(--muted);padding:26px 6px}
.archmsg{font-family:var(--mono);font-size:12px;color:var(--bad);min-height:1.2em;margin-top:8px}
.dragghost{position:fixed;z-index:9998;width:80px;height:80px;pointer-events:none;filter:drop-shadow(0 8px 16px rgba(140,90,255,.55));opacity:.92}
@media(max-width:760px){.machwrap{aspect-ratio:1;min-height:440px} .machtop .machk{display:none}}

/* ---- REWARDS ---- */
.ticker{overflow:hidden;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:10px 0;margin:6px 0 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .track{display:inline-flex;white-space:nowrap;animation:tick 44s linear infinite;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.ticker:hover .track{animation-play-state:paused} .ticker .track b{color:var(--ember)} .ticker .track .dot{color:var(--faint);padding:0 16px}
@keyframes tick{to{transform:translateX(-50%)}}
.cardnote{margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.rgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px;align-items:start}
.ptable{display:flex;flex-direction:column;gap:6px}
.prow{display:grid;grid-template-columns:44px minmax(0,1fr) auto 64px;gap:12px;align-items:center;padding:7px 10px 7px 7px;border:1px solid var(--line2);border-radius:12px;background:var(--ground2);cursor:pointer;transition:border-color .12s}
.prow:hover{border-color:rgba(var(--acc-rgb),.6)}
.prow img{width:44px;height:44px;border-radius:9px;object-fit:cover;background:#0c0a07;display:block}
.prow .pn{font-family:var(--mono);font-weight:700;font-size:13px} .prow .pt{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.prow .pf{font-family:var(--mono);font-size:10.5px;color:var(--dim);text-align:right;white-space:nowrap}
.prow .pw{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ember);text-align:right}
.prow.off .pw{color:var(--faint)} .prow.off img{filter:grayscale(.85) brightness(.7)}
.ptotal{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.ptotal .v{font-family:var(--disp);font-weight:700;font-size:clamp(30px,4vw,44px);color:var(--ok);text-shadow:0 0 22px rgba(99,185,126,.35);line-height:1}
.pempty{font-family:var(--mono);font-size:12.5px;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:22px 16px;text-align:center;line-height:1.7}
.pmore{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:center;margin-top:6px}
.sim .seg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:var(--ground2);border:1px solid var(--line2);border-radius:12px;padding:4px;margin:6px 0 14px}
.sim .seg button{background:transparent;border:0;color:var(--muted);font:700 12px var(--mono);padding:9px 2px;border-radius:9px;cursor:pointer;transition:.12s}
.sim .seg button:hover{color:var(--ink)} .sim .seg button.on{background:var(--ok);color:#0b1a10}
.sim .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{width:34px;height:32px;background:#15120d;border:0;color:var(--ink);font:700 15px var(--mono);cursor:pointer} .stepper button:hover{background:var(--panel2);color:var(--ok)}
.stepper output{min-width:54px;text-align:center;font:700 13px var(--mono);color:var(--ink)}
.simout{border:1px solid rgba(99,185,126,.35);border-radius:14px;background:linear-gradient(180deg,rgba(99,185,126,.10),rgba(0,0,0,.2));padding:14px 16px;text-align:center}
.simout .big{font-family:var(--disp);font-weight:700;font-size:clamp(44px,6vw,64px);line-height:1;color:var(--ok);text-shadow:0 0 28px rgba(99,185,126,.4)}
.simout .f{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:6px} .simout .c{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px} .simout .c b{color:var(--molten)}
.share{margin-top:34px}
.share-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px}
/* Share to Earn reads as a prize with three steps, not a form (founder 2026-09-19) */
.share-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.sstep{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:rgba(10,8,6,.45)}
.sstep .sn{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#160f08;font:800 12px/1 var(--disp)}
.sstep b{font-size:13px;color:var(--ink)} .sstep span:last-child{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:1 0 100%;padding-left:31px}
.crateprize{display:flex;align-items:center;gap:14px;border:1px solid rgba(255,210,122,.34);border-radius:14px;padding:13px 15px;margin:0 0 12px;
  background:linear-gradient(135deg,rgba(255,150,40,.12),rgba(255,210,122,.05) 60%,transparent)}
.crateprize .cpi{flex:0 0 auto;width:42px;height:42px;color:var(--molten)} .crateprize .cpi svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.crateprize .cpt{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink)} .crateprize .cps{font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:700px){.share-steps{grid-template-columns:1fr}}
.share-prize{margin:0 0 10px;color:var(--bone);font-size:15px}
.share-post{white-space:pre-wrap;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--dim);border:1px dashed var(--line);border-radius:12px;background:rgba(10,8,6,.5);padding:12px 14px}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.share-row input{flex:1 1 240px;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0e0c09;color:var(--ink);font:500 12.5px var(--mono)} .share-row input:focus{outline:none;border-color:var(--ok)}
.share-list{display:flex;flex-direction:column;gap:5px;margin-top:6px;max-height:190px;overflow-y:auto}
.share-item{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;padding:6px 10px;border-radius:8px;background:rgba(10,8,6,.5)}
.share-item a{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .share-item a:hover{color:var(--ink)}
.share-item .bd{flex:0 0 auto;font-weight:700;font-size:9.5px;letter-spacing:.08em;border-radius:5px;padding:1px 6px;color:var(--molten);border:1px solid rgba(255,210,122,.4)}
.share-item .bd.ok{color:#0b1a10;background:var(--ok);border-color:var(--ok)} .share-item .bd.win{color:#160f08;background:var(--molten);border-color:var(--molten)} .share-item .bd.no{color:var(--faint);border-color:var(--line)}
@media(max-width:900px){.share-grid{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0}
.stat{padding:18px 20px;border-radius:14px}
.stat .num{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.6vw,40px);color:var(--ember);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,120,30,.25);line-height:1.1}
.stat .slab2{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.rounds{margin-top:34px}
.round{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.rd-you{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:14px;align-items:center;border:1px solid rgba(99,185,126,.4);border-radius:14px;background:linear-gradient(180deg,rgba(99,185,126,.10),rgba(0,0,0,.2));padding:14px 16px;margin-bottom:12px}
.rd-you[hidden]{display:none}
.rd-you .v{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.1;color:var(--ok);text-shadow:0 0 22px rgba(99,185,126,.4)}
.rd-you .v2{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1.2;color:var(--bone)}
#rdClaim{background:linear-gradient(180deg,#8fdca6,var(--ok) 55%,#3f8f59);box-shadow:0 4px 18px rgba(99,185,126,.3),inset 0 1px 0 rgba(255,255,255,.35)}
/* the claim button is always on show: plainly a button, plainly not pressable until there is something to claim (founder 2026-09-19) */
#rdClaim:disabled{background:rgba(255,255,255,.055);color:var(--muted);border:1px dashed var(--line);box-shadow:none;opacity:1;text-shadow:none}
.rd-list{display:flex;flex-direction:column;gap:8px}
.rd-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 14px;align-items:center;border:1px solid var(--line2);border-radius:12px;background:var(--ground2);padding:10px 14px}
.rd-row .rn2{font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.rd-row .rn2 small{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;border-radius:5px;padding:1px 6px;margin-left:8px;vertical-align:middle;color:#0b1a10;background:var(--ok)} .rd-row.closed .rn2 small{background:var(--faint);color:var(--ink0)}
.rd-row .rm{font-family:var(--mono);font-size:11.5px;color:var(--dim);overflow-wrap:anywhere} .rd-row .rm b{color:var(--bone)}
.rd-row .rp{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--molten);white-space:nowrap;text-align:right}
.rd-row .rbar2{grid-column:1/-1;height:5px;border-radius:3px;background:#0a0806;overflow:hidden;position:relative}
.rd-row .rbar2 i{position:absolute;left:0;top:0;bottom:0;border-radius:3px} .rd-row .rbar2 i.c{background:rgba(99,185,126,.4)} .rd-row .rbar2 i.p{background:var(--ok)}
.rd-shares{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.rd-share{display:grid;grid-template-columns:70px 64px minmax(0,1fr) auto;gap:10px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--dim);padding:5px 10px;border-radius:8px;background:rgba(10,8,6,.5)}
.rd-share b{color:var(--bone)} .rd-share .st{font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-align:right}
.rd-share .st.claimable{color:var(--ok)} .rd-share .st.claimed{color:var(--molten)} .rd-share .st.paid a{color:var(--ok)} .rd-share .st.expired{color:var(--faint)}
.rd-empty[hidden]{display:none} .rounds .how{margin-top:16px}
@media(max-width:760px){.rd-row{grid-template-columns:minmax(0,1fr) auto} .rd-row .rn2{grid-column:1;grid-row:1} .rd-row .rp{grid-column:2;grid-row:1;font-size:20px} .rd-row .rm{grid-column:1/-1;grid-row:2} .rd-row .rbar2{grid-row:3} .rd-you{grid-template-columns:1fr 1fr} .rd-you>div:first-child,.rd-you .cta{grid-column:1/-1} .rd-share{grid-template-columns:60px 54px minmax(0,1fr)} .rd-share .st{grid-column:1/-1;text-align:left}}
.round .ri{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1px dashed rgba(99,185,126,.5);color:var(--ok);font-family:var(--disp);font-size:24px;font-weight:700}
.round .rt2{font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.03em} .round .rd{color:var(--dim);font-size:14px;max-width:760px} .round .rd b{color:var(--bone)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.how>div{border-left:2px solid rgba(99,185,126,.5);padding:2px 0 2px 14px}
.how .h1{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ok)} .how .h2{color:var(--dim);font-size:13.5px;margin-top:3px} .how .h2 b{color:var(--bone)}
@media(max-width:600px){.round{grid-template-columns:1fr} .round .ri{display:none}}
@media(max-width:900px){.rgrid{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .how{grid-template-columns:1fr} .prow{grid-template-columns:44px minmax(0,1fr) 56px} .prow .pf{display:none}}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--line2);margin-top:34px;padding:40px 0 60px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.fb-title{font-family:var(--disp);font-weight:700;font-size:24px;text-transform:uppercase} .fb-title span{color:var(--orange)}
.fb-sub{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:3px}
.foot-social{display:flex;gap:10px}
.sicon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--dim);transition:all .15s}
.sicon:hover{color:var(--ink);border-color:var(--orange);transform:translateY(-2px)} .sicon svg{width:20px;height:20px;fill:currentColor}
.contracts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px}
.contracts a[hidden]{display:none}
.contracts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.contracts a{display:block;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:rgba(10,8,6,.5);transition:border-color .12s}
.contracts a:hover{border-color:var(--orange-s)}
.contracts .ck{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .contracts .cv{font-family:var(--mono);font-size:12px;color:var(--bone);margin-top:2px}
.foot-fine{text-align:center;color:var(--faint);font-family:var(--mono);font-size:11.5px;margin-top:26px;line-height:1.7}
@media(max-width:900px){.contracts{grid-template-columns:1fr 1fr}}

/* ---- toasts ---- */
#toasts{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:min(420px,calc(100vw - 32px))}
.toast{pointer-events:auto;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ink);background:rgba(20,16,11,.96);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:11px;padding:10px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.6);animation:toastin .35s cubic-bezier(.2,1.2,.3,1);overflow-wrap:anywhere}
.toast.ok{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--bad)} .toast.out{opacity:0;transform:translateX(20px);transition:.3s}
@keyframes toastin{from{opacity:0;transform:translateY(12px) scale(.96)}}
@media(max-width:860px){#toasts{bottom:96px;left:16px;right:16px;align-items:stretch}}

@media(prefers-reduced-motion:reduce){
  #bgwash::after,.hglow,.hplinth,.ticker .track,.htitle .l,.belt::before,.belt::after,.rung.target,.cta::before{animation:none!important}
  [data-reveal]{opacity:1;transform:none} #bgfx{display:none} .htilt{transition:none} html{scroll-behavior:auto}
}

/* ---- dialogs (confirm a payment · the moment after · the robot picker) ---- */
.mhm-ov{--ma:var(--orange);position:fixed;inset:0;z-index:9990;display:grid;place-items:center;padding:18px;background:rgba(6,4,3,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:mhmfade .18s ease-out}
.mhm-ov.out{opacity:0;transition:opacity .18s}
@keyframes mhmfade{from{opacity:0}}
.mhm{position:relative;width:min(460px,100%);max-height:calc(100vh - 36px);overflow:auto;border-radius:22px;padding:26px 26px 22px;border:1px solid var(--line);
  background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--ma) 16%,transparent),transparent 70%),linear-gradient(180deg,var(--panel2),var(--panel));
  box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--ma) 30%,transparent);animation:mhmin .28s cubic-bezier(.2,1.2,.3,1)}
.mhm.wide{width:min(980px,100%)}
@keyframes mhmin{from{opacity:0;transform:translateY(16px) scale(.97)}}
.mhm-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--ground2);color:var(--dim);cursor:pointer;font-size:13px} .mhm-x:hover{color:var(--ink);border-color:var(--ma)}
.mhm-k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ma);margin-bottom:6px}
.mhm-t{font-family:var(--disp);font-weight:700;font-size:clamp(26px,4vw,34px);text-transform:uppercase;letter-spacing:.02em;line-height:1;margin:0 40px 16px 0;text-wrap:balance}
.mhm-img{display:block;width:132px;height:132px;object-fit:cover;border-radius:16px;border:1px solid var(--line);margin:0 0 16px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.mhm-body.win{text-align:center} .mhm-body.win .mhm-img{width:min(240px,70%);height:auto;aspect-ratio:1;margin:0 auto 18px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ma) 60%,transparent),0 0 70px color-mix(in srgb,var(--ma) 35%,transparent)} .mhm-body.win .mhm-rows{text-align:left}
.mhm-rows{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--ground2)}
.mhm-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 14px;font-family:var(--mono);font-size:12px;color:var(--muted)} .mhm-row+.mhm-row{border-top:1px solid var(--line2)}
.mhm-row b{color:var(--bone);font-weight:700;text-align:right;overflow-wrap:anywhere} .mhm-row.hot b{font-family:var(--disp);font-size:22px;color:var(--molten);letter-spacing:.02em} .mhm-row a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.mhm-note{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--faint);margin:12px 2px 0}
.mhm-act{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .mhm-act .cta{flex:1 1 150px}
@media(prefers-reduced-motion:reduce){.mhm,.mhm-ov{animation:none}}

/* ---- hero cockpit: the next step for the active robot + where it stands on the path ---- */
.journey{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px} .journey[hidden]{display:none}
.jstep{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:5px 11px 5px 6px;background:rgba(10,8,6,.5);transition:border-color .15s,color .15s}
.jstep:hover{color:var(--ink);border-color:var(--orange-s)}
.jstep i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--faint);display:grid;place-items:center;font-style:normal;font-size:9px;color:transparent}
.jstep.done{color:var(--bone)} .jstep.done i{background:var(--ok);border-color:var(--ok);color:#0b1a10} .jstep.now{border-color:var(--orange);color:var(--ink)} .jstep.now i{border-color:var(--orange);box-shadow:0 0 8px var(--orange)}
/* a step that is not open yet — greyed, and it never wears the "now" ring, so the ring points at the
   next thing the robot can actually do (see the tier gate in foundry-app.js) */
.jstep.soon{opacity:.38;filter:grayscale(1)}
.jstep b{color:var(--ember);font-weight:700}

/* ---- how it works ---- */
.how4{padding:clamp(36px,6vh,64px) 0 0}
.how4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:hw}
.hw{position:relative;display:block;color:var(--ink);border:1px solid var(--line2);border-radius:18px;padding:20px 20px 18px;background:linear-gradient(180deg,rgba(36,29,21,.7),rgba(20,16,11,.5));transition:transform .15s,border-color .15s,box-shadow .2s;overflow:hidden}
.hw:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.hw .hwn{position:absolute;right:12px;top:4px;font-family:var(--disp);font-weight:700;font-size:72px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07)}
.hw .hwi{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);margin-bottom:14px}
.hw .hwi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hw b{display:block;font-family:var(--disp);font-weight:700;font-size:21px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.hw p{margin:0;color:var(--dim);font-size:13.5px;line-height:1.55} .hw em{font-style:normal;color:var(--bone);font-weight:700}
@media(max-width:1000px){.how4-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.how4-grid{grid-template-columns:1fr}}

/* ---- bay atmosphere: a faint blueprint grid in the bay's accent, fading out from the top ---- */
section.bay::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(var(--acc-rgb),.055) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--acc-rgb),.055) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(90% 60% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(90% 60% at 50% 0%,#000,transparent 75%)}

/* ---- skeletons ---- */
.skel{border-radius:12px;height:54px;background:linear-gradient(90deg,var(--ground2) 25%,#1b160f 50%,var(--ground2) 75%);background-size:200% 100%;animation:skel 1.4s linear infinite;border:1px solid var(--line2)}
@keyframes skel{to{background-position:-200% 0}}

/* ---- robot picker ---- */
.rp-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.rp-bar input{flex:1 1 140px;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0e0c09;color:var(--ink);font:500 13px var(--mono)} .rp-bar input:focus{outline:none;border-color:var(--orange)}
.rp-chip{font-family:var(--mono);font-size:11px;color:var(--dim);background:var(--ground2);border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer} .rp-chip.on{background:var(--orange);border-color:var(--orange);color:#160f08;font-weight:700}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;max-height:min(58vh,560px);overflow-y:auto;padding:2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rp-grid .rtile{width:auto} .rp-none{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding:30px 6px;text-align:center;grid-column:1/-1}
.rp-count{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:auto}
.railall{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--molten);background:transparent;border:1px dashed var(--line);border-radius:12px;padding:10px 6px;cursor:pointer;flex:0 0 auto;transition:border-color .12s,color .12s} .railall:hover{border-color:var(--acc);color:var(--ink)}
.rrailstrip .railall{min-width:96px}

/* ---- FAQ ---- */
.faq{padding:clamp(40px,7vh,80px) 0 10px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:22px;align-items:start}
.faq details{border:1px solid var(--line2);border-radius:14px;background:rgba(20,16,11,.6);transition:border-color .15s} .faq details[open]{border-color:var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.faq summary{list-style:none;cursor:pointer;padding:15px 44px 15px 18px;font-weight:800;font-size:15px;position:relative} .faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:20px;color:var(--molten);transition:transform .2s} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:0;padding:0 18px 16px;color:var(--dim);font-size:14px;line-height:1.65}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr}}


/* ===================================================================================================
   FURNACE PASS — 2026-09-20. Depth and motion, bought with CSS rather than with frames.
   Every rule here is additive and guarded: an engine that does not know a feature simply keeps the
   page as it was. Nothing in this block touches the OpenSea animation scene.
   =================================================================================================== */

/* -- 1. The section numerals catch the light -------------------------------------------------------
   They were a flat 13% outline. Now a slow ember sweep crosses them, like hot metal seen from an angle.
   @property is what makes the angle animatable at all — an unregistered custom property cannot tween. */
@property --sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
@supports (background-clip:text) and (color:color-mix(in oklab,red,blue)){
  section.bay::before{
    -webkit-text-stroke:0;
    color:transparent;
    background-image:conic-gradient(from var(--sweep),
      rgba(var(--acc-rgb),.05) 0deg, rgba(var(--acc-rgb),.19) 70deg,
      rgba(255,210,122,.30) 110deg, rgba(var(--acc-rgb),.19) 150deg, rgba(var(--acc-rgb),.05) 240deg);
    -webkit-background-clip:text;background-clip:text;
    animation:sweep 18s linear infinite;
  }
}
@keyframes sweep{to{--sweep:360deg}}

/* -- 2. Reveals move to the compositor -------------------------------------------------------------
   The JS IntersectionObserver still runs for engines without scroll timelines. Where they exist, the
   reveal is driven by the scroll itself, off the main thread — which matters on a page that is also
   running a three.js loop. `.in` is left alone so the two can never fight. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    [data-reveal]{
      opacity:1;transform:none;transition:none;
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 26%;
    }
    @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  }
}

/* -- 3. The conveyor dissolves instead of stopping --------------------------------------------------
   A stack of masked blur layers reads as depth of field; a single hard edge reads as a crop. Kept to
   one narrow strip — backdrop-filter costs a compositor readback of everything behind it every frame,
   so it must never go full-bleed over the live canvas. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .beltwrap{position:relative}
  .beltwrap::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:54px;pointer-events:none;z-index:3;
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 78%);
            mask-image:linear-gradient(to bottom,transparent,#000 78%);
  }
}
@media (prefers-reduced-transparency:reduce){ .beltwrap::after{display:none} }

/* -- 4. Heat haze over the ember wash ---------------------------------------------------------------
   Two counter-drifting noise fields at very low opacity. Enough to stop the bottom glow reading as a
   flat radial gradient, cheap enough to be invisible in a frame profile. */
#bgwash::before{
  content:"";position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:
    radial-gradient(38% 26% at 22% 92%,rgba(255,120,30,.12),transparent 70%),
    radial-gradient(32% 22% at 78% 96%,rgba(255,180,58,.09),transparent 72%);
  animation:haze 23s ease-in-out infinite alternate;
}
@keyframes haze{from{transform:translate3d(-2.2%,0,0) scale(1.02)}to{transform:translate3d(2.2%,-1.4%,0) scale(1.07)}}

/* -- 5. Display type sits flush --------------------------------------------------------------------
   Trims the font's built-in leading above the caps and below the baseline, so big stamped headings
   align to their box instead of floating inside it. Ignored where unsupported: spacing stays as it is. */
@supports (text-box:trim-both cap alphabetic){
  .htitle,.slab h2,.bayh h2{text-box:trim-both cap alphabetic}
}

/* -- 6. Below the fold costs nothing until it is near ------------------------------------------------
   contain-intrinsic-size is not optional here: without a placeholder height the scrollbar jumps and
   the scroll-spy lies. `auto` lets the real height take over once a section has been rendered once. */
@supports (content-visibility:auto){
  section.bay,section.faq{content-visibility:auto;contain-intrinsic-size:auto 900px}
}

/* -- 7. Reduced motion wins over all of the above --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  section.bay::before{animation:none}
  #bgwash::before{animation:none}
  [data-reveal]{animation:none!important;opacity:1;transform:none}
}