@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/PressStart2P-400.woff2) format("woff2")}
@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/PixelifySans-400.woff2) format("woff2")}
@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/PixelifySans-600.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ChakraPetch-400.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ChakraPetch-500.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ChakraPetch-600.woff2) format("woff2")}

:root{
  --ground:#050806;
  --panel:#08110d;
  --ink:#46e6a0;
  --lime:#74f854;
  --cyan:#26d5d8;
  --pale:#eafff4;
  --white:#fff;
  --ink-2:rgba(70,230,160,.84);
  --rule:rgba(70,230,160,.5);
  --rule-soft:rgba(70,230,160,.22);
  --px:"Press Start 2P","Pixelify Sans",monospace;
  --display:"Pixelify Sans","Chakra Petch",system-ui,sans-serif;
  --text:"Chakra Petch",system-ui,sans-serif;
  --block:min(1340px,88vw);
  --band:48px;
  --pad:34px;
  --u:3px;
  --t-body:18px;
  --t-label:18px;
  --t-lead:clamp(22px,2.3vw,34px);
  --t-num:clamp(24px,2.6vw,38px);
}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:var(--t-body);line-height:1.55;font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;image-rendering:pixelated;opacity:.15}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);font-family:var(--display);font-weight:600;font-size:17px;padding:14px 20px;z-index:50}
.skip:focus{left:16px;top:16px}
:focus-visible{outline:3px solid var(--white);outline-offset:4px}
a{color:inherit}
img{image-rendering:pixelated}

.sheet{position:relative;z-index:1;width:var(--block);margin:0 auto;padding:clamp(36px,4.5vw,80px) 0 clamp(52px,6vw,100px)}

/* ident bar + rules */
.ident{display:flex;align-items:baseline;justify-content:space-between;gap:24px;font-family:var(--display);font-weight:600;font-size:var(--t-label);letter-spacing:.02em;padding-bottom:14px}
.ident b{font-weight:600}
.ident span{color:var(--ink-2)}
.rule{height:var(--u);background:var(--rule-soft)}
.air{height:var(--band)}

/* wordmark: the one loud thing */
.wordmark{display:block;margin:clamp(20px,2.4vw,36px) 0 clamp(18px,2.2vw,32px);font-family:var(--px);font-weight:400;line-height:1;white-space:nowrap;color:transparent;background:linear-gradient(100deg,transparent 43%,rgba(255,255,255,.95) 50%,transparent 57%) 100% 0/250% 100% no-repeat,linear-gradient(90deg,var(--lime) 0,var(--ink) 52%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(var(--u) var(--u) 0 #0b3d2e);letter-spacing:0;animation:wm-shine 8s steps(32) 2.6s infinite}
.wordmark.intro{animation:wm-type 1s steps(12,end) both,wm-shine 8s steps(32) 2.6s infinite}
@keyframes wm-type{from{clip-path:inset(-8px 100% -8px -8px)}to{clip-path:inset(-8px -8px -8px -8px)}}
@keyframes wm-shine{0%{background-position:100% 0,0 0}28%,100%{background-position:0% 0,0 0}}
.wordmark:focus,.wordmark:focus-visible,[tabindex="-1"]:focus{outline:none}

/* plate rail */
.rail{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,18px);padding:clamp(14px,1.6vw,22px) 0}
.plate{text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 6px;font-family:var(--display);font-weight:600;font-size:var(--t-label);color:var(--ink-2);transition:transform .12s steps(2),color .12s steps(2)}
.plate img{width:96px;height:96px;max-width:100%;display:block}
.plate:hover{transform:translateY(calc(var(--u) * -1));color:var(--white)}
.plate[aria-current=page]{color:var(--white)}

/* lead line + keys */
.lead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,54px);padding:clamp(18px,2vw,30px) 0}
.lead p{margin:0;font-family:var(--display);font-weight:600;font-size:var(--t-lead);line-height:1.22;color:var(--ink)}
.lead p .slash{color:var(--ink-2)}
.lead-keys{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}

