/*  QUADRA · one stylesheet for the three pages.
    Ported by hand from the MotionSites design Scroll Landing: the ninety percent column, the twelve
    column hero, the glass bar with its mono links, the two part key, the word by word statement and
    the footer card. Navy black and the mark's own white, nothing else but one amber for a wrong
    chain. Outfit and JetBrains Mono, both vendored.  */

@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/outfit-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrainsmono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #030912;
  --panel: #060E1A;
  --panel-2: #0A1524;
  --white: #F6FCFE;
  --w90: rgba(246, 252, 254, 0.9);
  --w80: rgba(246, 252, 254, 0.8);
  --w64: rgba(246, 252, 254, 0.64);
  --w50: rgba(246, 252, 254, 0.5);
  --w40: rgba(246, 252, 254, 0.4);
  --w30: rgba(246, 252, 254, 0.3);
  --w25: rgba(246, 252, 254, 0.25);
  --w14: rgba(246, 252, 254, 0.14);
  --w10: rgba(246, 252, 254, 0.1);
  --w08: rgba(246, 252, 254, 0.08);
  --w05: rgba(246, 252, 254, 0.05);
  --amber: #FFB547;
  --buy: #3CE59B;             /* a buy, in the data only: the tape, the alerts, the candles */
  --sell: #FF5A76;            /* a sale, the same */
  --glass: rgba(12, 22, 38, 0.46);

  --sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* one easing set, declared once */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* the design's entrances */
  --ease-css: cubic-bezier(0.4, 0, 0.2, 1);        /* the design's flights */
  --ease-press: cubic-bezier(0.2, 0.8, 0.2, 1);    /* hover and press */
  --t-hover: 300ms;
  --t-press: 120ms;

  --col: 90%;
  --gap: 32px;
  --bar-h: 120px;

  color-scheme: dark;
  accent-color: var(--white);
}

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

html {
  background: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--w25) var(--ink);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--w25); border-radius: 4px; border: 2px solid var(--ink); }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-feature-settings: 'ss01' 0;
}

::selection { background: var(--white); color: var(--ink); }

img, svg, canvas { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code { font-family: var(--mono); font-size: 0.92em; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 12px 18px; background: var(--white); color: var(--ink);
  font: 600 12px/1 var(--mono); letter-spacing: 0.04em;
  transform: translateY(-160%); transition: transform var(--t-hover) var(--ease-press);
}
.skip:focus-visible { transform: none; }

:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.wrap { width: var(--col); margin: 0 auto; position: relative; }

.mlabel {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w50);
}
.mlabel .idx { color: var(--white); margin-right: 10px; }
.dim { color: var(--w50); }

/* ── the film ─────────────────────────────────────────── */

