/* $HOODIE — v2
   An intro that takes over the machine, a sword through the glass, then a dark
   city where Hoodie draws his blade with the contract address on it. */

@font-face { font-family: 'Bungee'; src: url('../assets/fonts/bungee-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../assets/fonts/geologica-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../assets/fonts/geologica-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geologica'; src: url('../assets/fonts/geologica-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('../assets/fonts/martian-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('../assets/fonts/martian-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('../assets/fonts/silkscreen-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --night: #02040a;
  --lime: #c4fb07;
  --lime-hover: #d6ff45;
  --lime-ink: #0d1500;
  --paper: #eef1e6;
  --fog: #a7aec2;
  --line: rgba(196, 251, 7, 0.38);
  --warn: #ff8a65;

  --blue: #1f8fe5;          /* the virus face */
  --blue-deep: #0b3d91;
  --cyan: #5ff2ff;

  --sign: 'Bungee', 'Arial Black', Impact, sans-serif;
  --ui: 'Geologica', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --code: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --pixel: 'Silkscreen', var(--code);

  --gutter: clamp(16px, 5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; background: var(--night); }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.is-intro { overflow: hidden; }
img, canvas { display: block; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; border-radius: 8px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================================ face */
.face__bg { fill: var(--face-bg, var(--blue)); }
.face__ink { fill: var(--face-ink, #000); }
.face__eyes { fill: var(--face-eye, var(--cyan)); }

/* ================================================================ intro */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #000;
  cursor: progress;
}
.intro.is-open { background: transparent; pointer-events: none; }

.intro__glitch { position: absolute; inset: 0; opacity: 0; }
.intro__faces { position: absolute; inset: 0; }

/* one stray face somewhere on the screen; RGB ghosts are its own copies */
.vface {
  position: absolute;
  width: var(--s, 120px);
  aspect-ratio: 760 / 680;
  --face-bg: var(--blue);
  image-rendering: pixelated;
}
.vface svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vface svg:nth-child(2) { --face-ink: #ff0040; --face-eye: #ff0040; opacity: .85; transform: translateX(-3%); }
.vface svg:nth-child(3) { --face-ink: #00e5ff; --face-eye: #00e5ff; opacity: .85; transform: translateX(3%); }
.vface--crt::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 2px, transparent 2px 5px);
}

.intro__center {
  position: absolute;
  left: 50%; top: 50%;
  width: min(62vmin, 520px);
  aspect-ratio: 760 / 680;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.intro__label .glitch { margin: 0; font-size: inherit; font-weight: 400; cursor: default; }
.intro__bigface { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__bigface--r { --face-ink: #ff0040; --face-eye: #ff0040; mix-blend-mode: screen; transform: translateX(-2.5%); }
.intro__bigface--c { --face-ink: #00e5ff; --face-eye: #00e5ff; mix-blend-mode: screen; transform: translateX(2.5%); }
.intro__center::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
.intro__label {
  position: absolute;
  left: 50%; top: calc(100% + 0.6em);
  transform: translateX(-50%);
  white-space: nowrap;
  font: 400 clamp(1.4rem, 4.2vmin, 2.6rem)/1 var(--sign);
  color: #e8f7ff;
}

/* Windows XP, Luna blue */
.intro__windows { position: absolute; inset: 0; }
.xp {
  position: absolute;
  width: min(360px, 82vw);
  border: 1px solid #0831d9;
  border-radius: 8px 8px 0 0;
  background: #ece9d8;
  color: #000;
  font: 12px/1.35 Tahoma, 'Segoe UI', Verdana, sans-serif;
  box-shadow: 4px 6px 0 rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.4) inset;
  overflow: hidden;
}
.xp__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 8px;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #003dd7 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-shadow: 1px 1px 0 #0f1089;
}
.xp__bar img { width: 16px; height: 16px; }
.xp__bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp__close {
  display: grid; place-items: center;
  width: 21px; height: 21px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(180deg, #e97a5a, #c23a12);
  color: #fff;
  font: 700 13px/1 Tahoma, sans-serif;
}
.xp__body { display: flex; gap: 12px; padding: 14px 14px 6px; }
.xp__icon {
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #e01b1b 55%, #9c0000);
  color: #fff;
  font: 700 18px/1 Tahoma, sans-serif;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.xp__icon--warn { border-radius: 4px; background: none; color: #000; font-size: 0; }
.xp__icon--warn::before { content: ''; border: 16px solid transparent; border-bottom: 28px solid #f5c400; border-top: 0; filter: drop-shadow(0 1px 0 #9b7b00); }
.xp__msg { margin: 0; padding-top: 2px; }
.xp__btns { display: flex; justify-content: center; gap: 8px; padding: 8px 0 12px; }
.xp__btns b {
  min-width: 74px;
  padding: 3px 10px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ece9d8 86%, #d6d0c0);
  text-align: center;
  font-weight: 400;
}

.gate {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  padding: 16px;
  background: #000;
  cursor: default;
}
.gate[hidden] { display: none; }
.xp--gate { position: relative; width: min(380px, 92vw); animation: gate-in .5s steps(4) both; }
.xp--gate .xp__msg { font-size: 13px; }
.xp__btn {
  min-width: 86px;
  padding: 4px 12px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ece9d8 86%, #d6d0c0);
  color: #000;
  font: 12px/1.3 Tahoma, 'Segoe UI', Verdana, sans-serif;
  cursor: pointer;
}
.xp__btn:hover { box-shadow: inset 0 0 0 2px #f8b636; }
.xp__btn--default { box-shadow: inset 0 0 0 1px #5a8ae6; }
.xp__btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
@keyframes gate-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

.intro__bsod {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center;
  gap: 1.2em;
  padding: 2em;
  background: #0000aa;
  color: #fff;
  font: 400 clamp(13px, 1.8vw, 20px)/1.5 var(--code);
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.intro__bsod p { margin: 0; }
.intro__bsod-title { padding: 0 .6em; background: #aaa; color: #0000aa; font-weight: 500; }

.intro__noise { position: absolute; inset: 0; pointer-events: none; }
.intro__cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.intro__cracks path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cut__cracks { filter: drop-shadow(0 0 1.2px rgba(200, 240, 255, .7)); }
.cut__cracks path { stroke: rgba(232, 248, 255, .78); }
.cut__chips circle { fill: #fff; opacity: 0; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(196, 251, 7, .9)); }
.intro__cracks .cut__bloom { stroke: #d8ff7a; stroke-width: 8; opacity: .22; filter: blur(6px); }
.intro__cracks .cut__glow { stroke: #f4ffe6; stroke-width: 2.2; opacity: .8; filter: blur(1.2px); }
.intro__cracks .cut__core { stroke: #fff; stroke-width: 1.1; }
/* the glint before the cut: a hard star with a long anamorphic streak */
.intro__glint {
  position: absolute;
  width: 560px; height: 90px;
  margin: -45px 0 0 -280px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 2px, rgba(240,255,190,.85) 5px, rgba(196,251,7,.25) 16px, transparent 34px),
    radial-gradient(ellipse 50% 3% at 50% 50%, rgba(255,255,255,.95), rgba(160,240,255,.35) 45%, transparent 100%),
    linear-gradient(0deg, transparent 49.4%, rgba(255,255,255,.5) 50%, transparent 50.6%) center / 2px 70% no-repeat;
  pointer-events: none;
  visibility: hidden;
  mix-blend-mode: screen;
}
.intro__light { position: absolute; inset: 0; pointer-events: none; visibility: hidden; mix-blend-mode: screen; }
.intro { perspective: 1400px; }
.intro__half > * { position: absolute; inset: 0; }
.intro__half .intro__center { inset: auto; }
.intro__half .xp { position: absolute; }
.shards--after { position: fixed; inset: 0; z-index: 99; width: 100%; height: 100%; pointer-events: none; }

.intro__sword {
  display: none;   /* the blade is drawn on the canvas now */
  position: absolute;
  left: 0; top: 0;
  width: var(--len, 120vmax);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}
.intro__sword-img { width: 100%; aspect-ratio: 1400 / 120; filter: drop-shadow(0 0 18px rgba(196, 251, 7, .65)) drop-shadow(0 0 60px rgba(196, 251, 7, .35)); }
.intro__sword-img img, .intro__sword-img svg { width: 100%; height: 100%; display: block; }

.intro__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

/* the two halves of the cut screen; the diagonal runs top right to bottom left */
.intro__half {
  position: absolute; inset: -2px;
  background:
    repeating-linear-gradient(to bottom, rgba(31,143,229,.06) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at 50% 50%, #04122a, #000 70%);
  visibility: hidden;
  overflow: hidden;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 8px rgba(225, 255, 170, .55));
  transform-style: preserve-3d;
  will-change: transform;
}
.intro__half--a { clip-path: polygon(0 0, 100% 0, 0 100%); }
.intro__half--b { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.intro__shards { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.skip {
  position: fixed;
  z-index: 101;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 2px solid var(--lime);
  border-radius: 999px;
  background: rgba(0,0,0,.75);
  color: var(--lime);
  font: 700 .9375rem/1 var(--code);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0 18px -4px rgba(196, 251, 7, .7);
  cursor: pointer;
  transition: opacity .3s, background-color .2s, color .2s;
}
.skip::after { content: '\25B6\25B6'; font-size: .7em; letter-spacing: -2px; }
.skip:hover, .skip:focus-visible { background: var(--lime); color: #0a0f05; }
body:not(.is-intro) .skip { opacity: 0; pointer-events: none; }

/* ================================================================ nav */
.nav {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(12px, 2vw, 24px) var(--gutter);
  transition: background-color .3s, backdrop-filter .3s;
}
.nav.is-solid {
  background: rgba(2, 4, 10, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--lime);
  text-decoration: none;
  font: 400 1.25rem/1 var(--sign);
  text-shadow: 0 0 14px rgba(196, 251, 7, .45);
}
.nav__brand img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; filter: drop-shadow(0 0 10px rgba(196, 251, 7, .4)); }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link, .nav__icon {
  display: inline-grid; place-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--paper);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s, background-color .2s;
}
.nav__icon { width: 44px; padding: 0; }
.nav__icon svg { width: 19px; height: 19px; fill: currentColor; }
.nav__link:hover, .nav__icon:hover { color: var(--lime); background: rgba(238,241,230,.07); }
.nav__buy {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin-left: 8px;
  padding: 0 18px;
  border: 1px solid var(--lime);
  border-radius: 12px;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 24px -6px rgba(196, 251, 7, .8);
  transition: background-color .2s, transform .12s;
}
.nav__buy:hover { background: var(--lime-hover); }
.nav__buy:active { transform: translateY(1px); }

.nav__burger { display: none; }
.nav__brand { margin-right: auto; }

/* the mute button: all sound on/off, also on phones */
.snd {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  margin-left: 8px;
  padding: 0;
  border: 1px solid rgba(196, 251, 7, .35);
  border-radius: 50%;
  background: rgba(2, 4, 10, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--lime);
  cursor: pointer;
  transition: border-color .25s, color .25s;
}
.snd:hover { border-color: var(--lime); }
.snd svg { width: 22px; height: 22px; }
.snd .snd__off { display: none; }
.snd.is-muted { color: rgba(238,241,230,.65); border-color: rgba(238,241,230,.25); }
.snd.is-muted .snd__on { display: none; }
.snd.is-muted .snd__off { display: inline; }
.snd:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* the music player: the CD spins while a track plays, stands still when off */
.cd {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 48px;
  margin-left: 12px;
  padding: 3px 4px 3px 3px;
  border: 1px solid rgba(196, 251, 7, .35);
  border-radius: 999px;
  background: rgba(2, 4, 10, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .25s, box-shadow .25s;
}
.cd:hover { border-color: var(--lime); }
.cd.is-playing { box-shadow: 0 0 22px -6px rgba(196, 251, 7, .75); }
.cd button { border: 0; background: none; color: var(--paper); cursor: pointer; }
.cd__toggle { display: grid; place-items: center; padding: 0; border-radius: 50%; }
.cd__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  /* a chrome CD: rainbow sheen, grooves, the clear ring in the middle */
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.55) 32%, transparent 34%),
    repeating-radial-gradient(circle, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    conic-gradient(from 20deg, #d9dde6, #9ff7ff 12%, #e8ff8a 22%, #f6f7fb 30%, #c9a8ff 42%, #ffb3e6 50%, #dfe3ea 58%, #8ff0ff 70%, #f2ff9c 80%, #e7d1ff 90%, #d9dde6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 0 6px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.5);
  will-change: transform;
  transition: filter .5s;
}
.cd__disc::after {   /* the light stays put while the disc turns under it */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 38%, transparent 62%, rgba(255,255,255,.25));
  mix-blend-mode: soft-light;
}
.cd__label {
  display: grid; place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 2px #05070c, 0 0 0 3px rgba(255,255,255,.5);
}
.cd__label img { width: 12px; height: 12px; filter: brightness(0); }
.cd__title {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px;
  padding: 0 8px 0 9px;
  border-radius: 999px;
  font: 600 .8125rem/1 var(--ui);
  white-space: nowrap;
}
.cd__title:hover, .cd__next:hover { background: rgba(238,241,230,.08); color: var(--lime); }
.cd__name { display: inline-block; min-width: 7.2em; text-align: left; }
.cd__num { color: rgba(238,241,230,.5); font: 500 .6875rem/1 var(--code); }
.cd__caret { width: 10px; height: 6px; color: rgba(238,241,230,.6); transition: transform .2s; }
.cd__title[aria-expanded="true"] .cd__caret { transform: rotate(180deg); }
.cd__next { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.cd__next svg { width: 17px; height: 17px; }
.cd__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.cd__eq i {
  width: 3px; height: 3px;
  border-radius: 1px;
  background: var(--lime);
  box-shadow: 0 0 6px rgba(196, 251, 7, .8);
}
.cd.is-playing .cd__eq i { animation: cd-eq .9s ease-in-out infinite alternate; }
.cd.is-playing .cd__eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.cd.is-playing .cd__eq i:nth-child(3) { animation-duration: 1.05s; animation-delay: -.5s; }
.cd.is-playing .cd__eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.15s; }
@keyframes cd-eq { 0% { height: 3px; } 100% { height: 14px; } }
.cd:not(.is-playing) .cd__disc { filter: saturate(.25) brightness(.75); }
.cd:not(.is-playing) .cd__eq i { background: rgba(238,241,230,.35); box-shadow: none; }
/* the track list */
.cd__menu {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 250px;
  padding: 8px;
  border: 1px solid rgba(196, 251, 7, .35);
  border-radius: 18px;
  background: rgba(2, 4, 10, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.8), 0 0 30px -10px rgba(196,251,7,.4);
}
.cd__menu[hidden] { display: none; }
.cd__menu button {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  text-align: left;
  font: 500 .9375rem/1.2 var(--ui);
}
.cd__menu button:hover { background: rgba(238,241,230,.07); color: var(--lime); }
.cd__menu button[aria-current="true"] { color: var(--lime); background: rgba(196,251,7,.08); }
.cd__menu .n { color: rgba(238,241,230,.45); font: 500 .75rem/1 var(--code); }
.cd__menu .vibe { color: rgba(238,241,230,.45); font-size: .75rem; }

.menu {
  position: fixed;
  z-index: 49;
  top: 70px; right: var(--gutter); left: var(--gutter);
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(2, 4, 10, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.menu[hidden] { display: none; }
.menu a {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  color: var(--paper);
  font-weight: 500;
  text-decoration: none;
}
.menu a:hover { background: rgba(238,241,230,.07); color: var(--lime); }
.menu .menu__buy { margin-top: 6px; background: var(--lime); color: var(--lime-ink); text-align: center; font-weight: 600; }

/* ================================================================ hero */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  padding: clamp(78px, 11vh, 120px) var(--gutter) clamp(22px, 4vh, 44px);
  background: #000;
}
.hero__city { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero__vignette {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%, transparent 72%, rgba(2,4,10,.95) 100%);
}

.hero__title {
  margin: 0;
  font: 400 clamp(3.4rem, 13vw, 11.5rem)/0.86 var(--sign);
  letter-spacing: 0.01em;
  color: var(--lime);
  text-align: center;
  white-space: nowrap;
}
.hero__title-text { display: inline-block; }
.hero__title .char {
  display: inline-block;
  text-shadow:
    0 0 0.04em rgba(196, 251, 7, .9),
    0 0 0.2em rgba(196, 251, 7, .45),
    0 0 0.6em rgba(196, 251, 7, .22);
}

.hero__stage {
  position: relative;
  align-self: stretch;
  width: min(100%, 1180px);
  min-height: 0;
  display: grid;
  place-items: center;
}
.hero__glow {
  position: absolute;
  left: 50%; top: 55%;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 251, 7, .22), rgba(196, 251, 7, .06) 40%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}
.hero__figure {
  position: relative;
  height: min(64svh, 640px);
  width: auto;
  margin-top: -2svh;
  filter: brightness(0) drop-shadow(0 0 1px rgba(196, 251, 7, .9)) drop-shadow(0 0 14px rgba(196, 251, 7, .35));
}
.hero__frames, .edge, .ca-pill { display: none; }
.hero.has-frames .hero__figure, .hero.has-frames .blade { display: none; }

/* frames mode: Hoodie stands at the foot of the screen, big enough that the
   address on his blade can be read */
.hero.has-frames .hero__stage { position: absolute; inset: 0; z-index: 0; width: auto; }
.hero.has-frames .hero__frames {
  display: block;
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(48px, 9svh, 110px);   /* room under his feet for the rooftop */
  margin-inline: auto;
  height: min(72svh, 860px, 62vw);
  width: auto;
  max-width: none;
}
.hero.has-frames .hero__glow { top: 62%; }
.hero.has-frames .hero__title, .hero.has-frames .hero__actions { position: relative; z-index: 1; }
.hero.has-frames .hero__title { font-size: clamp(3rem, 10vw, 8.5rem); }

.hero.has-frames .hero__rig { position: absolute; inset: 0; will-change: transform; }

/* the address, laser-engraved into the blade: a dark groove that grows with
   the letters, neon letters burning in, a white-hot laser head on the newest */
.edge {
  display: flex;
  position: absolute;
  left: 0; top: 0;
  z-index: 3;
  align-items: center;
  justify-content: center;
  height: 2em;
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 0 50%;
  font-family: var(--code);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: copy;
  opacity: 0;
}
.edge__groove { display: none; }   /* no plate behind the letters: they sit on the steel */
.edge__groove--unused {
  position: absolute;
  top: 50%;
  height: 1.55em;
  transform: translateY(-50%);
  border-radius: 0.3em;
  background: linear-gradient(180deg, rgba(0, 6, 0, .92), rgba(8, 20, 2, .86) 55%, rgba(0, 4, 0, .94));
  box-shadow:
    inset 0 0 0 1px rgba(196, 251, 7, .55),
    inset 0 0.12em 0.25em rgba(0, 0, 0, .9),
    0 0 0.5em rgba(196, 251, 7, .55),
    0 0 1.4em rgba(196, 251, 7, .25);
  opacity: 0;
  transition: opacity .3s;
}
.edge__text { position: relative; letter-spacing: 0; }
.edge__text span {
  display: inline-block;
  opacity: 0;
  color: #f6ffd6;
  /* a hair-thin dark outline keeps the light letters readable on the bright
     steel, the lime glow makes them look burnt in */
  text-shadow:
    1px 0 0 rgba(6,16,0,.9), -1px 0 0 rgba(6,16,0,.9), 0 1px 0 rgba(6,16,0,.9), 0 -1px 0 rgba(6,16,0,.9),
    1px 1px 0 rgba(6,16,0,.7), -1px -1px 0 rgba(6,16,0,.7), 1px -1px 0 rgba(6,16,0,.7), -1px 1px 0 rgba(6,16,0,.7),
    0 0 6px rgba(196,251,7,.95), 0 0 14px rgba(196,251,7,.55);
}
.edge__text span[data-on="1"] { opacity: 1; }
.edge__head {
  position: absolute;
  top: 50%;
  width: 0.5em; height: 0.5em;
  margin: -0.25em 0 0 -0.1em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.4em 0.15em #fff, 0 0 1.1em 0.4em var(--lime), 0 0 2.4em 0.8em rgba(196,251,7,.5);
  opacity: 0;
  pointer-events: none;
}
/* once the address is complete a glint runs along it */
.edge::after {
  content: '';
  position: absolute;
  inset: 8% 2%;
  border-radius: 0.3em;
  background: linear-gradient(100deg, transparent 0 40%, rgba(255,255,255,.75) 48%, transparent 56% 100%);
  background-size: 300% 100%;
  background-position: 120% 0;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}
/* (the glint now runs through the letters themselves, see startGlint) */
.edge::after { display: none; }
@keyframes blade-glint { 0% { background-position: 120% 0; } 40%, 100% { background-position: -20% 0; } }
.edge.is-lit .edge__text { animation: letters-pulse 2.6s ease-in-out infinite; }
@keyframes letters-pulse { 50% { filter: brightness(1.25) drop-shadow(0 0 4px rgba(196,251,7,.8)); } }
@keyframes groove-pulse {
  50% { box-shadow: inset 0 0 0 1px rgba(214,255,90,.9), inset 0 0.12em 0.25em rgba(0,0,0,.9), 0 0 0.7em rgba(196,251,7,.8), 0 0 2em rgba(196,251,7,.4); }
}
.edge:focus-visible { outline-offset: 2px; }

/* the light of the blade and its spill on his hoodie */
.blade-light, .body-light, .lid { display: none; }
.hero.has-frames .blade-light {
  display: block;
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  transform-origin: 0 50%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(232, 255, 150, .55), rgba(196, 251, 7, .22) 35%, rgba(196, 251, 7, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  visibility: hidden;
}
.hero.has-frames .body-light {
  display: block;
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(196, 251, 7, .32), rgba(196, 251, 7, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
  visibility: hidden;
}
/* eyelids for the blink: his skin colour with the closed line across */
.hero.has-frames .lid {
  display: block;
  position: absolute;
  z-index: 2;
  transform-origin: 50% 0;
  visibility: hidden;
}
.hero.has-frames .lid::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%; bottom: 0;
  height: 26%;
  background: #0a0f05;
  border-radius: 1px;
}

.ca-pill {
  display: inline-flex;
  position: absolute;
  left: 0; top: 0;
  align-items: center;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(2, 4, 10, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font: 500 .8125rem/1 var(--code);
  white-space: nowrap;
  cursor: copy;
  transform-origin: 50% 0;
  transition: border-color .2s;
}
.ca-pill:hover { border-color: var(--lime); }
.ca-pill__btn {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--lime-ink);
  font: 600 .875rem/1 var(--ui);
  transition: background-color .2s;
}
.ca-pill:hover .ca-pill__btn { background: var(--lime-hover); }
.ca-pill[data-state="copied"] .ca-pill__btn { background: var(--paper); }
.ca-pill[data-state="failed"] .ca-pill__btn { background: var(--warn); }

/* the sword, with the address on the flat of the blade */
.blade {
  --w: min(1080px, 94vw);
  position: absolute;
  left: 50%;
  top: 56%;
  width: var(--w);
  aspect-ratio: 1200 / 120;
  transform: translate(-50%, -50%) rotate(-4deg);
}
.blade__art { position: absolute; inset: 0; }
.blade__art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hero.has-frames .blade__art { display: none; }

.blade__ca {
  position: absolute;
  left: 21.5%;
  right: 8.5%;
  top: 33.5%;
  bottom: 33.5%;
  display: flex;
  align-items: center;
}
.blade__label {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.9em + var(--w) * 0.033);
  color: var(--fog);
  font: 500 clamp(.6875rem, calc(var(--w) * 0.011), .8125rem)/1 var(--code);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
}
.blade__copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lime-ink);
  cursor: copy;
}
.blade__addr {
  font: 500 calc(var(--w) * 0.0215)/1 var(--code);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.blade__btn {
  position: absolute;
  right: 0;
  top: calc(100% + var(--w) * 0.05);
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--lime-ink);
  font: 600 .9375rem/1 var(--ui);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 26px -4px rgba(196, 251, 7, .9);
  transition: background-color .2s, transform .12s;
}
.blade__btn::before {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5 15V6.5A2.5 2.5 0 0 1 7.5 4H15'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5 15V6.5A2.5 2.5 0 0 1 7.5 4H15'/%3E%3C/svg%3E") center / contain no-repeat;
}
.blade__copy:hover .blade__btn { background: var(--lime-hover); }
.blade__copy:active .blade__btn { transform: translateY(1px); }
.blade__copy[data-state="copied"] .blade__btn { background: var(--paper); }
.blade__copy[data-state="failed"] .blade__btn { background: var(--warn); }
.blade__copy:focus-visible { outline-offset: 6px; }

/* frames mode: the address sits on the blade of the last frame */
.hero.has-frames .blade { transform: translate(-50%, -50%); }

.hero__actions {
  grid-row: 3;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  width: min(100%, 1180px);
}
.cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 58px;
  padding: 0 30px;
  border-radius: 16px;
  font: 400 clamp(1rem, 1.6vw, 1.25rem)/1 var(--sign);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: transform .15s, box-shadow .2s, background-color .2s;
}
.cta svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.cta--buy {
  background: var(--lime);
  color: var(--lime-ink);
  box-shadow: 0 0 0 2px #000, 5px 5px 0 2px #000, 0 0 40px -6px rgba(196, 251, 7, .8);
}
.cta--buy:hover { background: var(--lime-hover); transform: translate(-2px, -2px); box-shadow: 0 0 0 2px #000, 7px 7px 0 2px #000, 0 0 50px -6px rgba(196, 251, 7, .9); }
.cta--x {
  border: 2px solid var(--lime);
  background: rgba(2, 4, 10, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--lime);
}
.cta--x:hover { background: rgba(196, 251, 7, .12); transform: translate(-2px, -2px); }
/* chrome sheen that sweeps across on hover */
.cta::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s;
  pointer-events: none;
}
.cta:hover::after { transform: translateX(120%); }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 14px;
  width: 22px; height: 36px;
  transform: translateX(-50%);
  border: 2px solid rgba(238,241,230,.4);
  border-radius: 12px;
  opacity: 0;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 6px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--lime);
  animation: scroll-dot 1.6s ease-in-out infinite;
}
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* sparks that fly off the blade tip while it is drawn */
.sparks { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 1px;
  background: #f4ffc2;
  box-shadow: 0 0 6px 1px var(--lime);
}

/* Rewards and calculator sit on the same night as the hero */
.rewards { background: linear-gradient(180deg, #02040a 0%, #071022 55%, #050816 100%); }
.calcsec { background: linear-gradient(180deg, #050816 0%, #0a0620 40%, #120c2c 70%, #02040a 100%); }
.rewards__card-border { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rewards__total { position: relative; }
.reveal-line { overflow: hidden; }

/* ================================================================ phones */
@media (max-width: 1180px) { .cd__name { display: none; } .nav__links .nav__icon { display: none; } }
@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav__burger {
    display: grid; place-content: center; gap: 6px;
    width: 46px; height: 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(2,4,10,.55);
    cursor: pointer;
  }
  .nav__burger span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--lime); transition: transform .25s; }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .cd { height: 46px; margin: 0 8px 0 0; }
  .cd__disc { width: 38px; height: 38px; }
  .cd__name { display: none; }
  .cd__title { gap: 6px; padding: 0 6px; }
  .cd__next { width: 34px; }
  .cd__menu { right: -54px; min-width: min(280px, calc(100vw - 32px)); }
  .snd { margin: 0 8px 0 0; }
}
/* small phones: keep the CD and the mute button, drop the track picker */
@media (max-width: 420px) {
  .cd__title, .cd__next { display: none; }
  .cd { padding: 3px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 84px; }
  /* the video frame is wide: let it run past both edges, Hoodie in the middle,
     the blade tip just inside the right edge */
  .hero.has-frames .hero__frames { bottom: 96px; height: auto; width: 134vw; max-width: none; left: -28vw; right: auto; margin: 0; }
  .hero__figure { height: min(56svh, 520px); }
  .hero__frames { height: min(58svh, 540px); }
  .blade { top: 54%; }
  .blade__btn { right: 50%; transform: translateX(50%); top: calc(100% + 20px); }
  .blade__copy:active .blade__btn { transform: translate(50%, 1px); }
  .blade__label { left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cta { min-height: 54px; padding: 0 12px; font-size: .9375rem; }
  .hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll span, .cta::after { animation: none; transition: none; }
}


/* ================================================================ rooftop */
.roof { display: none; }
.hero.has-frames .roof {
  display: block;
  position: absolute;
  z-index: 0;
  left: 0; top: 0;
  pointer-events: none;
  visibility: hidden;
}
.roof__canvas { display: block; width: 100%; height: 100%; }
.roof__beacon {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #ff3b5c;
  box-shadow: 0 0 8px 2px rgba(255, 59, 92, .9), 0 0 22px 6px rgba(255, 59, 92, .35);
  animation: beacon 2.4s steps(1) infinite;
}
@keyframes beacon { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .12; } }

.hero.has-frames .hero__scroll { display: none; }   /* the rooftop sign sits there */


/* ================================================================
   Carried over from the previous site so Rewards, Calculator and the footer
   keep their typography exactly. */
/* ------------------------------------------------------------ footer */

/* A lime slab under the pixel meadow, in the ticker's sticker language:
   black type, a thick black line on top, a black X badge with a lime offset. */
.footer {
  position: relative;
  z-index: 2;
  border-top: 3px solid #000;
  background: var(--lime);
  color: #000;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: clamp(36px, 4vw, 56px) var(--gutter) 18px;
  text-align: center;
}

.footer__title {
  margin: 0;
  font: 400 clamp(1.5rem, 3vw, 2.5rem) / 1 var(--sign);
  text-transform: uppercase;
}


.footer__x {
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1;
  border: 3px solid #000;
  border-radius: 16px;
  background: #000;
  color: var(--lime);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}

.footer__x svg { width: 46%; height: 46%; fill: currentColor; }
.footer__socials { display: flex; justify-content: center; gap: 14px; }

.footer__x:hover { transform: translate(-3px, -3px) rotate(-4deg); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35); }
.footer__x:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
.footer__x:focus-visible { outline-color: #000; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 14px;
  padding: 20px 0 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
}

.footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #101508;
  text-decoration: none;
  white-space: nowrap;
}
.footer .brand__name {
  font: 400 1.25rem/1 var(--sign);
  letter-spacing: -.02em;
}
.footer .brand__mark {
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  object-fit: cover;
  filter: none;
  background: transparent;
}
.footer .brand:focus-visible { outline: 2px solid #101508; outline-offset: 5px; border-radius: 5px; }
.footer__legal { max-width: 720px; margin: 4px auto 0; color: rgba(16, 21, 8, .7); font: 500 .75rem/1.5 var(--ui); text-align: center; }
.footer__copy {
  margin: 0;
  color: rgba(16, 21, 8, .76);
  font: 500 .8125rem/1.5 var(--ui);
  letter-spacing: .025em;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .footer__bar { flex-direction: column; justify-content: center; gap: 10px; }
}

/* ------------------------------------------------------------ rewards */

/* Storm section: a canvas sky with clouds, rain and lightning behind the
   numbers, HOODIE raising his hands on the right. The live figures come from
   the Pons launchpad API (see setupRewards in main.js). */
.rewards {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  padding: clamp(80px, 8vw, 150px) var(--gutter) clamp(72px, 7vw, 130px);
  background: linear-gradient(180deg, #05070f 0%, #0a0f1d 45%, #05070d 100%);
  /* No border here on purpose: the tickers above and below already end in a
     3px black edge. A border of our own would sit right against theirs and the
     6px of pure black under the bright lime tape read as a black bar. */
}

.rewards__storm {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.rewards__inner {
  --F: min(100cqw, max(660px, 100svh) * 1.78);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: calc(var(--F) * 0.035);
  width: min(100%, calc(var(--F) * 0.9));
  margin-inline: auto;
}

.rewards__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 0.6em;
  font-size: max(0.8125rem, calc(var(--F) * 0.0082));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}

/* pulsing dot: the section is live */
.rewards__live {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(196, 251, 7, 0.7);
  animation: reward-pulse 2s ease-out infinite;
}

@keyframes reward-pulse {
  70% { box-shadow: 0 0 0 0.75em rgba(196, 251, 7, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 251, 7, 0); }
}

.rewards__title {
  margin: 0;
  font-family: var(--sign);
  font-weight: 400;
  font-size: max(2.5rem, calc(var(--F) * 0.05));
  line-height: 0.95;
  color: var(--paper);
  text-shadow: 0 0 0.35em rgba(196, 251, 7, 0.25);
}

.rewards__lede {
  max-width: 42ch;
  margin: 0.8em 0 1.4em;
  font-size: max(1rem, calc(var(--F) * 0.011));
  line-height: 1.6;
  color: rgba(238, 241, 230, 0.82);
}

/* the headline number */
.rewards__total {
  display: grid;
  gap: 0.15em;
  padding: max(20px, calc(var(--F) * 0.018)) max(24px, calc(var(--F) * 0.022));
  border: 3px solid #000;
  border-radius: 22px;
  background: rgba(2, 6, 4, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: max(7px, calc(var(--F) * 0.005)) max(7px, calc(var(--F) * 0.005)) 0 var(--lime);
}

.rewards__total-label {
  font-size: max(0.8125rem, calc(var(--F) * 0.0082));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog);
}

.rewards__total-value {
  font-family: var(--sign);
  font-weight: 400;
  font-size: max(2.25rem, calc(var(--F) * 0.046));
  line-height: 1.05;
  color: var(--lime);
  text-shadow: 0 0 0.25em rgba(196, 251, 7, 0.45);
  font-variant-numeric: tabular-nums;
}

.rewards__total-usd {
  font-size: max(0.9375rem, calc(var(--F) * 0.0098));
  color: rgba(238, 241, 230, 0.7);
  font-variant-numeric: tabular-nums;
}

.rewards__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6em;
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
}

.rewards__stats li {
  display: grid;
  gap: 0.2em;
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(2, 6, 4, 0.55);
}

.rewards__stats span {
  font-size: max(1.125rem, calc(var(--F) * 0.0135));
  font-weight: 600;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rewards__stats small {
  font-size: max(0.75rem, calc(var(--F) * 0.0072));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fog);
}

.rewards__feed { margin-top: 1.3em; }

.rewards__feed-title {
  margin: 0 0 0.5em;
  font-size: max(0.8125rem, calc(var(--F) * 0.0082));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog);
}

.rewards__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(2, 6, 4, 0.55);
}

.rewards__list li {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.6em 0.9em;
  font-size: max(0.875rem, calc(var(--F) * 0.0092));
  border-bottom: 1px solid rgba(196, 251, 7, 0.12);
}

.rewards__list li:last-child { border-bottom: 0; }

.rewards__list b {
  color: var(--lime);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rewards__list-usd { color: rgba(238, 241, 230, 0.55); font-variant-numeric: tabular-nums; }

/* the timestamp hugs the right edge whatever the amount is */
.rewards__list time { margin-left: auto; white-space: nowrap; }

.rewards__list time, .rewards__empty { color: var(--fog); }

/* a payout that arrived while the page is open flashes once */
.rewards__list li.is-new { animation: reward-flash 1.6s ease-out; }

@keyframes reward-flash {
  0% { background: rgba(196, 251, 7, 0.35); }
  100% { background: transparent; }
}

.rewards__note {
  margin: 1.1em 0 0;
  font-size: max(0.75rem, calc(var(--F) * 0.0072));
  color: rgba(238, 241, 230, 0.5);
}

.rewards__note[data-state="error"] { color: var(--warn); }

.rewards__art {
  position: relative;
  justify-self: center;
  width: 86%;
  margin: 0;
}

.rewards__art img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(196, 251, 7, 0.35)) drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
  animation: reward-float 6s ease-in-out infinite;
}

/* light from above: the glow behind his hands pulses with the storm */
.rewards__art::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 6%;
  width: 78%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 251, 7, 0.32), rgba(196, 251, 7, 0));
  animation: reward-halo 4s ease-in-out infinite;
}

@keyframes reward-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5%); }
}

@keyframes reward-halo {
  0%, 100% { opacity: 0.55; scale: 0.95; }
  50% { opacity: 1; scale: 1.05; }
}

.topbar__link {
  padding: 0 14px;
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.topbar__link:hover { color: var(--lime); }

/* --------------------------------------------------- calculator section */

/* Own section between the rewards and About me, with a neon forest painted
   behind it (CyberForest in main.js). */
.calcsec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  padding: clamp(76px, 7vw, 132px) var(--gutter) clamp(76px, 7vw, 132px);
  background: linear-gradient(180deg, #0a0620 0%, #141a3a 45%, #040a10 100%);
}

.calcsec__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.calcsec__inner {
  --F: min(100cqw, max(660px, 100svh) * 1.78);
  /* never narrower than the screen allows: on a phone a fraction of F would
     leave the card squeezed into the middle third */
  width: min(100%, max(520px, calc(var(--F) * 0.92)));
  margin-inline: auto;
  text-align: center;
}

/* calculator on the left, the cyber figure on the right */
.calcsec__row {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: calc(var(--F) * 0.03);
  margin-top: 0.4em;
}

.calcsec__art {
  position: relative;
  isolation: isolate;        /* keeps the pad behind him and nothing else */
  order: -1;                 /* he stands left of the numbers on a wide screen */
  justify-self: center;
  width: 92%;
  margin: 0;
}

/* the pad sits at his feet, he stands in front of its far rim */
.calcsec__pad {
  animation: cyber-pad 5s ease-in-out infinite;
  position: absolute;
  z-index: 0;
  left: 50%;
  /* pulled down by half its own height, so the ellipse is centred on the sole
     line whatever size the figure is drawn at */
  /* His soles sit at 0.8% and 4.2% above the bottom edge of the artwork, so
     the ellipse is centred between them: the back boot lands on the far rim,
     the front boot on the near one. */
  bottom: 3%;
  width: 118%;
  height: auto;
  translate: -50% 50%;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(196, 251, 7, 0.45));
}

/* He breathes instead of floating: scaled from the soles, so his feet stay
   planted on the pad. The eye sheets sit inside and scale with him. */
.calcsec__body {
  position: relative;
  z-index: 1;
  transform-origin: 50% 100%;
  animation: cyber-breathe 4.6s ease-in-out infinite;
}

@keyframes cyber-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(0.994, 1.009); }
}

.calcsec__figure {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 30px rgba(196, 251, 7, 0.3)) drop-shadow(0 0 60px rgba(226, 64, 180, 0.25));
}


/* the pad breathes instead of him moving */
@keyframes cyber-pad {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

.calcsec__eyebrow {
  margin: 0 0 0.6em;
  font-size: max(0.8125rem, calc(var(--F) * 0.0082));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}

.calcsec__title {
  margin: 0;
  font-family: var(--sign);
  font-weight: 400;
  font-size: max(2.25rem, calc(var(--F) * 0.046));
  line-height: 0.98;
  color: var(--paper);
  text-shadow: 0 0 0.35em rgba(196, 251, 7, 0.25);
}

.calcsec__lede {
  max-width: 52ch;
  margin: 0.8em auto 1.6em;
  font-size: max(1rem, calc(var(--F) * 0.011));
  line-height: 1.6;
  color: rgba(238, 241, 230, 0.82);
}

/* the card no longer carries the heading, so it starts at the controls */
.calcsec .calc {
  width: 100%;
  margin-top: 0;
  text-align: left;
}

/* ------------------------------------------------------ reward calculator */

/* Sits under the two columns of the rewards section: you set your share of the
   supply and the table works out your cut of the holder tax per volume step. */
.calc {
  --F: min(100cqw, max(660px, 100svh) * 1.78);
  width: min(100%, calc(var(--F) * 0.62));
  margin: calc(var(--F) * 0.042) auto 0;
  padding: max(24px, calc(var(--F) * 0.022)) max(22px, calc(var(--F) * 0.024));
  border: 3px solid #000;
  border-radius: 24px;
  background: rgba(2, 6, 4, 0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: max(7px, calc(var(--F) * 0.005)) max(7px, calc(var(--F) * 0.005)) 0 var(--lime);
}

.calc__title {
  margin: 0;
  font-family: var(--sign);
  font-weight: 400;
  font-size: max(1.375rem, calc(var(--F) * 0.022));
  line-height: 1.05;
  color: var(--lime);
}

.calc__lede {
  max-width: 54ch;
  margin: 0.55em 0 1.2em;
  font-size: max(0.9375rem, calc(var(--F) * 0.0098));
  line-height: 1.55;
  color: rgba(238, 241, 230, 0.78);
}

.calc__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.8em 1.1em;
  margin-bottom: 1.2em;
}

.calc__field {
  display: grid;
  gap: 0.35em;
}

.calc__label {
  font-size: max(0.75rem, calc(var(--F) * 0.0072));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fog);
}

.calc__input {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5em 0.85em;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(2, 4, 10, 0.7);
  transition: border-color 0.2s;
}

.calc__input:focus-within { border-color: var(--lime); }

.calc__input input {
  width: 6.5em;
  border: 0;
  background: none;
  color: var(--paper);
  font: 600 max(1rem, calc(var(--F) * 0.0115)) / 1.2 var(--ui);
  font-variant-numeric: tabular-nums;
}

.calc__input input:focus { outline: none; }

/* the number spinners fight the layout and nobody uses them here */
.calc__input input::-webkit-outer-spin-button,
.calc__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.calc__input i {
  font-style: normal;
  font-weight: 600;
  color: var(--lime);
}

.calc__tokens { width: 9em; }

.calc__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.calc__presets button {
  padding: 0.5em 0.85em;
  border: 2px solid #000;
  border-radius: 999px;
  background: rgba(196, 251, 7, 0.14);
  color: var(--lime);
  font: 600 max(0.8125rem, calc(var(--F) * 0.0085)) / 1 var(--ui);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.calc__presets button:hover { background: rgba(196, 251, 7, 0.28); }

.calc__presets button[aria-pressed="true"] {
  background: var(--lime);
  color: var(--lime-ink);
}

/* a phone gets a horizontal scroll rather than three squashed columns */
.calc__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(2, 6, 4, 0.55);
}

.calc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: max(0.875rem, calc(var(--F) * 0.0092));
}

.calc__table th,
.calc__table td {
  padding: 0.6em 0.9em;
  text-align: right;
  white-space: nowrap;
}

.calc__table th:first-child,
.calc__table td:first-child { text-align: left; }

.calc__table thead th {
  font-size: max(0.6875rem, calc(var(--F) * 0.0068));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fog);
  border-bottom: 1px solid rgba(196, 251, 7, 0.22);
}

.calc__table tbody tr + tr td { border-top: 1px solid rgba(196, 251, 7, 0.1); }

.calc__table td { color: rgba(238, 241, 230, 0.8); font-variant-numeric: tabular-nums; }

.calc__table td:last-child {
  color: var(--lime);
  font-weight: 700;
}

.calc__table small { display: block; color: var(--fog); font-weight: 400; }

.calc__real {
  margin: 1em 0 0;
  padding: 0.7em 0.9em;
  border-radius: 12px;
  background: rgba(196, 251, 7, 0.09);
  font-size: max(0.875rem, calc(var(--F) * 0.0092));
  color: rgba(238, 241, 230, 0.88);
}

.calc__real b { color: var(--lime); }

.calc__real:empty { display: none; }

.calc__note {
  margin: 0.9em 0 0;
  font-size: max(0.75rem, calc(var(--F) * 0.0072));
  line-height: 1.5;
  color: rgba(238, 241, 230, 0.5);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 999px) {
  .hero {
    align-items: flex-start;
    min-height: max(800px, 100svh);
  }

  .hero::before {
    background: radial-gradient(95% 50% at 50% 24%,
      rgba(2, 4, 10, 0.82) 0%,
      rgba(2, 4, 10, 0) 78%);
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-left: 0;
    padding: 96px var(--gutter) 0;
    text-align: center;
  }

  .sign { font-size: clamp(2.5rem, 13vw, 4.5rem); }

  .ca { justify-items: center; }
  .hero__actions { justify-content: center; }

  /* stacked: card on top, left-aligned inside (centred paragraphs read badly), float below */
  .about__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 56px;
  }

  .about__copy {
    justify-self: stretch;
    width: min(100%, 560px);
    margin-inline: auto;
    padding: 26px 22px 24px;
    border-radius: 22px;
    box-shadow: 7px 7px 0 var(--lime), 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  }

  .about__art { width: min(88%, 540px); }

  .rewards__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 40px;
  }

  .rewards__lede { margin-inline: auto; }
  .rewards__eyebrow { justify-content: center; }
  .rewards__total { justify-items: center; width: 100%; }
  .rewards__art { width: min(72%, 420px); }

  /* three columns stay three columns on a phone, so the labels lose the padding */
  .rewards__stats li { padding: 0.7em 0.45em; }
  .rewards__stats small { letter-spacing: 0.03em; }

  .calc { width: 100%; text-align: left; }

  .calcsec__row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .calcsec__art { width: min(62%, 320px); order: 0; }
  .calcsec__pad { width: 112%; }
  .calc__controls { gap: 0.8em; }
  .calc__field { flex: 1 1 8em; }
  .calc__input input { width: 100%; }
  .calc__presets { flex: 1 1 100%; }

}