/* panels: white sticker outline with stepped corners, thin mint inner rule */
.row{display:grid;grid-template-columns:79.3fr 3fr 17.6fr;align-items:stretch;margin:var(--band) 0}
.side{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px)}
.side>.panel:last-child{flex:1}
.panel{position:relative;background:var(--panel);margin:var(--u);padding:var(--pad);min-width:0;box-shadow:0 calc(var(--u) * -1) 0 0 var(--white),0 var(--u) 0 0 var(--white),calc(var(--u) * -1) 0 0 0 var(--white),var(--u) 0 0 0 var(--white)}
.panel::before{content:"";position:absolute;inset:12px;pointer-events:none;box-shadow:0 calc(var(--u) * -1) 0 0 var(--rule),0 var(--u) 0 0 var(--rule),calc(var(--u) * -1) 0 0 0 var(--rule),var(--u) 0 0 0 var(--rule)}
.panel.tight{--pad:26px}
.below{margin:0 0 var(--band)}
.below>*+*{margin-top:calc(var(--band) * .7)}
.stage{min-height:clamp(380px,40vw,580px);display:flex;flex-direction:column}
.stage.tall{min-height:clamp(520px,54vw,780px)}
.stage>.panel-head{flex:none}
.stage>*:last-child{flex:1}
.stage.tall .floor-view{min-height:clamp(380px,44vw,640px)}
.panel-head{font-family:var(--display);font-weight:600;font-size:var(--t-label);color:var(--ink-2);padding:10px 20px 13px;margin-bottom:20px;border-bottom:var(--u) solid var(--rule-soft)}

/* keys (buttons): mint stepped outline; solid = lime to cyan fill */
.key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 1.4em;margin:var(--u);border:0;background:var(--panel);color:var(--ink);font-family:var(--display);font-weight:600;font-size:18px;line-height:1;cursor:pointer;text-decoration:none;text-align:center;box-shadow:0 calc(var(--u) * -1) 0 0 var(--ink),0 var(--u) 0 0 var(--ink),calc(var(--u) * -1) 0 0 0 var(--ink),var(--u) 0 0 0 var(--ink);transition:transform .1s steps(2),color .1s steps(2)}
.key:hover:not(:disabled):not([aria-disabled=true]){transform:translateY(calc(var(--u) * -1));color:var(--white);box-shadow:0 calc(var(--u) * -1) 0 0 var(--white),0 var(--u) 0 0 var(--white),calc(var(--u) * -1) 0 0 0 var(--white),var(--u) 0 0 0 var(--white)}
.key:active:not(:disabled):not([aria-disabled=true]){transform:translateY(var(--u))}
.key.solid{background:linear-gradient(90deg,var(--lime),var(--ink) 55%,var(--cyan));color:#04100b;box-shadow:0 calc(var(--u) * -1) 0 0 var(--white),0 var(--u) 0 0 var(--white),calc(var(--u) * -1) 0 0 0 var(--white),var(--u) 0 0 0 var(--white)}
.key.solid:hover:not(:disabled):not([aria-disabled=true]){color:#04100b}
.key.wide{width:calc(100% - var(--u) * 2)}
.key.big{min-height:64px;font-size:20px}
.key:disabled,.key[aria-disabled=true]{opacity:.42;cursor:not-allowed}
.key img{width:24px;height:24px;display:block;flex:none}

/* floor stage */
.floor-wrap{position:relative;flex:1;display:flex;flex-direction:column}
.floor-view{position:relative;flex:1;min-height:clamp(300px,30vw,430px);overflow:hidden;background:#040705}
#floor{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.hero{position:absolute;left:50%;bottom:7%;height:64%;transform:translateX(-50%)}
.floor-empty{margin:0;text-align:center;font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink-2);padding:20px 28px 4px;line-height:1.45}
.hands{position:absolute;inset:0}
.hand{position:absolute;transform:translate(-50%,-100%);background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);font-family:var(--display);font-weight:600}
.hand img{display:block;width:100%;height:auto}
.hand span{font-size:13px;background:#040705;padding:1px 5px;white-space:nowrap}
.hand:hover span,.hand:focus-visible span{color:var(--white)}
.floor-tip{position:absolute;pointer-events:none;z-index:4;background:var(--panel);padding:8px 14px;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink);line-height:1.5;white-space:nowrap;display:none;box-shadow:0 -3px 0 0 var(--white),0 3px 0 0 var(--white),-3px 0 0 0 var(--white),3px 0 0 0 var(--white)}

/* tables */
.board{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.board caption{text-align:left;font-family:var(--display);font-weight:600;font-size:var(--t-label);color:var(--ink-2);padding:0 20px 14px}
.board th{text-align:left;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-2);padding:12px 20px 13px;border-bottom:var(--u) solid var(--rule-soft);white-space:nowrap}
.board th:last-child,.board td:last-child{text-align:right}
.board td{padding:17px 20px;border-bottom:2px solid var(--rule-soft);font-size:17px;color:var(--ink);vertical-align:middle}
.board tbody tr[onclick],.board tbody tr[role=link]{cursor:pointer}
.board tbody tr[role=link]:hover td{background:rgba(70,230,160,.07)}
.board .nm{font-family:var(--display);font-weight:600;font-size:18px}
.board .dim{color:var(--ink-2)}
.board .up{color:var(--lime)}
.board .empty td{text-align:center;color:var(--ink-2);padding:42px 18px;font-family:var(--display);font-weight:600}

/* data lists */
.rows{display:grid;gap:0;margin:0}
.datum{display:grid;grid-template-columns:minmax(110px,42%) 1fr;gap:18px;padding:15px 20px;border-bottom:2px solid var(--rule-soft);min-width:0}
.datum dt{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-2)}
.datum dd{margin:0;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ident column */
.ident-col .datum{grid-template-columns:auto 1fr;gap:16px;padding:15px 4px}
.ident-col .datum dt{white-space:nowrap}
.ident-col .ticker{font-family:var(--px);font-size:clamp(14px,1.25vw,19px);line-height:1.3;margin:0 0 12px;color:var(--ink)}
.ident-col .sub{font-size:16px;font-weight:500;color:var(--ink-2);margin:0 0 18px}
.ident-col .mint{font-family:var(--text);font-weight:600;font-size:18px;line-height:1.42;overflow-wrap:anywhere;word-break:break-all;color:var(--ink);margin:0 0 18px}
.ident-col .mint.empty{color:var(--ink-2);font-weight:500;word-break:normal}
.marks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.marks .key{margin:var(--u)}

/* mandates row + strip */
.premise{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,54px);align-items:center;margin-bottom:var(--band)}
.premise .mandates-word{font-family:var(--display);font-weight:600;font-size:var(--t-label);color:var(--ink-2);line-height:1.4;margin:0}
.mandates{display:flex;gap:clamp(10px,1.4vw,22px)}
.mandate{display:flex;flex-direction:column;align-items:center;gap:8px;width:clamp(78px,8vw,112px);text-decoration:none;transition:transform .1s steps(2)}
.mandate:hover{transform:translateY(calc(var(--u) * -1))}
.mandate:hover span{color:var(--white)}
.mandate img{width:100%;height:auto;display:block}
.mandate span{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-2)}
.strip{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(14px,1.6vw,24px);height:clamp(74px,7vw,104px)}
.strip .bar{background-image:url(../images/bar.png);background-size:cover;background-position:center;image-rendering:pixelated;min-width:0}
.strip .bar.flip{transform:scaleX(-1)}
.strip .count{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 clamp(18px,2.4vw,40px);line-height:1.15;text-align:center}
.strip .count b{font-family:var(--px);font-weight:400;font-size:var(--t-num);color:var(--ink)}
.strip .count span{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-2);margin-top:8px}

/* forms */
.form{display:grid;gap:22px}
.field{display:grid;gap:9px;min-width:0}
.field>label,.field>.label{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-2)}
.field input[type=text],.field select{width:100%;min-height:56px;padding:14px 18px;background:rgba(70,230,160,.06);border:0;border-bottom:var(--u) solid var(--rule);color:var(--ink);font-family:var(--text);font-size:18px;font-weight:500;border-radius:0}
.field input::placeholder{color:rgba(70,230,160,.45)}
.field select{appearance:none}
.field select option{background:var(--panel);color:var(--ink)}
.field .note{font-size:16px;font-weight:500;color:var(--ink-2);line-height:1.45}
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:12px}
.choice button{text-align:left;min-height:86px;padding:16px 20px;background:rgba(70,230,160,.05);border:var(--u) solid var(--rule-soft);color:var(--ink-2);cursor:pointer;font-family:var(--text);font-weight:500;font-size:16px;line-height:1.4;border-radius:0}
.choice button strong{display:block;font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:6px}
.choice button:hover{border-color:var(--rule)}
.choice button[aria-pressed=true]{border-color:var(--ink);background:rgba(70,230,160,.15);color:var(--ink)}
.file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)}
.file-pick{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;min-height:56px;padding:4px 0}
.file-name{font-size:16px;font-weight:500;color:var(--ink-2);overflow-wrap:anywhere;min-width:0}
.file-input:focus-visible+.file-pick .key{outline:3px solid var(--white);outline-offset:4px}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.result{min-height:56px;display:flex;align-items:center;font-size:17px;font-weight:500;color:var(--ink-2);padding:8px 0}
.result.bad{color:var(--pale)}

/* reading blocks */
.read{max-width:72ch}
.read p{margin:0 0 18px;font-weight:500;color:var(--ink-2)}
.panel>.note{margin:22px 0 0;font-size:16px;font-weight:500;line-height:1.5;color:var(--ink-2)}
.panel>.note.risk{margin-top:10px}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(24px,3vw,48px)}
.step{display:grid;gap:12px;align-content:start}
.step .n{font-family:var(--px);font-size:var(--t-num);color:var(--ink);line-height:1}
.step h4{font-family:var(--display);font-weight:600;font-size:20px;margin:0;color:var(--ink)}
.step p{margin:0;font-size:17px;font-weight:500;color:var(--ink-2)}
.stage .steps{align-content:space-between}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(20px,2.4vw,38px)}
.sheet-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;flex:1;text-align:center;padding:12px 0 6px}
.sheet-hero img{width:min(300px,64%);height:auto}
.sheet-hero p{margin:0;max-width:44ch;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.45;color:var(--ink-2)}
.journal-empty{padding:28px 20px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink-2)}

.foot{margin-top:var(--band);padding-top:18px;border-top:var(--u) solid var(--rule-soft);display:flex;gap:24px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.foot-t{font-family:var(--px);font-size:13px;color:var(--ink-2)}
.foot a{text-decoration:none;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink)}
.foot a:hover{color:var(--white)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%);background:var(--panel);color:var(--ink);font-family:var(--display);font-weight:600;font-size:17px;padding:12px 22px;z-index:40;box-shadow:0 -3px 0 0 var(--white),0 3px 0 0 var(--white),-3px 0 0 0 var(--white),3px 0 0 0 var(--white)}

@media (max-width:900px){
  :root{--block:min(1340px,92vw);--band:34px;--pad:22px}
  .row{grid-template-columns:minmax(0,1fr);gap:20px}
  .row>.gutter{display:none}
  .row>.side{display:contents}
  .row .ident-col-panel{order:-2}
  .row>.stage{order:0}
  .row .side>.tight,.row>.tight{order:1}
  .steps{grid-template-columns:minmax(0,1fr)}
  .rail{gap:4px;padding:10px 0 8px}
  .plate{padding:4px 0;gap:6px;font-size:12px}
  .plate img{width:48px;height:48px}
  .lead{grid-template-columns:1fr;gap:14px;padding:16px 0}
  .lead-keys{justify-content:flex-start}
  .lead-keys .key{flex:1 1 auto}
  .premise{grid-template-columns:1fr;gap:18px}
  .mandates{justify-content:space-between}
  .strip{grid-template-columns:1fr;height:auto;gap:12px}
  .strip .bar{height:54px}
  .strip .count{padding:8px 16px}
  .datum{grid-template-columns:1fr;gap:4px}
  .board th:nth-child(n+4),.board td:nth-child(n+4){display:none}
  .board th:last-child,.board td:last-child{display:table-cell;text-align:right}
  .panel::before{inset:9px}
}
@media (max-width:480px){
  :root{--t-lead:20px;--pad:18px}
  .mandate{width:auto;flex:1}
  .marks{grid-template-columns:minmax(0,1fr)}
  .board th,.board td{padding-left:12px;padding-right:12px}
  .board th{white-space:normal}
  .ident{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}


/* ================= lead: typed lines with a blinking caret ================= */
.lead .line{display:block;animation:type calc(var(--n,10) * 26ms) steps(var(--n,10),end) var(--ld,0ms) both}
.lead .line.last::after{content:"";display:inline-block;width:.5em;height:.82em;margin-left:.25em;background:var(--ink);vertical-align:-.04em;animation:caret 1s steps(1) infinite}
@keyframes type{from{clip-path:inset(-4px 100% -4px 0)}to{clip-path:inset(-4px -4px -4px 0)}}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.lead-keys .key.solid:not(:hover){animation:nudge 3.6s steps(1) 3s infinite}
@keyframes nudge{0%,90%,100%{transform:translateY(0)}93%{transform:translateY(-6px)}96%{transform:translateY(0)}98%{transform:translateY(-3px)}}

/* ================= scroll reveal: panels print in, top to bottom ================= */
.js-rv .rv{opacity:0}
.js-rv .rv.in{opacity:1;animation:print .55s steps(8) backwards;animation-delay:var(--d,0ms)}
@keyframes print{from{clip-path:inset(-8px -8px 100% -8px)}to{clip-path:inset(-8px -8px -8px -8px)}}

/* ================= clicks and hovers ================= */
.fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.fx i{position:absolute;display:block}
.wipe{position:fixed;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--lime),var(--cyan));opacity:0;pointer-events:none;z-index:55}
.wipe.go{animation:wipe .5s steps(16) 1}
@keyframes wipe{from{transform:translateY(0);opacity:.9}to{transform:translateY(100vh);opacity:0}}
.plate:hover img{animation:hop2 .36s steps(2) 1}
@keyframes hop2{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mandate:hover img,.mandate-card:hover .mi{animation:wiggle .5s steps(4) 1}
@keyframes wiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.key.solid{overflow:hidden}
.key.solid::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.key.solid:hover:not([aria-disabled=true])::after{animation:sheen .6s steps(10) 1}
@keyframes sheen{to{transform:translateX(120%)}}
.nope{animation:nope .4s steps(1) 1}
@keyframes nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.hand img{transition:transform .1s steps(2)}
.hand:hover img{transform:translateY(-6px)}
.toast{animation:pop2 .3s steps(3) backwards}
@keyframes pop2{from{transform:translate(-50%,16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ================= mascot ================= */
.sprite{position:relative;display:block;height:100%;animation:bob 1.3s steps(1) infinite;outline:none}
.sprite img{display:block;height:100%;width:auto}
.sprite .s-blink{position:absolute;left:0;top:0;opacity:0}
.sprite.blink .s-blink{opacity:1}
.sprite[role=button]{cursor:pointer}
.sprite:focus-visible{outline:3px solid var(--white);outline-offset:6px}
.sprite.hop{animation:hop .6s steps(1) 1}
@keyframes bob{0%,49.9%{transform:translateY(0)}50%,100%{transform:translateY(calc(var(--u) * -2))}}
@keyframes hop{0%{transform:translateY(0)}15%{transform:translateY(-14px)}35%{transform:translateY(-30px)}55%{transform:translateY(-30px)}75%{transform:translateY(-12px)}100%{transform:translateY(0)}}
.mascot-host{position:relative;display:block}
.mascot-host .sprite{height:auto}
.mascot-host .sprite img{width:100%;height:auto}
.mascot-host .sprite .s-blink{width:100%}
.sheet-hero .mascot-host{width:min(300px,64%)}
.bubble{position:absolute;left:50%;bottom:100%;margin-bottom:10px;transform:translateX(-50%);background:var(--panel);color:var(--ink);font-family:var(--display);font-weight:600;font-size:17px;padding:8px 14px;white-space:nowrap;z-index:5;box-shadow:0 -3px 0 0 var(--white),0 3px 0 0 var(--white),-3px 0 0 0 var(--white),3px 0 0 0 var(--white);animation:pop .25s steps(3) backwards}
@keyframes pop{from{transform:translateX(-50%) scale(.6)}to{transform:translateX(-50%) scale(1)}}

/* ================= marquee ================= */
.marquee{overflow:hidden;border-top:var(--u) solid var(--rule);border-bottom:var(--u) solid var(--rule);padding:18px 0;background:#050c08}
.marquee-track{display:flex;width:max-content;animation:mq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-run{display:flex;align-items:center;gap:30px;padding-right:30px;flex:none}
.mq-item{font-family:var(--px);font-size:clamp(12px,1.15vw,16px);text-transform:uppercase;color:var(--ink);white-space:nowrap}
.mq-item.alt{color:var(--lime)}
.spark{display:block;flex:none;width:3px;height:3px;margin:0 6px;background:var(--white);box-shadow:0 -3px 0 var(--white),0 3px 0 var(--white),-3px 0 0 var(--white),3px 0 0 var(--white)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ================= cards, loop, glyphs ================= */
.card,.stepcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;text-decoration:none;color:var(--ink);background:rgba(70,230,160,.04);border:var(--u) solid var(--rule-soft);transition:transform .1s steps(2),border-color .1s steps(2),background-color .1s steps(2)}
.card:hover,.stepcard:hover{transform:translateY(calc(var(--u) * -1));border-color:var(--white);background:rgba(70,230,160,.1)}
.card h4,.stepcard h4{margin:0;font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink)}
.card p,.stepcard p{margin:0;font-size:16px;font-weight:500;line-height:1.5;color:var(--ink-2)}
.cardgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.mandate-card .mi{width:96px;height:96px;display:block}
.glyph{position:relative;display:block;width:72px;height:72px;flex:none}
.glyph img{position:absolute;inset:0;width:100%;height:100%;display:block}
.glyph .g-solid{opacity:0}
.card:hover .g-solid,.stepcard:hover .g-solid,.stepcard.active .g-solid{opacity:1}
.card:hover .glyph,.stepcard:hover .glyph{animation:hop2 .36s steps(2) 1}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:clamp(8px,1.2vw,18px);align-items:stretch}
.flow-arrow{align-self:center;display:block;width:18px;height:18px;background:var(--rule);clip-path:polygon(0 0,34% 0,34% 17%,67% 17%,67% 34%,100% 34%,100% 66%,67% 66%,67% 83%,34% 83%,34% 100%,0 100%);animation:arrow 1.2s steps(2) infinite}
@keyframes arrow{0%{background:var(--rule)}50%{background:var(--ink)}}
.stepcard .n{font-family:var(--px);font-size:14px;color:var(--ink-2)}
.stepcard.active{border-color:var(--ink);background:rgba(70,230,160,.13)}

/* ================= fee bar ================= */
.feebar{display:flex;height:68px;border:var(--u) solid var(--white);background:#040705;overflow:hidden}
.feebar .seg{width:var(--w);display:flex;align-items:center;justify-content:center;min-width:0;color:#04100b;border-right:var(--u) solid #040705;overflow:hidden}
.feebar .seg:last-child{border-right:0}
.seg b{font-family:var(--px);font-weight:400;font-size:clamp(10px,1.2vw,15px)}
.js-rv .feebar .seg{width:0}
.js-rv .in .feebar .seg{width:var(--w);transition:width 1s steps(14)}
.legend{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.legend li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.legend i{display:block;width:16px;height:16px}
.lg-n{font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink)}
.legend li span:last-child{grid-column:1 / -1;font-size:16px;font-weight:500;color:var(--ink-2)}

/* ================= journal, faq, cta ================= */
.j-tag{margin:0 0 18px;font-size:16px;font-weight:500;color:var(--ink-2)}
.j-entry{border:var(--u) solid var(--rule-soft);padding:22px;background:rgba(70,230,160,.04)}
.j-when{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink-2)}
.j-act{font-family:var(--display);font-weight:600;font-size:22px;margin:8px 0 10px;color:var(--ink)}
.j-why{margin:0;font-size:17px;font-weight:500;line-height:1.55;color:var(--ink-2);min-height:3.3em;max-width:72ch}
.caret{display:inline-block;width:.5em;height:1em;margin-left:2px;background:var(--ink);vertical-align:-.12em;animation:caret 1s steps(1) infinite}
.faq{display:grid;gap:14px}
.faq-item{border:var(--u) solid var(--rule-soft);background:rgba(70,230,160,.03)}
.faq-item[open]{border-color:var(--rule)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 22px;font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--px);font-size:16px;color:var(--ink-2);flex:none}
.faq-item[open] summary::after{content:"-"}
.faq-item summary:hover{color:var(--white)}
.faq-item p{margin:0;padding:0 22px 20px;max-width:72ch;font-weight:500;color:var(--ink-2)}
.faq-item[open] p{animation:open .4s steps(6) backwards}
@keyframes open{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(8px,2vw,28px) clamp(8px,2vw,24px)}
.cta-grid h3{margin:0 0 16px;font-family:var(--px);font-weight:400;font-size:clamp(16px,2.2vw,30px);line-height:1.45;color:var(--ink)}
.cta-grid p{margin:0 0 24px;max-width:46ch;font-weight:500;color:var(--ink-2)}
.cta .mascot-host{width:clamp(150px,16vw,230px)}

@media (max-width:900px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-arrow{justify-self:center;transform:rotate(90deg)}
  .cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage.tall{min-height:0}
  .stage.tall .floor-view{min-height:340px}
}
@media (max-width:640px){
  .cta-grid{grid-template-columns:1fr}
  .cta .mascot-host{width:150px}
  .cardgrid{grid-template-columns:minmax(0,1fr)}
}