@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/art/fonts/pixelifysans-CHylV-3HFUT7aC4iv1TxGDR9JnkEi1lR.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/art/fonts/pixelifysans-CHylV-3HFUT7aC4iv1TxGDR9JnMEi1lR.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/art/fonts/pixelifysans-CHylV-3HFUT7aC4iv1TxGDR9Jn0Eiw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/art/fonts/silkscreen-m8JXjfVPf62XiF7kO-i9YL1la1OD.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/art/fonts/silkscreen-m8JXjfVPf62XiF7kO-i9YLNlaw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/art/fonts/silkscreen-m8JUjfVPf62XiF7kO-i9aAhAfmKi2Oud.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/art/fonts/silkscreen-m8JUjfVPf62XiF7kO-i9aAhAfmyi2A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --void:#050607;
  --near:#0A0C0E;
  --card:#0E1113;
  --ink:#F4F4F0;
  --body:#B9BFC0;
  --faint:#949B9C;
  --gold:#F4B728;
  --venom:#3DE08A;
  --bad:#F0736A;
  --line:rgba(244,244,240,.14);
  --line2:rgba(244,244,240,.26);
  --mono:"ZDigits","Silkscreen",ui-monospace,monospace;
  --sans:"ZDigits","Pixelify Sans","Silkscreen",system-ui,sans-serif;
  --gut:clamp(20px,5vw,72px);
  
  --nav-h:78px;
  --nav-row2:44px;   
  --ease:cubic-bezier(.22,1,.36,1);

  --u-display:clamp(4.4px, .36vw + 3.1px, 7px);
  --u-h2:clamp(3.7px, .3vw + 2.6px, 5.9px);

  --px-rule:   repeating-linear-gradient(90deg,
                 rgba(244,244,240,.30) 0 2px, transparent 2px 5px);
  --px-rule-v: repeating-linear-gradient(180deg,
                 rgba(244,244,240,.30) 0 2px, transparent 2px 5px);
  
  --px-rule-faint: repeating-linear-gradient(90deg,
                 rgba(244,244,240,.22) 0 2px, transparent 2px 7px);
}

@font-face{
  font-family:'ZDigits';
  font-style:normal; font-weight:400; font-display:swap;
  src:url(/art/fonts/silkscreen-m8JXjfVPf62XiF7kO-i9YLNlaw.woff2) format('woff2');
  unicode-range:U+0030-0039, U+002B, U+002C, U+002D, U+002E;
}
@font-face{
  font-family:'ZDigits';
  font-style:normal; font-weight:700; font-display:swap;
  src:url(/art/fonts/silkscreen-m8JUjfVPf62XiF7kO-i9aAhAfmyi2A.woff2) format('woff2');
  unicode-range:U+0030-0039, U+002B, U+002C, U+002D, U+002E;
}

*{box-sizing:border-box}

[hidden]{display:none !important}

html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 22px)}

html:has(.edgenav){scroll-padding-top:calc(var(--nav-h) + var(--nav-row2) + 22px)}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.8;
  letter-spacing:.01em; overflow-x:hidden;
  -webkit-font-smoothing:none; -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
}
img,canvas{display:block; max-width:100%}
a{color:inherit}
button,input{font-family:inherit; color:inherit}
::selection{background:var(--gold); color:#140F02}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

.skip{position:absolute; left:-9999px; top:0; z-index:999; padding:12px 18px;
  background:var(--gold); color:#140F02; font-weight:600}
.skip:focus{left:12px; top:12px}

.dim{color:var(--faint)}

.display,.h2{display:block; margin:0; color:var(--ink); line-height:0}
.display svg,.h2 svg{display:block; width:100%; height:auto}

.display{width:min(100%, calc(var(--cols,77) * var(--u-display)))}
.h2{width:min(100%, calc(var(--cols,56) * var(--u-h2)))}

.h2-sm{width:min(100%, calc(var(--cols,40) * var(--u-h2) * .55))}

.h3{
  font-size:24px; font-weight:700; line-height:1.3;
  letter-spacing:.005em; margin:0 0 12px; color:var(--ink);
}
.body{
  margin:20px 0 0; max-width:46ch; color:var(--body);
  font-size:19px; font-weight:400; line-height:1.8;
}
.body b{color:var(--ink); font-weight:700}
.eyebrow{
  display:flex; align-items:center; gap:9px; margin:0 0 22px;
  font-family:var(--mono); font-size:13px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.pip{width:6px; height:6px; border-radius:0; background:var(--venom); flex:0 0 6px;
  box-shadow:0 0 10px var(--venom); animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.fine{margin:18px 0 0; font-size:16px; line-height:1.7;
  color:var(--faint); max-width:44ch}

.panel{
  margin:clamp(22px,3.4vh,34px) 0 0; padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line2); border-radius:12px;
  background:linear-gradient(180deg, rgba(20,26,22,.55), rgba(10,14,11,.35));
  box-shadow:inset 0 1px 0 rgba(244,244,240,.05);
  max-width:none;
}
.panel-tag{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 12px;
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
.panel-tag::before{content:""; width:8px; height:8px; background:var(--gold);
  box-shadow:0 0 8px rgba(244,183,40,.8)}
.panel p{margin:0}
.panel p + p{margin-top:12px}

@media (max-width:760px){
  
  .h3{font-size:21px}
  .body{font-size:18px; line-height:1.78}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:60px; padding:0 34px; border:1px solid transparent; border-radius:9px;
  font-size:19px; font-weight:700; letter-spacing:.02em; text-decoration:none;
  cursor:pointer; white-space:nowrap; transition:.2s var(--ease);
}
.btn-go{background:var(--gold); color:#140F02}
.btn-go:hover{background:#FFC845; transform:translateY(-2px);
  box-shadow:0 12px 30px -10px rgba(244,183,40,.6)}
.btn-ghost{background:transparent; color:var(--body); border-color:var(--line2)}
.btn-ghost:hover{color:var(--ink); border-color:var(--ink); transform:translateY(-2px)}
.btn-sm{height:44px; padding:0 22px; font-size:16px; border-radius:7px}
.btn.w{width:100%; margin-top:24px}
.btn.s{flex:0 0 108px; padding:0}
.btn[disabled]{opacity:.32; cursor:not-allowed; transform:none; box-shadow:none}
.btn-row{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap}
.btn-row .btn{flex:1 1 auto}

.nav{
  position:fixed; inset:0 0 auto; z-index:300;
  
  display:grid;

  grid-template-columns:auto 1fr auto;
  
  grid-template-areas:"brand middle right";
  align-items:center;
  
  transition:background .3s, border-color .3s;
  border-bottom:1px solid transparent;
}

.nav-out{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  padding:8px 11px; border-radius:6px; white-space:nowrap;
  
  color:#C8B78E; border:1px solid rgba(200,183,142,.42);
  background:rgba(200,183,142,.07);
  transition:color .18s var(--ease), background .18s var(--ease),
             border-color .18s var(--ease);
}
.nav-out:hover, .nav-out:focus-visible{
  color:#E8DCBC; border-color:rgba(200,183,142,.7); background:rgba(200,183,142,.14);
}

.nav-try{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  padding:8px 11px; border-radius:6px; margin-right:10px;
  color:var(--venom); border:1px dashed var(--venom);
  background:rgba(61,224,138,.08);
  transition:background .18s var(--ease);
}
.nav-try:hover, .nav-try:focus-visible{ background:rgba(61,224,138,.18) }

@media (max-width:620px){
  
  .nav-brand .wordmark{display:none}
  .nav-right{gap:8px}
}

.nav-brand{grid-area:brand; margin-left:var(--gut)}

@media (max-width:1359px){
  .nav{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "brand middle right"
      "sections sections sections";
  }
  .nav-brand{justify-self:start}
  .nav-right{justify-self:end}
  
  .edgenav{padding:0 var(--gut) 11px calc(var(--gut) + 36px + 13px)}
}
.nav-right{grid-area:right; margin-right:var(--gut)}

.nav-links{grid-area:middle; justify-self:center}

.nav-brand,.nav-right{min-height:var(--nav-h)}

.nav.stuck{background:rgba(5,6,7,.9); backdrop-filter:blur(20px); border-bottom-color:var(--line)}
.nav-brand{display:flex; align-items:center; gap:13px; text-decoration:none;
  }

.nav-mark{
  width:36px; height:36px; flex:0 0 36px; border-radius:7px;
  background:#050607 url("/art/mark/mark-180.png") center/contain no-repeat;
  image-rendering:pixelated; box-shadow:0 0 0 1px var(--line2);
  transition:box-shadow .25s;
}
.nav-brand:hover .nav-mark{box-shadow:0 0 0 1px var(--venom), 0 0 14px -2px rgba(61,224,138,.6)}

.nav-links{display:flex; gap:4px; color:var(--body);
  font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase}
.nav-links a{
  position:relative; padding:9px 13px; border-radius:6px; text-decoration:none;
  
  white-space:nowrap;
  transition:color .18s, background .18s;
}
.nav-links a::after{
  content:''; position:absolute; left:13px; right:13px; bottom:5px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-links a:hover{color:var(--ink); background:rgba(244,244,240,.05)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="true"]{color:var(--ink)}
.nav-links a[aria-current="true"]::after{transform:scaleX(1); background:var(--venom)}

.nav-links .nav-home{color:var(--venom)}
.nav-links .nav-home::after{background:var(--venom)}
.nav-links .nav-home:hover{color:var(--venom); background:rgba(61,224,138,.08)}

.nav-links .nav-home{
  margin-right:6px; padding-right:16px;
  border-right:1px solid var(--line);
}
@media (max-width:900px){
  
  .nav-links .nav-home{
    border-right:0; border-bottom:1px solid var(--line);
    margin-right:0; padding-right:14px; margin-bottom:4px;
  }
}

.nav-right{display:flex; align-items:center; gap:12px}

@media (min-width:1360px){
  
  .nav:has(.edgenav) .nav-right::before{
    content:''; width:1px; height:22px; flex:0 0 1px;
    background:var(--line2); margin-right:6px;
  }
}
.live{display:flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:13px; letter-spacing:.08em; color:var(--faint); white-space:nowrap}
.live i{width:6px; height:6px; border-radius:0; background:var(--venom);
  box-shadow:0 0 8px var(--venom); animation:pulse 2.6s var(--ease) infinite}

.nav-burger{
  display:none; width:44px; height:44px; padding:0; border-radius:8px;
  border:1px solid var(--line2); background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-burger span{display:block; width:20px; height:2px; background:var(--ink);
  transition:transform .22s var(--ease), opacity .18s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.edgenav{
  grid-area:middle;
  display:flex; align-items:center;
  justify-content:center;
  padding:0 clamp(14px, 2vw, 30px);

  gap:clamp(2px, calc(2px + (100vw - 1360px) * 0.03125), 12px);
  font-size:clamp(11.5px, calc(11.5px + (100vw - 1360px) * 0.0078125), 14px);
  letter-spacing:clamp(0.46px, calc(0.46px + (100vw - 1360px) * 0.0020625), 1.12px);
  font-family:var(--mono); text-transform:uppercase;
}
.edgenav a{
  display:block; border-radius:6px;
  padding:8px clamp(8px, calc(8px + (100vw - 1360px) * 0.015625), 13px);
  color:var(--body); text-decoration:none; white-space:nowrap;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.edgenav a:hover, .edgenav a:focus-visible{ color:var(--ink); background:rgba(244,244,240,.05) }

.edgenav a[aria-current="true"]{
  color:var(--ink);
  box-shadow:inset 0 -2px 0 0 var(--venom);
}

@media (max-width:1359px){
  
  .edgenav{grid-area:sections; height:var(--nav-row2);
    border-top:1px solid rgba(244,244,240,.07)}
  .nav.stuck .edgenav{border-top-color:var(--line)}
  
  .edgenav{
    font-size:13px; letter-spacing:.085em;
    gap:9px; padding-bottom:11px;
  }
  .edgenav a{padding:8px 13px}
}

.edgenav > .edgenav-rule, .edgenav > .edgenav-more{ display:none }

@media (max-width:1359px){
  :root{ --nav-row2:0px }          
  .nav{ grid-template-areas:"brand middle right" }
  .nav-burger{display:flex}
  
  .nav-try, .nav-out, .nav-right .snd{display:none}

  .edgenav{
    position:fixed; inset:var(--nav-h) 0 auto; z-index:290;
    display:none; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:0; height:auto;
    max-height:calc(100svh - var(--nav-h)); overflow-y:auto; overflow-x:hidden;
    padding:6px var(--gut) 18px;
    
    background:var(--void);
    border-top:1px solid var(--line2); border-bottom:1px solid var(--line2);
    
    -webkit-mask-image:none; mask-image:none;
  }
  .edgenav.open{display:flex}
  
  .nav:has(.edgenav.open){ background:var(--void); border-bottom-color:transparent }
  .edgenav a, .edgenav-snd{
    padding:15px 4px; border-radius:0; font-size:14px; letter-spacing:.09em;
    border-bottom:1px solid var(--line);
  }
  .edgenav a[aria-current="true"]{ color:var(--venom); box-shadow:none }
  .edgenav > .edgenav-rule{
    display:block; height:0; margin:14px 0 0;
    border-top:1px solid var(--line2);
  }
  
  .edgenav > .edgenav-more{ display:flex; align-items:center; justify-content:space-between }
  .edgenav-snd{
    width:100%; background:none; border:0; border-bottom:1px solid var(--line);
    color:var(--body); text-transform:uppercase; text-align:left; cursor:pointer;
    
    font-family:var(--mono); font-weight:inherit;
  }
  .edgenav-snd[aria-pressed="true"]{ color:var(--venom) }
  .edgenav-more:last-child{ border-bottom:0 }
}

@media (prefers-reduced-motion:reduce){
  .edgenav a{transition:none}
}

.nav-right .snd{margin-right:12px}

@media (max-width:1249px){
  
  .nav:has(.nav-links) .nav-burger{display:flex}
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto; z-index:290;
    display:none; flex-direction:column; gap:0;
    padding:10px var(--gut) 22px;
    background:rgba(5,6,7,.97); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line2);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 4px; font-size:16px; border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
  .nav-links a:last-child{border-bottom:0}
}
@media (max-width:560px){ .live{display:none} }

.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;

  padding:calc(var(--nav-h) + var(--nav-row2) + 42px) var(--gut) clamp(76px,12vh,132px); overflow:hidden; isolation:isolate;
}
.hero-field,.hero-fog,.hero-glow{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.hero-fog{z-index:1}
.hero-glow{z-index:2}
.hero-vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    
    radial-gradient(72% 58% at 6% 84%, rgba(5,6,7,.93) 0%, rgba(5,6,7,.5) 46%, transparent 78%),
    radial-gradient(130% 80% at 50% 0%, transparent 32%, rgba(5,6,7,.6) 100%),
    linear-gradient(to top, var(--void) 1%, rgba(5,6,7,.7) 26%, transparent 60%);
}
@media (max-width:760px){
  .hero-vignette{background:
    radial-gradient(100% 62% at 50% 72%, rgba(5,6,7,.93) 0%, rgba(5,6,7,.6) 50%, transparent 82%),
    linear-gradient(to top, var(--void) 1%, rgba(5,6,7,.62) 30%, transparent 66%)}
}
.hero-copy{position:relative; z-index:4; max-width:min(820px,100%); pointer-events:none}
.hero-copy > *{pointer-events:auto}
.hero-copy .lede{
  margin:26px 0 0; max-width:44ch; color:var(--body);
  font-size:19px; line-height:1.8;
}
.hero-copy .lede b{color:var(--ink); font-weight:700}
.hero-cta{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.hero-meta{margin:26px 0 0; font-family:var(--mono); font-size:14px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  max-width:58ch}

.hero-hint{
  position:absolute; right:var(--gut); bottom:clamp(20px,3.4vh,40px); z-index:4;
  margin:0; display:flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); transition:opacity .6s;
}
.hero-hint.gone{opacity:0}

@media (max-width:1180px){ .hero-hint{display:none} }
.sweep{width:34px; height:1px; background:var(--line2); position:relative; overflow:hidden}
.sweep::after{content:""; position:absolute; inset:0; width:12px;
  background:var(--venom); box-shadow:0 0 10px var(--venom);
  animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-14px)}100%{transform:translateX(36px)}}

@media (max-width:760px){
  .hero{align-items:center; padding-top:96px}
  .hero-hint{left:var(--gut); right:auto}
}

.ticker{
  border-block:1px solid var(--line); background:var(--near);
  overflow:hidden; white-space:nowrap; padding:13px 0;
}
.ticker-run{
  display:inline-flex; gap:42px; align-items:center;
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
  animation:run 34s linear infinite; will-change:transform;
}
.ticker-run b{color:var(--gold); font-weight:400}
.ticker-run em{color:var(--venom); font-style:normal}
@keyframes run{to{transform:translateX(-50%)}}

.sec{
  
  --sec-pad:clamp(88px,13vh,160px);
  padding:var(--sec-pad) var(--gut); position:relative;
  scroll-margin-top:calc(-1 * var(--sec-pad));
}

.sec + .sec::before{
  content:''; position:absolute; top:0; pointer-events:none;
  left:var(--gut); right:var(--gut); height:1px;
  background:linear-gradient(90deg, var(--line2), var(--line) 30%, transparent 88%);
}
.sec-head{max-width:780px}
.sec-head .body{margin-top:24px}

.anchor{display:block; height:0; overflow:hidden}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}

.grid{
  display:grid; gap:clamp(8px,1.1vw,14px); margin-top:clamp(44px,6vh,72px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(130px,15vw,190px),1fr));
}

.tile{
  --accent:#3de08a;
  position:relative; aspect-ratio:1; border:0; border-radius:12px;
  background:transparent; cursor:pointer; padding:0; appearance:none;
  perspective:1100px;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}

.tile-inner{
  position:absolute; inset:0; border-radius:12px;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.4,.06,.2,1);
}
.tile.flipped .tile-inner{transform:rotateY(180deg)}
.tile-front,.tile-back{
  position:absolute; inset:0; overflow:hidden;
  border:1px solid var(--line); border-radius:12px; background:#000;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:border-color .45s var(--ease);
}
.tile-front>img{
  width:100%; height:100%; display:block; object-fit:cover;
  image-rendering:pixelated;
  filter:grayscale(.62) brightness(.52) contrast(1.06);
  transform:scale(1.04);
  transition:filter .55s var(--ease), transform .7s var(--ease);
}

@media (hover:none){
  .tile-front>img{filter:grayscale(.12) brightness(.94) contrast(1.04); transform:none}
  .tile .tile-meta{opacity:1; transform:none}
}
.tile.t-hot  {--accent:#f4b728}
.tile.t-rare {--accent:#ffd46b}
.tile.t-low  {--accent:#7be8a8}

.tile-meta{
  position:absolute; inset:auto 0 0 0; display:flex; align-items:flex-end;
  justify-content:space-between; gap:8px; padding:26px 10px 9px;
  font-family:var(--mono); font-size:16px; letter-spacing:.07em; line-height:1.25;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88) 62%);
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .45s var(--ease);
  pointer-events:none; text-align:left;
}

.tile.tile-dark .tile-front{background:#070b08}
.tile.tile-dark .tile-front::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(70% 70% at 50% 42%, rgba(61,224,138,.055), transparent 72%);
}
.tile.tile-dark .tile-meta{opacity:1; transform:none; z-index:1}

.tile-id{color:var(--ink); text-shadow:0 1px 6px #000}

.tile-turn{
  position:absolute; top:8px; right:9px; width:17px; height:17px;
  display:grid; place-items:center; border-radius:5px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:rgba(0,0,0,.5); color:var(--accent);
  font-family:var(--mono); font-size:11px; line-height:1;
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.tile:hover .tile-turn,.tile:focus-visible .tile-turn,.tile.lit .tile-turn{opacity:1}

.tile-back{
  transform:rotateY(180deg);
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:clamp(13px,1.5vw,19px);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    #07100b;
  text-align:left;
}
.tile-back-kicker{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent);
}
.tile-back-kicker::before{
  content:''; width:6px; height:6px; background:var(--accent); flex:0 0 6px;
}
.tile-back-text{
  
  margin:0; color:var(--ink);
  font-size:clamp(12px,1.05vw,15px); line-height:1.5; letter-spacing:.01em;
}
.tile-back-back{
  margin-top:auto; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}

@media (max-width:640px){
  .tile-back{padding:11px; gap:6px}
  .tile-back-kicker{font-size:10px; letter-spacing:.14em}
  .tile-back-text{font-size:11.5px; line-height:1.4}
  .tile-back-back{display:none}
}

.tile-front::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px; z-index:2;
  background:var(--accent); opacity:0; transition:opacity .45s var(--ease);
}

.tile:hover,.tile:focus-visible,.tile.lit{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 22px 48px -16px rgba(0,0,0,.95),
             0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
             0 0 34px -12px var(--accent);
}
.tile:hover .tile-front,.tile:focus-visible .tile-front,.tile.lit .tile-front{
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
}
.tile:hover .tile-front>img,.tile:focus-visible .tile-front>img{filter:none; transform:none}
.tile.lit .tile-front>img{filter:grayscale(.1) brightness(.92); transform:none}
.tile:hover .tile-meta,.tile:focus-visible .tile-meta,.tile.lit .tile-meta{
  opacity:1; transform:none;
}
.tile:hover .tile-front::before,.tile:focus-visible .tile-front::before,.tile.lit .tile-front::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .tile,.tile-front>img,.tile-meta,.tile-inner{transition-duration:.01ms}
}
}

.grid-foot{margin:28px 0 0; padding:15px 20px;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(14,19,15,.5);
  font-family:var(--mono); font-size:15px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--body)}
