/* Binogo site. Tokens follow .interface-design/system.md with the brand accent
   replaced by the logo lime on ink. Generated rules (group colours, avatar
   colours, widths, board grid, delays) are appended by build.mjs. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo-var.woff2") format("woff2"); font-weight: 400 800; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #070906;
  --surface: #0F130D;
  --surface-2: #171C14;
  --surface-3: #20271B;
  --line: #262D21;
  --line-strong: #66725B;
  --text: #F1F5E8;
  --text-muted: #A2AD95;
  --brand: #D6F93D;
  --brand-ink: #070906;
  --brand-dim: rgb(214 249 61 / 0.14);
  --up: #3CE0A6;
  --down: #FF6B81;
  --sim: #FFB04A;
  --bnb: #F0B90B;
  --focus: #D6F93D;
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-hero: clamp(1.75rem, 1.6vw + 1.2rem, 2.75rem);
  --fs-display: clamp(1.75rem, 2vw + 1rem, 2.25rem);
  --fs-h1: 1.75rem; --fs-h2: 1.375rem; --fs-h3: 1.125rem; --fs-body: 1rem; --fs-small: .875rem; --fs-micro: .75rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-chip: 4px; --r-card: 8px; --r-panel: 12px;
  --gutter: 16px;
  --diamond: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.5 var(--sans); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--brand); text-decoration-color: var(--brand); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
button { font: inherit; color: inherit; }
code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: .9em; color: var(--brand); overflow-wrap: anywhere; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0 0 var(--sp-3); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }
.lime { color: var(--brand); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--brand); color: var(--brand-ink); padding: 8px 12px; border-radius: var(--r-chip); }
.skip:focus { left: 8px; }
.ic { width: 18px; height: 18px; flex: none; }
.diamond { clip-path: var(--diamond); }

/* ------------------------------------------------------------ header */
.top { position: sticky; top: 0; z-index: 20; background: rgb(7 9 6 / 0.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.top-in { max-width: 1240px; margin: 0 auto; padding: 8px var(--gutter); display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand right" "nav nav"; align-items: center; gap: 6px 12px; }
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.wordmark { font-weight: 800; font-stretch: 125%; font-size: 1.25rem; letter-spacing: -.01em; }
.nav { grid-area: nav; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.nav::-webkit-scrollbar { display: none; }
.nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; width: max-content; }
.nav a { font-family: var(--mono); font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: var(--r-chip); color: var(--text-muted); white-space: nowrap; }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--brand-ink); background: var(--brand); }
.top-right { grid-area: right; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: blink 2s ease-in-out infinite; }
.sync-dot.idle { background: var(--line-strong); animation: none; }
.sync-text { display: none; }
@media (min-width: 600px) { .sync-text { display: inline; } }
@media (min-width: 1024px) {
  .top-in { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav right"; }
  .nav { margin: 0; padding: 0; overflow: visible; }
  .nav ul { margin: 0 auto; }
}

/* ------------------------------------------------------------ simulation badge */
.sim-badge { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px dashed var(--sim); color: var(--sim); border-radius: 999px; font: 500 var(--fs-micro)/1.4 var(--mono); white-space: nowrap; cursor: help; vertical-align: middle; }
.sim-badge .ic { width: 12px; height: 12px; }
.sim-badge.sm { padding: 1px 6px; }
.sim-pop { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(280px, 80vw); padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); color: var(--text); font: 400 var(--fs-small)/1.45 var(--sans); white-space: normal; text-align: left; }
.sim-badge:hover .sim-pop, .sim-badge:focus .sim-pop, .sim-badge.open .sim-pop { display: block; }

/* ------------------------------------------------------------ ticker */
.ticker { border-bottom: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.tick-track { display: flex; width: max-content; animation: tick 80s linear infinite; }
.ticker:hover .tick-track, .ticker:focus-within .tick-track { animation-play-state: paused; }
.tick-list { display: flex; list-style: none; margin: 0; padding: 0; }
.tick-list li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font: 500 var(--fs-micro)/1.3 var(--mono); border-right: 1px solid var(--line); white-space: nowrap; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ layout */
main { max-width: 1240px; margin: 0 auto; padding: var(--sp-4) var(--gutter) var(--sp-7); display: grid; gap: var(--sp-4); }
main > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--sp-4); min-width: 0; }
@media (min-width: 768px) { .panel { padding: var(--sp-5); } }
.panel-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.h-hero { font-size: var(--fs-hero); font-weight: 800; font-stretch: 125%; line-height: .98; letter-spacing: -.02em; }
.h-display { font-size: var(--fs-display); font-weight: 800; font-stretch: 112%; overflow-wrap: anywhere; }
.h2 { font-size: var(--fs-h2); font-weight: 700; font-stretch: 112%; }
.h3 { font-size: var(--fs-h3); font-weight: 700; }
.mini-h { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: var(--sp-4) 0 var(--sp-2); font-family: var(--mono); }
.grid-2 { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.src { font-size: var(--fs-micro); color: var(--text-muted); margin: var(--sp-3) 0 0; font-family: var(--mono); }
.src code { color: var(--text-muted); text-decoration: underline dotted; }
.empty { color: var(--text-muted); font-style: italic; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-chip); border: 1px solid var(--line-strong); font: 500 var(--fs-micro)/1.4 var(--mono); white-space: nowrap; }
.chip.bnb { border-color: var(--bnb); color: var(--bnb); }
.chg { font-family: var(--mono); font-size: var(--fs-small); white-space: nowrap; }
.chg.up { color: var(--up); } .chg.down { color: var(--down); } .chg.flat { color: var(--text-muted); }
.yes { color: var(--brand); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-card); border: 1px solid var(--line-strong); background: var(--surface-2); text-decoration: none; font-weight: 600; cursor: pointer; }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.primary:hover { color: var(--brand-ink); filter: brightness(1.08); }
.btn-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-chip); background: var(--surface-2); color: var(--text); cursor: pointer; font: 500 var(--fs-micro)/1 var(--mono); }
.btn-copy:hover { border-color: var(--brand); color: var(--brand); }
.btn-copy.done { border-color: var(--up); color: var(--up); }
.btn-copy .ic { width: 14px; height: 14px; }
.more { font-family: var(--mono); font-size: var(--fs-small); color: var(--brand); }

/* ------------------------------------------------------------ opening */
.opening { position: relative; margin: 0; aspect-ratio: 16 / 9; max-height: 70vh; border-radius: var(--r-panel); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.opening .op-svg, .opening .op-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.opening .op-art { animation: op-art .5s ease-out both; }
.opening.has-art .op-svg { display: none; }
.op-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 18%; background: linear-gradient(90deg, transparent, rgb(214 249 61 / 0.09), transparent); animation: op-scan 8s linear 1.2s infinite; pointer-events: none; }
.op-bg { fill: var(--surface); }
.op-grid path { stroke: var(--line); stroke-width: 1; }
.op-sq { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 1; }
.op-sq.dim { fill: var(--surface-2); }
.op-lime { fill: var(--brand); }
.op-lime-dim { fill: #8FA829; }
.op-lime-o { fill: none; stroke: var(--brand); stroke-width: 2; }
.op-lime-o.thick { stroke-width: 4; }
.op-ink { fill: var(--bg); }
.op-ink-fill { fill: var(--surface-2); }
.op-node { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 2; }
.op-node.dash { stroke-dasharray: 10 8; fill: none; }
.op-node-fill { fill: var(--surface-3); }
.op-glow { fill: var(--brand); }
.op-die-body { fill: var(--surface-3); stroke: var(--brand); stroke-width: 2; }
.op-die circle { fill: var(--brand); }
.op-face { fill: none; stroke: var(--brand); stroke-width: 3; }
.op-line { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.op-line.thick { stroke: var(--brand); stroke-width: 5; }
.op-line.dash { stroke-dasharray: 8 10; }
.op-text { fill: var(--text); font: 600 28px var(--mono); }
.op-text.lime { fill: var(--brand); }
.op-bubble-bg { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 2; }
.op-bar { fill: var(--surface-3); }
.op-bar-on, .op-bar-alt { fill: var(--line-strong); }
.op-bar-on { fill: var(--brand); }
.op-block { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 2; }
.op-block.hi { stroke: var(--brand); }
.op-chip rect { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 2; }
.op-chip text { fill: var(--text); font: 600 20px var(--mono); }
.op-pawn { stroke: var(--bg); stroke-width: 3; }
.op-pawn.c-a { fill: #22D3EE; } .op-pawn.c-b { fill: #F472B6; } .op-pawn.c-c { fill: #A78BFA; }
.op-svg g, .op-svg rect, .op-svg path { transform-box: fill-box; transform-origin: center; }
.op-in { animation: op-in .6s cubic-bezier(.2,.7,.2,1) both; }
.op-sq { animation: op-in .32s ease-out both; }
.op-pop { animation: op-pop .5s cubic-bezier(.3,1.4,.5,1) .15s both; }
.op-drop { animation: op-drop .7s cubic-bezier(.3,1.3,.5,1) .3s both; }
.op-rise { animation: op-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.op-rise.l1 { animation-delay: .2s; } .op-rise.l2 { animation-delay: .5s; } .op-rise.l3 { animation-delay: .8s; }
.op-grow-x, .grow { transform-origin: 0 50%; animation: op-grow .7s cubic-bezier(.2,.7,.2,1) .2s both; }
.op-bubble { animation: op-pop .4s ease-out .9s both, op-pulse 4s ease-in-out 1.6s infinite; }
.late { animation-delay: .5s; } .later { animation-delay: .8s; }
.op-float { animation: op-in .6s ease-out .4s both, op-float 6s ease-in-out 1.2s infinite; }
.op-orbit { transform-box: view-box; transform-origin: 600px 200px; animation: op-in .6s ease-out .6s both, op-orbit 18s linear 1.2s infinite; }
.op-hop { animation: op-in .4s ease-out .9s both, op-hop 3.2s ease-in-out 1.2s infinite; }
.op-runner, .op-travel { transform-box: view-box; transform-origin: 0 0; }
.op-svg .op-runner { animation: op-run 10s linear 1.2s infinite; }
[data-opening="game"] .op-runner { animation-name: op-run-game; }
.op-svg .op-travel { animation: op-travel 5s ease-in-out 1.2s infinite; }
.op-svg .op-travel.short { animation-name: op-travel-short; }
@keyframes op-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes op-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes op-drop { from { opacity: 0; transform: translateY(-140px); } }
@keyframes op-rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes op-grow { from { transform: scaleX(0); } }
@keyframes op-art { from { opacity: 0; transform: scale(1.04); } }
@keyframes op-breathe { 50% { transform: scale(1.015); } }
@keyframes op-float { 50% { transform: translateY(-8px); } }
@keyframes op-orbit { to { transform: rotate(360deg); } }
@keyframes op-pulse { 50% { opacity: .7; } }
@keyframes op-hop { 0%, 60%, 100% { transform: translate(0, 0); } 20% { transform: translate(18px, -14px); } 40% { transform: translate(36px, 0); } 80% { transform: translate(18px, -10px); } }
@keyframes op-run { 0%, 100% { transform: translate(764px, 364px); } 25% { transform: translate(436px, 364px); } 50% { transform: translate(436px, 36px); } 75% { transform: translate(764px, 36px); } }
@keyframes op-run-game { 0%, 100% { transform: translate(754px, 354px); } 25% { transform: translate(446px, 354px); } 50% { transform: translate(446px, 46px); } 75% { transform: translate(754px, 46px); } }
@keyframes op-travel { 0% { transform: translate(160px, 200px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(1040px, 200px); opacity: 0; } }
@keyframes op-travel-short { 0% { transform: translate(520px, 200px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(800px, 200px); opacity: 0; } }
@keyframes op-scan { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
@keyframes blink { 50% { opacity: .35; } }

/* ------------------------------------------------------------ home */
.hero { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .opening { aspect-ratio: 2.6 / 1; } }
@media (min-width: 1024px) { .opening { aspect-ratio: 2.3 / 1; } }
@media (min-width: 900px) { .home-hero { grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-5); } }
.hero p { color: var(--text-muted); max-width: 60ch; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
@media (min-width: 768px) { .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.counter { background: var(--surface); padding: var(--sp-3) var(--sp-4); display: grid; gap: 2px; }
.counter strong { font: 600 clamp(1.25rem, 2.4vw, 1.75rem)/1.1 var(--mono); color: var(--brand); }
.counter span { font-size: var(--fs-micro); color: var(--text-muted); font-family: var(--mono); }
.section-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 768px) { .cards { gap: 16px; } }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-4); display: grid; gap: var(--sp-3); transition: border-color .15s; }
.card:hover, .card:focus-within { border-color: var(--brand); }
.card.flagship { box-shadow: inset 3px 0 0 var(--brand); }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.card .sim-badge { position: relative; z-index: 2; justify-self: start; }
.card-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.card-logo { width: 40px; height: 40px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; display: grid; place-items: center; overflow: hidden; clip-path: none; }
.card-logo img { width: 70%; height: 70%; object-fit: contain; }
.card-title { display: grid; min-width: 0; }
.card-title strong { font-size: var(--fs-h3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-price { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.card-grid div, .kv div, .stats div { min-width: 0; }
.card-grid dt, .kv dt, .stats dt, .gh-stats dt, .hud-stats dt { font-size: var(--fs-micro); color: var(--text-muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.card-grid dd, .kv dd, .stats dd, .gh-stats dd, .hud-stats dd { margin: 0; overflow-wrap: anywhere; }
.card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-micro); }
.pawn-stack { display: flex; }
.pawn-stack .av { margin-right: -6px; }
.mono-glyph { font: 700 .75rem/1 var(--mono); color: var(--text); letter-spacing: -.02em; }
.strip { display: grid; gap: var(--sp-3); }
.agents-strip { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.agents-strip li { flex: none; }
.agents-strip a { display: grid; justify-items: center; gap: 6px; width: 96px; padding: 10px 4px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface-2); text-decoration: none; font: 500 var(--fs-micro)/1.2 var(--mono); text-align: center; overflow-wrap: anywhere; }
.agents-strip a:hover { border-color: var(--brand); }
.mini-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
@media (min-width: 768px) { .mini-loop { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini-loop li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px; display: grid; gap: 6px; font-size: var(--fs-small); }
.mini-loop li strong { font-family: var(--mono); font-size: var(--fs-micro); color: var(--brand); }
.stock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }

/* ------------------------------------------------------------ game head */
.gh-id { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.gh-logo { width: 56px; height: 56px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; display: grid; place-items: center; overflow: hidden; clip-path: none; }
.gh-logo img { width: 70%; height: 70%; object-fit: contain; }
.gh-sub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 0; }
.gh-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: var(--sp-4) 0 0; }
@media (min-width: 768px) { .gh-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gh-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ board */
.board-scroll { overflow-x: auto; }
.board { --cell: 1fr; position: relative; display: grid; grid-template-columns: 1.6fr repeat(9, 1fr) 1.6fr; grid-template-rows: 1.6fr repeat(9, 1fr) 1.6fr; gap: 2px; width: 100%; max-width: 780px; aspect-ratio: 1; margin: 0 auto; min-width: 320px; }
.sq { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 0; padding: 2px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 3px; cursor: pointer; overflow: hidden; color: var(--text); }
.sq:hover { border-color: var(--line-strong); }
.sq:focus-visible { outline-offset: 0; z-index: 2; }
.sq.heat1 { background: #1B2117; } .sq.heat2 { background: #1F2716; } .sq.heat3 { background: #242E17; } .sq.heat4 { background: #2A3618; }
.sq.flag { border-color: var(--bnb); }
.sq.landed { animation: landed .5s ease-out; }
@keyframes landed { 0% { box-shadow: inset 0 0 0 40px rgb(214 249 61 / .35); } 100% { box-shadow: inset 0 0 0 40px rgb(214 249 61 / 0); } }
.gstripe { position: absolute; background: var(--gc); }
.side1 .gstripe { left: 0; right: 0; top: 0; height: 5px; }
.side2 .gstripe { top: 0; bottom: 0; right: 0; width: 5px; }
.side3 .gstripe { left: 0; right: 0; bottom: 0; height: 5px; }
.side4 .gstripe { top: 0; bottom: 0; left: 0; width: 5px; }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 4px; height: 4px; background: var(--line-strong); }
.pips i.on { background: var(--text); }
.sq .pips { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); }
.side2 .pips, .side4 .pips { top: 4px; }
.banner-flag { position: absolute; top: 2px; right: 2px; width: 0; height: 0; border-left: 8px solid transparent; border-top: 8px solid var(--brand); }
.sq .sq-ic { width: 16px; height: 16px; color: var(--brand); }
.sq .mono-glyph { display: none; }
.sq-sym { display: none; font: 600 .75rem/1 var(--mono); }
.sq-name { display: none; font-size: .75rem; line-height: 1.1; text-align: center; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corner .sq-ic { width: 22px; height: 22px; }
.pcount { position: absolute; right: 1px; bottom: 1px; font-size: .625rem; line-height: 1; padding: 1px 2px; color: var(--text-muted); background: rgb(7 9 6 / .7); border-radius: 2px; }
.pawn-slot { position: absolute; left: 2px; bottom: 2px; display: flex; align-items: flex-end; }
.pawn { position: relative; display: block; width: 12px; height: 12px; margin-right: -3px; }
.pawn .av { width: 100%; height: 100%; }
.pawn.me::before { content: ""; position: absolute; inset: -3px; background: var(--brand); clip-path: var(--diamond); }
.pawn.pending::after { content: ""; position: absolute; left: 50%; top: -7px; width: 5px; height: 5px; margin-left: -2px; background: var(--brand); transform: rotate(45deg); animation: blink .8s steps(2) infinite; }
.pawn-tip { display: none; }
.pawn-more { font-size: .625rem; color: var(--text-muted); margin-left: 4px; }
.pawn.hopping { z-index: 5; }
.hud { grid-row: 2 / 11; grid-column: 2 / 11; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; border: 1px solid var(--line); border-radius: 6px; background: radial-gradient(circle at 50% 40%, rgb(214 249 61 / .07), transparent 60%), var(--surface); min-width: 0; }
.hud-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; }
.hud-top .sim-badge { display: none; }
.hud-label { font: 500 var(--fs-micro) var(--mono); color: var(--text-muted); text-transform: uppercase; }
.hud-pot { font-size: clamp(1rem, 4vw, 2rem); color: var(--brand); }
.dice-tray { display: flex; gap: 10px; }
.die { width: 28px; height: 28px; color: var(--text); }
.dice-tray .die { width: clamp(24px, 6vw, 44px); height: clamp(24px, 6vw, 44px); }
.dice-tray.rolling .die { animation: tumble .6s ease-out; }
.dice-tray.air .die { animation: wobble .4s steps(2) infinite; color: var(--brand); }
@keyframes tumble { 0% { transform: rotate(-200deg) scale(.6); opacity: .3; } 100% { transform: none; opacity: 1; } }
@keyframes wobble { 50% { opacity: .45; } }
.hud-roll { font-size: var(--fs-micro); color: var(--text-muted); margin: 0; max-width: 34ch; min-height: 2.6em; }
.hud-stats { display: none; margin: 0; gap: 14px; }
.hud-stats div { display: grid; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-micro); color: var(--text-muted); margin: var(--sp-3) 0 0; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.pawn-key { width: 10px; height: 10px; background: var(--text-muted); clip-path: var(--diamond); }
.pawn-key.me { background: var(--brand); }
.pawn-key.pending { background: var(--sim); }
.pcount-key { font-size: .625rem; background: var(--surface-3); padding: 0 3px; border-radius: 2px; }
.bubble { position: absolute; z-index: 6; transform: translate(-50%, -100%); padding: 2px 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; font: 500 var(--fs-micro)/1.4 var(--mono); white-space: nowrap; pointer-events: none; animation: bubble 4s ease-in-out both; }
@keyframes bubble { 0% { opacity: 0; } 4%, 92% { opacity: 1; } 100% { opacity: 0; } }
.air-dice { position: absolute; z-index: 6; transform: translate(-50%, -100%); display: flex; gap: 2px; align-items: center; padding: 2px 4px; background: var(--surface); border: 1px solid var(--brand); border-radius: 4px; font: 500 .625rem/1 var(--mono); color: var(--brand); pointer-events: none; }
.air-dice .die { width: 12px; height: 12px; color: var(--brand); animation: wobble .4s steps(2) infinite; }
@media (min-width: 600px) {
  .sq-sym { display: block; }
  .sq.special .sq-sym { display: none; }
  .pawn { width: 16px; height: 16px; }
  .pcount { font-size: .6875rem; }
}
@media (min-width: 1024px) {
  .sq-name { display: block; }
  .hud-stats { display: flex; }
  .hud-top .sim-badge { display: inline-flex; }
  .hud-roll { font-size: var(--fs-small); }
}
.track-wrap { margin-top: var(--sp-3); }
.track-wrap summary, .prompt summary { cursor: pointer; font: 500 var(--fs-small) var(--mono); color: var(--brand); min-height: 32px; display: flex; align-items: center; gap: 10px; }
.track { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 1px; }
.track li { display: grid; grid-template-columns: 24px 10px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }

.dot { display: inline-block; width: 10px; height: 10px; background: var(--gc, var(--brand)); clip-path: var(--diamond); flex: none; }
.dot.special { --gc: var(--brand); }

/* ------------------------------------------------------------ dialog */
dialog.sheet { padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-panel); background: var(--surface); color: var(--text); width: min(520px, calc(100vw - 32px)); max-height: 85vh; }
dialog.sheet::backdrop { background: rgb(0 0 0 / .65); }
.sheet-in { padding: var(--sp-4); overflow: auto; max-height: 85vh; }
.sheet-close { float: right; min-width: 44px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface-2); cursor: pointer; font: 600 1.1rem var(--mono); }
@media (max-width: 599px) { dialog.sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--r-panel) var(--r-panel) 0 0; } }
.sqp-head { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding-top: 10px; margin-bottom: var(--sp-3); }
.sqp-head .gbar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gc, var(--brand)); border-radius: 2px; }
.sqp-head.special .gbar { background: var(--brand); }
.sqp-glyph { width: 48px; height: 48px; background: var(--surface-3); display: grid; place-items: center; color: var(--brand); }
.sqp-glyph .mono-glyph { display: block; }
.sqp-head > span:last-child { display: grid; }
.sqp-sym { font-size: var(--fs-h2); }
.sqp-name { font-size: var(--fs-small); }
.effect { font-size: var(--fs-body); }
.breakdown { font-size: var(--fs-small); background: var(--surface-2); padding: 8px 10px; border-radius: var(--r-card); overflow-wrap: anywhere; }
.holders { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.holders li { display: grid; grid-template-columns: 20px minmax(0, 1fr) 70px auto; gap: 8px; align-items: center; font-size: var(--fs-small); }
.holders li .handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.hbar span { display: block; height: 100%; width: var(--w); background: var(--gc, var(--brand)); }

/* ------------------------------------------------------------ kv, stats, tables */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.kv.tall { grid-template-columns: 1fr; }
.kv.tall div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: var(--sp-4) 0 0; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats dd { font-size: 1.125rem; }
.scroll-x { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-card); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.tbl th { text-align: left; font: 500 var(--fs-micro) var(--mono); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; background: var(--surface-2); }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .who { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.lb { min-width: 720px; }
.items-tbl { min-width: 620px; }
.items-tbl td:first-child { white-space: nowrap; }
.items-tbl td .ic { display: inline-block; vertical-align: -4px; color: var(--brand); }
.src-tbl { min-width: 560px; }

/* ------------------------------------------------------------ feed */
.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed-row { display: grid; grid-template-columns: 34px 20px minmax(0, 1fr) 14px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.feed.compact .feed-row { grid-template-columns: 34px minmax(0, 1fr); }
.feed.compact .feed-row:has(.av) { grid-template-columns: 34px 20px minmax(0, 1fr) 14px; }
.feed-row.fresh { animation: fresh 1.2s ease-out; }
@keyframes fresh { from { background: rgb(214 249 61 / .16); } to { background: transparent; } }
.feed-time { color: var(--text-muted); font-size: var(--fs-micro); }
.feed-main { min-width: 0; overflow-wrap: anywhere; }
.feed-dice { color: var(--brand); margin-right: 4px; }
.feed-text { color: var(--text); }
.feed-mark { width: 14px; height: 14px; color: var(--brand); }
.handle { font-family: var(--mono); font-weight: 500; }
.handle.big { font-size: var(--fs-h3); }
.emote { display: inline-block; font: 500 var(--fs-micro)/1.4 var(--mono); padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 999px; margin-right: 4px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: blink 1.6s ease-in-out infinite; }
.sync-inline { margin-left: auto; font-size: var(--fs-micro); color: var(--text-muted); }

/* ------------------------------------------------------------ avatars */
.av { position: relative; display: inline-grid; place-items: center; flex: none; background: var(--cc, var(--line-strong)); clip-path: var(--diamond); }
.av > svg, .av > img { width: 84%; height: 84%; padding: 18%; clip-path: var(--diamond); background: var(--surface-2); color: var(--cc, var(--text)); object-fit: contain; }
.av > img { padding: 10%; }
.av-pawn { width: 100%; height: 100%; }
.av-pawn > svg { padding: 14%; }
.av-xs { width: 20px; height: 20px; }
.av-sm { width: 24px; height: 24px; }
.av-lg { width: 56px; height: 56px; }
.av-xl { width: 96px; height: 96px; }
.motto { font-family: var(--mono); font-size: var(--fs-small); }
.hidden-motto { color: var(--text-muted); font-style: italic; }

/* ------------------------------------------------------------ pot, burns */
.pot-main, .burn { display: grid; gap: 2px; }
.pot-main { grid-template-columns: 1fr auto; align-items: end; margin-bottom: var(--sp-3); }
.pot-main .burn-label { grid-column: 1 / -1; }
.pot-num { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1; color: var(--brand); }
.burn-label { font: 500 var(--fs-micro) var(--mono); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.burns { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: var(--sp-3); }
@media (min-width: 480px) { .burns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.burn { background: var(--surface-2); border-radius: var(--r-card); padding: 10px 12px; }
.burn-num { font-size: 1.375rem; color: var(--text); }
.burn-unit { font-size: var(--fs-micro); color: var(--text-muted); }
.burn .src { margin: 2px 0 0; }
.bar-cap { font: 500 var(--fs-micro) var(--mono); color: var(--text-muted); margin: var(--sp-3) 0 4px; text-transform: uppercase; }
.split { display: flex; height: 30px; gap: 2px; border-radius: var(--r-chip); overflow: hidden; }
.seg { flex: 0 0 var(--w); display: flex; align-items: center; padding: 0 6px; min-width: 0; font: 500 .6875rem/1 var(--mono); white-space: nowrap; overflow: hidden; }
.seg > span { overflow: hidden; text-overflow: ellipsis; }
.seg-plat { background: var(--surface-3); color: var(--text); }
.seg-pot, .seg-a { background: var(--brand); color: var(--brand-ink); }
.seg-b { background: #9DBB2C; color: var(--brand-ink); }
.seg-c { background: var(--surface-3); color: var(--text); }
.progress { height: 10px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.progress span { display: block; height: 100%; width: var(--w); background: var(--brand); }

/* ------------------------------------------------------------ items */
.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.item { display: grid; gap: 4px; padding: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; }
.item-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.item-ic, .item-img { width: 22px; height: 22px; color: var(--brand); flex: none; }
.item.zero .item-ic, .item.zero .item-img { opacity: .4; }
.item-name { font-size: var(--fs-small); font-weight: 600; overflow-wrap: anywhere; }
.item-n { font-size: 1.125rem; }
.item-sub { font-size: var(--fs-micro); color: var(--text-muted); }
.max { font-size: var(--fs-micro); color: var(--brand); }
.btn-copy.small { justify-self: start; }
.me-head { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; margin-bottom: var(--sp-3); }
.me-head p { margin: 2px 0 0; font-size: var(--fs-small); }
.pending-line { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px dashed var(--brand); border-radius: var(--r-card); font-size: var(--fs-small); }
.air { display: flex; gap: 3px; }
.air .die { width: 16px; height: 16px; color: var(--brand); }
.die.spin { animation: wobble .4s steps(2) infinite; }
.die.spin.late { animation-delay: .2s; }

/* ------------------------------------------------------------ agent, property */
.agent-id { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.agent-motto { margin: 4px 0; font-size: var(--fs-h3); }
.agent-id p { margin: 2px 0; }
.addr summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 28px; }
.addr[open] summary { margin-bottom: 4px; }
.addr-full { display: block; font-size: var(--fs-micro); overflow-wrap: anywhere; color: var(--text); margin-bottom: 4px; }
.level-row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-2); }
.lv-ic { color: var(--brand); width: 24px; height: 24px; }
.group-lv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.group-lv li { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; background: var(--surface-2); border-radius: var(--r-card); font: 500 var(--fs-micro) var(--mono); }
.group-lv a.cur { color: var(--brand); }
.spark { width: 100%; max-width: 420px; height: auto; }
.spark-line { fill: none; stroke: var(--text-muted); stroke-width: 2; }
.spark-up { fill: var(--up); } .spark-down { fill: var(--down); }
.sq-pick { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sq-pick a { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-chip); font: 500 var(--fs-micro) var(--mono); text-decoration: none; }
.sq-pick a[aria-current="page"] { border-color: var(--brand); color: var(--brand); }
.agent-pick { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.agent-pick a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; font: 500 var(--fs-micro) var(--mono); text-decoration: none; }

/* ------------------------------------------------------------ agents page */
.loop { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.loop-step { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); animation: step-hi 9s linear infinite; }
.loop-step p { margin: 4px 0 0; font-size: var(--fs-small); color: var(--text-muted); }
.loop-n { width: 28px; height: 28px; display: grid; place-items: center; background: var(--surface-3); color: var(--brand); clip-path: var(--diamond); font-size: var(--fs-micro); }
.ls-0 { animation-delay: 0s; } .ls-1 { animation-delay: 1.5s; } .ls-2 { animation-delay: 3s; } .ls-3 { animation-delay: 4.5s; } .ls-4 { animation-delay: 6s; } .ls-5 { animation-delay: 7.5s; }
@keyframes step-hi { 0%, 16% { border-color: var(--brand); } 17%, 100% { border-color: var(--line); } }
.term { background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 12px; font-size: var(--fs-small); overflow-wrap: anywhere; }
.term p { margin: 0 0 6px; }
.prompts { display: grid; gap: 8px; margin-bottom: var(--sp-4); }
.prompt { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.prompt summary { padding: 6px 10px; justify-content: space-between; color: var(--text); list-style: none; }
.prompt summary::-webkit-details-marker { display: none; }
.prompt summary > span::before { content: "+ "; color: var(--brand); font-family: var(--mono); }
.prompt[open] summary > span::before { content: "− "; }
.prompt pre { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8125rem; line-height: 1.5; max-height: 340px; overflow: auto; }
.skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.skills li { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 10px; align-items: baseline; font-size: var(--fs-small); }
.skills .chip { justify-self: start; white-space: normal; }
.sync-steps { margin: 0; padding-left: 1.25rem; display: grid; gap: 10px; }
.sync-steps li { padding-left: 4px; }
.sync-steps strong { display: block; }
.sync-steps span { color: var(--text-muted); font-size: var(--fs-small); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.steps li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); }

/* ------------------------------------------------------------ launch */
.picker { border: 0; margin: 0 0 var(--sp-4); padding: 0; min-width: 0; }
.picker legend { margin-bottom: var(--sp-3); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; max-height: 360px; overflow: auto; padding: 2px; }
.pick { position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); cursor: pointer; min-width: 0; }
.pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pick:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pick.bnb .pick-mono { color: var(--bnb); }
.pick-mono { grid-row: 1 / 4; width: 30px; height: 30px; background: var(--surface-3); display: grid; place-items: center; font: 700 .5625rem/1 var(--mono); }
.pick-sym { font-size: var(--fs-small); font-weight: 600; }
.pick-name { font-size: var(--fs-micro); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-kind { font: 500 .6875rem var(--mono); color: var(--text-muted); }
.launch-preview { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-card); }
.lp-card { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.lp-card p { margin: 0; }

/* ------------------------------------------------------------ docs, permissions */
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.toc a { display: inline-flex; min-height: 32px; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-chip); font: 500 var(--fs-micro) var(--mono); text-decoration: none; }
.facts { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; }
.facts li::marker { color: var(--brand); }
.formula { font-size: var(--fs-small); background: var(--surface-2); padding: 8px 10px; border-radius: var(--r-card); overflow-wrap: anywhere; }
.groups, .specials { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: 6px; font-size: var(--fs-small); }
.groups li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.specials li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.specials li .ic { color: var(--brand); }
.specials .muted { grid-column: 2; }
.perm-grid { display: grid; gap: 10px; }
@media (min-width: 768px) { .perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .perm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.perm { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.perm.guardian { border-color: var(--brand); }
.perm p { font-size: var(--fs-small); margin: 8px 0 0; }
.lbl { display: inline-block; font: 600 .6875rem var(--mono); text-transform: uppercase; padding: 1px 6px; border-radius: var(--r-chip); margin-right: 6px; }
.lbl.yes { background: var(--brand); color: var(--brand-ink); }
.lbl.no { border: 1px solid var(--line-strong); color: var(--text); }

/* ------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--line); background: var(--surface); }
.foot-in { max-width: 1240px; margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-6); display: grid; gap: var(--sp-3); font-size: var(--fs-small); }
.foot-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.foot-row a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.foot .x-link .ic { width: 16px; height: 16px; }
.foot p { margin: 0; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .tick-track { animation: none !important; }
}
.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }
.tick-img { display: none; width: 60%; max-width: 30px; height: auto; border-radius: 6px; }
.sqp-glyph .tick-img, .pick-mono .tick-img { display: block; width: 100%; max-width: none; border-radius: 0; }
.em-ic { display: inline-block; width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; color: var(--text); }
.gb-ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; color: var(--brand); }
.feed-mark { display: inline-grid; color: var(--brand); }
.feed-mark .ic { width: 14px; height: 14px; }
.av > svg.av-art { padding: 8%; }
@media (min-width: 600px) { .sq.prop .tick-img { display: block; } .sq.prop .sq-sym { display: none; } }
@media (min-width: 1024px) { .sq.prop .sq-sym { display: block; font-size: .6875rem; } .sq.prop .sq-name { display: none; } }
.illus { width: 100%; max-width: 560px; height: auto; aspect-ratio: auto; margin: var(--sp-2) 0 var(--sp-3); border-radius: var(--r-card); border: 1px solid var(--line); }
.istats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.istats li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 60px; gap: 4px 10px; align-items: center; }
.istats .mono { grid-column: 2 / -1; color: var(--text-muted); }
.istats .hbar span { background: var(--brand); }
@media (min-width: 1024px) { .pawn { width: 22px; height: 22px; } }
.items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.item { padding: 8px 6px; justify-items: start; }
.item-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.item-name { font-size: var(--fs-micro); line-height: 1.2; }
.item-sub { display: none; }
.copy-long { display: none; }
@media (min-width: 768px) { .item { padding: 10px; } .item-name { font-size: var(--fs-small); } .item-sub { display: block; } .copy-long { display: inline; } .copy-short { display: none; } }
.specials li { grid-template-columns: 18px 1fr; }
.holders.builders li { grid-template-columns: 20px minmax(0, 1fr) auto; }
.agent-id h1 { font-size: clamp(1.25rem, 4.5vw, 2.25rem); }
.hide-mottos .motto, .hide-mottos .agent-motto { display: none; }

/* ------------------------------------------------------------ hero lead and display line */
.eyebrow { font: 500 var(--fs-small)/1.4 var(--mono); color: var(--brand); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--sp-2); max-width: 46ch; }
.home-hero .h-hero { font-size: clamp(2.25rem, 3.6vw + .6rem, 4.25rem); max-width: 19ch; line-height: .95; }
.hero .h-hero + p { margin-top: var(--sp-3); }
@media (min-width: 900px) { .home-hero { padding-top: var(--sp-2); } }

/* ------------------------------------------------------------ nav edge fade (narrow widths) */
@media (max-width: 1023px) {
  .nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .nav.at-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
  .nav.mid { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
  .nav.fits { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 479px) { .nav a { padding: 0 8px; letter-spacing: .02em; } }

/* ------------------------------------------------------------ board beside the live feed (wide) */
@media (min-width: 1200px) {
  .play { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-4); align-items: stretch; }
  .feed-panel { display: flex; flex-direction: column; }
  .feed-box { position: relative; flex: 1 1 auto; min-height: 320px; border-radius: var(--r-card); }
  .feed-box > .feed { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
}
.play { display: grid; gap: var(--sp-4); min-width: 0; }

/* ------------------------------------------------------------ board squares: names wrap, pawns clear the labels */
.sq-name { white-space: normal; display: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
@media (min-width: 1024px) {
  .sq.special .sq-name, .sq.corner .sq-name { display: -webkit-box; }
  .side2:not(.corner), .side4:not(.corner) { justify-content: flex-start; padding-top: 6px; }
  .side2:not(.corner) .tick-img, .side4:not(.corner) .tick-img { max-width: 24px; }
  .side2 .pips, .side4 .pips { top: 5px; left: 8px; transform: none; }
  .side4 .pips { left: 10px; }
  .side2:not(.corner) .pawn, .side4:not(.corner) .pawn { width: 16px; height: 16px; }
  .side2:not(.corner) .pawn.pending::after, .side4:not(.corner) .pawn.pending::after { top: -5px; width: 4px; height: 4px; }
  .side2 .pawn-slot { left: 3px; }
  .side4 .pawn-slot { left: 8px; }
}

/* ------------------------------------------------------------ opening art layers
   Entrances run in about 1.2 s, then a calm loop. Individual transform properties
   (translate, scale, rotate) compose with the transform attributes in the art. */
.op-art g[id] { transform-box: fill-box; transform-origin: center; }
@keyframes ly-rise { from { opacity: 0; translate: 0 90px; } }
@keyframes ly-fade-up { from { opacity: 0; translate: 0 36px; } }
@keyframes ly-fade { from { opacity: 0; } }
@keyframes ly-slide-l { from { opacity: 0; translate: -180px 0; } }
@keyframes ly-pop { 0% { opacity: 0; scale: .3; } 70% { opacity: 1; scale: 1.08; } 100% { scale: 1; } }
@keyframes ly-drop { 0% { opacity: 0; translate: 0 -320px; } 70% { opacity: 1; translate: 0 14px; } 100% { translate: 0 0; } }
@keyframes ly-tumble { 0% { opacity: 0; translate: 0 -260px; rotate: -220deg; scale: .6; } 75% { opacity: 1; rotate: 12deg; scale: 1.04; } 100% { rotate: 0deg; scale: 1; } }
@keyframes ly-grow-up { from { scale: 1 0; } }
@keyframes ly-grow-x { from { scale: 0 1; } }
@keyframes ly-flip { from { opacity: 0; scale: 0 1; } }
@keyframes ly-fan { from { opacity: 0; rotate: -14deg; translate: -60px 20px; } }
@keyframes ly-bob { 50% { translate: 0 -12px; } }
@keyframes ly-hop { 0%, 55%, 100% { translate: 0 0; } 25% { translate: 0 -34px; } 40% { translate: 0 2px; } }
@keyframes ly-shadow { 0%, 55%, 100% { scale: 1; opacity: 1; } 25% { scale: .7; opacity: .5; } }
@keyframes ly-wobble { 0%, 80%, 100% { rotate: 0deg; } 86% { rotate: 7deg; } 93% { rotate: -5deg; } }
@keyframes ly-glow { 50% { opacity: .55; } }
@keyframes ly-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ly-dash { to { stroke-dashoffset: -72; } }
@keyframes ly-rings { 0% { opacity: .25; scale: .92; } 50% { opacity: 1; } 100% { opacity: .25; scale: 1.06; } }
@keyframes ly-drift { 50% { translate: 26px 0; } }
@keyframes ly-flutter { 50% { rotate: -4deg; } }
.ly-x { transform-origin: 0 50%; }
.op-art #op-level-1, .op-art #op-level-2, .op-art #op-level-3, .op-art #op-building { transform-origin: 50% 100%; }
.op-art #op-score, .op-art #op-progress, .op-art #op-price, .op-art #op-items { transform-origin: 0 50%; }
.op-art #op-banner { transform-origin: 0 100%; }
/* home: the board rises, the flagship lights, dice drop, pawns hop on one by one */
[data-opening="home"] #op-board { animation: ly-rise .8s cubic-bezier(.2,.7,.2,1) both; }
[data-opening="home"] #op-flagship { animation: ly-fade .4s ease-out .55s both, ly-glow 3.2s ease-in-out 1.4s infinite; }
[data-opening="home"] #op-die-1 { animation: ly-tumble .8s cubic-bezier(.3,1.2,.5,1) .3s both, ly-wobble 6s ease-in-out 1.6s infinite; }
[data-opening="home"] #op-die-2 { animation: ly-tumble .8s cubic-bezier(.3,1.2,.5,1) .45s both, ly-wobble 6s ease-in-out 3.1s infinite; }
[data-opening="home"] #op-pawn-1 { animation: ly-pop .45s ease-out .6s both, ly-bob 3.6s ease-in-out 1.6s infinite; }
[data-opening="home"] #op-pawn-2 { animation: ly-pop .45s ease-out .7s both; }
[data-opening="home"] #op-pawn-3 { animation: ly-pop .45s ease-out .8s both; }
[data-opening="home"] #op-pawn-4 { animation: ly-pop .45s ease-out .9s both; }
[data-opening="home"] #op-pawn-5 { animation: ly-pop .45s ease-out 1s both; }
/* game: the row slides in, dice tumble, the pawn hops on its arc */
[data-opening="game"] #op-row { animation: ly-slide-l .7s cubic-bezier(.2,.7,.2,1) both; }
[data-opening="game"] #op-trail { animation: ly-fade .5s ease-out .5s both; }
[data-opening="game"] #op-landing { animation: ly-pop .4s ease-out .7s both, ly-glow 2.4s ease-in-out 1.4s infinite; }
[data-opening="game"] #op-hops { animation: ly-fade .4s ease-out .6s both, ly-blink 1.6s steps(2) 1.4s infinite; }
[data-opening="game"] #op-pawn { animation: ly-drop .7s cubic-bezier(.3,1.2,.5,1) .2s both, ly-hop 2.8s ease-in-out 1.4s infinite; }
[data-opening="game"] #op-shadow { animation: ly-fade .5s ease-out .5s both, ly-shadow 2.8s ease-in-out 1.4s infinite; }
[data-opening="game"] #op-die-1 { animation: ly-tumble .9s cubic-bezier(.3,1.2,.5,1) .1s both, ly-wobble 6s ease-in-out 1.6s infinite; }
[data-opening="game"] #op-die-2 { animation: ly-tumble .9s cubic-bezier(.3,1.2,.5,1) .25s both, ly-wobble 6s ease-in-out 3.2s infinite; }
/* agent profile */
[data-opening="agent"] #op-portrait { animation: ly-pop .6s ease-out both; }
[data-opening="agent"] #op-emote { animation: ly-pop .4s ease-out .7s both, ly-bob 3.2s ease-in-out 1.4s infinite; }
[data-opening="agent"] #op-items { animation: ly-grow-x .6s cubic-bezier(.2,.7,.2,1) .4s both; }
[data-opening="agent"] #op-stats { animation: ly-fade-up .5s ease-out .5s both; }
[data-opening="agent"] #op-score { animation: ly-grow-x .8s cubic-bezier(.2,.7,.2,1) .6s both; }
/* agents: prompt → wallet → check → pawn */
[data-opening="agents"] #op-prompt { animation: ly-slide-l .6s cubic-bezier(.2,.7,.2,1) both; }
[data-opening="agents"] #op-flow { animation: ly-fade .4s ease-out .4s both, ly-dash 1.4s linear 1s infinite; }
[data-opening="agents"] #op-phone { animation: ly-rise .6s cubic-bezier(.2,.7,.2,1) .2s both; }
[data-opening="agents"] #op-agent-id { animation: ly-pop .4s ease-out .7s both; }
[data-opening="agents"] #op-confirm { animation: ly-fade .4s ease-out .6s both, ly-glow 2.4s ease-in-out 1.4s infinite; }
[data-opening="agents"] #op-check { animation: ly-pop .4s ease-out .9s both; }
[data-opening="agents"] #op-pawn { animation: ly-pop .45s ease-out .8s both, ly-hop 3s ease-in-out 1.6s infinite; }
[data-opening="agents"] #op-bubble { animation: ly-pop .4s ease-out 1.05s both; }
/* docs: squares, share cards fan out, levels grow in turn */
[data-opening="docs"] #op-squares { animation: ly-rise .6s cubic-bezier(.2,.7,.2,1) both; }
[data-opening="docs"] #op-shares { animation: ly-fan .7s cubic-bezier(.2,.7,.2,1) .25s both; }
[data-opening="docs"] #op-level-1 { animation: ly-grow-up .45s cubic-bezier(.2,.7,.2,1) .55s both; }
[data-opening="docs"] #op-level-2 { animation: ly-grow-up .45s cubic-bezier(.2,.7,.2,1) .7s both; }
[data-opening="docs"] #op-level-3 { animation: ly-grow-up .45s cubic-bezier(.2,.7,.2,1) .85s both, ly-glow 4s ease-in-out 1.6s infinite; }
/* launch: a stock chart becomes a token card */
[data-opening="launch"] #op-ticker { animation: ly-slide-l .6s cubic-bezier(.2,.7,.2,1) both; }
[data-opening="launch"] #op-morph { animation: ly-fade .4s ease-out .4s both, ly-drift 5s ease-in-out 1.4s infinite; }
[data-opening="launch"] #op-card { animation: ly-flip .6s cubic-bezier(.2,.7,.2,1) .45s both; }
[data-opening="launch"] #op-progress { animation: ly-grow-x .7s cubic-bezier(.2,.7,.2,1) .8s both; }
/* permissions: one beacon, many vaults, the guardian shield */
[data-opening="permissions"] #op-beacon { animation: ly-rise .6s cubic-bezier(.2,.7,.2,1) both; }
[data-opening="permissions"] #op-vaults { animation: ly-rise .6s cubic-bezier(.2,.7,.2,1) .25s both; }
[data-opening="permissions"] #op-links { animation: ly-fade .4s ease-out .5s both, ly-dash 1.8s linear 1.2s infinite; }
[data-opening="permissions"] #op-rings { animation: ly-fade .4s ease-out .6s both, ly-rings 3.2s ease-in-out 1.4s infinite; }
[data-opening="permissions"] #op-shield { animation: ly-pop .6s ease-out .4s both, ly-glow 4s ease-in-out 1.6s infinite; }
/* property: tile, building grows, holders pop around it */
[data-opening="property"] #op-tile { animation: ly-rise .6s cubic-bezier(.2,.7,.2,1) both; }
[data-opening="property"] #op-building { animation: ly-grow-up .6s cubic-bezier(.2,.7,.2,1) .3s both; }
[data-opening="property"] #op-banner { animation: ly-pop .4s ease-out .75s both, ly-flutter 2.6s ease-in-out 1.4s infinite; }
[data-opening="property"] #op-holders { animation: ly-pop .5s ease-out .8s both; }
[data-opening="property"] #op-shares { animation: ly-fade .6s ease-out .55s both; }
[data-opening="property"] #op-price { animation: ly-grow-x .7s cubic-bezier(.2,.7,.2,1) .85s both; }

/* ------------------------------------------------------------ nav: all six links in one row below 600px */
@media (max-width: 599px) {
  .nav { overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none !important; mask-image: none !important; }
  .nav ul { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; gap: 0; width: auto; }
  .nav a { padding: 0 5px; font-size: .75rem; letter-spacing: 0; }
}

/* ------------------------------------------------------------ launch: what an agent launch needs */
.reqs { list-style: none; margin: var(--sp-4) 0 var(--sp-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--sp-2); }
@media (min-width: 900px) { .reqs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reqs li { display: grid; align-content: start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface-2); }
.reqs li:first-child { border-color: var(--brand); }
.req-k { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.req-v { font-size: clamp(.9375rem, .8rem + .5vw, 1.125rem); font-weight: 700; color: var(--text); line-height: 1.25; }
.reqs li:first-child .req-v { color: var(--brand); font-family: var(--mono); }
.req-s { font-size: var(--fs-micro); color: var(--text-muted); }
.reqs-note { margin: 0 0 var(--sp-3); max-width: 72ch; }

/* ------------------------------------------------------------ home: room between the hero and the first strip */
.home-hero + .strip { margin-top: var(--sp-5); }
@media (min-width: 900px) { .home-hero + .strip { margin-top: var(--sp-6); } }

/* generated from shared/board.json and shared/avatars.json */
.g1{--gc:#F472B6}
.g2{--gc:#60A5FA}
.g3{--gc:#FB923C}
.g4{--gc:#A78BFA}
.g5{--gc:#B7C0CC}
.g6{--gc:#22D3EE}
.g7{--gc:#F0B90B}
.c0{--cc:#F0B90B}
.c1{--cc:#EAECEF}
.c2{--cc:#22D3EE}
.c3{--cc:#A78BFA}
.c4{--cc:#FB923C}
.c5{--cc:#60A5FA}
.c6{--cc:#F472B6}
.c7{--cc:#B7C0CC}
.w0{--w:0%}
.w1{--w:1%}
.w2{--w:2%}
.w3{--w:3%}
.w4{--w:4%}
.w5{--w:5%}
.w6{--w:6%}
.w7{--w:7%}
.w8{--w:8%}
.w9{--w:9%}
.w10{--w:10%}
.w11{--w:11%}
.w12{--w:12%}
.w13{--w:13%}
.w14{--w:14%}
.w15{--w:15%}
.w16{--w:16%}
.w17{--w:17%}
.w18{--w:18%}
.w19{--w:19%}
.w20{--w:20%}
.w21{--w:21%}
.w22{--w:22%}
.w23{--w:23%}
.w24{--w:24%}
.w25{--w:25%}
.w26{--w:26%}
.w27{--w:27%}
.w28{--w:28%}
.w29{--w:29%}
.w30{--w:30%}
.w31{--w:31%}
.w32{--w:32%}
.w33{--w:33%}
.w34{--w:34%}
.w35{--w:35%}
.w36{--w:36%}
.w37{--w:37%}
.w38{--w:38%}
.w39{--w:39%}
.w40{--w:40%}
.w41{--w:41%}
.w42{--w:42%}
.w43{--w:43%}
.w44{--w:44%}
.w45{--w:45%}
.w46{--w:46%}
.w47{--w:47%}
.w48{--w:48%}
.w49{--w:49%}
.w50{--w:50%}
.w51{--w:51%}
.w52{--w:52%}
.w53{--w:53%}
.w54{--w:54%}
.w55{--w:55%}
.w56{--w:56%}
.w57{--w:57%}
.w58{--w:58%}
.w59{--w:59%}
.w60{--w:60%}
.w61{--w:61%}
.w62{--w:62%}
.w63{--w:63%}
.w64{--w:64%}
.w65{--w:65%}
.w66{--w:66%}
.w67{--w:67%}
.w68{--w:68%}
.w69{--w:69%}
.w70{--w:70%}
.w71{--w:71%}
.w72{--w:72%}
.w73{--w:73%}
.w74{--w:74%}
.w75{--w:75%}
.w76{--w:76%}
.w77{--w:77%}
.w78{--w:78%}
.w79{--w:79%}
.w80{--w:80%}
.w81{--w:81%}
.w82{--w:82%}
.w83{--w:83%}
.w84{--w:84%}
.w85{--w:85%}
.w86{--w:86%}
.w87{--w:87%}
.w88{--w:88%}
.w89{--w:89%}
.w90{--w:90%}
.w91{--w:91%}
.w92{--w:92%}
.w93{--w:93%}
.w94{--w:94%}
.w95{--w:95%}
.w96{--w:96%}
.w97{--w:97%}
.w98{--w:98%}
.w99{--w:99%}
.w100{--w:100%}
.sq-0{grid-row:11;grid-column:11}
.sq-1{grid-row:11;grid-column:10}
.sq-2{grid-row:11;grid-column:9}
.sq-3{grid-row:11;grid-column:8}
.sq-4{grid-row:11;grid-column:7}
.sq-5{grid-row:11;grid-column:6}
.sq-6{grid-row:11;grid-column:5}
.sq-7{grid-row:11;grid-column:4}
.sq-8{grid-row:11;grid-column:3}
.sq-9{grid-row:11;grid-column:2}
.sq-10{grid-row:11;grid-column:1}
.sq-11{grid-row:10;grid-column:1}
.sq-12{grid-row:9;grid-column:1}
.sq-13{grid-row:8;grid-column:1}
.sq-14{grid-row:7;grid-column:1}
.sq-15{grid-row:6;grid-column:1}
.sq-16{grid-row:5;grid-column:1}
.sq-17{grid-row:4;grid-column:1}
.sq-18{grid-row:3;grid-column:1}
.sq-19{grid-row:2;grid-column:1}
.sq-20{grid-row:1;grid-column:1}
.sq-21{grid-row:1;grid-column:2}
.sq-22{grid-row:1;grid-column:3}
.sq-23{grid-row:1;grid-column:4}
.sq-24{grid-row:1;grid-column:5}
.sq-25{grid-row:1;grid-column:6}
.sq-26{grid-row:1;grid-column:7}
.sq-27{grid-row:1;grid-column:8}
.sq-28{grid-row:1;grid-column:9}
.sq-29{grid-row:1;grid-column:10}
.sq-30{grid-row:1;grid-column:11}
.sq-31{grid-row:2;grid-column:11}
.sq-32{grid-row:3;grid-column:11}
.sq-33{grid-row:4;grid-column:11}
.sq-34{grid-row:5;grid-column:11}
.sq-35{grid-row:6;grid-column:11}
.sq-36{grid-row:7;grid-column:11}
.sq-37{grid-row:8;grid-column:11}
.sq-38{grid-row:9;grid-column:11}
.sq-39{grid-row:10;grid-column:11}
.dl-0{animation-delay:300ms}
.dl-1{animation-delay:312ms}
.dl-2{animation-delay:324ms}
.dl-3{animation-delay:336ms}
.dl-4{animation-delay:348ms}
.dl-5{animation-delay:360ms}
.dl-6{animation-delay:372ms}
.dl-7{animation-delay:384ms}
.dl-8{animation-delay:396ms}
.dl-9{animation-delay:408ms}
.dl-10{animation-delay:420ms}
.dl-11{animation-delay:432ms}
.dl-12{animation-delay:444ms}
.dl-13{animation-delay:456ms}
.dl-14{animation-delay:468ms}
.dl-15{animation-delay:480ms}
.dl-16{animation-delay:492ms}
.dl-17{animation-delay:504ms}
.dl-18{animation-delay:516ms}
.dl-19{animation-delay:528ms}
.dl-20{animation-delay:540ms}
.dl-21{animation-delay:552ms}
.dl-22{animation-delay:564ms}
.dl-23{animation-delay:576ms}
.dl-24{animation-delay:588ms}
.dl-25{animation-delay:600ms}
.dl-26{animation-delay:612ms}
.dl-27{animation-delay:624ms}
.dl-28{animation-delay:636ms}
.dl-29{animation-delay:648ms}
.dl-30{animation-delay:660ms}
.dl-31{animation-delay:672ms}
.dl-32{animation-delay:684ms}
.dl-33{animation-delay:696ms}
.dl-34{animation-delay:708ms}
.dl-35{animation-delay:720ms}
.dl-36{animation-delay:732ms}
.dl-37{animation-delay:744ms}
.dl-38{animation-delay:756ms}
.dl-39{animation-delay:768ms}