@media (max-width: 759px) {
  .topbar__buy { display: none; }

  /* The section links do not fit next to the brand on a phone: with them in,
     the bar was 33px wider than the viewport, which made the whole page scroll
     sideways and showed a black strip on the left. They move into the burger. */
  .topbar__link { display: none; }
  .burger { display: block; }
}

/* the burger is for phones, so the menu never shows on a wide screen */
@media (min-width: 760px) {
  .menu { display: none; }
}

@media (max-width: 480px) {
  .ca__full { display: none; }
  .ca__short { display: inline; }
  /* when copying is blocked the full address has to be there to select */
  .ca__button[data-state="failed"] .ca__full { display: inline; }
  .ca__button[data-state="failed"] .ca__short { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sign__text { animation: none; }
  .btn, .ca__button, .ca__action, .icon-link, .footer__x { transition: none; }
  .ticker__track, .ticker__emoji, .about__float, .about::before, .about::after { animation: none; }
  .about__ripple { display: none; }
  .rewards__live, .rewards__art img, .rewards__art::before, .rewards__list li.is-new { animation: none; }
  .menu { animation: none; }
  .calcsec__pad, .calcsec__body { animation: none; }
}

/* On a phone the three columns do not fit, and horizontal scrolling would hide
   the one number people came for. The middle column is the least interesting,
   so it goes and the table fits without scrolling. */
@media (max-width: 560px) {
  .calc__table th:nth-child(2),
  .calc__table td:nth-child(2) { display: none; }

  .calc__scroll { overflow-x: visible; }

  .calc__table th,
  .calc__table td { padding: 0.6em 0.7em; }
}


/* ================================================================ rewards: the altar
   Hoodie in his robe pulls a window open between his hands, the numbers sit
   inside it. Everything is placed in % of the frame (645 x 596 px), so it
   scales with the picture. Loaded last, so it wins over legacy.css. */

/* one night from top to bottom: each section starts on the colour the one
   above ends on, so there is never a seam */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(40px, 8svh, 96px);
  background: linear-gradient(180deg, rgba(4, 6, 13, 0), #04060d);
  pointer-events: none;
}
.rewards { background: linear-gradient(180deg, #04060d 0%, #0a1024 50%, #070a19 100%); }
.calcsec { background: linear-gradient(180deg, #070a19 0%, #0d0a26 40%, #110d2c 70%, #05050d 100%); }

.rewards { padding-top: clamp(72px, 7vw, 120px); }
.rewards__head, .rewards__below { --F: min(100cqw, max(660px, 100svh) * 1.78); }
.rewards__head {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.rewards__head .rewards__eyebrow { justify-content: center; }
.rewards__head .rewards__lede { margin: 0.8em auto 0; text-shadow: 0 2px 12px rgba(4, 6, 13, .9); }
.rewards__head { position: relative; z-index: 2; }

.altar {
  --w: min(860px, 100vw, calc(84svh * 645 / 596));
  position: relative;
  left: 50%;
  translate: -50% 0;
  width: var(--w);
  aspect-ratio: 645 / 596;
  margin-top: clamp(56px, 7vw, 110px);
}
.altar__rig { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.altar__frames { position: absolute; inset: 0; width: 100%; height: 100%; }
.altar__halo {
  position: absolute;
  left: 10%; right: 10%; top: 8%; bottom: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 251, 7, .2), rgba(196, 251, 7, .06) 60%, rgba(196, 251, 7, 0));
  pointer-events: none;
}
.altar__hands {
  display: none;   /* his hands stay behind the scroll */
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4;
  pointer-events: none; visibility: hidden;
  /* the hands sit ON the glass: a contact shadow on it, its green light on them */
  filter: drop-shadow(0 7px 5px rgba(0, 0, 0, .6)) drop-shadow(0 2px 1px rgba(0, 0, 0, .5)) drop-shadow(0 0 9px rgba(196, 251, 7, .45));
}
/* where his palms grip the edge the light pools */
.altar__grip {
  position: absolute;
  z-index: 3;
  top: calc(180 / 596 * 100%);
  width: 13%;
  aspect-ratio: 1.6;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246, 255, 214, .85), rgba(196, 251, 7, .45) 40%, rgba(196, 251, 7, 0));
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}
.altar__grip--l { left: calc(64.5 / 645 * 100%); }
.altar__grip--r { left: calc(582.5 / 645 * 100%); }

/* blink */
.altar__lid { position: absolute; z-index: 2; transform-origin: 50% 0; visibility: hidden; }
.altar__lid::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%; bottom: 0;
  height: 26%;
  background: #0a0f05;
}

/* the light between his hands: a point that charges, then a bar he pulls wide */
.altar__orb {
  position: absolute;
  z-index: 3;
  width: 9%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, rgba(240, 255, 190, .9) 22%, rgba(196, 251, 7, .45) 45%, rgba(196, 251, 7, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  visibility: hidden;
}
.altar__beam {
  position: absolute;
  z-index: 3;
  height: 1.1%;
  translate: 0 -50%;
  transform-origin: 0 50%;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(196, 251, 7, 0), #f6ffd6 35%, #fff 50%, #f6ffd6 65%, rgba(196, 251, 7, 0));
  box-shadow: 0 0 12px 3px rgba(196, 251, 7, .8), 0 0 40px 10px rgba(196, 251, 7, .35);
  pointer-events: none;
  visibility: hidden;
}

/* the scroll: placed in % of the frame, sized in cqw of the altar so the
   writing never reflows while it opens */
.altar { container-type: inline-size; }
.portal {
  position: absolute;
  z-index: 3;
  left: calc(64.5 / 645 * 100%);
  width: calc(518 / 645 * 100%);
  top: calc(160 / 596 * 100%);
  height: calc(340 / 596 * 100%);
}
.portal__clip { position: absolute; inset: 0; overflow: hidden; }
.portal__paper {
  position: absolute;
  inset: 0;
  background:
    /* the paper curls into the rods */
    linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, .7)),
    /* fine lines, like a page */
    repeating-linear-gradient(180deg, rgba(232, 222, 190, .035) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 30%, rgba(196, 251, 7, .1), rgba(196, 251, 7, 0) 60%),
    linear-gradient(180deg, rgba(10, 20, 8, .9), rgba(4, 9, 4, .94));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* an ornament band top and bottom in the beige of his robe */
  border-top: max(2px, .45cqw) double rgba(226, 212, 170, .85);
  border-bottom: max(2px, .45cqw) double rgba(226, 212, 170, .85);
  box-shadow: inset 0 max(4px, 1.1cqw) 0 -1px rgba(196, 251, 7, .18), inset 0 calc(-1 * max(4px, 1.1cqw)) 0 -1px rgba(196, 251, 7, .18), 0 0 30px rgba(196, 251, 7, .35);
}
/* the rods he holds: ivory with beige bands, glowing lime finials */
.portal__rod {
  position: absolute;
  z-index: 2;
  top: -7%;
  bottom: -7%;
  width: max(8px, 2.2cqw);
  translate: -50% 0;
  border-radius: 99px;
  background:
    repeating-linear-gradient(180deg, transparent 0 14%, rgba(176, 150, 98, .55) 14% 16%, transparent 16% 30%),
    linear-gradient(90deg, #6f6650, #d9d0b6 30%, #fffaf0 48%, #e6dcc2 62%, #8d8366);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 4px 10px rgba(0, 0, 0, .5), 0 0 14px rgba(196, 251, 7, .35);
}
.portal__rod--l { left: 0; }
.portal__rod--r { left: 100%; }
.portal__rod::before, .portal__rod::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 190%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff, #e8ffa0 30%, #c4fb07 60%, #6d8f00);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 12px 3px rgba(196, 251, 7, .8);
}
.portal__rod::before { top: -1.2cqw; }
.portal__rod::after { bottom: -1.2cqw; }
.portal__body {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: calc(518 / 645 * 100cqw);
  translate: -50% 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3.2cqw;
  padding: 4cqw 5.5cqw;
  text-align: center;
}
.portal .rewards__total {
  justify-items: center;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.portal .rewards__total-label { font-size: max(10px, 1.95cqw); letter-spacing: .16em; color: rgba(232, 222, 190, .85); }
.portal .rewards__total-value { font-size: 9.3cqw; line-height: 1; margin: .12em 0 .08em; }
.portal .rewards__total-usd { font-size: max(11px, 2.35cqw); }
.portal .rewards__stats { width: 100%; gap: 1.6cqw; margin: 0; }
.portal .rewards__stats li {
  gap: .5cqw;
  padding: 1.8cqw 1.1cqw;
  border-radius: 1.45cqw;
  border-color: rgba(226, 212, 170, .3);
  background: rgba(196, 251, 7, .05);
}
.portal .rewards__stats span { font-size: max(13px, 3.55cqw); }
.portal .rewards__stats small { font-size: max(8.5px, 1.45cqw); letter-spacing: .08em; }

.rewards__below { max-width: 760px; margin: clamp(64px, 8vw, 120px) auto 0; }

/* no frames (or no JS): the window simply stands there */
.altar:not(.has-frames) { aspect-ratio: auto; left: auto; translate: none; width: min(100%, 640px); margin-inline: auto; }
.altar:not(.has-frames) .altar__rig, .altar:not(.has-frames) .altar__halo { display: none; }
.altar:not(.has-frames) .portal { position: relative; left: auto; top: auto; width: 100%; height: auto; }
.altar:not(.has-frames) .portal__clip { position: relative; }
.altar:not(.has-frames) .portal__body { position: relative; left: auto; translate: none; width: auto; padding: 32px 24px; gap: 20px; }
.altar:not(.has-frames) .portal__rod { display: none; }

/* ---------------------------------------------------------------- the blessing
   god rays from above, a halo with a slow sunburst behind his head, a burst
   of light and a shockwave when the window opens, motes rising around him */
.altar__rays {
  position: absolute;
  left: -30%; right: -30%;
  top: -22%; bottom: 18%;
  z-index: 0;
  background:
    conic-gradient(from 180deg at 50% 0%,
      transparent 0 160deg,
      rgba(236, 255, 190, .0) 160deg, rgba(236, 255, 190, .22) 163deg, transparent 166deg,
      transparent 168deg, rgba(220, 255, 140, .16) 171deg, transparent 175deg,
      rgba(255, 255, 230, .26) 178deg, transparent 182deg,
      rgba(220, 255, 140, .16) 185deg, transparent 189deg,
      transparent 191deg, rgba(236, 255, 190, .22) 194deg, transparent 197deg,
      transparent 200deg 360deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 62%, transparent 100%);
  filter: blur(6px);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  pointer-events: none;
  opacity: 0;
}
/* the nimbus sits behind the hood: centre of his head in frame pixels (326, 78) */
.altar__nimbus {
  position: absolute;
  z-index: 0;
  left: calc(315 / 645 * 100%);
  top: calc(95 / 596 * 100%);
  width: calc(236 / 645 * 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
}
.altar__sun {
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(240, 255, 200, .28) 0 4deg, transparent 4deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 25%, transparent 100%);
  mix-blend-mode: screen;
}
.altar__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(246, 255, 214, .95);
  background: radial-gradient(closest-side, rgba(255, 255, 235, .55), rgba(196, 251, 7, .25) 55%, rgba(196, 251, 7, 0) 72%);
  box-shadow: 0 0 18px 4px rgba(196, 251, 7, .7), 0 0 60px 18px rgba(196, 251, 7, .3), inset 0 0 20px rgba(255, 255, 230, .6);
}
.altar__burst, .altar__wave {
  position: absolute;
  z-index: 5;
  left: calc(323 / 645 * 100%);
  top: calc(180 / 596 * 100%);
  width: 40%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  visibility: hidden;
}
.altar__burst { background: radial-gradient(closest-side, #fff, rgba(240, 255, 190, .8) 25%, rgba(196, 251, 7, .3) 55%, rgba(196, 251, 7, 0)); mix-blend-mode: screen; }
.altar__wave { border: 2px solid rgba(240, 255, 200, .9); box-shadow: 0 0 20px rgba(196, 251, 7, .8), inset 0 0 20px rgba(196, 251, 7, .5); }
.altar__motes {
  position: absolute;
  left: -15%; right: -15%; top: -20%; bottom: 0;
  z-index: 6;
  width: 130%; height: 120%;
  pointer-events: none;
}

/* ---------------------------------------------------------------- he floats
   the ground under his feet (frame y 592): shadow, a magic circle seen from
   the side, a pool of light. He rises off it when the scroll opens. */
.altar__ground {
  position: absolute;
  z-index: 0;
  left: calc(322 / 645 * 100%);
  top: calc(590 / 596 * 100%);
  width: 56%;
  aspect-ratio: 3.2;
  translate: -50% -50%;
  pointer-events: none;
  perspective: 600px;
}
.altar__shadow {
  position: absolute;
  inset: 22% 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0));
}
.altar__pool {
  position: absolute;
  inset: -40% -10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 251, 7, .28), rgba(196, 251, 7, .08) 50%, rgba(196, 251, 7, 0));
  mix-blend-mode: screen;
  opacity: 0;
}
/* a circle on the floor: the outer box lies it flat, the disc inside turns */
.altar__circle {
  position: absolute;
  left: 0; top: 50%;
  width: 100%;
  aspect-ratio: 1;
  margin-top: -50%;
  transform: scaleY(.27);   /* lying flat, seen from the side */
  opacity: 0;
}
.altar__disc { position: absolute; inset: 0; border-radius: 50%; }
.altar__disc::before, .altar__disc::after, .altar__disc i {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.altar__disc::before {
  inset: 0;
  border: 3px solid rgba(214, 255, 90, .9);
  box-shadow: 0 0 18px rgba(196, 251, 7, .9), inset 0 0 18px rgba(196, 251, 7, .6);
}
.altar__disc::after {
  inset: 9%;
  border: 2px dashed rgba(240, 255, 200, .75);
}
.altar__disc i {
  inset: 20%;
  background: repeating-conic-gradient(rgba(214, 255, 90, .55) 0 2deg, transparent 2deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 55%, #000 58%, #000 100%);
  mask-image: radial-gradient(closest-side, transparent 55%, #000 58%, #000 100%);
  border: 1px solid rgba(240, 255, 200, .6);
}

/* ================================================================ calculator: the hacker
   Hoodie in techwear (Gemini video, mirrored so he points at the table). He
   fires a laser into the calculator, it boots up, coins fly when you play
   with the numbers. Behind it all: a rain of $ and ETH glyphs on a grid. */
.calcsec__rain { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.calcsec__grid {
  position: absolute;
  z-index: -1;
  left: -20%; right: -20%; bottom: 0;
  height: 46%;
  background:
    linear-gradient(rgba(196, 251, 7, .22) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(226, 64, 180, .2) 1px, transparent 1px) 0 0 / 64px 100%;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 45%, #000 80%, transparent);
  animation: grid-run 3.2s linear infinite;
  pointer-events: none;
}
@keyframes grid-run { to { background-position: 0 46px, 0 0; } }

.calcsec__body.has-frames .calcsec__figure { visibility: hidden; }
.calcsec__frames { display: none; }
.calcsec__body.has-frames { animation: none; }
.calcsec__body.has-frames .calcsec__frames {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150%;
  height: auto;
  aspect-ratio: 370 / 600;
  translate: -50% 0;
  filter: drop-shadow(0 0 26px rgba(196, 251, 7, .28)) drop-shadow(0 0 50px rgba(226, 64, 180, .22));
}
.calcsec__lid { position: absolute; z-index: 2; transform-origin: 50% 0; visibility: hidden; }
.calcsec__lid::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 0; height: 26%; background: #0a0f05; }

/* light motes rising off his pad */
.calcsec__motes { position: absolute; left: 10%; right: 10%; bottom: 2%; height: 60%; z-index: 2; pointer-events: none; }
.calcsec__motes i {
  position: absolute;
  bottom: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #eaffb0;
  box-shadow: 0 0 8px 2px rgba(196, 251, 7, .8);
  opacity: 0;
  animation: mote-rise 4.2s ease-in infinite;
}
.calcsec__motes i:nth-child(2n) { background: #ffd0f0; box-shadow: 0 0 8px 2px rgba(226, 64, 180, .8); }
.calcsec__motes i:nth-child(1) { left: 12%; animation-delay: 0s; }
.calcsec__motes i:nth-child(2) { left: 26%; animation-delay: 1.1s; animation-duration: 5s; }
.calcsec__motes i:nth-child(3) { left: 38%; animation-delay: 2.3s; }
.calcsec__motes i:nth-child(4) { left: 50%; animation-delay: .6s; animation-duration: 3.6s; }
.calcsec__motes i:nth-child(5) { left: 62%; animation-delay: 1.8s; }
.calcsec__motes i:nth-child(6) { left: 74%; animation-delay: 3s; animation-duration: 4.8s; }
.calcsec__motes i:nth-child(7) { left: 86%; animation-delay: 1.4s; }
.calcsec__motes i:nth-child(8) { left: 44%; animation-delay: 3.6s; animation-duration: 5.4s; }
@keyframes mote-rise { 0% { translate: 0 0; scale: .6; opacity: 0; } 15% { opacity: 1; } 100% { translate: 12px -340px; scale: 1; opacity: 0; } }

/* the calculator before he wakes it, and while it boots */
.calcsec .calc { position: relative; transition: filter .6s, opacity .6s; }
.calc.is-offline { filter: grayscale(.85) brightness(.5) blur(1px); }
.calc.is-offline .calc__table tbody { opacity: .2; }
.calc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0 35%, rgba(214, 255, 90, .35) 48%, rgba(255, 255, 255, .6) 50%, rgba(214, 255, 90, .35) 52%, transparent 65% 100%);
  background-size: 300% 100%;
  background-position: 130% 0;
  opacity: 0;
}
.calc.is-booting::after { opacity: 1; animation: calc-sweep 1s ease-out forwards; }
@keyframes calc-sweep { to { background-position: -30% 0; opacity: 0; } }
.calc.is-booting { animation: calc-flicker .5s steps(2) 2; }
@keyframes calc-flicker { 50% { filter: brightness(1.6) hue-rotate(-12deg); } }
.calc__table td.is-hit { animation: cell-hit .7s ease-out; }
@keyframes cell-hit { 0% { background: rgba(196, 251, 7, .45); box-shadow: inset 0 0 0 1px #c4fb07; } 100% { background: transparent; } }

/* the laser and the coins are drawn on one canvas over everything */
.cyber-fx { position: fixed; inset: 0; z-index: 55; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 899px) {
  /* on a phone he stands above the calculator and points down at it */
  .calcsec__art { order: -1; width: min(56%, 280px); margin-bottom: 8px; }
  .calcsec__body.has-frames .calcsec__frames { width: 140%; }
}

/* ---------------------------------------------------------------- his hover pad */
.cpad {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 3%;
  width: 124%;
  aspect-ratio: 1;
  translate: -50% 50%;
  pointer-events: none;
}
/* a cone of light up behind him */
.cpad__beam {
  position: absolute;
  left: 22%; right: 22%;
  bottom: 50%;
  height: 150%;
  background: linear-gradient(0deg, rgba(196, 251, 7, .28), rgba(196, 251, 7, .08) 45%, rgba(226, 64, 180, 0) 100%);
  clip-path: polygon(0 100%, 100% 100%, 82% 0, 18% 0);
  filter: blur(6px);
  mix-blend-mode: screen;
  animation: cpad-beam 3.2s ease-in-out infinite;
}
@keyframes cpad-beam { 50% { opacity: .55; } }
/* the disc lies flat: everything inside is drawn round and squashed */
.cpad__disc { position: absolute; inset: 0; transform: scaleY(.3); }
.cpad__disc > i { position: absolute; border-radius: 50%; }
/* the thickness of the disc: a darker copy a little lower, lit at the rim */
.cpad__edge {
  inset: 8%;
  translate: 0 9%;
  background: radial-gradient(closest-side, #05070c 80%, #0b1018 94%, rgba(196, 251, 7, .9) 97%, rgba(196, 251, 7, 0) 100%);
  filter: drop-shadow(0 0 14px rgba(196, 251, 7, .55));
}
.cpad__top {
  inset: 8%;
  background:
    radial-gradient(closest-side, rgba(196, 251, 7, .22), rgba(196, 251, 7, .04) 55%, transparent 70%),
    radial-gradient(closest-side, #0c1220 0 92%, #1b2433 96%, #c4fb07 98%, transparent 100%);
  box-shadow: 0 0 30px rgba(196, 251, 7, .45);
}
.cpad__hex {
  inset: 22%;
  background:
    repeating-linear-gradient(60deg, rgba(196, 251, 7, .22) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-60deg, rgba(196, 251, 7, .22) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, rgba(196, 251, 7, .14) 0 1px, transparent 1px 12px);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  opacity: .8;
}
.cpad__ring--a {
  inset: 10%;
  border: 3px solid transparent;
  background: conic-gradient(from 0deg, #c4fb07 0 18%, transparent 18% 25%, #c4fb07 25% 43%, transparent 43% 50%, #c4fb07 50% 68%, transparent 68% 75%, #c4fb07 75% 93%, transparent 93%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px #c4fb07);
  animation: cpad-spin 14s linear infinite;
}
.cpad__ring--b {
  inset: 19%;
  border: 2px dashed rgba(226, 64, 180, .85);
  filter: drop-shadow(0 0 5px rgba(226, 64, 180, .9));
  animation: cpad-spin 20s linear infinite reverse;
}
.cpad__ring--c {
  inset: 28%;
  background: repeating-conic-gradient(rgba(240, 255, 200, .8) 0 1.2deg, transparent 1.2deg 10deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 86%, #000 88%, #000 100%);
  mask-image: radial-gradient(closest-side, transparent 86%, #000 88%, #000 100%);
  animation: cpad-spin 9s linear infinite;
}
.cpad__core {
  inset: 36%;
  background: radial-gradient(closest-side, rgba(255, 255, 240, .9), rgba(214, 255, 90, .55) 35%, rgba(196, 251, 7, .12) 70%, transparent);
  mix-blend-mode: screen;
  animation: cpad-core 2.4s ease-in-out infinite;
}
@keyframes cpad-core { 50% { opacity: .55; scale: .9; } }
.cpad__wave {
  inset: 30%;
  border: 2px solid rgba(214, 255, 90, .9);
  box-shadow: 0 0 12px rgba(196, 251, 7, .8);
  opacity: 0;
  animation: cpad-wave 2.8s ease-out infinite;
}
.cpad__wave--2 { animation-delay: 1.4s; border-color: rgba(226, 64, 180, .85); box-shadow: 0 0 12px rgba(226, 64, 180, .7); }
@keyframes cpad-wave { 0% { scale: .6; opacity: 0; } 15% { opacity: 1; } 100% { scale: 1.55; opacity: 0; } }
@keyframes cpad-spin { to { rotate: 360deg; } }
/* two little emitters on the rim */
.cpad__node {
  position: absolute;
  top: 50%;
  width: 3.2%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #eaffb0;
  box-shadow: 0 0 10px 3px rgba(196, 251, 7, .9), 0 0 26px 8px rgba(196, 251, 7, .35);
  animation: cpad-core 1.6s ease-in-out infinite;
}
.cpad__node--l { left: 9%; }
.cpad__node--r { left: 91%; animation-delay: .8s; }
.calcsec__pad { display: none; }   /* the old SVG pad */

/* the glyph rain fills the whole section, quieter behind the middle */
.calcsec__rain {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 32%, rgba(0, 0, 0, .35) 68%, #000 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 32%, rgba(0, 0, 0, .35) 68%, #000 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 85%, transparent 100%);
  mask-composite: intersect;
}

/* the neon floor: a canvas grid in perspective (drawn in main.js) */
.calcsec__grid { display: none; }
.calcsec__floor {
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 52%;
  pointer-events: none;
  /* fades out at both ends so the grid melts into the next section */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
}

/* ---------------------------------------------------------------- the calculator, as a HUD */
.calcsec .calc {
  isolation: isolate;
  border: 0;
  border-radius: 22px;
  background:
    linear-gradient(rgba(196, 251, 7, .045) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(196, 251, 7, .035) 1px, transparent 1px) 0 0 / 22px 100%,
    radial-gradient(ellipse at 20% 0%, rgba(196, 251, 7, .12), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(226, 64, 180, .14), transparent 55%),
    rgba(5, 8, 16, .86);
  box-shadow: 0 0 0 1px rgba(196, 251, 7, .25), 0 0 44px -8px rgba(196, 251, 7, .35), 0 30px 70px -24px #000;
}
/* a light running around the edge, lime into pink */
@property --calc-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.calc__frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--calc-ang), rgba(196, 251, 7, .15), #c4fb07 12%, rgba(196, 251, 7, .15) 25%, rgba(226, 64, 180, .15) 50%, #e240b4 62%, rgba(226, 64, 180, .15) 75%, rgba(196, 251, 7, .15));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: calc-ang 6s linear infinite;
  pointer-events: none;
}
@keyframes calc-ang { to { --calc-ang: 360deg; } }
.calc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(196, 251, 7, .25);
  font: 500 .75rem/1 var(--code);
  letter-spacing: .12em;
  color: rgba(238, 241, 230, .7);
}
.calc__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); }
.calc__brand b { color: var(--pink, #e240b4); font-weight: 500; }
.calc__led { width: 8px; height: 8px; border-radius: 50%; background: #c4fb07; box-shadow: 0 0 8px #c4fb07; animation: calc-led 1.4s steps(2) infinite; }
@keyframes calc-led { 50% { opacity: .25; } }
.calc__status--on { color: #c4fb07; text-shadow: 0 0 8px rgba(196, 251, 7, .7); }
.calc__status--off { color: #ff5470; display: none; }
.calc.is-offline .calc__status--on { display: none; }
.calc.is-offline .calc__status--off { display: inline; }
.calc.is-offline .calc__led { background: #ff5470; box-shadow: 0 0 8px #ff5470; }

/* inputs and chips */
.calcsec .calc__input {
  border: 1px solid rgba(196, 251, 7, .3);
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 14px rgba(196, 251, 7, .06);
}
.calcsec .calc__input:focus-within { border-color: #c4fb07; box-shadow: 0 0 0 3px rgba(196, 251, 7, .15), inset 0 0 14px rgba(196, 251, 7, .12); }
.calcsec .calc__input input { caret-color: #c4fb07; font-family: var(--code); }
.calcsec .calc__presets button {
  border: 1px solid rgba(196, 251, 7, .35);
  background: rgba(196, 251, 7, .06);
  font-family: var(--code);
  transition: background-color .15s, color .15s, box-shadow .2s, transform .12s;
}
.calcsec .calc__presets button:hover { background: rgba(196, 251, 7, .18); transform: translateY(-1px); }
.calcsec .calc__presets button[aria-pressed="true"] { background: #c4fb07; color: #0b1000; box-shadow: 0 0 18px rgba(196, 251, 7, .6); }

/* the slider: drag your bag */
.calc__slider { display: grid; gap: 8px; margin: 2px 0 18px; }
.calc__range {
  --fill: 66.7%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 99px;
  background:
    linear-gradient(90deg, #8fdc00, #c4fb07 60%, #f1ffb8) 0 0 / var(--fill) 100% no-repeat,
    rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(196, 251, 7, .25), 0 0 16px rgba(196, 251, 7, .25);
  cursor: pointer;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #c4fb07;
  background: #0b1000 url("../assets/favicon.png") center / 70% no-repeat;
  box-shadow: 0 0 0 4px rgba(196, 251, 7, .18), 0 0 20px rgba(196, 251, 7, .9);
  transition: transform .15s;
}
.calc__range:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc__range::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid #c4fb07;
  background: #0b1000 url("../assets/favicon.png") center / 70% no-repeat;
  box-shadow: 0 0 20px rgba(196, 251, 7, .9);
}
.calc__ticks { display: flex; justify-content: space-between; font: 500 .6875rem/1 var(--code); color: rgba(238, 241, 230, .45); }

/* the big readout */
.calc__readout {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(196, 251, 7, .12), rgba(196, 251, 7, .02) 60%), rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px rgba(196, 251, 7, .28);
  overflow: hidden;
}
.calc__readout::after {   /* a slow sheen across it */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .08) 50%, transparent 60%) 0 0 / 250% 100%;
  animation: readout-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes readout-sheen { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.calc__readout-label { font: 500 .75rem/1.2 var(--code); letter-spacing: .1em; text-transform: uppercase; color: rgba(238, 241, 230, .65); }
.calc__readout-label b { color: var(--paper); font-weight: 600; }
.calc__readout-value {
  font-family: var(--sign);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4cqw, 3.6rem);
  line-height: 1;
  color: #c4fb07;
  text-shadow: 0 0 .3em rgba(196, 251, 7, .55);
  font-variant-numeric: tabular-nums;
}
.calc__readout-eth { font: 500 .875rem/1 var(--code); color: rgba(238, 241, 230, .75); }
.calc__readout-hint { position: absolute; right: 16px; top: 14px; font: 500 .6875rem/1 var(--code); color: rgba(238, 241, 230, .35); }

/* the table: each row carries a bar for what you'd earn, rows can be picked */
.calcsec .calc__scroll { border: 1px solid rgba(196, 251, 7, .2); background: rgba(0, 0, 0, .3); }
.calcsec .calc__table tbody tr {
  --bar: 0;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(196, 251, 7, .16), rgba(196, 251, 7, .05) calc(var(--bar) * 100%), transparent calc(var(--bar) * 100%));
  transition: background-color .2s;
}
.calcsec .calc__table tbody tr:hover { background-color: rgba(196, 251, 7, .06); }
.calcsec .calc__table tbody tr.is-picked { box-shadow: inset 3px 0 0 #c4fb07; background-color: rgba(196, 251, 7, .1); }
.calcsec .calc__table td:last-child { font-family: var(--code); font-size: 1.05em; text-shadow: 0 0 10px rgba(196, 251, 7, .45); }
.calcsec .calc__table td:first-child { font-family: var(--code); color: var(--paper); }

@media (max-width: 640px) {
  .calc__bar { font-size: .625rem; letter-spacing: .08em; }
  .calc__readout { padding: 14px; }
  .calc__readout-hint { position: static; margin-top: 4px; }
  .calc__readout-value { font-size: 2.1rem; }
}
.calcsec .calc__input input[data-calc-tokens] { width: 8.6em; }
.calcsec .calc__input input[data-calc-pct] { width: 5.2em; }
@media (max-width: 640px) {
  .calcsec .calc__controls { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; }
  .calcsec .calc__presets { grid-column: 1 / -1; }
  .calcsec .calc__input input[data-calc-tokens], .calcsec .calc__input input[data-calc-pct] { width: 100%; min-width: 0; }
  .calcsec .calc__input { width: 100%; box-sizing: border-box; }
}
/* the pad sits under his boots: in the (mirrored) frames his stance is left of
   the picture's middle, frame x 23..232 of 370, so the pad's centre goes to
   26.5% of the box (the canvas is 150% wide and centred) */
.calcsec__art.has-frames .cpad { left: 26.5%; width: 124%; }
.calcsec__art.has-frames .calcsec__motes { left: -12%; right: 35%; }

/* ================================================================ about me: by the fire */
.about2 {
  --F: min(100vw, max(660px, 100svh) * 1.78);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* extra room at the bottom so the NFT tape sits lower and About can breathe */
  padding: clamp(100px, 9vw, 160px) var(--gutter) clamp(150px, 14vw, 240px);
  background:
    radial-gradient(ellipse 70% 60% at 78% 62%, rgba(255, 120, 30, .16), transparent 70%),
    linear-gradient(180deg, #05050d 0%, #0e0708 18%, #1a0c07 55%, #120805 100%);
}
.about2__embers { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* firelight from the right, never quite still */
.about2__glow {
  position: absolute;
  z-index: -2;
  right: -20%; top: 10%;
  width: 90%; height: 100%;
  background: radial-gradient(closest-side, rgba(255, 140, 40, .30), rgba(255, 90, 20, .12) 45%, rgba(255, 90, 20, 0));
  mix-blend-mode: screen;
  animation: fire-flicker 2.6s steps(1) infinite;
  pointer-events: none;
}
@keyframes fire-flicker {
  0% { opacity: .85; } 9% { opacity: 1; } 17% { opacity: .78; } 26% { opacity: .95; } 38% { opacity: .82; }
  47% { opacity: 1; } 58% { opacity: .74; } 66% { opacity: .92; } 78% { opacity: .8; } 88% { opacity: 1; }
}
.about2__head { max-width: 1180px; margin: 0 auto clamp(8px, 1.5vw, 20px); }
.about2__eyebrow { margin: 0 0 .6em; font: 600 .8125rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #ffb36b; }
.about2__title {
  margin: 0;
  font-family: var(--sign);
  font-weight: 400;
  font-size: max(2.5rem, calc(var(--F) * 0.05));
  line-height: .95;
  color: var(--paper);
}
.about2__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
}
.about2__card {
  position: relative;
  padding: clamp(22px, 2.6vw, 36px);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(40, 20, 10, .72), rgba(14, 8, 6, .78));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 150, 70, .22), 0 0 50px -10px rgba(255, 120, 40, .35), 0 30px 60px -25px #000;
  color: rgba(245, 235, 220, .86);
  font-size: max(1rem, calc(var(--F) * 0.0108));
  line-height: 1.65;
}
.about2__card p { margin: 0 0 1em; }
.about2__lead {
  font-family: var(--sign);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.05;
  color: var(--lime);
  text-shadow: 0 0 .3em rgba(196, 251, 7, .45);
}
.about2__motto { color: #ffd2a3; font-weight: 600; }
.about2__slogan {
  margin: 1.1em 0 0 !important;
  font-family: var(--sign);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 0 .4em rgba(255, 140, 40, .55);
}
.about2__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2em 0 0; padding: 0; list-style: none; }
.about2__tags li {
  padding: .45em .9em;
  border-radius: 999px;
  border: 1px solid rgba(196, 251, 7, .45);
  background: rgba(196, 251, 7, .08);
  color: var(--lime);
  font: 600 .8125rem/1 var(--code);
}
.about2__art { position: relative; margin: 0; justify-self: center; width: min(100%, 500px, 62svh); aspect-ratio: 494 / 596; }
.about2__frames { position: relative; z-index: 2; display: block; width: 100%; height: 100%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .55)); }
/* light from the fire on the right, and a warm rug under the chair */
.about2__fire {
  position: absolute; z-index: 3;
  right: -25%; top: 5%;
  width: 70%; height: 90%;
  background: radial-gradient(closest-side, rgba(255, 150, 50, .32), rgba(255, 110, 30, .08) 55%, transparent);
  mix-blend-mode: screen;
  animation: fire-flicker 1.9s steps(1) infinite reverse;
  pointer-events: none;
}
.about2__rug {
  position: absolute; z-index: 1;
  left: -6%; right: -6%; bottom: -4%;
  height: 20%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, .65), rgba(0, 0, 0, .25) 60%, transparent 72%),
    radial-gradient(closest-side, rgba(150, 50, 25, .55), rgba(110, 35, 18, .35) 70%, transparent 76%);
  box-shadow: 0 0 60px rgba(255, 120, 40, .15);
}
@media (max-width: 899px) {
  .about2__inner { grid-template-columns: minmax(0, 1fr); }
  .about2__art { order: -1; width: min(92%, 440px); }
  .about2__head { text-align: center; }
}

/* ================================================================ tape between calculator and about */
.hband {
  --h: clamp(150px, 15vw, 220px);
  position: relative;
  z-index: 6;
  height: var(--h);
  margin: calc(var(--h) * -0.5) 0;
  overflow-x: clip;
  pointer-events: none;
}
.hband__glow {
  position: absolute; inset: 10% 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 120, 40, .28), transparent 70%);
  filter: blur(10px);
}
.hband__tape {
  position: absolute;
  left: -10%; width: 120%;
  top: 50%;
  overflow: hidden;
}
.hband__track { display: flex; width: max-content; will-change: transform; }
.hband__group { display: flex; flex: none; align-items: center; }
.hband__item {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .32em 0 .32em .55em;
  font-family: var(--sign);
  font-size: clamp(1.35rem, 3.1vw, 2.8rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
/* front: loud lime tape */
.hband__tape--a {
  z-index: 2;
  transform: translateY(-50%) rotate(-3deg);
  background: var(--lime);
  color: #07080d;
  border-block: 3px solid #07080d;
  box-shadow: 0 0 0 1px rgba(196, 251, 7, .6), 0 0 45px rgba(196, 251, 7, .35), 0 18px 30px -10px rgba(0, 0, 0, .8);
}
.hband__tape--a::after {           /* a sheen that sweeps across now and then */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: hband-sheen 4.5s ease-in-out infinite;
  mix-blend-mode: soft-light;
}
@keyframes hband-sheen { 0%, 55% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.hband__icon {
  width: 1.3em; height: 1.3em;
  border-radius: 50%;
  box-shadow: 0 0 0 .09em #07080d, 0 0 0 .16em rgba(7, 8, 13, .25);
  animation: hband-spin 6s cubic-bezier(.7, 0, .3, 1) infinite;
}
/* every few seconds the coin flips once, like a token */
@keyframes hband-spin { 0%, 70% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
/* behind: warm ember tape, outlined letters, leading into the fireplace */
.hband__tape--b {
  z-index: 1;
  transform: translateY(-50%) rotate(2.6deg);
  background: linear-gradient(90deg, #160906, #2a1209 50%, #160906);
  border-block: 1px solid rgba(255, 150, 70, .55);
  box-shadow: 0 0 50px rgba(255, 120, 40, .3), 0 18px 30px -10px rgba(0, 0, 0, .8);
}
.hband__tape--b .hband__item {
  color: transparent;
  -webkit-text-stroke: 1.5px #ffb36b;
  font-size: clamp(1.15rem, 2.5vw, 2.2rem);
}
.hband__star {
  font-style: normal;
  color: #ff8a2a;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 .5em rgba(255, 138, 42, .9);
}
@media (max-width: 699px) {
  .hband { --h: 120px; }
  .hband__tape--a { transform: translateY(-50%) rotate(-4deg); }
  .hband__tape--b { transform: translateY(-50%) rotate(6deg); }
}

/* ================================================================ NFTs: the portal */
.nftsec {
  --F: min(100vw, max(660px, 100svh) * 1.78);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(70px, 7vw, 120px) var(--gutter) clamp(70px, 7vw, 110px);
  background:
    radial-gradient(ellipse 60% 45% at 50% 55%, rgba(120, 60, 220, .22), transparent 70%),
    linear-gradient(180deg, #120805 0%, #10061a 16%, #0b0619 55%, #06040e 100%);
}
.nftsec__stars { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.nftsec__head { max-width: 760px; margin: 0 auto; text-align: center; position: relative; z-index: 5; }
.nftsec__eyebrow { margin: 0 0 .6em; font: 600 .8125rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #5ef0c8; }
.nftsec__title {
  margin: 0;
  font-family: var(--sign);
  font-weight: 400;
  font-size: max(2.5rem, calc(var(--F) * 0.05));
  line-height: .95;
  color: var(--paper);
}
.nftsec__lede { margin: .9em auto 0; max-width: 34em; color: rgba(235, 230, 255, .72); font-size: max(1rem, calc(var(--F) * 0.0108)); line-height: 1.6; }

.nft {
  --hero-h: min(64svh, 600px, 92vw);
  --card: clamp(84px, 9.5vw, 132px);
  position: relative;
  height: calc(var(--hero-h) * 1.32);
  max-width: 1200px;
  margin: clamp(0px, 1vw, 16px) auto 0;
  touch-action: pan-y;
  cursor: grab;
}
.nft.is-drag { cursor: grabbing; }
.nft__portal { position: absolute; inset: -8% -10%; width: 120%; height: 116%; pointer-events: none; z-index: 1; }
.nft__hero {
  position: absolute;
  left: 50%; top: 50%;
  height: var(--hero-h);
  aspect-ratio: 596 / 640;
  transform: translate(-50%, -50%);
  z-index: 50;
  pointer-events: none;
}
.nft__hero canvas { display: block; width: 100%; height: 100%; }
.nft__ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }   /* no z-index: cards stack against Hoodie */
.nft__card {
  --d: 1;
  position: absolute;
  left: 50%; top: 50%;
  width: var(--card);
  aspect-ratio: 1;
  margin: calc(var(--card) * -0.5) 0 0 calc(var(--card) * -0.5);
  border-radius: 16px;
  overflow: hidden;
  background: #0b0619;
  box-shadow: 0 0 0 2px rgba(196, 251, 7, .85), 0 0 calc(24px * var(--d)) rgba(196, 251, 7, calc(.45 * var(--d))), 0 14px 26px -12px #000;
  cursor: pointer;
  will-change: transform;
  transition: box-shadow .25s;
}
.nft__card img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* cards at the back of the circle sit in the portal's shadow */
.nft__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 40%), rgba(8, 4, 20, calc(.62 * (1 - var(--d))));
  pointer-events: none;
}
.nft__card.is-hover { box-shadow: 0 0 0 3px var(--lime), 0 0 40px rgba(196, 251, 7, .8), 0 18px 30px -12px #000; }
.nftsec__cta { position: relative; z-index: 5; display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; margin-top: clamp(4px, 1vw, 16px); }
.nav__link--new { color: var(--lime); }
.nav__link, .nav__buy { white-space: nowrap; }
@media (max-width: 699px) {
  .nft { --hero-h: min(54svh, 380px, 88vw); --card: 66px; height: calc(var(--hero-h) * 1.55); }
  .nft__card { border-radius: 11px; }
}

/* the second tape, into the portal: violet and teal instead of embers */
.hband--portal .hband__glow { background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(140, 80, 255, .3), transparent 70%); }
.hband--portal .hband__tape--a { transform: translateY(-50%) rotate(2.8deg); }
.hband--portal .hband__tape--b {
  transform: translateY(-50%) rotate(-2.6deg);
  background: linear-gradient(90deg, #12072a, #24104a 50%, #12072a);
  border-block-color: rgba(94, 240, 200, .55);
  box-shadow: 0 0 50px rgba(140, 80, 255, .35), 0 18px 30px -10px rgba(0, 0, 0, .8);
}
.hband--portal .hband__tape--b .hband__item { -webkit-text-stroke-color: #5ef0c8; }
.hband--portal .hband__star { color: var(--lime); text-shadow: 0 0 .5em rgba(196, 251, 7, .9); }
@media (max-width: 699px) {
  .hband--portal .hband__tape--a { transform: translateY(-50%) rotate(4deg); }
  .hband--portal .hband__tape--b { transform: translateY(-50%) rotate(-6deg); }
}

/* ================================================================ performance
   Live blur behind see-through panels is redone every frame over the moving
   city. The panels keep their look, just without the blur (dark enough to
   read on their own). */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nav.is-solid { background: rgba(2, 4, 10, .92); }
.cd, .snd { background: rgba(2, 4, 10, .82); }
/* sections out of view: their CSS loops stand still */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }