/* ═══════════════════════════════════════════════════════════════
   UNICURVE — design system
   The world through a 1-bit dither: black void, white grain,
   colour only where it means something (green locks, red vests).
   Sharp corners everywhere — this site has no curves except the one.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JBMono";
  src: url("fonts/jbmono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --void:  #050505;
  --panel: #0B0C0B;
  --white: #F2F2F0;
  --dim:   #98A099;
  --faint: #7A817B;
  --hair:  rgba(242,242,240,.13);
  --hair2: rgba(242,242,240,.07);

  --floor: #2FBF71;   /* semantic: permanent, locked      */
  --raise: #E5484D;   /* semantic: withdrawable, vesting  */
  --pink:  #FF3D9A;   /* the house pen, a nod to Uniswap  */
  --pink-soft: #FF9AC9;

  --body: "Archivo", system-ui, sans-serif;
  --mono: "JBMono", ui-monospace, monospace;

  --settle: cubic-bezier(.2,.8,.2,1);
  --wrap: 1120px;

  /* 4px bayer checker, the house texture */
  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23F2F2F0'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23F2F2F0'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.boot body > * { visibility: hidden; }
body {
  background: var(--void);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--pink); color: #fff; }
.mono { font-family: var(--mono); font-weight: 400; }
a { color: inherit; text-decoration: none; }
canvas { display: block; }

/* ─── chrome ──────────────────────────────────────────────── */

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  background: linear-gradient(90deg, var(--pink), var(--pink-soft));
  transform: scaleX(0); transform-origin: 0 50%;
}

.nav { position: fixed; top: 18px; left: 0; right: 0; z-index: 80; display: flex; justify-content: center; padding: 0 20px; }
.nav-bar {
  display: flex; align-items: center; gap: 26px;
  padding: 10px 12px 10px 16px;
  background: rgba(5,5,5,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hair);
  transition: border-color .3s, box-shadow .3s;
}
.nav.stuck .nav-bar { border-color: rgba(242,242,240,.22); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 22px; height: 22px; display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 14px; color: var(--dim); padding: 7px 12px;
  transition: color .2s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a.on { color: var(--pink-soft); }
.nav-act { display: flex; gap: 8px; align-items: center; }
.ca {
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  color: var(--dim); background: transparent;
  border: 1px solid var(--hair); padding: 9px 12px; cursor: pointer;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.ca:hover { color: var(--white); border-color: rgba(255,61,154,.5); }
.ca.copied { color: var(--pink-soft); border-color: rgba(255,61,154,.5); }
.ca:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* ─── buttons ─────────────────────────────────────────────── */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 600; font-size: 14px;
  padding: 10px 18px; border: 1px solid var(--hair); cursor: pointer;
  background: transparent; color: var(--white);
  transition: border-color .2s, background .2s, color .2s;
  overflow: hidden; white-space: nowrap;
}
.btn span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.btn.lg { padding: 14px 26px; font-size: 15px; }
.btn.sm { padding: 7px 13px; font-size: 13px; }
.btn-solid { background: var(--white); color: var(--void); border-color: var(--white); }
.btn-solid::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--dither); background-size: 4px 4px;
  opacity: 0; transition: opacity .2s;
  filter: invert(1);
}
.btn-solid:hover::after { opacity: .35; }
.btn-ghost:hover { border-color: rgba(242,242,240,.4); background: rgba(242,242,240,.05); }

/* ─── display type ────────────────────────────────────────── */

.display {
  font-weight: 860; letter-spacing: -.035em; line-height: .98;
  font-size: clamp(46px, 7.2vw, 96px);
  text-wrap: balance;
}
.display.md { font-size: clamp(36px, 4.6vw, 62px); }
.display.sm { font-size: clamp(28px, 3.4vw, 42px); }
.display .line { display: block; overflow: hidden; }
.display .line i {
  font-style: normal; display: block;
  transform: translateY(112%);
}
.ready .hero .display .line i { animation: rise .8s var(--settle) forwards; }
.ready .hero .display .line:nth-child(2) i { animation-delay: .09s; }
@keyframes rise { to { transform: translateY(0); } }

/* ─── hero ────────────────────────────────────────────────── */

.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
#scene, #dust {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
}
#dust { opacity: .8; }
.hero-copy {
  position: relative; z-index: 2;
  padding: 108px max(40px, 5vw) clamp(56px, 9vh, 110px);
  max-width: 780px;
}
.hero-sub {
  margin-top: 26px; max-width: 560px;
  color: var(--dim); font-size: 17px; line-height: 1.65;
  opacity: 0; transform: translateY(14px);
}
.ready .hero-sub { animation: fade-up .7s var(--settle) .35s forwards; }
.hero-cta {
  display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
}
.ready .hero-cta { animation: fade-up .7s var(--settle) .5s forwards; }
.hero-fine {
  margin-top: 30px; font-size: 12.5px; color: var(--faint);
  max-width: 520px; line-height: 1.7;
  opacity: 0;
}
.ready .hero-fine { animation: fade-in .9s ease .9s forwards; }
.hero-hint {
  position: absolute; right: max(40px, 5vw); bottom: 34px; z-index: 2;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--faint);
  padding-right: 22px;
  opacity: 0;
}
.ready .hero-hint { animation: fade-in 1s ease 1.4s forwards; }
.hero-hint::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 1px;
  background: var(--faint);
  animation: hint-slide 2.2s ease-in-out infinite;
}
@keyframes hint-slide { 50% { transform: translateX(6px); opacity: .4; } }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { to { opacity: 1; } }

/* ─── sections ────────────────────────────────────────────── */

.sect { position: relative; padding: clamp(90px, 13vh, 160px) 20px; }
.sect + .sect { border-top: 1px solid var(--hair2); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.sect-head { max-width: 760px; margin-bottom: 56px; }
.lead { margin-top: 24px; color: var(--dim); font-size: 17px; line-height: 1.7; }
.lead b, .lead em { color: var(--white); font-style: normal; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--settle), transform .7s var(--settle); }
.reveal.in { opacity: 1; transform: none; }

/* ─── the lab (ladder canvas) ─────────────────────────────── */

.lab { margin: 0 0 14px; }
.lab-frame {
  position: relative; border: 1px solid var(--hair); touch-action: none;
  background: var(--panel);
  cursor: ew-resize;
}
#ladder-cv { width: 100%; height: clamp(320px, 44vw, 460px); image-rendering: pixelated; }
.lab-tip {
  position: absolute; pointer-events: none; z-index: 3;
  background: var(--void); border: 1px solid var(--hair);
  padding: 6px 9px; font-size: 11.5px; color: var(--dim); white-space: nowrap;
  transform: translate(-50%, -130%);
}
.lab-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  flex-wrap: wrap; padding: 12px 2px 0;
}
.lab-read { font-size: 12.5px; color: var(--dim); min-height: 1.4em; }
.lab-read b { color: var(--white); font-weight: 600; }
.lab-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.5px; color: var(--faint); }
.lab-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 10px; height: 10px; display: inline-block; }
.sw.floor { background: var(--floor); }
.sw.raise { background: var(--raise); }
.sw.token {
  background-image: var(--dither); background-size: 4px 4px; background-color: transparent;
  border: 1px solid var(--hair);
}
.lab-note { font-size: 12px; color: var(--faint); max-width: 640px; line-height: 1.7; margin-bottom: 64px; }

/* ─── panels / duo ────────────────────────────────────────── */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 64px; }
.panel {
  position: relative; border: 1px solid var(--hair); background: var(--panel);
  padding: 30px 30px 32px;
  transition: transform .3s var(--settle), border-color .3s;
}
.panel:hover { transform: translateY(-3px); border-color: rgba(242,242,240,.24); }
.panel h3 { font-size: 20px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 14px; }
.panel p { color: var(--dim); font-size: 15px; }
.panel p + p { margin-top: 12px; }
.panel b { color: var(--white); font-weight: 600; }
.panel .dim { color: var(--faint); font-size: 14px; }
.panel .dim b { color: var(--dim); }
.c-floor { color: var(--floor); }
.c-raise { color: var(--raise); }

/* ─── the gone list ───────────────────────────────────────── */

.gone { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair2); border: 1px solid var(--hair2); }
.gone li {
  background: var(--void); padding: 20px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.gone s { color: var(--faint); font-size: 14.5px; text-decoration-thickness: 1px; }
.gone span { color: var(--dim); font-size: 14.5px; }
.gone span::before { content: "→ "; color: var(--faint); }

/* ─── stats / tickers ─────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 26px; }
.stat { border: 1px solid var(--hair); background: var(--panel); padding: 26px 26px 24px; }
.stat-n { display: block; font-size: clamp(28px, 3.2vw, 44px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-l { display: block; margin-top: 10px; color: var(--faint); font-size: 13px; line-height: 1.55; }

.alloc { border: 1px solid var(--hair); margin-bottom: 64px; }
#alloc-cv { width: 100%; height: 92px; image-rendering: pixelated; }

/* ─── code line ───────────────────────────────────────────── */

.code {
  border: 1px solid var(--hair); background: var(--void);
  padding: 13px 16px; font-size: 13px; color: var(--white);
  margin: 14px 0; overflow-x: auto; white-space: pre;
}

/* ─── close card ──────────────────────────────────────────── */

.close-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--hair); background: var(--panel);
  padding: clamp(44px, 6vw, 80px) clamp(30px, 5vw, 72px);
}
#close-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .9; }
.close-in { position: relative; z-index: 2; max-width: 480px; }
.close-in p { margin: 18px 0 26px; color: var(--dim); font-size: 15.5px; }

/* spotlight proximity */
.spot { --mx: 50%; --my: 50%; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,61,154,.075), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
.spot:hover::before { opacity: 1; }

/* ─── footer ──────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--hair2); padding: 40px 20px 46px; }
.foot-in { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.fine { color: var(--faint); font-size: 12.5px; max-width: 520px; line-height: 1.7; }

/* ═══ APP ═══════════════════════════════════════════════════ */

.app-body { padding-top: 120px; }
.netwarn {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 70;
  background: var(--void); border: 1px solid var(--raise); color: var(--white);
  font-family: var(--mono); font-size: 12.5px; padding: 9px 14px; max-width: 90vw;
}
.netwarn[hidden] { display: none; }
.app { padding: 0 20px 90px; }
.app-wrap { max-width: var(--wrap); margin: 0 auto; }

.app-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; }
.app-head-l .fine { margin-top: 12px; }
.app-stats { display: flex; gap: 1px; background: var(--hair2); border: 1px solid var(--hair2); }
.app-stats > div { background: var(--void); padding: 14px 20px; min-width: 132px; }
.app-stats dt { color: var(--faint); font-size: 11.5px; margin-bottom: 4px; }
.app-stats dd { font-family: var(--mono); font-size: 19px; font-weight: 600; }
.app-stats dd i { font-style: normal; color: var(--faint); font-size: 12px; }
.app-stats dd small { display: block; font-size: 10.5px; color: var(--faint); font-weight: 400; margin-top: 3px; }

.app-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.col-l, .col-r { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.card { border: 1px solid var(--hair); background: var(--panel); padding: 26px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.card-head h2 { font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.card-meta { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* calibrator */
.calib-row { display: grid; grid-template-columns: 190px 1fr 130px; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair2); }
.calib-row label { font-size: 13.5px; color: var(--dim); }
.calib-row output { font-family: var(--mono); font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--hair); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px;
  background: var(--white); border: none;
}
input[type="range"]::-moz-range-track { height: 2px; background: var(--hair); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--white); border: none; border-radius: 0; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--white); outline-offset: 3px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--white); outline-offset: 3px; }
.calib-out { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair2); border: 1px solid var(--hair2); }
.calib-out div { background: var(--void); padding: 13px 15px; }
.calib-out dt { color: var(--faint); font-size: 11px; margin-bottom: 4px; }
.calib-out dd { font-family: var(--mono); font-size: 14.5px; font-weight: 600; }
.calib-out dd i { font-style: normal; color: var(--faint); font-size: 11px; }
.calib-out .fl dd { color: var(--floor); }
.calib-out .ra dd { color: var(--raise); }
#calib-cv { width: 100%; height: 170px; image-rendering: pixelated; margin-top: 18px; border: 1px solid var(--hair2); }
.calib-note { margin-top: 14px; font-size: 12px; color: var(--faint); line-height: 1.65; }
.calib-note b { color: var(--dim); font-weight: 600; }