.film {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.stage:not(.film) { position: relative; }
.stage > .layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html.over-mark, html.over-mark body { cursor: grab; }
html.over-mark:active, html.over-mark:active body { cursor: grabbing; }
main, .foot { position: relative; z-index: 1; }

/* ── the loader: the square fills, locks, and lets the page in ── */

.loader {
  position: fixed; inset: 0; z-index: 60; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: opacity 520ms var(--ease-out), visibility 0s linear 520ms;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.ld { width: clamp(128px, 16vw, 196px); height: auto; overflow: visible; transition: transform 260ms cubic-bezier(0.7, 0, 0.84, 0); }
.ld .ld-liq { fill: url(#ld-grad); }
.loader.locked .ld { transform: scale(0.93); }
.loader.locked .ld-core { opacity: 1; }
.ld-core { opacity: 0; transition: opacity 220ms var(--ease-out); }
.ld-word { font: 500 10px/1 var(--mono); letter-spacing: 0.3em; color: var(--w50); font-variant-numeric: tabular-nums; }
.ld-word b { color: var(--white); font-weight: 600; display: inline-block; min-width: 3ch; text-align: right; }
html:not(.js) .loader { display: none; }

/* ── the bar ──────────────────────────────────────────── */

.bar {
  position: fixed; top: 0; left: 50%; z-index: 20;
  width: var(--col);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 32px 0;
  transform: translate(-50%, 0);
  transition: transform 500ms var(--ease-out), opacity 500ms var(--ease-out);
}
.bar.up { transform: translate(-50%, -150%); }
.js .bar { opacity: 0; }
.js .bar.on { opacity: 1; }

.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--white); }
.brand-mark { width: 26px; height: 26px; }
.brand-word { font: 300 19px/1 var(--sans); letter-spacing: 0.34em; margin-right: -0.34em; }
.brand-tick { font: 600 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--w64); border: 1px solid var(--w14); padding: 5px 6px 4px; margin-left: 8px; }

.nav {
  display: flex; align-items: stretch;
  background: var(--glass);
  -webkit-backdrop-filter: blur(40px) saturate(120%);
  backdrop-filter: blur(40px) saturate(120%);
  border: 1px solid var(--w05);
}
.links {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 0 24px;
  font: 500 12px/1 var(--mono); letter-spacing: -0.01em;
  min-width: 440px;
}

/* the design's nav item: the word flies up and out, its double flies in from below */
.fly { position: relative; overflow: hidden; display: inline-flex; padding: 4px 0; color: var(--w64); transition: color var(--t-hover) var(--ease-css); }
.fly-in { display: grid; }
.fly-in > span { grid-area: 1 / 1; white-space: nowrap; }
.fly-in > span + span { transform: translateY(150%); }
.fly:hover, .fly:focus-visible { color: var(--white); }
.fly.go .fly-in > span:first-child { animation: flyOutUp 400ms var(--ease-css) forwards; }
.fly.go .fly-in > span + span { animation: flyInUp 400ms var(--ease-css) forwards; }
@keyframes flyOutUp { from { transform: translateY(0); } to { transform: translateY(-150%); } }
@keyframes flyInUp { from { transform: translateY(150%); } to { transform: translateY(0); } }
.fly[aria-current='page'] { color: var(--white); }

.ikey {
  display: grid; place-items: center; width: 52px;
  border-left: 1px solid var(--w08); color: var(--w64);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color var(--t-hover) var(--ease-press), background var(--t-hover) var(--ease-press);
}
.ikey svg { width: 16px; height: 16px; }
.ikey:hover { color: var(--white); background: var(--w05); }
.ikey:active { transform: translateY(1px); }
.ikey.is-off { color: var(--w40); }
.ikey.is-off svg { opacity: 0.8; }

.wallet {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 20px; min-width: 150px; justify-content: center;
  border-left: 1px solid var(--w08);
  font: 600 12px/1 var(--mono); letter-spacing: -0.01em; color: var(--w90);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: color var(--t-hover) var(--ease-press), background var(--t-hover) var(--ease-press);
}
.wallet:hover { background: var(--w05); color: var(--white); }
.wallet:active { transform: translateY(1px); }
.wallet:disabled { cursor: progress; opacity: 0.7; }
.wdot { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 1px; transition: background var(--t-hover), border-color var(--t-hover), transform var(--t-hover) var(--ease-press); }
.wallet.is-on .wdot { background: var(--white); border-color: var(--white); transform: rotate(45deg); }
.wallet.is-off { color: var(--amber); }
.wallet.is-off .wdot { border-color: var(--amber); background: var(--amber); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 148px; padding: 20px 24px;
  background: var(--white); color: var(--ink);
  font: 700 12px/16px var(--mono); letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background var(--t-hover) var(--ease-press), transform var(--t-press) var(--ease-press);
}
.cta:hover { background: #D9E3EA; }
.cta:active { transform: scale(0.98); }
.cta[aria-current='page'] { background: #D9E3EA; }

.menu-key { display: none; width: 52px; border-left: 1px solid var(--w08); position: relative; }
.menu-key i { position: absolute; left: 17px; right: 17px; height: 1.5px; background: var(--white); transition: transform var(--t-hover) var(--ease-press), top var(--t-hover) var(--ease-press); }
.menu-key i:first-child { top: calc(50% - 4px); }
.menu-key i:last-child { top: calc(50% + 3px); }
.menu-key[aria-expanded='true'] i:first-child { top: 50%; transform: rotate(45deg); }
.menu-key[aria-expanded='true'] i:last-child { top: 50%; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 19;
  background: rgba(3, 9, 18, 0.97);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 120px 5% 48px;
}
.menu a:not(.cta) {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--w10);
  font: 500 clamp(28px, 8vw, 44px)/1.05 var(--sans); letter-spacing: -0.02em;
}
.menu a i { font: 500 11px/1 var(--mono); font-style: normal; color: var(--w40); letter-spacing: 0.1em; }
.menu .cta { width: 100%; margin-top: 28px; padding: 22px; }

/* ── the two part key ─────────────────────────────────── */

.duo { display: inline-flex; align-items: stretch; gap: 4px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.duo-t, .duo-a {
  background: var(--w08);
  transition: background var(--t-hover) var(--ease-press), color var(--t-hover) var(--ease-press);
}
.duo-t { padding: 20px 32px; font: 500 12px/1 var(--mono); letter-spacing: -0.01em; color: var(--w90); display: flex; align-items: center; }
.duo-a { padding: 0 24px; display: grid; place-items: center; color: var(--w90); overflow: hidden; }
.arw { display: grid; width: 20px; height: 20px; }
.arw svg { grid-area: 1 / 1; width: 20px; height: 20px; }
.arw svg + svg { transform: translateX(-250%); }
.duo.go .arw svg:first-child { animation: flyOutRight 500ms var(--ease-css) forwards; }
.duo.go .arw svg + svg { animation: flyInLeft 500ms var(--ease-css) forwards; }
@keyframes flyOutRight { from { transform: translateX(0); } to { transform: translateX(250%); } }
@keyframes flyInLeft { from { transform: translateX(-250%); } to { transform: translateX(0); } }
.duo:hover .duo-t, .duo:hover .duo-a, .duo:focus-visible .duo-t, .duo:focus-visible .duo-a { background: var(--white); color: var(--ink); }
.duo:active .duo-t, .duo:active .duo-a { transform: translateY(1px); }
.duo.light .duo-t, .duo.light .duo-a { background: var(--white); color: var(--ink); }
.duo.light .duo-t { padding: 20px 32px; font-weight: 700; }
.duo.light:hover .duo-t, .duo.light:hover .duo-a { background: #D9E3EA; }

/* ── screen 1 ─────────────────────────────────────────── */

.hero { height: 100vh; height: 100svh; min-height: 620px; display: flex; flex-direction: column; padding: 64px 0 92px; position: relative; }
.hero-grid {
  flex: 1; width: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto;
  column-gap: var(--gap);
}
.hero-live { grid-column: 1 / span 5; grid-row: 1; align-self: start; margin-top: 76px; display: grid; gap: 8px; }
.live-line { font: 500 11px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--w80); font-variant-numeric: tabular-nums; }
.live-line b { font-weight: 600; color: var(--white); }
.pulse { display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--white); vertical-align: 1px; animation: pulse 2.4s var(--ease-css) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.hero-p {
  grid-column: 8 / span 5; grid-row: 1; align-self: center; justify-self: end;
  max-width: 460px; text-align: right; position: relative; top: -90px;
  font-size: clamp(1rem, 1.6vw, 1.375rem); line-height: 1.3; color: var(--w64);
}
.hero-p b { font-weight: 600; color: var(--white); }
.hero-h1 {
  grid-column: 1 / span 8; grid-row: 2; align-self: end;
  font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.05; letter-spacing: -0.03em;
  white-space: nowrap; text-wrap: nowrap;
}
.hero-cta { grid-column: 8 / span 5; grid-row: 2; align-self: end; justify-self: end; }

/* ── entrances, once ──────────────────────────────────── */

.js .rv { opacity: 0; transform: translateY(30px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* the title rises out of its own mask, line after line */
.lines .ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines .ln > span { display: inline-block; }
.js .lines .ln > span { transform: translateY(108%); transition: transform 1100ms var(--ease-out); }
.js .lines .ln:nth-child(2) > span { transition-delay: 130ms; }
.js .lines.in .ln > span { transform: none; }

/* section titles come up through a mask, a beat after their label */
.js .sec-head.rv h2, .js .band-head.rv h2, .js .inst-head.rv .inst-title {
  clip-path: inset(0 0 100% 0); transform: translateY(32%);
  transition: clip-path 1000ms var(--ease-out) 90ms, transform 1000ms var(--ease-out) 90ms;
}
.js .sec-head.rv.in h2, .js .band-head.rv.in h2, .js .inst-head.rv.in .inst-title { clip-path: inset(-12% -6% -18% -6%); transform: none; }

/* the rule's pictograms: the mark itself, each showing its own line of the rule. Their resting
   state is a still picture, which is what reduced motion keeps */
.pk { overflow: visible; }
.pk .pk-base { opacity: 0.3; }
.pk .pk-line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pk .pk-dash { stroke-dasharray: 2 4; opacity: 0.5; }
.pk .pk-t text { font: 500 13px var(--mono); fill: currentColor; opacity: 0.6; text-anchor: middle; }
.pk-drop { transform: translate(86px, 33px) scale(0.8); }
.pk-q { opacity: 0; }
.pk-q0 { opacity: 1; }
.pk-shock { opacity: 0; stroke-width: 1.2; }
.pk-s1 { transform: translateY(12px); opacity: 0.72; }
.pk-s2 { transform: translateY(24px); opacity: 0.48; }
.pk-s3 { transform: translateY(36px); opacity: 0.26; }
.js .step.rv .pk { opacity: 0; transform: scale(0.9); transition: opacity 900ms var(--ease-out) 200ms, transform 900ms var(--ease-out) 200ms; }
.js .step.rv.in .pk { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .step.rv .pk-fill { transform-box: fill-box; transform-origin: center; transform: scale(0.15); transition: transform 1600ms var(--ease-out) 300ms; }
  .js .step.rv .pk g:nth-of-type(2) .pk-fill { transition-delay: 550ms; }
  .js .step.rv .pk g:nth-of-type(3) .pk-fill { transition-delay: 800ms; }
  .js .step.rv .pk g:nth-of-type(4) .pk-fill { transition-delay: 1050ms; }
  .js .step.rv.in .pk-fill { transform: none; }
  :is(.step.in, .law-pk) .pk-drop { animation: pk-drop 2.8s var(--ease-out) infinite; }
  :is(.step.in, .law-pk) .pk-body { transform-box: fill-box; transform-origin: center; animation: pk-gulp 2.8s ease-out infinite; }
  :is(.step.in, .law-pk) .pk-price { animation: pk-price 5.6s ease-in-out infinite; }
  :is(.step.in, .law-pk) .pk-q { animation: pk-q 4.8s steps(1, end) infinite; }
  :is(.step.in, .law-pk) .pk-q1 { animation-delay: 1.2s; }
  :is(.step.in, .law-pk) .pk-q2 { animation-delay: 2.4s; }
  :is(.step.in, .law-pk) .pk-q3 { animation-delay: 3.6s; }
  :is(.step.in, .law-pk) .pk-shock { transform-box: fill-box; transform-origin: center; animation: pk-shock 3.4s ease-out infinite; }
  :is(.step.in, .law-pk) .pk-slice { opacity: 0; animation: pk-slice 3.2s cubic-bezier(0.5, 0, 0.75, 0) infinite; }
  :is(.step.in, .law-pk) .pk-s1 { animation-delay: 0.8s; }
  :is(.step.in, .law-pk) .pk-s2 { animation-delay: 1.6s; }
  :is(.step.in, .law-pk) .pk-s3 { animation-delay: 2.4s; }
}
@keyframes pk-drop {
  0% { transform: translate(124px, 27px) scale(1); opacity: 0; }
  14% { opacity: 1; }
  60% { transform: translate(88px, 33px) scale(0.9); opacity: 1; }
  72%, 100% { transform: translate(78px, 35px) scale(0.2); opacity: 0; }
}
@keyframes pk-gulp { 0%, 62% { transform: scale(1); } 74% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes pk-price { 0%, 100% { transform: translateY(-30px); } 50% { transform: translateY(30px); } }
@keyframes pk-q { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes pk-shock { 0%, 26% { transform: scale(1); opacity: 0; } 30% { opacity: 0.85; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes pk-slice {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  66% { transform: translateY(42px); opacity: 1; }
  76%, 100% { transform: translateY(46px) scale(1.8, 0.2); opacity: 0; }
}

/* the main keys lean toward the hand */
.magnet { transition: transform 260ms var(--ease-press); will-change: transform; }

/* ── the instrument ───────────────────────────────────── */

.core { padding: 120px 0 40px; scroll-margin-top: 0; }
.instrument { background: var(--panel); border: 1px solid var(--w10); position: relative; }
.instrument::before, .instrument::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--white); border-style: solid; pointer-events: none;
}
.instrument::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.instrument::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.inst-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 24px;
  padding: 24px 32px 20px; border-bottom: 1px solid var(--w10);
}
.inst-head .mlabel { grid-column: 1 / -1; }
.inst-title { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -0.025em; }
.chip { font: 500 10px/1 var(--mono); letter-spacing: 0.12em; color: var(--w64); border: 1px solid var(--w14); padding: 8px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip b { color: var(--white); font-weight: 600; }

.inst-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.inst-draw { border-right: 1px solid var(--w10); position: relative; min-height: 560px; }
.inst-draw > .inst-stage { position: absolute; inset: 0; cursor: crosshair; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.inst-stage.over-mark { cursor: grab; }
.inst-stage.over-mark:active { cursor: grabbing; }
.stir {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  font: 500 9.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--w40); white-space: nowrap;
}
.row.hl { background: var(--w08); }
.row { cursor: default; }
.inst-side { padding: 24px 32px 26px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.fig-n {
  font: 500 clamp(5rem, 8.6vw, 8rem)/0.8 var(--sans); letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline;
  margin-left: -0.04em;
}
.fig-pc { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 0.08em; color: var(--w64); }
.fig-cap { font-size: 16px; color: var(--w64); margin-top: 12px; }
.fig-wait { font: 500 11px/1.5 var(--mono); letter-spacing: 0.08em; color: var(--w50); margin-top: 10px; }
.fig-wait b { color: var(--white); font-weight: 600; }
.fig.locked .fig-wait b { color: var(--white); }

.rows { list-style: none; display: grid; border-top: 1px solid var(--w10); }
.row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 76px 48px; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--w10);
  transition: background 300ms var(--ease-css);
}
.rn { font: 500 17px/1 var(--sans); letter-spacing: -0.01em; }
.rl { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.08em; color: var(--w64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb { height: 2px; background: var(--w14); position: relative; overflow: hidden; }
.rb i { position: absolute; inset: 0; background: var(--white); transform-origin: left; transform: scaleX(0); transition: transform 280ms var(--ease-out); }
.rp { font: 600 12px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.row.wait .rl { color: var(--white); }
.row.wait .rn::after { content: ''; display: inline-block; width: 5px; height: 5px; background: var(--white); margin-left: 6px; vertical-align: 3px; animation: pulse 1.6s var(--ease-css) infinite; }
.row.full .rp { color: var(--white); }
.row.tick { background: var(--w08); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; border-bottom: 1px solid var(--w10); }
.stats > div { padding: 11px 0; border-top: 1px solid var(--w08); }
.stats > div:nth-child(-n+3) { border-top: 0; padding-top: 0; }
.stats dt { font: 500 10px/1.3 var(--mono); letter-spacing: 0.12em; color: var(--w40); }
.stats dd { font: 500 14px/1.3 var(--mono); font-variant-numeric: tabular-nums; margin-top: 5px; white-space: nowrap; }
.stats dd.tick { animation: ack 400ms var(--ease-css); }
@keyframes ack { 0% { color: var(--white); } 40% { color: #FFFFFF; font-weight: 700; } 100% { color: inherit; } }
.trace { width: 100%; height: 78px; }
.unit { font: 500 9.5px/1.4 var(--mono); letter-spacing: 0.1em; color: var(--w40); margin-top: 8px; }

.trade { display: grid; gap: 10px; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.size {
  padding: 12px 8px; background: var(--w05); border: 1px solid transparent;
  font: 500 12px/1 var(--mono); color: var(--w64);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background var(--t-hover) var(--ease-press), color var(--t-hover) var(--ease-press), border-color var(--t-hover) var(--ease-press);
}
.size:hover { color: var(--white); background: var(--w08); }
.size:active { transform: translateY(1px); }
.size[aria-checked='true'] { color: var(--white); border-color: var(--w30); background: var(--w08); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tkey {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; background: var(--w08);
  font: 700 13px/1 var(--mono); letter-spacing: 0.02em; color: var(--white);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background var(--t-hover) var(--ease-press), color var(--t-hover) var(--ease-press), transform var(--t-press) var(--ease-press);
}
.tkey .tsz { font-weight: 500; color: inherit; opacity: 0.6; }
.tkey:hover { background: var(--white); color: var(--ink); }
.tkey:active { transform: scale(0.985); }
.tkey:disabled { cursor: not-allowed; opacity: 0.4; background: var(--w05); color: var(--w64); }

.note { font: 500 12px/1.55 var(--mono); color: var(--w80); min-height: 3.1em; letter-spacing: -0.005em; }
.note b { color: var(--white); font-weight: 600; }
.own { font: 500 10.5px/1.5 var(--mono); color: var(--w40); letter-spacing: 0.02em; margin-top: auto; }

/* ── the statement ────────────────────────────────────── */

.statement { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 200px 0 120px; }
.reveal-text {
  max-width: min(58vw, 860px);
  font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.03em;
  transform-origin: 0% 50%;
}
.reveal-text .w { display: inline-block; white-space: pre; will-change: opacity, filter; }
.three { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: 96px; }
.three-brand { grid-column: span 4; }
.three-col { grid-column: span 4; }
.tb-row { display: flex; align-items: center; gap: 16px; }
.tb-mark { width: 44px; height: 44px; }
.tb-word { font: 300 20px/1 var(--sans); letter-spacing: 0.34em; }
.tb-tag { font: 500 11px/1.8 var(--mono); letter-spacing: 0.18em; color: var(--w64); margin-top: 18px; }
.three-col h3 { font-size: 20px; line-height: 1.25; }
.three-col p { font-size: 15px; line-height: 1.65; color: var(--w80); margin-top: 10px; max-width: 46ch; }

/* ── the rule ─────────────────────────────────────────── */

.rule { padding: 120px 0 140px; }
.sec-head { display: grid; gap: 18px; margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; }
.sec-lede { font-size: 18px; line-height: 1.6; color: var(--w80); max-width: 58ch; }
.steps { list-style: none; border-top: 1px solid var(--w14); }
.step {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
  padding: 30px 0; border-bottom: 1px solid var(--w10);
  background: rgba(3, 9, 18, 0.72);
}
.s-n { grid-column: 1; font: 500 12px/1 var(--mono); color: var(--w50); padding-top: 8px; }
.s-pic { grid-column: 2 / span 2; width: 92px; height: 92px; color: var(--white); margin-top: -12px; }
.s-t { grid-column: 4 / span 3; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; padding-top: 4px; }
.s-p { grid-column: 7 / span 6; font-size: 17px; line-height: 1.6; color: var(--w80); max-width: 60ch; }
.s-p code { color: var(--white); }

/* ── the band: the invariants on the blocks' white ────── */

.band { background: var(--white); color: var(--ink); position: relative; padding: 120px 0 110px; }
.band::before {
  /* the core, cut out of the band's top edge */
  content: ''; position: absolute; top: -1px; left: 50%; width: 64px; height: 32px;
  transform: translateX(-50%); background: var(--ink); border-radius: 0 0 8px 8px;
}
.band-head { display: grid; gap: 18px; margin-bottom: 48px; }
.mlabel.ink { color: rgba(3, 9, 18, 0.56); }
.band h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; }
.invs { list-style: none; border-top: 1px solid rgba(3, 9, 18, 0.16); }
.invs li {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid rgba(3, 9, 18, 0.12);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.3; letter-spacing: -0.015em;
}
.invs .iv { font: 600 13px/1 var(--mono); letter-spacing: 0.06em; }
.invs li p { text-wrap: pretty; }
.invs code { font-size: 0.85em; }
.band-note { font: 500 12px/1.6 var(--mono); color: rgba(3, 9, 18, 0.64); margin-top: 28px; letter-spacing: 0.02em; }
.band ::selection { background: var(--ink); color: var(--white); }
.band :focus-visible { outline-color: var(--ink); }

/* ── what can go wrong ────────────────────────────────── */

.wrong { padding: 140px 0 80px; }
.risks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.risk {
  grid-column: 4 / span 9;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 24px;
  padding: 28px 0 30px; border-top: 1px solid var(--w14);
  background: rgba(3, 9, 18, 0.72);
}
.risk:last-child { border-bottom: 1px solid var(--w14); }
.r-n { grid-row: span 2; font: 500 12px/1 var(--mono); color: var(--w50); padding-top: 9px; }
.risk h3 { font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.risk p:last-child { font-size: 17px; line-height: 1.6; color: var(--w64); margin-top: 12px; max-width: 64ch; }

/* ── the contract box ─────────────────────────────────── */

.ca { padding: 40px 0 260px; }
.ca-box {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 16px 24px;
  padding: 24px 28px; background: var(--panel); border: 1px solid var(--w10);
}
.ca-addr { font: 500 15px/1.4 var(--mono); color: var(--white); overflow-wrap: anywhere; }
.ca-addr.waiting { color: var(--w64); }
.ca-keys { display: flex; gap: 4px; }
.ca-note { grid-column: 1 / -1; font-size: 14px; color: var(--w50); }

/* before launch: the gates, in public, with their state */
.status { margin-top: 24px; border: 1px solid var(--w10); background: rgba(6, 14, 26, 0.86); }
.status-top { display: flex; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--w10); font: 500 10px/1.4 var(--mono); letter-spacing: 0.14em; color: var(--w50); }
.status-top span:first-child { color: var(--white); }
.status-rows { list-style: none; }
.status-rows li { display: grid; grid-template-columns: 40px minmax(0, 3fr) minmax(0, 6fr) 110px; gap: 18px; align-items: baseline; padding: 16px 22px; border-bottom: 1px solid var(--w08); }
.status-rows li:last-child { border-bottom: 0; }
.status-rows .sn { font: 500 11px/1 var(--mono); color: var(--w40); }
.status-rows .sk { font-size: 16px; color: var(--white); letter-spacing: -0.01em; }
.status-rows .sv { font-size: 14px; line-height: 1.55; color: var(--w64); }
.status-rows .ss { justify-self: end; font: 600 10px/1 var(--mono); letter-spacing: 0.14em; color: var(--w64); padding: 6px 8px; border: 1px solid var(--w14); white-space: nowrap; }
.skey {
  padding: 12px 18px; background: var(--w08); font: 600 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--white);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background var(--t-hover) var(--ease-press), color var(--t-hover) var(--ease-press);
}
.skey:hover { background: var(--white); color: var(--ink); }
.skey:active { transform: translateY(1px); }
.skey:disabled { cursor: not-allowed; opacity: 0.4; }
.skey:disabled:hover { background: var(--w08); color: var(--white); }

/* ── the footer card ──────────────────────────────────── */

.foot { padding-bottom: 64px; }
.foot-card { background: var(--panel); border: 1px solid var(--w10); padding: clamp(32px, 4vw, 64px); }
.foot-cta {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px;
  border-bottom: 1px solid var(--w10); padding-bottom: clamp(48px, 4vw, 80px);
}
.foot-cta h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
.foot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(32px, 3vw, 48px);
  padding-top: clamp(48px, 4vw, 64px);
}
.fg-brand .brand-mark { width: 20px; height: 20px; }
.fg-brand .brand-word { font-size: 15px; }
.fg-brand p { font-size: 13px; line-height: 1.6; color: var(--w40); max-width: 240px; margin-top: 16px; }
.fg-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fg-h { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--w30); margin-bottom: 4px; }
.fg-col a, .fg-col span { font-size: 14px; color: var(--w64); transition: color var(--t-hover) var(--ease-press); }
.fg-col a:hover { color: var(--white); }
.fg-line { font-size: 15px; line-height: 1.4; color: var(--white); max-width: 18ch; }
.foot-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 40px;
  margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--w10);
}
.legal { font: 500 11px/1.7 var(--mono); color: var(--w40); letter-spacing: 0.02em; max-width: 86ch; }
.foot-links { display: flex; gap: 16px; font: 500 11px/1.7 var(--mono); letter-spacing: 0.1em; color: var(--w25); white-space: nowrap; }
.foot-links a { color: var(--w40); transition: color var(--t-hover) var(--ease-press); }
.foot-links a:hover { color: var(--white); }

/* ── the law page ─────────────────────────────────────── */

.page-head { padding: 200px 0 72px; }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; margin-top: 22px; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.45; color: var(--w64); max-width: 60ch; margin-top: 26px; }
.lede b { color: var(--white); font-weight: 600; }
.page-head .live-line { margin-top: 22px; }

.law { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-bottom: 160px; }
.toc { grid-column: 1 / span 3; position: sticky; top: 40px; align-self: start; padding-top: 6px; }
.toc ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--w10); }
.toc a {
  display: flex; gap: 12px; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent;
  font: 500 11.5px/1.35 var(--mono); color: var(--w50); letter-spacing: 0.02em;
  transition: color var(--t-hover) var(--ease-press), border-color var(--t-hover) var(--ease-press);
}
.toc a i { font-style: normal; color: var(--w30); min-width: 20px; }
.toc a:hover { color: var(--white); }
.toc a.on { color: var(--white); border-left-color: var(--white); }
.toc a.on i { color: var(--white); }
.law-body { grid-column: 4 / span 8; min-width: 0; }
.law-sec { padding: 56px 0; border-top: 1px solid var(--w10); scroll-margin-top: 24px; }
.law-sec:first-child { border-top: 0; padding-top: 0; }
.law-sec h2 { display: flex; gap: 18px; align-items: baseline; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.1; letter-spacing: -0.025em; }
.law-sec h2 .n { font: 500 13px/1 var(--mono); color: var(--w50); letter-spacing: 0.04em; }
.law-sec p, .law-sec li { font-size: 17.5px; line-height: 1.65; color: var(--w80); max-width: 68ch; }
.law-sec p { margin-top: 18px; }
.law-sec p b, .law-sec li b { color: var(--white); font-weight: 600; }
.law-sec ul, .law-sec ol { margin-top: 18px; padding-left: 20px; display: grid; gap: 10px; }
.law-sec code { color: var(--white); }
.formula {
  margin-top: 24px; padding: 18px 22px; background: var(--panel); border: 1px solid var(--w10); border-left: 2px solid var(--white);
  font: 500 14px/1.7 var(--mono); color: var(--white); white-space: pre-wrap; max-width: 560px;
}
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 24px; max-width: 560px; }
.grid4 div { background: var(--panel); border: 1px solid var(--w10); padding: 16px 18px; }
.grid4 b { display: block; font: 500 22px/1 var(--sans); color: var(--white); }
.grid4 span { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--w64); margin-top: 8px; }
.grid4 small { display: block; font-size: 13px; color: var(--w50); margin-top: 4px; }

.tbl { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 14.5px; }
.tbl th { text-align: left; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; color: var(--w40); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--w14); }
.tbl td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--w10); color: var(--w80); vertical-align: top; line-height: 1.5; }
.tbl td:first-child { color: var(--white); white-space: nowrap; }
.tbl td.v { font-family: var(--mono); font-size: 13px; color: var(--white); white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }

/* the arithmetic: any numbers, worked the way the pool works them */
.calc { margin-top: 32px; border: 1px solid var(--w10); background: var(--panel); max-width: 760px; }
.calc-top { display: flex; justify-content: space-between; gap: 12px; margin: 0 !important; padding: 13px 18px; border-bottom: 1px solid var(--w10); font: 500 10px/1.4 var(--mono) !important; letter-spacing: 0.14em; color: var(--w50) !important; }
.calc-top span:first-child { color: var(--white); white-space: nowrap; }
.calc-top span:last-child { text-align: right; }
.calc-in { display: grid; gap: 2px; padding: 12px 18px 16px; border-bottom: 1px solid var(--w10); }
.cr { display: grid; grid-template-columns: 150px minmax(0, 1fr) 84px; gap: 16px; align-items: center; padding: 8px 0; font-size: 15px; color: var(--w80); }
.cr output { font: 500 13px/1 var(--mono); color: var(--white); text-align: right; font-variant-numeric: tabular-nums; }
.cr input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
.cr input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--w14); }
.cr input[type="range"]::-moz-range-track { height: 2px; background: var(--w14); }
.cr input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 3px; background: var(--white); }
.cr input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 3px; background: var(--white); }
.cr input[type="range"]:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }
.calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc-out div { padding: 14px 18px; border-bottom: 1px solid var(--w08); }
.calc-out div:nth-child(odd) { border-right: 1px solid var(--w08); }
.calc-out dt { font: 500 10px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--w50); text-transform: uppercase; }
.calc-out dd { margin-top: 6px; font: 500 20px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--white); font-variant-numeric: tabular-nums; }
.calc-verdict { grid-column: 1 / -1; border-right: 0 !important; }
.calc-verdict dd { color: var(--buy); }
.calc-verdict.bad dd { color: var(--sell); }
.calc-note { margin: 0 !important; padding: 12px 18px 16px; font-size: 14px !important; color: var(--w64) !important; }

