/* The only file in src/ allowed to hold colour literals.
   Provenance: every value is a real pixel read from the client assets (tools/palette.json, tools/palette.py).
   logo (brand/LOGO TOKENGENERATOR PNG...png, k-means k=8, snapped to real pixel x,y):
     --green-deep  #1f7615  slide 1 (71,888)      --green  #62d015  slide 1 (570,241)
     --green-lime  #8de53b  slide 1 (173,874)     --green-mist #b6f078 slide 1 (36,186)
     --green-pale  #d8f3c8  slide 1 (1337,18)
   reference/TOKENGENERATOR 1.jpg.jpeg (k-means k=10, snapped to real pixel):
     --canvas #ffffff (169,0)   --ink #052d24 (903,265)   --ink-2 #839a92 (441,583)
     --ink-3 #b1b7b5 (500,652)  --well #eff1f0 (700,690)  --line #cacecd (298,680)
   reference/SAMPUL TOKENGENERATOR JPG.jpg.jpeg banner (k-means k=8, snapped to real pixel), used for dark mode:
     #010e00 (964,11)  #033102 (641,12)  #0b6408 (962,99)  #4b8b37 (348,40)  #d4f4ab (263,150) */
:root {
  color-scheme: light dark;

  /* roles, light */
  --canvas: #ffffff;
  --surface: #ffffff;
  --ink: #052d24;
  --ink-2: #839a92;
  --ink-3: #b1b7b5;
  --well: #eff1f0;
  --line: #cacecd;
  --green: #62d015;
  --green-deep: #1f7615;
  --green-lime: #8de53b;
  --green-mist: #b6f078;
  --green-pale: #d8f3c8;
  --on-green: #052d24;
  --ink-soft: color-mix(in srgb, var(--ink) 72%, var(--canvas));
  --ink-mute: color-mix(in srgb, var(--ink) 70%, var(--canvas));
  --hover-fill: var(--green);
  --canvas-dark: #010e00;

  /* shade drives every shadow; alphas differ per theme */
  --shade: var(--ink);
  --shade-1: 0.05;
  --shade-2: 0.12;
  --ring: 0 0 0 1px color-mix(in srgb, var(--shade) calc(var(--shade-1) * 100%), transparent);
  --shadow-card: var(--ring), 0 4px 24px color-mix(in srgb, var(--shade) calc(var(--shade-1) * 100%), transparent);
  --shadow-pop: var(--ring), 0 16px 40px color-mix(in srgb, var(--shade) calc(var(--shade-2) * 100%), transparent);
  --glow: 0 0 0 4px color-mix(in srgb, var(--green) 28%, transparent), 0 8px 32px color-mix(in srgb, var(--green) 40%, transparent);
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-edge: color-mix(in srgb, var(--line) 55%, transparent);

  /* type: fluid scale */
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-display: clamp(1.75rem, 1.05rem + 3.4vw, 3.25rem);
  --fs-heading: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-lead: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  --fs-body: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  --fs-label: 0.75rem;
  --fs-ca: clamp(0.9375rem, 0.45rem + 2.1vw, 1.5rem);

  /* 8px grid */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
  --tap: 48px;
  --section-y: clamp(80px, 6vw + 40px, 120px);
  --max: 1200px;
  --radius-card: 24px;
  --radius-well: 16px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: linear(0, 0.2 4%, 0.62 10%, 0.98 17%, 1.14 23%, 1.16 27%, 1.08 34%, 1.02 42%, 0.99 52%, 1.005 68%, 1);
  --dur-press: 120ms;
  --dur-hover: 200ms;
  --dur-spring: 480ms;
  --dur-reveal: 480ms;
  --stagger: 40ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #010e00;
    --dk-surface: #033102;
    --surface: color-mix(in srgb, var(--dk-surface) 62%, var(--canvas));
    --ink: #d4f4ab;
    --ink-2: #4b8b37;
    --ink-3: #0b6408;
    --well: color-mix(in srgb, var(--surface) 65%, var(--canvas));
    --line: #0b6408;
    --green-deep: #8de53b;
    --green-pale: color-mix(in srgb, var(--green) 18%, var(--canvas));
    --hover-fill: color-mix(in srgb, var(--green) 30%, var(--surface));
    --shade: var(--canvas);
    --shade-1: 0.45;
    --shade-2: 0.7;
  }
}

/* Calm, solid, deliberate. Surfaces are opaque; blur is reserved for the two things that sit over scrolling content
   (the sticky bar and the toast). Motion hierarchy: primary = the load sequence and the contract reveal, secondary = scroll reveals,
   feedback = press, hover and copy. Nothing loops. No colour literals: every colour is a role from tokens.css. */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("fonts/schibsted-grotesk.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/jetbrains-mono.woff2") format("woff2"); }

@layer reset, base, layout, components, motion, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body, h1, h2, p, ul { margin: 0; }
  ul { padding: 0; list-style: none; }
  img, svg { display: block; }
  a { color: inherit; text-decoration: none; }
  button, input { font: inherit; color: inherit; }
  button { cursor: pointer; border: 0; background: none; padding: 0; }
  button:disabled { cursor: default; }
}

@layer base {
  body {
    position: relative; min-height: 100vh; background: var(--canvas); color: var(--ink);
    font: 400 var(--fs-body)/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern", "liga"; text-rendering: optimizeLegibility;
  }
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 45% at 85% -10%, color-mix(in srgb, var(--green) 11%, transparent), transparent 70%); }
  h1, h2 { font-family: var(--font-display); text-wrap: balance; }
  h1 { font-size: var(--fs-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
  h2 { font-size: var(--fs-heading); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
  p { text-wrap: pretty; }
  :focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; border-radius: 12px; }
  [id] { scroll-margin-top: 176px; }
  ::selection { background: var(--green-mist); color: var(--on-green); }
  .skip { position: absolute; left: var(--s2); top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s3); border-radius: 999px; background: var(--ink); color: var(--canvas); font: 600 0.875rem/1 var(--font-sans); }
  .skip:focus { top: var(--s1); }
}

@layer layout {
  /* mobile: only the contract slot is pinned; from 48rem the whole bar is */
  .top { display: contents; }
  .bar { display: flex; align-items: center; gap: var(--s1); height: 64px; max-width: var(--max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
  .bar-end { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
  .socials { display: flex; align-items: center; gap: var(--s1); }
  .nav { display: none; align-items: center; }

  .wrap { container-type: inline-size; max-width: var(--max); margin: 0 auto; padding: var(--s3) clamp(16px, 4vw, 32px) 0; }
  .hero { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--s4); padding: clamp(24px, 3.5vw + 8px, 64px); border-radius: var(--radius-card); }
  .hero-copy { display: grid; gap: var(--s4); min-width: 0; align-content: start; }
  .hero-act { display: grid; gap: var(--s1); justify-items: stretch; text-align: center; align-content: center; }
  .chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); gap: 0 var(--s4); }
  @container (min-width: 900px) {
    .hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s8); }
    .hero-act { justify-items: center; min-width: 208px; }
  }

  .themes { margin-top: var(--section-y); }
  .listings { margin-top: var(--section-y); }
  .listings-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-top: var(--s2); }
  .finder { flex: 1 1 100%; display: block; }
  @container (min-width: 720px) { .finder { flex: 1 1 280px; } }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s2); margin-top: var(--s3); }
  .foot { display: grid; gap: var(--s1); max-width: var(--max); margin: var(--section-y) auto 0; padding: var(--s3) clamp(16px, 4vw, 32px) var(--s6); text-align: center; }

  @media (min-width: 48rem) {
    .top { display: block; position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--canvas) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
    .top::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--glass-edge); opacity: 0; transition: opacity var(--dur-hover) var(--ease-out); }
    .top[data-stuck]::after { opacity: 1; }
    .bar { height: 80px; }
  }
  @media (min-width: 64rem) {
    .nav { display: flex; }
  }
}

@layer components {
  /* header */
  .brand { display: flex; align-items: center; justify-content: center; gap: var(--s1); min-width: var(--tap); min-height: var(--tap); margin-right: var(--s1); font: 700 1.125rem/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--green-deep); }
  .brand img { width: 32px; height: 32px; }
  .brand span { display: none; }
  .nav a { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s2); font: 500 var(--fs-body)/1.6 var(--font-sans); letter-spacing: -0.005em; color: var(--ink-soft); }
  .nav a::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; border-radius: var(--radius-well); background: var(--well); opacity: 0; transition: opacity var(--dur-hover) var(--ease-out); }
  .search-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-width: var(--tap); height: var(--tap); border-radius: 999px; background: var(--well); color: var(--ink-soft); }
  .search-text, .search-pill kbd { display: none; }
  .search-pill kbd { align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--s1); border-radius: 8px; background: var(--canvas); font: 500 0.6875rem/1 var(--font-mono); color: var(--ink-soft); box-shadow: var(--ring); }
  .social { position: relative; isolation: isolate; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 999px; color: var(--ink); }
  .social::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--well); opacity: 0; transition: opacity var(--dur-hover) var(--ease-out); }
  .social.is-inert { color: var(--ink-mute); cursor: default; box-shadow: inset 0 0 0 1px var(--glass-edge); }
  .social.is-inert[data-state="unconfirmed"] { background: repeating-linear-gradient(-45deg, transparent 0 4px, var(--well) 4px 8px); }

  /* contract slot: the one element that is always pinned, so it gets the strongest treatment */
  .ca { overflow-x: clip; isolation: isolate; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label badge" "value value"; align-items: center; gap: 0 var(--s2); width: 100%; margin: 0 0 var(--s1); padding: var(--s1) clamp(8px, 3vw, 28px) 0 clamp(16px, 4vw, 32px); border: 1px solid var(--glass-edge); border-width: 0 0 1px; border-radius: 0 0 var(--radius-well) var(--radius-well); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 50; }
  .ca-label { grid-area: label; font: 700 var(--fs-label)/1.5 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .ca-value { position: relative; grid-area: value; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s1); min-height: var(--tap); text-align: left; font: 600 var(--fs-ca)/1.3 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); word-break: break-all; }
  .ca-value code { display: block; font: inherit; padding-right: var(--tap); text-wrap: balance; }
  .ca.is-inert .ca-value code { padding-right: 0; }
  button.ca-value { border-radius: var(--radius-well); }
  .ca-icon { position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-top: -24px; color: var(--ink-soft); transition: transform var(--dur-spring) var(--spring), opacity var(--dur-hover) var(--ease-out); }
  .ca-icon[data-icon="done"] { color: var(--green-deep); opacity: 0; transform: scale(0.4); }
  .ca[data-copied] .ca-icon[data-icon="copy"] { opacity: 0; transform: scale(0.4); }
  .ca[data-copied] .ca-icon[data-icon="done"] { opacity: 1; transform: none; }
  .ca:has(button.ca-value:focus-visible) { box-shadow: var(--glow); }
  .ca-bloom { position: absolute; inset: -24px -12px; z-index: -1; border-radius: 999px; background: radial-gradient(closest-side, color-mix(in srgb, var(--green) 50%, transparent), transparent); opacity: 0.16; pointer-events: none; }
  .ca.is-inert { border-style: dashed; }
  .ca.is-inert .ca-value { color: var(--ink-mute); cursor: default; user-select: none; }
  .ca[data-state="unconfirmed"] { border-color: var(--ink-2); background: repeating-linear-gradient(-45deg, var(--glass) 0 8px, color-mix(in srgb, var(--well) 80%, transparent) 8px 16px); }
  .ca[data-state="unconfirmed"] .ca-value { color: var(--ink-soft); }
  .ca-badge { grid-area: badge; justify-self: end; display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s1); border-radius: 999px; background: var(--canvas); font: 600 0.6875rem/1 var(--font-sans); letter-spacing: 0.04em; color: var(--ink-soft); box-shadow: var(--ring); }
  .ca[data-state="unconfirmed"] .ca-badge { box-shadow: none; border: 1px dashed var(--ink-2); }
  .ca-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ch { display: inline-block; }

  /* surfaces: opaque, hairline edge, one soft shadow level */
  .hero, .card, .pill, .seg, .switch, .finder input { background: var(--surface); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-card); }
  .hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 60%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--green) 16%, transparent), transparent); pointer-events: none; }

  /* hero */
  h1 em { font-style: normal; color: var(--green-deep); }
  .chip { display: grid; gap: 4px; padding: var(--s2) 0; border-top: 1px solid var(--glass-edge); }
  .chip b { font: 700 0.875rem/1.5 var(--font-sans); letter-spacing: -0.01em; }
  .chip span { font: 400 0.875rem/1.5 var(--font-sans); color: var(--ink-soft); }
  .note { font: 400 0.75rem/1.5 var(--font-sans); color: var(--ink-soft); }

  .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: 56px; min-width: var(--tap); padding: 0 var(--s4); border-radius: 999px; font: 700 1rem/1.3 var(--font-display); letter-spacing: -0.01em; }
  .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity var(--dur-hover) var(--ease-out); pointer-events: none; }
  .btn-primary { background: var(--green); color: var(--on-green); }
  .btn-primary::before { background: var(--green-lime); }
  .btn.is-inert { background: transparent; color: var(--ink-soft); cursor: default; box-shadow: inset 0 0 0 1px var(--line); }
  .btn.is-inert::before { display: none; }
  .text-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: var(--tap); font: 600 0.8125rem/1.5 var(--font-sans); color: var(--green-deep); }
  .text-link svg { transition: transform var(--dur-hover) var(--ease-out); }

  /* themes */
  .pills { position: relative; display: flex; gap: var(--s1); overflow-x: auto; padding: 4px 4px var(--s2); margin: 0 -4px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .pill { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s1); height: var(--tap); padding: 0 var(--s3); border-radius: 999px; font: 700 0.875rem/1.5 var(--font-sans); letter-spacing: -0.005em; color: var(--ink); scroll-snap-align: start; box-shadow: none; }
  .pill[aria-selected="true"] { background: var(--ink); color: var(--canvas); border-color: transparent; }
  .pills[data-ind] .pill[aria-selected="true"] { background: transparent; }
  .indicator { position: absolute; top: 4px; left: 0; z-index: 0; height: var(--tap); width: 96px; border-radius: 999px; background: var(--ink); opacity: 0; pointer-events: none; transform-origin: 0 50%; }
  .pills[data-ind] .indicator { opacity: 1; }
  .count { font: 600 0.6875rem/1.5 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
  .pill[aria-selected="true"] .count { color: color-mix(in srgb, var(--canvas) 72%, var(--ink)); }


  /* listings toolbar */
  .seg { display: inline-flex; padding: 4px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; box-shadow: none; background: var(--well); }
  .seg button { flex: 0 0 auto; height: var(--tap); padding: 0 var(--s2); border-radius: 999px; font: 600 0.8125rem/1.5 var(--font-sans); color: var(--ink-soft); }
  .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
  .switch { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--tap); padding: 0 var(--s2) 0 var(--s1); border-radius: 999px; font: 600 0.8125rem/1.5 var(--font-sans); color: var(--ink-soft); box-shadow: none; background: var(--well); }
  .track { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--line); }
  .track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--green-deep); opacity: 0; transition: opacity var(--dur-hover) var(--ease-out); }
  .knob { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--canvas); transition: transform var(--dur-spring) var(--spring); }
  .switch[aria-checked="true"] { color: var(--ink); }
  .switch[aria-checked="true"] .track::before { opacity: 1; }
  .switch[aria-checked="true"] .knob { transform: translateX(16px); }
  .seg button:disabled, .switch:disabled { color: var(--ink-mute); }
  .seg:has(button:disabled) button[aria-pressed="true"] { box-shadow: none; background: transparent; }
  .switch:disabled .track { opacity: 0.6; }
  .finder { position: relative; }
  .finder input { width: 100%; height: var(--tap); padding: 0 var(--s2); border-radius: var(--radius-well); font: 400 1rem/1.5 var(--font-sans); font-variant-numeric: tabular-nums; box-shadow: none; background: var(--well); }
  .finder input::placeholder { color: var(--ink-soft); }
  .finder input:focus-visible { box-shadow: var(--glow); outline: none; }
  .check-out { min-height: var(--s3); margin: var(--s1) 4px 0; font: 500 0.8125rem/1.5 var(--font-sans); color: var(--ink-soft); }
  .check-out[data-tone="good"] { color: var(--green-deep); font-weight: 700; }
  .check-out[data-tone="warn"] { color: var(--ink); font-weight: 700; }

  /* listing cards: structured slots that take real data unchanged when a record is stated */
  .card { position: relative; container-type: inline-size; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border-radius: var(--radius-card); box-shadow: none; }
  .card[hidden] { display: none; }
  .card-head { display: flex; align-items: center; gap: var(--s2); }
  .avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--well); box-shadow: inset 0 0 0 1px var(--glass-edge); }
  .card-id { display: grid; flex: 1; gap: 2px; min-width: 0; }
  .card-name { font: 800 0.9375rem/1.3 var(--font-display); letter-spacing: -0.01em; }
  .card-ticker { font: 600 0.75rem/1.5 var(--font-sans); letter-spacing: 0.04em; color: var(--ink-soft); }
  .dash { color: var(--ink-soft); }
  .badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s1); border-radius: 999px; background: var(--well); font: 700 0.6875rem/1 var(--font-sans); letter-spacing: 0.04em; color: var(--ink); box-shadow: var(--ring); }
  .card-cap { display: grid; gap: 4px; }
  .cap-label { font: 700 var(--fs-label)/1.5 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .cap-value { font: 800 1.75rem/1.1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  @container (min-width: 380px) { .cap-value { font-size: 2rem; } }
  .card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
  .loop-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s1); border-radius: 8px; font: 600 0.6875rem/1 var(--font-sans); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--glass-edge); }
  .loop-chip[data-on="true"] { color: var(--green-deep); box-shadow: inset 0 0 0 1px var(--green-deep); }
  .foot-ca { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-left: auto; padding: 0 var(--s1); border-radius: 8px; background: var(--well); font: 600 0.6875rem/1.5 var(--font-sans); color: var(--ink-soft); }
  .empty { grid-column: 1 / -1; padding: var(--s2) 0 0; text-align: center; font: 500 var(--fs-body)/1.6 var(--font-sans); color: var(--ink-soft); }

  .foot { font: 400 0.75rem/1.6 var(--font-sans); color: var(--ink-soft); }
  .foot-k { font-weight: 700; color: var(--ink); }
  .foot-mono { font-family: var(--font-mono); word-break: break-all; }

  .toast { position: fixed; left: 50%; bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: var(--s1); min-height: var(--tap); padding: 0 var(--s3) 0 var(--s2); border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-pop); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 600 0.875rem/1.5 var(--font-sans); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: transform var(--dur-spring) var(--spring), opacity var(--dur-hover) var(--ease-out), visibility 0s linear var(--dur-hover); }
  .toast[data-show] { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .toast-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: var(--on-green); font: 800 0.875rem/1 var(--font-display); }
  .toast-mark svg { width: 16px; height: 16px; }
  .toast[data-tone="warn"] .toast-mark { background: var(--ink); color: var(--canvas); }
  .toast[data-tone="warn"] .toast-mark svg { display: none; }
  .toast[data-tone="warn"] .toast-mark::before { content: "!"; }

  /* absent contract: a calm, lit "coming soon" bar. one soft glow, no looping motion, clearly not live. */
  .ca.is-soon { border-style: solid; border-color: color-mix(in srgb, var(--green) 42%, var(--glass-edge)); box-shadow: 0 8px 28px color-mix(in srgb, var(--green) 16%, transparent); }
  .ca.is-soon .ca-bloom { opacity: 0.2; }
  .ca.is-soon .ca-value { color: var(--ink-soft); user-select: none; }
  .ca.is-soon .ca-value code { padding-right: var(--tap); font: 600 var(--fs-body)/1.3 var(--font-display); letter-spacing: -0.01em; }
  .ca-icon-off { color: var(--ink-mute); cursor: default; }
  .ca-icon-off svg { opacity: 0.7; }

  /* mint form: two panes (form, live preview), step dots, quiet fields */
  .modal.mint { width: min(920px, calc(100% - 2 * var(--s2))); max-height: calc(100dvh - 2 * var(--s2)); padding: 0; overflow: auto; text-align: left; }
  .mint-form { display: grid; }
  .mint-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s3) 0; }
  .mint-head h2 { margin: 0; }
  .mint-x { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: calc(var(--s1) * -1); border-radius: 999px; color: var(--ink-soft); }
  .steps { display: flex; gap: var(--s1); margin: var(--s2) 0 0; padding: 0 var(--s3); list-style: none; }
  .steps li { position: relative; flex: 1; display: flex; align-items: center; gap: var(--s1); min-width: 0; padding-top: var(--s2); color: var(--ink-soft); font: 600 0.8125rem/1.3 var(--font-sans); }
  .steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 999px; background: var(--well); }
  .steps li.is-done::before, .steps li[aria-current]::before { background: var(--green); }
  .steps .dot { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--well); font: 700 0.75rem/1 var(--font-sans); font-variant-numeric: tabular-nums; }
  .steps li[aria-current] { color: var(--ink); }
  .steps li[aria-current] .dot { background: var(--green); color: var(--on-green); }
  .steps li.is-done .dot { background: var(--green-deep); color: var(--canvas); }
  .steps .step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mint-body { display: grid; gap: var(--s3); padding: var(--s3); }
  .mint-fields fieldset { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; min-width: 0; }
  .mint-fields fieldset[hidden] { display: none; }
  .mint-fields fieldset:not([hidden]) { animation: enter-up 260ms var(--ease-out) backwards; }
  .fld { display: grid; gap: 6px; }
  .fld label, .fld .lbl { font: 600 0.75rem/1.3 var(--font-sans); color: var(--ink-soft); }
  .fld input, .fld textarea, .fld select { width: 100%; min-height: var(--tap); padding: 0 var(--s2); border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--well); color: var(--ink); font: 400 1rem/1.5 var(--font-sans); }
  .fld textarea { padding: 12px var(--s2); resize: vertical; min-height: 96px; }
  .fld select { appearance: none; -webkit-appearance: none; padding-right: var(--s5); background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 17px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
  .fld input:focus-visible, .fld textarea:focus-visible, .fld select:focus-visible { outline: none; box-shadow: var(--glow); }
  .fld input::placeholder, .fld textarea::placeholder { color: var(--ink-soft); }
  .hint { margin: 0; font: 400 0.75rem/1.4 var(--font-sans); color: var(--ink-soft); }
  .fld-row { display: grid; gap: var(--s2); }
  .affix { display: flex; align-items: center; min-height: var(--tap); border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--well); padding-left: var(--s2); }
  .affix span { color: var(--ink-soft); font: 400 0.875rem/1 var(--font-sans); }
  .affix input { border: 0; background: transparent; padding-left: 2px; border-radius: 0 14px 14px 0; }
  .affix:focus-within { box-shadow: var(--glow); }
  .affix input:focus-visible { box-shadow: none; }
  .upload { display: flex; align-items: center; gap: var(--s2); min-height: 72px; padding: var(--s1) var(--s2); border: 1px dashed var(--line); border-radius: 14px; background: var(--well); cursor: pointer; font: 600 0.875rem/1.3 var(--font-sans); }
  .upload:focus-within { box-shadow: var(--glow); }
  .upload-tile, .pv-mark { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: var(--canvas) center / cover no-repeat; color: var(--ink-soft); box-shadow: var(--ring); }
  .upload-tile.has-img svg, .pv-mark.has-img svg { display: none; }
  .upload-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .review { display: grid; margin: 0; }
  .review div, .pv-rows div { display: flex; justify-content: space-between; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--glass-edge); font: 400 0.875rem/1.4 var(--font-sans); }
  .review dt, .pv-rows dt { color: var(--ink-soft); }
  .review dd, .pv-rows dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .mint-note { margin: 0; font: 400 0.8125rem/1.5 var(--font-sans); color: var(--ink-soft); }
  .mint-preview { display: none; align-content: start; gap: 4px; padding: var(--s3); border-radius: var(--radius-card); background: var(--well); box-shadow: var(--ring); }
  .pv-mark { margin-bottom: var(--s2); width: 64px; height: 64px; border-radius: 18px; }
  .pv-name { margin: 0; font: 800 1.5rem/1.2 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
  .pv-ticker { margin: 0 0 var(--s2); font: 600 0.875rem/1.4 var(--font-sans); color: var(--ink-soft); }
  .pv-rows { margin: 0; }
  .mint-soon { margin: 0 var(--s3); padding: 12px var(--s2); border-radius: 14px; background: color-mix(in srgb, var(--green) 14%, var(--well)); font: 600 0.875rem/1.4 var(--font-sans); color: var(--ink); }
  .mint-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--s1); padding: var(--s2) var(--s3); border-top: 1px solid var(--glass-edge); background: var(--surface); }
  .mint-back { min-height: var(--tap); padding: 0 var(--s3); border-radius: 999px; font: 600 0.9375rem/1 var(--font-sans); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
  .mint-foot .btn { height: var(--tap); padding: 0 var(--s4); }
  .mint-foot .btn:disabled { background: var(--well); color: var(--ink-mute); cursor: default; }
  .mint-foot [hidden] { display: none; }
  @media (min-width: 48rem) {
    .mint-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
    .mint-fields { min-height: 400px; }
    .mint-preview { display: grid; position: sticky; top: var(--s3); }
    .fld-row { grid-template-columns: 1fr 1fr; }
    .mint-head, .steps, .mint-body { padding-inline: var(--s5); }
    .mint-soon { margin-inline: var(--s5); }
    .mint-foot { padding-inline: var(--s5); }
  }

  /* header wallet button and chooser dialog */
  .wallet-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: var(--tap); padding: 0 var(--s2); border-radius: 999px; background: var(--green); color: var(--on-green); font: 700 0.875rem/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
  .wallet-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--green-lime); opacity: 0; transition: opacity var(--dur-hover) var(--ease-out); }
  .wl-more { display: none; }
  .modal.wallets { width: min(520px, calc(100% - 2 * var(--s2))); padding: 0 0 var(--s3); text-align: left; }
  .wallets .mint-head { padding-bottom: 0; }
  .wallet-lead { margin: var(--s1) var(--s3) var(--s2); color: var(--ink-soft); font: 400 0.9375rem/1.5 var(--font-sans); }
  .wallet-list { display: grid; gap: var(--s1); margin: 0; padding: 0 var(--s3); list-style: none; }
  .wallet-card { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 80px; padding: var(--s2); border-radius: 20px; background: var(--well); box-shadow: inset 0 0 0 1px var(--glass-edge); text-align: left; transition: transform var(--dur-press) var(--ease-out); }
  .wallet-card:active { transform: scale(0.99); }
  .wallet-logo { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: var(--surface); color: var(--ink-soft); box-shadow: var(--ring); }
  .wallet-logo img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; }
  .wallet-name { flex: 1; font: 700 1.0625rem/1.3 var(--font-display); letter-spacing: -0.01em; }
  .wallet-go { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s2); border-radius: 999px; background: var(--green); color: var(--on-green); font: 700 0.8125rem/1 var(--font-display); }
  .wallet-soon { margin: var(--s2) var(--s3) 0; padding: 12px var(--s2); border-radius: 14px; background: color-mix(in srgb, var(--green) 14%, var(--well)); font: 600 0.875rem/1.4 var(--font-sans); color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-spring) var(--spring); min-height: 44px; }
  .wallet-soon.is-on { opacity: 1; transform: none; }
  @media (max-width: 23rem) { .search-pill { display: none; } }
  @media (min-width: 40rem) { .wl-more { display: inline; } .wallet-btn { padding: 0 var(--s3); } }
  @media (hover: hover) { .wallet-btn:hover::before { opacity: 1; } .wallet-card:hover { box-shadow: inset 0 0 0 1px var(--green-deep); } }

  /* mint dialog and preview mark */
  .btn.is-inert[data-record="launch"] { cursor: pointer; }
  .modal { width: min(440px, calc(100% - 2 * var(--s3))); padding: var(--s4); border: 1px solid var(--glass-edge); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); text-align: center; }
  .modal::backdrop { background: color-mix(in srgb, var(--canvas) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .modal:not(.mint) h2 { margin-bottom: var(--s1); }
  .modal:not(.mint) p { margin-bottom: var(--s3); color: var(--ink-soft); }
  .avatar.has-mark { display: grid; place-items: center; background: color-mix(in srgb, var(--green) 18%, var(--well)); color: var(--green-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); }

  /* hover only where hover exists; touch never sees a fake hover */
  @media (hover: hover) {
    .nav a:hover { color: var(--ink); }
    .nav a:hover::before { opacity: 1; }
    .search-pill:hover { color: var(--ink); }
    a.social:hover::before { opacity: 1; }
    a.social:hover { color: var(--green-deep); }
    button.ca-value:hover .ca-icon[data-icon="copy"] { color: var(--ink); }
    a.btn-primary:hover::before { opacity: 1; }
    a.btn-primary { transition: transform var(--dur-hover) var(--ease-out); }
    a.btn-primary:hover { transform: translateY(-1px); }
    .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
    .text-link:hover svg { transform: translateX(3px); }
    .pill:not([aria-selected="true"]):hover { border-color: var(--ink-3); }
    .seg button:not(:disabled):hover { color: var(--ink); }
  }
  .btn:not(.is-inert):active, .pill:active, .seg button:not(:disabled):active, .switch:not(:disabled):active, .search-pill:active, a.social:active { transform: scale(0.97); transition: transform var(--dur-press) var(--ease-out); }
  @media (min-width: 48rem) {
    .brand span { display: inline; }
    .search-pill { padding: 0 var(--s2); }
    .search-text { display: inline; }
    .search-pill kbd { display: inline-flex; }
    .ca { grid-template-columns: auto 1fr auto; grid-template-areas: "label value badge"; gap: 0 var(--s2); max-width: calc(var(--max) - 2 * clamp(16px, 4vw, 32px)); width: calc(100% - 2 * clamp(16px, 4vw, 32px)); margin: 0 auto var(--s1); padding: 0 var(--s1) 0 var(--s2); border-width: 1px; border-radius: var(--radius-well); position: relative; top: auto; z-index: auto; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  @media (min-width: 64rem) {
    .search-pill { min-width: 224px; justify-content: flex-start; }
    .search-pill kbd { margin-left: auto; }
  }
}

@layer motion {
  @keyframes enter-down { 0% { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @keyframes enter-up { 0% { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  /* the hero holds the largest paint, so it moves but never starts invisible */
  @keyframes rise-in { 0% { transform: translateY(12px); } to { transform: none; } }
  @keyframes char-in { 0% { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes pop-in { 0% { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
  @keyframes bloom { 0% { opacity: 0; } 35% { opacity: 0.6; } to { opacity: 0.16; } }

  /* primary: one load sequence, about 700ms end to end. contract slot, header, hero, hero contents. */
  .ca { animation: enter-down 420ms var(--ease-expo) backwards; }
  .bar { animation: enter-down 420ms var(--ease-expo) 60ms backwards; }
  .hero { animation: rise-in 560ms var(--ease-expo) 120ms backwards; }
  .chip { animation: enter-up 420ms var(--ease-out) calc(240ms + var(--i, 0) * 30ms) backwards; }
  .hero-act { animation: enter-up 420ms var(--ease-out) 300ms backwards; }

  /* primary, only when the contract is stated: bloom, typed address, copy button settles in */
  .ca[data-state="stated"] .ca-bloom, .ca.is-soon .ca-bloom { animation: bloom 1100ms var(--ease-expo) 60ms backwards; }
  .ca[data-typing] .ch { animation: char-in 240ms var(--ease-out) backwards; animation-delay: calc(300ms + var(--c) * 12ms); }
  .ca[data-state="stated"] .ca-icon[data-icon="copy"] { animation: pop-in var(--dur-spring) var(--spring) 900ms backwards; }

  /* secondary: sections ease in as they scroll into view. Pure CSS enhancement: without scroll-driven
     animations nothing is hidden, and content is fully visible the moment it is on screen. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      [data-reveal] { animation: enter-up linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 4%) entry calc(45% + var(--i, 0) * 4%); }
    }
  }

  /* tab panel cross-fade via the View Transition API (JS falls back to a plain fade) */
  :root { view-transition-name: none; }
  #panel { view-transition-name: panel; }
  ::view-transition-old(panel), ::view-transition-new(panel) { animation-duration: 200ms; animation-timing-function: var(--ease-out); }
}

@layer utilities {
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}