/* self-hosted fonts (SIL Open Font License, see /fonts) */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bangers";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bangers-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}
:root{
  --bg:#06080d;
  --win:#0b101b;
  --bar:#121a2c;
  --grid:#16213a;
  --bull:#39ff88;
  --bear:#ff4d5e;
  --amber:#ffb43c;
  --tim:#e3a53c;
  --ink:#e6ecff;
  --mute:#7f8bb0;
  --leoF:"Anton", Impact, "Arial Narrow", sans-serif;
  --timF:"Bangers", "Comic Sans MS", cursive;
  --term:"VT323", "IBM Plex Mono", ui-monospace, monospace;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
body{
  margin:0;color:var(--ink);font:400 15px/1.6 var(--mono);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/32px 100%,
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
body::before{ /* vignette */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:40;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
}
body::after{ /* CRT scanlines */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:41;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.wrap{max-width:580px;margin:0 auto;padding:18px 16px 56px;position:relative;z-index:1}

/* ---------- Terminal window ---------- */
.win{background:var(--win);border:2px solid var(--grid);margin-top:22px;box-shadow:6px 6px 0 rgba(0,0,0,.6)}
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bar);border-bottom:2px solid var(--grid);padding:4px 10px;
  font:400 20px/1 var(--term);color:var(--mute);letter-spacing:.04em
}
.bar .dots{display:flex;gap:6px}
.bar .dots i{width:10px;height:10px;display:block;background:var(--grid)}
.bar .dots i:first-child{background:var(--bear)}
.bar .dots i:nth-child(2){background:var(--amber)}
.bar .dots i:last-child{background:var(--bull)}
.body{padding:18px 16px 20px}
.prompt{font:400 22px/1.2 var(--term);color:var(--bull);margin:0 0 12px}
.prompt::before{content:"> ";color:var(--mute)}
.cursor{display:inline-block;width:.55em;height:1em;background:var(--bull);vertical-align:-2px;margin-left:2px}
@media (prefers-reduced-motion:no-preference){.cursor{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}}

/* ---------- 3D layers ---------- */
.gl{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block}
.chart.gl-on svg{display:none}
.coin3d{position:absolute;right:96px;top:-52px;width:104px;height:104px;image-rendering:pixelated;z-index:3;pointer-events:none}

/* ---------- Hero ---------- */
.hero .body{padding:0}
.chart{position:relative;height:340px;overflow:hidden;border-bottom:2px solid var(--grid);background:radial-gradient(ellipse at 50% 100%, #10203a 0%, transparent 70%)}
.chart svg{position:absolute;left:0;right:0;top:20px;width:100%;height:200px;opacity:.55}
.chart .price{
  position:absolute;right:8px;top:10px;font:400 20px/1 var(--term);color:var(--bg);background:var(--bull);padding:2px 6px
}
.chart .char{position:absolute;bottom:0;height:250px;width:auto;filter:drop-shadow(0 0 0 transparent) drop-shadow(4px 4px 0 rgba(0,0,0,.7))}
.chart .c-leo{left:6%}
.chart .c-tim{right:6%;height:244px}
.say{position:absolute;z-index:2;max-width:150px;padding:8px 10px;line-height:1.05;border:2px solid var(--bg)}
.say.leo{left:34%;top:70px;background:var(--ink);color:var(--bg);font:400 20px/1.05 var(--leoF);text-transform:uppercase}
.say.tim{right:33%;top:160px;background:var(--tim);color:var(--bg);font:400 22px/1 var(--timF);letter-spacing:.03em}
.say::after{content:"";position:absolute;top:12px;width:10px;height:10px;background:inherit}
.say.leo::after{left:-8px}
.say.tim::after{right:-8px}
.titleblock{padding:18px 16px 20px}
h1{
  margin:0;font:400 clamp(44px,14.5vw,92px)/.9 var(--leoF);letter-spacing:.01em;color:var(--ink);
  text-shadow:1px 1px 0 #9aa6d6,2px 2px 0 #7d89bd,3px 3px 0 #646fa3,4px 4px 0 #4d578a,5px 5px 0 #3a4370,6px 6px 0 #2a3258,7px 7px 0 #1d2442,10px 12px 14px rgba(0,0,0,.6);
  transform:perspective(500px) rotateX(10deg) rotateY(-8deg);transform-origin:left center
}
.byline{margin:14px 0 0;font:400 30px/1 var(--leoF);text-transform:uppercase;letter-spacing:.03em}
.byline .and{color:var(--amber)}
.sub{margin:12px 0 0;color:var(--mute);max-width:40ch}

/* ---------- Headings ---------- */
h2{margin:0 0 8px;font:400 34px/1 var(--leoF);text-transform:uppercase;letter-spacing:.01em}
.lede{margin:0 0 16px;color:var(--mute)}

/* ---------- Links ---------- */
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--grid)}
.link{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;
  padding:12px 4px;border-bottom:1px solid var(--grid);text-decoration:none
}
.link .key{font:400 22px/1 var(--term);color:var(--amber)}
.link b{display:block;font-weight:600}
.link small{display:block;color:var(--mute);font-size:13px;line-height:1.4}
.link .st{font:400 18px/1 var(--term);color:var(--bull);white-space:nowrap}
.link .st.aff{color:var(--amber)}
a.link:hover{background:var(--bar)}
a.link:hover b{color:var(--bull)}
.link.off{opacity:.5}
.link.off .st{color:var(--mute)}

/* ---------- School ---------- */
.school .body{display:grid;grid-template-columns:1fr 120px;gap:8px 14px}
.school .copy{grid-column:1}
.school .leo-img{grid-column:2;grid-row:1 / span 2;height:230px;width:auto;justify-self:end;align-self:start;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.7))}
.school form,.school .done{grid-column:1 / -1}
.checks{list-style:none;margin:0 0 4px;padding:0}
.checks li{padding-left:2.2em;text-indent:-2.2em}
.checks li::before{content:"[ ] ";color:var(--bull);font-family:var(--mono)}
.status{display:inline-block;font:400 18px/1 var(--term);color:var(--bg);background:var(--amber);padding:3px 7px;margin-bottom:10px}
form{margin-top:14px;display:grid;gap:12px}
label{display:grid;gap:4px;font-size:13px;color:var(--mute)}
input,select{
  font:500 15px var(--mono);color:var(--ink);background:var(--bg);
  border:2px solid var(--grid);padding:10px 12px;border-radius:0;width:100%
}
input:focus,select:focus{border-color:var(--bull);outline:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp{position:absolute;left:-9999px}
.err{color:var(--bear);font-size:13px;margin:0;min-height:1em}
.done{border:2px solid var(--bull);padding:12px 14px;color:var(--bull);font:400 22px/1.2 var(--term)}

/* ---------- Buttons ---------- */
.btn{
  display:flex;justify-content:center;align-items:center;width:100%;
  padding:14px;border:0;cursor:pointer;text-decoration:none;
  font:400 24px/1 var(--leoF);text-transform:uppercase;letter-spacing:.04em;
  background:var(--bull);color:var(--bg);box-shadow:4px 4px 0 #0f6b3a
}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #0f6b3a}
.btn[aria-disabled="true"],.btn:disabled{background:var(--grid);color:var(--mute);box-shadow:none;cursor:not-allowed}

/* ---------- Tip jar ---------- */
.jar{position:relative}
.jar .body{position:relative}
.jar-head{display:grid;grid-template-columns:1fr 100px;gap:10px;align-items:start}
.jar-head img{height:180px;width:auto;justify-self:end;margin-top:-10px;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.7))}
.say-inline{display:inline-block;background:var(--tim);color:var(--bg);font:400 22px/1 var(--timF);letter-spacing:.03em;padding:6px 10px;margin:4px 0 10px}
.tabs{display:grid;grid-template-columns:1fr 1fr;margin:18px 0 16px;border:2px solid var(--grid)}
.tabs button{
  appearance:none;border:0;background:transparent;color:var(--mute);padding:10px 8px;cursor:pointer;
  font:400 24px/1 var(--term);letter-spacing:.06em
}
.tabs button[aria-selected="true"]{background:var(--bull);color:var(--bg)}
.pane[hidden]{display:none}
.note{color:var(--mute);font-size:13px;margin:12px 0 0}
.coins{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.coins button{
  appearance:none;cursor:pointer;background:var(--bg);color:var(--ink);border:2px solid var(--grid);
  padding:6px 14px;font:400 22px/1 var(--term);letter-spacing:.05em
}
.coins button[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
.wallet{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center}
.qr{width:132px;height:132px;background:#fff;padding:8px;display:grid;place-items:center}
.qr img,.qr canvas{width:116px!important;height:116px!important}
.qr.empty{background:var(--bg);border:2px dashed var(--grid);color:var(--mute);font:400 18px/1.1 var(--term);text-align:center;padding:10px}
.net{margin:0 0 6px;font-size:13px;color:var(--mute)}
.net b{color:var(--amber);font-weight:600}
.addr{font:500 13px/1.4 var(--mono);word-break:break-all;background:var(--bg);border:1px solid var(--grid);padding:8px 10px;margin:0 0 10px}
.copy-btn{appearance:none;cursor:pointer;background:transparent;color:var(--amber);border:2px solid var(--amber);padding:6px 12px;font:400 20px/1 var(--term);letter-spacing:.05em}
.copy-btn:disabled{color:var(--mute);border-color:var(--grid);cursor:not-allowed}
.warn{margin:14px 0 0;font-size:13px;color:var(--mute);border-left:3px solid var(--bear);padding-left:10px}

footer{margin-top:30px;text-align:center;color:var(--mute);font-size:13px}
footer .nfa{font:400 20px/1.15 var(--leoF);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin:0 0 8px}
footer p{margin:6px auto;max-width:46ch}

@media (max-width:420px){
  .chart{height:300px}
  .chart .char{height:212px}.chart .c-tim{height:206px}
  .say{max-width:124px}
  .say.leo{left:31%;top:60px;font-size:17px}.say.tim{right:30%;top:140px;font-size:19px}
  .school .body{grid-template-columns:1fr 92px}.school .leo-img{height:180px}
  .wallet{grid-template-columns:1fr}.qr{margin:0 auto}
  .coin3d{right:84px;width:88px;height:88px;top:-44px}
  .row{grid-template-columns:1fr}
}

.tight{margin:0}
.consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13px;color:var(--mute)}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--bull)}
.consent a{color:var(--amber)}
.legal-links{margin:10px 0 0}
.legal-links a{color:var(--amber);text-decoration:none;margin:0 6px}
.legal-links a:hover{text-decoration:underline}

/* legal page */
.legal h2{font-size:28px;margin-top:6px}
.legal h3{font:600 15px/1.4 var(--mono);color:var(--amber);margin:22px 0 6px}
.legal p,.legal li{font-size:14px;color:var(--ink)}
.legal ul{padding-left:20px;margin:6px 0}
.legal .meta{color:var(--mute);font-size:13px;margin:0 0 10px}
.legal .ph{background:#3a2a05;color:var(--amber);padding:0 4px}
.back{display:inline-block;margin:18px 0 0;color:var(--amber);font:400 22px/1 var(--term);text-decoration:none}