/* faucet.nonos.software
 *
 * Structure, radii and shadow are lifted from staking.nonos.software so the
 * two read as one product. The colour is not: the brand page reserves the
 * black lockup for "smart contracts, NOX Shield, staking, audit reports:
 * anything that settles on Ethereum, where the record matters more than the
 * colour." A faucet handing out real on-chain assets is that. Blue belongs to
 * documentation and developer tooling and is explicitly "not a second logo",
 * so it is not used here.
 *
 * Mono is for anything a machine produced, and for every number.
 */

@font-face {
  font-family: "Geist";
  src: url("/fonts/GeistVariable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f2f3f7;
  --surface: #ffffff;
  --fill-subtle: rgba(10, 11, 13, .04);
  --fill-hover: rgba(10, 11, 13, .07);
  --field-bg: rgba(10, 11, 13, .035);
  --line: rgba(10, 11, 13, .12);
  --line-strong: rgba(10, 11, 13, .2);
  --text: #0a0b0d;
  --text-2: rgba(10, 11, 13, .72);
  --text-3: rgba(10, 11, 13, .42);
  --accent: #0a0b0d;
  --accent-ink: #ffffff;
  --accent-soft: rgba(10, 11, 13, .55);
  --cyan: #66ffff;
  --green: #0f9f6e;
  --amber: #b7860b;
  --red: #d2373f;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-control: 14px;
  --r-bar: 16px;
  --r-card: 22px;
  --r-widget: 28px;
  --expo: cubic-bezier(.16, 1, .3, 1);
  --shadow-card: 0 1px 0 rgba(10, 11, 13, .03), 0 30px 80px -40px rgba(10, 11, 13, .18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px); }

/* ---- masthead ---- */
.mast { padding: 22px 0 0; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .lock { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -.01em; font-size: 1.05rem; }
/* The wordmark is one flex item, not three. Left as loose text beside the
   icon, `N`, `<em>Ø</em>` and `NOS` each became their own anonymous flex item
   and the container's 9px gap fell between them: it read "N Ø NOS". */
.brand .lock .wm { white-space: nowrap; }
.brand .lock em { font-style: normal; color: inherit; }
.brand .sub {
  padding-left: 12px; border-left: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--text-3);
}
.pills { display: flex; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 11px 18px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); font-size: .92rem; font-weight: 500;
  transition: background .2s var(--expo), border-color .2s var(--expo);
}
.pill:hover { background: var(--fill-subtle); }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pill.dark { background: var(--text); color: #fff; border-color: var(--text); }
.pill.dark i { background: var(--cyan); }
.pill i { background: var(--accent); }
.pill.dark:hover { background: #1c2027; }

/* ---- hero ---- */
.hero { padding: clamp(42px, 9vh, 96px) 0 clamp(26px, 4vh, 44px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 70px); align-items: end; }
.kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--text-2);
}
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
h1 {
  margin: 0; font-weight: 600; letter-spacing: -.04em; line-height: 1.01;
  font-size: clamp(2.3rem, 6.6vw, 4.4rem);
}
h1 .dim { color: var(--text-3); }
.hero p { margin: 0; color: var(--text-2); font-size: clamp(1rem, 1.5vw, 1.08rem); max-width: 46ch; }

/* ---- the stat row ---- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(20px, 3vh, 30px) 0; }
.stats .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.stat b {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 1.8rem); letter-spacing: -.03em; color: var(--accent);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.stat b span { font-size: .5em; color: var(--text-3); margin-left: 6px; letter-spacing: 0; }
.stat em { display: block; margin-top: 4px; font-style: normal; font-size: .84rem; color: var(--text-3); }

/* ---- the body: notes on the left, the widget on the right ---- */
.main { padding: clamp(32px, 6vh, 64px) 0 clamp(50px, 9vh, 100px); }
.main .wrap { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 66px); align-items: start; }

.steps { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 20px; }
.step { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 14px; }
.step dt { font-family: var(--font-mono); font-size: .8rem; color: var(--accent); }
.step dd { margin: 0; color: var(--text-2); font-size: .95rem; }
.aside-note { margin: 22px 0 0; color: var(--text-3); font-size: .86rem; }

/* ---- the widget ---- */
.widget {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-widget); box-shadow: var(--shadow-card);
  padding: clamp(18px, 2.6vw, 26px);
}
.widget h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.widget .hint { margin: 0 0 16px; font-size: .86rem; color: var(--text-3); }

.field { display: flex; gap: 10px; }
input[type="text"] {
  flex: 1; min-width: 0; font-family: var(--font-mono); font-size: .92rem;
  padding: 16px 16px; border: 1px solid transparent; border-radius: var(--r-control);
  background: var(--field-bg); color: var(--text);
}
input[type="text"]::placeholder { color: var(--text-3); }
input[type="text"]:focus-visible { outline: none; border-color: var(--accent); background: var(--surface); }

