/* GMD style test B: Low-poly hub world. UI layer on a 2px grid, world layer on a 4px (desktop) / 3px (phone) grid.
   Type: every pixel face is rendered only at a whole multiple of its own design grid (see STYLE.md, Type scale). */
:root {
  --c0: #050E13; --c1: #0A1A22; --c2: #0F2833; --c3: #16394A; --c4: #1F5261; --c5: #2C727C; --c6: #3F9994; --c7: #6CC4B0;
  --c8: #B6EBD6; --c9: #F1F6EC; --c10: #FFC857; --c11: #E0892E; --c12: #9A4A2E; --c13: #FF9886; --c14: #9EE37D;
  --fr-teal: none; --fr-amber: none; --fr-chip: none; --fr-well: none; --fr-btn: none;
  --dz-empty: repeating-conic-gradient(var(--c2) 0 25%, var(--c3) 0 50%) 0 0 / 4px 4px;

  /* faces and their grids */
  --f-body: 'Galmuri14', ui-monospace, monospace;         /* 1 font px = 1 CSS px at 15px */
  --f-num: 'Jersey 10', 'Galmuri14', monospace;            /* 1 font px = 1 CSS px at 1400/75 = 18.667px */
  --f-lab: 'Silkscreen', 'Galmuri14', monospace;           /* 1 font px = 1 CSS px at 8px */
  --j: calc(1400px / 75);

  /* text size step 0: standard */
  --fs: 15px; --lh: 24px;          /* body, 1x: cap 14, x-height 10 */
  --fl: 16px; --fll: 24px;         /* labels, Silkscreen 2x: cap 10 */
  --k1: 2; --k2: 3; --k3: 6;       /* figure tiers: Jersey 10 at 2x, 3x, 6x */
  --hud: 36px; --rail: 40px; --band: 380px;
  color-scheme: dark;
}
/* step 1: large. Galmuri11 at 2x (cap 22, x-height 16), Silkscreen 3x, figures one multiple up */
html[data-ts="1"] { --f-body: 'Galmuri11', 'Galmuri14', ui-monospace, monospace; --fs: 24px; --lh: 36px; --fl: 24px; --fll: 32px; --k1: 3; --k2: 4; --k3: 7; --hud: 44px; --rail: 48px; --band: 440px; }
/* step 2: largest. Galmuri14 at 2x (cap 28, x-height 20), Silkscreen 4x */
html[data-ts="2"] { --fs: 30px; --lh: 44px; --fl: 32px; --fll: 40px; --k1: 4; --k2: 5; --k3: 8; --hud: 52px; --rail: 0px; --band: 480px; }

