/* used the RL ufonts,
   warm  page accent, and the DelMar loading wheel in the main view */

/* the real Rocket Racing typeface (Psyonix RL Fonts) */
@font-face { font-family:"RL Display"; src:url(fonts/RLLarge-D800.woff2) format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Display"; src:url(fonts/RLLarge-E900.woff2) format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Text"; src:url(fonts/RLSmall-Regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Text"; src:url(fonts/RLSmall-Medium.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Text"; src:url(fonts/RLSmall-Semibold.woff2) format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"RL Text"; src:url(fonts/RLSmall-Bold.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --bg:      #06080b;
  --bg-2:    #0a0d12;
  --panel:   rgba(255,255,255,0.022);
  --ink:     #eef1f3;
  --dim:     #9aa4ad;
  --faint:   #69737d;
  --line:    rgba(255,255,255,0.085);
  --line-2:  rgba(255,255,255,0.14);
  --accent:  #ff6a2b;
  --disp: "RL Display", "Arial Narrow", system-ui, sans-serif;
  --text: "RL Text", ui-sans-serif, system-ui, sans-serif;
  --chrome-h: 60px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* small racing car on users cursor; the clickable thing at the car's centre so
     clicks register where the icon visually sits hopefully,(cuz nose tip felt inaccurate for some reason) */
  --cur-car: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDI2IDMwIj48ZyBzdHJva2U9IiMwYTBiMGUiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSIyLjQiIHk9IjcuNSIgd2lkdGg9IjQuMiIgaGVpZ2h0PSI2LjQiIHJ4PSIxLjgiIGZpbGw9IiMwYTBiMGUiLz48cmVjdCB4PSIxOS40IiB5PSI3LjUiIHdpZHRoPSI0LjIiIGhlaWdodD0iNi40IiByeD0iMS44IiBmaWxsPSIjMGEwYjBlIi8+PHJlY3QgeD0iMi40IiB5PSIxNy42IiB3aWR0aD0iNC4yIiBoZWlnaHQ9IjYuNCIgcng9IjEuOCIgZmlsbD0iIzBhMGIwZSIvPjxyZWN0IHg9IjE5LjQiIHk9IjE3LjYiIHdpZHRoPSI0LjIiIGhlaWdodD0iNi40IiByeD0iMS44IiBmaWxsPSIjMGEwYjBlIi8+PHBhdGggZD0iTTEzIDEuNCBDMTQuNSAyLjggMTUuNiA1LjYgMTUuNiA5LjMgTDE1LjYgMjMuNCBDMTUuNiAyNi43IDE0LjQgMjguMyAxMyAyOC4zIEMxMS42IDI4LjMgMTAuNCAyNi43IDEwLjQgMjMuNCBMMTAuNCA5LjMgQzEwLjQgNS42IDExLjUgMi44IDEzIDEuNCBaIiBmaWxsPSIjZmY2YTJiIi8+PHJlY3QgeD0iNy44IiB5PSI4LjQiIHdpZHRoPSIxMC40IiBoZWlnaHQ9IjIuNCIgcng9IjEuMiIgZmlsbD0iIzBhMGIwZSIgc3Ryb2tlPSJub25lIi8+PGVsbGlwc2UgY3g9IjEzIiBjeT0iMTYuMiIgcng9IjEuOSIgcnk9IjIuNyIgZmlsbD0iIzBhMGIwZSIgc3Ryb2tlPSJub25lIi8+PC9nPjwvc3ZnPgo=") 13 15;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--chrome-h) + 24px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--text); font-size: 16.5px; line-height: 1.75; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
::selection { background: rgba(255,106,43,0.26); }
/* racing car cursor site everywhere; clickable things keep it (pointer fallback),
   text fields keep a caret so typing feels normal. IsIgnored on touch devices */
body { cursor: var(--cur-car), auto; }
a, button, [role="button"], summary, .btn, .sc, .comp-card, .feature-media, .pg, .support-btn { cursor: var(--cur-car), pointer; }
input, textarea, select, [contenteditable="true"] { cursor: text; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* site everywhere liquid glass ambient bg (basically behind everything) */
#liquid-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 2.4s ease; }
body.revealed #liquid-bg { opacity: 1; }
#liquid-fallback { position: fixed; inset: 0; z-index: -3; background: url(media/liquid.webp) center / cover; filter: brightness(0.26) saturate(0.82) contrast(1.05); animation: liquidpan 100s ease-in-out infinite alternate; }
@keyframes liquidpan { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.16) translate(-2.4%, -1.8%); } }

/* progress */
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
}

/* chrome top */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; height: var(--chrome-h); z-index: 80;
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { color: var(--accent); display: inline-flex; }
.brand-name { font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: 0.005em; }
.brand-name em { color: var(--dim); font-style: normal; font-weight: 400; }
.chrome-right { display: flex; align-items: center; gap: 18px; }
.chrome-here { font-size: 12.5px; color: var(--dim); max-width: 42vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: none; border: 0; font-family: var(--text); padding: 8px 0; cursor: pointer; transition: color .2s; }
.chrome-here:hover { color: var(--accent); }

/* skip-to-content (via keyboard only) */
.skip-link { position: fixed; top: -52px; left: 16px; z-index: 200; background: var(--accent); color: #0a0b0e; font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 12px; }
.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; }
.chrome-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--ink); font-family: var(--text); font-weight: 500; font-size: 13px; padding: 8px 2px; transition: color .2s; }
.chrome-btn:hover { color: var(--accent); }
/* header search,not just an icon but looks tapable */
#search-btn { padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--dim); position: relative; z-index: 1; }
#search-btn:hover { border-color: var(--accent); color: var(--accent); }
/* this gold glow mythic around the search button so users can find it: base radial + particle canvas
   particles fade with distance so the canvas edge never shows as a square, so it comes basically from the button self */
.sbtn-wrap { position: relative; display: inline-flex; }
.sbtn-wrap::before { content: ""; position: absolute; left: 50%; top: 55%; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(255,176,74,0.22), rgba(255,150,40,0.08) 45%, transparent 72%); }
.sbtn-glow { position: absolute; left: 50%; top: 55%; width: 180px; height: 150px; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.chrome-btn kbd, .search-hint kbd { font-family: var(--text); font-size: 10px; padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--dim); }
.chrome-index::before { content: ""; width: 15px; height: 1px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }

/* index overlay */
#scrim { position: fixed; inset: 0; z-index: 95; background: rgba(3,4,6,0.55); opacity: 0; pointer-events: none; transition: opacity .3s; }
#scrim.open { opacity: 1; pointer-events: auto; }
.index-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 92vw); z-index: 100;
  background: var(--bg-2); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .5s var(--ease-out); overflow-y: auto; overscroll-behavior: contain;
}
.index-overlay.open { transform: translateX(0); }
.index-inner { padding: calc(var(--chrome-h) + 32px) 40px 64px; }
.index-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.index-kicker { font-family: var(--disp); font-weight: 800; font-size: 20px; }
.index-count { font-size: 11px; color: var(--faint); }
.index-list { display: flex; flex-direction: column; }
#index-filter { width: 100%; margin: 16px 0 2px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: var(--text); font-size: 13px; outline: none; transition: border-color .2s; }
#index-filter:focus { border-color: var(--accent); }
#index-filter::placeholder { color: var(--faint); }
.index-sep { font-size: 11px; color: var(--faint); margin: 30px 0 6px; }
.nav-sec { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; color: var(--dim); border-bottom: 1px solid var(--line); transition: color .18s, padding-left .2s var(--ease-out); }
.nav-sec:hover { color: var(--ink); padding-left: 8px; }
.nav-sec.active { color: var(--accent); }
.nav-num { font-family: var(--text); font-weight: 500; font-size: 12px; color: var(--faint); min-width: 24px; font-variant-numeric: tabular-nums; }
.nav-sec:hover .nav-num, .nav-sec.active .nav-num { color: var(--accent); }
.nav-label { font-family: var(--disp); font-weight: 800; font-size: 17px; line-height: 1.2; }

/* main / typography */
#main { padding-top: var(--chrome-h); position: relative; z-index: 2; }
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 32px; }
.prose { max-width: 46rem; margin: 0 auto; padding: 80px 32px 128px; }

.kicker { font-family: var(--text); font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.sec-head { margin-bottom: 40px; }
.sec-head h1 { font-family: var(--disp); font-weight: 900; font-size: clamp(31px, 5vw, 52px); line-height: 1.02; letter-spacing: -0.01em; margin: 0; }

.prose h2, .prose h3, .prose h4 { font-family: var(--disp); letter-spacing: -0.005em; scroll-margin-top: calc(var(--chrome-h) + 24px); }
.prose h2 { font-size: 26px; font-weight: 800; margin: 64px 0 20px; padding-top: 30px; border-top: 1px solid var(--line); }
.prose h3 { font-size: 20px; font-weight: 800; margin: 42px 0 12px; }
.prose h4 { font-size: 13px; font-weight: 600; font-family: var(--text); margin: 30px 0 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.prose p { margin: 0 0 20px; }
.prose strong { font-weight: 600; color: #fff; }
.prose em { color: #dfe4e8; }
.prose a:not(.btn) { color: var(--accent); border-bottom: 1px solid rgba(255,106,43,0.32); transition: border-color .2s; }
.prose a:not(.btn):hover { border-bottom-color: var(--accent); }
.prose h2 a, .prose h3 a, .prose h4 a { color: inherit; border: 0; }
.prose h2 a:hover, .prose h3 a:hover { color: var(--accent); }

.prose ul, .prose ol { margin: 0 0 20px; padding-left: 24px; }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--faint); font-family: var(--text); font-size: 13px; }
.prose blockquote { margin: 26px 0; padding: 4px 24px; border-left: 2px solid var(--accent); color: #dbe0e5; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 0.85em; background: rgba(255,255,255,0.055); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; color: #ffb083; overflow-wrap: anywhere; word-break: break-word; }
.prose pre { background: #04050a; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; overflow-x: auto; margin: 26px 0; }
.prose pre code { background: none; border: 0; padding: 0; color: #ccd4de; font-size: 13px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 46px 0; }

.prose table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 13.5px; display: block; overflow-x: auto; }
.prose td, .prose th { min-width: 5.5em; }
.prose td a, .prose th a { white-space: nowrap; }
.prose thead th { text-align: left; font-family: var(--disp); font-weight: 800; color: #fff; padding: 11px 14px; border-bottom: 2px solid var(--line-2); }
.prose tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--dim); vertical-align: top; }
.prose tbody tr:hover td { color: var(--ink); }

.prose .fig { margin: 36px 0; }
.prose .fig img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: #0c0d18; }
.prose figcaption { margin-top: 12px; font-size: 12.5px; color: var(--faint); padding-left: 16px; border-left: 2px solid var(--line); }
.prose .datamine-clip { margin: 36px 0; clear: both; }
.prose .datamine-clip video { display: block; width: 100%; height: auto; min-width: 0; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); background: #0c0d18; }
.prose details { margin: 24px 0; border: 1px solid var(--line); border-radius: 8px; padding: 2px 18px; }
.prose summary { cursor: pointer; font-weight: 600; padding: 13px 0; font-family: var(--disp); }
.prose summary:hover { color: var(--accent); }
audio.track { display: block; width: 100%; max-width: 440px; margin: 10px 0 4px; height: 36px; }

.footnotes { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.footnotes hr { display: none; }
/* the footnote plugin's own separator would double the .footnotes border top, this prevents it */
.prose hr.footnotes-sep { display: none; }
.footnotes ol { padding-left: 20px; }
.footnotes li { margin: 6px 0; overflow-wrap: anywhere; }
.footnote-ref a { border: 0; font-size: 0.78em; padding: 0 2px; color: var(--accent); }
.footnote-backref { border: 0; }

/* pager thing */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 80px; }
.pg { display: flex; flex-direction: column; gap: 7px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s, background .2s; }
.pg:hover { border-color: var(--line-2); background: var(--panel); }
.pg span { font-family: var(--text); font-size: 11.5px; color: var(--faint); }
.pg b { font-family: var(--disp); font-weight: 800; font-size: 16px; line-height: 1.2; }
.pg-next { text-align: right; }

/* key art header, jump nav, floating figs */
.sec-hero { position: relative; min-height: clamp(520px, 62vh, 780px); display: flex; align-items: flex-end; }
/* key art fades into the liquid background with a vertical mask,
   same as the home page */
.sec-hero-art { position: absolute; inset: 0; background-image: var(--img); background-size: cover; background-position: center 34%; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 98%); }
/* darken behind the title only and a soft vignette; made it to keep focus so
   key art shows, faded out before the bottom edge */
.sec-hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(92% 90% at 20% 106%, rgba(6,8,11,0.64), transparent 58%),
  linear-gradient(180deg, rgba(6,8,11,0.28) 0%, transparent 44%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 97%); }
.sec-hero-inner { position: relative; z-index: 2; max-width: 64rem; width: 100%; margin: 0 auto; padding: 0 32px 34px; }
.sec-hero .kicker { margin-bottom: 12px; }
.sec-hero h1 { font-family: var(--disp); font-weight: 900; font-size: clamp(30px, 5.2vw, 56px); line-height: 1.0; letter-spacing: -0.015em; margin: 0; max-width: 20ch; text-shadow: 0 4px 30px rgba(0,0,0,0.6); }

.section-shell { max-width: 64rem; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 50px; align-items: start; }
.section-shell.no-aside { grid-template-columns: minmax(0, 46rem); justify-content: center; }
.section-shell .prose { max-width: none; padding: 44px 0 120px; margin: 0; }
.jump-nav { position: sticky; top: calc(var(--chrome-h) + 28px); padding-top: 48px; max-height: calc(100vh - var(--chrome-h) - 56px); overflow-y: auto; overscroll-behavior: contain; }
.jump-title { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.jump-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.jump-list a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 12.5px; color: var(--dim); line-height: 1.35; transition: color .2s, border-color .2s; }
.jump-list a:hover { color: var(--ink); border-left-color: var(--accent); }
.jump-list a.active { color: var(--accent); border-left-color: var(--accent); }

/* floating figs: image on the side, text wraps beside it .e.t.c. */
@media (min-width: 940px) {
  .prose .fig { float: right; width: 48%; margin: 6px 0 24px 34px; }
  .prose .fig.reveal-xl { float: left; margin: 6px 34px 24px 0; }
  .prose h2, .prose h3 { clear: both; }
}
.reveal-xl { transform: translateX(-38px); }
.reveal-xr { transform: translateX(38px); }
.reveal-xl.is-in, .reveal-xr.is-in { transform: none; }

/* custom inline marks (no emojis) Some generated text by crawlers contains emojis, this prevents it to look like an emoji */
.mk { display: inline-flex; width: 0.92em; height: 0.92em; vertical-align: -0.1em; margin: 0 0.08em; }
.mk svg { width: 100%; height: 100%; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mk-ok svg { stroke: #63c98a; }
.mk-warn svg { stroke: var(--accent); }
.mk-warn svg circle { fill: var(--accent); stroke: none; }
.mk-star svg { fill: var(--accent); stroke: none; }
.mk-no svg { stroke: #e2574c; }

/* GFM task list checkboxes (rendered as inline SVG boxes by the generated machine text/build) */
.prose li.task { list-style: none; }
.task-box { display: inline-flex; width: 0.95em; height: 0.95em; vertical-align: -0.12em; margin-right: 0.5em; }
.task-box svg { width: 100%; height: 100%; fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
li.task-done .task-box svg { stroke: #63c98a; }

/* per sections search ( made a scope to the open section only) */
.sec-search { position: relative; margin: 0 0 34px; }
.sec-search-ico { position: absolute; left: 15px; top: 14px; width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
#sec-search-input { width: 100%; padding: 13px 16px 13px 44px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-family: var(--text); font-size: 14px; outline: none; transition: border-color .2s, background .2s; }
#sec-search-input:focus { border-color: var(--accent); background: rgba(255,255,255,0.03); }
#sec-search-input::placeholder { color: var(--faint); }
.sec-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: #0a0d13; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,0.45); max-height: 62vh; overflow: hidden auto; display: none; }
.sec-search-results.open { display: block; }
.ss-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent; padding: 12px 16px; cursor: pointer; }
.ss-item:hover, .ss-item.sel { background: var(--panel); border-left-color: var(--accent); }
.ss-head { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.ss-snip { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.45; font-family: var(--text); }
.ss-snip mark, .sr-snip mark { background: rgba(255,106,43,0.24); color: #fff; border-radius: 2px; }
.ss-empty { padding: 16px; color: var(--faint); font-size: 13px; }

/* flash when the section search jumps to a match for better visibility */
.hit-flash { animation: hitflash 2.4s ease; border-radius: 5px; }
@keyframes hitflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,106,43,0); background: transparent; } 12%, 45% { box-shadow: 0 0 0 8px rgba(255,106,43,0.13); background: rgba(255,106,43,0.13); } }

/* "buy me an Ice Tea" */
.support { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; padding: 30px 34px; margin-top: 100px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.support-ico { flex: none; color: var(--accent); width: 42px; height: 42px; }
.support-ico svg { width: 100%; height: 100%; }
.support-text { flex: 1; min-width: 0; }
.support-text h3 { font-family: var(--disp); font-weight: 800; font-size: 21px; margin: 0 0 6px; }
.support-text p { font-size: 13.5px; color: var(--dim); line-height: 1.6; margin: 0; max-width: 54ch; }
.support-btn { flex: none; }
/* "are u sure" shown in the Ice Tea card when the donation button is clicked */
.support-msg { flex-basis: 100%; width: 100%; margin: 4px 0 0; font-size: 17px; font-weight: 700; color: #ff5a5a; text-align: center; letter-spacing: 0.01em; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .3s ease, transform .3s var(--ease-out); }
.support-msg.show { opacity: 1; visibility: visible; transform: none; }

/* screen shake for the support button's "Are you Sure?" step (the form
   cooldown triggers it too); soooo the second click opens Kofi normally now */
@keyframes screenshake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, -4px); }
  20% { transform: translate(7px, 3px); }
  30% { transform: translate(-5px, 5px); }
  40% { transform: translate(6px, -6px); }
  50% { transform: translate(-7px, 2px); }
  60% { transform: translate(5px, 5px); }
  70% { transform: translate(-4px, -5px); }
  80% { transform: translate(6px, 3px); }
  90% { transform: translate(-3px, -2px); }
}
/* shake only the content wrapper, dont shake everything, because there is a bug with the bg so the fixed bg canvas is
   not reparented. that caused the giant background stretch when tested on localhost */
#main.shake { animation: screenshake 0.6s cubic-bezier(.36,.07,.19,.97) both; will-change: transform; }

.maker { color: var(--accent); border-bottom: 1px solid rgba(255,106,43,0.32); transition: border-color .2s; }
.maker:hover { border-bottom-color: var(--accent); }
.foot-links { font-size: 12px; color: var(--faint); letter-spacing: 0.02em; margin-top: 10px; }
.foot-links a { color: var(--dim); }
.foot-links a:hover { color: var(--accent); }
/* machine generated disclosure line in the footers */
.foot-ai { font-size: 12px; color: var(--faint); line-height: 1.6; margin-top: 10px; max-width: 74ch; }
.foot-ai a { color: var(--dim); border-bottom: 1px solid rgba(255,106,43,0.28); }
.foot-ai a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* reader contribution form */
.contribute { margin: 96px 0 0; padding: 40px 34px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); scroll-margin-top: 90px; }
.contribute-head { max-width: 48rem; }
.contribute-kick { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.contribute-head h2 { font-family: var(--disp); font-weight: 900; font-size: clamp(23px, 3vw, 31px); line-height: 1.08; margin: 12px 0 12px; }
.contribute-head p { color: var(--dim); font-size: 14.5px; line-height: 1.7; margin: 0; }
.contribute-form { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cf-field > span { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.cf-field em { font-style: normal; font-weight: 400; color: var(--faint); }
.cf-field input, .cf-field select, .cf-field textarea { width: 100%; font-family: var(--text); font-size: 14px; color: var(--ink); background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--line-2); border-radius: 9px; padding: 11px 13px; outline: none; transition: border-color .2s, background .2s; }
.cf-field textarea { resize: vertical; min-height: 112px; line-height: 1.55; }
.cf-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { border-color: var(--accent); background: color-mix(in srgb, var(--bg) 38%, transparent); }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--faint); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.cf-status { font-size: 13px; font-weight: 600; }
.cf-status.cf-ok { color: #57d29a; }
.cf-status.cf-err, .cf-status.cf-warn { color: var(--accent); }
.cf-status.cf-sending { color: var(--dim); }
.cf-note { font-size: 12px; color: var(--faint); margin: 2px 0 0; }
@media (max-width: 720px) { .cf-row { grid-template-columns: 1fr; } .contribute { padding: 30px 22px; } }

/* essential cookie notice in corner card that never blocks the page from scrolling cuz its not mandatory */
.cookie-gate { position: fixed; right: 18px; bottom: 18px; z-index: 200; max-width: 380px; padding: 0; pointer-events: none; }
.cookie-gate[hidden] { display: none; }
.cookie-card { pointer-events: auto; padding: 18px 20px; background: #ffffff; color: #1b1b1b; border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,0.45); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.cookie-card h2 { font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.3; margin: 0 0 8px; color: #1b1b1b; letter-spacing: 0; }
.cookie-card p { font-family: inherit; font-size: 12.5px; line-height: 1.55; color: #444; margin: 0 0 14px; }
.cookie-card a { color: #1a56db; text-decoration: underline; }
.cookie-btn { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 600; font-size: 13px; padding: 8px 18px; border-radius: 6px; border: 0; background: #1b1b1b; color: #fff; cursor: pointer; transition: background .2s; }
.cookie-btn:hover { background: #333; }
.cookie-gate a, .cookie-gate button { cursor: pointer; }
@media (max-width: 520px) { .cookie-gate { left: 14px; right: 14px; bottom: 14px; max-width: none; } }

/* click a content image to view it full size EVERYWHERE */
.prose img { cursor: zoom-in; }
.prose a img { cursor: pointer; }
.lightbox { position: fixed; inset: 0; z-index: 190; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; background: rgba(3,5,8,0.93); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 86vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 24px 80px rgba(0,0,0,0.65); }
.lightbox-cap { color: var(--dim); font-size: 13px; line-height: 1.5; text-align: center; max-width: 74ch; }

.legal { padding-bottom: 100px; }
.legal .prose { padding-top: 40px; }

/* HOME */
/* Main page with those RR key art loading screens, */
.hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--chrome-h) + 36px) 32px 84px; text-align: center; overflow-x: clip; }
/* machine generated disclosure pinned to the top of the mani page (hero) */
.hero-ai { position: absolute; top: calc(var(--chrome-h) + 14px); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: flex-start; gap: 11px; width: max-content; max-width: min(93vw, 720px); padding: 9px 16px 9px 10px; text-align: left; background: rgba(6,8,11,0.55); border: 1px solid rgba(255,255,255,0.13); border-radius: 13px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 34px rgba(0,0,0,0.42); }
.hero-ai-tag { flex: none; margin-top: 1px; font-family: var(--text); font-weight: 700; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: #0a0b0e; background: var(--accent); padding: 4px 9px; border-radius: 999px; }
.hero-ai p { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.86); }
.hero-ai-link { color: var(--accent); font-weight: 600; border-bottom: 1px solid rgba(255,106,43,0.4); transition: border-color .2s; }
.hero-ai-link:hover { border-bottom-color: var(--accent); }
.hero-ai-motto { color: rgba(255,255,255,0.6); font-style: italic; }
@media (max-width: 640px) { .hero-ai { top: calc(var(--chrome-h) + 10px); gap: 9px; padding: 8px 13px 8px 9px; } .hero-ai p { font-size: 11.5px; } }
/* the clip wrapper carries the dissolve mask (straight fallback here, swapped
   for a generated noisy edge at runtime) and contains the ken burns overdraw */
.hero-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 54%, transparent 96%); }
.hero-art { position: absolute; inset: 0; background: url(media/hero-keyart.webp) center/cover no-repeat; opacity: 0; transition: opacity 1.6s ease; }
body.revealed .hero-art { opacity: 1; }
/* confetti */
.hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* keep the middle readable but let the image live to its dissolve line; the
   scrim itself must dissolve too or it paints a straight seam at the boundary and looks off a bit */
.hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(78% 60% at 50% 40%, rgba(6,8,11,0.24), rgba(6,8,11,0.44) 60%, transparent 82%),
  linear-gradient(180deg, rgba(6,8,11,0.55) 0%, transparent 30%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 76%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 76%); }
.hero-inner { position: relative; z-index: 3; max-width: 46rem; width: 100%; }
/* the wordmark with the DelMar loading indicator v2 as the O of ROCKET */
.hero-logo-wrap { position: relative; width: clamp(240px, 32vw, 380px); margin: 0 auto 26px; filter: drop-shadow(0 6px 30px rgba(0,0,0,0.75)); }
.hero-logo { display: block; width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; }
/* playful speech bubble that pops from the logo (de Blob squish, low poly bob) */
.logo-bubble { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); z-index: 6; pointer-events: none; }
.logo-bubble.show { animation: bubbleFloat 1.6s .55s steps(7) infinite; }
.lb-inner { display: inline-block; transform-origin: 50% 128%; transform: scale(0); opacity: 0; max-width: min(74vw, 250px); padding: 9px 15px; border-radius: 15px; background: #fbfbfb; color: #0d0f13; font-family: var(--text); font-weight: 700; font-size: 12.5px; line-height: 1.32; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.lb-inner::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fbfbfb; margin-top: -1px; }
.logo-bubble.show .lb-inner { animation: bubblePop .55s cubic-bezier(.34,1.7,.5,1) forwards; }
.logo-bubble.hide .lb-inner { animation: bubbleHide .34s ease-in forwards; }
@keyframes bubblePop {
  0% { transform: scale(0) rotate(-5deg); opacity: 0; }
  50% { transform: scale(1.16) rotate(3deg); opacity: 1; }
  68% { transform: scale(0.9) rotate(-2deg); }
  84% { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes bubbleHide {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(0) rotate(4deg); opacity: 0; }
}
@keyframes bubbleFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}
.logo-full { display: none; }
/* the cut out ellipse in the wordmark: center (94.5, 31.2), rx 32.2, ry 31.6 of 328x128 */
.hero-o { position: absolute; left: 19.0%; top: 0; width: 19.63%; height: 49.1%; }
#hero-canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease .2s; }
body.revealed #hero-canvas { opacity: 1; }
/* no JS or no WebGPU: show the untouched original wordmark, its solid O is the fallback */
.no-js .hero-o, .hero-logo-wrap.no-webgpu .hero-o { display: none; }
.no-js .logo-cut, .hero-logo-wrap.no-webgpu .logo-cut { display: none; }
.no-js .logo-full, .hero-logo-wrap.no-webgpu .logo-full { display: block; }
.hero-tag { font-size: clamp(15px, 2.1vw, 19px); color: #fff; max-width: 38rem; margin: 0 auto 38px; text-shadow: 0 2px 22px rgba(0,0,0,0.65); }
.wide { max-width: 72rem; margin: 0 auto; padding: 0 32px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* the big hero search field in middle */
.hero-search { position: relative; width: min(90vw, 440px); margin: 32px auto 0; }
.hs-field { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; height: 52px; padding: 0 12px 0 15px; border-radius: 13px; background: rgba(10,12,16,0.62); border: 1px solid rgba(255,190,110,0.28); box-shadow: 0 10px 34px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.03); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: text; transition: border-color .25s, box-shadow .25s; }
.hs-field:hover, .hs-field:focus-within { border-color: rgba(255,190,110,0.62); box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 28px rgba(255,150,50,0.2); }
.hs-ico { flex: none; width: 19px; height: 19px; color: rgba(255,205,140,0.85); }
.hs-field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-family: var(--text); font-size: 15px; color: var(--ink); }
.hs-field input::placeholder { color: rgba(255,255,255,0.44); }
.hs-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hs-kbd { flex: none; font-family: var(--text); font-size: 11px; color: var(--dim); background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 7px; }
/* pulse the contribution form when a reader jumps to it from a "contribute" link */
@keyframes cfPulse { 0% { border-color: var(--accent); box-shadow: 0 0 0 0 rgba(255,106,43,0.45); } 100% { border-color: var(--line); box-shadow: 0 0 0 22px rgba(255,106,43,0); } }
.contribute.cf-highlight { animation: cfPulse 1.7s ease; }
/* structured "island" buttons with a nested icon and a hover zoom to recreate this minimalistic professional effect I saw on cool websites */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 11px 13px 11px 24px; border-radius: 999px; font-family: var(--text); font-weight: 600; font-size: 14px; border: 1px solid var(--line-2); color: var(--ink); transition: transform .25s var(--ease-out), border-color .2s, background .2s; }
.btn:hover { transform: scale(1.035); border-color: var(--dim); }
.btn-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.08); font-size: 13px; transition: transform .25s var(--ease-out), background .2s; }
.btn:hover .btn-ico { transform: translateX(2px); background: rgba(255,255,255,0.15); }
.btn-primary { background: var(--accent); color: #0a0b0e; border-color: var(--accent); font-weight: 700; }
.btn-primary .btn-ico { background: rgba(0,0,0,0.18); }
.btn-primary:hover { background: #ff7d45; border-color: #ff7d45; }
.btn-primary:hover .btn-ico { background: rgba(0,0,0,0.24); }

/* image and text feature bands */
.features { padding-top: 104px; }
.feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; margin-bottom: 104px; }
.feature-rev .feature-media { order: 2; }
.feature-media { display: block; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: #0c0d15; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-out); }
.feature-media:hover img { transform: scale(1.045); }
.feature-kick { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.feature-title { font-family: var(--disp); font-weight: 900; font-size: clamp(24px, 3vw, 34px); line-height: 1.06; letter-spacing: -0.01em; margin: 14px 0 16px; }
.feature-text p { color: var(--dim); font-size: 15px; line-height: 1.7; margin: 0 0 22px; }
.feature-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; transition: gap .2s, color .2s; }
.feature-link:hover { color: var(--accent); gap: 12px; }
.fl-go { color: var(--accent); }

.provenance { font-size: 13.5px; color: var(--dim); padding: 22px 26px; margin: 72px 0 56px; border: 1px solid var(--line); border-radius: 10px; }
.provenance blockquote { margin: 0 0 12px; border-left-width: 2px; }
.provenance blockquote:last-of-type { margin-bottom: 0; }
.prologue { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; max-width: none; }
.prologue h2 { border-top: 0; padding-top: 0; font-family: var(--disp); font-weight: 900; font-size: clamp(27px, 4vw, 40px); margin: 0 0 24px; }

.index-title { display: flex; align-items: baseline; justify-content: space-between; margin: 112px 0 20px; }
.index-title h2 { font-family: var(--disp); font-weight: 800; font-size: 24px; margin: 0; }
.index-title span { font-size: 12px; color: var(--faint); }

/* bento mosaic */
.sec-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); grid-auto-rows: 184px; grid-auto-flow: dense; gap: 14px; }
.sc { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; transition: transform .3s var(--ease-out), border-color .2s; }
.sc:hover { transform: translateY(-4px); border-color: var(--line-2); }
.sc-num { font-family: var(--text); font-weight: 600; font-size: 12px; color: var(--accent); letter-spacing: 0.05em; position: relative; z-index: 2; }
.sc-title { font-family: var(--disp); font-weight: 800; font-size: 18px; line-height: 1.14; margin-top: 8px; position: relative; z-index: 2; }
.sc-teaser { font-size: 12px; color: var(--dim); line-height: 1.5; margin-top: 9px; position: relative; z-index: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-go { position: absolute; top: 16px; right: 18px; color: #fff; font-size: 14px; opacity: 0; transform: translate(-3px, 3px); transition: opacity .25s, transform .25s var(--ease-out); z-index: 3; }
.sc:hover .sc-go { opacity: 0.9; transform: none; }
/* image tiles */
.sc-img { grid-column: span 2; border-color: transparent; }
.sc-img::before { content: ""; position: absolute; inset: 0; background-image: var(--img); background-size: cover; background-position: center; transition: transform .8s var(--ease-out); z-index: 0; }
.sc-img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,8,11,0.05) 18%, rgba(6,8,11,0.5) 52%, rgba(6,8,11,0.93)); }
.sc-img:hover::before { transform: scale(1.06); }
.sc-img .sc-num { color: #fff; opacity: 0.85; }
.sc-img .sc-title { font-size: clamp(19px, 2vw, 22px); text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.sc-big { grid-row: span 2; }
.sc-big .sc-title { font-size: clamp(23px, 2.4vw, 32px); }
/* typographic tiles get a ghost number */
.sc-txt::before { content: attr(data-n); position: absolute; right: 12px; bottom: -20px; font-family: var(--disp); font-weight: 900; font-size: 96px; line-height: 1; color: rgba(255,255,255,0.035); z-index: 0; letter-spacing: -0.04em; transition: color .3s; }
.sc-txt:hover::before { color: rgba(255,106,43,0.09); }

/* companion cards */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.comp-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: transform .3s var(--ease-out), border-color .2s; }
.comp-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.comp-kick { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.comp-title { font-family: var(--disp); font-weight: 800; font-size: 21px; }
.comp-teaser { font-size: 13px; color: var(--dim); line-height: 1.6; flex: 1; }
.comp-go { font-family: var(--text); font-weight: 600; font-size: 13px; color: var(--ink); transition: color .2s; }
.comp-card:hover .comp-go { color: var(--accent); }

.site-foot { margin: 112px 0 48px; padding-top: 34px; border-top: 1px solid var(--line); }
/* slim footer on inner pages (sections, companions, terms) */
.slim-foot { max-width: 64rem; margin: 0 auto; padding: 30px 32px 48px; }
.slim-foot p { font-size: 12px; color: var(--faint); line-height: 1.7; margin: 0 0 6px; }
.slim-foot .foot-links { margin-top: 0; }

/* back to top */
#backtop { position: fixed; right: 22px; bottom: 22px; z-index: 85; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); color: var(--dim); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s var(--ease-out), color .2s, border-color .2s; }
#backtop.show { opacity: 1; pointer-events: auto; transform: none; }
#backtop:hover { color: var(--accent); border-color: var(--dim); }
#backtop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foot-mark { font-family: var(--disp); font-weight: 800; font-size: 14px; color: var(--dim); margin-bottom: 16px; }
.site-foot p { font-size: 12px; color: var(--faint); line-height: 1.7; max-width: 54rem; margin: 0 0 8px; }
.foot-meta { letter-spacing: 0.04em; }

/* SEARCH */
#search-modal { position: fixed; inset: 0; z-index: 110; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; opacity: 0; pointer-events: none; transition: opacity .2s; }
#search-modal.open { opacity: 1; pointer-events: auto; }
.search-panel { width: min(640px, 92vw); background: #0a0d13; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.35); transform: translateY(-8px); transition: transform .2s var(--ease-out); }
#search-modal.open .search-panel { transform: translateY(0); }
#search-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font-family: var(--text); font-size: 15.5px; padding: 18px 22px; outline: none; }
#search-input::placeholder { color: var(--faint); }
.search-results { max-height: 54vh; overflow-y: auto; }
.search-results:empty { display: none; }
.sr-item { display: flex; flex-direction: column; gap: 3px; padding: 13px 22px; border-left: 2px solid transparent; }
.sr-item:hover, .sr-item.sel { background: var(--panel); border-left-color: var(--accent); }
.sr-kick { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.sr-title { font-family: var(--disp); font-weight: 800; font-size: 15px; }
.sr-snip { font-size: 12.5px; color: var(--faint); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sr-snip mark { background: rgba(255,106,43,0.24); color: #fff; border-radius: 2px; }
.sr-empty { padding: 26px; color: var(--faint); text-align: center; }
.search-hint { display: flex; gap: 8px; align-items: center; padding: 11px 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }

/* 404 */
.notfound { padding: 24vh 32px 30vh; text-align: center; }
.nf-code { font-family: var(--disp); font-weight: 900; font-size: clamp(64px, 12vw, 116px); color: var(--accent); line-height: 1; }
.notfound h1 { font-family: var(--disp); font-weight: 800; font-size: 28px; margin: 12px 0 16px; }
.notfound p { color: var(--dim); max-width: 34rem; margin: 0 auto 28px; }
.nf-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2px 30px; max-width: 56rem; margin: 48px auto 0; text-align: left; }
.nf-index a { display: flex; gap: 12px; padding: 9px 4px; font-size: 13px; color: var(--dim); border-bottom: 1px solid var(--line); transition: color .2s; }
.nf-index a:hover { color: var(--accent); }
.nf-index a span { color: var(--faint); font-variant-numeric: tabular-nums; }

/* MOTION. scroll appearance only */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* RESPONSIVE */
/* device band fixes, placed after base rules so they win on source order */
/* iPad portrait/landscape (721-1000px): the sticky 208px jump nav squeezes the
   prose to a cramped column, so drop the aside and read single column, centred
   (Below 720px the mobile block that replaces over) */
@media (max-width: 1000px) {
  .section-shell { grid-template-columns: minmax(0, 46rem); justify-content: center; }
  .jump-nav { display: none; }
}
/* collapse the home feature bands to one column before they get cramped on tablet */
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 24px; margin-bottom: 72px; }
  .feature-rev .feature-media { order: 0; }
  .features { padding-top: 72px; }
}
/* footer links which give each a tappable box on touch without changing the look */
@media (pointer: coarse) {
  .foot-links a { display: inline-block; padding: 6px 2px; }
}
/* inputs must be >=16px on touch or iOS Safari zooms the whole page on focus */
@media (max-width: 1024px) {
  #search-input, #sec-search-input, #index-filter, .hs-field input,
  .cf-field input, .cf-field select, .cf-field textarea { font-size: 16px; }
}
/* let the visual grid appear on very large screens; reading column stays put */
@media (min-width: 2200px) {
  .wide, .features { max-width: 84rem; }
}

@media (max-width: 720px) {
  .chrome { padding: 0 18px; }
  .chrome-here { display: none; }
  .wrap, .prose { padding-left: 20px; padding-right: 20px; }
  .prose { padding-top: 56px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .pager { grid-template-columns: 1fr; }
  .section-shell { grid-template-columns: minmax(0, 1fr); padding: 0 20px; gap: 0; }
  .section-shell .prose { padding-top: 34px; }
  .jump-nav { display: none; }
  .sec-hero { min-height: 232px; }
  .sec-hero-inner { padding: 0 20px 26px; }
  .wide { padding-left: 20px; padding-right: 20px; }
  .features { padding-top: 64px; }
  .feature { grid-template-columns: 1fr; gap: 22px; margin-bottom: 64px; }
  .feature-rev .feature-media { order: 0; }
  .sec-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .sc-img { grid-column: span 2; }
  .sc-big { grid-row: span 1; }
  .index-title { margin-top: 80px; }
  .support { flex-direction: column; align-items: flex-start; padding: 24px 22px; margin-top: 60px; }
  /* trim the airy desktop spacing thing so phones do NOTT scroll through empty gaps */
  .contribute { margin-top: 60px; }
  .provenance { margin: 44px 0 40px; }
  .site-foot { margin-top: 68px; }
  .index-title { margin-top: 64px; }
  .prose h2 { margin-top: 42px; padding-top: 22px; }
  .prose h3 { margin-top: 32px; }
  .prose hr { margin: 34px 0; }
}
@media (max-width: 440px) {
  .sec-mosaic { grid-template-columns: 1fr; }
  /* one column grid. stop image tiles from spanning 2 and spawning a crushed column */
  .sc-img { grid-column: auto; }
}
@media (max-width: 480px) {
  .brand-name em { display: none; }
  .chrome-btn span { display: none; }
  /* the index button collapses to just the hamburger glyph: this should do it more realistically */
  #index-btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 8px; }
}

/* device support across phones, tablets, laptops */
@media (max-width: 720px) {
  .hero-search { width: 100%; margin-top: 26px; }
  .hs-field { height: 50px; }
  .hero-ai { max-width: 94vw; }
}
@media (max-width: 480px) {
  /* the header search stays a readable affordance on touch. this(drop the kbd hint) */
  #search-btn { padding: 6px 11px; }
  #search-btn span { display: inline; }
  #search-btn kbd { display: none; }
  .hero-ai { gap: 8px; padding: 8px 12px 8px 8px; }
  .hero-ai p { font-size: 11px; line-height: 1.45; }
  .hero-ai-tag { font-size: 9px; padding: 3px 7px; letter-spacing: 0.1em; }
  .hs-field input { font-size: 16px; }   /* >=16px stops iOS zoom-on-focus */
}
/* short viewports (landscape phones) */
/* short viewports (incl. common laptops maximized at ~660-732px tall) */
@media (max-height: 760px) {
  .hero-ai { position: static; transform: none; margin: 0 auto 14px; max-width: 100%; }
  .sec-hero { min-height: 60vh; }
}
/* very short (landscape phones so everything fits */
@media (max-height: 620px) {
  .hero { padding-top: calc(var(--chrome-h) + 14px); justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  #hero-canvas { opacity: 1; }
  /* animations are off a bit, so show the shown bubble statically */
  .logo-bubble.show .lb-inner { transform: none; opacity: 1; }
}


/* the 14.1 music pack vinyl: floats free like a pickup item, 3d idle tilt.
   perspective makes the receding edge shrink so the tilts read as depth.
   the three motions (rotateY, rotateX, bob) run on separate layers with
   different periods, so they drift in and out of phase and never all rest
   at once: continuous life instead of tick-pause-tick */
.prose .fig-3d { perspective: 640px; max-width: 232px; margin: 30px auto; }
.prose .fig-3d .i3a, .prose .fig-3d .i3b { display: block; transform-style: preserve-3d; will-change: transform; }
.prose .fig-3d .i3a { animation: idle-ry 7.3s ease-in-out -3.1s infinite alternate; }
.prose .fig-3d .i3b { animation: idle-rx 9.1s ease-in-out -1.4s infinite alternate; }
.prose .fig-3d img { border: 0; background: none; border-radius: 0; filter: drop-shadow(0 20px 24px rgba(0,0,0,0.55)); animation: idle-bob 5.2s ease-in-out -2.2s infinite alternate; will-change: transform; }
.prose .fig-3d figcaption { text-align: center; }
@media (min-width: 940px) {
  .prose .fig.fig-3d { width: 256px; max-width: 256px; }
}
@keyframes idle-ry { from { transform: rotateY(-7deg); } to { transform: rotateY(7deg); } }
@keyframes idle-rx { from { transform: rotateX(-5deg); } to { transform: rotateX(5.5deg); } }
@keyframes idle-bob { from { transform: translateY(-2px); } to { transform: translateY(-11px); } }