.grid-foot b{color:var(--gold); font-weight:400}

.sec-shield{background:
  linear-gradient(180deg, transparent, rgba(61,224,138,.03) 40%, transparent)}

.shield-wrap{
  display:grid; gap:clamp(34px,5vw,80px); align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
@media (max-width:860px){
  .shield-wrap{grid-template-columns:1fr; align-items:center}
  
  .shield-copy{order:1}
  .shield-stage{order:2}
}

.shield-stage{position:relative; aspect-ratio:1; width:100%;
  max-width:min(100%,720px);
  border-radius:16px; overflow:hidden; background:#000;
  box-shadow:0 40px 90px -40px #000}

@media (max-width:860px){ .shield-stage{margin-inline:auto; max-width:520px} }
.shield-stage canvas{width:100%; height:100%; image-rendering:pixelated}
.shield-frame{position:absolute; inset:0; border:1px solid var(--line2);
  border-radius:16px; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(0,0,0,.55))}
.shield-tag{
  position:absolute; left:14px; top:14px; padding:6px 11px; border-radius:6px;
  background:rgba(5,6,7,.78); backdrop-filter:blur(8px);
  border:1px solid var(--line2); font-family:var(--mono); font-size:13px;
  letter-spacing:.16em; color:var(--venom); transition:color .3s;
}
.shield-tag.partial{color:var(--gold)}
.shield-tag.ghost{color:var(--bad)}

.rail{margin-top:36px}
.rail-label{display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin-bottom:14px}
.rail-label b{color:var(--gold); font-size:17px; letter-spacing:.04em}
.rail-marks{display:flex; justify-content:space-between; margin-top:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint)}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:26px;
  background:transparent; cursor:grab; display:block;
}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{
  height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--venom),var(--gold),var(--bad))}
input[type=range]::-moz-range-track{
  height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--venom),var(--gold),var(--bad))}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-8.5px;
  border-radius:50%; background:var(--ink); border:3px solid var(--void);
  box-shadow:0 0 0 1px var(--line2), 0 4px 14px rgba(0,0,0,.8)}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--ink);
  border:3px solid var(--void); box-shadow:0 0 0 1px var(--line2)}

.spec{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:36px 0 0}
.spec div{padding:16px 0 0; border-top:1px solid var(--line)}
.spec dt{font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.spec dd{margin:8px 0 0; font-size:18px; font-weight:700; letter-spacing:.02em}

.sec-apply{padding-bottom:clamp(88px,13vh,150px)}
.console{
  max-width:680px; margin:clamp(44px,6vh,72px) auto 0;
  border:1px solid var(--line2); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,var(--card),#090B0C);
  box-shadow:0 50px 110px -50px #000, 0 0 0 1px rgba(0,0,0,.6);
}
.console-bar{
  display:flex; align-items:center; gap:12px; height:46px; padding:0 16px;
  background:rgba(255,255,255,.035); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--body);
}
.console-bar b{flex:1; font-weight:400; text-transform:uppercase}
.dots{display:flex; gap:6px}
.dots i{width:8px; height:8px; border-radius:0; background:var(--line2)}
.dots i:first-child{background:rgba(240,115,106,.6)}
.console-step{color:var(--gold); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}

@media (max-width:420px){
  .console-bar .dots{display:none}
  .console-bar b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

.rail-steps{display:flex; gap:4px; padding:14px 16px 0}
.rail-steps i{flex:1; height:2px; border-radius:2px; background:var(--line); overflow:hidden; position:relative}
.rail-steps i::after{content:""; position:absolute; inset:0; width:0; background:var(--gold);
  transition:width .7s var(--ease)}
.rail-steps i.on::after{width:100%}

.mention{color:#8FD6B0; text-decoration:none; border-bottom:1px solid rgba(143,214,176,.28);
  transition:color .2s, border-color .2s}
.mention:hover{color:var(--venom); border-bottom-color:var(--venom)}

#console[data-phase="done"] .rail-steps i::after{background:var(--venom)}
#console[data-phase="done"] .console-step{color:var(--venom)}

.console-body{padding:26px clamp(20px,3.4vw,34px) clamp(28px,3.6vw,36px)}
.step{display:none}
.step.on{display:block; animation:step .5s var(--ease)}
@keyframes step{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.field{margin-top:26px}
.field-label{display:block; margin-bottom:10px; font-family:var(--mono);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.field-box{position:relative; display:flex; align-items:center}
.field-box input{
  width:100%; height:54px; padding:0 48px 0 15px; border:1px solid var(--line2);
  border-radius:8px; background:rgba(0,0,0,.42); font-size:15px;
  font-family:var(--mono); letter-spacing:.04em; transition:border-color .2s;
}
.field-box input::placeholder{color:var(--faint); font-family:var(--sans); letter-spacing:0}
.field-box input:focus{outline:none; border-color:var(--gold)}
.field-box input.masked{color:transparent; caret-color:var(--gold)}
.field-mask{
  position:absolute; left:16px; right:48px; top:50%; transform:translateY(-50%);
  pointer-events:none; font-family:var(--mono); font-size:15px; letter-spacing:.04em;
  color:var(--venom); white-space:nowrap; overflow:hidden; opacity:0; transition:opacity .2s;
}
.field-box input.masked + .field-mask{opacity:1}
.eye{
  position:absolute; right:8px; width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:7px; background:none; color:var(--faint); cursor:pointer;
  transition:.2s;
}
.eye:hover{color:var(--ink); background:rgba(255,255,255,.07)}
.eye[aria-pressed=true]{color:var(--gold)}

.wallet-connect{margin:0 0 20px; padding:0 0 20px;
  border-bottom:1px dashed var(--line2)}
.wallet-connect .btn{gap:9px}
.wallet-connect .fine{margin:10px 0 0; text-align:center}

.onfile{
  display:inline-flex; align-items:center; gap:11px; margin:26px 0 0;
  padding:11px 18px; border:1px solid var(--line2); border-radius:10px;
  background:rgba(3,6,4,.45);
  font-family:var(--mono); font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
.onfile-dot{
  width:8px; height:8px; border-radius:50%; background:var(--venom);
  box-shadow:0 0 9px var(--venom); animation:pulse 2.4s var(--ease) infinite;
}
.onfile-n{
  font-size:22px; letter-spacing:.06em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.onfile-live{
  font-size:11px; padding:3px 7px; border:1px solid rgba(61,224,138,.45);
  border-radius:4px; color:var(--venom); letter-spacing:.18em;
}

.you-are{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; font-family:var(--mono); font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.you-are-n{
  font-size:clamp(38px,7vw,56px); line-height:1; letter-spacing:.02em;
  color:var(--venom); font-variant-numeric:tabular-nums;
}
.you-are-of{font-size:13px}

.state{margin:13px 0 0; font-family:var(--mono); font-size:13px; line-height:1.5;
  letter-spacing:.05em; color:var(--faint); min-height:16px}
.state.ok{color:var(--venom)}
.state.bad{color:var(--bad)}

.state.warn{color:var(--gold)}

.state.nudge{color:var(--gold); text-decoration:underline;
  text-decoration-color:rgba(244,183,40,.4); text-underline-offset:4px}
.state.nudge:hover{text-decoration-color:var(--gold)}

.bul, .state-list ul{
  list-style:none; margin:10px 0 0; padding:0;
  display:flex; flex-direction:column; gap:5px;
}

.bul li, .state-list ul li{
  position:relative; padding-left:14px;
  font-family:var(--mono); font-size:13px; line-height:1.45;
  letter-spacing:.04em; color:var(--body);
}
.bul li::before, .state-list ul li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:3px; height:3px; background:currentColor;
  
  opacity:.55;
}

.state-list{min-height:0}
.state-list ul li{color:inherit; font-size:13px}

#taskState{margin:18px 0 6px}
.tasks{margin-top:0}

.task{display:flex; align-items:center; gap:18px; padding:17px 18px;
  position:relative}

.task::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--px-rule);
}

.task:first-child::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--px-rule);
}
.tick{width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center;
  border:1px solid var(--line2); border-radius:6px; transition:.3s var(--ease)}
.tick svg{opacity:0; transition:opacity .2s}
.task.done .tick{background:var(--venom); border-color:var(--venom)}
.task.done .tick svg{opacity:1}
.task-name{flex:1; min-width:0; font-size:17px}
.task.done .task-name{color:var(--body)}
.task .act{background:none; border:0; padding:6px 4px; font-family:var(--mono);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--body); cursor:pointer; text-decoration:none; transition:color .2s}
.task .act:hover{color:var(--gold)}
.task .act[disabled]{color:var(--faint); cursor:default}