* { box-sizing: border-box; }
html { background: var(--c1); scrollbar-color: var(--c5) var(--c0); scroll-padding-top: calc(var(--hud) + 16px); scroll-padding-bottom: calc(var(--hud) + 16px); }
body { margin: 0; background: var(--c1); color: var(--c9); font: var(--fs)/var(--lh) var(--f-body); font-kerning: none; font-variant-ligatures: none; -webkit-font-smoothing: none; font-smooth: never; caret-color: var(--c10); }
::selection { background: var(--c10); color: var(--c0); }
a { color: var(--c9); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--c5); }
a:hover { color: var(--c10); text-decoration-color: var(--c10); }
:focus-visible { outline: 2px solid var(--c10); outline-offset: 2px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
b, strong { font-weight: normal; color: var(--c9); }
small { font-size: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
.ico { display: inline-block; vertical-align: middle; flex: none; }
.ar { width: 14px; height: 8px; margin-right: 4px; vertical-align: 2px; }
.up { color: var(--c14); } .dn { color: var(--c13); }
.skip { position: absolute; left: 56px; top: -80px; z-index: 100; background: var(--c10); color: var(--c0); padding: 8px 12px; font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; text-decoration: none; }
.skip:focus { top: calc(var(--hud) + 12px); }

/* figures: Jersey 10 only at whole multiples of its grid; line-height 16px per multiple keeps the baseline on a whole pixel */
.fig { font-family: var(--f-num); font-size: calc(var(--k1) * var(--j)); line-height: calc(var(--k1) * 16px); letter-spacing: 0; }

/* ---- pixel frames: 9-slice SVG, 2px per art pixel ---- */
.pn { border: 4px solid transparent; border-image: var(--fr-teal) 2 fill / 4px / 0 stretch; background: none; padding: 10px 12px 12px; position: relative; min-width: 0; }
.pn-a { border-image-source: var(--fr-amber); }
.ph { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin: -10px -12px 10px; padding: 6px 12px; background: var(--c3); box-shadow: 0 2px 0 var(--c0); }
.phi { color: var(--c10); align-self: center; line-height: 0; }
.ph h2 { font: var(--fl)/var(--fll) var(--f-lab); color: var(--c9); text-transform: uppercase; }
.pm { color: var(--c8); margin-left: auto; text-align: right; }

/* ---- HUD frame: fixed crawls top, bottom and both sides ---- */
.hud-top, .hud-bot { position: fixed; left: 0; right: 0; height: var(--hud); z-index: 50; display: flex; background: var(--c0); }
.hud-top { top: 0; z-index: 52; box-shadow: 0 2px 0 var(--c5), 0 4px 0 var(--c0); }
.hud-bot { bottom: 0; box-shadow: 0 -2px 0 var(--c5), 0 -4px 0 var(--c0); }
.rail { position: fixed; top: calc(var(--hud) + 4px); bottom: calc(var(--hud) + 4px); width: var(--rail); z-index: 45; background: var(--c0); display: flex; }
.rail-l { left: 0; box-shadow: 2px 0 0 var(--c5); }
.rail-r { right: 0; box-shadow: -2px 0 0 var(--c5); }
.crawl { display: flex; align-items: stretch; min-width: 0; flex: 1; overflow: hidden; }
.crawl:focus-visible { outline-offset: -4px; }
.tlab { flex: none; display: flex; align-items: center; justify-content: center; padding: 0 10px; background: var(--c10); color: var(--c0); font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; white-space: nowrap; }
.win { flex: 1; min-width: 0; overflow: hidden; position: relative; }
/* the crawl moves one whole pixel per step (steps = distance in px), so pixel type never sits between pixels */
.track { display: flex; width: max-content; height: 100%; align-items: center; animation: hcrawl var(--dur, 300s) steps(var(--n, 9000)) infinite; }
.run { display: flex; align-items: center; flex: none; }
.ti { white-space: nowrap; padding: 0 2px; color: var(--c8); }
.ti b { color: var(--c9); }
.ti .px { color: var(--c9); }
.rk { color: var(--c10); }
.tsep { color: var(--c5); padding: 0 12px; line-height: 0; }
.c-bot .track { animation-direction: reverse; }
@keyframes hcrawl { to { transform: translateX(calc(-1px * var(--n, 9000))); } }
/* vertical crawls */
.c-v { flex-direction: column; }
.c-v .tlab { writing-mode: vertical-rl; padding: 12px 0; }
.c-v .win { width: 100%; }
.c-v .track { flex-direction: column; width: 100%; height: max-content; animation-name: vcrawl; }
.c-v .run { flex-direction: column; }
.c-v .ti { writing-mode: vertical-rl; padding: 2px 0; }
.c-v .tsep { padding: 12px 0; }
.c-vl .win, .c-vl .tlab { transform: rotate(180deg); }
@keyframes vcrawl { to { transform: translateY(calc(-1px * var(--n, 9000))); } }
.crawl:hover .track, .crawl:focus .track, .crawl:focus-within .track, html.paused .track { animation-play-state: paused; }

/* text size control and pause: the HUD's option cluster */
.tsz { flex: none; display: flex; align-items: stretch; border: 0; margin: 0; padding: 0; min-width: 0; background: var(--c0); box-shadow: -2px 0 0 var(--c5); }
.tsz-l { display: flex; align-items: center; padding: 0 8px 0 12px; font: var(--fl)/var(--fll) var(--f-lab); color: var(--c8); text-transform: uppercase; }
.tsb { position: relative; display: flex; cursor: pointer; }
.tsb input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tsk { display: flex; align-items: center; justify-content: center; width: var(--hud); height: var(--hud); background: var(--c3); color: var(--c9); box-shadow: inset -2px 0 0 var(--c0); }
.tsb:hover .tsk { background: var(--c4); color: var(--c10); }
.tsb input:checked + .tsk { background: var(--c10); color: var(--c0); }
.tsb input:focus-visible + .tsk { outline: 2px solid var(--c10); outline-offset: -6px; }
.tsb input:checked:focus-visible + .tsk { outline-color: var(--c0); }
.pz { flex: none; display: flex; align-items: center; gap: 8px; border: 0; margin: 0; padding: 0 12px; min-height: var(--hud); min-width: var(--hud); justify-content: center; background: var(--c3); color: var(--c9); font: var(--fl)/var(--fll) var(--f-lab); cursor: pointer; text-transform: uppercase; box-shadow: -2px 0 0 var(--c0); }
.pz:hover { background: var(--c10); color: var(--c0); }
.pz:focus-visible { outline-offset: -4px; }
.pz-play { display: none; }
html.paused .pz-pause { display: none; } html.paused .pz-play { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .track { animation: none !important; }
  .pz { display: none; }
}

/* ---- page ---- */
.page { container: page / inline-size; padding: calc(var(--hud) + 12px) calc(var(--rail) + 10px) calc(var(--hud) + 16px); max-width: 1920px; margin: 0 auto; }
.crawl-m { display: none; }

/* header */
.top { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(min(100%, 15em), 20em) auto; align-items: center; gap: 8px 24px; padding: 8px 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c9); min-height: 44px; }
.logo { font: calc(var(--k2) * var(--j)) / calc(var(--k2) * 16px) var(--f-num); color: var(--c10); }
.bn { font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; display: flex; flex-direction: column; }
.bn small { font: var(--fs)/var(--lh) var(--f-body); color: var(--c8); text-transform: none; }
.top nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
.top nav a { display: block; padding: 4px 10px; min-height: 32px; font: var(--fl)/var(--fll) var(--f-lab); color: var(--c8); text-decoration: none; text-transform: uppercase; }
.top nav a:hover { background: var(--c3); color: var(--c9); box-shadow: inset 0 -2px 0 var(--c10); }
.top nav a[aria-current] { background: var(--c10); color: var(--c0); }
.find { position: relative; }
.fi { position: absolute; left: 12px; top: 50%; margin-top: -9px; color: var(--c7); line-height: 0; pointer-events: none; }
input { font: var(--fs)/var(--lh) var(--f-body); color: var(--c9); border: 4px solid transparent; border-image: var(--fr-well) 2 fill / 4px / 0 stretch; background: none; padding: 6px 10px; min-height: 44px; width: 100%; border-radius: 0; -webkit-appearance: none; appearance: none; }
input::placeholder { color: var(--c7); opacity: 1; }
input:focus-visible { outline: 2px solid var(--c10); outline-offset: 2px; }
input[aria-invalid="true"] { border-image-source: var(--fr-amber); }
#q { padding-left: 38px; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.res { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; padding: 4px; max-height: 60vh; overflow: auto; }
.res a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 4px 8px; text-decoration: none; }
.res a small { grid-column: 1; color: var(--c7); }
.res a b { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--c10); }
.res a:hover, .res a:focus-visible, .res a[aria-selected="true"] { background: var(--c3); outline-offset: -2px; }
.res .none { padding: 4px 8px; color: var(--c8); }
.stat { display: flex; gap: 16px; align-items: end; }
.stat dt { font: var(--fl)/var(--fll) var(--f-lab); color: var(--c7); text-transform: uppercase; white-space: nowrap; }
.stat dd { color: var(--c9); white-space: nowrap; }
.stat dd.fig { color: var(--c10); }

/* ---- hub world ---- */
.hub { position: relative; isolation: isolate; margin: 12px -10px 0; padding: 16px; display: grid; gap: 12px; grid-template-columns: minmax(0, 24em) minmax(0, 1fr) minmax(0, 26em);
  grid-template-areas: "quote talk map" "world world world" "gauge log log" "bar bar bar"; background: var(--c1); overflow: hidden; }
.land { position: absolute; left: 0; top: 0; z-index: -1; image-rendering: pixelated; display: block; }
.quote { grid-area: quote; display: flex; flex-direction: column; }
.quote .qx { margin-top: auto; }
.qtw { margin: 12px 0 4px; width: 288px; max-width: 100%; }
.qtr { display: block; }
.qtl { display: flex; justify-content: space-between; gap: 8px; color: var(--c7); } .talk { grid-area: talk; } .map { grid-area: map; } .world { grid-area: world; } .gauge { grid-area: gauge; } .log { grid-area: log; } .bar { grid-area: bar; }
.qn-t { font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; color: var(--c9); }
.big { font-size: calc(var(--k3) * var(--j)); line-height: calc(var(--k3) * 16px); color: var(--c10); margin: 12px 0 8px; }
.qc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.qc .chg { font: calc(var(--k1) * var(--j)) / calc(var(--k1) * 16px) var(--f-num); }
.qc .chg .ar { width: 14px; height: 8px; vertical-align: 6px; }
.qc span:last-child { color: var(--c8); }
.qx { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 10px; min-height: 0; padding-top: 8px; box-shadow: 0 -2px 0 var(--c3); }
.qx dt { font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; color: var(--c7); }
.qx dd { color: var(--c9); }
.qx dd small { color: var(--c8); }
.qx dd small.up { color: var(--c14); } .qx dd small.dn { color: var(--c13); }
.qd { margin-top: 10px; color: var(--c8); }
.talk { padding: 26px 20px 16px; display: flex; flex-direction: column; }
.talk h1 { margin-top: auto; }
.talk > p:last-child { margin-bottom: auto; }
.plate { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: calc(-28px - var(--fll) / 2) 0 12px -4px; background: var(--c10); color: var(--c0); padding: 0 10px; box-shadow: 0 0 0 2px var(--c0); }
.pl-l { font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; }
.pl-d { font: var(--fs)/var(--lh) var(--f-body); }
.talk h1 { font: calc(var(--k2) * var(--j)) / calc(var(--k2) * 16px) var(--f-num); color: var(--c9); text-wrap: balance; margin-bottom: 12px; }
.talk > p:not(.plate) { color: var(--c8); max-width: 62ch; }

.mmw { position: relative; }
.mm { display: block; }
.mm .mt { font: var(--fs) var(--f-body); fill: var(--c9); }
.mm a { outline: none; }
.mm a:hover .cell { stroke: var(--c10); }
.mkey { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; color: var(--c8); }
.mkey i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 2px var(--c7); }
.mkey .kdz { background: repeating-conic-gradient(var(--c4) 0 25%, var(--c5) 0 50%) 0 0 / 4px 4px; }

.world { position: relative; margin: 0 -16px; }
.band { position: relative; height: var(--band); }
.alt { position: absolute; right: 12px; transform: translateY(-50%); background: var(--c0); color: var(--c8); padding: 0 6px; }
.wflag { position: absolute; width: 0; height: 0; }
.wflag::before { content: ''; position: absolute; left: -1px; bottom: 0; width: 2px; height: 22px; background: var(--c9); }
.wflag::after { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--c9); box-shadow: 0 0 0 2px var(--c0); }
.wf-t { position: absolute; bottom: 20px; left: -2px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; background: var(--c0); color: var(--c9); padding: 0 8px; box-shadow: inset 0 -2px 0 var(--c5); }
.wf-t small { color: var(--c8); }
.wf-t.hot { color: var(--c10); box-shadow: inset 0 -2px 0 var(--c10); }
.wflag.lo .wf-t { left: auto; right: -2px; }
.wflag.lo::after { background: var(--c10); }
.fog { position: absolute; top: 56%; display: flex; justify-content: center; text-align: center; pointer-events: none; padding: 0 8px; }
.fog span { background: var(--c0); color: var(--c9); padding: 0 6px; }
.fog-r { top: 27%; }
.tower { position: absolute; transform: translate(-50%, -100%); margin-top: -8px; background: var(--c0); color: var(--c10); padding: 0 6px; white-space: nowrap; }
.tower.tr { transform: translate(-100%, -100%); }
.tower.tl { transform: translate(0, -100%); }
.ruler { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--lh) + 6px); background: var(--c0); box-shadow: 0 -2px 0 var(--c5); }
.ruler span { position: absolute; top: 4px; transform: translateX(8px); color: var(--c8); }
.ruler span::before { content: ''; position: absolute; left: -8px; top: -6px; width: 2px; height: calc(var(--lh) + 2px); background: var(--c8); }
.ruler i { position: absolute; top: -2px; width: 2px; height: 8px; background: var(--c6); }
.layers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; padding: 6px 16px 8px; background: var(--c0); box-shadow: 0 2px 0 var(--c5); }
.layers .lt { font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; color: var(--c10); }
.layers ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.layers li { display: flex; align-items: center; gap: 8px; color: var(--c9); }
.k { flex: none; width: 16px; height: 12px; display: inline-block; }
.k-r { background: linear-gradient(135deg, var(--c7) 50%, var(--c5) 50%); }
.k-s { background: linear-gradient(135deg, var(--c9) 50%, var(--c8) 50%); }
.k-n { background: repeating-linear-gradient(90deg, var(--c10) 0 4px, transparent 4px 8px) 0 50% / 100% 2px no-repeat; }
.k-f { background: repeating-conic-gradient(var(--c3) 0 25%, var(--c4) 0 50%) 0 0 / 4px 4px; }
.k-t { background: linear-gradient(var(--c5) 0 4px, var(--c3) 4px); box-shadow: inset 4px -2px 0 -2px var(--c10); }

