/* ══════════════════════════════════════════════════════════════════════
   STAYED — 1999 Korean memory archive
   Fixed single-screen terminal. No document scroll, ever.
   The stage is a 1536 × 1024 board; 1 board-pixel = var(--u).
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --cyan:#67ECFF;
  --cyan-2:#46C8DC;
  --cyan-3:#2A7C8C;
  --lime:#C0EF24;
  --lime-2:#B9E92E;
  --lime-3:#7E900F;
  --winbar-a:#3A83A6;
  --winbar-b:#26697F;
  --winframe:#CCCFC9;
  --grid:#17303A;
  --txt:#DCE7EC;
  --txt-dim:#8FA6AE;
  --shell:#03090E;

  --f-crt:'VT323', ui-monospace, monospace;
  --f-disp:'Saira Condensed', 'Arial Narrow', sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;
  --f-kr:'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;

  --u: min(0.0651041667vw, 0.09765625vh);
  /* black bar beside the contain-fitted stage; the rail bleeds into it so the
     menu sits against the real window edge instead of floating in it */
  --lb: max(0px, (100vw - 1536 * var(--u)) / 2);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{
  margin:0; background:#000; color:var(--txt);
  font-family:var(--f-mono); -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; touch-action:manipulation;
}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
/* line icons are stroked; the mascot and the chain mark are filled artwork */
.navi__ico,.cta__arw{fill:none; stroke:currentColor}
.navi__ico path,.cta__arw path{fill:none; stroke:currentColor; stroke-width:1.4; shape-rendering:crispEdges}
.rail__leaf path{stroke:none}
:focus-visible{outline:calc(3*var(--u)) solid var(--lime); outline-offset:calc(2*var(--u))}

/* ═══════════════════ SHELL ═══════════════════ */
.app{
  position:fixed; inset:0; display:grid; place-items:center;
  background:#000; overflow:hidden; isolation:isolate;
}
.app__backdrop{
  position:absolute; inset:-6%; z-index:0;
  background:url("../stayed-hero-backdrop.jpg?v=1") center/cover no-repeat;
  filter:brightness(.30) saturate(.7);
}
.app__backdrop::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(115% 85% at 50% 45%, transparent 35%, #000 100%);
}

.stage{
  position:relative; z-index:1;
  width:calc(1536*var(--u)); height:calc(1024*var(--u));
  box-shadow:0 0 calc(140*var(--u)) rgba(0,0,0,.95);
  contain:layout paint;
}
.stage__plate{position:absolute; inset:0; width:100%; height:100%; object-fit:fill}
/* ambient film — a feathered window over the glowing module only, so every
   pixel outside it stays the approved plate */
.stage__film{
  position:absolute; z-index:2; pointer-events:none; object-fit:fill;
  left:calc(430*var(--u)); top:calc(455*var(--u));
  width:calc(670*var(--u)); height:calc(494*var(--u));
  opacity:0; transition:opacity 1.6s ease;
  /* light-only difference layer: black adds nothing, so drift reads as glow,
     never as a ghosted second copy of the artwork */
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 48% 46%, #000 42%, transparent 92%);
  mask-image:radial-gradient(ellipse 60% 58% at 48% 46%, #000 42%, transparent 92%);
}
.stage__film.is-on{opacity:.88}
.stage__scan{
  position:absolute; inset:0; z-index:12; pointer-events:none; opacity:.30;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.6) 0 calc(1*var(--u)), transparent calc(1*var(--u)) calc(3*var(--u)));
  mix-blend-mode:multiply;
}
.stage__flash{
  position:absolute; inset:0; z-index:13; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent 0%, rgba(140,240,255,.20) 46%, rgba(255,255,255,.45) 50%, rgba(140,240,255,.20) 54%, transparent 100%);
}
.stage.is-switching .stage__flash{animation:sweep .42s ease-out}
@keyframes sweep{0%{opacity:0;transform:translateY(-60%)}25%{opacity:1}100%{opacity:0;transform:translateY(60%)}}

/* ═══════════════════ LEFT RAIL ═══════════════════ */
.rail{
  position:absolute; top:0; bottom:0; z-index:8;
  left:calc(-1 * var(--lb));
  width:calc(10.4818% + var(--lb));         /* 161 / 1536, bled to the window edge */
  background:#000;
  border-right:calc(3*var(--u)) solid var(--lime-3);
}
.rail__brand{
  position:absolute; margin-left:var(--lb); left:calc(14*var(--u)); top:calc(40.6*var(--u));
  text-align:left; color:var(--lime);
  font:400 calc(29.1*var(--u))/1 var(--f-crt); letter-spacing:calc(2.6*var(--u));
  text-shadow:0 0 calc(11*var(--u)) rgba(192,239,36,.55);
}
.rail__brand:hover{color:#DBFF4C}
.rail__mascot{
  position:absolute; margin-left:var(--lb); left:calc(4*var(--u)); top:calc(88*var(--u));
  width:calc(64*var(--u)); height:calc(64*var(--u));
  object-fit:contain; image-rendering:pixelated;
  filter:drop-shadow(0 0 calc(8*var(--u)) rgba(192,239,36,.55));
  animation:hover 5s ease-in-out infinite;
}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-3*var(--u)))}}
.rail__rule{
  position:absolute; margin-left:var(--lb); left:calc(14*var(--u)); top:calc(178*var(--u));
  width:calc(130*var(--u)); height:calc(2*var(--u));
  background:repeating-linear-gradient(90deg,#5D6C6E 0 calc(3*var(--u)), transparent calc(3*var(--u)) calc(6*var(--u)));
}
.rail__nav{list-style:none; margin:0; padding:0; position:absolute; left:0; right:calc(3*var(--u)); top:calc(218*var(--u))}
.rail__nav li{height:calc(86*var(--u))}
.navi{
  display:flex; width:100%; align-items:center; gap:calc(12.5*var(--u));
  padding-left:calc(14*var(--u) + var(--lb)); height:calc(50*var(--u)); text-align:left;
  transition:transform .16s ease;
}
.navi__ico{
  flex:0 0 auto; width:calc(36*var(--u)); height:calc(36*var(--u)); margin-top:calc(-3*var(--u));
  color:var(--cyan-2); filter:drop-shadow(0 0 calc(5*var(--u)) rgba(70,200,220,.5));
  transition:color .16s ease;
}
.navi__txt{display:block; line-height:1}
.navi__txt b{display:block; width:max-content; font:500 calc(19*var(--u))/1 var(--f-kr); color:#E6EEF1;
  margin-bottom:calc(3*var(--u)); transform:scaleX(.785); transform-origin:left center}
.navi__txt i{
  display:block; font:400 calc(19.6*var(--u))/1 var(--f-crt); font-style:normal;
  color:#9FB2B7; letter-spacing:calc(2.16*var(--u));
}
.navi:hover{transform:translateX(calc(4*var(--u)))}
.navi:hover .navi__ico{color:var(--cyan)}
.navi:hover .navi__txt i{color:#D6E5E9}
.navi.is-active .navi__ico{color:var(--cyan); filter:drop-shadow(0 0 calc(9*var(--u)) rgba(103,236,255,.7))}
.navi.is-active .navi__txt i{color:var(--lime); text-shadow:0 0 calc(9*var(--u)) rgba(192,239,36,.55)}

.rail__x{
  position:absolute; margin-left:var(--lb); left:calc(14*var(--u)); top:calc(752*var(--u));
  width:calc(137*var(--u)); height:calc(44*var(--u));
  display:flex; align-items:center; justify-content:center; gap:calc(9*var(--u));
  border:calc(2*var(--u)) solid rgba(103,236,255,.42);
  color:var(--cyan-2); font:400 calc(20*var(--u))/1 var(--f-crt); letter-spacing:calc(.6*var(--u));
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.rail__x:hover{color:var(--cyan); border-color:var(--cyan); background:rgba(103,236,255,.08)}
.rail__xi{width:calc(15*var(--u)); height:calc(15*var(--u)); flex:0 0 auto}
.rail__status{
  position:absolute; margin-left:var(--lb); left:calc(14*var(--u)); top:calc(826*var(--u));
  width:calc(125*var(--u)); height:calc(49*var(--u));
  display:flex; align-items:center; justify-content:center; gap:calc(8*var(--u));
  color:var(--lime); font:400 calc(18*var(--u))/1 var(--f-crt); letter-spacing:calc(.7*var(--u)); white-space:nowrap;
  border:calc(2*var(--u)) dotted var(--lime);
  text-shadow:0 0 calc(9*var(--u)) rgba(192,239,36,.6);
}
.rail__dot{
  width:calc(11*var(--u)); height:calc(11*var(--u)); background:var(--lime);
  clip-path:polygon(50% 0,68% 32%,100% 50%,68% 68%,50% 100%,32% 68%,0 50%,32% 32%);
  animation:blink 2.6s steps(1) infinite;
}
@keyframes blink{0%,74%{opacity:1}78%,100%{opacity:.2}}
.rail__chain{
  position:absolute; margin-left:var(--lb); left:calc(14*var(--u)); top:calc(917*var(--u));
  display:flex; align-items:flex-start; gap:calc(6*var(--u)); color:var(--lime);
}
.rail__leaf{width:calc(29*var(--u)); height:calc(39*var(--u)); flex:0 0 auto}
.rail__chain span{font:400 calc(23.2*var(--u))/calc(17*var(--u)) var(--f-crt); letter-spacing:calc(2.1*var(--u)); margin-top:calc(5*var(--u))}

/* ═══════════════════ PERSISTENT CHROME ═══════════════════ */
.pill{
  position:absolute; z-index:7;
  left:42.122%; top:1.367%; width:16.667%; height:4.688%;
  display:flex; align-items:center; justify-content:center; gap:calc(12*var(--u));
  background:#04090C; border:calc(3*var(--u)) solid var(--lime);
  color:var(--lime); font:400 calc(38*var(--u))/1 var(--f-crt); letter-spacing:calc(1.5*var(--u));
  text-shadow:0 0 calc(10*var(--u)) rgba(192,239,36,.6);
  box-shadow:0 0 calc(24*var(--u)) rgba(192,239,36,.22);
  --n:calc(9*var(--u));
  clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,0 calc(100% - var(--n)),0 var(--n));
}
.pill:hover{background:#0A140A}
.pill__dot{width:calc(10*var(--u)); height:calc(10*var(--u)); border-radius:50%; background:var(--lime)}

.ticker{
  position:absolute; z-index:7; margin:0;
  left:29.232%; top:95.02%; width:46.419%; height:3.32%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(3,8,11,.94); border:calc(2*var(--u)) solid rgba(228,238,242,.9);
  color:#EAF2F5; font:400 calc(21.4*var(--u))/1 var(--f-crt); letter-spacing:calc(.1*var(--u));
  padding-bottom:calc(2*var(--u));
  --n:calc(8*var(--u));
  clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,0 calc(100% - var(--n)),0 var(--n));
}
.ticker em{font-style:normal; color:var(--lime)}

/* ── contract-address bar ── */
.ca{gap:calc(14*var(--u)); cursor:pointer; transition:border-color .16s ease, background .16s ease}
.ca:hover{background:rgba(8,18,10,.96); border-color:var(--lime)}
.ca__k{
  flex:0 0 auto; padding:calc(2*var(--u)) calc(8*var(--u));
  background:var(--lime); color:#0A1206; letter-spacing:calc(1.5*var(--u));
  font-size:calc(18*var(--u)); line-height:1.25;
}
.ca__v{letter-spacing:calc(1*var(--u)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ca__i{
  flex:0 0 auto; width:calc(17*var(--u)); height:calc(17*var(--u));
  fill:none; stroke:currentColor; opacity:.75;
}
.ca__i path{fill:none; stroke:currentColor; stroke-width:1.4; shape-rendering:crispEdges}
.ca:hover .ca__i{opacity:1; color:var(--lime)}
.ca.is-soon{cursor:default}
.ca.is-soon .ca__k{background:#5C6B12; color:#C7D89A}
.ca.is-soon .ca__v{color:#8FA6AE}
.ca.is-soon .ca__i{display:none}
.ca.is-soon:hover{background:rgba(3,8,11,.94); border-color:rgba(228,238,242,.9)}
.ca.is-flash .ca__v{color:var(--lime)}
.ca.is-flash{border-color:var(--lime)}

/* ═══════════════════ VIEWS ═══════════════════ */
.view{position:absolute; inset:0; z-index:5}
.view[hidden]{display:none}
.view.is-active{animation:vin .34s ease-out both}
@keyframes vin{from{opacity:0}to{opacity:1}}

/* ── HOME: 1:1 with the approved reference ── */
.wordmark{
  position:absolute; z-index:4; margin:0;
  left:calc(293.7*var(--u)); top:calc(48.4*var(--u));
  font:800 calc(227.2*var(--u))/1 var(--f-disp);
  letter-spacing:calc(18*var(--u));
  color:transparent; white-space:nowrap; pointer-events:none;
}
.wordmark::before{
  content:attr(data-text); position:absolute; left:0; top:0;
  color:#4FD8FF; filter:blur(calc(10*var(--u))); opacity:.85;
}
.wordmark span{
  position:relative; display:block; color:#E8FEFF;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 68%, transparent 76%);
  mask-image:radial-gradient(circle at 50% 50%, #000 68%, transparent 76%);
  -webkit-mask-size:calc(4.4*var(--u)) calc(4.4*var(--u));
  mask-size:calc(4.4*var(--u)) calc(4.4*var(--u));
}
.headline{
  position:absolute; z-index:4; margin:0;
  left:calc(307.4*var(--u)); top:calc(275*var(--u));
  font:400 calc(59*var(--u))/calc(45*var(--u)) var(--f-crt);
  letter-spacing:calc(2.89*var(--u)); color:#fff;
  text-shadow:0 0 calc(18*var(--u)) rgba(120,220,255,.28), 0 calc(2*var(--u)) 0 rgba(0,0,0,.55);
}
.hrule{
  position:absolute; z-index:4;
  left:20.182%; top:41.406%; width:10.026%; height:calc(4*var(--u));
  background:var(--lime); box-shadow:0 0 calc(14*var(--u)) rgba(192,239,36,.6);
}
.subline{
  position:absolute; z-index:4; margin:0;
  left:calc(306*var(--u)); top:calc(437.9*var(--u));
  font:400 calc(39.3*var(--u))/1 var(--f-crt); letter-spacing:calc(-2.37*var(--u));
  color:#F4F9FA; text-shadow:0 calc(2*var(--u)) calc(7*var(--u)) rgba(0,0,0,.65);
}
.subline em{font-style:normal; color:var(--lime); text-shadow:0 0 calc(11*var(--u)) rgba(192,239,36,.55)}

/* ── terminal windows ── */
.win{
  position:absolute; z-index:6; overflow:hidden; background:#000;
  transform:translate(calc(var(--dx,0)*var(--u)), calc(var(--dy,0)*var(--u)));
  border:calc(2*var(--u)) solid var(--winframe);
  box-shadow:0 calc(6*var(--u)) calc(28*var(--u)) rgba(0,0,0,.8);
}
.win__bar{
  display:flex; align-items:center; gap:calc(8*var(--u));
  height:calc(21*var(--u)); padding:0 calc(4*var(--u));
  background:linear-gradient(180deg,var(--winbar-a),var(--winbar-b));
  border-bottom:calc(2*var(--u)) solid #050C10;
}
.win__led{width:calc(10*var(--u)); height:calc(10*var(--u)); background:#C9D62B; flex:0 0 auto}
.win__bar h2{
  margin:0; flex:1 1 auto; color:#F2F7F8; white-space:nowrap;
  font:400 calc(19.6*var(--u))/1 var(--f-crt); letter-spacing:calc(2*var(--u));
  position:relative; top:calc(2.5*var(--u));
}
.win__btns{display:flex; gap:calc(3*var(--u)); flex:0 0 auto}
.win__btns i,.win__btns .wbtn{
  display:block; width:calc(16*var(--u)); height:calc(14*var(--u));
  background:#C6CBC6; color:#0B1013; font-style:normal;
  font:400 calc(15*var(--u))/calc(13*var(--u)) var(--f-crt);
  text-align:center; border:calc(1*var(--u)) solid #6C7476; padding:0;
}
.win__btns .wbtn{cursor:pointer}
.win__btns .wbtn:hover{background:#E4E8E4}
.win__btns .wbtn:active{background:#9AA09A}

/* ── draggable widgets ── */
.win__bar{cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
.win.is-drag{transition:none}
.win.is-drag .win__bar{cursor:grabbing}
.win.is-drag{box-shadow:0 calc(18*var(--u)) calc(48*var(--u)) rgba(0,0,0,.85),
                        0 0 calc(30*var(--u)) rgba(103,236,255,.18)}
.win.is-homing{transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.win.is-shaded{height:auto !important}
.win.is-shaded .win__body,.win.is-shaded .chart{display:none}
.win.is-gone{display:none}
.win__body{padding:calc(14*var(--u)) calc(16*var(--u))}
.win__label{margin:0; color:var(--cyan-2); font:400 calc(25*var(--u))/1 var(--f-crt); letter-spacing:calc(1.6*var(--u))}
.win__big{margin:0; color:var(--cyan); font-family:var(--f-crt); font-weight:400;
  white-space:nowrap; text-shadow:0 0 calc(18*var(--u)) rgba(103,236,255,.5)}
.cond{display:inline-block}
.led{
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 66%, transparent 74%);
  mask-image:radial-gradient(circle at 50% 50%, #000 66%, transparent 74%);
  -webkit-mask-size:calc(4*var(--u)) calc(4*var(--u));
  mask-size:calc(4*var(--u)) calc(4*var(--u));
}

.win--holder{left:72.656%; top:24.805%; width:20.117%; height:24.512%}
.win--holder .win__body{padding:calc(13*var(--u)) calc(14*var(--u)) 0 calc(16*var(--u))}
.win--holder .win__label{letter-spacing:calc(1.84*var(--u))}
.win--holder .win__big{font-size:calc(92.9*var(--u)); line-height:calc(52*var(--u));
  letter-spacing:calc(-0.73*var(--u)); margin:calc(5.5*var(--u)) 0 0 calc(7.9*var(--u))}
.win--holder .win__big small{font-size:.62em; letter-spacing:0; margin-left:calc(6*var(--u))}

.chart{position:absolute; left:calc(13.1*var(--u)); right:calc(18*var(--u)); top:calc(133*var(--u));
  margin:0; display:grid; grid-template-columns:calc(30*var(--u)) 1fr}
.chart__y{
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  height:calc(85*var(--u)); padding-right:calc(3*var(--u));
  color:#C9D3D6; font:400 calc(17*var(--u))/1 var(--f-crt); letter-spacing:calc(.8*var(--u));
}
.chart__y span{transform:translateY(-36%)}
.chart__plot{height:calc(85*var(--u)); border-left:calc(1.5*var(--u)) solid #46545A; border-bottom:calc(1.5*var(--u)) solid #46545A}
.chart__plot svg{width:100%; height:100%}
.chart__grid line{stroke:#1E2C30; stroke-width:1; vector-effect:non-scaling-stroke}
.chart__line{fill:none; stroke:var(--cyan-2); stroke-width:1.4; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 2px rgba(70,200,220,.9))}
.chart__x{
  grid-column:2; display:flex; justify-content:space-between; margin:calc(4.7*var(--u)) 0 0; padding:0 calc(2.6*var(--u));
  color:#C9D3D6; font:400 calc(19.6*var(--u))/1 var(--f-crt);
}

.win--write{left:74.154%; top:50.879%; width:17.969%; height:14.16%}
.win--write .win__body{padding:calc(12.4*var(--u)) calc(14*var(--u)) 0 calc(19*var(--u))}
.win--write .win__label{font-size:calc(23.2*var(--u)); letter-spacing:calc(1.5*var(--u))}
.win--write .win__big{font-size:calc(62.5*var(--u)); line-height:calc(35*var(--u));
  letter-spacing:calc(4.09*var(--u)); margin:calc(7.9*var(--u)) 0 0 calc(0.9*var(--u))}
.win__units{
  display:flex; margin:calc(8.7*var(--u)) 0 0; padding:0 calc(38*var(--u)) 0 calc(21.3*var(--u)); color:#B9E6F2;
  font:400 calc(19.6*var(--u))/1 var(--f-crt); letter-spacing:calc(2.45*var(--u));
}
.win__units span{flex:1 1 0; text-align:center}
.win__units span:first-child{text-align:left}
.win__units span:last-child{text-align:right; padding-right:calc(2*var(--u))}

.win--vault{left:79.688%; top:66.504%; width:17.708%; height:17.969%}
.win--vault .win__body{display:flex; flex-direction:column; align-items:center; padding:calc(18*var(--u)) calc(10*var(--u))}
.win__title{
  margin:0; color:var(--lime); font:400 calc(34*var(--u))/1 var(--f-crt);
  letter-spacing:calc(5.4*var(--u)); text-shadow:0 0 calc(14*var(--u)) rgba(192,239,36,.5);
}
.stack{width:calc(104*var(--u)); height:calc(45*var(--u)); margin:calc(14*var(--u)) 0 calc(14.4*var(--u));
  color:var(--lime); filter:drop-shadow(0 0 calc(7*var(--u)) rgba(192,239,36,.5))}
.win__amt{margin:0; color:var(--lime); font:400 calc(23.2*var(--u))/1 var(--f-crt); letter-spacing:calc(1.5*var(--u))}

/* ── CTA ── */
.cta{
  position:absolute; z-index:6;
  left:66.146%; top:84.961%; width:30.859%; height:8.398%;
  display:flex; align-items:center; justify-content:center; gap:calc(36*var(--u));
  background:var(--lime-2); color:#0A1206;
  font:400 calc(50*var(--u))/1 var(--f-crt); letter-spacing:calc(5.05*var(--u));
  box-shadow:0 0 calc(50*var(--u)) rgba(185,233,46,.42);
  --n:calc(11*var(--u));
  clip-path:polygon(var(--n) 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n)) 100%,0 100%,0 var(--n));
  transition:background .16s ease, transform .12s ease, box-shadow .16s ease;
}
.cta__arw{width:calc(39*var(--u)); height:calc(21*var(--u)); color:#0A1206; flex:0 0 auto}
.cta__arw path{stroke-width:2.4}
.cta::before{
  content:''; position:absolute; inset:calc(-7*var(--u)); pointer-events:none;
  border:calc(3*var(--u)) solid var(--lime); --c:calc(28*var(--u));
  -webkit-mask:linear-gradient(#000,#000) 0 0/var(--c) var(--c) no-repeat,linear-gradient(#000,#000) 100% 0/var(--c) var(--c) no-repeat,linear-gradient(#000,#000) 0 100%/var(--c) var(--c) no-repeat,linear-gradient(#000,#000) 100% 100%/var(--c) var(--c) no-repeat;
  mask:linear-gradient(#000,#000) 0 0/var(--c) var(--c) no-repeat,linear-gradient(#000,#000) 100% 0/var(--c) var(--c) no-repeat,linear-gradient(#000,#000) 0 100%/var(--c) var(--c) no-repeat,linear-gradient(#000,#000) 100% 100%/var(--c) var(--c) no-repeat;
}
.cta:hover{background:#D2FB3E; box-shadow:0 0 calc(74*var(--u)) rgba(185,233,46,.62)}
.cta:active{transform:translate(calc(2*var(--u)),calc(2*var(--u)))}

/* ═══════════════════ PANEL VIEWS ═══════════════════ */
.vwin{
  position:absolute; left:15.365%; top:9.375%; width:81.641%; height:84.57%;
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(rgba(1,9,14,.94),rgba(1,11,17,.965)), url("../stayed-hero-backdrop.jpg?v=1") center/cover no-repeat;
  border:calc(2*var(--u)) solid var(--winframe);
  box-shadow:0 calc(14*var(--u)) calc(60*var(--u)) rgba(0,0,0,.85);
  animation:vwin .32s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes vwin{from{transform:translateY(calc(14*var(--u))) scale(.985); opacity:0}to{transform:none; opacity:1}}
.vwin__bar{
  flex:0 0 auto; display:flex; align-items:center; gap:calc(10*var(--u));
  height:calc(30*var(--u)); padding:0 calc(7*var(--u));
  background:linear-gradient(180deg,var(--winbar-a),var(--winbar-b));
  border-bottom:calc(2*var(--u)) solid #050C10;
}
.vwin__bar .win__led{width:calc(13*var(--u)); height:calc(13*var(--u))}
.vwin__bar h2{margin:0; color:#F4F9FA; font:400 calc(27*var(--u))/1 var(--f-crt); letter-spacing:calc(2*var(--u)); white-space:nowrap}
.vwin__meta{margin-left:auto; color:#BDE0EE; font:400 calc(22*var(--u))/1 var(--f-crt); letter-spacing:calc(1.4*var(--u)); opacity:.9}
.vwin__bar .win__btns i{width:calc(22*var(--u)); height:calc(19*var(--u)); font-size:calc(20*var(--u)); line-height:calc(17*var(--u)); cursor:pointer}
.vwin__body{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  padding:calc(26*var(--u)) calc(32*var(--u)) calc(28*var(--u));
  scrollbar-width:thin; scrollbar-color:#2D7597 #04121A;
}
.vwin__body::-webkit-scrollbar{width:calc(15*var(--u))}
.vwin__body::-webkit-scrollbar-track{background:#04121A; border-left:calc(2*var(--u)) solid #16313B}
.vwin__body::-webkit-scrollbar-thumb{background:#2D7597; border:calc(2*var(--u)) solid #8FB6C4}

.vhead{flex:0 0 auto; margin-bottom:calc(24*var(--u)); max-width:calc(900*var(--u))}
.view--panel#v-rewards .vhead{margin-bottom:calc(14*var(--u))}
.view--panel#v-roadmap .vhead{margin-bottom:calc(14*var(--u))}
.vhead__k{margin:0 0 calc(9*var(--u)); color:var(--cyan-2); font:500 calc(17*var(--u))/1 var(--f-kr); letter-spacing:calc(2*var(--u))}
.vhead__h{margin:0; color:#EAF6F9; font:400 calc(42*var(--u))/1.1 var(--f-crt); letter-spacing:calc(2*var(--u)); text-shadow:0 0 calc(24*var(--u)) rgba(103,236,255,.2)}
.vhead__p{margin:calc(14*var(--u)) 0 0; font-size:calc(17*var(--u)); line-height:1.65; color:var(--txt-dim)}
.tagline{display:inline-block; margin-left:calc(6*var(--u)); padding:calc(2*var(--u)) calc(7*var(--u));
  border:calc(1*var(--u)) solid #E0B23C; color:#E0B23C; font:400 calc(16*var(--u))/1.2 var(--f-crt); letter-spacing:calc(1*var(--u))}

.chip{display:inline-block; padding:calc(3*var(--u)) calc(8*var(--u)); vertical-align:middle;
  border:calc(1*var(--u)) solid currentColor; font:400 calc(17*var(--u))/1.1 var(--f-crt); letter-spacing:calc(1*var(--u))}
.chip--demo,.chip--est{color:#E0B23C}
.chip--live{color:var(--cyan-2)}
.chip--settled,.chip--ok,.chip--now{color:var(--lime)}
.chip--now{background:rgba(192,239,36,.12)}
.chip--fail{color:#E4653F}

/* table */
.tablewrap{flex:0 0 auto; border:calc(1*var(--u)) solid var(--grid); background:#010A10}
.tbl{width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:calc(15.5*var(--u))}
.tbl th{
  text-align:left; padding:calc(12*var(--u)) calc(14*var(--u)); white-space:nowrap;
  color:var(--cyan-2); font:400 calc(19*var(--u))/1 var(--f-crt); letter-spacing:calc(1.4*var(--u));
  border-bottom:calc(1*var(--u)) solid var(--grid); background:#02121B;
}
.tbl td{padding:calc(11*var(--u)) calc(14*var(--u)); white-space:nowrap; color:#C3D3D8;
  border-bottom:calc(1*var(--u)) solid rgba(23,48,58,.5); font-variant-numeric:tabular-nums}
.tbl tbody tr:hover td{background:rgba(103,236,255,.05)}
.tbl .lime{color:var(--lime)}
.phasenote{flex:0 0 auto; margin:calc(12*var(--u)) 0 0; padding:calc(11*var(--u)) calc(16*var(--u));
  border:calc(1*var(--u)) solid rgba(103,236,255,.28); background:rgba(103,236,255,.05);
  font-size:calc(13.5*var(--u)); line-height:1.55; color:var(--txt-dim)}
.phasenote b{color:var(--cyan-2); font-weight:600}
.phasenote code{font-family:var(--f-mono); color:var(--lime); font-size:.94em}
.proof{font-size:calc(13*var(--u)); color:#5F757B}
a.proof{color:var(--cyan-2); text-decoration:underline; text-underline-offset:2px}
a.proof:hover{color:var(--cyan)}
.proof--none{opacity:.8}
.vfoot a{color:var(--cyan-2); text-decoration:underline; text-underline-offset:2px}
.vfoot a:hover{color:var(--cyan)}
.vfoot{flex:0 0 auto; margin:auto 0 0; font-size:calc(15*var(--u)); color:var(--txt-dim)}

.vwin__foot{
  flex:0 0 auto; display:flex; gap:calc(3*var(--u)); padding:calc(4*var(--u));
  background:#0A1418; border-top:calc(2*var(--u)) solid #1D343C;
}
.vwin__foot span{
  padding:calc(5*var(--u)) calc(12*var(--u)); color:#7E969D;
  font:400 calc(18*var(--u))/1 var(--f-crt); letter-spacing:calc(1.2*var(--u));
  border:calc(1*var(--u)) solid #1D343C; background:#050F14;
}
.vwin__foot span:last-child{margin-left:auto; color:var(--lime-3)}

/* vault */
.vcols{flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:calc(1*var(--u)); background:var(--grid); border:calc(1*var(--u)) solid var(--grid)}
.statgrid{display:grid; grid-template-columns:1fr 1fr; gap:calc(1*var(--u)); background:var(--grid)}
.stat{background:#020C12; padding:calc(20*var(--u)) calc(22*var(--u))}
.stat--wide{grid-column:1/-1}
.stat__k{margin:0 0 calc(12*var(--u)); display:flex; gap:calc(8*var(--u)); align-items:center; flex-wrap:wrap;
  color:var(--txt-dim); font:400 calc(18*var(--u))/1.2 var(--f-crt); letter-spacing:calc(1.2*var(--u))}
.stat__v{margin:0; color:#EAF6F9; font:400 calc(46*var(--u))/1 var(--f-crt)}
.stat__v--lime{color:var(--lime)}
.stat__m{margin:calc(9*var(--u)) 0 0; font-size:calc(14*var(--u)); color:#63797F}
.vempty{background:#020C12; padding:calc(24*var(--u)); display:flex; flex-direction:column; align-items:flex-start}
.vempty__m{width:calc(46*var(--u)); height:calc(46*var(--u)); object-fit:contain; image-rendering:pixelated; margin-bottom:calc(16*var(--u)); animation:hover 5s ease-in-out infinite}
.vempty__h{margin:0 0 calc(12*var(--u)); color:var(--cyan-2); font:400 calc(28*var(--u))/1.2 var(--f-crt); letter-spacing:calc(1.5*var(--u))}
.vempty__p{margin:0 0 calc(20*var(--u)); font-size:calc(15.5*var(--u)); line-height:1.65; color:var(--txt-dim)}
.vempty__l{margin:calc(20*var(--u)) 0 0; padding:0; list-style:none}
.vempty__l li{position:relative; padding:calc(7*var(--u)) 0 calc(7*var(--u)) calc(18*var(--u)); font-size:calc(14*var(--u)); color:#63797F}
.vempty__l li::before{content:''; position:absolute; left:0; top:calc(14*var(--u)); width:calc(6*var(--u)); height:calc(6*var(--u)); background:var(--cyan-3)}
.btn{display:inline-flex; align-items:center; gap:calc(10*var(--u)); padding:calc(13*var(--u)) calc(20*var(--u));
  border:calc(1*var(--u)) solid rgba(103,236,255,.4); color:var(--cyan-2);
  font:400 calc(21*var(--u))/1 var(--f-crt); letter-spacing:calc(1.6*var(--u))}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn:not([disabled]):hover{color:var(--cyan); border-color:var(--cyan); background:rgba(103,236,255,.08)}
.btn--claim{margin-top:calc(10*var(--u)); color:var(--lime); border-color:rgba(192,239,36,.5)}
.btn--claim:not([disabled]):hover{color:var(--lime); border-color:var(--lime); background:rgba(192,239,36,.10)}
.btn[hidden]{display:none}
.btn__soon{padding:calc(3*var(--u)) calc(7*var(--u)); background:rgba(103,236,255,.14); font-size:calc(16*var(--u))}

/* bands */
.bands{flex:1 1 auto; border:calc(1*var(--u)) solid var(--grid); display:grid; gap:calc(1*var(--u)); background:var(--grid)}
.band{background:#020C12; padding:calc(15*var(--u)) calc(22*var(--u));
  display:grid; grid-template-columns:calc(240*var(--u)) 1fr calc(190*var(--u)); gap:calc(24*var(--u)); align-items:center}
.band__k{margin:0; color:#DCE7EC; font:400 calc(22*var(--u))/1.2 var(--f-crt); letter-spacing:calc(1.2*var(--u))}
.band__k small{display:block; margin-top:calc(6*var(--u)); color:#5F757B; font-family:var(--f-mono); font-size:calc(13*var(--u)); letter-spacing:0}
.band__track{height:calc(16*var(--u)); background:#04141C; border:calc(1*var(--u)) solid var(--grid); overflow:hidden}
.band__fill{height:100%; width:0; transition:width 1s cubic-bezier(.2,.7,.3,1);
  background:repeating-linear-gradient(90deg,var(--cyan-2) 0 calc(7*var(--u)),transparent calc(7*var(--u)) calc(11*var(--u)))}
.band:nth-child(-n+2) .band__fill{background:repeating-linear-gradient(90deg,var(--lime) 0 calc(7*var(--u)),transparent calc(7*var(--u)) calc(11*var(--u)))}
.band:last-child .band__fill{background:repeating-linear-gradient(90deg,#E4653F 0 calc(7*var(--u)),transparent calc(7*var(--u)) calc(11*var(--u)))}
.band__v{margin:0; text-align:right; color:#C3D3D8; font-family:var(--f-mono); font-size:calc(15*var(--u)); font-variant-numeric:tabular-nums}

/* cards + flow */
.cards{flex:0 0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:calc(1*var(--u)); background:var(--grid); border:calc(1*var(--u)) solid var(--grid)}
.card{background:#020C12; padding:calc(20*var(--u)) calc(16*var(--u))}
.card h4{margin:0 0 calc(13*var(--u)); color:var(--cyan-2); font:400 calc(22*var(--u))/1.25 var(--f-crt); letter-spacing:calc(1.3*var(--u))}
.card p{margin:0; font-size:calc(14.5*var(--u)); line-height:1.62; color:var(--txt-dim)}
.card em{font-style:normal; color:var(--lime)}
.card code{font-family:var(--f-mono); color:var(--lime); font-size:calc(14*var(--u))}
.card--warn{background:#0E0B02; box-shadow:inset calc(3*var(--u)) 0 0 #E0B23C}
.card--warn h4{color:#E0B23C}
.card--ok{background:#04120A; box-shadow:inset calc(3*var(--u)) 0 0 var(--lime)}
.card--ok h4{color:var(--lime)}
.qs{margin-top:calc(16*var(--u)); border:calc(1*var(--u)) solid var(--grid); background:#010A10}
.qs h4{margin:0; padding:calc(10*var(--u)) calc(18*var(--u)); border-bottom:calc(1*var(--u)) solid var(--grid);
  color:var(--cyan-2); font:400 calc(20*var(--u))/1 var(--f-crt); letter-spacing:calc(2*var(--u))}
.qs ul{margin:0; padding:calc(6*var(--u)) 0; list-style:none; display:grid; grid-template-columns:1fr 1fr}
.qs li{position:relative; padding:calc(6*var(--u)) calc(18*var(--u)) calc(6*var(--u)) calc(32*var(--u));
  font-size:calc(13.5*var(--u)); line-height:1.5; color:var(--txt-dim)}
.qs li::before{content:'?'; position:absolute; left:calc(18*var(--u)); top:calc(8*var(--u));
  color:var(--lime-3); font-family:var(--f-crt); font-size:calc(16*var(--u))}
.flow{margin-top:calc(14*var(--u)); display:flex; align-items:center; gap:calc(10*var(--u)); flex-wrap:wrap;
  font:400 calc(19*var(--u))/1 var(--f-crt); letter-spacing:calc(1.2*var(--u)); color:var(--cyan-2)}
.flow span{padding:calc(8*var(--u)) calc(12*var(--u)); border:calc(1*var(--u)) solid rgba(70,200,220,.35); background:#02121B}
.flow i{font-style:normal; color:var(--lime-3)}
.flow .flow--out{color:var(--lime); border-color:rgba(192,239,36,.5); background:rgba(192,239,36,.07)}

/* phases + proof */
.phases{flex:1 1 auto; list-style:none; margin:0 0 calc(12*var(--u)); padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:calc(1*var(--u)); background:var(--grid); border:calc(1*var(--u)) solid var(--grid)}
.phase{background:#020C12; padding:calc(18*var(--u)) calc(20*var(--u)) calc(20*var(--u))}
.phase header{display:flex; align-items:center; gap:calc(10*var(--u)); margin-bottom:calc(10*var(--u))}
.phase__n{color:var(--txt-dim); font:400 calc(19*var(--u))/1 var(--f-crt); letter-spacing:calc(2*var(--u))}
.phase h4{margin:0 0 calc(12*var(--u)); color:#E7F4F7; font:400 calc(24*var(--u))/1.2 var(--f-crt); letter-spacing:calc(1.2*var(--u))}
.phase ul{margin:0; padding:0; list-style:none}
.phase li{position:relative; padding:calc(8*var(--u)) 0 calc(8*var(--u)) calc(20*var(--u)); font-size:calc(14*var(--u));
  line-height:1.55; color:var(--txt-dim); border-top:calc(1*var(--u)) solid rgba(23,48,58,.6)}
.phase li::before{content:''; position:absolute; left:calc(2*var(--u)); top:calc(17*var(--u)); width:calc(7*var(--u)); height:calc(7*var(--u)); background:var(--cyan-3)}
.phase--now{box-shadow:inset calc(3*var(--u)) 0 0 var(--lime)}
.phase--done{box-shadow:inset calc(3*var(--u)) 0 0 var(--cyan-3)}
.phase--done li::before,.phase li.is-done::before{background:var(--lime)}
.phase li.is-done{color:#9DB3B9}
.phase li.is-wait{color:#66787E}
.phase li.is-wait::before{background:#4A5C62}
.phase li em{font-style:normal; color:#E0B23C; font-size:.92em}
.phase li code{font-family:var(--f-mono); color:var(--cyan-2); font-size:.92em}
.phase--now li::before{background:var(--lime)}
.proof{margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:calc(1*var(--u)); background:var(--grid); border:calc(1*var(--u)) solid var(--grid)}
.proof div{background:#020C12; padding:calc(12*var(--u)) calc(16*var(--u)); display:flex; gap:calc(14*var(--u)); align-items:baseline; justify-content:space-between}
.proof dt{color:var(--txt-dim); font:400 calc(18*var(--u))/1.2 var(--f-crt); letter-spacing:calc(1.2*var(--u))}
.proof dd{margin:0; font-family:var(--f-mono); font-size:calc(13.5*var(--u)); color:#C3D3D8; text-align:right}
.proof code{color:#E0B23C}
.proof--sm{grid-template-columns:1fr 1fr}

/* ═══════════════════ MODALS ═══════════════════ */
.modal{position:absolute; inset:0; z-index:20; display:grid; place-items:center; background:rgba(0,4,8,.72); backdrop-filter:blur(calc(3*var(--u)))}
.modal[hidden]{display:none}
.vwin--dlg{position:relative; left:auto; top:auto; width:calc(1020*var(--u)); height:auto; max-height:calc(820*var(--u))}
.vwin--sm{width:calc(760*var(--u))}
.steps{list-style:none; margin:0 0 calc(24*var(--u)); padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:calc(1*var(--u)); background:var(--grid); border:calc(1*var(--u)) solid var(--grid)}
.step{background:#020C12; padding:calc(20*var(--u)) calc(18*var(--u)) calc(24*var(--u))}
.step__n{display:block; color:var(--lime); font:400 calc(34*var(--u))/1 var(--f-crt); margin-bottom:calc(12*var(--u))}
.step h4{margin:0 0 calc(11*var(--u)); color:#E7F4F7; font:400 calc(21*var(--u))/1.3 var(--f-crt); letter-spacing:calc(1.2*var(--u))}
.step p{margin:0; font-size:calc(14.5*var(--u)); line-height:1.65; color:var(--txt-dim)}
.formula{border:calc(1*var(--u)) solid var(--grid); background:#010A10}
.formula__h{margin:0; padding:calc(13*var(--u)) calc(18*var(--u)); border-bottom:calc(1*var(--u)) solid var(--grid);
  color:var(--cyan-2); font:400 calc(20*var(--u))/1 var(--f-crt); letter-spacing:calc(2*var(--u))}
.formula pre{margin:0; padding:calc(20*var(--u)) calc(18*var(--u)); overflow-x:auto;
  font-family:var(--f-mono); font-size:calc(14.5*var(--u)); line-height:1.9; color:#B9E8F2}
.about__lede{margin:0 0 calc(20*var(--u)); font-size:calc(16*var(--u)); line-height:1.75; color:#B9CBD1}
.about__lede b{color:var(--lime); font-weight:600}
.warnbox{border:calc(1*var(--u)) solid #E0B23C; background:#0E0B02; padding:calc(16*var(--u)) calc(18*var(--u)); margin-bottom:calc(20*var(--u))}
.warnbox__h{margin:0 0 calc(9*var(--u)); color:#E0B23C; font:400 calc(21*var(--u))/1 var(--f-crt); letter-spacing:calc(1.4*var(--u))}
.warnbox p{margin:0; font-size:calc(14.5*var(--u)); line-height:1.7; color:#A99268}
.notlive{
  margin:0 0 calc(20*var(--u)); padding:calc(13*var(--u)) calc(16*var(--u));
  border:calc(1*var(--u)) solid #E0B23C; background:#0E0B02; color:#A99268;
  font-size:calc(14.5*var(--u)); line-height:1.7;
}
.notlive b{color:#E0B23C; font-weight:600}
.dlglink{
  display:inline-flex; align-items:center; gap:calc(10*var(--u)); margin-top:calc(18*var(--u));
  padding:calc(12*var(--u)) calc(18*var(--u));
  border:calc(1*var(--u)) solid rgba(103,236,255,.42); color:var(--cyan-2);
  font:400 calc(20*var(--u))/1 var(--f-crt); letter-spacing:calc(1.2*var(--u));
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.dlglink:hover{color:var(--cyan); border-color:var(--cyan); background:rgba(103,236,255,.08)}
.dlglink svg{width:calc(16*var(--u)); height:calc(16*var(--u)); flex:0 0 auto}
.about__legal{margin:calc(18*var(--u)) 0 0; font-size:calc(13*var(--u)); line-height:1.8; color:#4E6167}

.rotate{display:none}

/* ═══════════════════ COMPACT / TOUCH ═══════════════════ */
/* The page still never scrolls: only the active view's body scrolls inside
   its own window, exactly like a fixed application shell. */
@media (max-width:900px), (max-height:460px){
  .app{display:block}
  .app__backdrop{display:none}
  picture{display:contents}

  .stage{
    --u:1px; width:100%; height:100%; box-shadow:none; contain:none;
    display:flex; flex-direction:column; background:#01070B;
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  .stage__plate{
    position:relative; order:1; flex:0 0 auto;
    width:100%; height:clamp(170px, 28vh, 280px); transition:height .3s ease;
    object-fit:cover; object-position:50% 34%;
    border-bottom:1px solid rgba(126,144,15,.5);
  }
  .stage__film{display:none}
  .stage__scan{opacity:.18}
  .stage__flash{z-index:25}

  /* rail → bottom tab bar */
  .rail{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; height:auto;
    border-right:0; border-top:2px solid var(--lime-3); background:#000;
    display:flex; padding:0; z-index:30; --lb:0px;
  }
  .rail__brand,.rail__mascot,.rail__rule,.rail__status,.rail__chain,.rail__x{display:none}
  .rail__nav{position:static; display:flex; width:100%; padding:0}
  .rail__nav li{flex:1 1 0; height:auto}
  .navi{flex-direction:column; gap:5px; padding:9px 2px calc(9px + env(safe-area-inset-bottom));
    height:auto; justify-content:center; text-align:center}
  .navi:hover{transform:none}
  .navi__ico{width:19px; height:19px; margin-top:0}
  .navi__txt b{display:none}
  .navi__txt i{font-size:13px; letter-spacing:.6px}

  .pill{
    position:absolute; left:50%; top:12px; transform:translateX(-50%);
    width:auto; height:auto; padding:7px 15px; font-size:20px; gap:8px;
    border-width:2px; --n:6px; z-index:6;
  }
  .pill__dot{width:6px; height:6px}

  .ticker{
    position:static; order:2; flex:0 0 auto; width:auto; height:auto; margin:0;
    padding:9px 12px; font-size:16px; line-height:1.35; text-align:center; gap:10px;
    border-width:0 0 1px; clip-path:none;
  }

  .view{position:relative; inset:auto; order:3; flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
  .stage:not([data-view="home"]) .stage__plate{height:clamp(96px, 15vh, 150px)}
  .view--home{overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 0 22px}
  .view--home>*{flex:0 0 auto}
  .view--home::-webkit-scrollbar{display:none}

  .wordmark{position:static; margin:22px 0 0; padding:0 14px; text-align:center;
    font-size:clamp(52px,16vw,104px); letter-spacing:-2px}
  .wordmark::before{left:0; right:0; filter:blur(7px)}
  .wordmark span{-webkit-mask-size:3.2px 3.2px; mask-size:3.2px 3.2px}
  .headline{position:static; margin:16px 0 0; padding:0 18px; text-align:center;
    font-size:clamp(26px,7vw,38px); line-height:1.14; letter-spacing:1px}
  .hrule{position:static; width:110px; height:3px; margin:18px auto 0}
  .subline{position:static; margin:14px 0 0; padding:0 18px; text-align:center;
    font-size:clamp(20px,5.4vw,27px); letter-spacing:0}
  .cta{position:static; width:calc(100% - 36px); max-width:400px; height:auto;
    margin:22px auto 4px; padding:16px 20px; font-size:23px; letter-spacing:2px; gap:14px; --n:9px}
  .cta__arw{width:28px; height:14px}
  .cta::before{inset:-5px; border-width:2px; --c:16px}

  .win,.win--holder,.win--write,.win--vault{
    position:static; left:auto; top:auto; width:auto; height:auto;
    margin:16px 18px 0; border-width:2px; box-shadow:none;
  }
  .win__bar{height:28px; padding:0 7px}
  .win__bar h2{font-size:18px; letter-spacing:1.2px; top:1px}
  .win__led{width:9px; height:9px}
  .win__btns i{width:16px; height:14px; font-size:13px; line-height:12px}
  .win__body,.win--holder .win__body,.win--write .win__body{padding:14px}
  .win__label{font-size:21px; letter-spacing:1px}
  .win--holder .win__big{font-size:74px; line-height:44px; letter-spacing:0; margin:12px 0 0}
  .win--holder .win__big small{font-size:.62em; margin-left:4px}
  .win--write .win__big{font-size:56px; line-height:32px; letter-spacing:2px; margin:10px 0 0}
  .win__units{font-size:17px; letter-spacing:2px; padding:0 8px; margin-top:10px}
  .led{-webkit-mask-size:3.2px 3.2px; mask-size:3.2px 3.2px}
  .chart{position:static; margin:16px 0 0; grid-template-columns:34px 1fr}
  .chart__y,.chart__plot{height:86px}
  .chart__y{font-size:15px; padding-right:4px}
  .chart__x{font-size:15px; margin-top:5px; padding:0}
  .win--vault .win__body{padding:18px 14px}
  .win__title{font-size:28px; letter-spacing:3px}
  .stack{width:92px; height:40px; margin:14px 0}
  .win__amt{font-size:20px; letter-spacing:1px}

  .view--panel{padding:0; min-height:0}
  .vwin{position:static; width:100%; height:100%; flex:1 1 auto; min-height:0;
    border:0; box-shadow:none; background:#01070B; animation:none}
  .vwin__bar{height:34px; padding:0 10px}
  .vwin__bar h2{font-size:20px}
  .vwin__meta{display:none}
  .vwin__body{padding:18px 16px 22px}
  .vwin__foot{flex-wrap:wrap; padding:6px}
  .vwin__foot span{font-size:15px}
  .vwin__foot span:last-child{margin-left:0}
  .vhead__h{font-size:28px}
  .vhead__p{font-size:14px}
  .vcols,.statgrid,.cards,.phases,.proof,.steps,.qs ul{grid-template-columns:1fr}
  .band{grid-template-columns:1fr; gap:9px}
  .band__v{text-align:left}
  .tablewrap{overflow-x:auto}
  .tbl{min-width:820px; font-size:13px}
  .stat__v{font-size:34px}
  .flow{font-size:17px}

  .modal{position:fixed; z-index:40}
  .vwin--dlg,.vwin--sm{width:100%; max-height:none; height:100%}
  .vwin--dlg .vwin__body{padding-bottom:24px}
}

@media (max-width:340px){
  .rotate{display:block; position:fixed; inset:auto 0 0 0; z-index:40; margin:0; padding:10px;
    text-align:center; background:#000; color:var(--lime); font:400 13px/1 var(--f-crt)}
}

@media (prefers-reduced-motion:reduce){
  .rail__dot,.rail__mascot,.vempty__m{animation:none}
  .band__fill{transition:none}
  .view.is-active,.vwin{animation:none}
  .stage.is-switching .stage__flash{animation:none}
  .stage__film{display:none}
}