/* ============================================================
   FACTORY SECOND ($F2ND) — factorysecond.vercel.app
   Ground: saturated UV violet (the factory light).
   Hue camps — violet = the room, steel = the machines,
   orange = the reject chute AND every action, red = stamps and
   verdicts only, bone = the duplicates, blue = him,
   holo = authenticity and nothing else.
   ============================================================ */

:root{
  /* --- the room ------------------------------------------- */
  --uv:        #25105E;
  --uv-deep:   #1A0A44;
  --uv-ink:    #12063210;
  --uv-panel:  #2E1470;
  --uv-raise:  #3A1D92;
  --uv-line:   #4C2CA8;
  --uv-glow:   #6D2FEA;

  /* --- the machines --------------------------------------- */
  --steel:     #8A80A0;
  --steel-lo:  #5C5470;
  --steel-hi:  #C3BBD4;
  --chrome: linear-gradient(160deg,#D8D2E6 0%,#9C93B4 38%,#6A6182 62%,#B3AAC6 100%);

  /* --- the chute (= every action) ------------------------- */
  --orange:    #F26B1D;
  --orange-hi: #FF8A3D;
  --orange-lo: #B8410A;

  /* --- the stamp (verdicts only) -------------------------- */
  --red:       #D8291A;
  --red-lo:    #96190E;

  /* --- the duplicates ------------------------------------- */
  --bone:      #E3CBAE;
  --bone-lo:   #C6A882;
  --bone-dk:   #8C7358;

  /* --- him ------------------------------------------------ */
  --blue:      #0B5EA8;
  --blue-hi:   #2E96E0;

  /* --- text ----------------------------------------------- */
  --paper:     #F2EADD;
  --paper-dim: #B9A9D2;
  --paper-far: #8877A8;

  --holo: linear-gradient(var(--holo-a,112deg),
    #7CF3D0 0%,#59C8F5 13%,#9B7BF7 26%,#F26BC4 39%,
    #FFD36B 52%,#8DF6A8 66%,#5FD0F2 80%,#C77BF7 100%);

  --dsp: "Rubik Mono One", "Arial Black", system-ui, sans-serif;
  --body:"Lexend", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:"Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1200px;
  --pad: clamp(18px, 4.4vw, 56px);
  --r: 4px;
}

/* ------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--uv-deep);color:var(--paper);
  font:400 clamp(15px,1.02vw,17px)/1.68 var(--body);
  overflow-x:clip;
  background-image:
    radial-gradient(120% 70% at 50% -10%, #3A1D9255 0%, transparent 62%),
    radial-gradient(90% 60% at 100% 100%, #6D2FEA22 0%, transparent 60%);
  background-attachment:fixed;
}
img,svg,canvas{max-width:100%;display:block}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-hi)}
h1,h2,h3{margin:0;font-family:var(--dsp);font-weight:400;line-height:1.02;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--red);color:var(--bone)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}
:target{scroll-margin-top:92px}
section{scroll-margin-top:78px}

/* steel-rail scrollbar */
*{scrollbar-color:var(--steel-lo) var(--uv-deep);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--uv-deep)}
::-webkit-scrollbar-thumb{background:var(--chrome);border:2px solid var(--uv-deep)}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.mono{font-family:var(--mono)}

/* ------------------------------------------------- preloader */
.pl-blank{width:66px;height:78px;border-radius:34px 34px 12px 12px;
  background:linear-gradient(178deg,var(--bone),var(--bone-lo));
  position:relative;overflow:hidden;box-shadow:0 0 0 1px #00000044,0 18px 40px #0a0322}
.pl-blank::after{content:"";position:absolute;left:50%;top:56%;width:26px;height:14px;
  transform:translateX(-50%);border-radius:3px;
  background:repeating-linear-gradient(90deg,#2a2118 0 2px,transparent 2px 4px)}
.pl-scan{position:absolute;left:-10%;right:-10%;height:9px;background:var(--orange);
  filter:blur(2px);opacity:.9;animation:plscan 1.15s ease-in-out infinite}
@keyframes plscan{0%{top:-8%}50%{top:96%}100%{top:-8%}}
#plTxt{color:var(--paper-dim)}
#preloader.done .pl-scan{animation:none}
.pl-stamp{position:fixed;left:50%;top:50%;translate:-50% -50%;z-index:10000;
  font:400 clamp(26px,7vw,58px)/1 var(--dsp);color:var(--red);letter-spacing:.02em;
  border:6px solid var(--red);padding:.16em .28em;border-radius:6px;rotate:-9deg;
  opacity:0;pointer-events:none;text-shadow:0 0 18px #d8291a55}
.pl-stamp.hit{animation:stampHit .62s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes stampHit{
  0%{opacity:0;scale:2.4;filter:blur(6px)}
  38%{opacity:1;scale:.94;filter:blur(0)}
  60%{scale:1.02}
  100%{opacity:0;scale:1}
}

/* --------------------------------------------- grain + rails */
#grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

#scrollRail{position:fixed;top:0;left:0;right:0;height:4px;z-index:70;background:#12063a}
#scrollBar{display:block;height:100%;width:0;background:var(--orange);
  background-image:repeating-linear-gradient(115deg,#00000033 0 6px,transparent 6px 13px);
  box-shadow:0 0 12px #f26b1daa}

#sweep{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0}
#sweep.on{opacity:1;background:linear-gradient(180deg,transparent 0%,#6D2FEA00 42%,
  #FF8A3D66 48%,#FFFFFFcc 50%,#FF8A3D66 52%,#6D2FEA00 58%,transparent 100%);
  background-size:100% 260%;animation:sweepGo 1.5s cubic-bezier(.5,0,.5,1) forwards}
@keyframes sweepGo{from{background-position:0 -160%}to{background-position:0 160%}}

#toast{position:fixed;left:50%;bottom:26px;translate:-50% 22px;z-index:90;opacity:0;
  pointer-events:none;transition:opacity .28s,translate .28s;
  background:var(--uv-panel);border:1px solid var(--uv-line);color:var(--paper);
  font:500 12.5px/1 var(--mono);letter-spacing:.12em;padding:13px 18px;border-radius:3px;
  box-shadow:0 18px 46px #05001e99;max-width:min(90vw,520px);text-align:center}
#toast.on{opacity:1;translate:-50% 0}

/* -------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:75;display:flex;align-items:center;gap:18px;
  padding:11px var(--pad);background:#1A0A44dd;border-bottom:1px solid var(--uv-line)}
@supports (backdrop-filter:blur(8px)){.nav{backdrop-filter:blur(10px) saturate(1.2)}}
.nav-mark{display:flex;align-items:center;gap:11px;color:var(--paper);flex:0 0 auto}
.nav-mark img{border-radius:3px;border:1px solid var(--uv-line)}
.nav-mark span{font:400 13px/1 var(--dsp);letter-spacing:-.01em}
.nav-mark b{color:var(--orange);font-weight:400}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-links a{font:500 11.5px/1 var(--mono);letter-spacing:.13em;color:var(--paper-dim);
  padding:9px 11px;border-radius:3px;transition:color .18s,background .18s}
.nav-links a:hover{color:var(--paper);background:#ffffff0e}
.nav-cta{color:var(--uv-deep)!important;background:var(--orange);font-weight:700!important;
  box-shadow:0 6px 18px #f26b1d44}
.nav-cta:hover{background:var(--orange-hi)!important;color:var(--uv-deep)!important}
.burger{display:none;width:42px;height:34px;flex-direction:column;justify-content:center;
  gap:5px;margin-left:auto;padding:0 8px;border:1px solid var(--uv-line);border-radius:3px}
.burger i{display:block;height:2px;background:var(--paper);transition:transform .24s,opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:flex}
  /* absolute, NOT fixed: the nav's backdrop-filter would become its
     containing block and the panel would leak a sliver into view. */
  .nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:8px var(--pad) 16px;
    background:#1A0A44f7;border-bottom:1px solid var(--uv-line);box-shadow:0 22px 40px #05001e88}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 8px;font-size:12.5px;border-bottom:1px solid #ffffff10}
  .nav-cta{margin-top:12px;text-align:center;border-bottom:0!important}
}

/* ------------------------------------------------------- bits */
.kick{margin:0 0 14px;font:500 11px/1.6 var(--mono);letter-spacing:.2em;
  color:var(--paper-far);text-transform:uppercase}
.kick .dot{display:inline-block;width:7px;height:7px;margin-right:10px;vertical-align:middle;
  background:var(--orange);border-radius:50%;box-shadow:0 0 0 4px #f26b1d26}
.kick b{color:var(--bone);font-weight:700}
.two{font-family:var(--mono);font-weight:700;color:var(--bone)}
.bars{display:block;height:20px;
  background:repeating-linear-gradient(90deg,
    var(--bone-dk) 0 2px,transparent 2px 4px,var(--bone-dk) 4px 5px,transparent 5px 9px,
    var(--bone-dk) 9px 12px,transparent 12px 14px,var(--bone-dk) 14px 15px,transparent 15px 18px)}

.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 19px;border-radius:3px;
  font:700 12px/1 var(--mono);letter-spacing:.13em;color:var(--paper);
  border:1px solid var(--uv-line);background:#ffffff0a;
  transition:transform .16s,background .18s,border-color .18s,box-shadow .18s}
.btn img{opacity:.92}
.btn:hover{transform:translateY(-2px);background:#ffffff16;border-color:var(--steel);color:var(--paper)}
.btn-o{background:var(--orange);color:#2B0A00;border-color:var(--orange-hi);
  box-shadow:0 10px 26px #f26b1d3d}
.btn-o img{filter:brightness(0) saturate(0)}
.btn-o:hover{background:var(--orange-hi);color:#2B0A00}
.btn-ghost{background:transparent;color:var(--paper-dim)}
.btn[disabled]{opacity:.42;pointer-events:none}
.cta{display:flex;flex-wrap:wrap;gap:11px;margin:22px 0 0}

.rv{opacity:0;transform:translateY(20px);transition:opacity .62s cubic-bezier(.2,.7,.3,1),
  transform .62s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

.sec{padding:clamp(64px,9vw,120px) 0;position:relative}
.sec-head{max-width:60ch;margin:0 0 clamp(30px,4vw,52px)}
.sec-head h2{font-size:clamp(34px,5.6vw,72px);color:var(--bone)}
.sec-sub{margin:16px 0 0;color:var(--paper-dim);font-size:clamp(15px,1.15vw,17.5px);max-width:56ch}
.sec-sub b{color:var(--bone)}

/* ====================================================== HERO */
.hero{position:relative;min-height:min(94vh,900px);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(46px,7vw,86px) 0 clamp(70px,7vw,96px);overflow:clip}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:120%;height:100%;object-fit:cover;object-position:36% 50%;
  transform:translate3d(0,var(--par,0px),0) scale(1.06);filter:saturate(1.05) contrast(1.02)}
.hero-uv{position:absolute;inset:0;
  background:
    linear-gradient(180deg,#1A0A44e8 0%,#25105Ec4 34%,#1A0A44f0 84%,var(--uv-deep) 100%),
    linear-gradient(90deg,#1A0A44f2 0%,#1A0A4488 46%,transparent 78%)}
.hero-scan{position:absolute;inset:0;opacity:.3;
  background:repeating-linear-gradient(0deg,#00000055 0 1px,transparent 1px 4px)}

.hero-in{position:relative;z-index:1;width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(26px,4vw,60px);
  align-items:center}

.wordmark{margin:0 0 18px;font-size:clamp(38px,8.1vw,104px);letter-spacing:-.02em}
.wm-line{display:block;color:var(--bone);position:relative;
  /* the duplicate stack: three failed copies receding behind the real one */
  text-shadow:
    calc(var(--fx,1) * 4px)  calc(var(--fy,1) * 4px)  0 #4E27BE,
    calc(var(--fx,1) * 9px)  calc(var(--fy,1) * 9px)  0 #3A1D92cc,
    calc(var(--fx,1) * 15px) calc(var(--fy,1) * 15px) 0 #2E14704d,
    calc(var(--fx,1) * 22px) calc(var(--fy,1) * 22px) 0 #2E147026;
  transition:text-shadow .5s cubic-bezier(.2,.7,.3,1)}
.hero.fanning .wm-line{transition:text-shadow .12s linear}
.wm-line+.wm-line{color:var(--orange);
  text-shadow:
    calc(var(--fx,1) * -4px)  calc(var(--fy,1) * 4px)  0 #4E27BE,
    calc(var(--fx,1) * -9px)  calc(var(--fy,1) * 9px)  0 #3A1D92cc,
    calc(var(--fx,1) * -15px) calc(var(--fy,1) * 15px) 0 #2E14704d,
    calc(var(--fx,1) * -22px) calc(var(--fy,1) * 22px) 0 #2E147026}

.lede{font:600 clamp(17px,1.7vw,23px)/1.42 var(--body);color:var(--paper);margin:0 0 10px}
.sub{color:var(--paper-dim);max-width:48ch;margin:0 0 24px}

.ca{display:inline-flex;align-items:stretch;gap:0;max-width:100%;cursor:pointer;
  border:1px solid var(--uv-line);border-radius:3px;background:#12063a99;overflow:hidden;
  transition:border-color .18s,box-shadow .18s}
.ca:hover{border-color:var(--orange);box-shadow:0 0 0 3px #f26b1d1f}
.ca-k{padding:11px 13px;background:var(--uv-raise);color:var(--bone);
  font:700 11px/1.4 var(--mono);letter-spacing:.18em;display:flex;align-items:center}
.ca-v{padding:11px 14px;font:500 12.5px/1.4 var(--mono);color:var(--paper);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ca-c{padding:11px 13px;background:#ffffff0c;color:var(--orange);border-left:1px solid var(--uv-line);
  font:700 11px/1.4 var(--mono);letter-spacing:.14em;display:flex;align-items:center}

.readout{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.readout li{flex:1 1 150px;min-width:0;padding:12px 14px;border-radius:3px;
  border:1px solid var(--uv-line);background:#12063a80}
.readout b{display:block;font:700 clamp(19px,2.1vw,27px)/1.1 var(--mono);color:var(--bone)}
.readout b.zero{color:var(--orange)}
.readout b.miss{color:var(--red);font-size:clamp(15px,1.5vw,19px);letter-spacing:.04em}
.readout span{display:block;margin-top:5px;font:500 10px/1.4 var(--mono);letter-spacing:.17em;
  color:var(--paper-far)}

/* --- the plate + the hanging authenticity tag --- */
.hero-plate{position:relative;display:flex;justify-content:center}
.plate{position:relative;width:min(100%,420px);padding:14px;border-radius:6px;
  background:var(--chrome);box-shadow:0 30px 70px #05001eaa,inset 0 1px 0 #ffffff70}
.plate img{width:100%;height:auto;border-radius:3px;border:1px solid #00000055;
  box-shadow:0 8px 24px #00000066}
.plate-bolt{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#F4F1FA,#6A6182 62%,#3A3550);
  box-shadow:0 1px 2px #00000088}
.plate-bolt.tl{left:6px;top:6px}.plate-bolt.tr{right:6px;top:6px}
.plate-bolt.bl{left:6px;bottom:6px}.plate-bolt.br{right:6px;bottom:6px}
.plate-id{position:absolute;left:14px;bottom:-11px;background:var(--uv-deep);
  border:1px solid var(--uv-line);color:var(--paper-far);border-radius:2px;
  font:500 9.5px/1 var(--mono);letter-spacing:.2em;padding:5px 8px}

.tagwrap{position:absolute;right:-6px;top:-14px;width:132px;height:210px;
  transform-origin:50% 8px;pointer-events:none;z-index:3}
.tag-wire{position:absolute;left:50%;top:0;translate:-50% 0;width:4px;height:54px;overflow:visible}
.tag-wire line{stroke:var(--steel-hi);stroke-width:1.6}
.holotag{position:absolute;left:50%;top:48px;translate:-50% 0;width:112px;padding:11px 10px 10px;
  border-radius:5px;pointer-events:auto;cursor:grab;touch-action:none;
  background:var(--holo);
  box-shadow:0 12px 30px #05001e99,inset 0 0 0 1px #ffffff66;
  transform:rotate(var(--tagrot,-7deg));transform-origin:50% -46px}
.holotag:active{cursor:grabbing}
.holotag.off{opacity:.25;filter:grayscale(1)}
.holo-sheen{position:absolute;inset:0;border-radius:5px;pointer-events:none;
  background:repeating-linear-gradient(var(--holo-a,112deg),#ffffff00 0 3px,#ffffff59 3px 4px);
  mix-blend-mode:overlay}
.holo-in{position:relative;display:block;text-align:center;color:#160B2E;
  font-family:var(--mono);text-shadow:0 1px 0 #ffffff8c}
.holo-in b{display:block;font-size:10px;letter-spacing:.19em}
.holo-in em{display:block;font-style:normal;font-size:20px;font-weight:700;margin:2px 0 6px;color:#160B2E}
.holo-in .bars{height:16px;margin:0 auto 6px;width:78%;opacity:.72}
.holo-in i{display:block;font-style:normal;font-size:8.5px;letter-spacing:.2em;font-weight:700}

.scroll-hint{position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  width:min(100% - var(--pad)*2,var(--wrap));margin:clamp(30px,4vw,54px) auto 0;
  font:500 10.5px/1 var(--mono);letter-spacing:.22em;color:var(--paper-far)}
.scroll-hint span{width:34px;height:1px;background:var(--orange);position:relative}
.scroll-hint span::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;
  border-right:1px solid var(--orange);border-bottom:1px solid var(--orange);rotate:-45deg}
.scroll-hint:hover{color:var(--paper)}

@media (max-width:960px){
  .hero-in{grid-template-columns:1fr}
  .hero-plate{order:-1;margin-bottom:12px}
  .plate{width:min(100%,320px)}
  .tagwrap{right:-2px;top:-10px;width:104px;height:170px}
  .holotag{width:92px}
}

/* =================================================== MARQUEE */
/* the band IS the joke: every repeat is one photocopy worse. */
.band{position:relative;overflow:hidden;border-block:1px solid var(--uv-line);
  background:linear-gradient(180deg,#12063a,#1e0b52);padding:15px 0}
.band-track{display:flex;align-items:center;gap:0;white-space:nowrap;width:max-content;
  will-change:transform}
.band-item{display:inline-flex;align-items:center;gap:20px;padding-right:20px;
  font:400 clamp(19px,2.5vw,32px)/1 var(--dsp);color:var(--bone);letter-spacing:-.01em}
.band-item .sep{color:var(--orange);font-family:var(--mono);font-size:.62em;letter-spacing:.1em}
.band-item[data-g="1"]{color:#D8BFA2;opacity:.9;filter:blur(.25px) contrast(.94)}
.band-item[data-g="2"]{color:#C4AC92;opacity:.78;filter:blur(.6px) contrast(.86)}
.band-item[data-g="3"]{color:#A9947F;opacity:.62;filter:blur(1.1px) contrast(.76)}
.band-item[data-g="4"]{color:#8B7A6B;opacity:.46;filter:blur(1.9px) contrast(.66)}
.band-item[data-g="5"]{color:#6E6157;opacity:.3;filter:blur(3.2px) contrast(.56)}
.band-item[data-g="5"] .sep,.band-item[data-g="4"] .sep{color:#7c5a3f}

/* ======================================================= JAM */
.sec-jam{background:linear-gradient(180deg,var(--uv-deep),#200d52 55%,var(--uv-deep))}
.jam-grid{display:grid;grid-template-columns:76px minmax(0,1fr);gap:clamp(16px,3vw,38px)}
.rail{position:relative}
.rail-line{position:absolute;left:50%;top:8px;bottom:26%;width:8px;translate:-50% 0;
  background:var(--chrome);border-radius:4px;box-shadow:0 0 0 1px #00000055}
.rail-line::after{content:"";position:absolute;inset:0;border-radius:4px;
  background:repeating-linear-gradient(180deg,#00000000 0 16px,#00000055 16px 19px)}
.rail-chute{position:absolute;left:50%;bottom:0;height:27%;width:20px;translate:-50% 0;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 34%,var(--orange-lo));
  box-shadow:0 0 26px #f26b1d55;clip-path:polygon(0 0,100% 0,72% 100%,28% 100%)}
.rail-unit{position:absolute;left:50%;top:var(--u,0%);width:26px;height:31px;translate:-50% 0;
  border-radius:13px 13px 5px 5px;background:linear-gradient(178deg,var(--bone),var(--bone-lo));
  box-shadow:0 6px 16px #05001eaa,inset 0 -3px 0 #0000001f}
.rail-unit::after{content:"";position:absolute;left:50%;top:56%;width:12px;height:6px;
  translate:-50% 0;background:repeating-linear-gradient(90deg,#2a2118 0 1px,transparent 1px 2.5px)}

.beats{display:grid;gap:clamp(14px,2vw,22px)}
.beat{position:relative;padding:clamp(20px,2.4vw,30px);border-radius:5px;
  border:1px solid var(--uv-line);background:#12063a8f;
  box-shadow:inset 0 1px 0 #ffffff0f}
.beat-n{margin:0 0 6px;font:700 11px/1 var(--mono);letter-spacing:.24em;color:var(--paper-far)}
.beat h3{font-size:clamp(21px,2.6vw,31px);color:var(--bone);margin:0 0 10px}
.beat p{color:var(--paper-dim);margin:0}
.beat-tag{margin-top:12px!important;display:inline-block;padding:6px 10px;border-radius:2px;
  background:#ffffff0d;border:1px solid var(--uv-line);
  font:500 10px/1 var(--mono);letter-spacing:.17em;color:var(--steel-hi)}
.beat-o{border-color:var(--orange-lo);background:#3a170a5c}
.beat-o h3{color:var(--orange)}
.beat-o .beat-tag{border-color:var(--orange-lo);color:var(--orange-hi);background:#f26b1d14}

@media (max-width:700px){
  .jam-grid{grid-template-columns:34px minmax(0,1fr)}
  .rail-line,.rail-chute{width:6px}
}

/* ================================================ DUPLICATOR */
.sec-dupe{background:
  linear-gradient(180deg,var(--uv-deep) 0%,#2a1168 40%,#2a1168 60%,var(--uv-deep) 100%)}
.machine{border:1px solid var(--uv-line);border-radius:7px;overflow:hidden;
  background:linear-gradient(180deg,#1c0a4c,#160840);box-shadow:0 40px 90px #05001e88}
.mch-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(10px,2vw,26px);
  align-items:center;padding:clamp(16px,2.6vw,30px);
  background:
    linear-gradient(180deg,#ffffff09,transparent 40%),
    repeating-linear-gradient(90deg,#ffffff05 0 2px,transparent 2px 7px)}
.mch-cell{margin:0;position:relative}
.mch-cell figcaption{font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--paper-far);
  margin:0 0 9px}
.mch-cell figcaption b{color:var(--bone);font-weight:700}
.mch-cell canvas{width:100%;height:auto;aspect-ratio:1;border-radius:4px;
  border:1px solid var(--uv-line);background:#0d0430;
  box-shadow:inset 0 0 30px #00000066}
.mch-out{position:relative}
.mch-fx{position:absolute;inset:auto 0 0 0;top:22px;width:100%;height:auto;aspect-ratio:1;
  pointer-events:none;border:0!important;background:none!important;box-shadow:none!important}
.mch-stamp{position:absolute;left:50%;top:56%;translate:-50% -50%;rotate:-11deg;
  font:400 clamp(15px,2.4vw,27px)/1 var(--dsp);letter-spacing:.01em;padding:.14em .26em;
  border:5px solid currentColor;border-radius:5px;pointer-events:none;
  color:var(--red);text-shadow:0 0 14px #00000066;background:#1a0a4433;
  animation:stampHit2 .5s cubic-bezier(.2,1.5,.4,1) both}
.mch-stamp.pass{color:#2FD06B}
@keyframes stampHit2{0%{opacity:0;scale:2.2}55%{opacity:1;scale:.95}100%{opacity:1;scale:1}}
.mch-holo{position:absolute;right:9px;bottom:9px;width:52px;height:34px;border-radius:4px;
  background:var(--holo);box-shadow:0 6px 16px #05001e99,inset 0 0 0 1px #ffffff66;
  rotate:-8deg;pointer-events:none}

.mch-arrow{position:relative;align-self:stretch;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;margin-top:19px;padding:18px 12px;
  border-radius:4px;border:1px solid var(--uv-line);
  background:linear-gradient(180deg,#2a2244,#161036)}
.mch-arrow::after{content:"";width:0;height:0;margin-top:5px;border-left:13px solid var(--orange);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
.mch-roll{width:20px;height:20px;border-radius:50%;background:var(--chrome);
  box-shadow:0 0 0 1px #00000055,inset 0 0 0 4px #ffffff26;animation:roll 1.4s linear infinite}
.mch-roll:nth-child(2){animation-delay:-.46s}
.mch-roll:nth-child(3){animation-delay:-.93s}
@keyframes roll{to{transform:rotate(360deg)}}
.mch-roll::after{content:"";position:absolute;inset:0}
.mch-press{font:500 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--paper-far);
  padding:5px 7px;border:1px solid var(--uv-line);border-radius:2px;margin-top:4px}
.mch-press.on{color:var(--uv-deep);background:var(--orange);border-color:var(--orange)}

.mch-console{padding:clamp(16px,2.6vw,28px);border-top:1px solid var(--uv-line);
  background:#12063a;display:grid;gap:clamp(14px,2vw,20px)}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font:500 10.5px/1 var(--mono);letter-spacing:.18em;color:var(--paper-far)}
.meter-head b{font-size:clamp(18px,2.2vw,26px);color:var(--bone);letter-spacing:0}
.meter-rail{position:relative;height:26px;margin:10px 0 8px;border-radius:3px;
  background:linear-gradient(90deg,#5b1a12 0%,#5b1a12 var(--z1,22%),
    #14522f var(--z1,22%),#14522f var(--z2,38%),#3a2a10 var(--z2,38%),#3a2a10 100%);
  border:1px solid var(--uv-line);overflow:hidden}
.meter-zone{position:absolute;top:0;bottom:0;left:var(--z1,22%);width:calc(var(--z2,38%) - var(--z1,22%));
  background:repeating-linear-gradient(115deg,#2FD06B33 0 5px,transparent 5px 10px);
  box-shadow:inset 0 0 0 1px #2FD06B77}
.meter-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#ffffff12}
.meter-needle{position:absolute;top:-4px;bottom:-4px;left:0;width:3px;background:var(--bone);
  box-shadow:0 0 10px #e3cbaecc;transition:left .18s cubic-bezier(.2,.7,.3,1)}
.meter-legend{display:flex;justify-content:space-between;gap:8px;
  font:700 9.5px/1.4 var(--mono);letter-spacing:.13em}
.lg-dupe{color:#E4796C}.lg-band{color:#5EE39A}.lg-slurry{color:#C8A55E}

.mch-ctrl{display:flex;flex-wrap:wrap;gap:11px;align-items:stretch}
.lever{position:relative;flex:1 1 260px;min-height:70px;border-radius:5px;overflow:hidden;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 46%,var(--orange-lo));
  color:#2B0A00;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;box-shadow:0 12px 30px #f26b1d3d,inset 0 1px 0 #ffffff6b;
  touch-action:none;user-select:none;transition:transform .1s,box-shadow .16s}
.lever-k{font:400 20px/1 var(--dsp);letter-spacing:-.01em}
.lever-v{font:700 10.5px/1 var(--mono);letter-spacing:.22em}
.lever-bar{position:absolute;left:0;bottom:0;height:5px;width:0;background:#2B0A00aa}
.lever.on{transform:translateY(3px);box-shadow:0 4px 12px #f26b1d55,inset 0 2px 8px #00000055}
.btn-eject{border-color:var(--steel-lo);background:#ffffff12}
.mch-status{margin:0;padding:13px 15px;border-radius:4px;border:1px solid var(--uv-line);
  background:#0d0430;font:500 12.5px/1.55 var(--mono);color:var(--paper-dim);letter-spacing:.03em}
.mch-status.warn{border-color:var(--red-lo);color:#F0A99F;background:#3a0e0933}
.mch-status.good{border-color:#1e7a48;color:#8DF0B6;background:#0d3a2333}
.mch-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin:0}
.mch-stats div{padding:11px 12px;border-radius:3px;border:1px solid var(--uv-line);background:#0d0430}
.mch-stats dt{font:500 9.5px/1.4 var(--mono);letter-spacing:.17em;color:var(--paper-far)}
.mch-stats dd{margin:5px 0 0;font:700 19px/1 var(--mono);color:var(--bone)}

@media (max-width:820px){
  .mch-stage{grid-template-columns:1fr;gap:14px}
  .mch-arrow{flex-direction:row;padding:0;justify-content:center}
  .mch-press{margin:0}
}

/* ===================================================== CHUTE */
.chute-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(18px,3vw,40px);align-items:start}
.blanks{display:flex;flex-wrap:wrap;gap:10px}
.blank{position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px 11px 11px;
  border-radius:4px;cursor:pointer;text-align:left;
  background:linear-gradient(178deg,var(--bone),var(--bone-lo));color:#2E2418;
  box-shadow:0 8px 20px #05001e66,inset 0 1px 0 #ffffff8c;
  transition:transform .18s,filter .18s,opacity .3s}
.blank:hover{transform:translateY(-3px) rotate(-1deg)}
.blank .pip{width:20px;height:24px;flex:0 0 auto;border-radius:10px 10px 3px 3px;
  background:linear-gradient(178deg,#fff8ec,#cbb392);box-shadow:inset 0 -2px 0 #00000018}
.blank span{font:700 12px/1.25 var(--mono);letter-spacing:.06em}
.blank i{display:block;font-style:normal;font-size:9px;letter-spacing:.16em;opacity:.6;margin-top:3px}
.blank.gone{animation:chuteDrop .7s cubic-bezier(.5,0,.85,.4) forwards;pointer-events:none}
@keyframes chuteDrop{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  35%{transform:translate(18px,-12px) rotate(9deg);opacity:1}
  100%{transform:translate(120px,190px) rotate(64deg);opacity:0}
}
.chute-box{padding:clamp(18px,2.4vw,26px);border-radius:6px;border:1px solid var(--orange-lo);
  background:linear-gradient(180deg,#3a170a66,#12063a)}
.chute-mouth{position:relative;height:210px;margin-bottom:18px;overflow:hidden;
  background:linear-gradient(178deg,var(--orange-hi),var(--orange) 34%,var(--orange-lo));
  clip-path:polygon(0 0,100% 0,73% 100%,27% 100%);
  box-shadow:inset 0 -26px 40px #00000059}
.chute-mouth::after{content:"";position:absolute;inset:auto 0 0 0;height:34px;
  background:linear-gradient(180deg,#0a032200,#0a0322cc)}
.chute-mouth i{position:absolute;left:14%;right:14%;top:16%;height:16px;background:#00000030;
  clip-path:polygon(0 0,50% 52%,100% 0,100% 44%,50% 100%,0 44%);
  animation:chev 2.4s linear infinite;opacity:0}
.chute-mouth i:nth-child(2){animation-delay:-.6s}
.chute-mouth i:nth-child(3){animation-delay:-1.2s}
.chute-mouth i:nth-child(4){animation-delay:-1.8s}
@keyframes chev{0%{transform:translateY(0) scaleX(1);opacity:0}
  18%{opacity:.5}75%{opacity:.3}100%{transform:translateY(128px) scaleX(.62);opacity:0}}
.chute-lip{position:absolute;left:0;right:0;top:0;height:15px;background:var(--chrome);
  box-shadow:0 3px 9px #00000077;z-index:2}
.chute-count{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.chute-count b{font:700 clamp(30px,4vw,44px)/1 var(--mono);color:var(--orange)}
.chute-count span{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--paper-far)}
.chute-note{margin:0 0 12px;font:500 11.5px/1.6 var(--mono);color:var(--paper-dim);letter-spacing:.04em}
@media (max-width:820px){.chute-grid{grid-template-columns:1fr}}

/* ================================================= PAPERWORK */
.sec-paper{background:linear-gradient(180deg,var(--uv-deep),#200d52 60%,var(--uv-deep))}
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:clamp(12px,1.8vw,20px)}
.form{position:relative;padding:22px 20px 26px;border-radius:3px;overflow:hidden;
  background:linear-gradient(178deg,#F4EADA,#E0D0B6);color:#2A2118;
  box-shadow:0 20px 46px #05001e77;
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,#00000010 27px 28px)}
.form::before{content:"";position:absolute;left:14px;top:-9px;width:56px;height:18px;
  background:var(--chrome);border-radius:2px;box-shadow:0 3px 7px #00000055}
.form-k{margin:0 0 12px;font:700 9.5px/1 var(--mono);letter-spacing:.22em;color:#8C7358}
.form h3{font-size:clamp(17px,1.7vw,21px);color:#2A2118;margin:0 0 12px}
.form-v{margin:0;font:700 clamp(21px,2.5vw,30px)/1.15 var(--mono);color:var(--blue);
  word-break:break-word}
.form-n{margin:9px 0 0;font-size:13.5px;color:#6B5B47}
.stamp{position:absolute;right:-8px;bottom:10px;rotate:-12deg;opacity:0;scale:1.8;
  font:400 clamp(13px,1.5vw,17px)/1 var(--dsp);letter-spacing:.01em;color:var(--red);
  border:4px solid var(--red);border-radius:4px;padding:.16em .3em;pointer-events:none}
.form.in .stamp{animation:stampHit3 .55s cubic-bezier(.2,1.5,.4,1) .42s forwards}
@keyframes stampHit3{0%{opacity:0;scale:1.9}60%{opacity:.94;scale:.95}100%{opacity:.94;scale:1}}

/* --- dexscreener telemetry --- */
.tele{margin-top:clamp(18px,2.6vw,28px);border:1px solid var(--uv-line);border-radius:6px;
  background:#12063a;padding:clamp(16px,2.2vw,24px)}
.tele-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.tele-head .kick{margin:0}
.tele-head b{font:700 11px/1 var(--mono);letter-spacing:.18em;padding:7px 11px;border-radius:2px;
  border:1px solid var(--uv-line);color:var(--paper-far)}
.tele[data-state="live"] .tele-head b{color:#8DF0B6;border-color:#1e7a48;background:#0d3a2333}
.tele[data-state="warming"] .tele-head b{color:var(--orange-hi);border-color:var(--orange-lo)}
.tele[data-state="error"] .tele-head b{color:#F0A99F;border-color:var(--red-lo)}
.tele-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;
  margin:16px 0 12px}
.tele-grid div{padding:13px 14px;border-radius:3px;border:1px solid var(--uv-line);background:#0d0430}
.tele-grid span{display:block;font:500 9.5px/1.4 var(--mono);letter-spacing:.17em;color:var(--paper-far)}
.tele-grid b{display:block;margin-top:6px;font:700 clamp(17px,1.9vw,22px)/1 var(--mono);color:var(--bone)}
.tele-grid b.up{color:#5EE39A}.tele-grid b.down{color:#E4796C}
.tele-note{margin:0;font:500 11px/1.6 var(--mono);letter-spacing:.1em;color:var(--paper-far)}

/* ======================================================= BUY */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(12px,1.8vw,20px)}
.step{position:relative;padding:24px 20px 22px 56px;border-radius:3px;
  background:linear-gradient(178deg,#F4EADA,#E4D6BF);color:#2A2118;
  box-shadow:0 20px 46px #05001e66}
.step-box{position:absolute;left:18px;top:24px;width:24px;height:24px;border:2px solid #8C7358;
  border-radius:2px;background:#fff9ee}
.step-box::after{content:"";position:absolute;left:3px;top:-2px;width:11px;height:19px;
  border-right:4px solid var(--red);border-bottom:4px solid var(--red);
  rotate:42deg;opacity:0;scale:1.7;transform-origin:50% 50%}
.step.in .step-box::after{animation:tick .45s cubic-bezier(.2,1.5,.4,1) var(--d,.3s) forwards}
@keyframes tick{0%{opacity:0;scale:1.7}60%{opacity:1;scale:.92}100%{opacity:1;scale:1}}
.step-n{margin:0 0 8px;font:700 9.5px/1 var(--mono);letter-spacing:.22em;color:#8C7358}
.step h3{font-size:clamp(17px,1.7vw,21px);margin:0 0 10px;color:#2A2118}
.step p{margin:0;font-size:14px;color:#5C4E3D}
.step a{color:var(--orange-lo);text-decoration:underline;text-underline-offset:2px}
.step a:hover{color:var(--red)}
.step-ic{position:absolute;right:16px;bottom:14px;opacity:.3}

/* ====================================================== RUNS */
.runs{display:grid;gap:clamp(10px,1.6vw,16px)}
.run{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:clamp(12px,2vw,24px);
  align-items:center;padding:clamp(16px,2.2vw,24px);border-radius:5px;
  border:1px solid var(--uv-line);background:#12063a8f}
.run-n{margin:0;font:700 12px/1 var(--mono);letter-spacing:.2em;color:var(--paper-far)}
.run h3{font-size:clamp(18px,2vw,24px);color:var(--bone);margin:0 0 6px}
.run p{margin:0;color:var(--paper-dim);font-size:14.5px}
.run-s{font:700 10px/1 var(--mono);letter-spacing:.17em;padding:8px 11px;border-radius:2px;
  border:1px solid var(--uv-line);color:var(--paper-far);white-space:nowrap}
.run.is-done{border-color:#1e7a48}
.run.is-done .run-s{color:#8DF0B6;border-color:#1e7a48;background:#0d3a2333}
.run.is-done .run-n{color:#5EE39A}
.run.is-live{border-color:var(--orange-lo);background:#3a170a4d}
.run.is-live .run-s{color:var(--uv-deep);background:var(--orange);border-color:var(--orange)}
.run.is-live .run-n{color:var(--orange-hi)}
@media (max-width:760px){
  .run{grid-template-columns:1fr;gap:8px}
  .run-s{justify-self:start}
}

/* ====================================================== CREW */
.sec-crew{background:linear-gradient(180deg,var(--uv-deep),#2a1168)}
.crew-in{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(20px,4vw,52px);
  align-items:center}
.crew-img{width:100%;max-width:280px;height:auto;border-radius:6px;
  border:8px solid transparent;background:var(--chrome);
  box-shadow:0 30px 70px #05001eaa}
.crew-in h2{font-size:clamp(32px,5vw,62px);color:var(--bone);margin:0}
@media (max-width:820px){.crew-in{grid-template-columns:1fr}.crew-img{max-width:190px}}

/* ==================================================== FOOTER */
.foot{background:var(--uv-deep);border-top:1px solid var(--uv-line);
  padding:clamp(40px,5vw,64px) 0 clamp(26px,3vw,38px)}
.foot-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,50px)}
.slip{padding:20px;border-radius:3px;background:linear-gradient(178deg,#F4EADA,#DFCFB4);
  color:#2A2118;rotate:-.7deg;box-shadow:0 18px 40px #05001e77;
  background-image:repeating-linear-gradient(180deg,transparent 0 24px,#00000010 24px 25px)}
.slip-k{margin:0 0 10px;font:700 9.5px/1 var(--mono);letter-spacing:.22em;color:var(--red)}
.slip-b{margin:0 0 14px;font:500 12px/1.7 var(--mono);letter-spacing:.03em}
.slip .bars{opacity:.8}
.foot-cols nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.foot-cols nav a{font:500 10.5px/1 var(--mono);letter-spacing:.15em;color:var(--paper-dim);
  padding:8px 10px;border:1px solid var(--uv-line);border-radius:2px}
.foot-cols nav a:hover{color:var(--paper);background:#ffffff0d}
.foot-note{margin:0 0 16px;font-size:13.5px;color:var(--paper-far);max-width:62ch}
.foot-sm{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;
  font:500 10px/1.6 var(--mono);letter-spacing:.15em;color:var(--paper-far)}
.foot-sm b{color:var(--bone)}
@media (max-width:820px){.foot-in{grid-template-columns:1fr}}

/* ================================================ EASTER EGG */
.egg{position:fixed;left:50%;top:50%;translate:-50% -50%;z-index:95;text-align:center;
  padding:clamp(24px,4vw,44px) clamp(26px,5vw,60px);border-radius:6px;
  background:#12063af2;border:1px solid var(--uv-line);box-shadow:0 40px 100px #05001ecc;
  animation:eggIn .4s cubic-bezier(.2,1.3,.4,1) both;max-width:min(92vw,520px)}
@keyframes eggIn{from{opacity:0;translate:-50% -42%;scale:.94}to{opacity:1;translate:-50% -50%;scale:1}}
.egg.out{animation:eggOut .35s ease forwards}
@keyframes eggOut{to{opacity:0;translate:-50% -56%;scale:.97}}
.egg-k{margin:0 0 12px;font:500 10px/1 var(--mono);letter-spacing:.24em;color:var(--paper-far)}
.egg-t{margin:0 0 12px;font:400 clamp(24px,4.4vw,44px)/1.05 var(--dsp);color:var(--red)}
.egg-t b{color:var(--bone);font-weight:400}
.egg-b{margin:0;font:500 12px/1.7 var(--mono);letter-spacing:.06em;color:var(--paper-dim)}
.egg-b b{color:var(--orange)}
.hunting .two{animation:flick .5s steps(2) 3}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.15;color:var(--red)}}

/* =============================================== REDUCED MOTION
   Reduced motion is ON at the OS level on the build machine, so this
   branch is what most captures show. It must look finished, not frozen
   mid-reveal. `?motion=force` (html.motion-force) opts back in. */
@media (prefers-reduced-motion:reduce){
  html:not(.motion-force) *,
  html:not(.motion-force) *::before,
  html:not(.motion-force) *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html:not(.motion-force) .rv{opacity:1;transform:none}
  html:not(.motion-force) #grain{animation:none}
  html:not(.motion-force) .stamp{opacity:.94;scale:1}
  html:not(.motion-force) .step-box::after{opacity:1;scale:1}
}