/* Venice — engraved register: deep green plate, parchment panels, one gold hairline, a serif cut
   in the headings and a geometric sans for everything that has to be read quickly. */
:root {
  --deep: #0a1c17;
  --green: #16281f;
  --green-2: #1e332a;
  --parchment: #f4ecd8;
  --parchment-2: #e7dcc2;
  --gold: #c9a961;
  --gold-soft: rgba(201, 169, 97, .32);
  --gold-faint: rgba(201, 169, 97, .16);
  --ink: #122019;
  --muted: #8d9b8c;
  --muted-dark: #6d7a6a;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Jost', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r: 4px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--deep); color: var(--parchment);
  font-family: var(--body); font-size: 15.5px; line-height: 1.6; font-weight: 300;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 5.6vw, 58px); line-height: 1.04; margin: 0 0 6px; }
h1 em { font-style: italic; color: var(--gold); }
h2 { font-size: clamp(22px, 2.8vw, 30px); margin: 0 0 8px; }
h3 { font-size: 19px; margin: 0 0 6px; }
p { margin: 0 0 12px; color: #d8d3c3; }
.lede { font-size: clamp(15px, 1.7vw, 17.5px); color: #c3bfae; max-width: 56ch; }
.serif-sub { font-family: var(--display); font-style: italic; font-size: clamp(17px, 2vw, 21px); color: var(--gold); margin: 0 0 16px; }

/* ------------------------------------------------------------------- stage --- */
.stage { position: fixed; inset: 0; z-index: 0; }
.stage canvas { display: block; width: 100%; height: 100%; }
/* The veil follows the LAYOUT, not the frame: a flat wash over everything kills the object as
   well as the glare. It darkens the column the copy sits in, and it moves to the other side on
   the pages whose panels are on the right. */
.stage-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,28,23,.92) 0%, rgba(10,28,23,.72) 34%, rgba(10,28,23,0) 62%),
    linear-gradient(180deg, rgba(10,28,23,.9) 0%, rgba(10,28,23,.25) 22%, rgba(10,28,23,.2) 70%, rgba(10,28,23,.88) 100%);
}
.stage[data-side='right'] .stage-veil {
  background:
    linear-gradient(270deg, rgba(10,28,23,.92) 0%, rgba(10,28,23,.72) 34%, rgba(10,28,23,0) 62%),
    linear-gradient(180deg, rgba(10,28,23,.9) 0%, rgba(10,28,23,.25) 22%, rgba(10,28,23,.2) 70%, rgba(10,28,23,.88) 100%);
}
.stage[data-side='center'] .stage-veil {
  background:
    radial-gradient(90% 60% at 50% 45%, rgba(10,28,23,.6) 0%, rgba(10,28,23,.3) 60%, rgba(10,28,23,.1) 100%),
    linear-gradient(180deg, rgba(10,28,23,.9) 0%, rgba(10,28,23,.3) 20%, rgba(10,28,23,.35) 70%, rgba(10,28,23,.9) 100%);
}
@media (max-width: 1059px) {
  .stage-veil, .stage[data-side] .stage-veil { background:
    radial-gradient(120% 60% at 50% 22%, rgba(10,28,23,0) 26%, rgba(10,28,23,.55) 100%),
    linear-gradient(180deg, rgba(10,28,23,.9) 0%, rgba(10,28,23,.08) 16%, rgba(10,28,23,.9) 46%, rgba(10,28,23,.97) 100%); }
}

/* ------------------------------------------------------------------ topbar --- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px; padding: 13px 22px;
  background: rgba(10, 28, 23, .78); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gold-faint);
}
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark svg { width: 26px; height: 30px; display: block; color: var(--gold); }
.wordmark span {
  font-family: var(--body); font-weight: 400; font-size: 15px;
  letter-spacing: .34em; text-transform: uppercase; color: var(--parchment);
}
.tabs { display: flex; gap: 2px; margin-left: 10px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  text-decoration: none; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 13px; color: var(--muted); white-space: nowrap; border: 1px solid transparent;
}
.tabs a:hover { color: var(--parchment); }
.tabs a[aria-current='page'] { color: var(--gold); border-color: var(--gold-soft); }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; padding: 6px 11px; border: 1px solid var(--gold-soft);
  color: var(--parchment); white-space: nowrap;
}
.pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.pill.off i { background: var(--muted-dark); }

/* ------------------------------------------------------------------- shell --- */
.outlet { position: relative; z-index: 10; padding: 92px 22px 48px; min-height: 100%; }
.screen { max-width: 1120px; margin: 0 auto; }
.screen:focus, .screen:focus-visible { outline: none; }

/* Each page leaves the stage a different part of the frame; no two screens are the same
   rectangle with different words in it. */
@media (min-width: 1060px) {
  .screen[data-page='vault'] { max-width: 640px; margin-left: auto; margin-right: 3vw; }
  .screen[data-page='allocate'] { max-width: 940px; }
  .screen[data-page='treasury'] { max-width: 600px; margin-left: 4vw; margin-right: auto; }
  .screen[data-page='token'] { max-width: 580px; margin-left: auto; margin-right: 5vw; }
  .screen[data-page='docs'] { max-width: 1020px; margin-left: 3vw; margin-right: auto; }
}

.hero { display: grid; gap: 26px; }
@media (min-width: 940px) { .hero { grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 40px; align-items: start; } }

/* The home page gives the stage a window instead of filling the frame: one column of copy on the
   left, and the whole upper right left to the object. */
.hero-single { max-width: 560px; }
@media (min-width: 1060px) { .hero-single { min-height: 46vh; } }
.pillars { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.grid4 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 14px; }
@media (min-width: 980px) { .grid4 { grid-template-columns: repeat(4, 1fr); } }