/* gauges */
.gauges li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 4px 0; }
.gauges li + li { box-shadow: 0 -2px 0 var(--c3); }
.gl { color: var(--c9); }
.gv { text-align: right; white-space: nowrap; }
.gv .ar { vertical-align: 6px; }
.gb { display: grid; grid-template-columns: repeat(10, 6px) 2px repeat(10, 6px); gap: 2px; align-items: center; }
.gb i { height: 12px; background: var(--dz-empty); }
.gb i.up { background: var(--c14); } .gb i.dn { background: var(--c13); }
.gb b { width: 2px; height: 20px; background: var(--c9); }
.gd { color: var(--c8); text-align: right; }
.brk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-top: 8px; padding-top: 10px; box-shadow: 0 -2px 0 var(--c3); }
.brk .gv { color: var(--c8); }
.brk .gv b { margin-left: 8px; }
.bb { flex: 1 0 100%; display: flex; gap: 2px; }
.bb i { flex: 1; height: 16px; }
.bb i.up { background: var(--c14); } .bb i.dn { background: var(--c13); }

/* movers log */
.lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.lg h3 { font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; color: var(--c9); padding-bottom: 4px; margin-bottom: 2px; box-shadow: 0 2px 0 var(--c3); display: flex; align-items: center; gap: 4px; }
.ql li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto 74px; align-items: center; gap: 8px; padding: 2px 0; }
.qn { color: var(--c7); }
.qv { text-align: right; white-space: nowrap; }
.qb { height: 10px; width: calc(var(--s) * 6px); background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px); }
.qb.up { color: var(--c14); } .qb.dn { color: var(--c13); }
.ql li:target { background: var(--c3); outline: 2px solid var(--c10); }