/* check it yourself: numbered lines, read on the explorer */
.checklist { list-style: none; padding-left: 0 !important; counter-reset: ck; gap: 0 !important; border-top: 1px solid var(--w10); max-width: 760px; }
.checklist li { counter-increment: ck; position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--w10); max-width: none; }
.checklist li::before { content: counter(ck, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 500 12px/1.9 var(--mono); color: var(--w50); }

.faq { margin-top: 24px; border-top: 1px solid var(--w14); }
.faq details { border-bottom: 1px solid var(--w10); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding: 20px 0; font-size: 19px; line-height: 1.35; letter-spacing: -0.01em;
  transition: color var(--t-hover) var(--ease-press);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 20px/1 var(--mono); color: var(--w50); transition: transform var(--t-hover) var(--ease-press); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--white); }
.faq summary:hover { color: var(--white); }
.faq details p { margin: 0 0 22px; }

/* ── the app page ─────────────────────────────────────── */

.app-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding-bottom: 160px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--w10); min-width: 0; }
.p-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--w10); }
.p-title { font: 600 11px/1 var(--mono); letter-spacing: 0.12em; }
.tag { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--w50); border: 1px solid var(--w14); padding: 6px 8px; white-space: nowrap; }
.tag.warn { color: var(--amber); border-color: rgba(255, 181, 71, 0.4); }
.p-pad { padding: 22px; display: grid; gap: 20px; }
.a-square { grid-column: 1 / span 5; }
.a-ticket { grid-column: 6 / span 4; }
.a-right { grid-column: 10 / span 3; display: grid; gap: 16px; }
.a-stage { width: 100%; aspect-ratio: 1 / 1; cursor: crosshair; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.a-stage.over-mark { cursor: grab; }
.kv { display: grid; gap: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--w08); }
.kv dt { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--w50); text-transform: uppercase; }
.kv dt small { display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: 0.06em; color: var(--w40); }
.kv dd { font: 500 13px/1.4 var(--mono); color: var(--white); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv dd.bad { color: var(--amber); }
.kv dd.waiting { color: var(--w50); }
.mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mini div { background: var(--w05); padding: 10px 10px 12px; display: grid; gap: 6px; }
.mini b { font: 500 16px/1 var(--sans); }
.mini span { font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.mini i { display: block; height: 2px; background: var(--w14); position: relative; overflow: hidden; }
.mini i::after { content: ''; position: absolute; inset: 0; background: var(--white); transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform 280ms var(--ease-out); }
.keyrow { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.fine { font: 500 10.5px/1.6 var(--mono); color: var(--w40); letter-spacing: 0.01em; }

.gate { border: 1px solid var(--w14); background: var(--panel-2); padding: 18px; display: grid; gap: 14px; }
.gate p { font-size: 14.5px; line-height: 1.55; color: var(--w80); }
.gate .skey { justify-self: start; }
.gate.nudge { animation: nudge 520ms var(--ease-css); border-color: var(--white); }
@keyframes nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.field { display: grid; gap: 8px; }
.field .inrow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--w14); background: var(--ink); padding: 0 14px; }
.field .inrow span { font: 500 13px/1 var(--mono); color: var(--w40); }
.field input {
  flex: 1; min-width: 0; background: none; border: 0; padding: 14px 0; color: var(--white);
  font: 500 18px/1 var(--mono); font-variant-numeric: tabular-nums;
}
.field input:focus { outline: none; }
.field .inrow:focus-within { border-color: var(--white); }
.field input:disabled { cursor: not-allowed; color: var(--w40); }

.verdict { font-size: 16px; line-height: 1.55; color: var(--w80); min-height: 4.6em; }
.verdict b { color: var(--white); font-weight: 600; }
.sendrow { display: grid; gap: 4px; }
.wide {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 16px 18px; background: var(--w08); font: 700 12px/1.2 var(--mono); letter-spacing: 0.02em; color: var(--white);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background var(--t-hover) var(--ease-press), color var(--t-hover) var(--ease-press);
}
.wide small { font-weight: 500; font-size: 10.5px; color: inherit; opacity: 0.7; text-align: right; }
.wide:hover:not(:disabled) { background: var(--white); color: var(--ink); }
.wide:active:not(:disabled) { transform: translateY(1px); }
.wide:disabled { cursor: not-allowed; color: var(--w50); background: var(--w05); }
.wide.primary { background: var(--white); color: var(--ink); }
.wide.primary:hover:not(:disabled) { background: #D9E3EA; }
.wide.primary:disabled { background: var(--w05); color: var(--w50); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.seg .size { padding: 14px 8px; font-weight: 700; }
.seg .size[aria-pressed='true'] { background: var(--white); color: var(--ink); border-color: var(--white); }
.size:disabled, .size:disabled:hover { cursor: not-allowed; opacity: 0.4; background: var(--w05); color: var(--w64); border-color: transparent; }
.a-square .ca-addr, .a-right .ca-addr { display: block; font-size: 13px; }
.a-right .ca-keys { margin-top: 2px; }

/* the law page and the app keep the film quiet behind them */
.quiet main, .quiet .foot { z-index: 1; }

/* ── the tape: the toy's trades running under the first screen ── */

.tape {
  position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%);
  height: 42px; display: flex; align-items: stretch; z-index: 2;
  border-top: 1px solid var(--w10); border-bottom: 1px solid var(--w10);
  background: rgba(3, 9, 18, 0.86);
}
.tape-label {
  display: flex; align-items: center; gap: 10px; padding: 0 18px 0 5vw; flex: none;
  font: 600 10px/1 var(--mono); letter-spacing: 0.16em; color: var(--white);
  border-right: 1px solid var(--w10); background: var(--ink); position: relative; z-index: 1;
}
.tape-run { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.tape-track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.tk {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; height: 100%;
  font: 500 11px/1 var(--mono); color: var(--w80); letter-spacing: 0.02em;
  border-right: 1px solid var(--w08); font-variant-numeric: tabular-nums;
}
.tk b { color: var(--white); font-weight: 600; }
.tk i { font-style: normal; }
.tk.buy i { color: var(--buy); }
.tk.sell i { color: var(--sell); }
.tk.full { color: var(--white); }
.tk.lock { background: var(--white); color: var(--ink); font-weight: 600; }
.tk.lock b { color: var(--ink); }
.tk.burn { color: var(--white); }
.tk.you { box-shadow: inset 0 -2px 0 var(--white); }

.tape.inline { position: relative; left: 50%; bottom: auto; transform: translateX(-50%); margin: -24px 0 28px; }
.tape-idle {
  position: absolute; inset: 0; display: flex; align-items: center; margin: 0; padding: 0 18px;
  font: 500 10px/1 var(--mono); letter-spacing: 0.16em; color: var(--w40); white-space: nowrap;
}
.tape-run.busy .tape-idle { display: none; }

/* ── the hint under the live line ── */
.hint { font: 500 10px/1.4 var(--mono); letter-spacing: 0.16em; color: var(--w40); margin-top: 6px; }
.hint b { color: var(--white); font-weight: 600; }
.on-touch { display: none; }
@media (pointer: coarse) { .on-fine { display: none; } .on-touch { display: inline; } }

/* ── alerts, bottom right, while the square is in view ── */

.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 46; width: min(320px, calc(100vw - 32px)); transition: bottom 420ms var(--ease-out); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  position: relative; padding: 11px 14px 12px 16px;
  background: rgba(8, 16, 29, 0.97); border: 1px solid var(--w14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  animation: toastIn 420ms var(--ease-out) both;
}
.toast::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--white); }
.toast.buy::before { background: var(--buy); }
.toast.sell::before { background: var(--sell); }
.toast .th { display: flex; align-items: baseline; gap: 10px; font: 600 10px/1.3 var(--mono); letter-spacing: 0.14em; color: var(--white); }
.toast .tt { min-width: 0; }
.toast.buy .tt { color: var(--buy); }
.toast.sell .tt { color: var(--sell); }
.toast .ta { margin-left: auto; color: var(--white); letter-spacing: 0.02em; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.toast .tc { color: var(--w50); letter-spacing: 0.02em; font-size: 11px; font-variant-numeric: tabular-nums; }
.toast .ta:empty + .tc { margin-left: auto; }
.toast .tx { margin-top: 5px; font: 400 13px/1.45 var(--sans); color: var(--w80); }
.toast.lock { background: var(--white); border-color: var(--white); }
.toast.lock::before { background: var(--ink); }
.toast.lock .th, .toast.lock .ta { color: var(--ink); }
.toast.lock .tc { color: rgba(3, 9, 18, 0.5); }
.toast.lock .tx { color: rgba(3, 9, 18, 0.78); }
.toast.bump { animation: toastBump 300ms var(--ease-out); }
.toast.out { animation: toastOut 360ms var(--ease-css) both; }
@keyframes toastBump { from { transform: translateX(-6px); } to { transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }

/* ── the lock, said across the bottom of the window ── */

.takeover {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: 64px; overflow: hidden;
  background: var(--white); color: var(--ink); pointer-events: none;
  transform: translateY(101%); transition: transform 520ms var(--ease-out);
}
.takeover.on { transform: none; }
body.tape-seen .toasts { bottom: 62px; }
body.band-on .toasts { bottom: 88px; }
.tko-track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; white-space: nowrap; animation: tko 7s linear infinite; }
.tko-track span { font: 600 30px/1 var(--sans); letter-spacing: -0.02em; padding: 0 28px; display: inline-flex; align-items: center; gap: 28px; }
.tko-track span::after { content: ''; width: 14px; height: 14px; background: var(--ink); border-radius: 3px; }
@keyframes tko { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── the drop that follows the hand ── */

.drop-cursor {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--white); mix-blend-mode: difference; opacity: 0;
  transition: width 220ms var(--ease-press), height 220ms var(--ease-press), margin 220ms var(--ease-press), opacity 300ms;
}
.drop-cursor.on { opacity: 1; }
.drop-cursor.link { width: 38px; height: 38px; margin: -19px 0 0 -19px; background: transparent; box-shadow: inset 0 0 0 1px var(--white); }
.drop-tag {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; opacity: 0;
  font: 700 10px/1 var(--mono); letter-spacing: 0.14em; padding: 5px 7px; color: var(--ink); background: var(--white);
  transition: opacity 200ms;
}
.drop-tag.on { opacity: 1; }
.drop-tag.buy { background: var(--buy); }
.drop-tag.sell { background: var(--sell); }

/* ── the token, scanned ── */

.token { padding: 140px 0 120px; }
.scan-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.scan {
  grid-column: 1 / span 8; background: var(--panel); border: 1px solid var(--w10); position: relative; overflow: hidden;
}
.scan-top, .scan-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px;
  font: 600 10px/1.3 var(--mono); letter-spacing: 0.14em; color: var(--w64);
}
.scan-top { border-bottom: 1px solid var(--w10); }
.scan-foot { border-top: 1px solid var(--w10); color: var(--white); }
.scan-foot b { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.checks { list-style: none; }
.check {
  display: grid; grid-template-columns: 22px minmax(170px, 0.9fr) minmax(0, 1.6fr); gap: 16px; align-items: baseline;
  padding: 15px 20px; border-bottom: 1px solid var(--w08);
}
.check:last-child { border-bottom: 0; }
.check .box { width: 12px; height: 12px; border: 1px solid var(--w40); border-radius: 2px; position: relative; top: 1px; transition: background 260ms var(--ease-press), border-color 260ms; }
.check .box::after { content: ''; position: absolute; left: 3px; top: 0; width: 4px; height: 7px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform 260ms var(--ease-press); }
.check.ok .box { background: var(--white); border-color: var(--white); }
.check.ok .box::after { transform: rotate(45deg) scale(1); }
.check .k { font: 600 12px/1.35 var(--mono); letter-spacing: 0.06em; color: var(--white); }
.check .v { font-size: 15px; line-height: 1.5; color: var(--w64); }
.scanline { position: absolute; left: 0; right: 0; height: 60px; top: -60px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(246, 252, 254, 0.06), transparent); }
.scan.run .scanline { animation: scanline 1500ms var(--ease-css) 1; }
@keyframes scanline { from { top: -60px; } to { top: 100%; } }
/* the supply: one ring, all of it in the pool */
.dist { grid-column: 9 / span 4; border: 1px solid var(--w10); background: rgba(6, 14, 26, 0.86); }
.dist-top { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--w10); font: 500 10px/1.4 var(--mono); letter-spacing: 0.14em; color: var(--w50); }
.dist-top span:first-child { color: var(--white); }
.dist-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; }
.dist-ring { position: relative; width: 100%; margin: 0; }
.dist-ring svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.dr-track { fill: none; stroke: var(--w10); stroke-width: 10; }
.dr-full { fill: none; stroke: var(--white); stroke-width: 10; stroke-dasharray: 100; stroke-dashoffset: 0; }
.dr-ticks { stroke: var(--ink); stroke-width: 1.5; }
.js .dist.rv .dr-full { stroke-dashoffset: 100; transition: stroke-dashoffset 1600ms var(--ease-out) 400ms; }
.js .dist.rv.in .dr-full { stroke-dashoffset: 0; }
.dist-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dist-mid b { font: 500 30px/1 var(--sans); letter-spacing: -0.04em; color: var(--white); }
.dist-mid span { font: 500 8.5px/1.4 var(--mono); letter-spacing: 0.14em; color: var(--w50); margin-top: 5px; }
.dist-rows { list-style: none; }
.dist-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--w08); font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--white); }
.dist-rows li:last-child { border-bottom: 0; }
.dist-rows li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dist-rows li.z { color: var(--w50); }
.dist-rows li.z b { color: var(--w64); }
.dist-note { padding: 13px 18px 15px; border-top: 1px solid var(--w10); font-size: 13.5px; line-height: 1.5; color: var(--w64); }

