/* ==========================================================================
   PONSR — site.css

   THE VISUAL DNA IS PRODUCTION'S, THE FICTION IS NOT.

   The production homepage earned its character from material: a ten-stop
   brushed-metal gradient, layered lift shadows, film grain baked onto panels
   rather than only the page, an emerald identity, and a mascot with real
   choreography. All of that is preserved and pushed further here.

   What is NOT preserved is where production got some of its liveliness: a HUD
   chip carrying a hardcoded three-digit gain, a decorative sparkline, and a
   hero "horizon" drawn from a literal array of fifteen rising numbers, all
   presented as ambient market data. None of it was real. Motion here comes from
   light, depth and choreography, never from asserting a number.

   (The percentage itself is not quoted here on purpose: a test greps the
   shipped CSS for it, and that test is right to be blunt.)

   Fonts are system stacks on purpose. Production pulled Fraunces, Inter and
   JetBrains Mono from Google Fonts; this deployment's CSP is `style-src 'self';
   font-src 'self'`, and keeping that strict was worth more than the typeface.
   Georgia was already production's declared fallback.
   ========================================================================== */

:root {
  --void: #050607;
  --ink: #0A0D11;
  --ink-2: #0E1218;
  --line: #242A33;
  --line-soft: rgba(190, 205, 225, 0.10);

  --silver: #C4CDDA;
  --silver-bright: #F1F5FA;
  --ivory: #E9EDF3;
  --steel: #9AA4B2;
  /* #7F8794 is the lightest-but-still-quiet value clearing 4.5:1 on every
     surface used here. Production measured its predecessor at 3.05:1. */
  --dim: #7F8794;

  --emerald: #46C88C;
  --emerald-bright: #82E3B3;
  --emerald-deep: #2E9A67;
  --amber: #E0B368;
  --rust: #DD8080;

  --glow-emerald: rgba(70, 200, 140, 0.20);
  --glow-cool: rgba(150, 180, 220, 0.16);

  --metal: linear-gradient(168deg,
    #FDFEFF 0%, #E6EBF2 8%, #C7D0DC 18%, #F3F6FA 27%, #B4BECC 39%,
    #8D98A7 51%, #C6CFDC 63%, #9CA7B5 75%, #EAEFF6 88%, #B0BAC8 100%);
  --metal-emerald: linear-gradient(168deg,
    #EAF6EF 0%, #82E3B3 44%, #2E9A67 82%, #6FD7A4 100%);

  --lift-1: inset 0 1px 0 rgba(255,255,255,0.055), 0 1px 2px rgba(0,0,0,0.30),
            0 6px 14px rgba(0,0,0,0.26), 0 18px 38px rgba(0,0,0,0.30);
  --lift-2: inset 0 1px 0 rgba(255,255,255,0.075), 0 2px 4px rgba(0,0,0,0.32),
            0 12px 26px rgba(0,0,0,0.34), 0 34px 70px rgba(0,0,0,0.42);
  --lift-3: inset 0 1px 0 rgba(255,255,255,0.09), 0 3px 6px rgba(0,0,0,0.34),
            0 18px 40px rgba(0,0,0,0.40), 0 54px 110px rgba(0,0,0,0.52);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");

  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --shell: min(1180px, 100% - 2.5rem);
  --radius: 18px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  /* The page must never scroll sideways at any of the reviewed widths. */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* Netlify injects a 780×80 Deploy Preview drawer after our HTML. In browser
   zoom it appeared as the broken white slab reported during review. This exact
   direct-child selector suppresses only that preview chrome; product iframes
   (including the GeckoTerminal chart) remain untouched. */
body > div[data-netlify-deploy-id][data-netlify-site-id] { display: none !important; }

a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--emerald); color: #04120B; padding: 0.7rem 1.1rem;
  font-weight: 700; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--emerald-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Ambient ground. Two slow emerald/cool washes plus grain, so the page reads
   as a lit material rather than a flat dark fill.
   -------------------------------------------------------------------------- */
.ambient { position: fixed; inset: 0; height: auto; z-index: 0; pointer-events: none; contain: paint; overflow: clip; background: radial-gradient(ellipse at 50% -20%,#10261c 0%,#070b0d 42%,var(--void) 78%); mask-image: linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%); }
.ambient::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.16; mix-blend-mode: overlay; }
.ambient-grid { position: absolute; inset: -10%; opacity: .22; background-image: linear-gradient(rgba(196,205,218,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(196,205,218,.055) 1px,transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(100% 80% at 50% 10%,#000 20%,transparent 78%); animation: gridTravel 44s linear infinite; }
.ambient-sweep { position: absolute; inset: 0; opacity: .7; background: linear-gradient(112deg,transparent 32%,rgba(130,227,179,.035) 48%,rgba(196,205,218,.04) 52%,transparent 68%); background-size: 260% 100%; animation: ambientSweep 15s ease-in-out infinite; }
.ambient-orb { position: absolute; width: 70vmax; aspect-ratio: 1; border-radius: 50%; filter: blur(20px); opacity: .68; will-change: transform; }
.ambient-orb.orb-a { left: -24vmax; top: -30vmax; background: radial-gradient(circle,rgba(70,200,140,.24),rgba(70,200,140,.045) 38%,transparent 68%); animation: ambientDrift 28s ease-in-out infinite alternate; }
.ambient-orb.orb-b { right: -28vmax; bottom: -34vmax; background: radial-gradient(circle,rgba(150,180,220,.18),rgba(70,200,140,.05) 40%,transparent 68%); animation: ambientDriftB 36s ease-in-out infinite alternate; }
.scroll-progress { position:absolute; top:0; left:0; width:100%; height:2px; z-index:100; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--emerald-deep),var(--emerald-bright),var(--silver-bright)); box-shadow:0 0 18px rgba(70,200,140,.55); animation:scrollProgress linear both; animation-timeline:scroll(root block); }
@keyframes scrollProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes gridTravel { to { transform: translate3d(72px,72px,0); } }
@keyframes ambientSweep { 0%,100% { background-position: 140% 0; } 50% { background-position: -40% 0; } }
@keyframes ambientDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(18vmax,10vmax,0) scale(1.18); } }
@keyframes ambientDriftB { from { transform: translate3d(0,0,0) scale(1.12); } to { transform: translate3d(-16vmax,-9vmax,0) scale(.9); } }

#content { position: relative; z-index: 1; }

.shell { width: var(--shell); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 7.4vw, 4.9rem); }
h2 { font-size: clamp(1.85rem, 4.4vw, 2.9rem); }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }
p { margin: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim); margin: 0;
}
.mono { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: -0.01em; }
.lede { color: var(--silver); font-size: clamp(1rem, 2.1vw, 1.14rem); max-width: 58ch; }

/* Metal type. The gradient is clipped to the glyphs; the emphasis span carries
   the emerald variant so the identity colour lands on the operative words. */
.metal {
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Fallback for engines that ignore background-clip on text. */
  -webkit-text-fill-color: transparent;
}
.metal-emerald { background: var(--metal-emerald); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: relative; z-index: 40;
  backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(to bottom, rgba(5,6,7,0.90), rgba(5,6,7,0.62));
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 0;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 700; letter-spacing: 0.13em; font-size: 0.82rem; }
.brand img { width: 32px; height: 32px; object-fit: contain; animation: bob 3.2s ease-in-out infinite; }
.brand:hover img { animation: wiggle 0.6s var(--ease); }
.nav-links { display: flex; gap: 1.35rem; font-size: 0.9rem; }
.nav-links a { text-decoration: none; color: var(--steel); padding: 0.35rem 0; position: relative; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ivory); }
.nav-links a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--emerald);
}

@keyframes bob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2.5px); } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.hero-inner { width: var(--shell); margin-inline: auto; display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.15fr 0.85fr; } }

.hero-copy { display: grid; gap: 1.4rem; justify-items: start; }
.hero h1 { max-width: 14ch; }
.hero h1 em { font-style: italic; }

/* The sheen sweeps ONCE on load. A looping sheen reads as a live indicator,
   and nothing here is live. */
.sheen { position: relative; display: inline-block; overflow: clip; contain: paint; }
.sheen::after {
  content: ''; position: absolute; inset: -6% -12%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.42) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.ready .sheen::after { animation: sweep 1.5s var(--ease) 0.55s 1 forwards; }
@keyframes sweep { to { transform: translateX(120%); } }

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  /* 48px min target: comfortably above the practical mobile minimum. */
  min-height: 48px; padding: 0 1.35rem;
  border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-primary { background: var(--metal-emerald); color: #04120B; box-shadow: var(--lift-1); overflow: hidden; position: relative; }
.btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.72) 49%,transparent 68%); transform:translateX(-140%); }
.btn-primary:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--lift-2),0 0 28px rgba(70,200,140,.16); }
.btn-primary:hover::after { animation:buttonShimmer .9s var(--ease); }
.btn-ghost { background: rgba(255,255,255,0.035); border-color: var(--line); color: var(--ivory); position:relative; overflow:hidden; }
.btn-ghost::before { content:''; position:absolute; inset:0; background:linear-gradient(115deg,rgba(196,205,218,.13),rgba(70,200,140,.06)); transform:translateX(-102%); transition:transform .42s var(--ease); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--steel); background: rgba(255,255,255,0.06); }
.btn-ghost:hover::before { transform:none; }
.btn > span { position:relative; z-index:1; }
.btn:active { transform:scale(.97); }
.home-actions { align-items:center; gap:.7rem; }
.home-action { min-height:52px; padding-inline:1.2rem; }
.btn-secondary { position:relative; overflow:hidden; border-color:rgba(196,205,218,.24); color:var(--ivory); background:linear-gradient(135deg,rgba(31,38,43,.94),rgba(13,17,20,.98)); box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.06); }
.btn-secondary::before { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent,rgba(130,227,179,.1),transparent); transform:translateX(-110%); transition:transform .5s var(--ease); }
.btn-secondary:hover { transform:translateY(-3px); border-color:rgba(130,227,179,.38); box-shadow:0 16px 38px rgba(0,0,0,.32),0 0 28px rgba(70,200,140,.08); }
.btn-secondary:hover::before { transform:translateX(110%); }
.action-icon { position:relative; z-index:2; display:inline-grid; place-items:center; min-width:1.45rem; height:1.45rem; border:1px solid currentColor; border-radius:50%; font-style:normal; font-size:.72rem; transition:transform .35s var(--ease),background .35s var(--ease); }
.home-action:hover .action-icon,.section-action:hover .action-icon { transform:translate(2px,-2px); background:rgba(255,255,255,.12); }
.home-tertiary { display:inline-flex; align-items:center; gap:.48rem; min-height:44px; padding:.55rem .25rem; color:var(--steel); text-decoration:none; font-size:.78rem; }
.home-tertiary:hover { color:var(--ivory); }
.home-tertiary .action-icon { min-width:1.25rem; height:1.25rem; border-color:var(--line); font-size:.62rem; }
.section-action { display:inline-flex; align-items:center; gap:.55rem; min-height:46px; padding:.55rem .75rem; border:1px solid var(--line-soft); border-radius:999px; color:var(--ivory); background:rgba(255,255,255,.025); text-decoration:none; font-size:.75rem; white-space:nowrap; transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease); }
.section-action:hover { transform:translateY(-2px); border-color:rgba(130,227,179,.38); background:rgba(130,227,179,.06); }
@keyframes buttonShimmer { to { transform:translateX(140%); } }

/* The mascot. Halo, dashed gauge, two counter-rotating orbits, drop shadow,
   and eyes that track the pointer (set as CSS vars from app.mjs). */
.bot { position: relative; width: min(240px, 58vw); aspect-ratio: 1; margin-inline: auto; }
.bot-halo { position: absolute; inset: -20%; background: radial-gradient(circle at 50% 46%,rgba(70,200,140,.34),rgba(70,200,140,.10) 36%,transparent 67%); filter: blur(8px); animation: botHalo 4.4s ease-in-out infinite; }
.bot-gauge { position: absolute; inset: -4%; animation: spin 38s linear infinite; filter: drop-shadow(0 0 9px rgba(196,205,218,.14)); }

/* The radar sweep, from production. A slow conic wedge turning behind the
   robot: it is the cheapest layer on the page and the one that most reads as
   "this thing is powered". It is decorative and asserts nothing -- there is no
   number attached to it, and it does not speed up, brighten or pulse when data
   arrives. */
.bot::before {
  content: ''; position: absolute; inset: -14%; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, rgba(70,200,140,0.12), rgba(70,200,140,0.015) 26%, transparent 44%);
  animation: spin 7s linear infinite;
  pointer-events: none;
}

/* Production's entrance: the robot arrives rather than being already there.
   `both` so it holds its start state before the delay, and it runs once. */
.bot-avatar { animation-composition: replace; }
.bot { animation: botIn .62s cubic-bezier(.2,.8,.2,1) both; }
@keyframes botIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.bot-ring {
  position: absolute; inset: 8%; border-radius: 50%;
  border: 1px solid rgba(196,205,218,0.14);
}
.bot-ring.r2 { inset: 0; border-color: rgba(70,200,140,0.16); border-style: dashed; }
.bot-orbit { position: absolute; inset: 1%; animation: spin 22s linear infinite; }
.bot-orbit.o2 { inset: 6%; animation-duration: 34s; animation-direction: reverse; }
.bot-orbit i {
  position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald-bright); box-shadow: 0 0 12px var(--emerald);
}
.bot-avatar { position: absolute; inset: 9%; animation: botFloat 5.5s ease-in-out infinite; transform-style: preserve-3d; transition: transform .35s var(--ease); will-change: transform; z-index: 3; }
.bot-avatar img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 32px rgba(0,0,0,.62)) drop-shadow(0 0 18px rgba(70,200,140,.45)); animation: botAura 4.4s ease-in-out infinite; }
.bot-shadow { position: absolute; left: 50%; bottom: 7%; width: 42%; height: 6%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse,rgba(70,200,140,.38),transparent 72%); filter: blur(6px); animation: botShadow 5.5s ease-in-out infinite; }
.motion-mote { position: absolute; bottom: 15%; width: 4px; height: 4px; border-radius: 50%; background: var(--emerald-bright); box-shadow: 0 0 10px var(--emerald); opacity: 0; z-index: 2; animation: moteRise 5s ease-in-out infinite; }
.motion-mote.m1 { left: 14%; animation-duration: 4.6s; }
.motion-mote.m2 { left: 38%; width: 3px; height: 3px; animation-delay: 1.2s; animation-duration: 6s; }
.motion-mote.m3 { left: 68%; animation-delay: 2.3s; animation-duration: 5.4s; }
.motion-mote.m4 { left: 86%; width: 3px; height: 3px; animation-delay: .7s; animation-duration: 6.6s; }