/* hotbar */
.slots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.slots li { display: flex; }
.slot { flex: 1; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--c9); padding: 6px 6px 8px; border: 4px solid transparent; border-image: var(--fr-chip) 2 fill / 4px / 0 stretch; position: relative; min-width: 0; }
.slot:hover { border-image-source: var(--fr-amber); color: var(--c9); }
.slot:hover .sn { color: var(--c10); }
.cap { display: block; width: 96px; height: 54px; image-rendering: pixelated; background: var(--dz-empty); align-self: center; box-shadow: 0 0 0 2px var(--c0); }
.rkb { position: absolute; top: 2px; left: 2px; z-index: 1; background: var(--c10); color: var(--c0); padding: 0 6px; box-shadow: 0 0 0 2px var(--c0); }
.sn { margin-top: 6px; overflow-wrap: anywhere; }
.sd { margin-top: auto; padding-top: 2px; }
.sd, .sf { color: var(--c8); }
.sf .px { color: var(--c9); }

/* ---- deck below the world ---- */
.deck { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
.d-chart { grid-column: span 7; align-self: stretch; display: flex; flex-direction: column; }
.d-chart .charts { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.stack { grid-column: span 5; display: grid; gap: 12px; }
.d-breadth, .d-sectors, .d-pairs, .d-ipo, .d-rules { grid-column: 1 / -1; }
.chart { margin: 0; }
details.nums { margin-top: 12px; }
.chart figcaption { margin-bottom: 4px; }
.chart figcaption b { font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; color: var(--c10); margin-right: 6px; }
.chart figcaption span { color: var(--c8); }
.cw svg { display: block; }
.chart .ct { font: var(--fs) var(--f-body); fill: var(--c8); }
.chart .ct.hot { fill: var(--c10); }
details.nums { min-width: 0; max-width: 100%; }
details.nums summary { cursor: pointer; font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; color: var(--c9); padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
details.nums summary::-webkit-details-marker { display: none; }
details.nums summary::before { content: ''; width: 8px; height: 8px; background: var(--c10); clip-path: polygon(0 0, 100% 50%, 0 100%); }
details.nums[open] summary::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
details.nums summary:hover { color: var(--c10); }
.tw { max-height: 22em; max-width: 100%; overflow: auto; }
.tw .grid-t th, .tw .grid-t td { white-space: nowrap; }

.diary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr)); gap: 0 20px; }
.diary > div { padding: 6px 0 8px; box-shadow: 0 2px 0 var(--c3); min-width: 0; }
.diary dt { color: var(--c8); }
.diary dd { color: var(--c9); }
.diary .fig { display: block; }
.diary .dk .fig { font-size: calc(var(--k2) * var(--j)); line-height: calc(var(--k2) * 16px); color: var(--c10); }
.diary small { display: block; color: var(--c7); }

.d-verdict p { color: var(--c8); max-width: 62ch; }
.vf { margin-top: 12px; }
.vf label { display: block; font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; margin-bottom: 4px; }
.vr { display: flex; flex-wrap: wrap; gap: 8px; }
.vr input { flex: 1 1 min(100%, 14em); width: auto; min-width: 0; }
.btn { flex: 0 1 auto; max-width: 100%; font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; color: var(--c0); border: 4px solid transparent; border-image: var(--fr-btn) 2 fill / 4px / 0 stretch; background: none; padding: 6px 14px; min-height: 44px; cursor: pointer; }
.btn:hover { border-image-source: var(--fr-teal); color: var(--c9); }
.btn:active { transform: translateY(2px); }
.vmsg { margin-top: 8px; min-height: var(--lh); color: var(--c8); }
.vmsg.err { color: var(--c13); } .vmsg.ok { color: var(--c14); }

.brn { margin-bottom: 8px; color: var(--c8); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.brn b + b { margin-left: 16px; }
.cells { display: flex; flex-wrap: wrap; gap: 6px; }
.cells li { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; padding: 1px 8px; background: var(--c1); box-shadow: inset 0 -2px 0 currentColor; color: var(--c14); }
.cells li.dn { color: var(--c13); }
.cells li span { color: var(--c9); }
.cells li b { color: inherit; white-space: nowrap; }
.note, .tnote { color: var(--c8); max-width: 36em; }
.note { margin-top: 8px; }
.tnote { margin-bottom: 8px; }

.tsc { position: relative; min-width: 0; overflow-x: auto; }
.tsc:focus-visible { outline-offset: -2px; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.grid-t { width: 100%; border-collapse: collapse; }
.grid-t th, .grid-t td { padding: 2px 6px; text-align: left; font-weight: normal; vertical-align: middle; }
.grid-t thead th { color: var(--c7); box-shadow: inset 0 -2px 0 var(--c5); white-space: nowrap; vertical-align: bottom; }
.grid-t tbody tr { box-shadow: inset 0 -2px 0 var(--c3); }
.grid-t tbody tr:hover { background: var(--c3); }
.grid-t tbody tr:target { background: var(--c3); outline: 2px solid var(--c10); outline-offset: -2px; }
.grid-t th[scope=row] { color: var(--c9); }
.grid-t .n { text-align: right; white-space: nowrap; }
.grid-t .sp { width: 80px; padding-right: 0; }
.grid-t .px { color: var(--c9); }
.grid-t .lc { color: var(--c8); }
.nt th[scope=row] small { display: block; color: var(--c7); }
.grid-t .m-only { display: none !important; }
.chg { white-space: nowrap; }
.chg.flat { color: var(--c8); }
.nos { color: var(--c7); }
.sp .nos { display: block; width: 72px; height: 20px; background: var(--dz-empty); }
.thin { color: var(--c10); }
.spk { display: block; }
.ipo .rkc { color: var(--c10); width: 2.4em; }
.ipo .capc { width: 76px; padding: 4px 6px; }
.ipo .cap { width: 64px; height: 36px; }
.ipo th[scope=row] small { display: block; color: var(--c7); }
.ipo th[scope=row] a { text-decoration-color: var(--c4); }
.ipo .fol { color: var(--c9); }

.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 27em), 1fr)); gap: 12px 24px; }
.rules dt { font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; color: var(--c10); }
.rules dd { color: var(--c8); max-width: 70ch; }

.foot { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.foot ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot a { font: var(--fl)/var(--fll) var(--f-lab); text-transform: uppercase; display: inline-block; padding: 4px 0; }
.foot p { color: var(--c9); }
.foot .fm { color: var(--c8); flex-basis: 100%; max-width: 38em; }

/* ---- layout by the page's width in body ems, so a larger text step reflows like a narrower screen ---- */
@container page (max-width: 84em) {
  .hub { grid-template-columns: minmax(0, 22em) minmax(0, 1fr); grid-template-areas: "quote talk" "world world" "map gauge" "log log" "bar bar"; }
  .slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .top nav { grid-column: 1 / -1; grid-row: 2; }
  .d-chart { grid-column: 1 / -1; }
  .grid-t .w-only { display: none; }
  .grid-t .m-only { display: block !important; }
  .stack { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26em), 1fr)); align-items: start; }
}
@container page (max-width: 48em) {
  .top { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .top nav { grid-row: auto; }
  .stat { display: none; }
  .top nav ul { gap: 4px 2px; }
  .top nav a { padding: 4px 8px; }
  .hub { grid-template-columns: minmax(0, 1fr); grid-template-areas: "quote" "talk" "world" "gauge" "map" "log" "bar"; padding: 16px 12px; }
  .big { font-size: calc((var(--k3) - 1) * var(--j)); line-height: calc((var(--k3) - 1) * 16px); }
  .talk h1 { font-size: calc(var(--k1) * var(--j)); line-height: calc(var(--k1) * 16px); margin-bottom: 8px; }
  .talk { margin-top: calc(var(--fll) / 2 + 2px); }
  .world { margin: 0 -12px; }
  .band { height: calc(var(--band) - 80px); }
  .wf-t small { display: none; }
  .wf-t .fig { font-size: calc(2 * var(--j)); line-height: 32px; }
  .tower, .alt.a5 { display: none; }
  .fog { top: 52%; }
  .fog-r { display: none; }
  .ruler span:nth-of-type(even) { display: none; }
  .lg { grid-template-columns: minmax(0, 1fr); }
  .ql li { grid-template-columns: 2em minmax(0, 1fr) auto; }
  .qb { display: none; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols2 { grid-template-columns: minmax(0, 1fr); }
  .grid-t th, .grid-t td { padding: 2px 4px; }
  .ipo .rkc { width: 2em; }
  .ipo .capc { width: 70px; padding: 4px 2px; }
  .gd { grid-column: 1 / -1; text-align: left; }
  .gb { grid-template-columns: repeat(10, minmax(0, 1fr)) 2px repeat(10, minmax(0, 1fr)); }
  .gauges .gb { grid-column: 1 / -1; }
  .ph .pm { margin-left: 0; text-align: left; flex-basis: 100%; }
  .diary { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5em), 1fr)); gap: 0 16px; }
  .cells { gap: 4px; }
}
@container page (max-width: 22em) {
  .ipo .capc { display: none; }
  .ql li { grid-template-columns: 2em minmax(0, 1fr); }
  .qv { grid-column: 2; text-align: left; }
  .qm { overflow-wrap: anywhere; }
  .brand { flex-wrap: wrap; }
}
@container page (max-width: 30em) {
  .qx { gap: 8px 16px; }
  .grid-t .sp { width: 76px; }
  .layers { padding: 6px 12px 8px; }
}

/* ---- viewport-level HUD changes (the HUD sits outside the page container) ---- */
@media (max-width: 999px), (max-height: 540px) {
  :root, html[data-ts] { --rail: 0px; }
  .rail { display: none; }
  .crawl-m { display: flex; height: var(--hud); margin: 12px -12px 0; background: var(--c0); box-shadow: 0 -2px 0 var(--c5), 0 2px 0 var(--c5); }
  .page { padding-left: 12px; padding-right: 12px; }
  .hub { margin-left: -12px; margin-right: -12px; }
}
html[data-ts="2"] .rail { display: none; }
html[data-ts="2"] .crawl-m { display: flex; height: var(--hud); margin: 12px -12px 0; background: var(--c0); box-shadow: 0 -2px 0 var(--c5), 0 2px 0 var(--c5); }
html[data-ts="2"] .page { padding-left: 12px; padding-right: 12px; }
html[data-ts="2"] .hub { margin-left: -12px; margin-right: -12px; }
@media (max-width: 759px) {
  .pz-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pz { padding: 0; width: var(--hud); }
  .tsz-l { display: none; }
  .tlab { font-size: min(var(--fl), 24px); line-height: min(var(--fll), 32px); }
  /* the text size control moves to the bottom bar's right end on a phone */
  .tsz { position: fixed; right: 0; bottom: 0; height: var(--hud); z-index: 51; }
  .hud-bot { padding-right: calc(3 * var(--hud) + 2px); }
}
/* short windows (a phone held sideways, or 400% zoom): the HUD stops being fixed so it cannot cover the content */
@media (max-height: 540px) {
  .hud-top, .hud-bot { position: relative; }
  .tsz { position: static; height: auto; }
  .hud-bot { padding-right: 0; }
  .page { padding-top: 12px; padding-bottom: 16px; }
  html { scroll-padding-top: 8px; scroll-padding-bottom: 8px; }
}