/* The logo's molded surfaces, translated into native, accessible controls.
   Light comes from the upper left; every raised surface shares that direction. */
@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: #090807;
  --card: #25231f;
  --text: #f5eddf;
  --muted: #b2a797;
  --faint: #897e6e;
  --line: rgba(224, 201, 166, .13);
  --line-2: rgba(242, 214, 169, .26);
  --col: 510px;
  --r-card: 25px;
  --r-inner: 13px;
  --resin-face: linear-gradient(145deg, #ffbe50 0%, #ff9f1c 44%, #e58a0c 100%);
  --charcoal-face: linear-gradient(145deg, #37342e 0%, #27241f 46%, #1e1c19 100%);
  --bevel: inset 1px 2px 2px rgba(255, 239, 208, .16), inset -2px -3px 4px rgba(0, 0, 0, .35);
  --panel-depth: 1px 1px 0 #24201a, 2px 2px 0 #211c16, 3px 3px 0 #1c1813,
    4px 4px 0 #18140f, 5px 5px 0 #120f0b, 6px 6px 0 #0b0907,
    10px 18px 28px rgba(0, 0, 0, .55);
  --small-depth: 0 1px 0 #1b1712, 1px 2px 0 #15110d, 1px 3px 0 #0c0a07,
    2px 7px 10px rgba(0, 0, 0, .4);
}

body { background: var(--bg); }
:is(button, a, input, textarea, [role="button"]):focus-visible {
  outline: 2px solid #ffcd7c;
  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, #2b2925, #191816 62%);
  border: 1px solid #3b3730;
  border-top-color: #575045;
  border-radius: 16px;
  box-shadow: var(--bevel), var(--small-depth);
}
.brand {
  gap: 8px;
  font-size: 20px;
  color: #fff1d9;
  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 #39342b;
  border-top-color: #514a3e;
  border-radius: 10px;
  padding: 8px 14px;
  background: linear-gradient(#302d27, #23201b);
  box-shadow: inset 0 1px 0 #4d4538, var(--small-depth);
  color: #b8ab96;
  font-size: 12px;
  font-weight: 600;
  transition: transform .12s ease;
}
.nav .tab.on {
  color: #3b2305;
  background: var(--resin-face);
  border-color: #dc8c21;
  border-top-color: #ffd087;
  box-shadow: inset 0 1px 2px #ffe1ac, 0 2px 0 #794308, 0 4px 0 #3f2204, 0 7px 8px #0008;
  text-shadow: 0 1px 0 #ffd488;
}
.nav .tab:active { transform: translateY(2px); }
.capill {
  border-radius: 9px;
  background: linear-gradient(#10100e, #1c1b17);
  border-color: #11100d;
  box-shadow: inset 0 2px 4px #0009, 0 1px 0 #504638;
  padding: 10px 12px;
}
.capill .k { color: #c8a770; }
.capill .v { color: #918675; font-size: 9.5px; }

.social-x {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 34px;
  border: 1px solid #494035;
  border-top-color: #6b5a42;
  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 #713c08) drop-shadow(0 2px 2px #0009); }
/* It became a real link on 2026-09-21. Everything above still applies; these
   three lines are what stops an <a> looking different from the <span> it
   replaced, and give it the press the other controls have. */
.social-x { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.social-x:hover { border-color: #6b5a42; }
.social-x:active { transform: translateY(1px); }

/* Solid orange controls with a real press distance above their lower edge. */
.pillbtn, .cta {
  color: #321d04;
  background: var(--resin-face);
  border: 1px solid #c57a15;
  border-top-color: #ffd58f;
  border-left-color: #f7b34c;
  border-radius: 12px;
  box-shadow: inset 1px 2px 3px #ffe1acaa, inset -2px -3px 3px #b15b0040,
    0 1px 0 #a5640e, 0 2px 0 #995907, 0 3px 0 #8e4f02,
    0 4px 0 #804601, 0 5px 0 #633500, 1px 9px 12px #0008;
  text-shadow: 0 1px 0 #ffcc75;
  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, #ffcc73, #ffab30 44%, #ec951b);
  box-shadow: inset 1px 2px 3px #fff0c9aa, inset -2px -3px 3px #b15b0040,
    0 1px 0 #a5640e, 0 2px 0 #995907, 0 3px 0 #8e4f02,
    0 4px 0 #804601, 0 5px 0 #633500, 1px 9px 12px #0008;
}
.pillbtn:active, .cta:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: inset 1px 1px 2px #ffe1ac80, inset 0 -2px 3px #b15b0040,
    0 1px 0 #633500, 0 3px 5px #0008;
}
.pillbtn.ghost, .sheet-actions .cta.sec {
  color: #e3d6c1;
  background: var(--charcoal-face);
  border-color: #494137;
  text-shadow: 0 -1px 0 #000;
  box-shadow: var(--bevel), 0 4px 0 #0e0b08, 0 8px 12px #0008;
}
.pillbtn.ghost:hover, .sheet-actions .cta.sec:hover {
  background: linear-gradient(145deg, #454036, #2c271f);
  box-shadow: var(--bevel), 0 4px 0 #0e0b08, 0 8px 12px #0008;
}
.pillbtn.ghost:active, .sheet-actions .cta.sec:active {
  transform: translateY(3px);
  box-shadow: var(--bevel), 0 1px 0 #0e0b08, 0 3px 5px #0008;
}
.cta {
  margin-top: 22px;
  padding: 18px 22px;
  font-size: 16px;
  border-radius: 15px;
}
.cta:disabled {
  opacity: 1;
  color: #c4b292;
  background: linear-gradient(145deg, #716044, #55442c 55%, #44341f);
  border-color: #766245 #3a2b19 #302111 #766245;
  text-shadow: 0 1px 0 #302316;
  box-shadow: inset 1px 2px 2px #a78b5a55, inset -2px -3px 4px #25180888,
    0 2px 0 #372611, 0 4px 0 #2b1b0b, 0 5px 0 #1a1005, 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;
  color: #fff1d9;
  text-shadow: 0 2px 3px #0006;
}
.hl span {
  display: inline;
  white-space: nowrap;
  color: #ffae32;
  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: #9b8c76; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.statepill {
  background: linear-gradient(#35312b, #242019);
  border: 1px solid #51483b;
  border-bottom-color: #17110a;
  border-radius: 10px;
  color: #c9baa4;
  font-size: 10px;
  padding: 7px 10px;
  box-shadow: inset 0 1px 0 #6e604a55, 0 2px 0 #110c06, 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(#462c26, #2d1915); border-color: #7d4436; }

/* Thick charcoal housings surround the resin drop area and recessed form. */
.card, .sheet-inner {
  background: var(--charcoal-face);
  border-color: #575044 #262018 #0d0b08 #494134;
  box-shadow: var(--bevel), var(--panel-depth);
  padding: 22px;
}
.card .lbl {
  color: #d8c7aa;
  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 #c7790f;
  border-top-color: #ffdb9c;
  border-left-color: #ffca79;
  border-radius: 17px;
  color: #321a02;
  box-shadow: inset 2px 3px 5px #fff0c680, inset -3px -4px 5px #ac56004d,
    0 1px 0 #a55b02, 0 2px 0 #9a5200, 0 3px 0 #8a4800,
    0 4px 0 #7b3f00, 0 5px 0 #6b3400, 0 6px 0 #4b2400,
    2px 12px 17px #0009;
  transition: transform .12s ease;
}
.drop:hover:not(.busy), .drop.hot {
  background: linear-gradient(145deg, #ffcc70, #ffac30 44%, #ed9418);
  border-color: #ffcd80;
}
.drop:active:not(.busy) {
  transform: translateY(4px);
  box-shadow: inset 2px 2px 3px #fff0c660, inset -2px -2px 3px #ac56004d,
    0 2px 0 #6b3400, 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 #ffda91;
}
.drop .dh { color: #593309; 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 #0c0a06;
  border-radius: 5px;
  background: linear-gradient(#11100d, #262018);
  box-shadow: inset 0 2px 3px #000a, 0 1px 0 #796549;
}
.gate input:checked { background: var(--resin-face); border-color: #da921e; box-shadow: inset 0 1px 1px #ffe8b2, 0 2px 0 #623901; }
.gate input:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid #321a02;
  border-bottom: 2px solid #321a02;
  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(#3c352a, #282119);
  border: 1px solid #5a4b36;
  border-radius: 6px;
  padding: 4px 9px;
  color: #d8c6a6;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #7d674355, 0 2px 0 #140d05;
}
.linkbtn:active { transform: translateY(1px); }
.link { height: 34px; color: #bd873c; font-size: 19px; text-shadow: 0 2px 0 #52300a, 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 #ffdb94);
  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, #100f0c, #1a1712);
  border-color: #100d09 #282117 #4d4130 #15110c;
  box-shadow: inset 2px 3px 5px #000a, 0 1px 0 #8d765026;
  color: #f6e4c8;
  padding: 14px 15px;
  font-size: 13px;
  border-radius: 10px;
}
.fields input:focus, .fields textarea:focus { border-color: #b67b2e; }
.fields input::placeholder, .fields textarea::placeholder { color: #a18f74; opacity: 1; }
.fields textarea { min-height: 66px; }
.verdict { border: 1px solid #655238; box-shadow: inset 0 2px 4px #0007, 0 1px 0 #a88a4726; }
.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 #3c352a;
  background: linear-gradient(145deg, #27231c, #1b1711);
  box-shadow: var(--bevel), var(--small-depth);
}
.srow {
  min-width: 0;
  padding: 8px 9px;
  background: linear-gradient(#13110d, #1b1711);
  border: 1px solid #0b0906;
  border-bottom-color: #483924;
  border-radius: 6px;
  box-shadow: inset 0 2px 3px #0008;
  font-size: 10.5px;
}
.srow b { font-size: 10px; color: #dfc9a6; }
.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: #080704; box-shadow: inset 0 1px 3px #000, 0 1px 0 #655135; }
.bar > i { background: linear-gradient(#ffcc73, #ee9416); box-shadow: inset 0 1px 0 #ffe5ac; border-radius: inherit; }
.err { color: #ff8f76; }

/* 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: #f5e1bd;
  text-shadow: 0 1px 0 #a18a66, 1px 2px 0 #625032, 2px 3px 0 #30200c, 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, in
   orange rather than cream, 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: #ffae32;
}
.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 #a1631a) drop-shadow(1px 2px 0 #6d3d07) 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: #9b8c76;
  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 #4a3c28;
  border-radius: 4px;
  background: linear-gradient(#3a2f20, #241c13);
  box-shadow: 0 3px 0 #120d08, inset 0 1px 0 #6b583a;
  color: #ffd9a0;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.pagebtn:hover:not(:disabled) { background: linear-gradient(#463a2a, #2b2117); }
.pagebtn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #120d08, inset 0 1px 0 #6b583a; }
.pagebtn:disabled { opacity: .32; cursor: default; box-shadow: 0 3px 0 #120d08; }
.pagelabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: #c2ae90;
  min-width: 46px;
  text-align: center;
}
.grid { gap: 13px; }
.tok {
  padding: 14px 15px;
  gap: 13px;
  background: var(--charcoal-face);
  border-color: #514737 #2a2013 #130d07 #453a29;
  border-radius: 15px;
  box-shadow: var(--bevel), var(--small-depth);
  transition: transform .12s ease;
}
.tok:hover { background: linear-gradient(145deg, #494034, #2f281f); border-color: #8a6838; }
.tok:active { transform: translateY(2px); }
.tok .av, .sheet-top .av { box-shadow: inset 0 1px 2px #ffdd9544, 0 2px 0 #6c3e0a, 1px 4px 5px #0009; }
.tok .av { width: 40px; height: 40px; border-radius: 10px; }
.tok .tile, .sheet-top .tile {
  background: var(--resin-face);
  color: #512b02;
  box-shadow: inset 1px 2px 2px #ffe6b07f, inset -1px -2px 3px #b9610055;
  text-shadow: 0 1px 0 #ffd78c;
  font-family: var(--display);
  font-weight: 900;
}
.tok .nm { color: #f1e0c5; }
.tok .mc { color: #ffd087; 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 #0b0c06; }
.chip-v.demo { background: linear-gradient(#3a3126, #2b2218); border-color: #615038; color: #b9a98e; }
.chip-v .vmark { color: var(--green); }

/* Detail dialogs use the same material system as the page. */
.sheet { background: #050402c9; }
.sheet-inner { border-radius: 25px; padding: 25px; }
.sheet-inner .stats { padding: 0; gap: 10px; }
.sheet-inner .stat { padding: 12px; border: 1px solid #15100a; border-bottom-color: #54432e; border-radius: 10px; background: #17120d; box-shadow: inset 1px 2px 4px #0009; }
.sheet-inner .stat .v { color: #f4d6a5; }
.sheet-inner .ca { border-color: #171009; background: #14100b; box-shadow: inset 0 2px 4px #0009, 0 1px 0 #665032; }
.sheet-actions { gap: 12px; padding-bottom: 5px; }
.sheet-actions .cta { font-size: 13px; border-radius: 10px; text-align: center; }
footer { border-top-color: #3c2a13; box-shadow: inset 0 1px 0 #9c774719; color: #a3937a; }

@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; }
}