@keyframes spin { to { transform: rotate(360deg); } }
/* The mascot's motion is production's, value for value.
   ponsr.fun runs `heroBotFloat` at 5.5s: a figure-of-eight drift that carries
   BOTH rotation and a slight scale swell, which is what makes the robot read as
   hovering under its own power rather than sliding on a rail. The branch had
   replaced it with invented offsets, and then overridden even those with a flat
   vertical bob -- see the note by `.bot-avatar` below. */
@keyframes botFloat {
  0%   { transform: translate3d(0,-6px,0) rotate(-1.6deg); }
  25%  { transform: translate3d(5px,1px,0) rotate(1deg) scale(1.015); }
  50%  { transform: translate3d(0,7px,0) rotate(1.6deg); }
  75%  { transform: translate3d(-5px,1px,0) rotate(-1deg) scale(1.015); }
  100% { transform: translate3d(0,-6px,0) rotate(-1.6deg); }
}
@keyframes botHalo { 0%,100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.09); } }
/* Three layers, like production: a contact shadow that never moves, a tight
   emerald rim, and a wide bloom that breathes. The branch had dropped the wide
   bloom, which is the layer doing most of the "expensive" work. */
@keyframes botAura {
  0%,100% { filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(70,200,140,.42)) drop-shadow(0 0 40px rgba(70,200,140,.22)); }
  50%     { filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(70,200,140,.72)) drop-shadow(0 0 68px rgba(70,200,140,.42)); }
}
@keyframes botShadow { 0%,100% { opacity:.5; transform:translateX(-50%) scaleX(.92); } 50% { opacity:.85; transform:translateX(-50%) scaleX(1.09); } }
@keyframes moteRise { 0% { opacity:0; transform:translateY(0) scale(.55); } 18% { opacity:.9; } 70% { opacity:.42; } 100% { opacity:0; transform:translateY(-132px) scale(1.2); } }

/* ==========================================================================
   V4 · EMERALD OBSERVATORY
   Decorative depth only: no market-shaped motion and no implied live values.
   ========================================================================== */
/* `.ambient` is declared once, above. A second rule here used to override its
   position, height, overflow and background while the first kept supplying the
   z-index, pointer-events and mask -- so the layer's real definition was split
   across two places, which is how the mascot's motion got lost. Same values,
   one author. */
.ambient-stars { position:absolute; inset:0; opacity:.58; background-image:radial-gradient(circle,rgba(241,245,250,.75) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(130,227,179,.62) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(196,205,218,.32) 0 1px,transparent 1.2px); background-position:0 0,37px 61px,93px 27px; background-size:137px 137px,191px 191px,83px 83px; mask-image:linear-gradient(#000,transparent 92%); animation:starDrift 70s linear infinite; }
.ambient-aurora { position:absolute; width:78vw; height:44vw; border-radius:50%; filter:blur(70px); opacity:.34; mix-blend-mode:screen; will-change:transform; }
.ambient-aurora.aurora-a { left:-20vw; top:-13vw; background:conic-gradient(from 120deg,transparent,rgba(70,200,140,.45),rgba(71,120,154,.2),transparent 72%); animation:auroraDrift 22s ease-in-out infinite alternate; }
.ambient-aurora.aurora-b { right:-24vw; top:8vw; background:conic-gradient(from 280deg,transparent,rgba(196,205,218,.24),rgba(70,200,140,.3),transparent 70%); animation:auroraDrift 31s ease-in-out infinite alternate-reverse; }
.ambient-beam { position:absolute; top:-30%; width:22vw; height:140%; opacity:.12; filter:blur(14px); background:linear-gradient(90deg,transparent,rgba(130,227,179,.55),transparent); transform:rotate(18deg); }
.ambient-beam.beam-a { left:18%; animation:beamSweep 19s ease-in-out infinite; }
.ambient-beam.beam-b { right:7%; animation:beamSweep 27s ease-in-out 4s infinite reverse; }
.cursor-glow { position:fixed; left:0; top:0; z-index:0; width:34rem; height:34rem; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle,rgba(70,200,140,.13),rgba(89,124,154,.055) 38%,transparent 70%); filter:blur(12px); transition:opacity .35s ease; will-change:transform; }
@keyframes starDrift { to { background-position:137px 274px,228px 252px,176px 193px; } }
@keyframes auroraDrift { from { transform:translate3d(-4%,0,0) rotate(-8deg) scale(.92); } to { transform:translate3d(18%,12%,0) rotate(16deg) scale(1.13); } }
@keyframes beamSweep { 0%,100% { transform:translateX(-28vw) rotate(18deg); opacity:.03; } 42%,58% { opacity:.15; } 50% { transform:translateX(78vw) rotate(18deg); } }

.nav { border-bottom-color:rgba(130,227,179,.12); box-shadow:0 12px 50px rgba(0,0,0,.22); }
.nav::after { content:''; position:absolute; left:50%; bottom:-1px; width:min(1180px,94vw); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(130,227,179,.55),transparent); opacity:.45; }
.hero { min-height:min(850px,calc(100vh - 58px)); display:grid; align-items:center; padding-block:clamp(3rem,7vw,6rem); }
.hero-inner { grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); }
.hero-copy { position:relative; z-index:2; }
.hero-copy::before { content:'PONSR / 4663'; position:absolute; left:-5rem; top:50%; transform:rotate(-90deg); color:rgba(196,205,218,.24); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.24em; }
.hero-stage { position:relative; display:grid; place-items:center; min-height:490px; isolation:isolate; contain:paint; overflow:clip; border-radius:42%; animation:heroStageBreathe 8s ease-in-out infinite; }
.hero-stage::before { content:''; position:absolute; inset:4% -8%; z-index:-2; border-radius:50%; background:radial-gradient(circle,rgba(70,200,140,.22),rgba(70,200,140,.04) 44%,transparent 70%); filter:blur(20px); }
.hero-stage::after { content:''; position:absolute; left:7%; right:7%; bottom:8%; height:25%; z-index:-1; border:1px solid rgba(130,227,179,.16); border-radius:50%; transform:perspective(400px) rotateX(72deg); background:repeating-radial-gradient(ellipse at center,transparent 0 20px,rgba(130,227,179,.08) 21px 22px); box-shadow:0 0 80px rgba(70,200,140,.08); }
.stage-caption { position:absolute; bottom:2%; left:50%; transform:translateX(-50%); color:rgba(196,205,218,.38); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.24em; white-space:nowrap; }
/* One size, declared once. This selector used to re-declare the width as
   min(420px,82vw), which is where the robot got big enough to swallow the
   hero. */
.bot { width: min(250px, 60vw); }
.bot-tilt { position:absolute; inset:9%; z-index:4; transform-style:preserve-3d; will-change:transform; }
/* This rule used to re-declare the avatar's animation with a flat two-keyframe
   bob. Being later in the sheet it won, so the shipped mascot only moved up and
   down and production's rotation and scale never ran at all. Only the size
   override belongs here; the motion is declared once, above. */
.bot-avatar { inset:0; }
/* The aura is declared once, with the avatar's other rules above. A second
   declaration here is what let the float get silently overridden in the first
   place, so this selector keeps only what is unique to it. */
.bot-eyes { position:absolute; inset:0; pointer-events:none; z-index:2; }
.eye { position:absolute; width:8.7%; height:14.2%; transform:translate(-50%,-50%); }
.eye-l { left:34.5%; top:55.9%; }
.eye-r { left:65.4%; top:55.9%; }
.eye i { position:absolute; inset:0; border-radius:36% / 27%; background:linear-gradient(180deg,#5FE0A2,#34B87C); box-shadow:0 0 5px rgba(70,200,140,.95),0 0 15px rgba(70,200,140,.64); transform:translate(var(--ex,0px),var(--ey,0px)); transition:transform .14s ease-out; animation:eyeBlink 6.5s ease-in-out infinite; }
.eye i::after { content:''; position:absolute; left:20%; top:14%; width:26%; height:17%; background:rgba(255,255,255,.92); border-radius:1px; }
@keyframes eyeBlink { 0%,92%,100% { transform:translate(var(--ex,0px),var(--ey,0px)) scaleY(1); } 95% { transform:translate(var(--ex,0px),var(--ey,0px)) scaleY(.12); } }

@keyframes heroStageBreathe { 0%,100% { filter:saturate(.95); } 50% { filter:saturate(1.18); } }

@keyframes emptyAperture { 0%,100% { opacity:.68; box-shadow:0 0 40px rgba(70,200,140,.08),inset 0 0 38px rgba(0,0,0,.8); } 50% { opacity:1; box-shadow:0 0 80px rgba(70,200,140,.17),inset 0 0 46px rgba(0,0,0,.9); } }
@keyframes officialCore { 0%,100% { transform:scale(.97); box-shadow:0 0 45px rgba(70,200,140,.12),inset 0 0 30px rgba(130,227,179,.06); } 50% { transform:scale(1.035); box-shadow:0 0 90px rgba(70,200,140,.28),inset 0 0 45px rgba(130,227,179,.14); } }

.panel,.step,.token-card,.account-connection { backdrop-filter:blur(16px) saturate(125%); }
.panel { border-color:rgba(196,205,218,.13); box-shadow:var(--lift-2),inset 0 1px rgba(255,255,255,.045); }
.step { position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(20,26,30,.82),rgba(7,9,12,.82)); }
.step::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 0,rgba(130,227,179,.13),transparent 55%); transition:opacity .4s var(--ease); }
.step:hover::before { opacity:1; }
.verification-policy { position:relative; padding-top:clamp(3rem,6vw,4.5rem); padding-bottom:clamp(3rem,6vw,4.5rem); }
.verification-policy::before { content:''; position:absolute; left:50%; top:8%; width:80vw; max-width:1100px; height:90%; transform:translateX(-50%); z-index:-1; background:radial-gradient(ellipse,rgba(70,200,140,.065),transparent 66%); filter:blur(30px); }
.verification-policy .steps { gap:.75rem; }
.verification-policy .step { border:1px solid rgba(196,205,218,.16); border-radius:14px; padding:1.15rem; background:rgba(12,16,18,.72); }
.verification-policy .step .num { color:rgba(130,227,179,.64); font-family:var(--font-mono); }
.hero + .status-strip { margin-top:-1.5rem; }
#latest-launches { padding-top:clamp(3rem,6vw,4.5rem); padding-bottom:clamp(2.5rem,5vw,4rem); }
.footer { margin-top:clamp(2rem,5vw,3.5rem); }
/* V5 homepage: product substance replaces the oversized official-token campaign. */
.product-head { max-width:780px; }
.product-pathways { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.product-pathways>a { position:relative; min-width:0; min-height:205px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:1rem; padding:1.25rem; overflow:hidden; border:1px solid rgba(196,205,218,.16); border-radius:18px; color:var(--ivory); background:linear-gradient(145deg,rgba(27,33,37,.96),rgba(8,11,13,.98)); text-decoration:none; transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease); }
.product-pathways>a::before { content:''; position:absolute; inset:auto -20% -70% 20%; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(70,200,140,.18),transparent 68%); animation:pathwayPulse 5.5s ease-in-out infinite; }
.product-pathways>a:nth-child(2)::before { animation-delay:-1.8s; }
.product-pathways>a:nth-child(3)::before { animation-delay:-3.6s; }
.product-pathways>a:hover { transform:translateY(-6px); border-color:rgba(130,227,179,.34); box-shadow:0 24px 55px rgba(0,0,0,.36),0 0 34px rgba(70,200,140,.08); }
.product-pathways h3 { margin:.3rem 0 .55rem; font-size:1.45rem; }
.product-pathways p:not(.eyebrow) { color:var(--steel); font-size:.86rem; }
.pathway-index { color:var(--emerald-bright); font-family:var(--font-mono); font-size:.68rem; }
.product-pathways .action-icon { align-self:start; }
.protocol-section { overflow:hidden; }
.protocol-flow { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line-soft); border-radius:18px; background:var(--line-soft); }
.protocol-flow article { position:relative; z-index:1; min-height:165px; display:grid; align-content:center; gap:.45rem; padding:1.15rem; background:linear-gradient(180deg,rgba(20,25,28,.97),rgba(8,10,12,.99)); }
.protocol-flow b { color:var(--emerald-bright); font-family:var(--font-mono); font-size:.68rem; }
.protocol-flow span:not(.flow-trace) { color:var(--silver-bright); font-size:1rem; font-weight:700; }
.protocol-flow small { color:var(--steel); font-size:.78rem; line-height:1.5; }
.flow-trace { position:absolute; z-index:2; top:0; bottom:0; width:28%; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(130,227,179,.08),rgba(255,255,255,.12),transparent); transform:translateX(-120%); animation:flowTrace 7s ease-in-out infinite; }
/* ---------------------------------------------------------------------------
 * HOW TO LAUNCH, AND WHAT THE CREATOR KEEPS.
 *
 * Deliberately built from the same parts as `.protocol-flow` above -- the same
 * hairline grid, the same numeral, the same three type sizes -- because these
 * two sections are the most important on the page and must read as native to
 * it, not as a banner someone bolted on later.
 * ------------------------------------------------------------------------- */
.howto-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line-soft); border-radius:18px; background:var(--line-soft); }
.howto-step { position:relative; min-height:160px; display:grid; align-content:center; gap:.45rem; padding:1.15rem; background:linear-gradient(180deg,rgba(20,25,28,.97),rgba(8,10,12,.99)); }
.howto-step b { color:var(--emerald-bright); font-family:var(--font-mono); font-size:.68rem; }
.howto-step span { color:var(--silver-bright); font-size:1rem; font-weight:700; }
.howto-step small { color:var(--steel); font-size:.78rem; line-height:1.5; }

/* The example is the single most useful thing on the page, so it is typeset as
   the thing you would actually post rather than as a code block. */
.howto-example { margin:1.1rem 0 0; display:grid; gap:.7rem; padding:1.15rem 1.25rem; border:1px solid rgba(130,227,179,.18); border-radius:16px; background:linear-gradient(120deg,rgba(130,227,179,.05),rgba(0,0,0,.16)); }
.howto-example figcaption { color:var(--dim); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; }
.howto-example blockquote { margin:0; color:var(--ivory); font-size:clamp(.95rem,2.2vw,1.1rem); line-height:1.55; }
.howto-mention { color:var(--emerald-bright); font-weight:700; }
.howto-copy { width:max-content; font-size:.7rem; padding:.4rem .8rem; letter-spacing:.06em; }
.howto-gate { margin-top:1rem; }
/* The hit box grows, the line does not move. A link in running prose must stay
   inline -- padding it the way a ledger row is padded would push the sentence
   apart -- but 20px tall is not a target a thumb can find. */
.howto-gate a { color:var(--emerald-bright); padding-block:.4rem; margin-block:-.4rem; }

/* THE SAME REQUEST, IN THE HERO.
   Grouped with the how-to rules rather than the hero ones because it is the
   same component -- and because `.hero-request-gate` has to beat the
   `.howto-gate` margin above, which a single class can only do by coming after
   it. Compact on purpose: its job is to show what a request looks like, not to
   explain it, and every line it adds pushes the fold on a phone. */
.hero-request { margin:1.3rem 0 0; display:grid; gap:.65rem; justify-items:start; padding:1rem 1.1rem; border:1px solid rgba(130,227,179,.18); border-radius:16px; background:linear-gradient(120deg,rgba(130,227,179,.05),rgba(0,0,0,.16)); }
.hero-request-label { margin:0; color:var(--dim); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; }
.hero-request-line { margin:0; color:var(--ivory); font-size:clamp(.9rem,2vw,1.02rem); line-height:1.55; }
/* `.note` carries its own dashed border, padding and background, which inside
   this card reads as a box drawn inside a box. Stripped back to a hairline rule
   so the request and its gate read as one object with a divider, not two.

   TWO CLASSES, DELIBERATELY. `.note` is declared at the bottom of this file --
   later than here and equally specific -- so a single `.hero-request-gate`
   loses the cascade and the dashed box survives. Written as `.note.x` it wins
   on specificity wherever either rule sits, which is the property that should
   hold rather than an ordering that a future edit can quietly undo. */
.note.hero-request-gate { width:100%; margin:.15rem 0 0; padding:.75rem 0 0; border:0; border-top:1px solid rgba(130,227,179,.14); border-radius:0; background:none; font-size:.8rem; }

.economics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line-soft); border-radius:18px; background:var(--line-soft); }
.economics-figure { display:grid; align-content:center; gap:.35rem; padding:1.35rem 1.15rem; background:linear-gradient(180deg,rgba(20,25,28,.97),rgba(8,10,12,.99)); }
/* The creator's share is the headline of the whole page; it is the only figure
   given the display face and the emerald. */
.economics-figure b { font-family:var(--font-mono); font-size:1.45rem; color:var(--silver-bright); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.economics-figure.is-primary { background:linear-gradient(160deg,rgba(130,227,179,.09),rgba(8,10,12,.99)); }
.economics-figure.is-primary b { color:var(--emerald-bright); font-size:1.75rem; }
.economics-figure span { color:var(--silver-bright); font-size:.9rem; font-weight:700; }
.economics-figure small { color:var(--steel); font-size:.78rem; line-height:1.5; }

@media (max-width:820px) {
  .howto-grid, .economics-grid { grid-template-columns:1fr; }
  .howto-step { min-height:0; }
}

.compact-official-section { padding-block:2rem; }
.compact-official-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.official-identity-strip { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; padding:1rem 1.15rem; border:1px solid rgba(130,227,179,.18); border-radius:16px; background:linear-gradient(110deg,rgba(16,27,22,.92),rgba(8,11,13,.98)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.official-identity-strip strong { display:block; color:var(--silver-bright); font-size:1rem; }
.official-identity-strip p:not(.eyebrow) { margin-top:.22rem; color:var(--steel); font-size:.82rem; }
.official-sigil { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(130,227,179,.32); border-radius:50%; background:radial-gradient(circle,rgba(70,200,140,.18),transparent 68%); }
/* The slot held a 10px dot; it holds the Ponsr robot now. `contain` rather than
   `cover`, for the reason the launch cards already learned the hard way: a crop
   is an alteration, and a mark is the one image that must never be altered. */
.official-sigil img { width:30px; height:30px; object-fit:contain; display:block; }
/* THE FULL ADDRESS IS PRINTED HERE, AND 42 MONOSPACE CHARACTERS DO NOT FIT A
   PHONE. Token pages abbreviate theirs, so their button may size to content;
   this one must wrap instead. Measured at 375px before this rule: the button ran
   to 450px and took the whole DOCUMENT with it, so the page scrolled sideways.
   Three classes deep on purpose. `.identity-actions .ca-copy` sets `width:auto`
   and is equally specific, so a two-class rule would win or lose on source order
   — the same tie that shipped the dashed box on the hero request. */
.official-identity-strip .identity-actions .ca-copy { width:100%; min-width:0; flex-wrap:wrap; justify-content:flex-start; gap:.3rem .6rem; }
/* Left-aligned because this string is read character by character. The hero
   centres its text on a phone, and a centred hex address that wraps puts the
   second line's start somewhere different from the first's. */
.official-identity-strip .identity-actions .ca-copy .mono { overflow-wrap:anywhere; min-width:0; text-align:left; }
@keyframes pathwayPulse { 0%,100% { opacity:.42; transform:scale(.8); } 50% { opacity:1; transform:scale(1.2); } }
@keyframes flowTrace { 0%,12% { transform:translateX(-120%); } 70%,100% { transform:translateX(420%); } }
@media (max-width:880px) { .product-pathways { grid-template-columns:1fr; } .product-pathways>a { min-height:150px; } .protocol-flow { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .protocol-flow { grid-template-columns:1fr; } .protocol-flow article { min-height:135px; } .official-identity-strip { grid-template-columns:auto minmax(0,1fr); } .official-identity-strip .section-action { grid-column:1/-1; justify-content:center; } .compact-official-head { align-items:flex-start; flex-direction:column; } }
.btn { isolation:isolate; }
.btn-primary { box-shadow:0 12px 34px rgba(46,154,103,.2),inset 0 1px rgba(255,255,255,.42); }
.btn-primary:hover { box-shadow:0 18px 50px rgba(46,154,103,.33),0 0 38px rgba(130,227,179,.16); }
@media (max-width:899px) { .hero { min-height:auto; } .hero-inner { grid-template-columns:1fr; } .hero-copy { text-align:center; justify-items:center; } .hero-copy::before { display:none; } .hero-stage { min-height:390px; } .official-stage { grid-template-columns:1fr; text-align:center; } .official-stage-copy { justify-items:center; } }
@media (max-width:520px) { .hero-stage { min-height:330px; } .bot { width:min(320px,90vw); } .official-stage { min-height:0; padding:1.2rem; } .official-stage-art { width:min(190px,64vw); } .official-stage-copy h3 { font-size:2.2rem; } .official-actions { display:grid; width:100%; } .cursor-glow { display:none; } .hero + .status-strip { margin-top:-.6rem; } }

/* --------------------------------------------------------------------------
   Status strip — honest, compact, and never decorative.

   Colour is bound to state, and only `complete` is emerald. Nothing pulses:
   a pulsing dot on a paused or stale source is the exact lie this project
   spent a fortnight removing from its own status endpoint.
   -------------------------------------------------------------------------- */
.status-strip {
  width: var(--shell); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem;
  padding: 0.8rem 1.1rem;
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  box-shadow: var(--lift-1);
  font-size: 0.85rem;
}
.status-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.status-strip .group { display: inline-flex; align-items: center; gap: 0.5rem; }
.status-strip .sep { color: var(--line); }
.status-strip .detail, .status-strip .gate { color: var(--steel); }
.state-complete .dot { background: var(--emerald); box-shadow: 0 0 10px var(--glow-emerald); }
.state-partial .dot, .state-stale .dot { background: var(--amber); }
.state-error .dot { background: var(--rust); }
.state-loading .dot { background: var(--steel); }

.gate-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--silver);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Panels and sections
   -------------------------------------------------------------------------- */
.section { width: var(--shell); margin-inline: auto; padding: clamp(3rem, 8vw, 5.5rem) 0; }
.home-product-section,.protocol-section,.compact-official-section,.verification-policy { padding-block:clamp(2.6rem,5vw,4rem); }
.section-head { display: grid; gap: 0.85rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); max-width: 62ch; }

.panel {
  position: relative;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));
  box-shadow: var(--lift-1);
  padding: clamp(1.25rem, 3.4vw, 1.9rem);
  overflow: hidden;
}
.panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.10; mix-blend-mode: overlay;
}

/* Proof card — the PSTONKS record. Branded, not an audit dump. */
.proof { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .proof { grid-template-columns: 1fr 1fr; align-items: start; } }
.proof-id { display: grid; gap: 0.5rem; }
.proof-symbol { font-family: var(--font-mono); color: var(--emerald-bright); letter-spacing: 0.08em; }
.facts { display: grid; gap: 0; margin: 0; }
.fact {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1rem; padding: 0.62rem 0; border-top: 1px solid var(--line-soft);
}
.fact:first-child { border-top: 0; }
.fact dt { color: var(--dim); font-size: 0.8rem; letter-spacing: 0.04em; margin: 0; }
.fact dd { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; color: var(--silver-bright); text-align: right; overflow-wrap: anywhere; }
.fact dd a { color: var(--silver-bright); text-decoration-color: var(--line); text-underline-offset: 3px; }
.fact dd a:hover { color: var(--emerald-bright); }

/* Steps */
.steps { display: grid; gap: 1rem; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: grid; gap: 0.6rem; align-content: start; }
.step .num {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--emerald);
}
.step p { color: var(--silver); font-size: 0.95rem; }

/* Image-first launch board — compact, scalable and provenance-visible. */
.home-launch-grid { margin-top:.5rem; }
.launch-search { display:grid; gap:.55rem; color:var(--steel); font-size:.82rem; }
.launch-search span { font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.launch-search input { width:100%; min-height:48px; border:1px solid var(--line-soft); border-radius:999px; padding:.75rem 1.1rem; color:var(--ivory); background:rgba(6,9,10,.72); font:inherit; outline:none; transition:border-color .2s var(--ease),box-shadow .2s var(--ease); }
.launch-search input::placeholder { color:var(--dim); }
.launch-search input:focus-visible { border-color:rgba(70,200,140,.65); box-shadow:0 0 0 3px rgba(70,200,140,.12); }
.dynamic-token { padding-top:clamp(6rem,12vw,9rem); }
.dynamic-token-panel { display:grid; gap:1rem; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.85rem; }
.home-launch-grid.is-single { grid-template-columns:1fr; }
.home-launch-grid.is-single .token-card { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(360px,1.2fr); }
.home-launch-grid.is-single .token-art { aspect-ratio:auto; min-height:100%; border-bottom:0; border-right:1px solid var(--line-soft); }
#latest-launches { padding-bottom:clamp(2.5rem,5vw,3.5rem); }
@media (min-width:680px) { .collection-tools { grid-template-columns:minmax(0,1fr) minmax(280px,420px); align-items:end; } }
@media (max-width:679px) { .launch-section-head { grid-template-columns:1fr; align-items:start; } .home-launch-grid.is-single { grid-template-columns:1fr; } .home-launch-grid.is-single .token-card { display:flex; } .home-launch-grid.is-single .token-art { aspect-ratio:1.35/1; border-right:0; border-bottom:1px solid var(--line-soft); } }
.token-card { min-width:0; display:flex; flex-direction:column; border:1px solid var(--line-soft); border-radius:16px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014)); box-shadow:var(--lift-1); transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease); }
.token-card:hover { transform:translateY(-5px); box-shadow:var(--lift-2); border-color:rgba(70,200,140,.38); }
.token-art { position:relative; container-type:inline-size; aspect-ratio:1.35/1; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 28% 22%,rgba(130,227,179,.25),transparent 38%),linear-gradient(145deg,#111a19,#070a0d 70%); border-bottom:1px solid var(--line-soft); }
.token-art::after { content:''; position:absolute; inset:-50%; background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.10) 49%,transparent 60%); transform:translateX(-55%); transition:transform .9s var(--ease); }
.token-card:hover .token-art::after { transform:translateX(55%); }
.token-art .art-grid { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(130,227,179,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(130,227,179,.15) 1px,transparent 1px); background-size:24px 24px; }
.token-art .art-symbol { position:relative; z-index:1; max-width:92%; color:var(--ivory); font-family:var(--font-display); font-size:clamp(1rem,16cqi,3.8rem); line-height:.9; font-style:italic; letter-spacing:-.06em; white-space:nowrap; word-break:normal; overflow-wrap:normal; text-shadow:0 0 34px rgba(70,200,140,.34); }
.token-art small { position:absolute; left:.75rem; bottom:.6rem; color:var(--dim); font-family:var(--font-mono); font-size:.61rem; letter-spacing:.08em; text-transform:uppercase; }
.launch-card-body { display:grid; gap:.7rem; padding:.9rem; }
@media (max-width:679px) { .launch-discovery-grid.is-single .token-card { grid-template-columns:1fr; } .launch-discovery-grid.is-single .token-art { aspect-ratio:1.3/1; border-right:0; border-bottom:1px solid var(--line-soft); } }

/* Explore is a dense launchpad, not an editorial collection page. */
.launchpad-shell { width:min(1040px,calc(100% - 28px)); margin:0 auto; padding:clamp(1.2rem,3vw,2.25rem) 0 2rem; }
.launchpad-panel { padding:clamp(.85rem,2vw,1.15rem); border:1px solid rgba(196,205,218,.13); border-radius:20px; background:linear-gradient(145deg,rgba(20,25,28,.94),rgba(7,9,11,.96)); box-shadow:var(--lift-2),inset 0 1px rgba(255,255,255,.04); }
.launchpad-head { display:grid; grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr); align-items:end; gap:1rem; }
.launchpad-title-row { display:flex; align-items:center; gap:.55rem; }
.launchpad-title-row h1 { font-size:clamp(1.45rem,3vw,2.05rem); line-height:1; }
.launchpad-title-row span { padding:.28rem .48rem; border:1px solid var(--line-soft); border-radius:999px; color:var(--dim); background:rgba(0,0,0,.25); font-family:var(--font-mono); font-size:.62rem; }
.launchpad-intro>p { margin-top:.55rem; max-width:38ch; color:var(--steel); font-size:.78rem; line-height:1.45; }
.launchpad-tools { display:grid; justify-items:end; gap:.55rem; min-width:0; }
.sort-segments { display:flex; max-width:100%; overflow-x:auto; padding:3px; border:1px solid var(--line-soft); border-radius:12px; background:rgba(0,0,0,.28); scrollbar-width:none; }
.sort-segments::-webkit-scrollbar { display:none; }
.sort-segments button { min-height:44px; padding:.3rem .68rem; border:0; border-radius:9px; color:var(--steel); background:transparent; font-size:.7rem; white-space:nowrap; cursor:pointer; }
.sort-segments button[aria-pressed="true"] { color:var(--ivory); background:linear-gradient(135deg,rgba(130,227,179,.18),rgba(196,205,218,.08)); box-shadow:inset 0 1px rgba(255,255,255,.07); }
.sort-segments button:disabled { opacity:.38; cursor:not-allowed; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.launchpad-search { width:min(100%,290px); }
.launchpad-search input { width:100%; min-height:44px; padding:.55rem .72rem; border:1px solid rgba(196,205,218,.18); border-radius:10px; color:var(--ivory); background:rgba(0,0,0,.27); font-size:.75rem; }
.launchpad-search input::placeholder { color:var(--steel); }
.launchpad-truth { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .8rem; margin:1rem 0 .8rem; padding:.6rem .65rem; border-block:1px solid rgba(196,205,218,.12); color:var(--steel); font-size:.7rem; }
.launchpad-truth strong { color:var(--emerald-bright); font-family:var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
.launchpad-truth [data-result-detail] { margin-left:auto; }
.launchpad-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.65rem; }
.launchpad-card { position:relative; min-width:0; overflow:hidden; border:1px solid rgba(196,205,218,.11); border-radius:13px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.26) 22%,rgba(130,227,179,.32) 50%,rgba(255,255,255,.26) 78%,transparent) top left/100% 1px no-repeat,linear-gradient(155deg,rgba(24,29,32,.9),rgba(8,10,12,.96)); transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease); }

/* Card depth, the way production gets it: a rim light along the top edge and a
   grain layer ON the surface, not only on the page. A flat fill with one drop
   shadow reads as a rectangle; these two make it read as a material.
   Both are inert -- no data, no state, nothing that moves on its own. */
.launchpad-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background-image: var(--grain);
  opacity: .07; mix-blend-mode: overlay;
}
/* The rim light lives in the card's own background stack, NOT in ::after.
   ::after already belongs to the hover light-pass below, and a second
   declaration for it would have quietly won or lost depending on order --
   the same fight that had the mascot moving in a flat line. */

.launchpad-card::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; opacity:0; background:linear-gradient(125deg,transparent 18%,rgba(255,255,255,.07) 48%,rgba(130,227,179,.045) 54%,transparent 78%); transform:translateX(-115%); }
.ready .launchpad-card { animation:premiumCardIn .72s var(--ease) both; }
.ready .launchpad-card:nth-child(2) { animation-delay:.07s; }
.ready .launchpad-card:nth-child(3) { animation-delay:.14s; }
.ready .launchpad-card:nth-child(4) { animation-delay:.21s; }
.ready .launchpad-card:nth-child(5) { animation-delay:.28s; }
.launchpad-card:hover { transform:translateY(-3px); border-color:rgba(130,227,179,.28); box-shadow:0 16px 35px rgba(0,0,0,.32),0 0 22px rgba(70,200,140,.07); }
.launchpad-card:hover::after { opacity:1; animation:cardLightPass 1.05s var(--ease) both; }
.launchpad-card-link { position:absolute; inset:0; z-index:1; }
.launchpad-media { position:relative; aspect-ratio:1; overflow:hidden; border-bottom:1px solid var(--line-soft); background:#080b0c; }
.launchpad-media .token-art { width:100%; height:100%; aspect-ratio:1; border:0; border-radius:0; }
.launchpad-media .token-art small { left:.55rem; bottom:.45rem; max-width:calc(100% - 1.1rem); font-size:.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.protocol-badge { position:absolute; z-index:3; left:.45rem; top:.45rem; padding:.18rem .38rem; border:1px solid rgba(130,227,179,.34); border-radius:6px; color:var(--emerald-bright); background:rgba(5,11,9,.86); font-family:var(--font-mono); font-size:.53rem; font-weight:800; }
.launchpad-card-body { display:grid; gap:.25rem; padding:.58rem; }
.launchpad-card-body h3 { min-width:0; font-family:var(--font-body); font-size:.78rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.launchpad-card-body h3 a { position:relative; z-index:2; color:var(--ivory); text-decoration:none; }
.launchpad-symbol,.launchpad-deployer { min-width:0; color:var(--dim); font-size:.59rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.launchpad-mcap { min-height:1.1rem; color:var(--silver); font-size:.65rem; }
.launchpad-mcap strong { font-weight:650; }
.launchpad-progress { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.3rem; }
.launchpad-progress span { grid-column:2; grid-row:1; color:var(--dim); font-family:var(--font-mono); font-size:.52rem; }
.launchpad-progress progress { grid-column:1/-1; grid-row:2; width:100%; height:3px; border:0; accent-color:var(--emerald); }
.launchpad-bottom { display:flex; align-items:center; justify-content:space-between; gap:.3rem; margin-top:.1rem; }
.launchpad-bottom button { position:relative; z-index:3; display:flex; align-items:center; gap:.2rem; min-width:0; min-height:44px; max-width:70%; padding:.45rem 0; border:0; color:var(--dim); background:transparent; font-family:var(--font-mono); font-size:.51rem; cursor:pointer; }
.launchpad-bottom button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.launchpad-bottom button i { color:var(--emerald-bright); font-style:normal; }
.launchpad-bottom time { color:var(--emerald-bright); font-family:var(--font-mono); font-size:.52rem; white-space:nowrap; }
@media (max-width:900px) { .launchpad-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:720px) { .launchpad-head { grid-template-columns:1fr; align-items:start; } .launchpad-tools { justify-items:stretch; } .launchpad-search { width:100%; } .launchpad-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .launchpad-truth [data-result-detail] { margin-left:0; width:100%; } }
@media (max-width:560px) { .launchpad-shell { width:min(100% - 20px,900px); padding-top:.8rem; } .launchpad-panel { padding:.7rem; border-radius:15px; } .launchpad-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; } .sort-segments button { min-height:44px; padding-inline:.62rem; } .launchpad-card-body h3 { font-size:.82rem; } .launchpad-symbol,.launchpad-deployer { font-size:.68rem; } .launchpad-mcap { font-size:.7rem; } .launchpad-progress { font-size:.65rem; } .launchpad-bottom button,.launchpad-bottom time { font-size:.62rem; } .launchpad-media .token-art small { font-size:.6rem; } .protocol-badge { font-size:.6rem; } }
.launch-title { display:flex; justify-content:space-between; align-items:flex-start; gap:.7rem; }
.token-card h3 { font-size:1.18rem; }
.token-card .go { color:var(--emerald-bright); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-decoration:none; white-space:nowrap; }
.deployer { color:var(--dim); font-size:.76rem; }
.deployer a { color:var(--silver); }
.ca-copy { min-height:44px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .7rem; border:1px solid var(--line-soft); border-radius:9px; color:var(--silver); background:rgba(0,0,0,.22); cursor:pointer; }
.ca-copy [data-copy-label] { color:var(--emerald); font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; }
.ca-copy.copied { border-color:var(--emerald); box-shadow:0 0 0 3px rgba(70,200,140,.1); }
.curve-progress { display:grid; gap:.38rem; }
.curve-progress > div { display:flex; justify-content:space-between; color:var(--steel); font-size:.7rem; }
.curve-progress progress,.identity-curve progress { width:100%; height:7px; border:0; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.07); }
.curve-progress progress::-webkit-progress-bar,.identity-curve progress::-webkit-progress-bar { background:rgba(255,255,255,.07); }
.curve-progress progress::-webkit-progress-value,.identity-curve progress::-webkit-progress-value { background:linear-gradient(90deg,var(--emerald-deep),var(--emerald-bright)); }
.curve-progress progress::-moz-progress-bar,.identity-curve progress::-moz-progress-bar { background:linear-gradient(90deg,var(--emerald-deep),var(--emerald-bright)); }
.launch-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.35rem; color:var(--dim); font-size:.67rem; border-top:1px solid var(--line-soft); padding-top:.65rem; }

/* Availability / unsupported blocks — these must look deliberate, not broken. */
.note {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 0.9rem 1rem; color: var(--silver); font-size: 0.92rem;
  background: rgba(255,255,255,0.02);
}
.note strong { display: block; color: var(--ivory); font-weight: 600; margin-bottom: 0.2rem; }

/* --------------------------------------------------------------------------
   Token page
   -------------------------------------------------------------------------- */
.token-hero { width: var(--shell); margin-inline: auto; padding: clamp(2.4rem, 6vw, 4rem) 0 1.5rem; display: grid; gap: 1.1rem; justify-items: start; }
.inline-links { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.text-link { color: var(--silver-bright); text-decoration-color: var(--line); text-underline-offset: 3px; }
.text-link:hover { color: var(--emerald-bright); }

/*
 * The evidence link is the hardest thing on the page to tap, on the page whose
 * entire purpose is "check this yourself".
 *
 * Measured on a 375px viewport: the `tx` links in the curve ledger were 29px
 * wide by 44px tall -- tall enough, narrow enough to miss. Fourteen of them on
 * one token page. The width comes from the text, so the fix is padding rather
 * than a fixed size: the target grows, the type does not move, and a longer
 * label is unaffected.
 *
 * Only inside a ledger row. A `.text-link` in a sentence must stay inline, and
 * padding a link in running prose would push the line apart.
 */
.market-trade .text-link,
.fee-claim .text-link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: .35rem;
  margin-inline: -.35rem;
}
.inspect-grid { display:grid; gap:1.2rem; }
@media (min-width:900px) { .inspect-grid { grid-template-columns:1.05fr .95fr; align-items:start; } }
.token-dossier { gap:clamp(1.25rem,2.5vw,2rem); }
.token-dossier .dossier-card { position:relative; display:grid; gap:1.35rem; padding:clamp(1.25rem,2.8vw,1.9rem); overflow:hidden; background:radial-gradient(circle at 100% 0,rgba(70,200,140,.07),transparent 28%),linear-gradient(150deg,rgba(21,26,29,.97),rgba(8,10,12,.99)); }
.token-dossier .dossier-card::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px rgba(255,255,255,.045); }
.dossier-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.dossier-head h2 { max-width:12ch; margin-top:.35rem; font-size:clamp(1.9rem,3.2vw,2.65rem); line-height:1.02; }
.dossier-chip { flex:0 0 auto; padding:.3rem .58rem; border:1px solid var(--line); border-radius:999px; color:var(--silver); font-family:var(--font-mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; }
.dossier-chip.state { border-color:rgba(130,227,179,.28); color:var(--emerald-bright); background:rgba(70,200,140,.05); }
.dossier-intro { max-width:58ch; color:var(--steel); font-size:.92rem; line-height:1.58; }
.dossier-group { display:grid; gap:.75rem; padding-top:1.15rem; border-top:1px solid var(--line-soft); }
.dossier-group-head { display:flex; align-items:center; gap:.65rem; }
.dossier-group-head>span { color:var(--emerald-bright); font-family:var(--font-mono); font-size:.62rem; }
.dossier-group-head h3 { margin:0; font-size:1.15rem; }
.dossier-rows { display:grid; gap:.15rem; margin:0; }
.dossier-row { display:grid; grid-template-columns:28px minmax(0,1fr); gap:.6rem; padding:.62rem 0; border-bottom:1px solid rgba(196,205,218,.07); }
.dossier-row:last-child { border-bottom:0; }
.dossier-index { padding-top:.12rem; color:rgba(130,227,179,.5); font-family:var(--font-mono); font-size:.6rem; }
.dossier-row>div { min-width:0; display:grid; grid-template-columns:minmax(105px,.75fr) minmax(0,1.25fr); align-items:baseline; gap:.8rem; }
.dossier-row dt { color:var(--steel); font-size:.78rem; }
.dossier-row dd { min-width:0; margin:0; color:var(--silver-bright); font-family:var(--font-mono); font-size:.78rem; text-align:right; overflow-wrap:anywhere; }
.dossier-row dd a { color:inherit; text-underline-offset:3px; }
.mechanics-state { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1rem; border:1px solid rgba(130,227,179,.18); border-radius:13px; background:linear-gradient(105deg,rgba(70,200,140,.075),rgba(0,0,0,.12)); }
.mechanics-state>div { display:grid; gap:.2rem; }
.mechanics-state span,.reserve-metric-grid span,.observation-grid span,.curve-state-row>span { color:var(--steel); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.mechanics-state strong { color:var(--emerald-bright); font-size:1.2rem; }
.mechanics-state p { max-width:25ch; color:var(--dim); font-size:.72rem; text-align:right; }
.reserve-metric-grid,.observation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.reserve-metric-grid article,.observation-grid article { min-width:0; display:grid; gap:.3rem; padding:.9rem; border:1px solid var(--line-soft); border-radius:11px; background:rgba(0,0,0,.17); }
.reserve-metric-grid strong,.observation-grid strong { color:var(--ivory); font-family:var(--font-mono); font-size:clamp(.82rem,1.4vw,1rem); overflow-wrap:anywhere; }
.reserve-metric-grid small,.observation-grid small,.curve-state-row small { color:var(--dim); line-height:1.35; }
.curve-state-row { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.2rem .8rem; margin-top:.65rem; padding:.7rem .8rem; border-left:2px solid var(--emerald); background:linear-gradient(90deg,rgba(70,200,140,.045),transparent); }
.curve-state-row strong { justify-self:end; color:var(--emerald-bright); font-family:var(--font-mono); }
.curve-state-row small { grid-column:1/-1; }
.observation-note { margin-top:.65rem; color:var(--steel); font-size:.76rem; line-height:1.5; }
.verification-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.verification-grid article { display:grid; gap:.3rem; padding:.85rem; border:1px solid var(--line-soft); border-radius:11px; background:rgba(0,0,0,.16); }
.verification-grid span { color:var(--steel); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; }
.verification-grid strong { color:var(--silver-bright); font-family:var(--font-mono); font-size:.78rem; overflow-wrap:anywhere; }
.verification-group>p { color:var(--steel); font-size:.78rem; line-height:1.5; }
.fee-status { display:grid; gap:.65rem; padding:1rem; border:1px solid rgba(224,179,104,.2); border-radius:12px; background:linear-gradient(120deg,rgba(224,179,104,.045),rgba(0,0,0,.12)); }
.fee-status .state-badge { width:max-content; }
.fee-status p { color:var(--steel); font-size:.8rem; line-height:1.5; }
@media (min-width:900px) { .token-dossier { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
@media (max-width:600px) { .dossier-head { display:grid; } .dossier-head h2 { max-width:none; } .dossier-chip { justify-self:start; font-size:.68rem; } .dossier-row { padding:.52rem 0; } .dossier-index { font-size:.68rem; } .dossier-row>div { grid-template-columns:1fr; gap:.22rem; } .dossier-row dt,.dossier-row dd { font-size:.82rem; text-align:left; } .mechanics-state { align-items:flex-start; flex-direction:column; } .mechanics-state p { text-align:left; } .mechanics-state span,.reserve-metric-grid span,.observation-grid span,.curve-state-row>span { font-size:.68rem; } .reserve-metric-grid,.observation-grid,.verification-grid { grid-template-columns:1fr; } }
.token-identity-strip { width:var(--shell); margin-inline:auto; display:grid; grid-template-columns:88px minmax(0,1fr) minmax(220px,.42fr); gap:1rem; align-items:center; padding:.85rem 0; }
.token-identity-strip .token-art { width:88px; aspect-ratio:1; border:1px solid var(--line-soft); border-radius:14px; }
/* 92%, matching the card: the size formula is calibrated against that share of
   the box, and at 82% a nine-character ticker clipped in an 82px square. */
.token-identity-strip .art-symbol { max-width:92%; letter-spacing:-.07em; }
.token-identity-main { min-width:0; display:grid; gap:.35rem; }
.token-identity-main h1 { font-size:clamp(2rem,4vw,3.35rem); line-height:.92; }
.identity-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.45rem; }
.identity-actions .ca-copy { width:auto; min-width:210px; }
.identity-actions .btn { min-height:44px; padding:.55rem .8rem; }
.identity-curve { display:grid; gap:.35rem; padding:.75rem .9rem; border:1px solid var(--line-soft); border-radius:12px; background:rgba(0,0,0,.2); }
.identity-curve > span,.identity-curve small { color:var(--dim); font-size:.72rem; }
.identity-curve strong { font-family:var(--font-mono); font-size:1.5rem; color:var(--emerald-bright); }
.token-detail-flow { display:grid; gap:1rem; padding-top:1rem; }
main[data-token-address] > .status-strip { min-height:38px; padding:.45rem .75rem; border-radius:9px; font-size:.72rem; gap:.35rem .7rem; }
main[data-token-address] > .status-strip .gate { flex:1 1 28ch; white-space:normal; overflow:visible; max-width:none; }
@media (max-width:800px) { .token-identity-strip { grid-template-columns:84px minmax(0,1fr); } .token-identity-strip .token-art { width:84px; } .identity-curve { grid-column:1 / -1; } }
@media (max-width:520px) { .token-identity-strip { grid-template-columns:64px minmax(0,1fr); gap:.8rem; } .token-identity-strip .token-art { width:64px; } .token-identity-strip .token-art small { display:none; } .token-identity-strip .art-symbol { font-size:.74rem; max-width:90%; } .token-identity-main h1 { font-size:1.8rem; } .identity-actions { grid-column:1 / -1; } .identity-actions .ca-copy { width:100%; } main[data-token-address] > .status-strip .gate { display:none; } }

/* Exact CurveBuy/CurveSell accounting flow — deliberately not market-chart UI. */
.curve-flow { position:relative; display:grid; gap:1.15rem; margin-top:1.2rem; padding:clamp(1.15rem,3vw,2rem); scroll-margin-top:5rem; overflow:hidden; background:radial-gradient(circle at 87% 8%,rgba(70,200,140,.11),transparent 28%),linear-gradient(155deg,rgba(19,25,28,.98),rgba(7,9,11,.99)); }
.curve-flow::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 15%,rgba(255,255,255,.035) 48%,transparent 75%); transform:translateX(-110%); animation:terminalScan 14s ease-in-out infinite; }
.curve-flow-head,.flow-list-head { position:relative; display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem; }
.curve-flow-head>div:first-child { max-width:650px; }
.flow-intro { max-width:64ch; margin-top:.55rem; color:var(--steel); line-height:1.55; }
.flow-summary { min-width:min(100%,260px); display:grid; justify-items:end; gap:.2rem; padding:.85rem 1rem; border:1px solid rgba(130,227,179,.24); border-radius:14px; background:rgba(5,9,9,.66); box-shadow:inset 0 1px rgba(255,255,255,.045),0 16px 34px rgba(0,0,0,.2); }
.flow-summary.outflow { border-color:rgba(221,128,128,.3); }
.flow-summary-label { color:var(--emerald-bright); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.flow-summary.outflow .flow-summary-label { color:var(--rust); }
.flow-summary .mono { max-width:100%; color:var(--ivory); font-size:clamp(.9rem,2.1vw,1.45rem); font-weight:700; overflow-wrap:anywhere; }
.flow-not-price { padding:.22rem .55rem; border:1px solid rgba(224,179,104,.42); border-radius:999px; color:var(--amber); font-family:var(--font-mono); font-size:.58rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.flow-source { width:max-content; max-width:100%; padding:.3rem .55rem; border:1px solid rgba(224,179,104,.2); border-radius:999px; color:var(--amber); background:rgba(224,179,104,.045); font-family:var(--font-mono); font-size:.68rem; }
.flow-source.complete { border-color:rgba(130,227,179,.2); color:var(--emerald-bright); background:rgba(70,200,140,.045); }
.flow-metric-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid var(--line-soft); border-radius:15px; background:rgba(0,0,0,.18); }
.flow-metric-rail article { min-width:0; display:grid; gap:.32rem; padding:1rem 1.1rem; border-right:1px solid var(--line-soft); }
.flow-metric-rail article:last-child { border-right:0; }
.flow-metric-rail span,.flow-plot-head,.flow-legend { color:var(--dim); font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.flow-metric-rail strong { color:var(--emerald-bright); font-family:var(--font-mono); font-size:clamp(.9rem,1.7vw,1.2rem); overflow-wrap:anywhere; }
.flow-metric-rail [data-flow-sell-outflow] strong,.flow-metric-rail .outflow strong { color:var(--rust); }
.flow-metric-rail article.net { background:linear-gradient(135deg,rgba(70,200,140,.08),rgba(0,0,0,.08)); }
.flow-metric-rail small { color:var(--dim); line-height:1.35; }
.flow-ledger-note { display:flex; align-items:center; gap:.75rem; padding:.75rem .85rem; border-left:2px solid var(--silver); color:var(--steel); background:linear-gradient(90deg,rgba(196,205,218,.055),transparent); font-size:.76rem; }
.flow-ledger-note>span { color:var(--emerald-bright); }
.flow-ledger-note strong { display:block; color:var(--ivory); font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.flow-plot { position:relative; padding:3rem .5rem 2.7rem 4.9rem; border:1px solid rgba(196,205,218,.13); border-radius:16px; overflow:hidden; background:radial-gradient(circle at 80% 10%,rgba(70,200,140,.07),transparent 35%),rgba(0,0,0,.24); box-shadow:inset 0 1px rgba(255,255,255,.035); }
.flow-plot-head { position:absolute; left:1rem; right:1rem; top:.85rem; display:flex; justify-content:space-between; gap:1rem; }
.flow-chart { width:100%; height:auto; min-height:210px; overflow:visible; }
.flow-scale { position:absolute; left:.75rem; color:var(--dim); font-family:var(--font-mono); font-size:.66rem; }
.flow-scale-max { top:4rem; }
.flow-scale-zero { bottom:4.3rem; }
.flow-grid-line { stroke:rgba(196,205,218,.08); stroke-width:1; stroke-dasharray:2 8; }
.flow-zero { stroke:var(--steel); stroke-width:1.25; stroke-dasharray:5 7; }
.flow-line-glow { fill:none; stroke:rgba(130,227,179,.2); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; filter:blur(4px); }
.flow-line { fill:none; stroke:var(--silver-bright); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 7px rgba(196,205,218,.32)); stroke-dasharray:1600; stroke-dashoffset:1600; animation:flowLineIn 1.8s var(--ease) forwards; }
.flow-marker circle { stroke-width:3; fill:var(--ink-2); filter:drop-shadow(0 0 6px rgba(0,0,0,.8)); }
.flow-marker.buy circle { stroke:var(--emerald-bright); }
.flow-marker.sell circle { stroke:var(--rust); }
.flow-marker text { fill:var(--silver-bright); font-family:var(--font-mono); font-size:18px; font-weight:700; paint-order:stroke; stroke:rgba(5,8,9,.9); stroke-width:3px; }
.flow-legend { position:absolute; left:1rem; right:1rem; bottom:.8rem; display:flex; justify-content:flex-end; gap:1rem; }
.flow-legend .buy { color:var(--emerald-bright); }
.flow-legend .sell { color:var(--rust); }
.flow-list-head { padding-top:.55rem; }
.flow-list-head h3 { margin-top:.15rem; }
.flow-events { list-style:none; display:grid; gap:.45rem; margin:0; padding:0; }
.flow-event { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9rem; padding:.85rem 1rem; border:1px solid var(--line-soft); border-radius:11px; background:rgba(0,0,0,.16); transition:transform .25s var(--ease),border-color .25s ease,background .25s ease; }
.flow-event:hover { transform:translateX(4px); border-color:rgba(130,227,179,.22); background:rgba(70,200,140,.035); }
.flow-event > span:nth-child(2) { display:grid; min-width:0; gap:.12rem; }
.flow-event strong { font-family:var(--font-mono); font-size:.84rem; }
.flow-event small { color:var(--steel); font-size:.75rem; line-height:1.45; overflow-wrap:anywhere; }
.flow-event > a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.flow-kind { min-width:3.6rem; padding:.26rem .5rem; border:1px solid currentColor; border-radius:999px; font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-align:center; }
.flow-event.buy .flow-kind { color:var(--emerald-bright); }
.flow-event.sell .flow-kind { color:var(--rust); }
@keyframes flowLineIn { to { stroke-dashoffset:0; } }
@media (max-width:700px) { .flow-metric-rail { grid-template-columns:1fr; } .flow-metric-rail article { border-right:0; border-bottom:1px solid var(--line-soft); } .flow-metric-rail article:last-child { border-bottom:0; } }
@media (max-width:520px) { .flow-summary { width:100%; justify-items:start; } .flow-summary .mono { font-size:.9rem; } .flow-plot { padding-left:4rem; } .flow-plot-head span:last-child { display:none; } .flow-scale { color:var(--steel); font-size:.78rem; font-weight:700; } .flow-scale-max { top:4.1rem; } .flow-chart { min-height:240px; } .flow-marker text { font-size:30px; stroke-width:5px; } .flow-marker circle { r:14px; stroke-width:5px; } .flow-event { grid-template-columns:1fr auto; padding:.85rem; } .flow-event .flow-kind { grid-column:1; grid-row:1; justify-self:start; } .flow-event > span:nth-child(2) { grid-column:1/-1; grid-row:2; } .flow-event > a { grid-column:2; grid-row:1; justify-self:end; } .flow-legend { justify-content:flex-start; gap:.8rem; color:var(--steel); font-size:.74rem; font-weight:700; letter-spacing:.02em; } }

/* --------------------------------------------------------------------------
   Quant market terminal + What-if laboratory
   -------------------------------------------------------------------------- */
.market-terminal,.what-if-lab { display:grid; gap:1.25rem; margin-top:1.2rem; background:linear-gradient(145deg,rgba(14,18,24,.96),rgba(5,8,9,.98)); border-color:rgba(130,227,179,.16); }
.token-workstation { margin-top:0; gap:.75rem; padding:1rem; }
.token-workstation .terminal-head { align-items:center; }
.token-workstation .terminal-head h2 { font-size:1.65rem; }
.token-workstation .market-metrics article { padding:.65rem .75rem; }
.token-workstation .market-metrics small { display:none; }
.token-workstation .terminal-source { padding:.3rem .55rem; font-size:.6rem; }
.market-terminal::before,.what-if-lab::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 12%,rgba(130,227,179,.035) 48%,transparent 72%); transform:translateX(-100%); animation:terminalScan 12s ease-in-out infinite; }
.terminal-head,.what-if-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem; }
.terminal-source,.read-only-badge { display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .75rem; border:1px solid var(--line); border-radius:999px; color:var(--steel); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; }
.terminal-source-dot { width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px rgba(224,179,104,.42); }
[data-market-state="complete"] .terminal-source-dot { background:var(--emerald); box-shadow:0 0 12px rgba(70,200,140,.65); }
.read-only-badge { color:var(--emerald-bright); border-color:rgba(70,200,140,.35); background:rgba(70,200,140,.06); }
.market-metrics,.simulator-results { display:grid; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:rgba(0,0,0,.2); }
.market-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); }
.simulator-results { grid-template-columns:repeat(4,minmax(0,1fr)); }
.market-metrics article,.simulator-results article { min-width:0; display:grid; gap:.25rem; padding:1rem; border-right:1px solid var(--line-soft); }
.market-metrics article:last-child,.simulator-results article:last-child { border-right:0; }
.market-metrics span,.simulator-results span { color:var(--dim); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.market-metrics strong,.simulator-results strong { color:var(--silver-bright); font-family:var(--font-mono); font-size:clamp(1rem,2.5vw,1.35rem); overflow-wrap:anywhere; }
.market-metrics small,.simulator-results small { color:var(--dim); }
.workstation-grid { display:grid; gap:1rem; min-width:0; }
@media (min-width:980px) { .workstation-grid { grid-template-columns:minmax(0,1.25fr) minmax(390px,.75fr); } }
.gecko-frame { min-width:0; display:grid; gap:.45rem; }
.gecko-frame p { color:var(--dim); font-size:.7rem; }
.activity-terminal { min-width:0; height:367px; display:flex; flex-direction:column; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:rgba(0,0,0,.22); }
.activity-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; padding:.5rem; border-bottom:1px solid var(--line-soft); }
.activity-tabs button { min-height:44px; border:0; border-radius:9px; color:var(--steel); background:transparent; cursor:pointer; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.activity-tabs button[aria-selected="true"] { color:#04120b; background:var(--metal-emerald); }
.activity-pane { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; }
.activity-pane[hidden] { display:none; }
.activity-pane ol { list-style:none; margin:0; padding:0 .8rem; }
.activity-pane .market-trade { min-height:58px; }
.dense-activity-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.25rem .65rem; align-items:center; padding:.75rem 0; border-bottom:1px solid var(--line-soft); }
.dense-activity-row > strong,.dense-activity-row > small { grid-column:2; }
.dense-activity-row .rank { color:var(--dim); font-family:var(--font-mono); font-size:.65rem; }
.dense-activity-row strong { color:var(--silver-bright); font-family:var(--font-mono); font-size:.78rem; overflow-wrap:anywhere; }
.dense-activity-row small { color:var(--dim); }
.dense-activity-row.transfer { grid-template-columns:auto minmax(0,1fr) auto; }
.dense-activity-row.transfer > strong,.dense-activity-row.transfer > small { grid-column:2; }
.dense-activity-row.transfer > a { grid-column:3; grid-row:1 / span 2; }
@media (max-width:979px) { .activity-terminal { height:auto; min-height:0; } .activity-pane { overflow:visible; } }
@media (max-width:560px) { .activity-tabs button { font-size:.68rem; padding-inline:.2rem; } .activity-pane ol { padding-inline:.65rem; } .token-workstation .market-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .token-workstation .market-metrics article:last-child { grid-column:1 / -1; } }
.market-chart-shell { position:relative; min-height:320px; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:linear-gradient(180deg,rgba(70,200,140,.035),rgba(0,0,0,.2)); }
.gecko-chart-shell { height:clamp(390px,46vw,560px); }
.gecko-chart-shell iframe { display:block; width:100%; height:100%; border:0; color-scheme:dark; }
@media (max-width:600px) { .gecko-chart-shell { height:430px; } }
.market-chart { position:relative; width:100%; height:auto; min-height:280px; overflow:visible; }
.market-chart[hidden], .simulator-results[hidden], .simulator-audit[hidden] { display:none; }
.market-trades { min-width:0; padding:.9rem; border:1px solid var(--line-soft); border-radius:14px; background:rgba(0,0,0,.18); }
.flow-event.transfer .flow-kind { color:var(--silver-bright); }
.market-trades ol { list-style:none; margin:.7rem 0 0; padding:0; }
.market-trade { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.7rem 0; border-top:1px solid var(--line-soft); }
.market-trade > span:nth-child(2) { display:grid; min-width:0; }
.market-trade small { color:var(--dim); }
.market-kind { font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.1em; }
.market-trade.buy .market-kind { color:var(--emerald-bright); }
.market-trade.sell .market-kind { color:var(--rust); }
.market-empty { color:var(--dim); padding:1rem 0; }
.terminal-disclosure,.simulator-boundary { color:var(--steel); font-size:.82rem; border-top:1px solid var(--line-soft); padding-top:.8rem; }
.simulator-controls { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.7rem; align-items:end; }
.simulator-controls label { display:grid; gap:.45rem; color:var(--steel); font-size:.8rem; }
.simulator-controls label > span { font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.simulator-controls input { width:100%; min-height:48px; border:1px solid var(--line); border-radius:10px; padding:.7rem 1rem; color:var(--ivory); background:rgba(0,0,0,.35); font:inherit; font-family:var(--font-mono); outline:none; }
.simulator-controls input:focus-visible { border-color:rgba(70,200,140,.7); box-shadow:0 0 0 3px rgba(70,200,140,.12); }
.simulator-state { display:grid; gap:.2rem; padding:1rem; border:1px dashed var(--line); border-radius:12px; background:rgba(255,255,255,.018); }
.simulator-state p { color:var(--steel); }
.simulator-audit { display:grid; gap:.8rem; padding:1rem; border:1px solid var(--line-soft); border-radius:12px; background:rgba(0,0,0,.18); }
.simulator-audit .fact dd { max-width:68ch; }
[data-simulator-state="complete"] .simulator-state,[data-simulator-state="partial"] .simulator-state { border-color:rgba(70,200,140,.35); }
[data-simulator-state="error"] .simulator-state { border-color:rgba(221,128,128,.38); }
@keyframes terminalScan { 0%,70%,100% { transform:translateX(-110%); } 85% { transform:translateX(110%); } }
@keyframes marketLineIn { to { stroke-dashoffset:0; } }
@media (max-width:760px) { .market-metrics,.simulator-results { grid-template-columns:repeat(2,minmax(0,1fr)); } .market-metrics article:nth-child(2),.simulator-results article:nth-child(2) { border-right:0; } .market-metrics article:nth-child(-n+2),.simulator-results article:nth-child(-n+2) { border-bottom:1px solid var(--line-soft); } .simulator-controls { grid-template-columns:1fr; } .simulator-controls .btn { width:100%; justify-content:center; } }

/* --------------------------------------------------------------------------
   Account command center — zero invented user data
   -------------------------------------------------------------------------- */
.account-shell { width: var(--shell); margin-inline: auto; padding: clamp(2.5rem, 7vw, 5rem) 0; display: grid; gap: 1.2rem; }
.account-shell .panel { background: linear-gradient(180deg, rgba(22,27,32,0.98), rgba(10,13,17,0.98)); }
.account-connection { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(201,145,71,0.34); border-radius: 16px; background: linear-gradient(110deg, rgba(35,29,18,0.98), rgba(14,16,18,0.98)); }
.account-connection p { color: var(--silver); font-size: 0.9rem; max-width: 72ch; }
.account-connection strong, .signed-out-label { display: block; }
.signed-out-label { color: var(--amber); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.connection-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; }
.account-lock { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--amber); border-radius: 50%; color: var(--amber); }
.account-nav-wrap { position: relative; min-width: 0; }
.account-nav { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.35rem; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(0,0,0,0.22); scrollbar-width: none; }
.account-nav::-webkit-scrollbar { display: none; }
.account-nav-cue { display: none; }
.account-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 999px; color: var(--steel); text-decoration: none; white-space: nowrap; }
.account-nav a:hover, .account-nav a[aria-current="page"] { color: var(--ivory); background: rgba(255,255,255,0.07); }
.account-grid { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .account-grid { grid-template-columns: minmax(0,1.55fr) minmax(280px,0.75fr); align-items: start; } }
.account-primary, .account-side, .account-module { display: grid; gap: 1.2rem; }
.account-module,.panel.account-primary,.panel.account-side { position:relative; isolation:isolate; overflow:hidden; }
.account-module::after,.panel.account-primary::after,.panel.account-side::after { content:''; position:absolute; z-index:-1; width:190px; height:190px; right:-115px; bottom:-135px; border-radius:50%; background:radial-gradient(circle,rgba(70,200,140,.09),transparent 68%); opacity:.38; transition:transform .55s var(--ease),opacity .55s ease; }
.account-module:hover::after,.panel.account-primary:hover::after,.panel.account-side:hover::after { transform:scale(1.3) translate(-8px,-6px); opacity:.58; }
.account-stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
.account-stat { min-width: 0; display: grid; gap: 0.35rem; padding: 1rem; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(0,0,0,0.16); }
.account-stat p { color: var(--dim); font-size: 0.78rem; }
.account-stat strong { color: var(--silver-bright); font-family: var(--font-mono); font-size: clamp(1rem,2.5vw,1.25rem); overflow-wrap: anywhere; }
.account-stat span { color: var(--dim); font-size: 0.78rem; }
.account-status-list { list-style: none; display: grid; gap: 0.8rem; margin: 0; padding: 0; }
.account-status-list li { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 0.65rem; color: var(--silver); }
.panel.account-side .btn { width:max-content; max-width:100%; white-space:nowrap; }
.account-status-list span, .state-badge { padding: 0.25rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; }
.status-readonly { color: var(--emerald-bright); }
.state-badge { color: var(--amber); }
.status-disabled { color: var(--rust); }
.account-module-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.8rem; }
.account-empty, .wallet-address-shell { display: grid; gap: 0.65rem; padding: clamp(1rem,3vw,1.4rem); border: 1px dashed var(--line); border-radius: 14px; background: rgba(0,0,0,0.16); }
.account-launch-record { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.25rem 1rem; padding:.8rem 0; border-bottom:1px solid var(--line-soft); }
.account-launch-record p { color:var(--steel); font-size:.82rem; }
.account-launch-record a { grid-column:2; grid-row:1 / span 2; align-self:center; }
.account-empty p, .wallet-address-shell p, .account-actions p, .account-side p { color: var(--steel); }
.wallet-address-shell > span { color: var(--dim); font-size: 0.78rem; }
.wallet-address-shell > strong { font-family: var(--font-mono); overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.account-actions p { flex: 1 1 280px; font-size: 0.85rem; }
.btn-disabled, .btn:disabled { border-color: var(--line-soft); background: rgba(255,255,255,0.025); color: var(--dim); cursor: not-allowed; box-shadow: none; }
.security-list { display: grid; gap: 0.75rem; }
.security-list article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0.35rem 1rem; padding: 1rem 0; border-top: 1px solid var(--line-soft); }
.security-list article:first-child { border-top: 0; }
.security-list article p { color: var(--steel); font-size: 0.9rem; }
.security-list article span { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--amber); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; }
@media (max-width: 680px) {
  .account-connection { grid-template-columns: auto minmax(0,1fr); }
  .connection-actions { grid-column: 1 / -1; display: grid; width: 100%; }
  .account-connection .btn { width: 100%; justify-content: center; }
  .account-stats { grid-template-columns: 1fr; }
  .account-action-row .btn { flex: 1 1 100%; justify-content: center; }
  .security-list article { grid-template-columns: 1fr; }
  .security-list article span { grid-column: 1; grid-row: auto; }
  .account-nav-wrap { display: grid; gap: 0.3rem; }
  .account-nav-cue { display: block; justify-self: end; padding-right: 0.55rem; color: var(--emerald-bright); font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; pointer-events: none; }
}
@media (max-width: 400px) {
  .nav-inner { gap: 0.55rem; }
  .brand { gap: 0; }
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-links { gap: 0.75rem; font-size: 0.82rem; }
}

/* V5 account command center. */
.account-shell { width:min(1240px,calc(100% - 28px)); padding:clamp(1.2rem,3vw,2.5rem) 0; }
.account-command-shell { grid-template-columns:250px minmax(0,1fr); display:grid; min-height:760px; overflow:hidden; border:1px solid rgba(196,205,218,.14); border-radius:22px; background:linear-gradient(145deg,rgba(16,20,23,.97),rgba(5,7,9,.99)); box-shadow:0 34px 90px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.04); }
.account-sidebar { position:relative; display:flex; flex-direction:column; min-width:0; padding:1.1rem; border-right:1px solid var(--line-soft); background:linear-gradient(180deg,rgba(20,27,26,.96),rgba(7,10,11,.98)); }
.account-sidebar::after { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--emerald-bright),transparent); transform:translateX(-100%); animation:accountRailScan 7s ease-in-out infinite; }
.account-sidebar-brand { display:flex; align-items:center; gap:.7rem; min-height:58px; padding:.55rem; color:var(--ivory); text-decoration:none; }
.account-sidebar-brand img { filter:drop-shadow(0 0 12px rgba(70,200,140,.22)); }
.account-sidebar-brand span { display:grid; }
.account-sidebar-brand strong { letter-spacing:.14em; }
.account-sidebar-brand small { color:var(--dim); font-family:var(--font-mono); font-size:.58rem; text-transform:uppercase; }
.account-sidebar .account-nav-wrap { margin-top:1rem; }
.account-sidebar .account-nav { display:grid; gap:.3rem; overflow:visible; padding:0; border:0; border-radius:0; background:transparent; }
.account-sidebar .account-nav a { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.7rem; min-height:48px; padding:.7rem .75rem; border:1px solid transparent; border-radius:11px; }
.account-sidebar .account-nav a i { color:var(--dim); font-family:var(--font-mono); font-size:.58rem; font-style:normal; }
.account-sidebar .account-nav a>span { display:grid; gap:.08rem; }
.account-sidebar .account-nav a small { color:var(--dim); font-family:var(--font-mono); font-size:.52rem; font-weight:400; letter-spacing:.06em; text-transform:uppercase; }
.account-sidebar .account-nav a[aria-current="page"] { color:var(--ivory); border-color:rgba(130,227,179,.22); background:linear-gradient(90deg,rgba(70,200,140,.13),rgba(255,255,255,.025)); box-shadow:inset 3px 0 var(--emerald-bright); }
.account-sidebar-state { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.65rem; margin-top:auto; padding:.8rem; border:1px solid var(--line-soft); border-radius:12px; background:rgba(0,0,0,.2); }
.account-sidebar-state div { display:grid; }
.account-sidebar-state small { color:var(--dim); }
.account-sidebar-state strong { font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; }
.sidebar-explore { display:flex; align-items:center; justify-content:space-between; margin-top:.65rem; min-height:44px; padding:.65rem .75rem; color:var(--steel); text-decoration:none; font-size:.72rem; }
.sidebar-explore:hover { color:var(--ivory); }
.sidebar-explore i { color:var(--emerald-bright); font-style:normal; }
.account-workspace { min-width:0; display:grid; align-content:start; gap:1rem; padding:clamp(1rem,3vw,1.6rem); background-image:linear-gradient(rgba(196,205,218,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(196,205,218,.025) 1px,transparent 1px); background-size:42px 42px; }
.account-route-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:.5rem .2rem 1rem; border-bottom:1px solid var(--line-soft); }
.account-route-head h1 { margin:.18rem 0; font-size:clamp(2.2rem,5vw,4.4rem); line-height:.94; }
.account-route-head .lede { max-width:62ch; font-size:.86rem; }
.workspace-mode { display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .7rem; border:1px solid var(--line-soft); border-radius:999px; color:var(--dim); font-family:var(--font-mono); font-size:.62rem; white-space:nowrap; }
.workspace-mode i { width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px rgba(224,179,104,.45); }
.custody-boundary { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; overflow:hidden; padding:.9rem 1rem; border:1px solid rgba(224,179,104,.25); border-radius:14px; background:linear-gradient(105deg,rgba(38,29,15,.82),rgba(12,15,17,.95)); }
.custody-boundary::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 25%,rgba(224,179,104,.07),transparent 70%); transform:translateX(-110%); animation:terminalScan 11s ease-in-out infinite; }
.custody-boundary p { max-width:70ch; color:var(--steel); font-size:.78rem; }
.account-workspace-body { min-width:0; display:grid; gap:1rem; }
.account-workspace-body>.panel,.account-workspace-body .panel { border-color:rgba(196,205,218,.13); background:linear-gradient(150deg,rgba(22,27,31,.96),rgba(8,10,12,.98)); box-shadow:0 18px 45px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035); }
.account-stat { position:relative; overflow:hidden; min-height:130px; align-content:space-between; background:linear-gradient(145deg,rgba(24,30,34,.82),rgba(7,9,11,.94)); }
.account-stat::after { content:''; position:absolute; right:-35px; bottom:-50px; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle,rgba(70,200,140,.11),transparent 68%); }
.account-empty,.wallet-address-shell { min-height:190px; align-content:center; border-style:solid; border-color:rgba(196,205,218,.11); background:radial-gradient(circle at 85% 20%,rgba(70,200,140,.06),transparent 35%),rgba(0,0,0,.18); }
.security-list article { padding:1.15rem; border:1px solid var(--line-soft); border-radius:12px; background:rgba(0,0,0,.15); }
@keyframes accountRailScan { 0%,15% { transform:translateX(-100%); } 70%,100% { transform:translateX(100%); } }
@keyframes premiumCardIn { from { opacity:0; transform:translate3d(0,18px,0) scale(.975); filter:blur(4px); } to { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); } }
@keyframes cardLightPass { from { transform:translateX(-115%); } to { transform:translateX(115%); } }
@media (hover:hover) and (pointer:fine) {
  .launchpad-card:hover { transform:translateY(-7px) scale(1.012); border-color:rgba(130,227,179,.42); box-shadow:0 24px 52px rgba(0,0,0,.42),0 0 30px rgba(70,200,140,.1); }
  .product-pathways>a:hover { transform:translateY(-8px) rotateX(1deg); box-shadow:0 30px 65px rgba(0,0,0,.36),0 0 36px rgba(70,200,140,.08); }
  .account-sidebar .account-nav a:hover { transform:translateX(4px); }
}
@media (max-width:820px) { .account-command-shell { grid-template-columns:1fr; } .account-sidebar { border-right:0; border-bottom:1px solid var(--line-soft); padding:.7rem; } .account-sidebar-brand,.account-sidebar-state,.sidebar-explore { display:none; } .account-sidebar .account-nav-wrap { display:grid; gap:.25rem; margin:0; } .account-sidebar .account-nav-wrap::after { content:''; position:absolute; z-index:2; right:0; top:0; bottom:1.15rem; width:46px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(8,12,12,.96)); } .account-sidebar .account-nav { display:flex; overflow-x:auto; padding:.2rem 2.3rem .2rem .2rem; scroll-snap-type:x proximity; scrollbar-width:none; } .account-sidebar .account-nav a { flex:0 0 auto; min-width:132px; scroll-snap-align:start; } .account-nav-cue { display:block; justify-self:end; padding-right:.4rem; color:var(--emerald-bright); font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; } .account-workspace { padding:1rem; } .account-route-head { align-items:flex-start; flex-direction:column; } .custody-boundary { grid-template-columns:auto minmax(0,1fr); } .custody-boundary .connection-actions { grid-column:1/-1; display:grid; width:100%; } }
@media (max-width:520px) { .panel.account-side .btn { width:100%; white-space:normal; } .account-shell { width:min(100% - 16px,1240px); padding-top:.7rem; } .account-command-shell { border-radius:16px; min-height:0; } .account-route-head h1 { font-size:2.6rem; } .account-workspace { padding:.75rem; } .account-primary { padding:1rem; } .account-primary .lede { font-size:.82rem; } .account-stats { display:flex; overflow-x:auto; gap:.6rem; padding-bottom:.35rem; scroll-snap-type:x mandatory; scrollbar-width:none; } .account-stats .account-stat { flex:0 0 215px; min-height:120px; scroll-snap-align:start; } .account-side { padding:1rem; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line-soft); margin-top: clamp(3rem, 8vw, 5rem); }
.footer-inner { width: var(--shell); margin-inline: auto; padding: 2.4rem 0 3rem; display: grid; gap: 1.1rem; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.9rem; }
.footer-links a { color: var(--steel); text-decoration: none; }
.footer-links a:hover { color: var(--ivory); }
.footer-note { color: var(--steel); font-size: 0.84rem; line-height:1.65; max-width: 76ch; }

/* --------------------------------------------------------------------------
   Touch targets.

   Measured at 1280 and again at 390: the inline explorer links inside fact
   rows, and the footer links, came out around 19px tall. That is fine for a
   mouse and too small for a thumb, so on coarse pointers they get real
   vertical padding. Applying it everywhere would loosen the fact rows on
   desktop for no benefit, which is why it is behind the media query.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .brand { min-width:44px; min-height:44px; }
  .fact dd a, .footer-links a, .text-link, .nav-links a, .deployer a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
  .launchpad-bottom button { min-height:44px; padding-block:.5rem; }
  .fact { padding: 0.25rem 0; }
  .footer-links { gap: 0.4rem 1.2rem; }
}

@media (max-width:560px) {
  .eyebrow { font-size:.72rem; letter-spacing:.13em; color:var(--steel); }
  .product-pathways p:not(.eyebrow),.protocol-flow small,.official-identity-strip p:not(.eyebrow),.verification-policy .step p { color:var(--silver); }
}

/* --------------------------------------------------------------------------
   Reveal. Opt-in via .reveal; the `ready` class is added after boot so nothing
   is stuck invisible if JS never runs.
   -------------------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
.ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.ready .reveal.shown { opacity: 1; transform: none; }
.ready .reveal.reveal-immediate { transition:none; }

/* --------------------------------------------------------------------------
   Reduced motion. Everything decorative stops; nothing structural moves.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ready .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Narrow widths. 320px is the floor the brief requires; the shell gutter and
   the hero grid both collapse before anything can overflow.
   -------------------------------------------------------------------------- */
.token-art.has-image img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.94) contrast(1.03); transition:transform .55s var(--ease),filter .55s var(--ease); }
@media (hover:hover) and (pointer:fine) { .token-card:hover .token-art.has-image img,.launchpad-card:hover .token-art.has-image img { transform:scale(1.025); filter:saturate(1) contrast(1.04); } }
.dynamic-token-panel .proof-id { min-width:0; }
/* The picture is PLACED, not cropped. `aspect-ratio:1.6` and `max-height:420px`
   fought each other: measured on NOBI's page at 1600px, the ratio wanted a
   697px tall box and the cap forced 418px, so the frame became 2.67:1 and
   `cover` threw away most of a square photo -- a cat reduced to its collar.
   A bounded square frame with `contain` shows whatever the launcher
   attached, whole, at any aspect ratio. */
.dynamic-token-panel .token-art { width:min(100%,420px); max-height:none; aspect-ratio:1; margin-inline:auto; border:1px solid var(--line-soft); border-radius:18px; }
.dynamic-token-panel .token-art.has-image img { object-fit:contain; }
.token-description { max-width:68ch; color:var(--steel); line-height:1.52; text-wrap:pretty; overflow-wrap:break-word; word-break:normal; hyphens:none; margin:.12rem 0 .28rem; }
.token-identity-main .token-description { font-size:.9rem; }
@media (max-width:520px) { .dynamic-token-panel .token-art { width:min(100%,300px); aspect-ratio:1; } .token-description { line-height:1.48; margin-bottom:.18rem; } .token-identity-main .token-description { grid-column:1 / -1; font-size:.84rem; } }

@media (max-width: 420px) {
  :root { --shell: min(1180px, 100% - 1.6rem); }
  .nav-links { gap: 0.9rem; font-size: 0.85rem; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta { width: 100%; }
  .fact { flex-direction: column; align-items: flex-start; }
  .fact dd { text-align: left; }
  .sheen::after { display: none; }
  .bot { overflow: clip; border-radius: 50%; }
}

/* --------------------------------------------------------------------------
   ESCROW RECORD ON THE FEES PAGE

   The page carried four boxes all reading "Unavailable" and 115 words in 972px.
   This panel is the part that was never private, so it is dense on purpose:
   a figure per asset per launch, aligned so a reader compares down a column
   rather than hunting across a card.

   Motion is entry only, and once. A number that moves while being read is a
   number a reader distrusts, and this one is money.
   -------------------------------------------------------------------------- */
.fee-escrow-rows { display:grid; gap:.7rem; }
.fee-escrow-row { border:1px solid var(--line-soft); border-radius:16px; padding:.9rem 1rem; background:linear-gradient(158deg,rgba(18,26,24,.72),rgba(7,10,13,.72)); }
.fee-escrow-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.65rem; }
.fee-escrow-head strong { display:block; font-family:var(--font-mono); font-size:.92rem; letter-spacing:.04em; color:var(--ivory); }
.fee-escrow-head small { display:block; color:var(--dim); font-size:.74rem; }
.fee-escrow-assets { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.55rem; }

.fee-asset { border:1px solid var(--line-soft); border-radius:12px; padding:.6rem .7rem; background:rgba(6,9,11,.55); display:grid; gap:.18rem; }
.fee-asset > span { color:var(--dim); font-family:var(--font-mono); font-size:.61rem; letter-spacing:.09em; text-transform:uppercase; }
/* Tabular figures so digits line up down the column; a fee table that jitters
   between rows is harder to compare than one that is simply smaller. */
.fee-asset strong { font-family:var(--font-mono); font-size:1.02rem; color:var(--ivory); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.fee-asset small { color:var(--emerald-bright); font-family:var(--font-mono); font-size:.7rem; font-variant-numeric:tabular-nums; }
/* An unreadable balance is dimmed, never dressed as a zero. */
.fee-asset.unavailable strong { color:var(--dim); font-size:.86rem; }
.fee-asset.unavailable small { color:var(--dim); }

/* The controls sit under the address they act on, quiet until wanted. */
.wallet-address-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.wallet-address-actions .btn { font-size:.7rem; padding:.4rem .8rem; letter-spacing:.06em; }
.wallet-address-actions[hidden] { display:none; }

/* The claim control sits inside the asset cell it applies to, so there is never
   a question of WHICH balance a button would collect. It stays quiet until
   hovered: the number is the subject of the cell, not the button. */
.fee-claim { display:grid; gap:.3rem; margin-top:.45rem; }
.fee-claim .btn { width:max-content; padding:.32rem .7rem; font-size:.68rem; letter-spacing:.08em; }
.fee-claim-note { color:var(--dim); font-size:.68rem; line-height:1.45; font-family:var(--font-mono); }
.fee-claim[data-claim='sent'] .fee-claim-note { color:var(--emerald-bright); }
.fee-claim[data-claim='policy-refused'] .fee-claim-note { color:var(--amber); }
.fee-claim .text-link { font-size:.68rem; }
.fee-claim .btn[disabled] { opacity:.45; cursor:default; }

.fee-escrow .note-inline { color:var(--dim); font-size:.82rem; margin:0; }

/* Entry only: rows fade up once as the panel arrives, then hold still. */
@media (prefers-reduced-motion:no-preference) {
  .fee-escrow-row { animation:feeRowIn .42s var(--ease) both; }
  .fee-escrow-row:nth-child(2) { animation-delay:.06s; }
  .fee-escrow-row:nth-child(3) { animation-delay:.12s; }
  .fee-escrow-row:nth-child(n+4) { animation-delay:.18s; }
  @keyframes feeRowIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
}

/* --------------------------------------------------------------------------
   AN ABSENT VALUE SPEAKS QUIETLY

   `.account-stat strong` is bright silver at the value size. "Unavailable"
   therefore arrived in exactly the voice a real figure uses, and four of them
   on one page is why the fees page read as broken rather than as not-yet.

   Nothing is hidden: the word stays, the reason stays, and the card keeps its
   place so the layout does not shift when a value does arrive. It simply stops
   competing with the facts around it.
   -------------------------------------------------------------------------- */
.account-stat.is-unavailable { background:linear-gradient(145deg,rgba(18,22,25,.6),rgba(7,9,11,.86)); border-color:rgba(196,205,218,.09); }
.account-stat.is-unavailable strong { color:var(--dim); font-family:var(--font-mono); font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; }
/* The reason is what a reader actually needs from an empty box, so it is the
   line that keeps its weight. */
.account-stat.is-unavailable span { color:var(--steel); }

/* --------------------------------------------------------------------------
   THE CUSTODY BOUNDARY IS A STATE, NOT AN ALERT

   It appeared on all six account routes, in amber, with an infinite scanning
   sweep — the loudest element on every page, saying the same thing each time,
   about a condition that is not going to change while you read.

   Amber also broke the palette: every other surface is emerald, so the eye was
   pulled to the least actionable thing on screen. It reads as a status strip
   now, in the system's own colour, and it holds still.
   -------------------------------------------------------------------------- */
.custody-boundary { border-color:rgba(70,200,140,.18); background:linear-gradient(105deg,rgba(12,26,21,.82),rgba(7,10,13,.95)); padding:.72rem .95rem; }
.custody-boundary::after { display:none; }
.custody-boundary .account-lock { color:var(--emerald-bright); }
.custody-boundary .signed-out-label { color:var(--emerald-bright); }
.custody-boundary strong { font-size:.92rem; }
.custody-boundary p { font-size:.74rem; color:var(--dim); }

/* --------------------------------------------------------------------------
   A BADGE THAT SAYS "THE DATA IS HERE" MUST NOT LOOK LIKE ONE THAT SAYS IT IS NOT

   `.status-readonly` existed in the markup and changed nothing: both badges
   computed to the same amber, so "Public read-only" — a panel full of real,
   verifiable figures — wore the exact colour of "Account unavailable". Two
   opposite meanings, one appearance.
   -------------------------------------------------------------------------- */
.state-badge.status-readonly { color:var(--emerald-bright); border-color:rgba(70,200,140,.32); background:rgba(70,200,140,.07); }

/* --------------------------------------------------------------------------
   ONE VOICE PER PAGE

   The fees route carried an h1 at 64px and then two panel headings at 46.4px —
   three display lines competing, so nothing led. The page title keeps its size;
   a panel is a section within it and now reads as one.
   -------------------------------------------------------------------------- */
.account-module-head h2,
.account-primary h2,
/* The availability panel sits beside .account-primary and fell through to the
   global h2 at 29.6px, so one column shouted while the other spoke. */
.account-side h2 { font-size:clamp(1.35rem,2.4vw,1.75rem); letter-spacing:-.01em; }

/* Panels arrive once, in order, and then hold still. Anything that keeps moving
   under a figure makes the figure harder to trust. */
@media (prefers-reduced-motion:no-preference) {
  .account-workspace-body > .panel { animation:accountPanelIn .44s var(--ease) both; }
  .account-workspace-body > .panel:nth-child(2) { animation-delay:.07s; }
  .account-workspace-body > .panel:nth-child(n+3) { animation-delay:.13s; }
  @keyframes accountPanelIn { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
}

/* --------------------------------------------------------------------------
   THE PUBLIC LAUNCH RECORD ON THE ACCOUNT ROUTE

   A row per launch, columns aligned so a reader compares down rather than
   across — the same reason the escrow figures are tabular. Whole rows are the
   link, because a link that is only the symbol makes the rest of the row look
   inert when it is the part being read.
   -------------------------------------------------------------------------- */
.public-launch-rows { display:grid; gap:.5rem; }
.public-launch-row { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) auto; align-items:center; gap:1rem; padding:.72rem .9rem; border:1px solid var(--line-soft); border-radius:14px; background:linear-gradient(158deg,rgba(18,26,24,.6),rgba(7,10,13,.72)); text-decoration:none; transition:border-color .2s var(--ease),transform .2s var(--ease),background .2s var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .public-launch-row:hover { border-color:rgba(70,200,140,.34); transform:translateX(2px); background:linear-gradient(158deg,rgba(22,34,30,.72),rgba(8,12,15,.8)); }
}
.public-launch-row:focus-visible { outline:2px solid var(--emerald-bright); outline-offset:2px; }
.public-launch-id strong { display:block; font-family:var(--font-mono); font-size:.9rem; color:var(--ivory); letter-spacing:.04em; }
.public-launch-id small { display:block; color:var(--dim); font-size:.74rem; }
.public-launch-cell { display:grid; gap:.12rem; min-width:0; }
.public-launch-cell span { color:var(--dim); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; }
.public-launch-cell strong { font-family:var(--font-mono); font-size:.8rem; color:var(--steel); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.public-launch-go { color:var(--emerald-bright); font-style:normal; }
.public-launches .note-inline { color:var(--dim); font-size:.82rem; margin:0; }

/* Columns collapse before they crush: four cells at 1fr each stop being
   readable well before the viewport does. */
@media (max-width:760px) {
  .public-launch-row { grid-template-columns:minmax(0,1fr) auto; row-gap:.5rem; }
  .public-launch-cell { grid-column:1 / -1; grid-template-columns:auto 1fr; display:grid; align-items:baseline; gap:.5rem; }
  .public-launch-cell strong { text-align:right; }
}

/* --------------------------------------------------------------------------
   THE BOARD: LET THE TOKEN LEAD ITS OWN CARD

   Measured on a card 190px wide: the token's name was 12.48px at weight 400,
   while "Market cap unavailable" sat beside it at weight 650. The card's
   headline was outranked by a line saying a number is missing — the same defect
   as the account pages, in the one place a reader looks first.

   Nothing here changes what a card says. The name leads because it is the
   identity; the metric supports because it is data about it, and that ordering
   holds whether the number is missing or present.
   -------------------------------------------------------------------------- */
.launchpad-card-body h3 { font-size:.94rem; letter-spacing:-.01em; }
.launchpad-card-body h3 a { color:var(--ivory); }
.launchpad-symbol { font-size:.72rem; letter-spacing:.05em; }
/* 650 -> 550, and a step down in colour. Legible when a real figure arrives,
   never louder than the token it belongs to. */
.launchpad-mcap strong { font-weight:550; color:var(--steel); }

/* Five fixed columns put 8px type in a 190px card. A floor lets the grid choose
   how many fit and gives the art and the name room to be read. */
.launchpad-grid { grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:.8rem; }
@media (max-width:900px) { .launchpad-grid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); } }

/* --------------------------------------------------------------------------
   MOTION THAT SETTLES

   `premiumCardIn` already existed and ran on every card at once, so the board
   arrived as one block. A short stagger reads as the row assembling rather than
   appearing, and it costs nothing — the cards are already animating.

   Capped at the sixth card: a stagger that keeps growing makes the last card on
   a long board feel broken rather than considered.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference) {
  .ready .launchpad-card:nth-child(2) { animation-delay:.05s; }
  .ready .launchpad-card:nth-child(3) { animation-delay:.1s; }
  .ready .launchpad-card:nth-child(4) { animation-delay:.15s; }
  .ready .launchpad-card:nth-child(5) { animation-delay:.2s; }
  .ready .launchpad-card:nth-child(n+6) { animation-delay:.24s; }
}

/* --------------------------------------------------------------------------
   FACTS A STRANGER CAN CHECK

   The security page carried four "Unavailable" rows and nothing a visitor could
   verify, on the subject where verifying is the whole point. Those four
   genuinely wait for a sign-in; these do not.

   Addresses are the content, so they are set in mono at a size meant to be read
   and compared against an explorer, not decorated.
   -------------------------------------------------------------------------- */
.verifiable-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.6rem; }
.verifiable-fact { display:grid; gap:.22rem; padding:.7rem .8rem; border:1px solid var(--line-soft); border-radius:13px; background:linear-gradient(158deg,rgba(18,26,24,.6),rgba(7,10,13,.74)); min-width:0; }
.verifiable-fact > span { color:var(--dim); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; }
.verifiable-fact strong { font-family:var(--font-mono); font-size:.76rem; color:var(--ivory); overflow-wrap:anywhere; font-weight:500; }
.verifiable-fact small { color:var(--steel); font-size:.72rem; line-height:1.45; }

/* The gate is the one fact here that changes, so it is given its own weight and
   its own colour once it is known. */
.verifiable-gate { display:grid; gap:.22rem; margin-top:.6rem; padding:.75rem .85rem; border:1px solid var(--line-soft); border-radius:13px; background:rgba(6,9,11,.6); }
.verifiable-gate > span { color:var(--dim); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; }
.verifiable-gate strong { font-family:var(--font-mono); font-size:1rem; letter-spacing:.03em; color:var(--steel); }
.verifiable-gate small { color:var(--steel); font-size:.72rem; }
.verifiable-gate[data-gate='closed'] { border-color:rgba(70,200,140,.24); }
.verifiable-gate[data-gate='closed'] strong { color:var(--emerald-bright); }
.verifiable-gate[data-gate='open'] { border-color:rgba(224,179,104,.3); }
.verifiable-gate[data-gate='open'] strong { color:var(--amber); }
/* Unknown is neither reassuring nor alarming: it is dim, because a gate nobody
   could read must not be mistaken for one that is shut. */
.verifiable-gate[data-gate='unknown'] strong { color:var(--dim); }

/* --------------------------------------------------------------------------
   A CARD IS NOT A TEXT LINK

   The what-if directory renders each launch as `<a class="token-card">`, and the
   anchor's own underline is drawn across everything inside it: the name, the
   symbol, "OPEN LAB →", and the provenance footnote all arrived underlined.
   Each child computes `text-decoration: none` individually, which is why this
   survived — the line belongs to the anchor, not to them.

   Removing it takes the affordance away, so it is replaced with one that suits
   a card: the border lifts and the whole surface moves a little.
   -------------------------------------------------------------------------- */
a.token-card { text-decoration:none; }
@media (hover:hover) and (pointer:fine) {
  a.token-card { transition:border-color .22s var(--ease),transform .22s var(--ease),background .22s var(--ease); }
  a.token-card:hover { border-color:rgba(70,200,140,.32); transform:translateY(-2px); }
  a.token-card:hover .go { color:var(--emerald-bright); }
}
a.token-card:focus-visible { outline:2px solid var(--emerald-bright); outline-offset:3px; }

/* The provenance line is identical on every card in the directory, so it is
   context rather than content. At 13.44px it was competing with the symbol. */
.simulator-directory .token-card .footer-note { font-size:.72rem; color:var(--dim); line-height:1.45; }

/* --------------------------------------------------------------------------
   THE TICKER MUST FIT THE CARD IT IS THE ART OF

   Measured: at 16cqi a nine-character ticker needs 208px of a 211px box, and a
   twelve-character one needs 256px — so it clipped mid-character, which is the
   same ugliness the placeholder was replaced to remove, moved one token along.

   CSS cannot measure text, so the renderer publishes the length and the size is
   divided by it. 140cqi is calibrated from the real face: nine characters
   measured 208px at 36.6px, which is ~0.63em per character.
   -------------------------------------------------------------------------- */
.token-art .art-symbol { overflow:hidden; text-overflow:ellipsis; }
/* One static rule per ticker length, because CSS cannot measure text and an
   inline custom property would be an inline style -- which this site's CSP
   forbids and a test enforces. 140 is calibrated from the real face: nine
   characters measured 208px at 36.6px, about 0.63em each. */
.token-art .art-symbol[data-art-len='1'] { font-size:min(16cqi,140.0cqi); }
.token-art .art-symbol[data-art-len='2'] { font-size:min(16cqi,70.0cqi); }
.token-art .art-symbol[data-art-len='3'] { font-size:min(16cqi,46.67cqi); }
.token-art .art-symbol[data-art-len='4'] { font-size:min(16cqi,35.0cqi); }
.token-art .art-symbol[data-art-len='5'] { font-size:min(16cqi,28.0cqi); }
.token-art .art-symbol[data-art-len='6'] { font-size:min(16cqi,23.33cqi); }
.token-art .art-symbol[data-art-len='7'] { font-size:min(16cqi,20.0cqi); }
.token-art .art-symbol[data-art-len='8'] { font-size:min(16cqi,17.5cqi); }
.token-art .art-symbol[data-art-len='9'] { font-size:min(16cqi,15.56cqi); }
.token-art .art-symbol[data-art-len='10'] { font-size:min(16cqi,14.0cqi); }
.token-art .art-symbol[data-art-len='11'] { font-size:min(16cqi,12.73cqi); }
.token-art .art-symbol[data-art-len='12'] { font-size:min(16cqi,11.67cqi); }
/* The divisor is calibrated on average glyph width, so a ticker of unusually
   wide letters can still exceed it. Chasing that case with arithmetic would
   make every ordinary ticker needlessly small, so the rare one ends in an
   ellipsis instead of being cut through the middle of a letter. */

/* --------------------------------------------------------------------------
   THE HEADER SHOULD LOOK LIKE NAVIGATION, NOT LIKE FINE PRINT

   Measured at 1440px: the bar is 1180px wide and `space-between`, so the brand
   sits at one edge and three links at the other with a wide emptiness between.
   The links were 14.4px at weight 400 — the size of body copy, at the edge of
   the screen, which is why the header read as unfinished.

   They are grouped into a segmented control instead. That is not a new idea
   here: the board's own sort tabs are exactly this shape, so the header now
   speaks the language the rest of the site already uses.
   -------------------------------------------------------------------------- */
.nav-links {
  gap:.25rem;
  padding:.28rem;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:linear-gradient(158deg,rgba(18,26,24,.6),rgba(7,10,13,.72));
  backdrop-filter:blur(6px);
}
.nav-links a {
  padding:.42rem .95rem;
  border-radius:999px;
  font-size:.84rem;
  font-weight:520;
  letter-spacing:.01em;
  transition:color .2s var(--ease),background .2s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
  .nav-links a:hover { background:rgba(70,200,140,.08); }
}
/* The current page is a filled segment rather than an underline: inside a
   control, a rule underneath reads as a stray line. */
.nav-links a[aria-current="page"] { background:rgba(70,200,140,.13); color:var(--ivory); }
.nav-links a[aria-current="page"]::after { display:none; }
.nav-links a:focus-visible { outline:2px solid var(--emerald-bright); outline-offset:2px; }

/* A little more height, so the bar has presence without becoming furniture. */
.nav { padding-block:.62rem; }

@media (max-width:560px) {
  .nav-links { gap:.15rem; padding:.22rem; }
  .nav-links a { padding:.38rem .7rem; font-size:.78rem; }
}

/* --------------------------------------------------------------------------
   THE FIRST THING A VISITOR SEES SHOULD MOVE TOO

   `.reveal-immediate` set `transition:none` for anything already in view at
   load. The reasoning was sound -- content that is already visible must not
   appear to arrive from a scroll -- but the effect was that the one part of
   every page a visitor sees FIRST was the one part with its motion switched
   off. Everything below the fold animated; the hero simply existed.

   It is staged on load instead: a short, ordered entrance that settles. Motion
   that introduces a page, not motion that decorates it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference) {
  .ready .reveal.reveal-immediate {
    transition:none;
    animation:revealEnter .78s var(--ease) both;
  }
  .ready .reveal.reveal-step-2 { animation-delay:.07s; }
  .ready .reveal.reveal-step-3 { animation-delay:.14s; }
  .ready .reveal.reveal-step-4 { animation-delay:.2s; }
  .ready .reveal.reveal-step-5 { animation-delay:.25s; }
  .ready .reveal.reveal-step-6 { animation-delay:.29s; }
  @keyframes revealEnter {
    from { opacity:0; transform:translate3d(0,16px,0) scale(.994); filter:blur(3px); }
    to { opacity:1; transform:none; filter:none; }
  }
}

/* --------------------------------------------------------------------------
   HERO DEPTH, DRIVEN BY THE SCROLL ITSELF

   Applied to `.hero-inner`, which carries no animation of its own. That is
   deliberate rather than convenient: `.hero-copy` runs `revealEnter` and
   `.hero-stage` runs `heroStageBreathe`, and `animation` is not additive — a
   second declaration on either would silently replace the first, which is the
   kind of change that looks fine until somebody notices the robot stopped
   breathing.

   `animation-timeline: scroll()` rather than a scroll listener: it runs off the
   main thread, so it cannot stutter while the page is busy, and it needs no
   inline style — which this site's CSP forbids and a test enforces. The same
   technique already drives the scroll-progress bar here.

   The content leaves slightly faster than the ground behind it. That difference
   IS the depth; anything larger stops reading as parallax and starts reading as
   the page sliding apart.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-inner {
      animation: heroDepth linear both;
      animation-timeline: scroll(root block);
      /* Ends before the hero does, so the effect is finished by the time the
         next section arrives rather than still moving underneath it. */
      animation-range: 0 70vh;
      will-change: transform, opacity;
    }
    @keyframes heroDepth {
      from { transform:translate3d(0,0,0); opacity:1; }
      to { transform:translate3d(0,-38px,0); opacity:.82; }
    }
  }
}

/* --------------------------------------------------------------------------
   THE WHITE FLASH HAD A CAUSE, AND IT WAS NOT THE TRANSITION

   Measured: `body` is rgb(5,6,7) but `html` was transparent, so the browser
   painted its own canvas — white — for the moment before the page's own
   background existed. Every navigation flashed, and no amount of transition
   would have covered it, because the flash happens before any of this runs.

   `color-scheme: dark` is the part that does the work: the browser paints its
   canvas dark from the very first frame, and the scrollbars and form controls
   stop being light furniture on a dark page. The explicit background is the
   belt to that braces.
   -------------------------------------------------------------------------- */
:root { color-scheme: dark; }
html { background: var(--ink); }

/* --------------------------------------------------------------------------
   NAVIGATION THAT DISSOLVES INSTEAD OF BLINKING

   A cross-document view transition: pure CSS, no script, and nothing to
   coordinate. A browser without it simply navigates the way it does now, which
   is why there is no fallback to maintain.

   Kept short on purpose. A page transition long enough to admire is a page
   transition that makes the site feel slow the second time you see it.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation:pageFadeOut .18s var(--ease) both; }
  ::view-transition-new(root) { animation:pageFadeIn .26s var(--ease) both; }
  @keyframes pageFadeOut { from { opacity:1; } to { opacity:0; } }
  @keyframes pageFadeIn { from { opacity:0; transform:translate3d(0,6px,0); } to { opacity:1; transform:none; } }
}
/* A reader who asked for less motion still gets the navigation, without the
   movement: the transition is suppressed rather than the page being left to
   blink. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation:none; }
}

/* The header is the one thing on every page that should not appear to be
   rebuilt on arrival, so it is carried across the transition rather than
   cross-faded with the rest. */
.nav { view-transition-name: ponsr-nav; }

/* --------------------------------------------------------------------------
   PRESS HAS TO FEEL LIKE PRESS

   Audited: the whole stylesheet held exactly ONE `:active` rule, on `.btn`.
   Cards, nav segments, copy buttons and sort tabs had none — they changed
   colour on hover and then did nothing at all when actually pressed, which is
   the moment a reader is asking the interface to confirm it heard them.

   And nothing set `-webkit-tap-highlight-color`, so on a phone every tap drew
   the OS's own grey box over the design. That single default undoes more
   perceived quality than any animation adds.

   TIMING IS THE WHOLE TRICK. The press is fast and the release settles: 90ms
   down, 260ms back. Symmetric timing reads as a slideshow; asymmetric timing
   reads as something with weight. The existing button used its 250ms hover
   transition for both, so even the one press state that existed felt soft.
   -------------------------------------------------------------------------- */
.btn,
.nav-links a,
a.token-card,
.launchpad-card,
.ca-copy,
.public-launch-row,
[data-launch-sort] {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .nav-links a,
  .ca-copy,
  [data-launch-sort] {
    transition-duration: .26s;
  }
  .btn:active,
  .nav-links a:active,
  .ca-copy:active,
  [data-launch-sort]:active {
    transition-duration: .09s;
  }

  /* Smaller controls move less: the same 3% on a nav segment and on a hero
     button do not read as the same gesture. */
  .btn:active { transform:scale(.972); }
  .nav-links a:active { transform:scale(.985); }
  .ca-copy:active,
  [data-launch-sort]:active { transform:scale(.98); }

  /* A card is pressed through the anchor that covers it, not through the
     article, so the state has to be read from the child. */
  a.token-card:active,
  .public-launch-row:active { transform:translateY(0) scale(.992); transition-duration:.09s; }
  .launchpad-card:has(.launchpad-card-link:active) { transform:translateY(-1px) scale(.994); transition-duration:.09s; }
}

/* Keyboard users never see :active, so the focus ring is what tells them the
   control is theirs. Two of these families had none. */
.ca-copy:focus-visible,
[data-launch-sort]:focus-visible,
.public-launch-row:focus-visible { outline:2px solid var(--emerald-bright); outline-offset:2px; }