/* ── how to get $QUAD, with the visitor's own progress ── */

.howto { padding: 120px 0 80px; }
.rail { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; border-top: 1px solid var(--w14); }
.rail::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: calc(var(--done, 0) * 25%); background: var(--white); transition: width 700ms var(--ease-out); }
.stop { padding: 26px 24px 0 0; display: grid; gap: 12px; align-content: start; position: relative; }
.stop::before {
  content: ''; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 2px;
  background: var(--ink); border: 1px solid var(--w40); transition: background 300ms, border-color 300ms;
}
.stop.ok::before { background: var(--white); border-color: var(--white); }

/* get $QUAD on the law: the same four stops, standing in a column along their rail */
.rail.v { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--w14); margin-top: 26px; padding-left: 0; gap: 0; max-width: 640px; }
.rail.v::before { left: -1px; top: 0; width: 1px; height: calc(var(--done, 0) * 25%); transition: height 700ms var(--ease-out); }
.rail.v .stop { padding: 0 0 30px 30px; max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.rail.v .stop:last-child { padding-bottom: 0; }
.rail.v .stop::before { top: 2px; left: -6px; }
.law-sec .rail.v .stop p { margin-top: 0; font-size: 15px; max-width: 52ch; }

/* the board, inside the law's narrow column */
.law-sec .status { margin-top: 26px; max-width: 760px; }
.law-sec .status-top { margin: 0; font-size: 10px; line-height: 1.4; max-width: none; }
.law-sec .status-rows .sk { font-size: 16px; color: var(--white); }
.law-sec .status-rows .sv { font-size: 14px; line-height: 1.55; color: var(--w64); }
.law-sec .status-rows { padding-left: 0; gap: 0; margin-top: 0; }
.law-sec .status-rows li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px 12px; max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.law-sec .status-rows .sv { grid-column: 2 / -1; }
.law-sec .status-rows .ss { grid-column: 3; grid-row: 1; }

/* the rule's pictograms on the law: where the square no longer stands beside the text */
.law-pk { display: none; }

/* the token on the home: the seven lines as keys, two by two */
.checks.compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checks.compact .check { grid-template-columns: 22px minmax(0, 1fr); padding: 15px 20px; border-bottom: 1px solid var(--w08); }
.checks.compact .check:nth-child(odd) { border-right: 1px solid var(--w08); }
.checks.compact .check:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.scan-more { display: block; padding: 13px 20px; border-top: 1px solid var(--w10); font: 600 10px/1.4 var(--mono); letter-spacing: 0.14em; color: var(--w64); transition: color var(--t-hover) var(--ease-css); }
.scan-more:hover, .scan-more:focus-visible { color: var(--white); }

/* before launch, on the home: one line of states */
.status-line { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 22px; border: 1px solid var(--w10); background: var(--panel); }
.sl-h { font: 600 10px/1 var(--mono); letter-spacing: 0.14em; color: var(--white); }
.sl-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chips li { font: 500 10px/1 var(--mono); letter-spacing: 0.08em; color: var(--w64); border: 1px solid var(--w14); padding: 7px 9px; white-space: nowrap; }
.sl-chips li b { color: var(--white); font-weight: 600; margin-left: 6px; }
.sl-more { margin-left: auto; font: 600 10px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--w64); transition: color var(--t-hover) var(--ease-css); }
.sl-more:hover, .sl-more:focus-visible { color: var(--white); }
.stop .sn { font: 500 12px/1 var(--mono); color: var(--w50); }
.stop h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.stop p { font-size: 15px; line-height: 1.55; color: var(--w64); max-width: 30ch; }
.stop .st { font: 600 11px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--w50); }
.stop.ok .st { color: var(--white); }
.stop .skey { justify-self: start; }