/* -------------------------------------------------------------------- card --- */
.card {
  background: rgba(22, 40, 31, .74); backdrop-filter: blur(9px);
  border: 1px solid var(--gold-soft); border-radius: var(--r); padding: 22px 24px;
  position: relative;
}
.card + .card { margin-top: 16px; }
/* the double rule of an engraved plate, drawn once and only on the panels that carry a title */
.card.plate::before {
  content: ''; position: absolute; inset: 5px; border: 1px solid var(--gold-faint);
  border-radius: 2px; pointer-events: none;
}
.card.paper { background: rgba(244, 236, 216, .95); color: var(--ink); border-color: rgba(160,131,74,.4); }
.card.paper p { color: #3c4a3f; }
.card.paper h2, .card.paper h3 { color: var(--ink); }
.card.paper .k { color: #6b7566; }
.card.paper .v { color: var(--ink); }

.grid2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.grid3 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------- bits --- */
.label, .k {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.chip {
  display: inline-block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--gold-soft); color: var(--parchment); margin: 0 6px 6px 0;
}
.card.paper .chip { border-color: rgba(160,131,74,.5); color: var(--ink); }

.stat { border: 1px solid var(--gold-faint); padding: 15px 16px; background: rgba(10,28,23,.45); }
.stat .v {
  font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.1; margin-top: 4px;
  font-variant-numeric: tabular-nums; color: var(--parchment);
}
.stat .s { font-size: 12.5px; color: var(--muted); }
.dash { color: var(--muted-dark); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: -.01em; }
.gold { color: var(--gold); }

.rule { height: 1px; background: var(--gold-faint); margin: 20px 0; }
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; justify-content: space-between; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--gold-faint); font-size: 14.5px;
}
.row:last-child { border-bottom: 0; }
.row span:first-child { color: var(--muted); }
.row b { font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; }
/* 🔴 A full address in the right-hand cell is what pushes a 390px page sideways: let it break
   rather than widen the row. */
.row b, .row b * { overflow-wrap: anywhere; min-width: 0; }

.btn {
  appearance: none; cursor: pointer; font-family: var(--body); font-size: 11.5px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; padding: 13px 22px;
  border: 1px solid var(--gold); background: transparent; color: var(--gold);
  transition: background .16s ease, color .16s ease;
}
.btn:hover { background: var(--gold); color: var(--deep); }
.btn[disabled] { border-color: rgba(141,155,140,.3); color: var(--muted-dark); cursor: not-allowed; background: transparent; }
.btn.solid { background: var(--gold); color: var(--deep); }
.btn.solid:hover { background: var(--parchment); border-color: var(--parchment); }
.btn.small { padding: 8px 14px; font-size: 10.5px; }
.btn.wide { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field .box {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--gold-soft);
  background: rgba(10,28,23,.5); padding: 12px 15px;
}
.field input {
  border: 0; outline: 0; background: transparent; color: var(--parchment); width: 100%; min-width: 0;
  font-family: var(--display); font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.field .unit { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.field .hint { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }
.field .hint a { color: var(--gold); text-decoration: none; cursor: pointer; }

/* the buffer gauge: the same ring as the stage, flattened into the panel */
.meter { height: 6px; background: rgba(10,28,23,.7); border: 1px solid var(--gold-faint); position: relative; }
.meter i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .6s ease; }
.meter .mark { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--parchment); opacity: .75; }

/* --------------------------------------------------------------------- table --- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--gold-soft);
}
.table td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--gold-faint); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--gold-soft); color: var(--gold); }
.tag.frozen { border-color: rgba(141,155,140,.45); color: var(--muted); }
.wrap-scroll { overflow-x: auto; scrollbar-width: thin; }

/* --------------------------------------------------------------------- docs --- */
.docs { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .docs { grid-template-columns: 190px minmax(0, 1fr); gap: 42px; } }
.docs-rail { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.docs-rail::-webkit-scrollbar { display: none; }
.docs-rail a {
  text-decoration: none; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 12px; color: var(--muted); white-space: nowrap; border-left: 1px solid transparent;
}
.docs-rail a:hover { color: var(--parchment); }
.docs-rail a.on { color: var(--gold); border-left-color: var(--gold); }
@media (min-width: 920px) {
  .docs-rail { position: sticky; top: 100px; flex-direction: column; overflow: visible; }
}
.docs-body > .card, .docs-body > .grid2 { margin-top: 16px; }
.diagram { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.formula {
  font-family: var(--mono); font-size: 13.5px; color: var(--gold); text-align: center;
  border: 1px solid var(--gold-soft); padding: 16px; margin: 4px 0 14px; overflow-x: auto;
}

/* -------------------------------------------------------------------- toast --- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 60;
  background: var(--parchment); color: var(--ink); padding: 12px 20px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90vw;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

footer.foot {
  position: relative; z-index: 10; text-align: center; color: var(--muted-dark);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 12px 22px 32px;
}
footer.foot a { color: var(--muted); text-decoration: none; }

@media (max-width: 780px) {
  .topbar { padding: 10px 14px 8px; gap: 10px; flex-wrap: wrap; }
  .tabs { order: 3; flex-basis: 100%; margin: 0 -14px -8px; padding: 2px 14px 8px; border-top: 1px solid var(--gold-faint); }
  .topbar-right { margin-left: auto; }
  .topbar-right .pill { display: none; }
  .outlet { padding: calc(110px + 31vh) 16px 30px; }
  .card { padding: 18px 16px; }
  h1 { font-size: 32px; }
  .docs-body h1, .screen[data-page='docs'] h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }