/* The pixel layer: hard-edged frames and bevelled buttons like the game's art, characters who host
   each section in the game's speech bubble, corkboard notes, and the game-menu pieces. Loaded last. */

:root {
  --ink: #0b0910;
  --frame-shadow: 6px 6px 0 var(--ink);
  --bevel: inset 0 0 0 2px rgba(255, 255, 255, 0.05), inset 3px 3px 0 rgba(255, 255, 255, 0.06), inset -3px -3px 0 rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------------------------- frames */
.card, .topbar, .window, .worldmap, .browser, .city-hero, .street, .toc, .terminal, .keys, .callout, .toast, .faq details,
.annot img, .figure img, .shot, .lightbox img, .b-url, .cmdbar, .dayframe, .charsel .stagebig, .inventory .slots, .inventory .detail {
  border-radius: 0 !important;
}
.card, .worldmap, .browser, .city-hero, .street, .toc, .keys, .dayframe, .window, .cmdbar {
  border: 3px solid var(--ink) !important;
  box-shadow: var(--bevel), var(--frame-shadow) !important;
}
.topbar { border: 3px solid var(--ink); box-shadow: var(--bevel), 0 6px 0 var(--ink); }
.annot img, .figure img, .shot { border: 3px solid var(--ink) !important; box-shadow: var(--frame-shadow) !important; }
.shot:hover { box-shadow: 9px 9px 0 var(--ink) !important; transform: translate(-3px, -3px) !important; }
.tilt:hover { box-shadow: var(--bevel), 9px 9px 0 var(--ink) !important; }
.tilt::before { border-radius: 0; }
.district .land { border-radius: 0; border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); }
.district .name, .district .badge, .pin, .actor .tag, .traveler .vt, .street .label { border-radius: 0 !important; border-width: 2px; }

/* ------------------------------------------------------------- buttons: bevelled blocks that press in */
.btn {
  border-radius: 0 !important;
  border: 3px solid var(--ink) !important;
  padding: 13px 22px;
  transition: transform 0.08s, box-shadow 0.08s !important;
}
.btn.primary {
  background: var(--yellow);
  box-shadow: inset -4px -4px 0 #d39b26, inset 4px 4px 0 #ffe7a3, 4px 4px 0 var(--ink) !important;
}
.btn.ghost {
  background: var(--panel-2);
  box-shadow: inset -4px -4px 0 #1a1524, inset 4px 4px 0 #3a3050, 4px 4px 0 var(--ink) !important;
}
.btn:hover { transform: translate(-2px, -2px); animation: none !important; }
.btn.primary:hover { box-shadow: inset -4px -4px 0 #d39b26, inset 4px 4px 0 #ffe7a3, 6px 6px 0 var(--ink) !important; }
.btn.ghost:hover { box-shadow: inset -4px -4px 0 #1a1524, inset 4px 4px 0 #3a3050, 6px 6px 0 var(--ink) !important; }
.btn:active { transform: translate(3px, 3px); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.2), inset 4px 4px 0 rgba(255, 255, 255, 0.2), 1px 1px 0 var(--ink) !important; }
.topbar .btn { padding: 8px 14px; }
.lang-btn, .sound-btn, .menu-btn, .xplv, .filters button, .daynight, .daynight button, .pizza-btn, .follow, .composer .post-btn, .cmd-send, .lightbox button, .b-tabs button {
  border-radius: 0 !important;
}
.lang-btn, .sound-btn, .menu-btn { border: 2px solid var(--ink) !important; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.08), 3px 3px 0 var(--ink); }
.sound-btn { display: grid; place-items: center; color: var(--muted); }
.sound-btn svg { width: 18px; height: 16px; }
.sound-btn .wave { display: none; }
.sound-btn.on { color: var(--yellow); }
.sound-btn.on .wave { display: block; }
.sound-btn.on .mute { display: none; }
.filters button { border: 2px solid var(--ink) !important; box-shadow: 3px 3px 0 var(--ink); }
.filters button.on { box-shadow: inset -3px -3px 0 #d39b26, 3px 3px 0 var(--ink); }
.daynight { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pizza-btn { display: inline-flex; align-items: center; gap: 8px; border: 2px dashed rgba(255, 201, 74, 0.6); padding: 5px 12px 5px 8px; }
.pizza-btn img { width: 26px; image-rendering: pixelated; }
.pizza-btn:hover img { animation: wiggle 0.5s; }
.cmd-send { border: 2px solid var(--ink); box-shadow: inset -3px -3px 0 #23875f, inset 3px 3px 0 #6fe0b4; }
.cmd-send.press { box-shadow: inset 3px 3px 0 #23875f; }
.xplv { border: 2px solid var(--ink) !important; }
.xpwrap { border-radius: 0; }

/* ------------------------------------------------------------- headings: hard pixel shadows */
h1, h2, .chapter h3 { text-shadow: 3px 3px 0 var(--ink); }
.hero h1 em { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--yellow) !important; animation: none !important; }
.logo-big { filter: drop-shadow(0 6px 0 rgba(11, 9, 16, 0.6)); }

/* ------------------------------------------------------------- a character hosts every section */
.sec-head[data-host] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 22px; align-items: end; max-width: 860px; }
.sec-head[data-host] .host { grid-row: 1 / span 2; align-self: end; width: 80px; height: 96px; image-rendering: pixelated; background-repeat: no-repeat; background-size: 160px 96px; position: relative; cursor: pointer; }
.sec-head[data-host] .host::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 52px; height: 10px; margin-left: -26px; background: rgba(0, 0, 0, 0.4); border-radius: 50%; z-index: -1; }
.sec-head[data-host] h2 { margin: 0 0 6px; }
.sec-head[data-host] p {
  position: relative;
  margin: 0;
  justify-self: start;
  padding: 12px 16px;
  max-width: 640px;
  background: #fffdf8;
  color: #1d1726;
  border: 3px solid var(--ink);
  border-radius: 12px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  box-shadow: 0 4px 0 rgba(11, 9, 16, 0.6);
}
.sec-head[data-host] p::before {
  content: '';
  position: absolute;
  bottom: 14px;
  inset-inline-start: -12px;
  width: 14px;
  height: 14px;
  background: #fffdf8;
  border-bottom: 3px solid var(--ink);
  border-inline-start: 3px solid var(--ink);
  transform: rotate(45deg);
}
[dir='rtl'] .sec-head[data-host] p::before { transform: rotate(-45deg); }
.sec-head[data-host].in p { animation: bubble-in 0.5s 0.2s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes bubble-in { from { opacity: 0; transform: scale(0.6) translateY(10px); } }
.sec-head.center[data-host] { margin-inline: auto; }
@media (max-width: 560px) {
  .sec-head[data-host] { grid-template-columns: 1fr; }
  .sec-head[data-host] .host { grid-row: auto; order: 3; justify-self: start; }
  .sec-head[data-host] p { order: 2; }
  .sec-head[data-host] p::before { bottom: -12px; inset-inline-start: 26px; transform: rotate(-45deg); border-inline-start: 0; border-inline-end: 3px solid var(--ink); }
}

/* ------------------------------------------------------------- a day at the office */
.dayline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; counter-reset: day; }
.dayframe { margin: 0; background: var(--panel); position: relative; transition: transform 0.2s; }
.dayframe:hover { transform: translate(-3px, -3px); }
.dclock { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--bg-2); border-bottom: 3px solid var(--ink); }
.dclock svg { height: 18px; width: auto; }
.dtag { font-size: 12px; font-weight: 700; padding: 2px 8px; border: 2px solid var(--ink); color: var(--ink); }
.dayframe.work .dtag { background: var(--blue); }
.dayframe.life .dtag { background: var(--good); }
.dshot { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--ink); }
.dshot img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform 0.6s; }
.dayframe:hover .dshot img { transform: scale(1.08); }
.dayframe figcaption { padding: 14px 16px 16px; display: grid; gap: 6px; }
.dayframe figcaption b { font-size: 17px; }
.dayframe figcaption span { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.dayframe figcaption code { justify-self: start; font-size: 12px; color: var(--dim); background: var(--bg-2); border: 0; border-radius: 0; direction: ltr; }
.dayframe.life figcaption code { color: var(--good); }
@media (max-width: 860px) {
  .dayline { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin-inline: -4px; }
  .dayframe { scroll-snap-align: start; }
}

/* ------------------------------------------------------------- corkboard notes (callouts, world rules, city facts) */
.callout, .world-cards .card, .city-facts .card {
  background: #fff4b8 !important;
  color: #2b2238 !important;
  border: 0 !important;
  box-shadow: 4px 6px 0 rgba(11, 9, 16, 0.55) !important;
  position: relative;
  transform: rotate(var(--tilt, -0.6deg));
}
.callout { padding: 18px 20px 16px; margin: 26px 4px; }
.callout p, .callout b, .world-cards p, .city-facts p, .world-cards h3, .city-facts h3 { color: #2b2238 !important; }
.callout.tip { background: #fff4b8 !important; --tilt: 0.5deg; }
.callout.warn { background: #ffd6d0 !important; --tilt: -0.5deg; }
.callout.good { background: #d4f5df !important; --tilt: 0.4deg; }
.callout:not(.tip):not(.warn):not(.good) { background: #dbe9ff !important; }
.callout::after, .world-cards .card::after, .city-facts .card::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: #e05a4f;
  border: 2px solid var(--ink);
  box-shadow: inset -3px -3px 0 #a33a32, inset 2px 2px 0 #ff9a8f;
}
.world-cards .card:nth-child(2n), .city-facts .card:nth-child(2n) { --tilt: 0.8deg; background: #d4f5df !important; }
.world-cards .card:nth-child(3n), .city-facts .card:nth-child(3n) { --tilt: -0.3deg; background: #dbe9ff !important; }
.world-cards .card:hover, .city-facts .card:hover { transform: rotate(0deg) translateY(-4px); }
.world-cards .ic img { width: 30px; image-rendering: pixelated; }
.world-cards .card:hover .ic img { animation: wiggle 0.5s; }

/* ------------------------------------------------------------- the guide reads like a game menu */
.toc { background: var(--panel); }
.toc a { border-radius: 0 !important; position: relative; }
.toc a.on { background: var(--panel-3); color: var(--yellow); }
.toc a.on::before { content: ''; position: absolute; inset-inline-start: -2px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-inline-start: 6px solid var(--yellow); animation: nudge-x 0.8s steps(2) infinite; }
@keyframes nudge-x { 50% { transform: translateX(3px); } }
[dir='rtl'] .toc a.on::before { animation-name: nudge-x-rtl; }
@keyframes nudge-x-rtl { 50% { transform: translateX(-3px); } }
.chapter > header .num { border-radius: 0; border: 3px solid var(--ink); box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.08), 4px 4px 0 var(--ink); }
.pills span { border-radius: 0; border: 2px solid var(--ink); border-bottom-width: 4px; background: var(--panel-3); font-weight: 600; }
.status div { border-radius: 0; border: 3px solid var(--ink); border-top: 6px solid var(--c); box-shadow: 4px 4px 0 var(--ink); }
.flow .st::before { border-radius: 0; border: 2px solid var(--ink); }
.legend li { border-radius: 0; }
.legend li b.n { border-radius: 0; }
.hot { border-radius: 0; }
kbd { border-radius: 0; }
code { border-radius: 0; }
.terminal { border: 3px solid var(--ink); box-shadow: var(--frame-shadow); }

/* ------------------------------------------------------------- city pins: pixel markers */
.pin { padding: 3px 10px 3px 4px; background: var(--ink); border-color: var(--ink); }
.pin i { width: 12px; height: 12px; border-radius: 0; background: var(--yellow); box-shadow: inset -3px -3px 0 #d39b26; margin-inline-end: 2px; }

/* ------------------------------------------------------------- world: office thumbnails and the hub mark */
.node .big { animation: none !important; }
.node .office-thumb { width: 96px; height: 60px; margin: 0 auto 10px; border: 3px solid var(--ink); background: url(/shots/city-wide.webp) 46% 22% / 900% auto; image-rendering: pixelated; box-shadow: 4px 4px 0 var(--ink); }
html[lang='en'] .node .office-thumb { background-image: url(/shots-en/city-wide.webp); }
.node:last-of-type .office-thumb, .hubflow > .node:nth-child(3) .office-thumb { background-position: 8% 12%; filter: hue-rotate(35deg); }
.node .hub-mark { height: 60px; display: grid; place-items: center; margin-bottom: 10px; }
.node .hub-mark svg { height: 34px; width: auto; animation: blink 2.4s steps(2) infinite; }
.node .locks span { border-radius: 0; border: 2px solid var(--ink); text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 2px; }
.packet img { width: 22px; image-rendering: pixelated; display: block; }
.kicker-px { color: var(--yellow); font: 700 14px var(--mono); letter-spacing: 0.04em; margin-bottom: 6px; }
.online-dot { border-radius: 0 !important; }

/* ------------------------------------------------------------- toasts carry a pixel icon */
.toast { border: 3px solid var(--ink) !important; border-inline-start: 6px solid var(--yellow) !important; box-shadow: 5px 5px 0 var(--ink) !important; }
.toast .ti img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; display: block; }

/* ------------------------------------------------------------- team: a character-select screen */
.charsel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.charsel .stagebig { position: relative; min-height: 420px; border: 3px solid var(--ink); box-shadow: var(--bevel), var(--frame-shadow); overflow: hidden; display: grid; grid-template-rows: 1fr auto; --accent: var(--yellow); }
.charsel .floor {
  position: relative;
  display: grid;
  place-items: end center;
  padding-bottom: 34px;
  background:
    radial-gradient(ellipse 30% 8% at 50% calc(100% - 30px), rgba(0, 0, 0, 0.45), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(0, 0, 0, 0.2) 63px 64px),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, #2a2236) 0 15px, color-mix(in srgb, var(--accent) 17%, #241d30) 15px 16px);
  transition: background 0.4s;
}
.charsel .big-sprite { width: 160px; height: 192px; image-rendering: pixelated; background-repeat: no-repeat; cursor: pointer; animation: bob 2.4s ease-in-out infinite; }
.charsel .big-sprite.jump { animation: jump 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
.charsel .floor .say { position: absolute; top: 22px; left: 50%; bottom: auto; transform: translateX(-50%); max-width: 80%; font-size: 15px; opacity: 1; }
.charsel .floor .say.pop { animation: bubble-in 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.charsel .card-info { padding: 16px 20px 18px; background: var(--panel); border-top: 3px solid var(--ink); }
.charsel .card-info h3 { font-size: 26px; margin: 0; display: flex; align-items: center; gap: 10px; }
.charsel .card-info h3 i { width: 12px; height: 12px; background: var(--accent); border: 2px solid var(--ink); }
.charsel .card-info .role { color: var(--muted); }
.charsel .card-info .quirks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.charsel .card-info .quirks span { font-size: 13px; padding: 2px 10px; border: 2px solid var(--ink); background: var(--panel-3); }
.charsel .roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; }
.charsel .slot {
  position: relative;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  background: var(--panel-2);
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.06), 4px 4px 0 var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  font: inherit;
  color: var(--text);
  padding: 0;
}
.charsel .slot .face { width: 80px; height: 96px; image-rendering: pixelated; background-repeat: no-repeat; background-size: 80px 96px; transform: translateY(16px); transition: transform 0.2s; }
.charsel .slot:hover .face { transform: translateY(8px) scale(1.06); }
.charsel .slot .nm { position: absolute; inset: auto 0 0 0; font-size: 12px; font-weight: 700; padding: 2px 0; background: rgba(11, 9, 16, 0.85); }
.charsel .slot.on { background: color-mix(in srgb, var(--accent) 35%, #272036); }
.charsel .slot.on::before, .charsel .slot.on::after { content: ''; position: absolute; width: 16px; height: 16px; border: 4px solid var(--yellow); z-index: 2; animation: blink 0.8s steps(2) infinite; }
.charsel .slot.on::before { top: 3px; inset-inline-start: 3px; border-inline-end: 0; border-bottom: 0; }
.charsel .slot.on::after { bottom: 3px; inset-inline-end: 3px; border-inline-start: 0; border-top: 0; }
.charsel .slot.hire { font: 700 40px var(--mono); color: var(--yellow); }
.charsel .slot.hire .nm { font: 700 12px var(--font); color: var(--text); }
.charsel .roster-note { grid-column: 1 / -1; color: var(--dim); font-size: 13px; margin-top: 4px; }
@media (max-width: 860px) { .charsel { grid-template-columns: 1fr; } .charsel .stagebig { min-height: 360px; } }

/* ------------------------------------------------------------- features: an inventory */
.inventory { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.inventory .slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px; background: #1a1524; border: 3px solid var(--ink); box-shadow: inset 0 0 0 3px #2a2236, var(--frame-shadow); align-content: start; }
.inventory .slot {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #2a2236;
  border: 3px solid var(--ink);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.35), inset -3px -3px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  position: relative;
  padding: 0;
}
.inventory .slot img { width: 46%; image-rendering: pixelated; transition: transform 0.2s cubic-bezier(0.3, 1.8, 0.5, 1); }
.inventory .slot:hover img { transform: scale(1.25) rotate(-6deg); }
.inventory .slot .qty { position: absolute; bottom: 3px; inset-inline-end: 5px; font: 700 11px var(--mono); color: var(--muted); }
.inventory .slot.on { background: #3a3050; }
.inventory .slot.on::before, .inventory .slot.on::after { content: ''; position: absolute; width: 12px; height: 12px; border: 3px solid var(--yellow); animation: blink 0.8s steps(2) infinite; }
.inventory .slot.on::before { top: -3px; inset-inline-start: -3px; border-inline-end: 0; border-bottom: 0; }
.inventory .slot.on::after { bottom: -3px; inset-inline-end: -3px; border-inline-start: 0; border-top: 0; }
.inventory .detail { padding: 24px; background: var(--panel); border: 3px solid var(--ink); box-shadow: var(--bevel), var(--frame-shadow); display: grid; align-content: start; gap: 10px; }
.inventory .detail .icon { width: 84px; height: 84px; display: grid; place-items: center; background: #2a2236; border: 3px solid var(--ink); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.35); }
.inventory .detail .icon img { width: 52px; image-rendering: pixelated; }
.inventory .detail .icon.pop img { animation: statpop 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); }
.inventory .detail h3 { font-size: 24px; margin: 6px 0 0; }
.inventory .detail p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.inventory .detail .hint { font-size: 12.5px; color: var(--dim); margin-top: 8px; }
@media (max-width: 860px) { .inventory { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- FAQ: the help desk */
.helpdesk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; max-width: 1040px; margin: 0 auto; align-items: start; }
.helpdesk .choices { display: grid; gap: 8px; }
.helpdesk .choice {
  text-align: start;
  font: 600 15.5px/1.5 var(--font);
  color: var(--text);
  background: var(--panel);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 16px 12px 16px;
  padding-inline-start: 34px;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s, background 0.15s;
}
.helpdesk .choice:hover { transform: translate(-2px, -2px); background: var(--panel-2); }
.helpdesk .choice.on { background: var(--panel-3); color: var(--yellow); }
.helpdesk .choice.on::before { content: ''; position: absolute; inset-inline-start: 12px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-inline-start: 8px solid var(--yellow); animation: nudge-x 0.8s steps(2) infinite; }
[dir='rtl'] .helpdesk .choice.on::before { animation-name: nudge-x-rtl; }
.helpdesk .desk { position: sticky; top: 100px; border: 3px solid var(--ink); box-shadow: var(--bevel), var(--frame-shadow); background: repeating-linear-gradient(180deg, #2c3a4d 0 15px, #283548 15px 16px); min-height: 380px; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.helpdesk .desk .answer { margin: 22px 22px 0; padding: 14px 16px; background: #fffdf8; color: #1d1726; border: 3px solid var(--ink); border-radius: 12px; font-size: 16px; line-height: 1.7; position: relative; box-shadow: 0 4px 0 rgba(11, 9, 16, 0.6); align-self: start; min-height: 96px; }
.helpdesk .desk .answer::after { content: ''; position: absolute; bottom: -10px; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: #fffdf8; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.helpdesk .desk .answer::before { content: '▌'; color: #c25fa8; animation: blink 0.9s steps(2) infinite; position: absolute; inset-inline-end: 10px; bottom: 6px; font-size: 12px; }
.helpdesk .desk.done .answer::before { content: none; }
.helpdesk .desk .who { display: grid; justify-items: center; padding: 10px 0 0; position: relative; }
.helpdesk .desk .who .sp { width: 80px; height: 96px; image-rendering: pixelated; background-repeat: no-repeat; background-size: 160px 96px; position: relative; z-index: 1; }
.helpdesk .desk .who .counter { width: 100%; height: 46px; margin-top: -26px; background: #8b5a3c; border-top: 6px solid #a8744e; box-shadow: inset 0 -6px 0 #6e4630; position: relative; z-index: 2; }
.helpdesk .desk .who .counter b { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font: 700 12px var(--mono); color: #ffe7a3; letter-spacing: 0.1em; }
@media (max-width: 860px) { .helpdesk { grid-template-columns: 1fr; } .helpdesk .desk { position: static; order: -1; min-height: 300px; } }

/* ------------------------------------------------------------- the leftovers */
.member q { quotes: none; }
.hero .note .hint { font-style: normal; }
.b-tabs button { border-width: 2px; }
.browser .b-top { border-bottom: 3px solid var(--ink); }
.real-table { display: none; }
@media (prefers-reduced-motion: reduce) {
  .callout, .world-cards .card, .city-facts .card { transform: none; }
}
.dayframe figcaption .behind { font-size: 11.5px; color: var(--dim); margin-top: 4px; }
.dayframe figcaption code { margin-top: -4px; }
@media (max-width: 640px) {
  .toasts { top: auto; bottom: 12px; inset-inline: 12px; width: auto; }
  .toast:not(:first-child) { display: none; }
  .toast { font-size: 13px; padding: 8px 12px; }
}