/* position / wallet */
.pos-empty { color: var(--faint); font-size: 14px; }
.pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pos-grid div span { display: block; color: var(--faint); font-size: 11.5px; }
.pos-grid div b { font-family: var(--mono); font-size: 17px; font-weight: 600; }
.pos-grid div b i { font-style: normal; color: var(--faint); font-size: 11px; }
.acts { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.acts .w { width: 100%; }
.acts-row { display: flex; gap: 10px; }
.acts-row .btn { flex: 1; }
.locknote { margin-top: 16px; border: 1px solid var(--hair); padding: 13px 15px; font-size: 13px; color: var(--dim); }
.locknote b { color: var(--white); }
.locknote[hidden] { display: none; }

/* verify + book cards */
.verify-form { display: flex; gap: 10px; margin-bottom: 14px; }
.verify-form input {
  flex: 1; background: var(--void); border: 1px solid var(--hair); color: var(--white);
  font-family: var(--mono); font-size: 13px; padding: 11px 13px; outline: none;
}
.verify-form input:focus { border-color: rgba(242,242,240,.35); }
.verify-form input:focus-visible, #watch-form input:focus-visible {
  outline: 2px solid var(--white); outline-offset: 2px;
}
.verify-form input::placeholder { color: var(--faint); }
.vnote { font-size: 13px; color: var(--faint); line-height: 1.65; }
.vnote b { color: var(--dim); }

.book-rows { display: flex; flex-direction: column; }
.book-rows > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hair2); font-size: 13.5px; }
.book-rows span { color: var(--faint); }
.book-rows b { font-family: var(--mono); font-weight: 600; }

/* sheet (empty plotter) */
.sheet-empty { padding: 34px 10px; text-align: center; color: var(--faint); font-size: 13.5px; line-height: 1.7; }
.sheet-empty b { color: var(--dim); }
#sheet-cv { width: 100%; height: 150px; image-rendering: pixelated; }

/* modal — [hidden] must win over any display */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(5,5,5,.8); opacity: 0; transition: opacity .22s; }
.modal-card {
  position: relative; width: min(420px, calc(100vw - 40px));
  background: var(--panel); border: 1px solid var(--hair); padding: 28px;
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s var(--settle), transform .22s var(--settle);
}
.modal.in .modal-scrim { opacity: 1; }
.modal.in .modal-card { opacity: 1; transform: none; }
.modal-card h3 { font-size: 19px; font-weight: 750; margin-bottom: 8px; }
.modal-card > p { color: var(--faint); font-size: 13.5px; margin-bottom: 18px; }
.modal-list { display: flex; flex-direction: column; gap: 10px; }
.wallet {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--void); border: 1px solid var(--hair); padding: 14px 16px;
  color: var(--white); cursor: pointer; font-family: var(--body); font-size: 14.5px;
  transition: border-color .2s;
}
.wallet:hover { border-color: rgba(242,242,240,.35); }
.wallet.off { opacity: .45; cursor: not-allowed; }
.w-name { font-weight: 600; }
.w-meta { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
#watch-form { display: flex; gap: 8px; }
#watch-form input {
  flex: 1; background: var(--void); border: 1px solid var(--hair); color: var(--white);
  font-family: var(--mono); font-size: 13px; padding: 10px 12px; outline: none;
}
.modal-x {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  background: transparent; border: none; color: var(--faint); font-size: 15px; cursor: pointer;
}
.modal-x:hover { color: var(--white); }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 12px); z-index: 110;
  background: var(--white); color: var(--void); font-family: var(--mono); font-size: 12.5px;
  padding: 10px 16px; opacity: 0; transition: opacity .26s, transform .26s var(--settle);
  pointer-events: none;
}
.toast[hidden] { display: none; }
.toast.in { opacity: 1; transform: translate(-50%, 0); }

/* locked state greys the acts */
body.locked .acts .btn { opacity: .5; }

/* ─── responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .duo, .stats { grid-template-columns: 1fr; }
  .gone { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr; }
  .app-head { flex-direction: column; align-items: flex-start; }
  .calib-row { grid-template-columns: 1fr; gap: 6px; }
  .calib-row output { text-align: left; }
  .calib-out { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 640px) {
  .app-stats { flex-wrap: wrap; }
  .app-stats > div { flex: 1 1 40%; min-width: 0; }
}
@media (max-width: 560px) {
  .brand-name { font-size: 15px; }
  .ca { font-size: 10.5px; padding: 8px 9px; }
  .btn { padding: 9px 13px; }
  .hero { align-items: stretch; }
  .hero-copy { padding-top: 442px; padding-bottom: 72px; }
  .display { font-size: clamp(40px, 12vw, 54px); }
}

/* ─── reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .display .line i { transform: none; animation: none !important; }
  .hero-sub, .hero-cta, .hero-fine, .hero-hint { opacity: 1 !important; transform: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-hint::after { animation: none; }
}