.task .act[data-ok]{
  min-width:7.5ch; text-align:center;
  font-variant-numeric:tabular-nums;
}

.task .act-wait{color:var(--gold)}

.task.done .act[data-ok]{color:var(--venom)}

@media (max-width:560px){
  .task{
    display:grid; grid-template-columns:20px auto 1fr;
    grid-template-areas:"tick name name" "tick open ok";
    column-gap:14px; row-gap:8px; align-items:center;
  }
  .task .tick{grid-area:tick; align-self:center}
  .task .task-name{grid-area:name; text-align:left}
  .task a.act{grid-area:open; justify-self:start; padding-left:0}
  .task .act[data-ok]{grid-area:ok; justify-self:start}
  
  .task .act{white-space:nowrap}
}

.closing-soon{margin:0 0 18px; padding:10px 14px; border-radius:10px;
  border:1px solid var(--gold); color:var(--gold);
  background:color-mix(in srgb, var(--gold) 8%, transparent);
  font-size:13.5px; line-height:1.45; letter-spacing:.01em}

.closed-note{display:grid; gap:14px; justify-items:start; padding:6px 0}

.closed-note .h3{margin:0; color:var(--bad)}
.closed-note .h3::before{content:"■ "; font-size:.7em; vertical-align:.18em}
.closed-note .body{margin:0; max-width:56ch}
.closed-note .fine{margin:0; max-width:56ch}

.step-pass .body{margin-bottom:6px}
.pass{margin-top:26px; border-radius:14px; overflow:hidden;
  box-shadow:0 36px 80px -36px #000, 0 0 0 1px var(--line2)}
.pass canvas{width:100%; height:auto; display:block}

.sec-never{padding-block:clamp(72px,10vh,120px)}
.never{max-width:680px; padding:clamp(28px,4vw,44px); border:1px solid var(--line);
  border-radius:16px; background:var(--near)}
.never-list{margin:0; padding:0; list-style:none;
  font-size:clamp(18px,2.1vw,23px); font-weight:700; letter-spacing:.01em; line-height:1.5}
.never-list li{padding:14px 0 14px 26px; border-bottom:1px solid var(--line); position:relative}
.never-list li:last-child{border-bottom:0}
.never-list li::before{content:"×"; position:absolute; left:0; top:13px;
  color:var(--bad); font-size:23px; line-height:1}

.sec-end{padding-block:clamp(88px,14vh,160px); text-align:center}
.end{max-width:620px; margin-inline:auto; display:grid; gap:20px; justify-items:center}
.end .body{color:var(--dim)}
.end .btn{margin-top:6px}
.end .fine{margin:0}

.foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding:34px var(--gut); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--faint);
}
.foot-l{display:flex; align-items:center; gap:11px}

.foot-r{display:flex; flex-wrap:wrap; gap:8px 24px}

@media (max-width:620px){
  .foot{
    flex-direction:column; align-items:center; text-align:center;
    gap:18px; padding:30px var(--gut) 38px;
  }
  .foot-l{flex-direction:column; gap:12px}
  .foot-l .dim{line-height:1.8}
  .foot-sep{display:none}
  .foot-pool{display:block}
  .foot-r{flex-wrap:wrap; justify-content:center; gap:12px 18px}
  .foot-r a{white-space:nowrap}
}
.foot-r a{text-decoration:none; transition:color .2s; white-space:nowrap}
.foot-r a:hover{color:var(--gold)}

.doc-foot{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px;
  padding:52px var(--gut) 64px; border-top:1px solid var(--line);
  margin-top:clamp(48px,8vh,90px);
  font-family:var(--mono); font-size:13px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint)}
.doc-foot a{text-decoration:none; transition:color .2s}
.doc-foot a:hover{color:var(--ink)}

.grain{
  position:fixed; inset:-120px; z-index:500; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-14px,9px)}
  33%{transform:translate(11px,-13px)} 50%{transform:translate(-9px,-8px)}
  66%{transform:translate(13px,11px)} 83%{transform:translate(-11px,6px)}
}

.ring{
  position:fixed; z-index:560; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(244,183,40,.55); border-radius:50%; pointer-events:none;
  opacity:0; transition:opacity .35s, width .25s var(--ease), height .25s var(--ease);
  mix-blend-mode:screen;
}
.ring.on{opacity:1}
.ring.big{width:62px; height:62px; margin:-31px 0 0 -31px; border-color:rgba(61,224,138,.6)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .grain{animation:none}
}
@media (hover:none){ .ring{display:none} }

body.hiding main,
body.hiding .nav,
body.hiding .foot{
  filter:brightness(.05) saturate(0) blur(2px);
  transition:filter .45s var(--ease);
}
body.hiding::after{
  content:"nothing here"; position:fixed; inset:0; z-index:490;
  display:grid; place-items:center; pointer-events:none;
  font-family:var(--mono); font-size:15px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--venom);
}

.wordmark{display:block; line-height:0}
.wordmark img{display:block; height:auto; width:auto; max-width:100%}

.wordmark-sm{height:clamp(15px, 1.1vw + 11px, 24px)}
.wordmark-sm img{height:clamp(15px, 1.1vw + 11px, 24px); width:auto}
.wordmark-lg{
  width:clamp(230px,31vw,520px); margin:0 0 26px;
  filter:drop-shadow(0 0 22px rgba(61,224,138,.28));
}
.wordmark-lg img{width:100%; height:auto}

@keyframes flick{
  0%,36%,38%,40%,42%,74%,76%,100%{opacity:1}
  37%{opacity:.16} 39%{opacity:.62} 41%{opacity:.1}
  75%{opacity:.24}
}
.flicker{animation:flick 7.5s linear infinite}
.nav-brand:hover .flicker{animation-duration:1.1s}

@media (max-width:760px){
  .wordmark-lg{width:min(78vw,340px); margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){ .flicker{animation:none} }

.sec-board{background:
  radial-gradient(90% 50% at 50% 0%, rgba(61,224,138,.045), transparent 60%)}

.rules-3{
  list-style:none; margin:clamp(34px,5vh,54px) 0 0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  grid-template-columns:repeat(3,1fr);
}
.rules-3 li{
  display:flex; align-items:flex-start; gap:12px; padding:22px 20px;
  background:var(--void); font-size:17px; line-height:1.65; color:var(--body);
}
.rules-3 span{font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  color:var(--gold); opacity:.8; padding-top:3px}
@media (max-width:900px){ .rules-3{grid-template-columns:1fr} }
.rules-3 li>div{display:grid; gap:5px}
.rules-3 b{color:var(--ink); font-weight:700}

.b-stage{margin-top:clamp(26px,4vh,42px); border:1px solid var(--line);
  border-radius:18px; background:rgba(0,0,0,.35); overflow:hidden}

.b-bar{display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap;
  padding:15px 20px; border-bottom:1px solid var(--line)}
.b-spacer{flex:1 1 auto}
.b-state{display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:13px; letter-spacing:.16em; color:var(--venom)}
.b-state i{width:6px; height:6px; background:var(--venom); flex:0 0 6px;
  box-shadow:0 0 9px var(--venom); animation:pulse 2.4s var(--ease) infinite}
.b-state.closed{color:var(--gold)}
.b-state.closed i{background:var(--gold); box-shadow:0 0 9px var(--gold); animation:none}
.b-live{font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  color:var(--faint); text-transform:uppercase; transition:opacity .4s}
.b-live.off{opacity:0}
.b-kv{display:inline-flex; align-items:baseline; gap:7px;
  font-family:var(--mono); font-size:13px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint)}
.b-kv b{font-size:17px; font-weight:400; color:var(--ink); letter-spacing:0}

.b-canopy{position:relative; isolation:isolate;
  border:1px solid var(--line2); border-radius:12px; overflow:hidden;
  background:#030604}
.b-canopy>canvas{position:absolute; inset:0; width:100%; height:100%;
  z-index:0; image-rendering:pixelated; pointer-events:none}

.b-canopy::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    
    radial-gradient(circle 250px at var(--mx,50%) var(--my,50%),
      rgba(3,6,4,calc(.70 * (1 - var(--open,0)))) 0%,
      rgba(3,6,4,calc(.70 * (1 - var(--open,0) * .86))) calc(20% + var(--open,0) * 16%),
      rgba(3,6,4,calc(.70 - var(--open,0) * .12)) 64%,
      rgba(3,6,4,.70) 100%),
    
    radial-gradient(130% 92% at 50% 44%, transparent 46%, rgba(2,5,3,.80) 100%);
}

.b-canopy::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle 210px at var(--mx,50%) var(--my,50%),
    rgba(102,240,168,calc(.16 * var(--open,0))) 0%,
    rgba(61,224,138,calc(.06 * var(--open,0))) 44%,
    transparent 74%);
  mix-blend-mode:screen;
}

.b-grid{position:relative; z-index:2;
  display:grid; gap:6px; padding:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(20,1fr)}
@media (max-width:1040px){ .b-grid{grid-template-columns:repeat(15,1fr)} }
@media (max-width:640px){ .b-grid{grid-template-columns:repeat(10,1fr); gap:4px} }

.sq{
  aspect-ratio:1; appearance:none; padding:0; cursor:pointer;
  position:relative; border-radius:4px;
  border:1px solid rgba(226,244,232,.38);
  background-color:rgba(3,6,4,.20);
  
  box-shadow:0 0 0 1px rgba(0,0,0,.75),
             inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 0 0 1px rgba(0,0,0,.35);
  background-repeat:no-repeat; background-position:center; background-size:84%;
  transition:background-color .26s var(--ease), border-color .18s,
             transform .2s var(--ease), box-shadow .26s;
}
.sq::after{
  content:""; position:absolute; left:50%; top:52%; width:3px; height:3px;
  margin-left:-1.5px; border-radius:50%; background:var(--venom);
  box-shadow:5px 0 0 var(--venom), 0 0 7px var(--venom);
  opacity:0; transform:scale(.4); transition:opacity .22s, transform .3s var(--ease);
}

.sq:hover,.sq:focus-visible{
  background-color:rgba(61,224,138,.10);
  border-color:rgba(102,240,168,1);
  transform:translateY(-3px) scale(1.16); z-index:6;
  box-shadow:0 16px 34px -10px rgba(0,0,0,.95),
             0 0 0 1px rgba(102,240,168,.5),
             0 0 30px -2px rgba(61,224,138,.75);
}
.sq:hover::after,.sq:focus-visible::after{opacity:.95; transform:none}

.sq.ping{animation:rustle .8s var(--ease)}
@keyframes rustle{
  0%{background-color:rgba(3,6,4,.14)}
  22%{background-color:rgba(61,224,138,.22); border-color:rgba(102,240,168,.8)}
  100%{background-color:rgba(3,6,4,.14); border-color:rgba(170,226,192,.20)}
}

.sq.sealing{
  border-color:rgba(244,183,40,.95);
  background-color:rgba(38,26,3,.72);
  transform:translateY(-3px) scale(1.16); z-index:7;
  box-shadow:0 0 0 1px rgba(244,183,40,.5), 0 0 34px -2px rgba(244,183,40,.8);
}
.sq.sealing::after{opacity:0}

.sq .ghost{
  position:absolute; inset:0; border-radius:3px; pointer-events:none;
  
  background-repeat:no-repeat; background-position:center;
  background-size:100% 100%;
  image-rendering:pixelated;
  
  background-color:#050806;
  opacity:0; transform:scale(.86);
  filter:saturate(1.25) contrast(1.15)
         drop-shadow(0 0 12px rgba(61,224,138,.55));
  animation:ghostIn .62s var(--ease) forwards;
}

.sq .ghost::after{
  content:""; position:absolute; inset:0; border-radius:3px;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.45) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
@keyframes ghostIn{
  0%  {opacity:0;   transform:scale(.86)}
  38% {opacity:.95; transform:scale(1.02)}
  72% {opacity:.58; transform:scale(1)}
  100%{opacity:0;   transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){ .sq .ghost{animation:none; opacity:0} }

.sq .cipher{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; line-height:1;
  letter-spacing:-.02em; color:var(--gold); opacity:.92;
  word-break:break-all; padding:2px; overflow:hidden;
  text-shadow:0 0 6px rgba(244,183,40,.7);
  pointer-events:none;
}

.sq.mine{border-color:var(--gold); background-color:rgba(244,183,40,.14);
  box-shadow:0 0 0 1px rgba(244,183,40,.45), 0 0 18px -6px var(--gold)}
.sq.mine::after{opacity:1; transform:none; background:var(--gold);
  box-shadow:5px 0 0 var(--gold), 0 0 8px var(--gold)}

.sq.open{animation:surface .5s var(--ease) both;
  background-color:rgba(2,4,3,.93); border-color:rgba(244,244,240,.14);
  image-rendering:pixelated; cursor:default}
.sq.open::after{opacity:0}
.sq.open:hover{transform:none; box-shadow:none;
  border-color:rgba(244,244,240,.14); background-color:rgba(2,4,3,.93)}
.sq.open.empty{background-color:rgba(2,4,3,.55);
  border-color:rgba(244,244,240,.05); opacity:.5}
.sq.won{border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold), 0 0 32px -6px var(--gold); z-index:3}
.sq.open.won:hover{border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold), 0 0 32px -6px var(--gold)}

@keyframes surface{
  from{opacity:.15; transform:scale(.72)}
  to{opacity:1; transform:none}
}

.b-foot{display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding:clamp(16px,2.2vh,26px) 20px 20px}
.b-flash{margin:0; font-family:var(--mono); font-size:16px; letter-spacing:.07em;
  color:var(--faint); transition:color .3s}
.b-flash.hot{color:var(--gold)}
.b-act{display:flex; align-items:center; gap:10px}

@media (max-width:480px){
  .b-foot{flex-direction:column; align-items:stretch; gap:12px}
  .b-act{flex-direction:column; align-items:stretch; gap:8px}
}

.b-result{margin-top:clamp(26px,4vh,40px); display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr))}
.b-result[hidden]{display:none}
.br{background:var(--void); padding:20px; display:grid; gap:5px}
.br b{font-family:var(--mono); font-size:30px; font-weight:400; color:var(--ink);
  line-height:1}
.br.good b{color:var(--gold)}
.br i{font-style:normal; font-family:var(--mono); font-size:13px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
.br span{font-size:15px; line-height:1.5; color:var(--body)}

.bp{position:fixed; inset:0; z-index:520; display:grid;
  justify-items:center; align-items:center;
  background:rgba(2,3,4,.8); backdrop-filter:blur(4px); padding:18px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:fade .22s var(--ease)}
.bp > *{margin:auto 0}

@media (max-height:760px){ .bp{align-items:start} .bp > *{margin:0} }
.bp[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.bp-card{position:relative; width:min(400px, calc(100vw - 36px)); max-width:100%;
  padding:26px;
  border:1px solid var(--line2); border-radius:16px; background:#0A0C0D;
  box-shadow:0 40px 90px -24px #000; animation:rise .3s var(--ease)}

.bp-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background:repeating-linear-gradient(45deg,
    rgba(244,183,40,.055) 0 2px, transparent 2px 9px);
  pointer-events:none;
}
.bp-card > *{position:relative; z-index:1}
@keyframes rise{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}
.bp-x{position:absolute; top:14px; right:14px; appearance:none; background:none;
  border:0; color:var(--faint); font-size:26px; line-height:1; cursor:pointer; padding:4px 8px}
.bp-x:hover{color:var(--ink)}
.bp-eyebrow,.bp-label,.bp-cap{font-family:var(--mono); font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.bp-eyebrow{margin:0}
.bp-sq{margin:4px 0 22px; font-family:var(--mono); font-size:34px;
  color:var(--gold); line-height:1; letter-spacing:.04em}
.bp-in{display:flex; align-items:center; gap:10px; margin:8px 0 18px;
  border:1px solid var(--line2); border-radius:10px; padding:13px 15px;
  background:rgba(255,255,255,.02); transition:border-color .2s}
.bp-in:focus-within{border-color:var(--gold)}
.bp-in input{flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--ink); font-family:var(--mono); font-size:28px; letter-spacing:.02em}
.bp-in span{font-family:var(--mono); font-size:14px; color:var(--faint)}
.bp-exact{display:grid; gap:5px; padding:14px 16px; border-radius:10px;
  background:rgba(244,183,40,.07); border:1px solid rgba(244,183,40,.25)}
.bp-val{font-family:var(--mono); font-size:22px; color:var(--gold); line-height:1.2}

.bp-preview{
  
  margin:0 42px 14px 0; padding:8px 11px;
  border:1px solid var(--gold); border-left-width:3px; border-radius:8px;
  background:rgba(244,183,40,.08);
  font-family:var(--mono); font-size:clamp(10px, 2.6vw, 12px); letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold);
}

@media (max-width:400px){
  .bp-preview{margin-right:38px; padding:7px 9px; letter-spacing:.06em}
}
.bp-note{
  margin:10px 0 0; text-align:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--faint);
}