button {
  font: inherit; font-weight: 500; cursor: pointer; border-radius: var(--r-control);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  padding: 15px 18px; transition: background .2s var(--expo), opacity .2s, border-color .2s;
}
button:hover:not(:disabled) { background: var(--fill-subtle); }
button:disabled { opacity: .55; cursor: not-allowed; }
.go {
  width: 100%; margin-top: 16px; padding: 17px 20px; border-radius: var(--r-bar);
  background: var(--fill-subtle); border-color: transparent; color: var(--text-3); font-weight: 600;
}
.go.ready { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.go.ready:hover { background: #22262e; }

.rows { margin: 18px 0 0; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.rows .r { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rows .r span { font-size: .86rem; color: var(--text-3); }
.rows .r b { font-family: var(--font-mono); font-weight: 400; font-size: .88rem; text-align: right; }

.msg { margin: 12px 0 0; font-size: .86rem; color: var(--text-3); min-height: 1.2em; }
.msg.bad { color: var(--red); }
.msg.good { color: var(--green); }
.msg a { color: var(--accent); }

.turnstile:not(:empty) { margin-top: 16px; }

.strip {
  margin-top: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-bar); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.strip .k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.strip .v { font-family: var(--font-mono); font-size: .78rem; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.strip button { padding: 9px 14px; font-size: .84rem; border-radius: 999px; }

/* ---- notices ---- */


/* ---- foot ---- */
.foot { border-top: 1px solid var(--line); padding: 26px 0 44px; }
.foot .wrap { display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--text-3); }
.foot nav { display: flex; gap: 16px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); }

@media (max-width: 900px) {
  .hero .wrap, .main .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero .wrap { gap: 22px; }
  .stats .wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .field { flex-wrap: wrap; }
  .field button { width: 100%; }
  .brand .sub { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- connect modal ------------------------------------------------------
   The same shell staking uses, rule for rule, so connecting feels like one
   product across the two sites. The accent that tints a hovered row stays
   staking's blue there; here it follows the on-chain black. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: #f2f3f7b3; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal-panel {
  width: min(400px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: 20px; padding: 20px;
  background: var(--surface); box-shadow: var(--shadow-card);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; padding: 0;
  border: 0; background: none; color: var(--text-3);
  transition: color .15s ease, background-color .15s ease;
}
.modal-close:hover { color: var(--text); background: var(--fill-subtle); }
.modal-close svg { width: 15px; height: 15px; }
.modal-body { display: grid; gap: 8px; margin-top: 16px; }
.wallet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; border: 1px solid var(--line); border-radius: 12px;
  padding: 0 14px; background: var(--fill-subtle); text-align: left;
  transition: border-color .15s ease, background-color .15s ease;
}
button.wallet-row:hover:not(:disabled) { border-color: rgba(10, 11, 13, .4); background: var(--fill-hover); }
.wallet-row.muted .wallet-row-name { color: var(--text-3); font-weight: 500; }
.wallet-row-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-row-tag { flex: none; color: var(--text-3); font-size: 12px; }
.wallet-row-link {
  flex: none; color: var(--accent); font-size: 12.5px; font-weight: 500;
  border: 0; background: none; padding: 0;
}
.wallet-row-link:hover { text-decoration: underline; background: none; }
.modal-foot { display: grid; gap: 10px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.modal-foot p { margin: 0; color: var(--text-3); font-size: 12.5px; line-height: 1.55; }
@media (max-width: 560px) {
  .strip { align-items: stretch; }
  .strip .v { flex: 1 1 100%; order: 2; }
  .strip .k { order: 1; }
  .strip button { order: 3; width: 100%; }
}
@media (max-width: 520px) {
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-panel { width: 100%; max-height: none; height: 100dvh; border: 0; border-radius: 0; padding: 20px 16px; }
}

/* ---- the evidence -------------------------------------------------------
   This is the half of the page that is not a faucet, and it is meant to be
   read. An ink ground because the brand puts the cyan mark on ink and this
   is where the record lives; the numbers carry it, so they are set large and
   in mono and nothing competes with them. */
.proof {
  background: #0a0b0d; color: #f4f6f8;
  padding: clamp(52px, 10vh, 108px) 0 clamp(46px, 8vh, 92px);
}
.proof .kicker { color: rgba(244, 246, 248, .66); }
.proof .kicker::before { background: var(--cyan); }
.proof h2 {
  margin: 0 0 20px; font-weight: 600; letter-spacing: -.04em; line-height: 1.02;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
}
.proof h2 .dim { color: rgba(244, 246, 248, .42); }
.proof .lede { margin: 0 0 clamp(30px, 5vh, 52px); max-width: 62ch; font-size: clamp(.98rem, 1.5vw, 1.08rem); color: rgba(244, 246, 248, .74); }

.figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 34px);
  border-top: 1px solid rgba(244, 246, 248, .16); padding-top: 26px;
}
.fig b {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(1.15rem, 2.3vw, 1.75rem); letter-spacing: -.03em;
  color: var(--cyan); line-height: 1.15; overflow-wrap: anywhere;
}
.fig b span { color: rgba(244, 246, 248, .45); }
.fig em { display: block; margin-top: 6px; font-style: normal; font-size: .82rem; color: rgba(244, 246, 248, .5); }

.total {
  margin-top: clamp(26px, 4vh, 44px); padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(244, 246, 248, .16); border-left: 3px solid var(--cyan);
  border-radius: var(--r-card);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center;
}
.total b {
  font-family: var(--font-mono); font-weight: 400; letter-spacing: -.035em;
  font-size: clamp(1.5rem, 4vw, 2.6rem); color: #fff; white-space: nowrap;
}
.total p { margin: 0; color: rgba(244, 246, 248, .66); font-size: .93rem; }

.proof h3 { margin: clamp(34px, 5vh, 54px) 0 14px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
table.opt { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.opt th, table.opt td { text-align: right; padding: 12px 10px; border-bottom: 1px solid rgba(244, 246, 248, .12); }
table.opt th:first-child, table.opt td:first-child { text-align: left; }
table.opt thead th { font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 246, 248, .45); }
table.opt td { font-family: var(--font-mono); color: rgba(244, 246, 248, .86); }
table.opt td:first-child, table.opt td:last-child { font-family: var(--font-sans); }
table.opt td:nth-child(4) { color: var(--cyan); }
table.opt td:last-child { color: rgba(244, 246, 248, .5); }
.proof .fine { margin: 12px 0 0; font-size: .82rem; color: rgba(244, 246, 248, .45); }

.links { margin-top: clamp(30px, 4vh, 46px); display: flex; flex-wrap: wrap; gap: 10px; }
.links a {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 12px 18px; border-radius: 999px; font-size: .9rem;
  border: 1px solid rgba(244, 246, 248, .22); color: #f4f6f8;
  transition: background-color .2s var(--expo), border-color .2s var(--expo);
}
.links a:hover { background: rgba(244, 246, 248, .08); border-color: rgba(244, 246, 248, .4); }
.links a i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none; }

@media (max-width: 900px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .total { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  table.opt { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- strokes ------------------------------------------------------------
   The site's own device, and its own rule: one path per section, in a
   1000x1000 box, behind the copy, shaped by what the section says. The hero
   pours and lands. The evidence halves, and halves again, which is what FRI
   does to a codeword and what those 49 transactions were walking through.
   Each draws itself once on arrival and then holds still. */
.hero, .proof { position: relative; overflow: hidden; }
.hero > .wrap, .proof > .wrap { position: relative; z-index: 1; }
.stroke {
  position: absolute; pointer-events: none; z-index: 0;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.stroke path {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-width: clamp(9px, 1.15vw, 20px);
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s var(--expo) .35s;
}
html.ready .stroke path { stroke-dashoffset: 0; }

.stroke.pour {
  /* Clear of the copy. Staking keeps its arc in the empty quarter above and
     right of the paragraph; run it through the text and it stops being a
     device and starts being damage. */
  right: calc(-1 * clamp(110px, 11vw, 240px)); top: -34%;
  width: min(30vw, 400px); height: 128%;
}
/* Full strength, the way the brand draws it. A stroke at ten percent is not
   a device, it is a smudge. */
.stroke.pour path { stroke: #0a0b0d; opacity: .92; }

.stroke.fold {
  right: calc(-1 * clamp(10px, 2vw, 40px)); top: -6%;
  width: min(30vw, 400px); height: 112%;
}
.stroke.fold path { stroke: var(--cyan); opacity: .28; stroke-width: clamp(4px, .55vw, 9px); }

@media (max-width: 900px) { .stroke { display: none; } }
@media (prefers-reduced-motion: reduce) { .stroke path { transition: none; stroke-dashoffset: 0; } }

/* The evidence sits on a field generated from the proof itself: the near row
   is the committed evaluations, each row back one folding round, the lit
   point where the verifier stops folding and reads. It is the thing the
   section is about, not decoration borrowed from a stock library. */
.proof {
  background-color: #0a0b0d;
  background-image:
    linear-gradient(to bottom, rgba(10,11,13,.86), rgba(10,11,13,.97) 62%),
    url("/img/proof-field-2k.jpg");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
}

/* ---- the closing line, and the disclosure ------------------------------
   Staking closes its steps with one quiet caution and puts the rest behind a
   summary. Bordered alert boxes and a grid of four headed paragraphs are not
   in its vocabulary, and were what made this page read as generic. */
.caution {
  margin: 20px 0 0; color: var(--text-3); font-size: .86rem; line-height: 1.55;
  max-width: 52ch;
}
.disclose { border-top: 1px solid var(--line); padding-top: 14px; margin-top: clamp(26px, 4vh, 44px); }
.disclose summary {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px;
  color: var(--text-2); font-size: .86rem; font-weight: 500; cursor: pointer;
  list-style: none;
}
.disclose summary::-webkit-details-marker { display: none; }
.disclose summary::before {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.disclose[open] summary::before { transform: rotate(45deg); }
.disclose summary:hover { color: var(--text); }
.disclose-body {
  display: grid; gap: 12px; padding: 6px 0 4px;
  max-width: 76ch;
}
.disclose-body p { margin: 0; color: var(--text-2); font-size: .9rem; line-height: 1.6; }
.disclose-body b { font-weight: 600; color: var(--text); }