/* The logo's molded surfaces, translated into native, accessible controls.
   Light comes from the upper left; every raised surface shares that direction.

   ⛔⛔ THE MATERIAL IS A COOL PEARL WHITE AND EVERY NEUTRAL IS COOL WITH IT.
   2026-09-22, Sam: "no orange shall be present". That is not one variable: the
   orange build carried its hue through the whole sheet, because a molded
   surface is defined by its edge stack, and every one of those stacks was a
   descending ramp of browns. A charcoal at #25231f, a "cream" text at #f5eddf
   and a bevel highlight at rgba(255,239,208,...) all read as amber the moment
   the resin beside them stops being orange, so the greys were neutralised at
   the same time rather than left to look like a half-finished swap.

   The system, for anything added later:
     resin face   #ffffff -> #f1f4f7 -> #d5dbe1     (--resin-face)
     resin ink    #14171a                            text ON the resin
     resin edge   #b2bcc4 #a4aeb6 #96a0a8 #88929a #78828a #59636b  descending
     housing      --charcoal-face, neutral, one notch lighter than the field
     field        #07080a
   ⛔ Hue in a shadow is what gives a "white" button a colour cast. Keep the
   edge ramps neutral; if one needs warmth it is the wrong fix. */
@font-face {
  font-family: "DynaPuff";
  src: url("../vendor/fonts/dynapuff-var.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --bg: #07080a;
  --card: #22252a;
  --text: #eef2f6;
  --muted: #a7afb7;
  --faint: #7d858d;
  --line: rgba(205, 219, 232, .13);
  --line-2: rgba(222, 232, 242, .26);
  --col: 510px;
  --r-card: 25px;
  --r-inner: 13px;
  --resin-face: linear-gradient(145deg, #ffffff 0%, #f1f4f7 44%, #d5dbe1 100%);
  --resin-ink: #14171a;
  --charcoal-face: linear-gradient(145deg, #34383d 0%, #25282c 46%, #1c1f22 100%);
  --bevel: inset 1px 2px 2px rgba(233, 241, 248, .16), inset -2px -3px 4px rgba(0, 0, 0, .35);
  --panel-depth: 1px 1px 0 #22262a, 2px 2px 0 #1e2125, 3px 3px 0 #1a1d20,
    4px 4px 0 #16191c, 5px 5px 0 #101315, 6px 6px 0 #080a0b,
    10px 18px 28px rgba(0, 0, 0, .55);
  --small-depth: 0 1px 0 #191c1f, 1px 2px 0 #131619, 1px 3px 0 #08090b,
    2px 7px 10px rgba(0, 0, 0, .4);
}

body { background: var(--bg); }
:is(button, a, input, textarea, [role="button"]):focus-visible {
  outline: 2px solid #e6edf4;
  outline-offset: 5px;
}

/* The wordmark sits on a shallow molded navigation bar. */
.nav {
  width: calc(100% - 40px);
  max-width: 1120px;
  /* Move the trimmed vertical padding below the bar to keep the headline fixed. */
  margin: 12px auto 20px;
  padding: 6px 18px;
  gap: 10px;
  background: linear-gradient(155deg, #292c30, #17191b 62%);
  border: 1px solid #383c41;
  border-top-color: #525860;
  border-radius: 16px;
  box-shadow: var(--bevel), var(--small-depth);
}
.brand {
  gap: 8px;
  font-size: 20px;
  color: #f2f6fa;
  text-shadow: 0 2px 3px #0006;
}
.brand [data-bubble-wordmark] {
  position: relative;
  display: block;
  padding: 0 3px;
  font-family: "DynaPuff", var(--display);
  font-variation-settings: "wght" 700, "wdth" 100;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.brand .mark {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 40px;
  background: none;
  border-radius: 0;
}
.brand .mark img, .brand .mark canvas {
  position: absolute;
  top: 50%; left: 50%;
  width: 68px; height: 68px;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
.brand .mark canvas { visibility: hidden; pointer-events: none; }
.brand .mark[data-wave-ready] canvas { visibility: visible; }
.brand .mark[data-wave-ready] img { visibility: hidden; }
.nav .tab {
  border: 1px solid #373b40;
  border-top-color: #4e545b;
  border-radius: 10px;
  padding: 8px 14px;
  background: linear-gradient(#2e3135, #212427);
  box-shadow: inset 0 1px 0 #4a5058, var(--small-depth);
  color: #adb5bd;
  font-size: 12px;
  font-weight: 600;
  transition: transform .12s ease;
}
.nav .tab.on {
  color: var(--resin-ink);
  background: var(--resin-face);
  border-color: #b3bdc5;
  border-top-color: #ffffff;
  box-shadow: inset 0 1px 2px #ffffff, 0 2px 0 #939ca4, 0 4px 0 #575f66, 0 7px 8px #0008;
  text-shadow: 0 1px 0 #ffffff;
}
.nav .tab:active { transform: translateY(2px); }
.capill {
  border-radius: 9px;
  background: linear-gradient(#0e0f11, #191b1e);
  border-color: #101113;
  box-shadow: inset 0 2px 4px #0009, 0 1px 0 #4c525a;
  padding: 10px 12px;
}
.capill .k { color: #c3ccd4; }
.capill .v { color: #8b939b; font-size: 9.5px; }

.social-x {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 34px;
  border: 1px solid #43484e;
  border-top-color: #646b73;
  border-radius: 10px;
  background: var(--charcoal-face);
  box-shadow: var(--bevel), var(--small-depth);
}
.social-x svg { width: 19px; height: 19px; filter: drop-shadow(0 1px 0 #5a626a) drop-shadow(0 2px 2px #0009); }
/* It was an <a> for a day on 2026-09-21 and is a <span> again since
   2026-09-22, because BRAND.x is empty and there is no account to point at.
   These three lines are what keeps the two spellings looking identical, so
   swapping back to an <a> when a handle arrives is a markup change only. */
.social-x { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.social-x:hover { border-color: #646b73; }
.social-x:active { transform: translateY(1px); }

/* Solid pearl controls with a real press distance above their lower edge. */
.pillbtn, .cta {
  color: var(--resin-ink);
  background: var(--resin-face);
  border: 1px solid #b3bdc5;
  border-top-color: #ffffff;
  border-left-color: #f5f8fa;
  border-radius: 12px;
  box-shadow: inset 1px 2px 3px #ffffffaa, inset -2px -3px 3px #8d99a340,
    0 1px 0 #b2bcc4, 0 2px 0 #a4aeb6, 0 3px 0 #96a0a8,
    0 4px 0 #88929a, 0 5px 0 #78828a, 1px 9px 12px #0008;
  text-shadow: 0 1px 0 #ffffff;
  font-weight: 750;
  transition: transform .12s ease;
}
.pillbtn { padding: 10px 16px; font-size: 12px; }
.pillbtn:hover, .cta:hover:not(:disabled) {
  opacity: 1;
  background: linear-gradient(145deg, #ffffff, #fafcfd 44%, #e4e9ee);
  box-shadow: inset 1px 2px 3px #ffffffcc, inset -2px -3px 3px #8d99a340,
    0 1px 0 #b2bcc4, 0 2px 0 #a4aeb6, 0 3px 0 #96a0a8,
    0 4px 0 #88929a, 0 5px 0 #78828a, 1px 9px 12px #0008;
}
.pillbtn:active, .cta:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: inset 1px 1px 2px #ffffff80, inset 0 -2px 3px #8d99a340,
    0 1px 0 #78828a, 0 3px 5px #0008;
}
.pillbtn.ghost, .sheet-actions .cta.sec {
  color: #dde3e9;
  background: var(--charcoal-face);
  border-color: #434850;
  text-shadow: 0 -1px 0 #000;
  box-shadow: var(--bevel), 0 4px 0 #0b0d0f, 0 8px 12px #0008;
}
.pillbtn.ghost:hover, .sheet-actions .cta.sec:hover {
  background: linear-gradient(145deg, #424750, #272b30);
  box-shadow: var(--bevel), 0 4px 0 #0b0d0f, 0 8px 12px #0008;
}
.pillbtn.ghost:active, .sheet-actions .cta.sec:active {
  transform: translateY(3px);
  box-shadow: var(--bevel), 0 1px 0 #0b0d0f, 0 3px 5px #0008;
}
.cta {
  margin-top: 22px;
  padding: 18px 22px;
  font-size: 16px;
  border-radius: 15px;
}
.cta:disabled {
  opacity: 1;
  color: #b6bec6;
  background: linear-gradient(145deg, #6a7178, #545b61 55%, #434950);
  border-color: #727981 #383e44 #2d3238 #727981;
  text-shadow: 0 1px 0 #2e3338;
  box-shadow: inset 1px 2px 2px #9aa3ab55, inset -2px -3px 4px #14181c88,
    0 2px 0 #353b41, 0 4px 0 #292e33, 0 5px 0 #191d20, 0 10px 16px #0007;
}

/* Sculpted headline, with depth reserved for the display sizes. */
main { padding: 0 22px 72px; }
.hl {
  position: relative;
  /* ⛔ NEGATIVE SIDE MARGINS, deliberately: the headline is the one thing here
     that breaks out of the 510px column. The mesh is scaled to
     min(font-size, width budget, height budget), so once the string fills the
     column width the font-size stops doing anything at all and raising it just
     grows an empty box. Widening the element to 660px is what actually makes
     the lettering bigger. Equal negative margins keep it centred without a
     transform, and the narrow breakpoints below reset the sides to 0 where
     there is no room to borrow.

     The gap under the header bar is margin-top and it is MEASURED, not
     guessed: the mesh is centred in its box, so growing the font size alone
     moves the ink down, and a margin that looks unchanged in the stylesheet is
     not an unchanged gap on screen. Ink top to nav bottom is 72px here, 69px
     from 860px down, and 53px on a phone. */
  margin: 41px -75px 18px;
  font-family: "DynaPuff", var(--display);
  font-variation-settings: "wght" 700, "wdth" 100;
  font-size: 58px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  /* ⛔ The accent used to be a HUE against a cream base. There is no hue left,
     so the two halves are separated by LUMINANCE instead: a softer grey-white
     base and a pure-white accent. Both of these are the fallback text; the real
     lettering is the mesh in web/motion/bubble-headline.js, whose two materials
     have to carry the same relationship or the page changes appearance the
     moment WebGL comes up. */
  color: #c9d3dc;
  text-shadow: 0 2px 3px #0006;
}
.hl span {
  display: inline;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: inherit;
}
.hl canvas, [data-bubble-wordmark] canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 2px 2px #0005); }
.hl[data-bubble-ready], .hl[data-bubble-ready] span, [data-bubble-wordmark][data-bubble-ready] { color: transparent; text-shadow: none; }
.intro { max-width: 460px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; text-shadow: 0 1px 3px #000, 0 0 10px #000; }
.colhead { margin-bottom: 12px; padding: 0 3px; gap: 10px; }
.colhead .side { font-size: 9px; color: #919aa2; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.statepill {
  background: linear-gradient(#32363a, #212528);
  border: 1px solid #4b5158;
  border-bottom-color: #141618;
  border-radius: 10px;
  color: #c1c9d1;
  font-size: 10px;
  padding: 7px 10px;
  box-shadow: inset 0 1px 0 #6a737b55, 0 2px 0 #0d0f11, 0 5px 8px #0006;
}
.statepill .dot { box-shadow: inset 0 1px 1px #ffffff66, 0 1px 3px #000; }
.statepill.ok { background: linear-gradient(#243d30, #17291f); border-color: #38674c; }
.statepill.bad { background: linear-gradient(#472a2a, #2d1717); border-color: #7d3f3f; }

/* Thick charcoal housings surround the resin drop area and recessed form. */
.card, .sheet-inner {
  background: var(--charcoal-face);
  border-color: #525860 #24272b #0b0d0e #43484f;
  box-shadow: var(--bevel), var(--panel-depth);
  padding: 22px;
}
.card .lbl {
  color: #d2dae1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  margin-bottom: 14px;
}
.drop {
  padding: 29px 23px;
  margin-bottom: 9px;
  background: var(--resin-face);
  border: 1px solid #b3bdc5;
  border-top-color: #ffffff;
  border-left-color: #f7fafc;
  border-radius: 17px;
  color: var(--resin-ink);
  box-shadow: inset 2px 3px 5px #ffffff80, inset -3px -4px 5px #8d99a34d,
    0 1px 0 #b0bac2, 0 2px 0 #a4aeb6, 0 3px 0 #96a0a8,
    0 4px 0 #88929a, 0 5px 0 #78828a, 0 6px 0 #59636b,
    2px 12px 17px #0009;
  transition: transform .12s ease;
}
.drop:hover:not(.busy), .drop.hot {
  background: linear-gradient(145deg, #ffffff, #fafcfd 44%, #e6ebf0);
  border-color: #ffffff;
}
.drop:active:not(.busy) {
  transform: translateY(4px);
  box-shadow: inset 2px 2px 3px #ffffff60, inset -2px -2px 3px #8d99a34d,
    0 2px 0 #78828a, 0 5px 8px #0008;
}
.drop .dt {
  font-family: var(--display);
  font-variation-settings: "wght" 900, "SOFT" 90, "WONK" 1, "opsz" 28;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.18;
  margin-bottom: 8px;
  text-shadow: 0 1px 0 #ffffff;
}
.drop .dh { color: #4a535b; font-size: 12.5px; line-height: 1.5; }
.gate { margin-top: 21px; font-size: 12px; align-items: flex-start; }
.gate input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-top: 1px;
  border: 1px solid #0a0b0d;
  border-radius: 5px;
  background: linear-gradient(#0f1012, #24272b);
  box-shadow: inset 0 2px 3px #000a, 0 1px 0 #737b83;
}
.gate input:checked { background: var(--resin-face); border-color: #b3bdc5; box-shadow: inset 0 1px 1px #ffffff, 0 2px 0 #636d75; }
.gate input:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid var(--resin-ink);
  border-bottom: 2px solid var(--resin-ink);
  transform: translateY(-1px) rotate(-45deg);
}
.skiprow { margin-top: 14px; align-items: center; }
.skiprow .note { line-height: 1.5; font-size: 11px; }
.linkbtn {
  background: linear-gradient(#393d42, #26292d);
  border: 1px solid #545a61;
  border-radius: 6px;
  padding: 4px 9px;
  color: #d2dae1;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #78818955, 0 2px 0 #111315;
}
.linkbtn:active { transform: translateY(1px); }
.link { height: 34px; color: #aab4bd; font-size: 19px; text-shadow: 0 2px 0 #3e454c, 0 4px 4px #000; }
.details-switch { display: flex; justify-content: center; padding: 22px 0 14px; }
.details-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 46px;
  padding: 10px 18px;
  font-size: 12px;
}
.details-chevron {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 #ffffff);
  transition: transform .38s cubic-bezier(.22,.75,.25,1);
}
.details-toggle[aria-expanded="true"] .details-chevron { transform: rotate(180deg); }
.launch-details {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 -16px;
  visibility: hidden;
  transition: grid-template-rows .38s cubic-bezier(.22,.75,.25,1), visibility 0s linear .38s;
}
.launch-details.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.details-inner { min-height: 0; overflow: hidden; }
.details-content {
  padding: 5px 16px 22px;
  opacity: 0;
  transform: translateY(-9px);
  transition: opacity .25s ease, transform .38s cubic-bezier(.22,.75,.25,1);
}
.launch-details.is-open .details-content { opacity: 1; transform: translateY(0); }
.formwrap.locked { opacity: 1; }
.formwrap.locked .fields { opacity: .64; }
.fields, .fields .two { gap: 10px; }
.fields input, .fields textarea {
  background: linear-gradient(145deg, #0e0f11, #191b1e);
  border-color: #0e1012 #25282c #474d54 #131518;
  box-shadow: inset 2px 3px 5px #000a, 0 1px 0 #8893a026;
  color: #eef2f6;
  padding: 14px 15px;
  font-size: 13px;
  border-radius: 10px;
}
.fields input:focus, .fields textarea:focus { border-color: #aeb8c0; }
.fields input::placeholder, .fields textarea::placeholder { color: #98a0a8; opacity: 1; }
.fields textarea { min-height: 66px; }
.verdict { border: 1px solid #5f666d; box-shadow: inset 0 2px 4px #0007, 0 1px 0 #9aa4ae26; }
.verdict.pass { border-color: #3d6549; }
.verdict.fail { border-color: #754137; }

/* Inset readouts and a raised action below the main housings. */
.details-content > .stats {
  margin-top: 22px;
  padding: 13px;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid #383d42;
  background: linear-gradient(145deg, #25282c, #191c1f);
  box-shadow: var(--bevel), var(--small-depth);
}
.srow {
  min-width: 0;
  padding: 8px 9px;
  background: linear-gradient(#111315, #191c1f);
  border: 1px solid #0a0b0c;
  border-bottom-color: #434a51;
  border-radius: 6px;
  box-shadow: inset 0 2px 3px #0008;
  font-size: 10.5px;
}
.srow b { font-size: 10px; color: #d8e0e7; }
.srow.good b { color: var(--green); }
.srow.bad b { color: var(--red); }
.srow.warn b { color: var(--accent); }
.bar { height: 6px; margin: 3px 2px 1px; background: #07080a; box-shadow: inset 0 1px 3px #000, 0 1px 0 #5f666e; }
.bar > i { background: linear-gradient(#ffffff, #cbd3da); box-shadow: inset 0 1px 0 #ffffff; border-radius: inherit; }
/* ⚠ Red, and it has to stay clearly red rather than drift back toward the
   orange that was removed. With the page monochrome, green and red are the only
   hues left, which is what makes them legible; a red-orange error would read as
   a brand colour instead of as a problem. */
.err { color: #ff7a70; }

/* The board is a stack of small extruded tiles, including the demo badges. */
.board { margin-top: 36px; }
.boardhead { margin-bottom: 18px; }
.boardhead h2, .sheet-top h3 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 900;
  color: #eaf0f6;
  text-shadow: 0 1px 0 #98a2ab, 1px 2px 0 #5c646c, 2px 3px 0 #2b3136, 3px 5px 6px #000;
}
/* The launch counter. Its digits are drawn as real extruded DynaPuff by
   web/motion/bubble-number.js, in a canvas laid over this element; the text
   underneath stays for screen readers and for anything without WebGL.
   ⛔ The box needs a real height, because the canvas is absolutely positioned
   to fill it and an element sized only by its own hidden text would collapse. */
/* ⛔ The count belongs NEXT TO the title, not spread away from it. The base
   sheet lays this row out with space-between, which with three children parks
   the counter on its own in the middle of an empty row and it reads as a stray
   tile rather than as the heading's number. */
.boardhead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  margin-bottom: 18px;
}
.boardhead .count-note { margin-left: auto; }

/* ⛔ NO BOX. The count was a recessed tile sitting beside the heading and it
   read as a badge bolted on: a container type that appears nowhere else in this
   row, cut into a dark background so it looked like a hole. The number belongs
   IN the heading line. It carries the same layered hard shadow as the title,
   one step brighter than the title's own face, so the two sit in the same
   material instead of being a heading with a widget next to it. */
.boardhead .count {
  position: relative;
  display: inline-block;
  min-width: 34px;
  height: 41px;
  font-family: "DynaPuff", var(--display);
  font-variation-settings: "wght" 700, "wdth" 100;
  /* The mesh scale is min(font-size, height budget, width budget) and the
     digits are about 0.73em tall, so this lands a cap height just above the
     title's and the number reads as the loud part of the phrase. */
  font-size: 36px;
  line-height: 41px;
  text-align: center;
  color: #ffffff;
}
.boardhead .count canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  /* The h2's text-shadow stack, as drop-shadows so it follows the glyph edges
     of the mesh rather than a rectangle. */
  filter: drop-shadow(0 1px 0 #98a2ab) drop-shadow(1px 2px 0 #5c646c) drop-shadow(2px 4px 5px #000b);
}
.boardhead .count[data-bubble-ready] { color: transparent; }
.boardhead .count-note {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: #919aa2;
  align-self: center;
}

/* Page controls. Hard-edged and offset-shadowed like every other control here,
   not a pair of floating circles. */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 20px;
}
.pager[hidden] { display: none; }
.pagebtn {
  width: 42px; height: 34px;
  border: 1px solid #454b52;
  border-radius: 4px;
  background: linear-gradient(#373c42, #22262a);
  box-shadow: 0 3px 0 #0f1113, inset 0 1px 0 #666f77;
  color: #e2e9ef;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.pagebtn:hover:not(:disabled) { background: linear-gradient(#434951, #282d32); }
.pagebtn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #0f1113, inset 0 1px 0 #666f77; }
.pagebtn:disabled { opacity: .32; cursor: default; box-shadow: 0 3px 0 #0f1113; }
.pagelabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: #bbc3cb;
  min-width: 46px;
  text-align: center;
}
.grid { gap: 13px; }
.tok {
  padding: 14px 15px;
  gap: 13px;
  background: var(--charcoal-face);
  border-color: #4c525a #272b2f #111315 #40464d;
  border-radius: 15px;
  box-shadow: var(--bevel), var(--small-depth);
  transition: transform .12s ease;
}
.tok:hover { background: linear-gradient(145deg, #454b53, #2c3136); border-color: #7f8993; }
.tok:active { transform: translateY(2px); }
.tok .av, .sheet-top .av { box-shadow: inset 0 1px 2px #eaf2fa44, 0 2px 0 #646d75, 1px 4px 5px #0009; }
.tok .av { width: 40px; height: 40px; border-radius: 10px; }
.tok .tile, .sheet-top .tile {
  background: var(--resin-face);
  color: var(--resin-ink);
  box-shadow: inset 1px 2px 2px #ffffff7f, inset -1px -2px 3px #8d99a355;
  text-shadow: 0 1px 0 #ffffff;
  font-family: var(--display);
  font-weight: 900;
}
.tok .nm { color: #eaeff4; }
.tok .mc { color: #ffffff; font-size: 13px; }
.tok .sy { font-size: 10px; }
.chip-v { border: 1px solid #435f42; border-radius: 6px; box-shadow: inset 0 1px 0 #caffb314, 0 2px 0 #0a0b0c; }
.chip-v.demo { background: linear-gradient(#373b40, #282c30); border-color: #5b626a; color: #b2bac2; }
.chip-v .vmark { color: var(--green); }

/* Detail dialogs use the same material system as the page. */
.sheet { background: #040507c9; }
.sheet-inner { border-radius: 25px; padding: 25px; }
.sheet-inner .stats { padding: 0; gap: 10px; }
.sheet-inner .stat { padding: 12px; border: 1px solid #131517; border-bottom-color: #4e555d; border-radius: 10px; background: #15181b; box-shadow: inset 1px 2px 4px #0009; }
.sheet-inner .stat .v { color: #e9eff5; }
.sheet-inner .ca { border-color: #151719; background: #121416; box-shadow: inset 0 2px 4px #0009, 0 1px 0 #606870; }
.sheet-actions { gap: 12px; padding-bottom: 5px; }
.sheet-actions .cta { font-size: 13px; border-radius: 10px; text-align: center; }
footer { border-top-color: #2f353b; box-shadow: inset 0 1px 0 #93a0ad19; color: #9aa2aa; }

@media (max-width: 859px) {
  .hl { margin-left: 0; margin-right: 0; font-size: 46px; }
  .nav { flex-wrap: wrap; }
  .nav .capill { order: 5; flex: 1 0 100%; justify-content: center; }
  .nav .capill:disabled { display: none; }
}
@media (max-width: 679px) {
  .nav { width: calc(100% - 24px); margin: 12px auto 16px; padding: 6px 13px; gap: 6px; border-radius: 14px; }
  .brand { font-size: 17px; gap: 7px; margin-right: 0; }
  .brand .mark { flex-basis: 28px; width: 28px; height: 32px; }
  .brand .mark img, .brand .mark canvas { width: 54px; height: 54px; }
  .social-x { flex-basis: 32px; width: 32px; height: 32px; }
  .pillbtn { padding: 10px 12px; font-size: 11.5px; }
  main { padding: 0 18px 50px; }
  .hl { font-size: 38px; margin: 30px 0 14px; }
  .intro { font-size: 12px; line-height: 1.5; margin-bottom: 14px; }
  .colhead { flex-wrap: wrap; row-gap: 9px; }
  .colhead .side { font-size: 8px; }
  .card { padding: 19px; border-radius: 21px; }
  .drop { padding: 26px 16px; }
  .drop .dt { font-size: 24px; }
  .drop .dh { font-size: 12px; }
  .details-content > .stats { grid-template-columns: 1fr 1fr; padding: 10px; gap: 7px; }
  .srow { flex-wrap: wrap; gap: 4px; padding: 8px; }
  .tok { gap: 9px; padding: 12px; }
  .tok .nm { font-size: 12px; }
  .tok .mc { font-size: 11px; }
  .tok .av { width: 34px; height: 34px; }
  .chip-v { font-size: 8px; padding: 2px 4px; }
  .sheet-inner { padding: 20px; }
}
@media (max-width: 359px) {
  .brand { font-size: 15px; }
  .pillbtn { font-size: 11px; padding: 10px; }
  .hl { font-size: 30px; }
  .card { padding: 16px; }
  .drop .dt { font-size: 22px; }
  .gate { font-size: 11px; }
  .fields .two { grid-template-columns: 1fr; }
  .tok { gap: 8px; }
  .tok .sy { font-size: 8px; }
  /* The verified/demo split wraps to a second line here and drags the whole
     heading row taller. The count beside the title is the number that matters;
     the breakdown is a nicety and can go. */
  .boardhead .count-note { display: none; }
}