/* getbururu.com. Night Ink everywhere, one Sun Clay accent, the app's text
   colours, hairlines and radii (internal/ui/web/app.css in the app),
   Segoe UI Variable for text and a mono face only for the small uppercase
   labels. The home page's scene draws behind the page; every page reads
   the same without it. */

@font-face {
  font-family: "Label Mono";
  src: url("/assets/fonts/label-mono.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night-ink: #16151B;
  --sun-clay: #E37C45;
  --accent-hover: #EA8A56;
  --accent-press: #D46E38;
  --accent-text: #EE8A52;
  --surface: #1D1C23;
  --surface-2: #25242C;
  --text: #F3F2F5;
  --text-2: #A7A5B0;
  --text-3: #8C8A96;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --glass: rgba(29, 28, 35, .42);
  --glass-strong: rgba(29, 28, 35, .72);
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Ubuntu, Cantarell, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Ubuntu, Cantarell, sans-serif;
  --font-label: "Label Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-code: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4.4vw, 64px);
  --bar-h: 76px;
}

* { box-sizing: border-box; }
/* overflow-x: clip on the root only: on body it would make body the
   scroller, and the controllers chapter would no longer stay in place */
html { background: var(--night-ink); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 12px); overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--night-ink);
  color: var(--text);
  font: 400 1rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(227, 124, 69, .35); color: var(--text); }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 8px; z-index: 20; background: var(--text); color: var(--night-ink); padding: 8px 12px; border-radius: var(--r-md); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* small uppercase labels */
.label, .note, .os, .pad-name, .pill a, .sound, .menu summary, .hud, .toc .label {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* the header: the logo, a glass pill for the pages, sound and Wishlist */

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: var(--bar-h);
  padding: 0 var(--gutter);
}
.bar::before {
  content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(22, 21, 27, .8), rgba(22, 21, 27, 0));
}
.page .bar::before {
  inset: 0;
  background: rgba(22, 21, 27, .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.logo { display: block; line-height: 0; justify-self: start; border-radius: 6px; }
.logo img { height: 28px; width: auto; }
.glass, .pill, .sound, .menu summary, .menu nav, .btn-glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .25);
}
.pill { border-radius: 999px; }
.pill ul { display: flex; gap: 2px; margin: 0; padding: 5px; list-style: none; }
.pill a, .sound {
  display: block;
  font-size: 11.5px; line-height: 1; letter-spacing: .16em;
  text-decoration: none;
  color: var(--text-2);
  padding: 10px 16px;
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.pill a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.pill a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, .08); }
.bar-end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* Sound: the name stays "Sound", the dot (or the speaker's waves on a
   narrow screen) shows whether it is on. Its place is kept from the first
   paint; it shows once the scene runs. */
.sound { cursor: pointer; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px; visibility: hidden; }
[data-scene="live"] .sound { visibility: visible; }
[data-scene="still"] .sound, [data-scene="none"] .sound { display: none; }
.sound-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); transition: background .3s, box-shadow .3s; }
.sound[aria-pressed="true"] .sound-dot { background: var(--sun-clay); box-shadow: 0 0 10px rgba(227, 124, 69, .7); }
.sound-icon { display: none; width: 16px; height: 16px; }
.sound-icon .spk { fill: currentColor; }
.sound-icon .wave { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: .3; transition: opacity .3s, stroke .3s; }
.sound[aria-pressed="true"] .sound-icon .wave { opacity: 1; stroke: var(--sun-clay); }
.sound:hover { color: var(--text); }

/* the menu for narrow windows: a details element, no script */
.menu { position: relative; display: none; }
.menu summary {
  list-style: none; cursor: pointer;
  font-size: 11.5px; line-height: 1; letter-spacing: .16em; color: var(--text);
  padding: 12px 15px; border-radius: 999px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu nav {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 220px; padding: 8px; border-radius: var(--r-xl);
  background: var(--glass-strong);
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu nav a {
  display: block; padding: 14px 16px; border-radius: var(--r-md);
  color: var(--text); text-decoration: none; font: 600 18px/1.2 var(--font-display);
}
.menu nav a:hover { background: rgba(255, 255, 255, .06); }

/* ------------------------------------------------------------------ */
/* buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sun-clay);
  color: var(--night-ink);
  font: 600 15px/1 var(--font);
  text-decoration: none;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--accent-hover); color: var(--night-ink); }
.btn:active { background: var(--accent-press); }
.btn-small { font-size: 13.5px; padding: 11px 15px; }
.btn-glass, .btn-secondary { background: var(--glass); color: var(--text); border-color: var(--line-2); }
.btn-secondary { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.btn-glass:hover, .btn-secondary:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.actions { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin-top: 30px; }
.note { font-size: 11.5px; line-height: 1.3; letter-spacing: .16em; color: var(--text-3); }

/* ------------------------------------------------------------------ */
/* the home page: a fixed stage, and chapters scrolling over it */

/* The stage keeps the large viewport's height, so a phone's toolbar
   coming and going does not resize the scene. */
.stage { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.1s ease; }
[data-scene="live"] .stage canvas { opacity: 1; }
[data-scene="none"] .stage, [data-scene="still"] .stage { display: none; }

main { position: relative; z-index: 1; }
.chapter {
  position: relative;
  min-height: 115vh;
  display: grid; align-content: center; gap: 48px;
  padding: calc(var(--bar-h) + 40px) var(--gutter) 64px;
}
.chapter.hero { min-height: 100vh; min-height: 100svh; align-content: end; padding-bottom: clamp(56px, 11vh, 120px); }
.copy { position: relative; z-index: 1; max-width: min(560px, 46vw); }

/* Every chapter has a still of the scene. The first one shows from the
   first paint until the live scene has faded in over it. In the still
   version the one in view stays fixed behind the text. When the scene's
   script fails to load (data-scene="none") or scripts are off, each still
   sits in its own chapter. */
.still { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; overflow: hidden; }
.still img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
[data-scene="none"] .still { display: block; }
.still-first { display: block; transition: opacity 1.1s ease .15s; }
[data-scene="live"] .still-first { opacity: 0; }
[data-scene="still"] .still { position: fixed; inset: 0; display: none; opacity: 1; }
[data-scene="still"] .still.on { display: block; animation: still-in .8s ease both; }
@keyframes still-in { from { opacity: 0; } }

.label {
  font-size: 11.5px; line-height: 1; letter-spacing: .18em;
  color: var(--text-3);
  margin: 0 0 22px;
  display: flex; align-items: center; gap: 14px;
}
.label .num { color: var(--accent-text); }
/* over the scene the chapter labels are a little lighter, so passing dust
   cannot take them under 4.5:1 */
.chapter .label { color: #9C9AA6; }
.label .num::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--line-2); margin-left: 14px; vertical-align: middle; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
.chapter h1 {
  font-size: clamp(42px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -.025em;
  margin: 0 0 24px; max-width: 11ch;
}
.chapter h2 {
  font-size: clamp(32px, 3.9vw, 58px); line-height: 1.05; letter-spacing: -.022em;
  margin: 0 0 22px; max-width: 13ch;
}
.lead { font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.55; color: var(--text-2); max-width: 36ch; margin: 0; }
.aside { margin: 18px 0 0; font-size: 14.5px; color: var(--text-3); max-width: 40ch; }
.links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; }
.links a { display: inline-flex; align-items: center; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(238, 138, 82, .35); padding-bottom: 3px; }
.links a:hover { border-color: var(--accent-hover); }
/* a small drawn arrow, with no text for screen readers to read */
.links a::after { content: ""; width: 6px; height: 6px; margin-left: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }

/* the mods chapter's text sits over the out-of-focus controller: a soft
   shade of Night Ink behind it keeps the small labels readable */
.chapter.mods .copy::before {
  content: ""; position: absolute; inset: -90px -120px -60px; z-index: -1; pointer-events: none;
  background: radial-gradient(farthest-side at 42% 46%, rgba(22, 21, 27, .82), rgba(22, 21, 27, .66) 58%, rgba(22, 21, 27, 0));
}

/* mods: glass cards; the scene draws each mod's signature in the clear
   top part, the text sits on frosted glass below. Their rims take the
   light from where the scene's picture is (--rim-a, --rim-k). */
.cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1240px; border-radius: var(--r-xl); }
.card {
  position: relative;
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column;
  transform-origin: 50% 100%;
  will-change: transform;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(var(--rim-a, 330deg), rgba(227, 124, 69, .2), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .06) 70%, rgba(255, 255, 255, calc(.16 + .26 * var(--rim-k, .5))));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.sig {
  position: relative; height: 104px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(rgba(12, 11, 16, .55), rgba(12, 11, 16, .35));
  border-bottom: 1px solid var(--line);
}
.sig svg { position: absolute; inset: 12px 10px; width: calc(100% - 20px); height: calc(100% - 24px); transition: opacity .8s ease; }
.sig path { fill: none; stroke: var(--accent-text); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .85; }
/* with the scene running, the particles draw the lines */
[data-scene="live"] .home .sig svg { opacity: 0; }
.card-body {
  flex: 1;
  padding: 18px 20px 20px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: rgba(29, 28, 35, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.card h3 { font-size: 19px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
.card-body p { margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.os { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: 10.5px; letter-spacing: .16em; color: var(--text-3); }
.os li { display: inline-flex; align-items: center; gap: 8px; }
.os li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sun-clay); opacity: .8; }
.os-large { margin-top: 28px; flex-direction: column; gap: 14px; font-size: 12px; color: var(--text-2); }

/* controllers: a tall chapter that stays in place while the particles
   flow from one controller into the next. The scene sets --on (0 to 1)
   on each row as its controller comes and goes. */
.chapter.pads { display: block; align-content: normal; min-height: 240vh; padding: 0; }
.pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; align-content: center;
  padding: calc(var(--bar-h) + 24px) var(--gutter) 48px;
}
.pin .still { inset: 0; }
.pad-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; max-width: 460px; }
.pad-list li {
  display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);
  color: var(--text-2); font-size: 14.5px; line-height: 1.45;
}
.pad-name { font-size: 11px; letter-spacing: .16em; color: var(--text-3); }
[data-scene="live"] .pad-list li {
  color: color-mix(in srgb, var(--text-2) calc(var(--on, 0) * 100%), var(--text-3));
  border-top-color: color-mix(in srgb, rgba(227, 124, 69, .55) calc(var(--on, 0) * 100%), var(--line));
}
[data-scene="live"] .pad-list .pad-name { color: color-mix(in srgb, var(--accent-text) calc(var(--on, 0) * 100%), var(--text-3)); }

.chapter.soon { min-height: 110vh; }

/* the small signs in the corner: loading, a hint, the chapter */
.hud {
  position: fixed; right: var(--gutter); bottom: clamp(28px, 6vh, 64px); z-index: 5;
  font-size: 11px; line-height: 1; letter-spacing: .18em; color: var(--text-3);
  pointer-events: none;
}
.hud > span { display: none; }
html:not([data-scene]) .hud, [data-scene="none"] .hud, [data-scene="still"] .hud { display: none; }
[data-scene="loading"] .hud .load, [data-scene="live"]:not([data-loaded]) .hud .load { display: inline; }
[data-scene="live"][data-loaded] .hud .count { display: inline; }
[data-scene="live"][data-chapter="01"] .hud .count { display: none; }
@media (hover: hover) {
  [data-scene="live"][data-loaded][data-chapter="01"] .hud .hint { display: inline; }
}

/* ------------------------------------------------------------------ */
/* footer */

.foot {
  position: relative; z-index: 2;
  background: var(--night-ink);
  border-top: 1px solid var(--line);
  padding: 40px var(--gutter) 48px;
}
.foot-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.foot a { color: var(--text-2); text-decoration: none; font-size: 14.5px; }
.foot a:hover { color: var(--text); }
.fine { color: var(--text-3); font-size: 13px; line-height: 1.55; max-width: 78ch; margin: 22px 0 0; }

/* ------------------------------------------------------------------ */
/* the other pages: a still band from the scene, then the text and, on a
   wide screen, a list of the page's parts beside it */

.page main { padding-top: var(--bar-h); }
.band { position: absolute; top: 0; left: 0; right: 0; height: min(600px, 70vh); z-index: 0; pointer-events: none; overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); box-sizing: content-box; }
.page-head { padding-top: clamp(64px, 14vh, 150px); padding-bottom: 40px; }
.page-head h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.03; letter-spacing: -.025em; margin: 0 0 20px; max-width: 14ch; }
.page-head .lead { max-width: 44ch; }
.page-head .label { margin-bottom: 26px; }
.doc { display: grid; grid-template-columns: minmax(0, 68ch) minmax(180px, 240px); justify-content: space-between; gap: 64px; align-items: start; }
.toc { position: sticky; top: calc(var(--bar-h) + 36px); margin-top: 64px; padding: 18px 20px 20px; border-left: 1px solid var(--line); }
.toc .label { font-size: 10.5px; margin: 0 0 16px; color: var(--text-3); }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.toc a { color: var(--text-2); text-decoration: none; font-size: 14.5px; line-height: 1.35; display: block; }
.toc a:hover { color: var(--text); }
.platform {
  margin-top: 40px; padding: 26px 28px; max-width: 640px;
  border-radius: var(--r-xl);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .3);
}
.platform h2 { margin: 0 0 8px; font-size: 22px; }
.platform p { margin: 0; color: var(--text-2); }
.platform .actions { margin-top: 20px; }
.prose { max-width: 68ch; padding-bottom: 96px; font-size: 17px; line-height: 1.65; color: var(--text-2); }
/* section numbers as small labels, for the eye only */
.page:not(.legal) .prose { counter-reset: part; }
.page:not(.legal) .prose > h2::before {
  counter-increment: part;
  content: counter(part, decimal-leading-zero) / "";
  display: block; margin-bottom: 12px;
  font: 500 11.5px/1 var(--font-label); letter-spacing: .18em; color: var(--accent-text);
}
.prose h2 { color: var(--text); font-size: clamp(25px, 2.3vw, 31px); line-height: 1.2; letter-spacing: -.015em; margin: 64px 0 16px; scroll-margin-top: calc(var(--bar-h) + 20px); }
.prose h3 { color: var(--text); font-size: 19px; line-height: 1.3; margin: 34px 0 10px; scroll-margin-top: calc(var(--bar-h) + 20px); }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: 0 0 8px; }
.prose li::marker { color: var(--text-3); }
.prose strong { color: var(--text); font-weight: 600; }
.prose code, .card code { font: 14.5px/1.4 var(--font-code); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 6px; overflow-wrap: anywhere; }
.prose .actions { margin-top: 28px; }
.small { font-size: 14px; color: var(--text-3); }
.card.plain {
  padding: 22px 24px; border-radius: var(--r-xl);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  display: block;
  will-change: auto;
}
.card.plain::before { display: none; }
.card.plain .sig { height: 80px; margin: -22px -24px 18px; }
.card.plain h3 { margin: 0 0 10px; }
.card.plain p { font-size: 15px; margin: 0 0 8px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0 18px; }
details { margin: 18px 0; }
.prose details > summary { cursor: pointer; color: var(--text); font-weight: 600; }
.game-list { columns: 2; column-gap: 32px; margin-top: 14px; }
.draft { margin-top: 18px; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid rgba(229, 174, 71, .28); background: rgba(229, 174, 71, .1); color: #E5AE47; max-width: 640px; }
.draft p { margin: 0; }
.draft strong { color: #F1C470; }
mark.todo { background: rgba(229, 174, 71, .16); color: #F1C470; border-radius: 4px; padding: 0 4px; }
.not-found { padding-top: clamp(80px, 18vh, 200px); padding-bottom: 120px; }
.not-found img { margin-bottom: 30px; }
.not-found h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 14px; }

/* ------------------------------------------------------------------ */
/* narrower windows, tablets standing up, and phones */

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .doc { display: block; }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .bar { grid-template-columns: auto 1fr; }
  .pill { display: none; }
  .menu { display: block; }
  .sound .sound-label, .sound .sound-dot { display: none; }
  .sound .sound-icon { display: block; }
  .sound { padding: 12px; color: var(--text); }
}
/* a tall window (a tablet standing up): the text sits low, the picture above it */
@media (orientation: portrait) and (min-width: 721px) {
  .chapter { align-content: end; padding-bottom: 9vh; }
  .chapter.pads { padding: 0; }
  .pin { align-content: end; padding-bottom: 7vh; }
  .copy { max-width: 600px; }
}
@media (max-width: 720px) {
  :root { --bar-h: 64px; }
  .bar { padding: 0 16px; gap: 10px; }
  .bar-end { gap: 8px; }
  .logo img { height: 24px; }
  .wide-only { display: none; }
  .copy { max-width: none; }
  .chapter.mods .copy::before { inset: -72px -16px -24px; background: radial-gradient(farthest-side at 50% 42%, rgba(22, 21, 27, .86), rgba(22, 21, 27, .7) 62%, rgba(22, 21, 27, 0)); }
  .chapter { min-height: 100vh; min-height: 100svh; align-content: end; padding: calc(var(--bar-h) + 24px) 16px 12svh; gap: 28px; }
  .chapter.hero { padding-bottom: 9svh; }
  .chapter h1 { font-size: clamp(36px, 10.4vw, 48px); margin-bottom: 18px; }
  .chapter h2 { font-size: clamp(29px, 8.4vw, 38px); margin-bottom: 16px; }
  .lead { font-size: 16.5px; }
  .actions { margin-top: 24px; }
  .still img { object-position: 50% 0%; }
  .chapter.mods { align-content: end; }
  .cards {
    display: flex; overflow-x: auto; gap: 12px;
    margin: 0 -16px; padding: 0 16px 6px;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 76%; scroll-snap-align: start; }
  .sig { height: 88px; }
  .pin { padding: calc(var(--bar-h) + 16px) 16px 9svh; align-content: end; }
  .pad-list { margin-top: 20px; }
  .pad-list li { grid-template-columns: 104px 1fr; padding: 9px 0; font-size: 14px; }
  .pads h2 { font-size: clamp(27px, 7.6vw, 34px); }
  /* with the scene running, only the controller on show keeps its line on
     the screen; the others stay there for screen readers */
  [data-scene="live"] .pads[data-step="0"] li:not(:nth-child(1)) > .pad-what,
  [data-scene="live"] .pads[data-step="1"] li:not(:nth-child(2)) > .pad-what,
  [data-scene="live"] .pads[data-step="2"] li:not(:nth-child(3)) > .pad-what { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hud { right: 16px; bottom: 18px; }
  [data-scene="live"] .hud .count { display: none; }
  .foot { padding: 32px 16px 40px; }
  .band { height: 300px; }
  .band img { object-position: 50% 50%; }
  .page-head { padding-top: 48px; }
  .band ~ .page-head, .band ~ .not-found { padding-top: 220px; }
  .prose { font-size: 16.5px; }
  .pair { grid-template-columns: 1fr; }
  .game-list { columns: 1; }
  .platform { padding: 22px 20px; }
}
@media (max-width: 380px) {
  .bar-end .btn-small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage, .sound { display: none; }
  .still { display: block; }
  .still-first, [data-scene="live"] .still-first { opacity: 1; transition: none; }
  [data-scene="still"] .still.on { animation: none; }
  * { scroll-behavior: auto; }
}

/* ?bare: the stage alone, for rendering the stills; the page keeps its
   layout (the scene places its picture beside the text) but is not drawn */
[data-bare] .bar, [data-bare] .sound, [data-bare] main, [data-bare] .hud, [data-bare] .foot { visibility: hidden; }
[data-bare] .stage canvas, [data-instant] .stage canvas, [data-instant] .still-first { transition: none; }