.bp-why{
  margin:12px 0 0; padding:0; list-style:none;
  display:grid; gap:6px;
  font-size:13px; line-height:1.55; color:var(--faint);
}
.bp-why li{position:relative; padding-left:15px}
.bp-why li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:5px; height:5px; background:var(--line2);
}
.bp-why b{color:var(--body); font-weight:600}
.bp-why span{color:var(--gold)}
.bp-warn{margin:14px 0 0; font-size:15px; line-height:1.6; color:var(--body)}
.bp-warn:empty{display:none}
.bp-warn.bad{color:var(--bad)}
.bp-warn.hot{color:var(--gold); border-left:2px solid var(--gold); padding-left:12px}
.bp-warn b{color:var(--ink); font-weight:700}
.bp-warn.hot b{color:var(--gold)}

.sec-proof{background:
  linear-gradient(180deg,transparent,rgba(244,183,40,.025) 45%,transparent)}
.pf-cards{margin-top:clamp(36px,5vh,56px); display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.pf-card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:26px 22px 22px; border:1px solid var(--line); border-radius:16px;
  background:rgba(0,0,0,.34); transition:border-color .45s, background .45s;
}
.pf-card.shown{border-color:rgba(244,183,40,.45); background:rgba(244,183,40,.045)}
.pf-n{margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.16em;
  color:var(--gold); opacity:.75}
.pf-h{margin:0; font-size:20px; font-weight:700; line-height:1.3; color:var(--ink)}
.pf-b{margin:0; font-size:16px; line-height:1.7; color:var(--body); flex:1}
.pf-b b{color:var(--ink); font-weight:700}
.pf-out{display:grid; gap:4px; padding:12px 14px; border-radius:9px;
  background:rgba(255,255,255,.028); border:1px solid var(--line)}
.pf-out span{font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.pf-out code{font-family:var(--mono); font-size:14px; color:var(--ink);
  word-break:break-all; line-height:1.45}
.pf-when,.pf-verdict{margin:0; font-family:var(--mono); font-size:16px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.pf-when.on{color:var(--venom)}
.pf-verdict.ok{color:var(--venom)}
.pf-verdict.bad{color:var(--bad)}

.pf-note{margin:clamp(26px,4vh,40px) 0 0; max-width:74ch; font-size:17px;
  line-height:1.8; color:var(--body);
  padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line2); border-left:3px solid var(--venom);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(18,30,22,.55), rgba(10,14,11,.3))}
.pf-note code{font-family:var(--mono); font-size:14px; color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .sq,.sq.open,.bp,.bp-card{animation:none; transition:none}
}

.ap-wrap{
  display:grid; gap:clamp(18px,2.6vw,34px); margin-top:clamp(34px,5vh,54px);
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr); align-items:start;
}
@media (max-width:920px){
  .ap-wrap{grid-template-columns:1fr}
  
  .ap-side{grid-template-columns:auto 1fr; gap:14px 18px; align-items:center}
  .ap-stage{width:clamp(110px,26vw,168px); grid-row:span 2}
  .ap-side-note{grid-column:2}
}
@media (max-width:520px){
  .ap-side{grid-template-columns:1fr}
  .ap-stage{width:100%; max-width:240px; grid-row:auto; justify-self:center}
  .ap-side-note{grid-column:auto}
}

.ap-side{display:grid; gap:16px; align-content:start;
  padding:clamp(18px,2.4vw,26px); border:1px solid var(--line);
  border-radius:18px; background:rgba(0,0,0,.34)}
.ap-stage{position:relative; aspect-ratio:1; border-radius:13px; overflow:hidden;
  background:#04060A; border:1px solid var(--line)}
.ap-stage canvas{width:100%; height:100%; display:block; image-rendering:pixelated}
.ap-tag{position:absolute; left:12px; top:12px; padding:5px 10px; border-radius:999px;
  font-family:var(--mono); font-size:13px; letter-spacing:.15em;
  color:var(--venom); border:1px solid rgba(61,224,138,.42);
  background:rgba(4,8,6,.72); transition:color .4s, border-color .4s}
.ap-tag.mid{color:var(--gold); border-color:rgba(244,183,40,.45)}
.ap-tag.ghost{color:var(--faint); border-color:var(--line2)}

.ap-meter{display:grid; gap:7px 12px; align-items:center;
  grid-template-columns:1fr auto}
.ap-meter-k{font-family:var(--mono); font-size:13px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint)}
.ap-meter-v{font-family:var(--mono); font-size:16px; color:var(--ink)}
.ap-meter-bar{grid-column:1/-1; grid-row:2; height:6px; border-radius:99px;
  background:rgba(255,255,255,.055); overflow:hidden}
.ap-meter-bar i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--venom),var(--gold));
  transition:width .7s var(--ease)}
.ap-side-note{margin:0; font-size:16px; line-height:1.7; color:var(--faint)}

.ap-wrap .console{margin-top:0}

.qs{display:grid; gap:34px; margin-top:26px}
.q{display:grid; gap:12px; position:relative}
.q + .q::before{
  content:""; position:absolute; left:0; right:0; top:-18px; height:2px;
  background:var(--px-rule-faint);
}
.q-head{display:grid; gap:6px}
.q-q{margin:0; font-size:18px; font-weight:700; line-height:1.45; color:var(--ink)}
.q-help{margin:0; font-size:16px; line-height:1.68; color:var(--faint); max-width:52ch}

.q-notes{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:7px}
.q-note{
  display:flex; align-items:flex-start; gap:9px;
  font-family:var(--mono); font-size:12px; line-height:1.6;
  letter-spacing:.05em; text-transform:uppercase;
}
.q-note-i{
  flex:0 0 auto; width:11px; height:11px; margin-top:3px; position:relative;
}
.q-note-t{min-width:0}

.q-note-warn{color:var(--gold)}
.q-note-warn .q-note-i{border:2px solid var(--gold)}
.q-note-warn .q-note-i::after{
  content:""; position:absolute; left:1px; right:1px; top:3px; height:2px;
  background:var(--gold);
}

.q-note-ok{color:var(--venom)}
.q-note-ok .q-note-i{border:2px solid var(--venom)}
.q-note-ok .q-note-i::after{
  content:""; position:absolute; left:1px; top:0; width:3px; height:6px;
  border-right:2px solid var(--venom); border-bottom:2px solid var(--venom);
  transform:rotate(38deg);
}

.q-opts{display:flex; flex-wrap:wrap; gap:8px}
.q-opt{
  appearance:none; cursor:pointer; padding:10px 14px; border-radius:9px;
  border:1px solid var(--line2); background:rgba(255,255,255,.02);
  color:var(--body); font-size:16px; line-height:1.3; text-align:left;
  transition:border-color .2s, background .2s, color .2s, transform .18s var(--ease);
}
.q-opt:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-1px)}
.q-opt.on{border-color:var(--gold); background:rgba(244,183,40,.1); color:var(--gold)}

.q-text{
  width:100%; resize:vertical; min-height:110px; padding:14px 16px;
  border-radius:11px; border:1px solid var(--line2);
  background:rgba(255,255,255,.02); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7; outline:none;
  transition:border-color .2s;
}
.q-text:focus{border-color:var(--gold)}
.q-text::placeholder{color:var(--faint)}
.q-count{margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); text-align:right;
  transition:color .25s}
.q-count.ok{color:var(--venom)}

.q-count.low{color:var(--gold)}
.q-count.bad{color:var(--bad)}

.q-wants .q-text{border-color:rgba(244,183,40,.72)}

.q-bad{
  margin:8px 0 0; font-family:var(--mono); font-size:12px; line-height:1.55;
  letter-spacing:.04em; color:var(--bad); max-width:56ch;
}
.q-bad[hidden]{display:none}

.q-gh{
  display:flex; align-items:center; gap:14px; margin:0 0 10px;
  padding:13px 15px; border-radius:10px;
  border:1px solid var(--line2); background:rgba(255,255,255,.02);
  transition:border-color .22s, background .22s;
}
.q-gh.on{border-color:rgba(61,224,138,.45); background:rgba(14,30,20,.5)}
.q-gh-i{
  width:26px; height:26px; flex:0 0 26px; position:relative;
  border:1px solid var(--line2); border-radius:6px; background:#060a07;
}

.q-gh-i::before{
  content:""; position:absolute; left:6px; top:6px; width:12px; height:9px;
  border:2px solid var(--body); border-radius:2px;
}
.q-gh-i::after{
  content:""; position:absolute; left:9px; top:15px; width:6px; height:5px;
  border:2px solid var(--body); border-top:0;
}
.q-gh.on .q-gh-i{border-color:rgba(61,224,138,.5)}
.q-gh.on .q-gh-i::before,
.q-gh.on .q-gh-i::after{border-color:var(--venom)}
.q-gh-b{display:grid; gap:3px; flex:1; min-width:0}
.q-gh-n{
  font-family:var(--mono); font-size:15px; color:var(--ink); font-weight:400;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.q-gh.on .q-gh-n{color:var(--venom)}
.q-gh-h{font-size:13px; line-height:1.55; color:var(--faint)}
.q-gh .btn{flex:0 0 auto}

.q-gh-x{
  flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border:0; border-radius:7px; background:none; cursor:pointer;
  color:var(--faint); font-size:20px; line-height:1; transition:.2s;
}
.q-gh-x:hover{color:var(--bad); background:rgba(240,115,106,.1)}
.q-gh [hidden]{display:none !important}

.q-handle{display:inline-flex; align-items:center; gap:2px; padding:11px 14px;
  border-radius:10px; border:1px solid var(--line2);
  background:rgba(255,255,255,.02); transition:border-color .2s;
  width:auto; max-width:100%}
.q-handle:focus-within{border-color:var(--gold)}
.q-at{font-family:var(--mono); font-size:15px; color:var(--faint); flex:0 0 auto}
.q-handle input{flex:0 1 auto; min-width:0; background:none; border:0; outline:none;
  color:var(--ink); font-family:var(--mono); font-size:15px}

.state.ok{color:var(--venom)}

@media (prefers-reduced-motion:reduce){ .q-opt{transition:none} }

.q-short{min-height:64px}

.why{margin-top:clamp(26px,4vh,40px)}
.why-tag,.receipt-tag{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 16px;
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--venom);
}
.why-tag::before,.receipt-tag::before{
  content:""; width:8px; height:8px; background:var(--venom);
  box-shadow:0 0 9px var(--venom);
}
.why-grid{display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.why-card{
  padding:clamp(18px,2.3vw,26px); border:1px solid var(--line2);
  border-radius:12px; background:linear-gradient(180deg,rgba(18,26,20,.6),rgba(9,13,10,.35));
  transition:border-color .25s, transform .25s var(--ease);
}
.why-card:hover{border-color:rgba(61,224,138,.45); transform:translateY(-3px)}
.why-card b{display:block; font-size:19px; line-height:1.4; margin-bottom:10px}
.why-card p{margin:0; font-size:16px; line-height:1.75; color:var(--body)}
.why-card em{color:var(--venom); font-style:normal}

.receipt{
  margin-top:clamp(26px,4vh,40px); display:grid; gap:clamp(18px,2.6vw,32px);
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:center;
  padding:clamp(20px,2.8vw,32px); border:1px solid var(--line2);
  border-left:3px solid var(--gold); border-radius:14px;
  background:linear-gradient(180deg,rgba(26,22,10,.5),rgba(10,12,10,.3));
}
.receipt-copy p{margin:0 0 12px; font-size:17px; line-height:1.8; color:var(--body)}
.receipt-copy p:last-child{margin-bottom:0}
.receipt-copy .h3{margin:0 0 14px}
.receipt-chip{
  display:grid; gap:7px; padding:20px; border:1px solid var(--line2);
  border-radius:10px; background:rgba(4,6,5,.62);
}
.rc-k{font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.rc-h{font-family:var(--mono); font-size:15px; color:var(--gold);
  word-break:break-all}

.pf-check{
  margin:34px 0 0; padding:clamp(20px,3vw,30px);
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg,rgba(61,224,138,.045),transparent 60%);
}
.pf-check p{margin:0 0 12px; font-size:16px; line-height:1.75; color:var(--body); max-width:66ch}
.pf-check .h3{margin:6px 0 12px}
.pf-cmd{
  margin:0 0 14px; padding:14px 16px; overflow-x:auto;
  border:1px solid var(--line2); border-radius:9px; background:#050807;
}
.pf-cmd code{
  font-family:var(--mono); font-size:14px; line-height:1.9;
  color:var(--venom); white-space:pre; display:block;
}

.rc-preview{
  padding:2px 8px; border:1px solid var(--line2); border-radius:4px;
  color:var(--faint); letter-spacing:.16em;
}
.rc-ok{
  margin-top:8px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--venom);
}
.rc-ok::before{content:"✓ "; }
@media (max-width:820px){ .receipt{grid-template-columns:1fr} }

.q[data-q="referrer"]{
  display:none; margin-top:-6px;
  border-left:2px solid var(--venom); padding-left:18px;
}
.q[data-q="referrer"].q-on{
  display:block;
  animation:qopen .34s var(--ease) both;
}
@keyframes qopen{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .q[data-q="referrer"].q-on{animation:none}
}

.worked{
  margin:clamp(24px,3.5vh,38px) 0 0;
  padding:clamp(20px,2.7vw,30px); border:1px solid var(--line2);
  border-radius:14px; background:linear-gradient(180deg,rgba(26,22,10,.42),rgba(10,12,10,.28));
}
.worked-tag{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 20px;
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
.worked-tag::before{content:""; width:8px; height:8px; background:var(--gold);
  box-shadow:0 0 9px rgba(244,183,40,.8)}
.worked-flow{display:grid; gap:2px}
.wk{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:17px 0; border-top:1px solid var(--line);
}
.wk:first-child{border-top:0; padding-top:0}
.wk-n{font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:var(--gold);
  padding-top:5px}
.wk p{margin:0; font-size:18px; line-height:1.75; color:var(--body)}
.wk p + p{margin-top:12px}
.wk b{color:var(--ink)}
.wk-amt{font-family:var(--mono); color:var(--gold); white-space:nowrap}
.wk-win{color:var(--venom)}
.wk-lose{color:var(--ink)}
.worked-foot{
  margin:20px 0 0; padding-top:17px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint);
}
.worked-foot b{color:var(--ink); font-weight:400}
@media (max-width:640px){ .wk{grid-template-columns:1fr; gap:7px} .wk-n{padding-top:0} }

.faq{display:grid; gap:14px; margin-top:clamp(24px,3.5vh,36px); max-width:80ch}
.fq{
  position:relative;
  border:1px solid var(--line); border-radius:12px;
  
  overflow:visible;
  background:linear-gradient(180deg,rgba(18,24,20,.5),rgba(9,12,10,.3));
  transition:border-color .22s;
}

.fq + .fq::before{
  content:""; position:absolute; left:clamp(26px,2.9vw,34px);
  top:-15px; width:2px; height:15px;
  background:var(--px-rule-v); pointer-events:none;
}
.fq[open]{border-color:var(--line2)}
.fq:hover{border-color:var(--line2)}
.fq summary{
  display:flex; align-items:flex-start; gap:14px; cursor:pointer;
  padding:19px clamp(18px,2.2vw,24px);
  font-size:19px; line-height:1.5; font-weight:600; color:var(--ink);
  list-style:none;
}
.fq summary::-webkit-details-marker{display:none}
.fq summary::before{
  content:"+"; flex:0 0 auto; width:22px;
  font-family:var(--mono); font-size:21px; line-height:1.35; color:var(--gold);
  transition:transform .22s var(--ease);
}
.fq[open] summary::before{content:"–"; transform:none}
.fq summary:hover{color:var(--gold)}
.fq > div{padding:0 clamp(18px,2.2vw,24px) 21px 54px}
.fq p{margin:0 0 13px; font-size:17px; line-height:1.85; color:var(--body); max-width:64ch}
.fq p:last-child{margin-bottom:0}
.fq em{color:var(--venom); font-style:normal}
@media (max-width:560px){
  .fq summary{font-size:17px; padding:16px 16px}
  .fq > div{padding:0 16px 18px 16px}
}

.task-bonus{opacity:.82}
.task-bonus::after{background:var(--px-rule-faint)}
.task-note{display:block; margin-top:4px; font-family:var(--sans);
  font-size:14px; letter-spacing:0; text-transform:none; color:var(--faint)}

.safe-note{
  display:flex; align-items:flex-start; gap:10px;
  margin:12px 0 0; font-size:14px; line-height:1.7; color:var(--faint);
  max-width:58ch;
}
.safe-i{
  flex:0 0 auto; width:13px; height:15px; margin-top:3px; position:relative;
}

.safe-i::before{
  content:""; position:absolute; inset:0;
  border:2px solid var(--venom);
  border-radius:2px 2px 6px 6px;
  opacity:.75;
}

.safe-i::after{
  content:""; position:absolute; left:3px; top:4px; width:3px; height:6px;
  border-right:2px solid var(--venom); border-bottom:2px solid var(--venom);
  transform:rotate(38deg);
}

.helper{margin-top:14px; border:1px solid var(--line2); border-radius:10px;
  background:rgba(14,19,15,.55)}
.helper summary{
  cursor:pointer; list-style:none; padding:13px 16px;
  font-family:var(--mono); font-size:14px; letter-spacing:.06em;
  color:var(--gold);
}
.helper summary::-webkit-details-marker{display:none}
.helper summary::before{content:"? "; }
.helper summary:hover{color:var(--ink)}
.helper > div{padding:0 16px 16px}
.helper p{margin:0 0 12px; font-size:15px; line-height:1.7; color:var(--body)}
.helper-lede{margin:0 0 14px !important; color:var(--faint) !important; font-size:14px !important}

.picks{list-style:none; margin:0; padding:0}
.picks li{
  display:flex; align-items:center; gap:12px;
  padding:11px 2px; position:relative;
}
.picks li::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--px-rule-faint);
}
.picks li:last-child::after{content:none}
.picks a{
  
  justify-self:start;
  font-family:var(--mono); font-size:15px; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line2);
  transition:color .2s, border-color .2s;
}
.picks a:hover{color:var(--gold); border-color:var(--gold)}
.picks .pick-b{display:grid; gap:3px; flex:1; min-width:0}
.picks em{font-style:normal; font-size:13px; color:var(--faint); letter-spacing:.01em}

.pick-i{
  width:26px; height:26px; flex:0 0 26px; position:relative;
  border:1px solid var(--line2); border-radius:6px; background:#060a07;
}
.pick-i::after,.pick-i::before{content:""; position:absolute}

.pick-phone::after{left:6px; top:2px; width:8px; height:16px;
  border:2px solid var(--venom); border-radius:2px}

.pick-desk::after{left:3px; top:4px; width:14px; height:10px;
  border:2px solid var(--body); border-radius:2px;
  box-shadow:0 5px 0 -3px var(--body)}

.pick-ext::after{left:3px; top:4px; width:14px; height:12px;
  border:2px solid var(--gold); border-radius:2px}
.pick-ext::before{left:3px; top:4px; width:14px; height:2px; background:var(--gold)}

.pick-both::after{left:4px; top:6px; width:10px; height:8px;
  border:2px solid var(--body); border-radius:2px}
.pick-both::before{right:4px; top:4px; width:6px; height:12px;
  border:2px solid var(--body); border-radius:2px}

.helper-note{margin:0 !important; padding-top:14px; position:relative;
  font-size:14px !important; color:var(--faint) !important}
.helper-note::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--px-rule-faint);
}
.helper-note b{color:var(--bad)}

.b-rehearse{
  padding:4px 10px; border:1px solid var(--gold); border-radius:5px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); white-space:nowrap;
}

.sec-ready{background:linear-gradient(180deg,transparent,rgba(61,224,138,.025) 45%,transparent)}
.ready-grid{
  display:grid; gap:16px; margin-top:clamp(26px,4vh,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  align-items:start;
}
.ready-card{
  padding:clamp(20px,2.7vw,30px); border:1px solid var(--line2);
  border-radius:14px; background:linear-gradient(180deg,rgba(18,24,20,.55),rgba(9,12,10,.3));
}
.ready-n{
  margin:0 0 12px; font-family:var(--mono); font-size:13px;
  letter-spacing:.2em; color:var(--gold);
}
.ready-card .h3{margin:0 0 12px}
.ready-lede{margin:0 0 20px; font-size:17px; line-height:1.8; color:var(--body)}
.ready-lede code{font-family:var(--mono); font-size:15px; color:var(--venom)}

.ready-warn{
  margin:0; padding:15px 17px; border:1px solid var(--line);
  border-left:3px solid var(--bad); border-radius:9px;
  background:rgba(30,14,13,.35);
  font-size:15px; line-height:1.75; color:var(--body);
}
.ready-warn b{color:var(--ink)}

.bridge{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center;
  padding:20px 18px; border:1px solid var(--line2); border-radius:11px;
  background:rgba(6,9,7,.65); margin-bottom:18px;
}
.br-side{display:grid; gap:6px; min-width:0}
.br-k{font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.br-v{font-family:var(--mono); font-size:15px; color:var(--ink); line-height:1.5}
.br-end .br-v{color:var(--venom)}
.br-arrow{display:grid; justify-items:center; gap:7px}
.br-arrow i{
  display:block; width:6px; height:6px; background:var(--gold);
  animation:brFlow 1.5s var(--ease) infinite;
}
.br-arrow i:nth-child(2){animation-delay:.18s}
.br-arrow i:nth-child(3){animation-delay:.36s}
.br-arrow span{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold)}
@keyframes brFlow{0%,100%{opacity:.18} 45%{opacity:1}}
.ready-note{margin:0; font-size:15px; line-height:1.75; color:var(--faint)}

@media (max-width:560px){
  .wallet{grid-template-columns:auto 1fr}
  .w-tag{grid-column:2; justify-self:start; margin-top:6px}
  .bridge{grid-template-columns:1fr; gap:12px}
  .br-arrow{grid-auto-flow:column; gap:9px}
}
@media (prefers-reduced-motion:reduce){ .br-arrow i{animation:none; opacity:.8} }

.pfp{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2.4vw,24px);
  align-items:center; margin-top:18px; padding:clamp(16px,2.2vw,22px);
  border:1px solid var(--line2); border-radius:12px;
  background:linear-gradient(180deg,rgba(20,26,21,.5),rgba(9,12,10,.3));
}
.pfp-stage{
  position:relative; width:clamp(104px,15vw,140px); aspect-ratio:1;
  border:1px solid var(--line2); border-radius:10px; overflow:hidden;
  background:#060a07;
}
.pfp-stage img{
  width:100%; height:100%; object-fit:cover; image-rendering:pixelated;
  opacity:0; transform:scale(1.08);
  transition:opacity .34s var(--ease), transform .5s var(--ease);
}
.pfp.rolled .pfp-stage img{opacity:1; transform:none}
.pfp-id{
  position:absolute; left:0; right:0; bottom:0; padding:12px 8px 6px;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--ink);
  background:linear-gradient(transparent,rgba(0,0,0,.85));
}
.pfp-side{display:grid; gap:9px; min-width:0}
.pfp-k{
  margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
.pfp-h{margin:0; font-size:15px; line-height:1.7; color:var(--body); max-width:52ch}
.pfp-act{display:flex; gap:9px; flex-wrap:wrap; margin-top:4px}
@media (max-width:560px){
  .pfp{grid-template-columns:1fr; justify-items:start}
  .pfp-stage{width:128px}
}
@media (prefers-reduced-motion:reduce){
  .pfp-stage img{transition:none; opacity:1; transform:none}
}

@media (max-width:640px){
  .b-grid{grid-template-columns:repeat(6,1fr); gap:6px; padding:12px}
}

@media (max-width:560px){
  .spec{grid-template-columns:1fr; gap:10px}
}

.preview-flag{
  display:flex; align-items:flex-start; gap:13px; flex-wrap:wrap;
  margin:10px 0 30px; padding:15px 18px; max-width:72ch;
  border:1px solid rgba(244,183,40,.38); border-radius:10px;
  background:rgba(40,30,6,.35);
  font-size:16px; line-height:1.75; color:var(--body);
}
.preview-flag > span{
  flex:0 0 auto; padding:3px 10px; border:1px solid var(--gold);
  border-radius:5px; font-family:var(--mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}

.sound{
  width:44px; height:44px; padding:0; flex:0 0 auto;
  border:1px solid var(--line2); border-radius:8px; background:transparent;
  cursor:pointer; display:grid; place-items:center;
  transition:border-color .2s, background .2s;
}
.sound:hover{border-color:var(--ink); background:rgba(255,255,255,.05)}
.sound.on{border-color:var(--venom)}

.sound-ico{display:block; color:var(--faint); transition:color .2s}
.sound.on .sound-ico{color:var(--venom)}
.sound-w1, .sound-w2{opacity:0; transition:opacity .15s steps(2, end)}
.sound-x{opacity:1; transition:opacity .15s steps(2, end)}
.sound.on .sound-w1, .sound.on .sound-w2{opacity:1; animation:sndPulse 1.9s steps(2, end) infinite}
.sound.on .sound-w2{animation-delay:.32s}
.sound.on .sound-x{opacity:0}
@keyframes sndPulse{0%,100%{opacity:1} 50%{opacity:.35}}

.snd{display:flex; align-items:center; gap:7px}

.snd-vol{display:flex; align-items:center; gap:5px}
.snd-step{
  width:30px; height:30px; flex:0 0 auto; padding:0;
  display:grid; place-items:center;
  border:1px solid var(--line2); border-radius:7px; background:none;
  color:var(--faint); font:600 18px/1 var(--sans); cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.snd-step:hover{color:var(--ink); border-color:var(--ink); background:rgba(255,255,255,.05)}
.snd-step:active{transform:translateY(1px)}
.snd-bars{
  display:flex; align-items:flex-end; gap:3px;
  cursor:pointer; border-radius:5px;
  
  padding:7px 3px; margin:-7px -3px;
}
.snd-bars:focus-visible{outline:2px solid var(--venom); outline-offset:3px}
.snd-bars i{
  width:4px; border-radius:2px; background:var(--line2);
  transition:background .18s var(--ease);
}
.snd-bars i:nth-child(1){height:5px}
.snd-bars i:nth-child(2){height:8px}
.snd-bars i:nth-child(3){height:11px}
.snd-bars i:nth-child(4){height:14px}
.snd-bars i:nth-child(5){height:17px}
.snd-bars i.lit{background:var(--venom); box-shadow:0 0 6px -1px var(--venom)}
.snd-bars:hover i{background:var(--body)}
.snd-bars:hover i.lit{background:var(--venom)}

@media (max-width:560px){
  .snd-bars{display:none}
  .snd-step{width:34px; height:34px; font-size:19px}
  .snd{gap:5px}
}

@media (max-width:340px){
  .snd-vol{display:none}
}
.nav-right{position:relative}

@media (prefers-reduced-motion:reduce){ .sound.on .sound-w1, .sound.on .sound-w2{animation:none} }