/* HIVEMIND · the world page (world.html).
   Two layouts from one markup:
   - the DEFAULT is a flat long page: paper, ink, honey stickers, big type, one honey pipe that joins the stops.
     It is what you see before WebGL, without WebGL, and on a lost GL context. Nothing is lost but the ride.
   - html.w-3d (added by world/arena.js after the first frame) turns on the world: a fixed canvas behind tall stops,
     sticky sticker panels docked left/right, the rail, the leader lines, the paper grain.
   style.css stays the source of every app.js component (lists, chat, cards, modals). This file only adds w-* parts,
   and inside the world panels it only changes LAYOUT (columns, heights), never their look. */

:root {
  --wax: #F4EFE4;
  --wood: #D6BE95;
  --honey-mid: #E2B865;
  --railw: 76px;              /* left strip the rail owns in the world */
  --pw: 420px;                /* docked panel width */
  --pw-wide: 480px;           /* the desk panel (chat) */
  --ptop: calc(var(--hdr) + 24px);   /* docked panels sit this far down: under the header, never beneath it */
  /* the hero words take a narrow column so the machine gets the right ~60 % of the screen (rail.js fits the toy into
     the paper right of this box). The wordmark is sized from the same vw so it always fits inside it. */
  --hero-w: clamp(300px, 32vw, 560px);
  --cvh: 50svh;               /* phones: the canvas window on top (VISION §4.8) */
  --pipe-x: calc(var(--gut) + 20px);
  --hexbg-honey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M22 2 41 13v22L22 46 3 35V13Z' fill='%23FFB000' stroke='%2317130D' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hexbg-wax: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M22 2 41 13v22L22 46 3 35V13Z' fill='%23FFF8EA' stroke='%2317130D' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hexbg-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M22 2 41 13v22L22 46 3 35V13Z' fill='%2317130D' stroke='%2317130D' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

.w-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.w-body { overflow-x: hidden; }
.w-hide-s { display: inline; }
.w-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
mark { color: inherit; background: none; }
.w-h mark, .w-tag mark {
  padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 60%, var(--honey) 60%, var(--honey) 92%, transparent 92%);
}

/* ================= header ================= */
.w-top { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: var(--bw) solid var(--ink); }
.w-top-in { display: flex; align-items: center; gap: 10px; height: var(--hdr); padding: 0 var(--gut); }
.w-logo { flex: none; }
.w-hcount {
  display: none; flex: none; padding: 5px 11px; font-size: 13px; font-weight: 700; border: 2px solid var(--ink); border-radius: 999px; background: var(--honey-wash);
}
.w-hcount::before { content: 'Promotion in '; font-family: var(--display); font-weight: 700; color: var(--ink-2); }
.w-top-r { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.w-top-r .pill.me { display: inline-flex; }
/* docs.html: a plain text link, never a button (phones find it in the footer) */
.w-docs { flex: none; margin-right: 4px; font: 700 14.5px/1.2 var(--display); color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.w-docs:hover { color: var(--ink); text-decoration-color: var(--honey); }
@media (max-width: 759px) { .w-docs { display: none; } }
@media (max-width: 1099px) { .has-ca .w-docs { display: none; } }
.w-connect { gap: 7px; }
.w-qrbtn { color: var(--ink); }
.w-snd svg { display: none; }
.w-snd .w-snd-off, .w-snd[aria-pressed="true"] .w-snd-on, .w-snd.on .w-snd-on { display: block; }
.w-snd[aria-pressed="true"] .w-snd-off, .w-snd.on .w-snd-off { display: none; }
.w-snd[aria-pressed="true"], .w-snd.on { background: var(--honey); }
/* signed in: #meBtn takes the place of Connect + QR, everywhere */
.w-in #wConnect, .w-in #wQr, .w-in .w-connect-b, .w-in #heroQr, .w-in #deskQr { display: none !important; }

/* ================= fixed layers (flat page: the world is off) ================= */
.w-canvas { position: fixed; inset: 0; z-index: 0; visibility: hidden; opacity: 0; pointer-events: none; }
.w-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
/* no WebGL: app.js shows the still honeycomb. On the flat page it is a faint print behind everything. */
.w-still { position: fixed; inset: 0; z-index: 0; opacity: .12; pointer-events: none; }
.w-still svg { width: 100%; height: 100%; }
.w-grain, .w-fade, .w-leaders, .w-tags { display: none; }

.w-main { position: relative; z-index: 3; display: block; }

/* ================= the rail (desktop), the dots (phones), the radio chip, the sticker ================= */
.w-rail { position: fixed; left: 14px; top: calc(50% + var(--hdr) / 2); z-index: 20; display: none; flex-direction: column; align-items: flex-start; gap: 9px; transform: translateY(-50%); }
.w-rh { position: relative; display: block; width: 46px; height: 50px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.w-hexsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform .25s var(--ease-back); }
.w-hexb { fill: var(--card); }
.w-hexfill { fill: var(--honey); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--fill, 0)); }
.w-hexo { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.w-rn { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12.5px/1 var(--mono); letter-spacing: -.02em; pointer-events: none; }
.w-rl {
  position: absolute; left: 58px; top: 50%; display: block; width: max-content; max-width: 280px; padding: 8px 12px; transform: translate(-6px, -50%);
  font: 650 14px/1.25 var(--display); white-space: nowrap; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--sh-s);
  opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .2s var(--ease-back), visibility 0s linear .15s; pointer-events: none;
}
.w-rl b { display: block; font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.w-rh:hover .w-rl, .w-rh:focus-visible .w-rl { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .15s ease, transform .2s var(--ease-back); }
.w-rh:hover .w-hexsvg { transform: scale(1.08); }
.w-rh.here .w-hexsvg { transform: scale(1.16); }
.w-rh.here .w-hexo { stroke-width: 3.4; }
.w-rh.here .w-rn { font-size: 13.5px; font-weight: 800; }
.w-lamp { position: absolute; right: -3px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper-3); border: 2px solid var(--ink); pointer-events: none; }
.w-rh.lamp .w-lamp { animation: wLamp .5s ease-in-out 5 both; }
.w-dots button.lamp i { animation: wLampDot .5s ease-in-out 5 both; }
.w-me {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 46px; height: 54px; margin-top: 8px; padding: 0;
  font: 800 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--honey); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: var(--sh-s);
}
.w-me:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.w-me:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.w-dots {
  position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; display: none; align-items: center; gap: 4px; padding: 5px 7px;
  transform: translateX(-50%); background: var(--card); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
}
.w-dots button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; background: none; border: 0; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.w-dots button i { display: block; width: 15px; height: 17px; background: var(--hexbg-wax) center / contain no-repeat; transition: transform .2s var(--ease-back); }
.w-dots button.past i { background-image: var(--hexbg-honey); }
.w-dots button.here i { background-image: var(--hexbg-honey); transform: scale(1.45); }
.w-dots .w-dot-me { width: 40px; height: 34px; margin-left: 4px; background: var(--honey); border: 2px solid var(--ink); border-radius: 999px; }

.w-radio {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: center; gap: 9px;
  max-width: min(440px, calc(100vw - 32px)); min-height: 42px; padding: 0 6px 0 12px; text-align: left; color: var(--ink);
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); -webkit-tap-highlight-color: transparent;
}
.w-radio:hover { background: var(--honey-wash); }
.w-radio-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--honey); border: 2px solid var(--ink); animation: pulse 1.6s ease-in-out infinite; }
.w-radio-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 13.5px/1.25 var(--display); }
.w-radio.flip .w-radio-t { animation: wRadioIn .38s var(--ease-back) both; }
.w-radio-k { flex: none; padding: 5px 9px; font: 700 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); background: var(--ink); border-radius: 999px; }
.w-radio.hot .w-radio-dot { animation: wLamp .45s ease-in-out 4 both; }

.w-sticker {
  position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 35; display: flex; align-items: center; gap: 12px; max-width: min(420px, calc(100vw - 32px));
  padding: 12px 12px 12px 18px; background: var(--honey); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-2deg); animation: wSlapR .46s var(--ease-back) both;
}
.w-sticker-t { font: 800 19px/1.15 var(--display); letter-spacing: -.02em; }
.w-sticker .btn { background: var(--card); flex: none; }
.w-sticker-x { flex: none; width: 30px; height: 30px; padding: 0; font: 700 18px/1 var(--display); background: none; border: 2px solid var(--ink); border-radius: 9px; }
.w-sticker-x:hover { background: var(--honey-wash); }

/* ================= the flat page: stops, the honey pipe, sticker panels ================= */
.w-stop { position: relative; max-width: 1280px; margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--gut) 0 calc(var(--gut) + 72px); }
.w-snap { position: absolute; left: 0; top: calc(var(--in, 0) * 1vh); width: 1px; height: 1px; pointer-events: none; }
/* one pipe of paper honey runs down the page and joins the stops: "follow the honey" without WebGL */
.w-stop:not(.w-table)::before, .w-drawer::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--pipe-x); width: 17px; z-index: 0;
  border: solid var(--ink); border-width: 0 var(--bw);
  background: repeating-linear-gradient(180deg, var(--honey-soft) 0 26px, var(--honey) 26px 34px);
  background-size: 100% 34px; animation: wFlow 1.4s linear infinite;
}
.w-floor::before { top: 48px; border-top-width: var(--bw); border-radius: 12px 12px 0 0; }
.w-loop::before { bottom: auto; height: 210px; border-bottom-width: var(--bw); border-radius: 0 0 12px 12px; }
/* each stop is a station on the pipe */
.w-stop:not(.w-table)::after {
  content: attr(data-n); position: absolute; left: calc(var(--pipe-x) - 14px); top: calc(clamp(72px, 9vw, 128px) + 6px); z-index: 1;
  display: grid; place-items: center; width: 46px; height: 50px; font: 800 14px/1 var(--mono); background: var(--hexbg-honey) center / contain no-repeat;
}
.w-pin { position: relative; z-index: 2; }

.w-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 0 clamp(28px, 4vw, 56px);
  padding: 26px clamp(20px, 2.6vw, 34px) 26px; background: var(--card); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink);
}
.w-panel > .w-tab { grid-column: 1 / -1; }
.w-panel > .w-lede { grid-column: 1; }
.w-panel > .w-body { grid-column: 2; min-width: 0; }
.w-panel > .w-more { grid-column: 2; }
[data-dock="right"] .w-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
[data-dock="right"] .w-panel > .w-lede { grid-column: 2; grid-row: 2; }
[data-dock="right"] .w-panel > .w-body { grid-column: 1; grid-row: 2 / span 2; }
[data-dock="right"] .w-panel > .w-more { grid-column: 2; grid-row: 3; }
/* two-column panels keep their headline in view while the long side scrolls; one-column ones (desk, wall) do not */
@media (min-width: 960px) {
  .w-panel > .w-lede { position: sticky; top: var(--ptop); }
  .w-desk .w-panel > .w-lede, .w-wall .w-panel > .w-lede { position: static; }
}

/* the ink tab: printed on the sticker's corner (inside the border, so a scrolling panel never clips it) */
.w-tab {
  display: inline-flex; align-items: center; gap: 9px; justify-self: start; width: fit-content; margin: -26px 0 20px calc(-1 * clamp(20px, 2.6vw, 34px));
  padding: 9px 14px 8px; font: 700 12px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--paper); background: var(--ink); border-radius: 15px 0 14px 0;
}
.w-tab span { color: var(--honey); }
.w-tab-real { color: var(--ink); background: var(--honey); box-shadow: inset 0 0 0 0 var(--ink); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.w-tab-real span { color: var(--ink); }

.w-h { font: 800 clamp(38px, 5.2vw, 76px)/.95 var(--display); letter-spacing: -.038em; text-wrap: balance; }
.w-line { margin-top: 14px; max-width: 34ch; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.45; font-weight: 560; color: var(--ink-2); }
.w-small { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.w-sub { font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.4; }

.w-nums { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 24px; }
.w-num { display: flex; flex-direction: column; min-width: 0; }
.w-num > b { font: 700 clamp(34px, 3.4vw, 54px)/1 var(--mono); letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-num > b i { font-style: normal; color: var(--ink-3); }
.w-num > span { margin-top: 7px; font: 800 11.5px/1.2 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.w-num > small { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.w-num-real > b { box-shadow: inset 0 -.24em 0 var(--honey); width: fit-content; }

/* world-owned numbers roll like an odometer */
.w-od { display: inline-flex; align-items: baseline; }
.w-odd { display: inline-block; position: relative; width: 1ch; height: 1em; line-height: 1em; overflow: hidden; vertical-align: top; }
.w-ods { display: block; transition: transform .75s cubic-bezier(.2, 1.25, .35, 1); }
.w-ods > span { display: block; height: 1em; line-height: 1em; text-align: center; }
.w-odc { display: inline-block; line-height: 1em; }

/* "More": everything past the headline, the numbers and the one button. Flat page = always open. */
.w-more { margin-top: 20px; padding-top: 14px; border-top: 2px dashed var(--line); min-width: 0; }
.w-more-btn {
  display: none; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px 0 14px;
  font: 700 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 11px;
}
.w-more-btn:hover { background: var(--honey-wash); }
.w-more-btn svg { flex: none; transition: transform .22s var(--ease-back); }
.w-more.open .w-more-btn svg { transform: rotate(180deg); }
.w-more-body { display: grid; gap: 12px; min-width: 0; }
.w-more.open .w-more-body { animation: wFold .28s ease-out both; }
.w-mount:empty { display: none; }

/* ================= 00 THE TABLE ================= */
.w-table { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 24px clamp(24px, 4vw, 64px); min-height: calc(100svh - var(--hdr)); padding: clamp(40px, 6vw, 80px) var(--gut) clamp(40px, 6vw, 72px); }
.w-table .w-panel { display: block; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.w-word {
  position: relative; isolation: isolate; width: fit-content; font: 800 clamp(64px, 11vw, 168px)/.84 var(--display); letter-spacing: -.048em;
  text-shadow: .032em .032em 0 var(--honey);
}
.w-m { position: relative; display: inline-block; }
/* the honey drip under the M: moments.js lets it go (THE FIRST DROP); between drops it just hangs */
.w-drip { position: absolute; left: 66%; top: .6em; z-index: -1; width: .22em; transform-origin: 50% 0; pointer-events: none; }
.w-drip-b { display: block; transform-origin: 50% 0; animation: wDripIdle 4.2s ease-in-out infinite; }
.w-drip svg { display: block; width: 100%; height: auto; overflow: visible; }
.w-tag { margin-top: clamp(22px, 2.6vw, 34px); max-width: 19ch; font: 780 clamp(24px, 2.7vw, 40px)/1.08 var(--display); letter-spacing: -.028em; }
.w-hsub { margin-top: 12px; max-width: 40ch; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.4; font-weight: 560; color: var(--ink-2); }
.w-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(20px, 2.4vw, 30px); }
.w-qrlink { margin-top: 14px; }
.w-hatch .w-qrlink { margin-top: 10px; }
.w-hero .w-btns .btn.big { min-height: 56px; }
/* the three hero numbers: one row, always. Columns take their own width; a long label wraps under its number before
   the row ever breaks (a wrapped row would leave an ink divider hanging) */
.w-hnums { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; margin-top: clamp(26px, 3vw, 40px); gap: 0; }
.w-hnums .w-num { padding: 2px 22px 2px 0; margin-right: 22px; border-right: 2px solid var(--ink); }
.w-hnums .w-num:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.w-hnums .w-num > b { font-size: clamp(30px, 3.2vw, 50px); }
.w-num-clock > b { color: var(--ink); }

/* the 7 lines: the whole pitch, joined by one pipe */
.w-seven { position: relative; justify-self: center; width: min(100%, 460px); }
.w-seven ol { position: relative; z-index: 1; display: grid; grid-auto-rows: 84px; }
.w-seven li:nth-child(even) { padding-left: 56px; }
.w-seven a { display: inline-flex; align-items: center; gap: 14px; height: 84px; color: var(--ink); text-decoration: none; }
.w-seven b { font: 800 clamp(20px, 1.9vw, 27px)/1.05 var(--display); letter-spacing: -.025em; padding: 4px 8px; margin-left: -4px; border-radius: 8px; background: rgba(236, 232, 223, .88); transition: background-color .15s ease; }
.w-sv { flex: none; display: grid; place-items: center; width: 72px; height: 80px; background: var(--hexbg-wax) center / contain no-repeat; transition: transform .25s var(--ease-back); }
.w-sv svg { width: 40px; height: 40px; }
.w-real-l .w-sv { background-image: var(--hexbg-honey); }
.w-seven a:hover .w-sv, .w-seven a:focus-visible .w-sv { transform: rotate(-8deg) scale(1.08); }
.w-seven a:hover b { background: var(--honey-soft); }
.w-seven-pipe { position: absolute; left: 0; top: 0; z-index: 0; width: 128px; height: 588px; overflow: visible; }
.w-seven-pipe path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.w-pipe-ink { stroke: var(--ink); stroke-width: 22; }
.w-pipe-honey { stroke: var(--honey-soft); stroke-width: 16; }
.w-pipe-flow { stroke: var(--honey); stroke-width: 16; stroke-dasharray: 8 26; animation: wPipeFlow 1.1s linear infinite; }

/* ================= 01 THE FLOOR ================= */
.w-pickpop { width: 100%; margin-bottom: 14px; }
.w-tape {
  position: relative; padding: 14px 16px 18px; background: var(--wax); border: 2px solid var(--ink); border-radius: 4px;
  /* a printed receipt: torn edge at the bottom */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x;
}
.w-tape-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px dashed var(--ink); font: 700 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.w-tape-h span { color: var(--ink-3); letter-spacing: .06em; }
.w-tape-list { display: grid; }
.w-tape-list li { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 7px 0; border-bottom: 1.5px dotted var(--line); font: 500 13.5px/1.3 var(--mono); }
.w-tape-list li:last-child { border-bottom: 0; }
.w-tape-list li.in { animation: wTapeIn .5s var(--ease-back) both; }
.w-tape-none { color: var(--ink-3); font-family: var(--display) !important; font-weight: 600 !important; }
.w-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 46%; padding: 0; overflow: hidden; font: 700 13.5px/1.3 var(--display); text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; }
.w-who i { flex: none; width: 10px; height: 11px; background: var(--c, var(--honey)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.w-who:hover { text-decoration: underline; }
.w-tape-list .w-v { color: var(--ink-3); }
.w-tape-list .w-sym { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-tape-list .w-amt { margin-left: auto; padding-left: 8px; font-weight: 700; white-space: nowrap; }
.w-tape-list .real { margin-left: 4px; }
.w-brainline { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.w-brainline .hx { flex: none; }
/* Ask the hive sits on top of the floor's body: a slimmer field group inside the sticker (same look, less height) */
.w-ask { margin-bottom: 14px; }
.w-ask .ask-form { padding: 10px 12px 12px; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
.w-ask .ask-k { margin-bottom: 8px; }
.w-ask .ask-k b { font-size: 16px; }
.w-ask .ask-in, .w-ask .ask-go { height: 44px; min-height: 44px; }
.w-ask .ask-out { margin-top: 10px; }
.w-ask .verdict { max-width: none; }

/* ================= 02 YOUR DESK ================= */
.w-desk .w-panel, .w-wall .w-panel { display: block; }
.w-desk .w-lede, .w-wall .w-lede { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin-bottom: 22px; }
.w-desk .w-line, .w-wall .w-line { margin-top: 0; }
.w-wall .w-small { flex-basis: 100%; margin-top: -2px; }
.w-wall .w-more { margin-top: 18px; }
.w-out { display: grid; gap: 18px; }
.w-ride { display: grid; gap: 10px; align-content: start; padding: 16px; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; }
.w-kick { width: fit-content; max-width: 100%; padding: 5px 10px; font: 700 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--honey); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* green / red ink on honey is too faint (about 2.7:1): the P&L sits on a small card chip (green on card ≈ 4.9:1) */
.w-kick .win, .w-kick .loss { font-weight: 800; padding: 0 4px; border-radius: 4px; background: var(--card); }
.w-ride-t { font: 800 22px/1.1 var(--display); letter-spacing: -.02em; }
.w-ride-rule { background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 6px 0; }
.w-ride-rule:empty { display: none; }
.w-copy { justify-self: start; }
.w-hatch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.w-cell { position: relative; width: 132px; height: 148px; display: grid; place-items: center; }
/* a capped wax cell in honey: "yours hatches here" */
.w-cell::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 148'%3E%3Cpath d='M66 4 126 38.5v71L66 144 6 109.5v-71Z' fill='%23FFF8EA' stroke='%2317130D' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M66 22 110 47.5v53L66 126 22 100.5v-53Z' fill='%23FFE3A0' stroke='%2317130D' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M22 74c14 8 30-6 44 0s30 8 44 0v26.5L66 126 22 100.5Z' fill='%23FFB000' stroke='%2317130D' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.w-cell-art { position: relative; width: 84px; height: 84px; }
.w-cell-art svg { width: 100%; height: 100%; }
.w-hatch-h { font: 800 clamp(24px, 2.3vw, 32px)/1.05 var(--display); letter-spacing: -.03em; }
/* ink on a honey underline: honey-deep text on cream is too faint to read (about 3.4:1) */
.w-hatch-t { margin-top: 4px; width: fit-content; font-weight: 750; color: var(--ink); box-shadow: inset 0 -.32em 0 var(--honey-soft); }
.w-points { display: grid; gap: 5px; margin-top: 10px; }
.w-points li { display: flex; gap: 9px; align-items: center; font-size: 15.5px; font-weight: 600; }
.w-points li::before { content: ''; flex: none; width: 12px; height: 13px; background: var(--hex) center / contain no-repeat; }
.w-hatch .w-btns { margin-top: 14px; }
.w-in { min-width: 0; }
.w-rankrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; margin-top: 12px; padding: 9px 12px; background: var(--honey-wash); border: 2px solid var(--ink); border-radius: 12px; }
.w-rankrow:has(.w-rank:empty) { display: none; }
.w-rank { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.w-rank b { font-family: var(--mono); font-weight: 700; }
.w-seerank { padding: 2px 0; white-space: nowrap; }
.w-think { margin-top: 12px; }
.w-more-side { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 900px) { .w-out { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }

/* ================= 03 THE BRAIN ================= */
.w-iq > b { font-size: clamp(64px, 7vw, 112px); letter-spacing: -.06em; }
.w-queen { margin-top: 6px; font-size: 13.5px !important; font-weight: 650 !important; color: var(--ink-2) !important; }
.w-queen b { font-family: var(--mono); font-weight: 700; }
.w-hline { padding: 2px 0 2px 16px; font: 750 clamp(19px, 1.9vw, 25px)/1.25 var(--display); letter-spacing: -.02em; border-left: 6px solid var(--honey); }
.w-lists { display: grid; gap: 18px; margin-top: 18px; }
.w-list { padding: 0; }
.w-pick { margin-top: 18px; padding: 16px; background: var(--honey-wash); border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
.w-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.w-stat span { font: 800 11.5px/1.2 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.w-stat b { font-size: 22px; }
.w-stat small { font-size: 13px; color: var(--ink-3); font-weight: 600; }
/* ids app.js also writes that this page already prints once, bigger (the brain's Hive IQ): kept for app.js, never shown */
.w-dup { display: none !important; }
@media (min-width: 700px) { .w-lists { grid-template-columns: 1fr 1fr; } }

/* ================= 04 THE WALL ================= */
.w-lb { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }
.w-wall .lb { max-height: none; }

/* ================= 05 THE STAGE ================= */
.w-clock { display: grid; gap: 8px; margin-top: 24px; }
.w-flip { display: flex; align-items: center; gap: 4px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; }
.w-flip i {
  position: relative; display: inline-block; padding: .14em .12em .1em; font-style: normal; font-weight: 700; letter-spacing: -.02em; color: var(--paper);
  background: var(--ink); border-radius: .16em; box-shadow: 3px 3px 0 var(--honey);
}
.w-flip i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--paper-2); opacity: .55; }
.w-flip i.flip { animation: wFlipDigit .32s ease-out; }
.w-flip em { font-style: normal; font-weight: 700; color: var(--ink); padding: 0 1px; }
.w-clock span { font: 700 13px/1.3 var(--display); color: var(--ink-2); }
.w-seats { margin-top: 12px; padding: 7px 11px; width: fit-content; font-size: 14px; font-weight: 700; background: var(--honey-wash); border: 2px solid var(--ink); border-radius: 10px; }
.w-stagegrid:empty { display: none; }
.w-stage-empty {
  display: grid; gap: 6px; justify-items: center; padding: 22px 18px; text-align: center; border: 2px solid var(--ink); border-radius: 14px;
  /* a seat wrapped in paper */
  background: repeating-linear-gradient(-45deg, var(--paper) 0 10px, var(--paper-2) 10px 20px);
}
.w-stage-empty b { font-size: 20px; font-weight: 800; }
.w-lock { display: grid; place-items: center; width: 42px; height: 46px; background: var(--hexbg-wax) center / contain no-repeat; }
.w-real { margin-top: 16px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); }
.w-settled { padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); }

/* ================= 06 THE VAULT ================= */
.w-seatbar { margin-top: 14px; }
.w-split { display: flex; border: var(--bw) solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 4px 4px 0 var(--ink); }
.w-split > div { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.w-split b { font-size: clamp(26px, 2.6vw, 34px); line-height: 1; }
.w-split span { font: 800 11.5px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.w-split-you { background: var(--honey); border-right: var(--bw) solid var(--ink); }
.w-split-vault { background: var(--paper-2); }
.w-vault .w-body > .w-sub { margin-top: 12px; }
.w-tlink { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; }
.w-tlink:hover { color: var(--honey-deep); }
.w-risk { display: grid; gap: 3px; margin-top: 18px; padding: 0 16px 14px; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }
.w-risk::before { content: ''; display: block; height: 9px; margin: 0 -16px 10px; border-bottom: 2px solid var(--ink); background: repeating-linear-gradient(-45deg, var(--ink) 0 8px, var(--honey) 8px 16px); }
.w-risk-h { font: 700 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.w-risk p:not(.w-risk-h) { font-size: 16px; font-weight: 600; }
.w-seatmath { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }

/* ================= wave 3 (BULLISH): the $HIVE lines ================= */
/* the one statement a stop makes about $HIVE: ink on a honey underline (app.js keeps the words true: data-copy) */
.w-bull { margin-top: 10px; max-width: 36ch; width: fit-content; font: 780 clamp(16px, 1.35vw, 18.5px)/1.3 var(--display); letter-spacing: -.012em; color: var(--ink); box-shadow: inset 0 -.36em 0 var(--honey-soft); }
/* the stage's house rule: small print with an ink hex, never red (red is only for P&L) */
.w-firedrule { margin-top: 10px; color: var(--ink-2); font-weight: 650; }
.w-firedrule::before { content: ''; display: inline-block; width: 10px; height: 11px; margin-right: 7px; vertical-align: -1px; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.w-vault .w-body > .w-bull { margin: 0 0 12px; }
.w-fund { margin-top: 12px; }
.w-tiers { display: grid; gap: 4px; }
.w-ladder:empty { display: none; }

/* ================= 07 THE LOOP ================= */
.w-loop .w-panel { display: block; text-align: center; padding-bottom: 34px; }
.w-loop .w-tab { display: flex; }
.w-final-h { font-size: clamp(54px, 8vw, 120px); }
.w-steps { display: grid; gap: 16px; margin-top: 30px; text-align: left; counter-reset: none; }
.w-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 34px 18px 18px; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; }
.w-step-n { position: absolute; top: -22px; left: 16px; display: grid; place-items: center; width: 44px; height: 48px; font: 800 18px/1 var(--mono); background: var(--hexbg-honey) center / contain no-repeat; }
.w-step h3 { font: 800 21px/1.1 var(--display); letter-spacing: -.02em; }
.w-step p { font-size: 15px; font-weight: 550; color: var(--ink-2); }
.w-step.hot { background: var(--honey-wash); }
.w-step .hold-note { margin-top: 4px; color: var(--ink); background: var(--card); }
.w-final-go { display: flex; justify-content: center; margin-top: 30px; }
@media (min-width: 640px) { .w-steps { grid-template-columns: 1fr 1fr; row-gap: 30px; } }
@media (min-width: 1080px) { .w-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ================= the live feed: a section on the flat page ================= */
.w-drawer { position: relative; display: block; max-width: 1280px; margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--gut) 0 calc(var(--gut) + 72px); }
.w-drawer-in { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 26px clamp(20px, 2.6vw, 34px) 26px; background: var(--card); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
.w-drawer-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.w-feed-h { font-size: clamp(30px, 3.4vw, 48px); margin-bottom: 18px; }
.w-dclose { display: none; position: absolute; top: -8px; right: -8px; width: 38px; height: 38px; padding: 0; font: 700 22px/1 var(--display); background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; }
.w-dclose:hover { background: var(--honey-wash); }
.w-feedcard { border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--card); }
.w-scrim { display: none; }
/* the feed comes after the story's last stop: the honey pipe ended at 07, so no pipe runs beside it */
html:not(.w-3d) .w-drawer::before { display: none; }

/* ================= footer ================= */
.w-foot { position: relative; z-index: 3; margin-top: 96px; background: var(--card); border-top: var(--bw) solid var(--ink); }
.w-foot-in { max-width: 1280px; margin: 0 auto; padding: 24px var(--gut) calc(32px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.w-foot-note { flex-basis: 100%; font-size: 13.5px; color: var(--ink-2); font-weight: 550; }

/* ================= wallet modal: ui/qr.js fills #qrBlock inside #wModalQr ================= */
.w-modalqr { display: block; }

/* ================= flat page: sizes ================= */
@media (min-width: 1100px) { .w-hcount { display: inline-block; } }
@media (min-width: 1440px) { .w-rail { display: flex; } }
@media (max-width: 959px) {
  .w-panel, [data-dock="right"] .w-panel { display: block; }
  .w-panel > .w-body { margin-top: 22px; }
  .w-table { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .w-seven { justify-self: start; }
}
@media (max-width: 719px) {
  :root { --pipe-x: 12px; }
  .w-stop, .w-drawer { padding: 64px var(--gut) 0 calc(var(--gut) + 30px); }
  .w-stop:not(.w-table)::before, .w-drawer::before { width: 12px; }
  .w-stop:not(.w-table)::after { left: 2px; top: 66px; width: 32px; height: 35px; font-size: 11px; }
  .w-floor::before { top: 40px; }
  .w-table { padding: 28px var(--gut) 20px; }
  .w-panel, .w-drawer-in { padding: 22px 16px 20px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .w-tab { margin: -22px 0 16px -16px; }
  .w-h { font-size: clamp(34px, 10vw, 46px); }
  .w-word { font-size: clamp(58px, 18vw, 104px); }
  .w-tag { font-size: clamp(22px, 6.4vw, 30px); }
  .w-nums { gap: 14px 20px; }
  .w-num > b { font-size: clamp(28px, 8vw, 38px); }
  /* the three hero numbers stay one row: the labels wrap, the numbers do not */
  .w-hnums { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .w-hnums .w-num { padding-right: 10px; margin-right: 10px; }
  .w-hnums .w-num > b { font-size: clamp(20px, 6.2vw, 30px); }
  .w-hnums .w-num > span { font-size: 10px; line-height: 1.25; }
  /* the flat page on a phone has its feed in the page: no chip over the cards */
  html:not(.w-3d) .w-radio { display: none; }
  .w-seven ol { grid-auto-rows: 76px; }
  .w-seven a { height: 76px; }
  .w-seven-pipe { height: 532px; }
  .w-sv { width: 64px; height: 72px; }
  .w-seven li:nth-child(even) { padding-left: 48px; }
  .w-hatch { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .w-cell { width: 108px; height: 121px; }
  .w-cell-art { width: 68px; height: 68px; }
  .w-sticker { right: 12px; left: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); max-width: none; }
  .w-radio { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: calc(100vw - 20px); }
  .w-foot { margin-top: 72px; padding-bottom: 56px; }
}
@media (max-width: 479px) {
  .w-hide-s { display: none; }
  .w-top-in { gap: 7px; }
  .w-top-r { gap: 6px; }
  .has-ca .w-logo .logo-word, .w-logo .logo-word { display: none; }
  .w-buy .tk { display: none; }
  #wQr { display: none !important; }
  /* launch day (CA + X + Buy) on a 390 px phone: the header must fit, Buy last and tappable. X lives in the footer;
     LIVE and your address shrink to their dot / colour hex (the words stay for screen readers); Connect drops its icon */
  .has-ca .w-top-r #xBtn { display: none; }
  .w-top .live { padding: 0 7px; }
  .w-top .live b, .w-top-r .pill.me span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .w-connect svg { display: none; }
  .w-hero .w-btns .btn.big { min-height: 50px; padding: 0 16px; font-size: 16px; }
  .w-rankrow { flex-direction: column; align-items: flex-start; }
}
/* the smallest phones (320 px): the sound switch steps aside so Buy still fits */
@media (max-width: 379px) {
  .w-top-r #wSound { display: none !important; }
}

/* =====================================================================================================
   THE WORLD (html.w-3d): a fixed canvas behind tall stops; scroll rides the camera; panels dock.
   ===================================================================================================== */
html.w-3d { scroll-padding-top: 0; }
.w-3d .w-body { background-color: var(--paper); }
.w-3d .w-canvas { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .6s ease; }
.w-3d .w-still { display: none; }
/* the paper grain is laid (at 0) from the first paint when the world is coming, so turning the world on only fades it */
html.w-boot .w-grain, .w-3d .w-grain {
  display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: multiply; transition: opacity .6s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.w-3d .w-grain { opacity: .045; }
.w-3d .w-fade { display: block; position: fixed; inset: 0; z-index: 2; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.w-3d .w-fade.on { opacity: 1; }
.w-3d .w-leaders { display: block; position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.w-lead-halo { fill: none; stroke: var(--paper); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.w-lead-ink { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.w-lead-dot { fill: var(--honey); stroke: var(--ink); stroke-width: 2.5; }
.w-leaders.off { visibility: hidden; }

/* the stops become tall scroll lengths (transition + dwell, in vh); nothing in them blocks clicks on the canvas */
.w-3d .w-main { z-index: 3; }
.w-3d .w-stop, .w-3d .w-drawer:not(.open) { pointer-events: none; }
.w-3d .w-stop {
  max-width: none; margin: 0; padding: 0; height: calc((var(--in) + var(--dwell)) * 1vh);
  scroll-margin-top: calc(var(--in) * -1vh);    /* app.js scrollIntoView(#robot) lands on the plateau, not the ride */
}
.w-3d .w-stop::before, .w-3d .w-stop::after, .w-3d .w-drawer::before { display: none; }
.w-3d .w-seven { display: none; }
/* docked panels are pinned under the header for their whole dwell: FIXED, not sticky. A sticky pin let go as its
   section ended and slid the panel up under the header while the next ride began (the clipped floor tape). Now
   panels.js hides a panel the moment its section ends, and while it shows it never moves. (rail.js reads the pin's
   top for fixed and sticky alike.) The table's pin stays in the flow, the phones' pins too (rules below). */
.w-3d .w-pin { position: fixed; top: var(--ptop); left: 0; right: 0; height: 0; z-index: 3; }

/* docked sticker panels: one column, ≤ one screen, they scroll inside */
.w-3d .w-panel {
  display: block; width: var(--pw); max-width: calc(100vw - var(--railw) - 48px); margin-left: calc(var(--railw) + 22px);
  max-height: calc(100vh - var(--ptop) - 80px); overflow-y: auto; overscroll-behavior: auto; pointer-events: auto;
  padding: 22px 22px 18px; border-radius: 16px; box-shadow: 5px 5px 0 var(--ink);
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
  opacity: 0; visibility: hidden; transform: translateY(14px) rotate(-1.5deg) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.w-3d .w-panel::-webkit-scrollbar { width: 8px; }
.w-3d .w-panel::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 8px; border: 2px solid var(--card); }
.w-3d [data-dock="right"] .w-panel { margin-left: auto; margin-right: 24px; max-height: calc(100vh - var(--ptop) - 24px); transform: translateY(14px) rotate(1.5deg) scale(.98); }
.w-3d .w-stop.w-on .w-panel { opacity: 1; visibility: visible; transform: none; transition: none; animation: wSlap .42s var(--ease-back) both; }
.w-3d .w-stop.w-on[data-dock="right"] .w-panel { animation-name: wSlapR; }
/* the hero was already on the page before the world turned on: it stays put (no second arrival) */
.w-3d .w-table.w-on .w-panel { animation: none; }
.w-3d .w-tab { margin: -22px 0 16px -22px; }
.w-3d .w-panel > .w-lede { position: static; }
.w-3d .w-panel > .w-body { margin-top: 18px; }
.w-3d .w-h { font-size: clamp(30px, 2.7vw, 42px); line-height: 1; }
.w-3d .w-line { font-size: 16.5px; margin-top: 10px; }
/* (the hero's own numbers keep their flat-page spacing: the world turning on must not move them). A sticker's numbers
   stay one row: a long label wraps under its number instead of pushing the third number onto a line of its own. */
.w-3d .w-nums:not(.w-hnums) { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; gap: 12px 22px; margin-top: 18px; }
.w-3d .w-num > b { font-size: clamp(30px, 2.5vw, 40px); }
.w-3d .w-more { margin-top: 16px; padding-top: 12px; }
.w-3d .w-more-btn { display: flex; }
.w-3d .w-more:not(.open) > .w-more-body { display: none; }
.w-3d .w-more.open > .w-more-body { margin-top: 12px; }

/* 00 the table: no card frame, the wordmark straight on the paper, centred in the first screen. The words keep to a
   narrow column (--hero-w), so the machine beside them gets most of the screen: rail.js fits the toy into the paper
   right of this box. */
.w-3d .w-table { display: block; min-height: 0; }
.w-3d .w-table .w-pin { position: relative; top: 0; height: calc(100vh - var(--hdr)); display: flex; align-items: center; }
.w-3d .w-table .w-panel {
  width: var(--hero-w); max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none;
  /* the hero was on the page before the world turned on: it never hides or slaps in, it only scrolls away */
  opacity: 1; visibility: visible; transform: none; transition: none; animation: none;
}
/* the fees pipe runs in from the left, under the hero's small print: a hard paper edge keeps every letter readable
   (a print knockout, no blur; on bare paper it is invisible) */
.w-3d .w-hsub, .w-3d .w-hnums .w-num > span, .w-3d .w-hero .w-qrlink span {
  text-shadow: 2px 0 var(--paper), -2px 0 var(--paper), 0 2px var(--paper), 0 -2px var(--paper),
    1.5px 1.5px var(--paper), -1.5px -1.5px var(--paper), 1.5px -1.5px var(--paper), -1.5px 1.5px var(--paper);
}
/* T9 · the hero's first frame never jumps. html.w-boot (set in <head> when this browser can draw the world) gives the
   hero the world's exact box and type from the first paint, and html.w-3d keeps them: the switch only fades the canvas
   (and the paper grain) in. The world failing clears w-boot (world/arena.js, core.js): then the flat page's own hero. */
@media (min-width: 720px) and (pointer: fine) {
  html.w-boot:not(.w-3d) .w-table { display: block; max-width: none; height: 100vh; min-height: 0; margin: 0; padding: 0; }
  html.w-boot:not(.w-3d) .w-table .w-pin { height: calc(100vh - var(--hdr)); display: flex; align-items: center; }
  html.w-boot:not(.w-3d) .w-table .w-panel { width: var(--hero-w); max-width: calc(100vw - var(--railw) - 48px); margin-left: calc(var(--railw) + 22px); }
  html.w-boot:not(.w-3d) .w-seven { display: none; }
}
/* ui/qr.js shows "Sign in with your phone" only once the hive is ready (and never when signed in): its line is kept
   (empty, unseen) from the first paint, so the hero never shifts when it comes or goes */
html.w-boot:not(.w-in) .w-hero #heroQr[hidden], html.w-3d:not(.w-in) .w-hero #heroQr[hidden] { display: inline-flex !important; visibility: hidden; }
/* the hero's type: always written for w-boot and w-3d TOGETHER (phones get their own pair further down) */
html.w-boot .w-word, .w-3d .w-word { font-size: clamp(54px, 7vw, 124px); }    /* ~4.2 em wide: 7vw always fits the 32vw column */
html.w-boot .w-tag, .w-3d .w-tag { font-size: clamp(21px, 2.1vw, 32px); }
html.w-boot .w-hsub, .w-3d .w-hsub { font-size: clamp(15px, 1.15vw, 17.5px); }
html.w-boot .w-hnums .w-num, .w-3d .w-hnums .w-num { padding-right: clamp(12px, 1.3vw, 22px); margin-right: clamp(12px, 1.3vw, 22px); }
html.w-boot .w-hnums .w-num:last-child, .w-3d .w-hnums .w-num:last-child { padding-right: 0; margin-right: 0; }
html.w-boot .w-hnums .w-num > b, .w-3d .w-hnums .w-num > b { font-size: clamp(24px, 2.3vw, 38px); }
/* a narrow column: two big buttons that wrap fill their rows, so the stack reads as made, not broken */
@media (min-width: 720px) and (max-width: 1180px) and (pointer: fine) {
  html.w-boot .w-hero .w-btns .btn.big, .w-3d .w-hero .w-btns .btn.big { flex: 1 1 auto; padding: 0 18px; }
}

/* 01 the floor: Ask the hive on top, then the tape. Docked, the sticker must fit under the header without scrolling
   inside: the ask box keeps one title line, the tape rows sit tighter, and a shorter screen keeps fewer of the newest
   rows (a verdict may still make it scroll: ui/ask.js then brings the verdict into view) */
.w-3d .w-floor .w-ask .ask-sub { display: none; }
.w-3d .w-floor .w-tape { padding: 12px 14px 16px; }
.w-3d .w-floor .w-tape-list li { padding: 5px 0; }
@media (min-width: 720px) and (max-height: 940px) and (pointer: fine) { .w-3d .w-floor .w-tape-list li:nth-child(n+6) { display: none; } }
@media (min-width: 720px) and (max-height: 860px) and (pointer: fine) { .w-3d .w-floor .w-tape-list li:nth-child(n+5) { display: none; } }
@media (min-width: 720px) and (max-height: 780px) and (pointer: fine) { .w-3d .w-floor .w-tape-list li:nth-child(n+4) { display: none; } }
/* short screens (a 768 px laptop): a tighter rhythm in every docked sticker, so they fit under the header */
@media (min-width: 720px) and (max-height: 780px) and (pointer: fine) {
  .w-3d .w-panel { max-height: calc(100vh - var(--ptop) - 72px); padding-top: 20px; }
  .w-3d .w-tab { margin: -20px 0 12px -22px; }
  .w-3d .w-line { margin-top: 8px; }
  .w-3d .w-nums:not(.w-hnums) { margin-top: 14px; }
  .w-3d .w-panel > .w-body { margin-top: 14px; }
  .w-3d .w-more { margin-top: 12px; padding-top: 10px; }
  .w-3d .w-floor .w-ask { margin-bottom: 10px; }
  .w-3d .w-floor .w-tape { padding: 10px 14px 14px; }
}

/* 02 the desk: wider for the chat; signed in, the robot's name is the headline */
.w-3d .w-desk .w-panel { width: var(--pw-wide); }
.w-3d .w-desk .w-lede, .w-3d .w-wall .w-lede { display: block; margin-bottom: 0; }
.w-3d .w-wall .w-line { margin-top: 10px; }
.w-3d .w-wall .w-small { margin-top: 6px; }
.w-3d .w-desk .w-out { grid-template-columns: minmax(0, 1fr); }
.w-3d .w-desk .w-hatch { grid-template-columns: auto minmax(0, 1fr); }
.w-3d .w-desk .w-cell { width: 104px; height: 117px; }
.w-3d .w-desk .w-cell-art { width: 66px; height: 66px; }
.w-3d .w-desk .w-hatch .btn { min-height: 40px; padding: 0 12px; font-size: 14.5px; }
.w-3d.w-has-robot .w-desk .w-line { display: none; }
.w-3d.w-has-robot .w-desk .w-h { font-size: 24px; }
.w-3d.w-has-robot .w-desk .w-panel > .w-body { margin-top: 12px; }
.w-3d .w-desk .rb-head { grid-template-columns: auto minmax(0, 1fr); }
.w-3d .w-desk .rb-actions { grid-column: 1 / -1; justify-content: flex-start; }
.w-3d .w-desk .rb-name { font-size: 26px; }
.w-3d .w-desk .rb-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.w-3d .w-desk .rb-stats > div { padding: 7px 8px; }
.w-3d .w-desk .rb-stats b { font-size: 19px; }
.w-3d .w-desk .rb-stats span { font-size: 9.5px; }
.w-3d .w-desk .rb-stats small { font-size: 11px; }
.w-3d .w-desk .rb-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.w-3d .w-desk .chat-log { height: clamp(170px, 30vh, 330px); }
.w-3d .w-desk .w-more-side { margin-top: 0; padding-top: 0; }

/* 03 the brain: the top 3 each side; the rest under More */
.w-3d .w-iq > b { font-size: 64px; }
.w-3d .w-hline { font-size: 18px; }
.w-3d .w-lists { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.w-3d .w-brain .w-panel:not(.w-expanded) .w-list li:nth-child(n+4) { display: none; }
.w-3d .w-pick { margin-top: 12px; }
/* docked, the brain says one thing at a time (VISION §3.5 / §6): the headline, the IQ, the top 3 each side with their
   averages, the call's coin. Each row's small print and buttons (but the first row's), the call's lines (its paper
   average only ever shows with its "Not a promise."), today's tally and the receipts open under "All of it". */
.w-3d .w-brain .w-panel:not(.w-expanded) .hb-list .meta,
.w-3d .w-brain .w-panel:not(.w-expanded) .hb-list .small,
.w-3d .w-brain .w-panel:not(.w-expanded) .w-list li:not(:first-child) .hb-acts,
.w-3d .w-brain .w-panel:not(.w-expanded) .pick-now .meta,
.w-3d .w-brain .w-panel:not(.w-expanded) #mCalls .calls-today,
.w-3d .w-brain .w-panel:not(.w-expanded) #mCalls .calls-rc-head,
.w-3d .w-brain .w-panel:not(.w-expanded) #mCalls .calls-list,
.w-3d .w-brain .w-panel:not(.w-expanded) #mCalls .calls-more { display: none; }

/* 04 the wall: the compact row; the top 10 + you, the rest under More */
.w-3d .w-wall .lb-head { display: none; }
.w-3d .w-wall .lb-row { grid-template-columns: 28px minmax(0, 1fr) auto 58px; gap: 3px 8px; padding: 8px 10px; }
.w-3d .w-wall .lb-tr, .w-3d .w-wall .lb-q { display: none; }
.w-3d .w-wall .lb-bot .tr-inline { display: inline; }
.w-3d .w-wall .lb-bot .nm { flex-wrap: wrap; row-gap: 3px; }      /* tags drop under a long name instead of eating it */
.w-3d .w-wall .lb-open { flex: 0 1 auto; max-width: 100%; }
.w-3d .w-wall .lb-top { padding: 9px 12px; font-size: 12.5px; }
.w-3d .w-wall .w-panel:not(.w-expanded) .lb > li:nth-child(n+12):not(.me) { display: none; }

/* 05 the stage */
.w-3d .w-bull { font-size: 16px; margin-top: 8px; }
.w-3d .w-firedrule { margin-top: 8px; }
.w-3d .w-flip { font-size: 40px; }
.w-3d .w-stagegrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.w-3d .w-stagegrid .st-card dl { padding: 9px 12px 11px; gap: 6px 10px; }
.w-3d .w-real .real-list { max-height: 210px; }

/* 06 the vault */
.w-3d .w-risk p:not(.w-risk-h) { font-size: 15px; }

/* 07 the loop: centred, the four steps in a row */
.w-3d .w-loop .w-panel { width: min(1000px, calc(100vw - 2 * var(--railw) - 48px)); max-width: none; margin-left: auto; margin-right: auto; }
.w-3d .w-final-h { font-size: clamp(48px, 6vw, 92px); }
.w-3d .w-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; margin-top: 30px; }
.w-3d .w-step { padding: 30px 14px 14px; }
.w-3d .w-step h3 { font-size: 18px; }
.w-3d .w-step p { font-size: 14px; }

/* the live feed: a drawer from the right */
.w-3d .w-drawer {
  position: fixed; top: var(--hdr); right: 0; bottom: 0; z-index: 50; width: min(460px, 100vw); max-width: none; margin: 0; padding: 0;
  transform: translateX(104%); visibility: hidden; transition: transform .34s cubic-bezier(.2, .9, .3, 1), visibility 0s linear .34s;
}
.w-3d .w-drawer.open { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.2, .9, .3, 1); }
.w-3d .w-drawer-in { height: 100%; padding: 20px 18px 16px; border-radius: 0; border-width: 0 0 0 var(--bw); box-shadow: -6px 0 0 var(--ink); }
.w-3d .w-dclose { display: block; top: -4px; right: 0; }
.w-3d .w-feed-h { font-size: 26px; margin-bottom: 14px; padding-right: 44px; }
.w-3d .w-drawer .w-tab { margin: 0 0 12px; border-radius: 10px; }
.w-3d .w-feedcard { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.w-3d .w-feedcard .feed-list { flex: 1; height: auto; min-height: 0; }
.w-3d .w-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(34, 32, 28, .2); animation: fade .2s ease-out both; }

.w-3d .w-foot { margin-top: 0; }

/* the rail is a world thing: desktop ≥ 900 px. It is up from the first paint when the world is coming (w-boot), so
   nothing pops in beside the hero when the canvas fades in; its links scroll the flat page meanwhile. */
@media (min-width: 900px) { .w-3d .w-rail { display: flex; } }
@media (min-width: 900px) and (pointer: fine) { html.w-boot .w-rail { display: flex; } }
@media (min-width: 720px) and (pointer: fine) {
  html.w-3d { scroll-snap-type: y proximity; }       /* soft parking on each plateau; delete this one line if it fights trackpads */
  .w-3d .w-snap { scroll-snap-align: start; }
}
@media (min-width: 720px) and (max-width: 1180px) {
  :root { --pw: 370px; --pw-wide: 430px; --railw: 70px; }
  .w-3d .w-loop .w-steps { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}
@media (min-width: 720px) and (max-width: 899px) {
  :root { --railw: 0px; }
}

/* ===== the world on phones: the canvas is a window on top, sticker cards flow under it ===== */
@media (max-width: 719px), (pointer: coarse) {
  html.w-3d { scroll-padding-top: calc(var(--hdr) + var(--cvh) + 6px); scroll-snap-type: none; }
  .w-3d .w-canvas { top: var(--hdr); bottom: auto; height: var(--cvh); z-index: 5; border-bottom: var(--bw) solid var(--ink); background: var(--paper); }
  .w-3d .w-grain { top: var(--hdr); bottom: auto; height: var(--cvh); z-index: 6; }
  .w-3d .w-fade { top: var(--hdr); bottom: auto; height: var(--cvh); z-index: 6; }
  .w-3d .w-leaders { display: none; }
  .w-3d .w-tags { display: block; position: fixed; left: 0; right: 0; top: var(--hdr); height: var(--cvh); z-index: 7; pointer-events: none; overflow: hidden; }
  .w-3d:not([data-wstop="table"]) .w-tags { display: none; }
  .w-tags span {
    position: absolute; left: 0; top: 0; padding: 4px 8px; font: 700 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--paper); background: var(--ink); border-radius: 6px;
    transform: translate(-200px, -200px); white-space: nowrap;
  }
  .w-tags span::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: var(--ink); transform: rotate(45deg); }
  .w-3d .w-main { padding-top: var(--cvh); }
  .w-3d .w-stop {
    height: auto; min-height: calc((var(--in) + var(--dwell)) * .42svh); padding: calc(var(--in) * .22svh + 18px) 14px 26px; scroll-margin-top: 0; pointer-events: auto;
  }
  .w-3d .w-table { min-height: 0; padding-top: 22px; }
  .w-3d .w-pin, .w-3d .w-table .w-pin { position: relative; top: 0; height: auto; display: block; }
  .w-3d .w-panel, .w-3d .w-desk .w-panel, .w-3d .w-loop .w-panel, .w-3d [data-dock="right"] .w-panel, .w-3d .w-table .w-panel {
    width: auto; max-width: none; margin: 0; max-height: none; overflow: visible; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .w-3d .w-stop.w-on .w-panel { animation: none; }
  .w-3d .w-panel { padding: 22px 16px 18px; box-shadow: 4px 4px 0 var(--ink); }
  .w-3d .w-tab { margin: -22px 0 14px -16px; }
  /* the hero's phone type, for w-boot and w-3d together: the flat page's phone sizes, so the world turning on never
     resizes it (the desktop sizes above would push the clock off a 320 px phone) */
  html.w-boot .w-word, .w-3d .w-word { font-size: clamp(58px, 18vw, 104px); }
  html.w-boot .w-tag, .w-3d .w-tag { font-size: clamp(22px, 6.4vw, 30px); }
  html.w-boot .w-hsub, .w-3d .w-hsub { font-size: clamp(15.5px, 1.3vw, 18px); }
  html.w-boot .w-hnums .w-num, .w-3d .w-hnums .w-num { padding-right: 10px; margin-right: 10px; }
  html.w-boot .w-hnums .w-num:last-child, .w-3d .w-hnums .w-num:last-child { padding-right: 0; margin-right: 0; }
  html.w-boot .w-hnums .w-num > b, .w-3d .w-hnums .w-num > b { font-size: clamp(20px, 6.2vw, 30px); }
  /* T9 on phones: the canvas window is kept free from the first paint (html.w-boot), so the hero card never drops when
     the world turns on: the world only fades into its window. Meanwhile the window is plain paper with its ink edge
     (under the canvas once it is on; gone while you type, like the canvas). */
  html.w-boot .w-main { padding-top: var(--cvh); }
  html.w-boot:not(.w-typing) .w-main::before {
    content: ''; position: fixed; left: 0; right: 0; top: var(--hdr); height: var(--cvh); z-index: 4; pointer-events: none;
    background: var(--paper); border-bottom: var(--bw) solid var(--ink);
  }
  html.w-boot .w-table { display: block; max-width: none; min-height: 0; margin: 0; padding: 22px 14px 26px; }
  html.w-boot .w-seven { display: none; }
  .w-3d .w-steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .w-3d .w-rail { display: none !important; }
  .w-3d .w-dots { display: flex; }
  .w-3d .w-radio { left: 10px; right: auto; bottom: auto; top: calc(var(--hdr) + var(--cvh) - 46px); z-index: 8; min-height: 34px; max-width: calc(100vw - 20px); box-shadow: 2px 2px 0 var(--ink); }
  .w-3d .w-radio-t { font-size: 12.5px; }
  .w-3d .w-sticker { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .w-3d .w-drawer { width: 100vw; }
  .w-3d .w-foot { padding-bottom: 64px; }
  /* typing to your robot: the canvas steps aside (the chat gets the screen; core.js pauses the GPU) */
  .w-3d.w-typing .w-canvas, .w-3d.w-typing .w-grain, .w-3d.w-typing .w-radio, .w-3d.w-typing .w-dots, .w-3d.w-typing .w-tags { visibility: hidden; opacity: 0; }
  .w-3d .w-desk .rb-stats { grid-template-columns: 1fr 1fr; }
}

/* ================= reduced motion: stamps, not rides ================= */
@media (prefers-reduced-motion: reduce) {
  .w-3d .w-stop.w-on .w-panel, .w-3d .w-stop.w-on[data-dock="right"] .w-panel { animation: wFadeIn .2s ease-out both; }
  .w-3d .w-table.w-on .w-panel { animation: none; }
  .w-3d .w-panel, .w-3d [data-dock="right"] .w-panel { transform: none; }
  .w-drip-b, .w-pipe-flow, .w-radio-dot, .w-stop::before, .w-drawer::before { animation: none !important; }
  .w-ods { transition: none; }
  .w-sticker { animation: none; }
}

/* ================= keyframes ================= */
@keyframes wSlap { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wSlapR { from { opacity: 0; transform: translateY(14px) rotate(1.5deg) scale(.98); } }
@keyframes wFadeIn { from { opacity: 0; } }
@keyframes wFold { from { opacity: 0; transform: translateY(-6px); } }
@keyframes wFlow { to { background-position: 0 34px; } }
@keyframes wPipeFlow { to { stroke-dashoffset: -34; } }
@keyframes wDripIdle { 0%, 100% { transform: scale(1, 1); } 55% { transform: scale(.94, 1.1); } }
@keyframes wLamp { 0%, 100% { background: var(--paper-3); transform: scale(1); } 50% { background: var(--honey); transform: scale(1.35); } }
@keyframes wLampDot { 50% { transform: scale(1.7); background-image: var(--hexbg-honey); } }
@keyframes wRadioIn { from { opacity: 0; transform: translateY(9px); } }
@keyframes wTapeIn { from { opacity: .35; transform: translateY(-6px); background-color: var(--honey-soft); } 60% { background-color: var(--honey-soft); } }
@keyframes wFlipDigit { 0% { transform: rotateX(0); } 45% { transform: rotateX(-80deg); } 100% { transform: rotateX(0); } }

/* Lite button (header): a plain text pill, visible on phones too — the lite page is what slow phones need most */
.w-lite { flex: none; font: 800 12px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; padding: 7px 10px; }
.w-lite[aria-pressed="true"] { background: var(--honey); }