/* ── the law, told beside a square of its own ── */

.law.has-stage .law-body { grid-column: 4 / span 5; }
.law-stage-wrap { grid-column: 9 / span 4; position: sticky; top: 110px; align-self: start; }
.law-stage { width: 100%; aspect-ratio: 1 / 1; background: var(--panel); border: 1px solid var(--w10); cursor: crosshair; }
.law-stage.over-mark { cursor: grab; }
.law-cap { margin-top: 12px; font: 500 10.5px/1.6 var(--mono); letter-spacing: 0.08em; color: var(--w50); min-height: 3.2em; }
.law-cap b { color: var(--white); font-weight: 600; }

/* ── widths ───────────────────────────────────────────── */

@media (max-width: 1240px) {
  .links { min-width: 0; gap: 22px; }
  .a-square { grid-column: 1 / span 6; }
  .a-ticket { grid-column: 7 / span 6; }
  .a-right { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1099px) {
  .law-pk { display: block; float: right; width: 84px; height: 84px; margin: 2px 0 12px 18px; color: var(--white); overflow: visible; }
  :root { --gap: 24px; }
  .scan { grid-column: 1 / -1; }
  .dist { grid-column: 1 / -1; margin-top: 40px; }
  .rail { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .rail::before { display: none; }
  .law.has-stage .law-body { grid-column: 1 / -1; }
  .law-stage-wrap { grid-column: 1 / -1; order: -1; position: relative; top: 0; max-width: 460px; margin: 0 auto 48px; width: 100%; }
  .links { display: none; }
  .menu-key { display: block; }
  .inst-body { grid-template-columns: 1fr; }
  .inst-draw { border-right: 0; border-bottom: 1px solid var(--w10); min-height: 0; padding-bottom: 30px; }
  .inst-draw > .inst-stage { position: relative; inset: auto; width: 100%; max-width: 640px; aspect-ratio: 1 / 1; margin: 0 auto; }
  .hero-p { grid-column: 7 / span 6; }
  .hero-live { grid-column: 1 / span 7; }
  .wide-only { display: none; }
  .s-pic { grid-column: 2 / span 2; width: 76px; height: 76px; }
  .s-t { grid-column: 4 / span 4; }
  .s-p { grid-column: 4 / span 9; margin-top: 8px; }
  .risk { grid-column: 1 / -1; }
  .law .toc { display: none; }
  .law-body { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .a-square, .a-ticket { grid-column: 1 / -1; }
  .a-right { grid-template-columns: 1fr; }
  .three { grid-template-columns: 1fr; gap: 40px; margin-top: 72px; }
  .reveal-text { max-width: none; }
  .three-brand, .three-col { grid-column: auto; }
}

@media (max-width: 767px) {
  :root { --gap: 16px; }
  .checks.compact { grid-template-columns: 1fr; }
  .dist-body { grid-template-columns: 1fr; justify-items: center; }
  .dist-ring { width: 150px; }
  .dist-rows { width: 100%; }
  .checks.compact .check:nth-child(odd) { border-right: 0; }
  .checks.compact .check:last-child { border-bottom: 0; }
  .status-line { padding: 16px 18px; }
  .sl-more { margin-left: 0; }
  .law-pk { width: 68px; height: 68px; }
  .tape { height: 38px; }
  .tape-label { padding: 0 12px 0 16px; }
  .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; }
  body.tape-seen .toasts { bottom: 52px; }
  body.band-on .toasts { bottom: 76px; }
  .takeover { height: 52px; }
  .tko-track span { font-size: 22px; }
  .check { grid-template-columns: 22px minmax(0, 1fr); }
  .check .v { grid-column: 2; font-size: 14px; }

  .rail { grid-template-columns: 1fr; }
  .token { padding: 90px 0 80px; }
  .howto { padding: 80px 0 40px; }
  .bar { padding: 18px 0; }
  .brand-word { font-size: 16px; letter-spacing: 0.3em; }
  .brand-mark { width: 22px; height: 22px; }
  .nav .cta, .nav .ikey { display: none; }
  .wallet { min-width: 0; padding: 0 14px; font-size: 11px; }
  .menu-key { width: 46px; }
  .nav { min-height: 46px; }

  .hero { padding: 0 0 70px; min-height: 600px; }
  .hero-grid { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; }
  .hero-live { margin-top: 0; position: absolute; top: 88px; left: 0; }
  .hero-p { order: 2; text-align: left; justify-self: auto; align-self: flex-start; top: 0; max-width: 34ch; font-size: 16px; }
  .hero-h1 { order: 1; align-self: flex-start; white-space: normal; text-wrap: balance; font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
  .wide-only { display: none; }
  .hero-cta { order: 3; justify-self: auto; align-self: stretch; }
  .hero-cta .duo { width: 100%; }
  .hero-cta .duo-t { flex: 1; justify-content: center; }

  .core { padding-top: 64px; }
  .inst-head { padding: 22px 18px 18px; grid-template-columns: 1fr; }
  .inst-head .chip { justify-self: start; }
  .inst-side { padding: 22px 18px 24px; gap: 22px; }
  .fig-n { font-size: clamp(5.5rem, 30vw, 8rem); }
  .row { grid-template-columns: 30px minmax(0, 1fr) 52px 42px; gap: 10px; }
  .rl { font-size: 9.5px; letter-spacing: 0.04em; }
  .stats { gap: 0 10px; }
  .stats dd { font-size: 12.5px; }

  .statement { padding: 140px 0 80px; min-height: 0; }
  .rule { padding: 80px 0 100px; }
  .step { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 10px; padding: 24px 0; }
  .s-n { grid-column: 1; grid-row: 1; }
  .s-pic { grid-column: 1; grid-row: 2; width: 64px; height: 64px; margin-top: -6px; }
  .s-t { grid-column: 2; grid-row: 1; font-size: 21px; }
  .s-p { grid-column: 2; grid-row: 2; margin-top: 0; font-size: 16px; }
  .band { padding: 96px 0 80px; }
  .invs li { grid-template-columns: 44px minmax(0, 1fr); font-size: 1.1rem; padding: 18px 0; }
  .wrong { padding: 100px 0 60px; }
  .risk { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; }
  .risk p:last-child { font-size: 16px; }
  .ca { padding: 24px 0 120px; }
  .ca-box { grid-template-columns: 1fr; padding: 20px; }
  .cr { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .cr input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .calc-out dd { font-size: 18px; }
  .calc-top { flex-direction: column; }
  .calc-top span:last-child { text-align: left; }
  .status-top { flex-direction: column; padding: 14px 18px; }
  .status-rows li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px 12px; padding: 16px 18px; }
  .status-rows .sv { grid-column: 2 / -1; }
  .status-rows .ss { grid-column: 3; grid-row: 1; }
  .foot-bar { flex-direction: column; }
  .foot-links { white-space: normal; }

  .page-head { padding: 140px 0 48px; }
  .law-sec { padding: 44px 0; }
  .law-sec p, .law-sec li { font-size: 16.5px; }
  .formula { font-size: 12.5px; padding: 14px 16px; }
  .tbl { font-size: 13.5px; }
  .tbl td:first-child { white-space: normal; }
  .p-pad { padding: 18px; }
  .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  .brand-tick { display: none; }
  .wallet .wallet-label { font-size: 10.5px; }
  .tkey { padding: 16px 14px; font-size: 12px; }
}

@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; }
  .js .rv { opacity: 1; transform: none; }
  .js .lines .ln > span { transform: none; }
  .js .sec-head.rv h2, .js .band-head.rv h2, .js .inst-head.rv .inst-title { clip-path: none; transform: none; }
  .js .step.rv .pk { opacity: 1; transform: none; }
  .loader { display: none; }
  .tko-track { animation: none; }
  .drop-cursor, .drop-tag { display: none; }
  .pulse, .row.wait .rn::after { animation: none; }
}

/* the drawn squares hold no text: a press on them never selects, a double tap never zooms */
.inst-stage, .a-stage, .law-stage, .film { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }