/* Motion's website: the home, the docs, the examples and the reference. The colours, the type
   and the shell (top bar, footer) are motion.css's, shared with the Hub; this is the pages' own. */
/* The type, served from assets/fonts (the site's build copies it from the repository's fonts/). */
@font-face { font-family: "Outfit"; src: url("fonts/Outfit_300Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans_300Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans_400Regular_Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans_500Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("fonts/RedHatMono_300Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("fonts/RedHatMono_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("fonts/RedHatMono_500Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

/* --- sizes; the colours and type are motion.css's, shared with the Hub ----------------------- */
:root {
  --gutter: max(16px, env(safe-area-inset-left, 0px)); --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --wide: 1240px; --pad: max(var(--gutter), calc((100vw - var(--wide)) / 2));
}

/* --- base ----------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg) var(--glow) no-repeat; background-size: 100% 640px; color: var(--text); font: 400 16px/1.65 var(--ui); overflow-x: hidden; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hi); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code { font: 0.86em var(--mono); background: var(--sunk); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--text); overflow-wrap: anywhere; }
kbd { display: inline-block; font: 500 0.78em/1.5 var(--mono); color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; min-width: 1.6em; text-align: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 15px var(--ui); text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.main { background: var(--text); color: var(--bg); }
.btn.main:hover { background: var(--accent); color: var(--on-accent); }
.btn.hot { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn.hot:hover { background: var(--accent-hi); color: var(--on-accent); }
.btn.alt { border-color: var(--line-strong); color: var(--text); background: var(--raised); }
.btn.alt:hover { border-color: var(--text-2); color: var(--text); background: var(--hover); }
.btn.soon, .btn.soon:hover { cursor: default; border-color: var(--line-strong); color: var(--text-2); background: var(--raised); }
.btn.small { min-height: 36px; padding: 0 15px; font-size: 14px; }
.btn small { font-weight: 400; color: inherit; opacity: .7; }

/* --- home: hero --------------------------------------------------------------------------------- */
.hero { padding: 72px var(--pad) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 400 13px var(--mono); color: var(--text-2); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px 5px 8px; margin: 0 0 26px; background: var(--panel); }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
.hero h1 { font: 300 clamp(44px, 6vw, 82px)/0.98 var(--head); letter-spacing: -0.035em; margin: 0 0 24px; text-wrap: balance; }
.hero h1 b { font-weight: 600; background: var(--wave); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font: 300 clamp(18px, 1.7vw, 21px)/1.55 var(--ui); color: var(--text-2); margin: 0 0 32px; max-width: 32em; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.os { margin: 20px 0 0; font: 400 13px var(--mono); color: var(--text-3); }
.screen { position: relative; margin: 0; border-radius: 16px; background: #0b0a10; padding: 10px; box-shadow: var(--shadow-s); border: 1px solid var(--line); }
.screen canvas, .screen img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; background: #07060a; }
.screen figcaption { position: absolute; left: 22px; bottom: 22px; display: flex; gap: 8px; align-items: center; font: 400 12.5px var(--mono); color: #f3eff8; background: rgba(10,8,14,.6); backdrop-filter: blur(8px); padding: 5px 10px; border-radius: 99px; }
.screen figcaption i { width: 7px; height: 7px; border-radius: 50%; background: #f5b14c; box-shadow: 0 0 10px #f5b14c; }

/* --- home: bands ---------------------------------------------------------------------------------- */
.band { padding: 88px var(--pad); }
.band.tint { background: var(--bg-2); border-block: 1px solid var(--line); }
.band .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.kick { font: 400 12.5px var(--mono); color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.band h2 { font: 300 clamp(32px, 3.8vw, 50px)/1.05 var(--head); letter-spacing: -0.025em; margin: 0; text-wrap: balance; max-width: 18em; }
.band h2 b { font-weight: 600; }
.band p.sub { color: var(--text-2); max-width: 36em; margin: 14px 0 0; font-size: 17px; }
.scenes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.scene { margin: 0; grid-column: span 2; }
.scene.big { grid-column: span 3; }
.scene .frame { position: relative; border-radius: 12px; overflow: hidden; background: #07060a; aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.scene canvas, .scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.scene figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px 0; }
.scene figcaption b { font: 600 16px var(--head); }
.scene figcaption span { color: var(--text-3); font: 400 13px var(--mono); }
.scene p { margin: 2px 2px 0; color: var(--text-2); font-size: 14.5px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.ticks li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; color: var(--text-2); }
.ticks li b { display: block; color: var(--text); font: 600 17px var(--head); margin-bottom: 2px; }
.ticks svg { width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: var(--accent-dim); color: var(--accent); }
.shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-s); background: #0b0a10; }
.shot img { display: block; width: 100%; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.facts > div { background: var(--panel); padding: 30px 28px; }
.facts .num { font: 300 46px/1 var(--head); letter-spacing: -0.03em; margin-bottom: 12px; }
.facts .num small { font: 400 16px var(--mono); color: var(--text-3); margin-left: 4px; letter-spacing: 0; }
.facts h3 { font: 600 18px var(--head); margin: 0 0 6px; }
.facts p { color: var(--text-2); margin: 0; font-size: 15px; }

.hub { position: relative; overflow: hidden; border-radius: 24px; padding: 56px; background: var(--dark-panel); color: var(--dark-text); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.hub::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; height: 180%; background: radial-gradient(closest-side, color-mix(in srgb, var(--dark-accent) 32%, transparent), transparent), radial-gradient(closest-side at 70% 60%, color-mix(in srgb, var(--dark-accent-ink) 22%, transparent), transparent); pointer-events: none; }
.hub > * { position: relative; }
.hub h2 { color: var(--dark-text); }
.hub p { color: var(--dark-text-body); max-width: 34em; margin: 14px 0 0; font-size: 17px; }
.hub .btn.alt { background: transparent; color: var(--dark-text); border-color: var(--dark-line-strong); }
.hub .btn.alt:hover { border-color: var(--dark-text); background: transparent; }
.hub .btn.main { background: var(--dark-accent); color: var(--dark-on-accent); }
.hub .btn.main:hover { background: var(--dark-accent-hi); color: var(--dark-on-accent); }

.hub-live { margin-top: 28px; }
.hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hub-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); }
.hub-card .frame { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #07060a; border: 1px solid var(--line); margin-bottom: 6px; }
.hub-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-card b { font: 600 16px var(--head); }
.hub-card small { color: var(--text-3); font-size: 13px; }
.hub-card:hover b { color: var(--accent); }
@media (max-width: 980px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dl { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.dl .os-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--sunk); color: var(--text); }
.dl .os-icon svg { width: 24px; height: 24px; }
.dl h3 { font: 600 22px var(--head); margin: 0; }
.dl p { margin: 0; color: var(--text-2); font-size: 15px; flex: 1; }
.dl .meta { font: 400 12.5px var(--mono); line-height: 1.5; color: var(--text-3); min-height: 3em; }
/* what Motion costs, where a page says it ([data-price]): filled in from the Hub as the page loads (site.js); the card's line keeps room for it, two lines, so nothing moves when it comes */
.m-price s { color: var(--text-3); }
.dl .btn { align-self: flex-start; }

/* --- docs layout ---------------------------------------------------------------------------------- */
.docs-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr) 216px; gap: 0; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter-r) 0 var(--gutter); min-height: calc(100svh - var(--m-top)); }
.side { border-right: 1px solid var(--line); padding: 24px 20px 48px 4px; position: sticky; top: var(--m-top); align-self: start; max-height: calc(100svh - var(--m-top)); overflow-y: auto; scrollbar-width: thin; }
.side-toggle { display: none; }
.grp { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 22px 0 6px 10px; }
.side ol, .side ul { list-style: none; padding: 0; margin: 0; }
.side a { display: block; color: var(--text-2); text-decoration: none; padding: 5px 10px; border-radius: 7px; font-size: 14.5px; line-height: 1.45; }
.side a:hover { color: var(--text); background: var(--sunk); }
.side a[aria-current] { background: var(--accent-dim); color: var(--accent); font-weight: 500; }
.side details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text-2); padding: 5px 10px; border-radius: 7px; font-size: 14.5px; }
.side details summary::-webkit-details-marker { display: none; }
.side details summary::after { content: ""; width: 7px; height: 7px; border: solid var(--text-3); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; }
.side details[open] summary::after { transform: rotate(45deg); }
.side details summary:hover { color: var(--text); background: var(--sunk); }
.side details ol { margin: 2px 0 6px 10px; padding-left: 8px; border-left: 1px solid var(--line); }
.side details a { font-size: 14px; padding: 4px 10px; }
/* on touch, and where the menu folds away, each entry a 44 px target */
@media (pointer: coarse), (max-width: 980px) {
  .side a, .side details a, .side details summary { display: flex; align-items: center; min-height: 44px; }
}
.side .count { font: 400 11.5px var(--mono); color: var(--text-3); margin-left: auto; margin-right: 10px; }
/* a control's edge, 3:1 against the page in either look (the Hub's --control, UX-HUB-4) */
:root { --control: #8c8c94; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --control: #6b6b72; } }
:root[data-theme="dark"] { --control: #6b6b72; }
.search { display: flex; align-items: center; gap: 8px; height: 44px; border-radius: 10px; border: 1px solid var(--control); background: var(--panel); padding: 0 8px 0 12px; }
.search svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 15px var(--ui); outline: none; }
.search input::placeholder { color: var(--text-3); }
.search:focus-within { border-color: var(--accent); }
.results { list-style: none; margin: 8px 0 0; padding: 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-s); }
.results a { display: block; padding: 7px 8px; }
.results a small { display: block; color: var(--text-3); font-size: 12.5px; }
.results mark { background: var(--accent-dim); color: var(--text); border-radius: 3px; }
.results .none { color: var(--text-3); padding: 8px; font-size: 14px; }

.article { padding: 40px 0 80px 56px; max-width: 820px; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font: 400 12.5px var(--mono); color: var(--text-3); margin: 0 0 14px; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
/* each crumb a 44 px target, the line kept as small as it looks */
.crumbs a { position: relative; }
.crumbs a::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.crumbs span::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.article h1 { font: 400 clamp(34px, 4.2vw, 50px)/1.05 var(--head); letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance; }
.article h2 { font: 600 25px/1.2 var(--head); margin: 48px 0 12px; letter-spacing: -0.012em; }
.article h3 { font: 600 19px var(--head); margin: 30px 0 8px; }
.article p, .article li { color: var(--text-body); }
.article p { margin: 0 0 16px; }
/* a picture on a line of its own (![what it shows](file "caption")), a rule (---) and a button ([words](to){.button}) */
.article .md-image { margin: 24px 0; }
.article .md-image img { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.article .md-image figcaption { margin-top: 8px; font-size: 14px; color: var(--text-3); }
.article hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.article .md-button { margin: 20px 0; }
.article .md-button .m-btn { text-decoration: none; }
.article .intro { font: 300 20px/1.55 var(--ui); color: var(--text); margin-bottom: 28px; }
.article strong { color: var(--text); font-weight: 600; }
.article ul, .article ol { padding-left: 22px; margin: 0 0 18px; }
.article li { margin-bottom: 6px; }
.article li::marker { color: var(--text-3); }
.article pre { background: var(--sunk); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 0 0 20px; position: relative; }
.article pre code { background: none; border: 0; padding: 0; color: var(--text); font-size: 14px; line-height: 1.65; overflow-wrap: normal; }
.article pre[data-lang]::before { content: attr(data-lang); position: absolute; top: 8px; right: 12px; font: 400 11px var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.tk-k { color: var(--violet); } .tk-s { color: var(--ok); } .tk-n { color: var(--rose); } .tk-c { color: var(--text-3); font-style: italic; } .tk-f { color: var(--info); }
.tip { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--accent-dim); padding: 14px 18px; border-radius: 4px 12px 12px 4px; color: var(--text-body); margin: 22px 0; }
.tip p:last-child { margin: 0; }
.table { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 12px; }
.article table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.article th { text-align: left; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--sunk); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.article td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-body); }
.article tr:last-child td { border-bottom: 0; }
.article td code { white-space: nowrap; }
.cards { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.cards li { margin: 0; }
.cards a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none; height: 100%; }
.cards a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-s); }
.cards b { display: block; color: var(--text); font: 600 17px var(--head); margin-bottom: 2px; }
.cards small { display: block; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); font-weight: 600; background: var(--panel); }
.pager a:hover { border-color: var(--line-strong); }
.pager small { display: block; color: var(--text-3); font-weight: 400; font-size: 13px; }
.pager .next { text-align: right; grid-column: 2; }
.toc { padding: 44px 0 40px 28px; position: sticky; top: var(--m-top); align-self: start; font-size: 14px; max-height: calc(100svh - var(--m-top)); overflow-y: auto; }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.toc a { display: block; color: var(--text-2); text-decoration: none; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 1px solid transparent; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--accent); border-left-color: var(--accent); }
.toc .grp { margin-left: 0; }

/* --- reference pages ------------------------------------------------------------------------------ */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.tag { font: 400 12.5px var(--mono); color: var(--text-2); border: 1px solid var(--line); background: var(--panel); padding: 3px 9px; border-radius: 99px; text-decoration: none; }
a.tag:hover { color: var(--accent); border-color: var(--accent); }
.tag.hot { color: var(--accent); border-color: transparent; background: var(--accent-dim); }
.tag.old { font-size: 11.5px; padding: 1px 7px; margin-right: 4px; vertical-align: 1px; }
/* Nodes, drawn as Studio's node graph draws them (NodeGraph.qml): its greys in each look, its type
   (Instrument Sans), its line grid, and pins in their types' colours, which come with the data. */
:root { --ng-floor: #ececee; --ng-line: rgba(0,0,0,.035); --ng-line2: rgba(0,0,0,.08); --ng-body: #ffffff; --ng-edge: #d4d4d8;
        --ng-headlight: rgba(0,0,0,.035); --ng-headlight-end: rgba(0,0,0,.008); --ng-hair: #e2e2e5; --ng-ink: #161618; --ng-text: #2b2b30; --ng-faint: #636369;
        --ng-field: #f2f2f4; --ng-field-edge: #d0d0d4; --ng-halo: #ffffff; --ng-shadow: rgba(0,0,0,.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
        --ng-floor: #1b1b1d; --ng-line: rgba(255,255,255,.03); --ng-line2: rgba(255,255,255,.07); --ng-body: #19191c; --ng-edge: #303035;
        --ng-headlight: rgba(255,255,255,.045); --ng-headlight-end: rgba(255,255,255,.01); --ng-hair: #2a2a2e; --ng-ink: #ededee; --ng-text: #d4d4d8; --ng-faint: #8a8a90;
        --ng-field: #0e0e10; --ng-field-edge: #333338; --ng-halo: #000000; --ng-shadow: rgba(0,0,0,.42); } }
:root[data-theme="dark"] {
        --ng-floor: #1b1b1d; --ng-line: rgba(255,255,255,.03); --ng-line2: rgba(255,255,255,.07); --ng-body: #19191c; --ng-edge: #303035;
        --ng-headlight: rgba(255,255,255,.045); --ng-headlight-end: rgba(255,255,255,.01); --ng-hair: #2a2a2e; --ng-ink: #ededee; --ng-text: #d4d4d8; --ng-faint: #8a8a90;
        --ng-field: #0e0e10; --ng-field-edge: #333338; --ng-halo: #000000; --ng-shadow: rgba(0,0,0,.42); }
.nodebox, .graph { border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; background-color: var(--ng-floor);
  background-image: linear-gradient(var(--ng-line2) 1px, transparent 1px), linear-gradient(90deg, var(--ng-line2) 1px, transparent 1px),
                    linear-gradient(var(--ng-line) 1px, transparent 1px), linear-gradient(90deg, var(--ng-line) 1px, transparent 1px);
  background-size: 128px 128px, 128px 128px, 16px 16px, 16px 16px; }
.nodebox { display: flex; justify-content: center; padding: 24px 16px; margin: 0 0 32px; }
.graph { margin: 0 0 24px; padding: 4px; }
.tabs .graph { border: 0; border-radius: 0; margin: 0; }
/* a node is HTML, as Studio lays it out: a header 30 high (42 with a line under the title), rows of
   24, pins 9 in from the edge; Outfit for its title, DM Sans for its pins, Red Hat Mono in its fields */
.ng { position: relative; margin: 0 auto; font: 400 12px/1 var(--ui); color: var(--ng-text); text-align: left; }
.ng-wires { position: absolute; left: 0; top: 0; overflow: visible; }
.ng-node { position: absolute; box-sizing: border-box; background: var(--ng-body); border: 1px solid var(--ng-edge); border-radius: 8px;
  box-shadow: 0 2px 0 var(--ng-shadow), 0 4px 10px -2px var(--ng-shadow); }
.ng-head { position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; border-radius: 7px 7px 0 0; border-bottom: 1px solid var(--ng-hair);
  background: linear-gradient(var(--ng-headlight), var(--ng-headlight-end)); }
.ng-chip { position: absolute; left: 9px; top: calc(50% - 9px); width: 18px; height: 18px; box-sizing: border-box; border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--mark) 45%, transparent); color: var(--mark); display: grid; place-items: center; font: 600 11px/1 var(--ui); }
.ng-title { position: absolute; left: 35px; right: 8px; top: calc(50% - 9px); height: 18px; display: flex; align-items: center; color: var(--ng-ink);
  font: 600 13px/1 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-sub .ng-chip, .has-sub .ng-title { top: 6px; }
.ng-sub { position: absolute; left: 35px; right: 8px; top: 24px; color: var(--ng-faint); font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-row { position: absolute; left: 0; right: 0; height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ng-ins, .ng-outs { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; height: 24px; }
.ng-ins { padding-left: 19px; flex: 1 1 auto; }
.ng-ins.choice { padding-left: 9px; }
.ng-outs { padding-right: 19px; flex: 0 0 auto; }
.ng-label { white-space: nowrap; color: var(--ng-text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ng-ins .ng-label { flex: none; }
.ng-pin { position: absolute; top: 5.5px; width: 13px; height: 13px; display: grid; place-items: center; }
.ng-pin.in { left: 1.5px; }
.ng-pin.out { right: 1.5px; }
.ng-ring { display: block; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1.6px solid var(--c); }
.ng-ring.on { background: var(--c); }
.ng-glyph { display: block; width: 13px; height: 13px; opacity: .55; }
.ng-glyph.on, .ng-exec { opacity: 1; }
.ng-exec path { fill: none; stroke: var(--ng-ink); stroke-width: 1.5; stroke-linejoin: round; }
.ng-exec.on path { fill: var(--ng-ink); }
.ng-field { display: inline-flex; align-items: center; box-sizing: border-box; height: 18px; padding: 0 5px; border-radius: 4px; background: var(--ng-field);
  border: 1px solid var(--ng-field-edge); color: var(--ng-ink); font: 400 11px/1 var(--mono); white-space: nowrap; overflow: hidden; flex: none; }
.ng-nums { display: inline-flex; justify-content: flex-end; gap: 3px; flex: none; }
.ng-num { justify-content: flex-end; }
.ng-text { justify-content: flex-start; font-family: var(--ui); }
.ng-drop { justify-content: space-between; font-family: var(--ui); gap: 4px; }
.ng-drop span { overflow: hidden; text-overflow: ellipsis; }
.ng-drop::after { content: ""; flex: none; width: 5px; height: 5px; margin: -3px 1px 0 0; border: solid var(--ng-faint); border-width: 0 1.3px 1.3px 0; transform: rotate(45deg); }
.ng-colour { padding: 2px; }
.ng-colour i { display: block; width: 100%; height: 100%; border-radius: 2px; }
.ng-switch { position: relative; flex: none; width: 30px; height: 16px; box-sizing: border-box; border-radius: 8px; background: var(--ng-field); border: 1px solid var(--ng-field-edge); }
.ng-switch::after { content: ""; position: absolute; left: 1px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ng-faint); }
.ng-switch.on { background: var(--ng-ink); border-color: var(--ng-ink); }
.ng-switch.on::after { left: auto; right: 1px; background: var(--ng-body); }
.ng-halo { fill: none; stroke: var(--ng-halo); opacity: .28; stroke-linecap: round; }
.ng-wire { fill: none; opacity: .9; stroke-linecap: round; }
.ng-wire.exec { stroke: var(--ng-ink); stroke-width: 2.6; }
.typ { font: 400 12.5px var(--mono); padding: 1px 7px; border-radius: 5px; background: var(--sunk); color: var(--text-2); white-space: nowrap; }
.typ::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--text-3)); margin-right: 6px; vertical-align: 1px; }
.reflist { columns: 3 220px; column-gap: 28px; padding: 0 !important; list-style: none; margin: 0 0 28px; }
.reflist li { break-inside: avoid; margin: 0 0 2px; }
.reflist a { display: flex; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--text); padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.reflist a:hover { color: var(--accent); }
.reflist a small { color: var(--text-3); font: 400 12px var(--mono); }
.filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 24px; }

/* --- examples ------------------------------------------------------------------------------------- */
.preview { margin: 0 0 32px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #07060a; position: relative; }
.preview canvas { display: block; width: 100%; aspect-ratio: 16 / 7; }
.preview figcaption { position: absolute; left: 14px; bottom: 12px; font: 400 12px var(--mono); color: #d7d1e0; background: rgba(10,8,14,.6); padding: 4px 10px; border-radius: 99px; }
.tabs { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0 0 24px; background: var(--sunk); }
.tabs [role="tablist"] { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--sunk); overflow-x: auto; }
.tabs [role="tab"] { font: 500 13.5px var(--ui); color: var(--text-2); background: none; border: 0; padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.tabs [role="tab"][aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.tabs [role="tabpanel"] > pre { border: 0; border-radius: 0; margin: 0; }
.tabs [role="tabpanel"][hidden] { display: none; }
.steps { counter-reset: step; list-style: none; padding: 0 !important; }
.steps > li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 14px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 13px var(--mono); background: var(--accent-dim); color: var(--accent); }
.ex-grid { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ex-grid li { margin: 0; }
.ex-grid a { display: block; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; background: var(--panel); height: 100%; }
.ex-grid a:hover { box-shadow: var(--shadow-s); border-color: var(--line-strong); }
.ex-grid canvas { display: block; width: 100%; aspect-ratio: 16 / 7; background: #07060a; }
.ex-grid b { display: block; color: var(--text); font: 600 17px var(--head); padding: 14px 16px 2px; }
.ex-grid small { display: block; color: var(--text-2); font-size: 14px; padding: 0 16px 16px; }
/* the example scenes: their pictures, as they play */
.ex-grid.shots { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 32px; }
.ex-grid.shots img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #07060a; }
.example-shot { margin: 0 0 32px; }
.example-shot a { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #07060a; }
.example-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.example-shot figcaption { margin-top: 8px; font-size: 13px; color: var(--text-2); }

/* --- the docs and the reference, redesigned ------------------------------------------------------
   Chips, cards and callouts the docs' Markdown makes; the docs' and the reference's front pages;
   a reference entry's header, facts, notes and settings; a node page; an example scene; the
   scripting API. Only motion.css's colours: the info blue for what to try, the key amber for what
   costs, violet and green to tell the kinds of entry apart. */
:root { --chip: var(--raised); --card: var(--panel); }
.wide-page { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter-r) 0 var(--gutter); }
.article.rh { max-width: none; padding: 48px 0 88px; }
.docs-grid.no-toc { grid-template-columns: 264px minmax(0, 1fr); }
.no-toc .toc { display: none; }
.no-toc .article { max-width: 1040px; }
.dh > section, .article.rh > div > section { margin-bottom: 52px; }
.dh > section:last-child { margin-bottom: 0; }

/* chips: reading time, the version, a node's category; info ones lead somewhere to try */
.meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 22px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 11px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; line-height: 1.4; text-decoration: none; }
a.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip.info, .chip.new { background: var(--info-dim); border-color: var(--info-line); color: var(--info-ink); }
.chip.warm { background: var(--key-dim); border-color: transparent; color: var(--key); }
.chip code { background: none; border: 0; padding: 0; font-size: 12px; color: inherit; }
.chip small { color: var(--text-3); font-size: 12px; }

/* "Try it: [Scene](…) (what to look at), …": the scenes as chips. The commas and the label are
   the paragraph's own words, kept for the page editor and drawn at no size */
.article .try-it { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 26px; font-size: 0; line-height: 0; }
.try-it > * { font-size: 13px; line-height: 1.4; }
.try-it .try-label, .try-it .try-what { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.try-it a.try { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: 999px; background: var(--info-dim); border: 1px solid var(--info-line); color: var(--info-ink); text-decoration: none; font-weight: 500; }
.try-it a.try::before { content: "Try it: "; white-space: pre; font-weight: 400; opacity: .85; }
.try-it a.try:hover { border-color: var(--info); }
@media (pointer: coarse) { .try-it a.try { min-height: 44px; } }

/* callouts: a quote that starts Tip, Note or Warning */
.callout { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; margin: 24px 0; padding: 14px 18px 14px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); color: var(--text-body); }
.callout::before { content: ""; grid-row: 1 / 99; width: 18px; height: 18px; margin-top: 3px; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.callout > p { grid-column: 2; margin: 0 0 10px; }
.callout > p:last-child { margin-bottom: 0; }
.callout .callout-word { font-weight: 600; color: var(--text); }
.callout.c-tip { background: var(--info-soft); border-color: var(--info-line); }
.callout.c-tip::before { color: var(--info); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E"); }
.callout.c-note::before { color: var(--text-2); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E"); }
.callout.c-warning { background: var(--danger-soft); border-color: var(--danger-line); }
.callout.c-warning::before { color: var(--danger); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3Z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E"); }

/* numbered steps: every numbered list in a page */
.article ol.steps { margin: 0 0 22px; }
.article .steps > li { padding-left: 42px; margin-bottom: 14px; min-height: 28px; }
.steps > li::before { background: var(--raised); border: 1px solid var(--line-strong); color: var(--text); font: 600 13px var(--ui); top: -1px; }

/* a picture still to come: a grey box with what it will show */
.shot-todo img[hidden], img[data-todo] { display: none !important; }
.shot-todo .shot-box { display: grid; place-items: center; min-height: 220px; aspect-ratio: 16 / 9; max-height: 420px; width: 100%; padding: 24px; border-radius: 14px; border: 1px dashed var(--line-strong);
  background: repeating-linear-gradient(135deg, var(--sunk) 0 14px, var(--raised) 14px 28px); color: var(--text-2); font: 400 14px/1.5 var(--mono); text-align: center; }
.shot-todo .shot-box span { max-width: 36em; background: var(--panel); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); }
.shot-todo figcaption, .md-image figcaption { margin-top: 8px; font-size: 13.5px; color: var(--text-2); }

.article .changed { margin: 18px 0 0; font-size: 13.5px; color: var(--text-3); }
.article .changed a { color: var(--text-2); }
.pager { margin-top: 48px; }
.pager a { padding: 16px 18px; }

/* the docs' menu: each section folds; yours is open */
.side details.sect { margin: 2px 0; }
.side details.sect > summary { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px; margin-top: 8px; }
.side details.sect > summary:hover { color: var(--text); }
.side details.sect[open] > summary { color: var(--text); }
.side details.sect > summary::after { content: "+"; width: auto; height: auto; border: 0; transform: none; font: 400 14px var(--mono); color: var(--text-3); }
.side details.sect[open] > summary::after { content: "−"; transform: none; }
.side details.sect > summary .count { margin-left: auto; margin-right: 10px; letter-spacing: 0; }
.side details.sect ol { margin: 2px 0 8px 10px; }
.side .lic { margin-right: 9px; color: var(--text-3); }
.side a:has(.lic) { display: flex; align-items: center; }
.side a:hover .lic, .side a[aria-current] .lic { color: inherit; }
.side .filter { margin-bottom: 6px; }
.side .side-body > .search { margin-bottom: 10px; }
.side [hidden] { display: none !important; }
.api-menu summary a { padding: 0; color: inherit; background: none; font: inherit; letter-spacing: inherit; text-transform: none; font-family: var(--mono); font-size: 13px; }
.api-menu summary a:hover { background: none; color: var(--text); }
.api-menu details.sect ol a { font-family: var(--mono); font-size: 13px; }

/* swatches: a layer's colour, a setting's starting colour */
.swatch { display: inline-block; flex: none; width: 20px; height: 14px; border-radius: 4px; background: var(--c); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); vertical-align: -2px; }
.swatch-val { display: inline-flex; align-items: center; gap: 8px; }
/* a layer's icon, as Studio draws it (assets/layer-icons.svg), in the text's colour */
.lic { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cards b .lic { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; color: var(--accent); }
.used-layers .lic, .chips .lic { margin-right: 7px; color: var(--text-3); }

/* --- the docs' front page --------------------------------------------------------------------- */
.dh-hero { display: flex; flex-direction: column; align-items: flex-start; }
.dh-hero .kick { margin-bottom: 14px; color: var(--text-2); }
.article .dh h1, .article.rh h1 { font: 500 clamp(36px, 5vw, 54px)/1.05 var(--head); letter-spacing: -0.025em; margin: 0 0 18px; max-width: 18em; }
.dh-hero .intro { max-width: 40em; font-size: 18px; color: var(--text-2); margin-bottom: 26px; }
.big-search { position: relative; width: 100%; max-width: 680px; }
.big-search .search { height: 54px; border-radius: 14px; padding: 0 12px 0 16px; gap: 12px; }
.big-search .search svg { width: 19px; height: 19px; }
.big-search .search input { font-size: 16.5px; }
.big-search .results { position: absolute; left: 0; right: 0; z-index: 6; max-height: min(70vh, 560px); overflow: auto; }
.big-search .kind-chips + .results { top: 100%; }
.kind-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kind-chip { min-height: 32px; padding: 4px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font: 500 13px var(--ui); cursor: pointer; }
.kind-chip:hover { color: var(--text); border-color: var(--text-3); }
.kind-chip[aria-pressed="true"] { background: var(--info-dim); border-color: var(--info); color: var(--info-ink); }
@media (pointer: coarse) { .kind-chip { min-height: 44px; } }
/* a result: its kind as a tag, its name, a few of its words */
.results a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; text-decoration: none; color: var(--text); border-radius: 7px; }
.results a small { grid-column: 2; }
.results .rk, .az .kind { justify-self: start; font: 500 10.5px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.rk.k-layer, .kind.k-layer { background: var(--info-dim); border-color: transparent; color: var(--info-ink); }
.rk.k-effect, .kind.k-effect { background: var(--key-dim); border-color: transparent; color: var(--key); }
.rk.k-script-node, .kind.k-script-node { background: var(--violet-dim); border-color: transparent; color: var(--violet); }
.rk.k-material-node, .kind.k-material-node { background: var(--ok-dim); border-color: transparent; color: var(--ok); }
.rk.k-api, .kind.k-api { background: var(--accent-dim); border-color: transparent; color: var(--accent-ink); }

.dh h2, .rh h2 { font: 600 23px/1.2 var(--head); margin: 0 0 18px; letter-spacing: -0.01em; }
.cards-sect > ul.link-cards { list-style: none; padding: 0 !important; margin: 0; display: grid; }
ul.link-cards > li { margin: 0; }
ul.link-cards > li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text-2); font-size: 15px; line-height: 1.55; }
ul.link-cards > li:hover { border-color: var(--line-strong); box-shadow: var(--shadow-s); }
ul.link-cards > li .card-title { color: var(--text); font: 600 19px/1.3 var(--head); text-decoration: none; }
ul.link-cards > li .card-title::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
ul.link-cards > li .card-sep { display: none; }
ul.link-cards > li .card-what { color: var(--text-2); }
ul.link-cards > li .path-then { font-size: 13.5px; color: var(--text-3); }
ul.link-cards > li .path-then a { position: relative; z-index: 1; color: var(--text-2); }
ul.link-cards > li[data-meta]::after { content: attr(data-meta); margin-top: auto; padding-top: 6px; font: 400 12.5px var(--mono); color: var(--text-3); }
.paths ul.link-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.look ul.link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.every-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 20px; }
.every-head h2 { margin: 0; }
.every-head span { color: var(--text-3); font-size: 14px; }
.all-pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.all-pages .pg { margin: 0 0 28px; }
.all-pages .pg h2 { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.all-pages ol { list-style: none; padding: 0 !important; margin: 0; }
.all-pages ol li { margin: 0; padding: 0; min-height: 0; }
.all-pages ol li::before { content: none; }
.all-pages ol a { display: block; padding: 4px 0; color: var(--text); text-decoration: none; font-size: 15px; }
.all-pages ol a:hover { color: var(--accent-hi); text-decoration: underline; }

/* the docs' parts, as tiles: what each is for and its key pages (the rest a click away) */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cat-tile { display: flex; flex-direction: column; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.article .cat-tile h2 { font: 600 19px/1.3 var(--head); margin: 0 0 6px; }
.article .cat-tile p { color: var(--text-2); font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; }
.article .cat-tile ol.key-pages { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.article .cat-tile ol.key-pages li { margin: 0; padding: 0; min-height: 0; border-bottom: 1px solid var(--line); }
.article .cat-tile ol.key-pages li::before { content: none; }
.cat-tile ol.key-pages li:not(.key) { display: none; }
.cat-tile.open ol.key-pages li { display: block; }
.cat-tile ol.key-pages a { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 6px 0; color: var(--text); text-decoration: none; font-size: 15px; }
.cat-tile ol.key-pages a::after { content: "→"; color: var(--text-3); margin-left: 12px; }
.cat-tile ol.key-pages a:hover { color: var(--accent-hi); }
.cat-tile ol.key-pages strong { font-weight: 400; }
.cat-more { align-self: flex-start; margin-top: 10px; min-height: 36px; padding: 4px 0; border: 0; background: none; color: var(--text-2); font: 500 14px var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cat-more:hover { color: var(--text); }

/* --- the reference's front page --------------------------------------------------------------- */
.tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tiles li { margin: 0; }
.tile { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--text-2); }
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-s); color: var(--text-2); }
.tile.dashed { border-style: dashed; background: transparent; }
.tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tile-head b { color: var(--text); font: 600 19px var(--head); }
.tile-head small { font: 400 13px var(--mono); color: var(--text-3); }
.tile-what { font-size: 14.5px; line-height: 1.5; }
.glimpse { display: flex; min-height: 40px; align-items: center; overflow: hidden; }
.glimpse.swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.glimpse.swatches i { height: 38px; border-radius: 6px; background: var(--sunk); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.glimpse.swatches .lic { width: 18px; height: 18px; vertical-align: 0; }
.glimpse.words { flex-wrap: wrap; gap: 6px; }
.glimpse.words span { font-size: 12px; padding: 2px 8px; border-radius: 5px; background: var(--raised); border: 1px solid var(--line); color: var(--text-2); }
.glimpse.code { display: block; font: 400 12px/1.6 var(--mono); color: var(--text-body); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40px; }
.glimpse.az { font: 500 15px var(--mono); color: var(--text-3); }
.new-in .chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.new-in .chips li { margin: 0; }
.new-in .chips .chip { font-family: var(--mono); font-size: 12.5px; }

/* A to Z */
.letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 28px; position: sticky; top: var(--m-top); z-index: 2; padding: 8px 0; background: var(--bg); }
.letters a { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; color: var(--text-2); font: 500 13px var(--mono); }
.letters a:hover { color: var(--text); border-color: var(--line-strong); }
@media (pointer: coarse) { .letters a { min-width: 44px; min-height: 44px; } }
ul.az { list-style: none; padding: 0 !important; margin: 0 0 24px; }
ul.az li { margin: 0; }
ul.az a { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); text-decoration: none; color: var(--text); }
ul.az a small { grid-column: 2; color: var(--text-3); font-size: 13px; }
ul.az a:hover b { color: var(--accent-hi); text-decoration: underline; }
ul.az .kind { justify-self: start; }

/* --- a reference entry ------------------------------------------------------------------------- */
.entry-head { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; margin-bottom: 28px; }
.entry-words { flex: 1 1 340px; min-width: 0; }
.entry-words .intro { margin-bottom: 18px; }
.entry-pic { flex: 0 1 300px; min-width: 0; margin: 0; }
.entry-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: #07060a; }
.entry-pic .shot-box { min-height: 0; aspect-ratio: 16 / 10; font-size: 12.5px; }
.entry-pic figcaption { margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
.entry-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.entry-facts div { min-width: 0; }
.entry-facts dt { font-size: 12.5px; color: var(--text-3); }
.entry-facts dd { margin: 2px 0 0; color: var(--text); font-size: 14.5px; }
.entry-facts dd a { color: var(--text); }
.entry-facts a.plain { text-decoration: none; }
.cost { display: inline-flex; align-items: center; gap: 8px; }
.cost .blocks { display: inline-flex; gap: 3px; }
.cost .blocks i { width: 10px; height: 10px; border-radius: 2px; background: var(--line-strong); }
.cost .blocks i.on { background: var(--key); }
/* an entry's notes: the part a person writes (content/reference/…) */
.notes { margin: 0 0 32px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--raised); }
.article .notes h2.notes-head { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.notes > p:last-child, .notes .callout:last-child { margin-bottom: 0; }
.notes .callout { background: var(--panel); }
/* the settings */
.table.settings table { min-width: 600px; }
.table.pins table { min-width: 480px; }
.article .table th[scope="row"] { text-align: left; font: inherit; letter-spacing: 0; text-transform: none; color: var(--text); background: none; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: normal; vertical-align: top; }
.article .table tr:last-child th[scope="row"] { border-bottom: 0; }
.article .table th[scope="row"] strong { display: block; font-weight: 600; }
.article .table th[scope="row"] code { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--text-2); }
.kchip, .tchip { display: inline-block; font: 400 12px/1.5 var(--mono); padding: 1px 8px; border-radius: 5px; background: var(--raised); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.kchip.k-colour, .kchip.k-colour-and-alpha, .kchip.k-gradient, .kchip.k-palette { background: var(--violet-dim); border-color: transparent; color: var(--violet); }
.kchip.k-number, .kchip.k-whole-number, .kchip.k-low-and-high { background: var(--info-dim); border-color: transparent; color: var(--info-ink); }
.kchip.k-choice, .kchip.k-options, .kchip.k-on-or-off { background: var(--key-dim); border-color: transparent; color: var(--key); }
.tchip::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 0; }
.range { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.range-bar { position: relative; flex: none; width: 72px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.range-bar i { position: absolute; left: 0; top: 0; height: 4px; border-radius: 2px; background: var(--info); }
.table .hint { display: block; margin-top: 4px; color: var(--text-2); font-size: 13.5px; }
.none { color: var(--text-3); }
/* pins in a node's tables, drawn as on the node */
.pin-glyph { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; }
.pin-glyph .ng-glyph { opacity: 1; }
.pin-glyph .ng-exec path { stroke: var(--text); }
.pin-glyph .ng-exec.on path { fill: var(--text); }
.table.pins th[scope="row"] strong { display: inline; }
.table.pins th[scope="row"] code { display: table; margin: 2px 0 0 23px; }
/* the code a setting's change takes, with a copy button (site.js) */
.tabs [role="tablist"] { align-items: center; }
.copy { margin-left: auto; flex: none; min-height: 30px; padding: 3px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font: 500 13px var(--ui); cursor: pointer; }
.copy:hover { color: var(--text); border-color: var(--text-3); }
.pre-wrap { position: relative; }
.pre-wrap > .copy { position: absolute; right: 10px; top: 10px; z-index: 1; background: var(--panel); }
.pre-wrap > pre { padding-right: 84px; }
.pre-wrap > pre[data-lang]::before { display: none; }
@media (pointer: coarse) { .copy { min-height: 44px; } }
/* the example scenes something's in */
.used-in { list-style: none; padding: 0 !important; margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.used-in li { margin: 0; }
.used-in a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); }
.used-in img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #07060a; }
.used-in b { font: 600 15px var(--head); }
.used-in .card-chips { padding: 0; }
.used-in a:hover b { text-decoration: underline; }
details.every { margin: 36px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
details.every summary { cursor: pointer; font: 600 17px var(--head); color: var(--text); min-height: 32px; }
details.every p { margin: 10px 0 0; }
/* a node's page */
.node-head .nodebox { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; padding: 22px; }
.related { display: flex; flex-wrap: wrap; gap: 8px; }
.article .caption { font-size: 13.5px; color: var(--text-3); margin-top: -12px; }
.article .from-file { margin-top: 28px; color: var(--text-3); font-size: 14px; }
.article .reflist + h2 small.n, .article h2 small.n { font: 300 14px var(--mono); color: var(--text-3); }

/* --- an example scene -------------------------------------------------------------------------- */
.article.ex-page { max-width: none; padding: 0 0 88px; }
/* the hero is the window's width (100vw, which counts a scrollbar too): on its pages the page is
   clipped at the window's edge, so there's nothing to scroll to sideways. clip on both (html's goes
   to the window, body's clips) where body's hidden alone went to the window, which could still be
   scrolled; and clip, not hidden, makes no scroller, so the sticky header and side stay */
html:has(.ex-hero), html:has(.ex-hero) body { overflow-x: clip; }
.ex-hero { position: relative; margin: 0 calc(50% - 50vw) 32px; min-height: 380px; display: flex; align-items: flex-end; background: #07060a; overflow: hidden; }
.ex-hero .ex-still { position: absolute; inset: 0; }
.ex-hero img, .ex-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-hero .sketch { background: #07060a; }
/* the scene playing over its still, faded in once it plays (its still is its poster) */
.ex-hero .ex-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.ex-hero .ex-video.on { opacity: 1; }
.ex-hero .ex-play { background: rgba(255, 255, 255, .12); color: #ededee; border-color: rgba(255, 255, 255, .28); }
.ex-hero .ex-play:hover { background: rgba(255, 255, 255, .2); }
.ex-hero .ex-play::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; vertical-align: 0; }
.ex-hero .ex-play[aria-pressed="true"]::before { width: 9px; height: 10px; border-width: 0 3px; border-color: currentColor; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .ex-hero .ex-video { transition: none; } }
.ex-grid.shots canvas { aspect-ratio: 16 / 9; }
.card-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.card-chips .chip { min-height: 22px; font-size: 12px; padding: 1px 9px; }
.next-ex canvas { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--line); background: #07060a; }
.ex-hero-words { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding: 120px max(var(--gutter), 24px) 32px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px;
  color: var(--dark-text); pointer-events: none; }
.ex-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 8, 10, .95), rgba(8, 8, 10, .6) 45%, transparent 85%); pointer-events: none; }
.ex-hero-words { z-index: 1; }
.ex-hero-words > * { pointer-events: auto; }
.ex-hero-words > div:first-child { flex: 1 1 420px; min-width: 0; }
.ex-hero .crumbs a, .ex-hero .crumbs { color: #c9c9cd; }
.ex-hero .crumbs span::before { color: #6b6b72; }
.ex-hero .kick { color: #d4d4d8; margin-bottom: 8px; }
.article.ex-page .ex-hero h1 { color: #fff; margin: 0 0 10px; font-size: clamp(36px, 5vw, 50px); }
.ex-hero .intro { color: #e4e4e7; font-size: 17px; margin: 0; max-width: 40em; }
.ex-hero .btn.main { background: #ededee; color: #111113; }
.ex-hero .btn.main:hover { background: #fff; }
.ex-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.ex-words { min-width: 0; max-width: 760px; }
.ex-words .meta-chips { margin: 0 0 24px; }
.ex-side { position: sticky; top: calc(var(--m-top) + 16px); display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; }
.ex-side .panel { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.ex-side .grp { margin: 0 0 8px; }
.ex-side ul { list-style: none; padding: 0; margin: 0; }
.ex-side li { margin: 0; }
.ex-side ul a { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--text); text-decoration: none; }
.ex-side ul a:hover { text-decoration: underline; }
.ex-side small { color: var(--text-3); }
.next-ex { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); }
.next-ex img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.next-ex small { color: var(--text-2); font-size: 13.5px; }


/* an example's "How it's built": each step beside the picture of the scene built up to it */
.built { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 22px; row-gap: 20px; margin: 0 0 26px; counter-reset: step; }
.built > ol.steps { display: contents; }
.article .built > ol > li { grid-column: 2; grid-row: var(--r); margin: 0; align-self: start; }
.built > figure { grid-column: 1; grid-row: var(--r); margin: 0; }
.built > figure img { border-radius: 10px; }
.built .shot-box { min-height: 0; aspect-ratio: 16 / 10; padding: 10px; font-size: 11.5px; }
.built .shot-box span { padding: 4px 8px; }
.built figcaption { display: none; }

/* --- the scripting API ------------------------------------------------------------------------- */
.api .api-group { margin-top: 56px; }
.api .member { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.api .member h3 { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 18px; }
.api .member h3 code { background: none; border: 0; padding: 0; font-size: 17px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.api pre.sig { padding: 10px 14px; margin-bottom: 14px; }
.api pre.sig code { white-space: pre-wrap; overflow-wrap: anywhere; }
.api[data-sig="ts"] .js-only, .api[data-sig="js"] .ts-only { display: none; }
code.ty { color: var(--key); }
.api .returns, .api .seen { font-size: 14.5px; color: var(--text-2); }
.api .returns strong { color: var(--text); }
.event-cards { list-style: none; padding: 0 !important; margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.event-cards li { margin: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 14.5px; }
.event-cards code.ev { align-self: flex-start; font-size: 13px; }
.event-cards small { color: var(--text-3); font-size: 12.5px; }
.event-cards span { color: var(--text-2); }
/* named by type, as Unreal's C++ reference is: a type's page (MotionScene), a member's
   (MotionScene.animate), tables of members by group, and the facts of each */
.api-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.api-head h1 { margin: 0; }
.api-head h1 code { background: none; border: 0; padding: 0; font: 500 clamp(28px, 4.2vw, 40px)/1.15 var(--mono); letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.api-head h1 .dim, .api code .dim { color: var(--text-3); }
.api-head .chip.kind { font-family: var(--mono); font-size: 12px; }
.api-head + .intro { margin-top: 10px; }
.api .api-sect { margin-top: 32px; }
.api .api-sect > h2 { margin-top: 0; }
.api .api-sub { margin: 18px 0 10px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.api h2.api-sub { font-size: 22px; color: var(--text); }
.api .api-table table { min-width: 0; table-layout: fixed; width: 100%; }
.api .api-table code { white-space: normal; overflow-wrap: anywhere; }
.api .api-table th:first-child { width: 30%; }
.api .api-members th:first-child:nth-last-child(2) { width: 56%; }
.api .api-members th:first-child:nth-last-child(3), .api .api-params th:first-child { width: 22%; }
.api .api-members th:nth-child(2):nth-last-child(2), .api .api-params th:nth-child(2) { width: 30%; }
.api .api-index th:nth-child(2) { width: 14%; }
.api .api-table td { vertical-align: top; }
.api .api-table code.sig { background: none; border: 0; padding: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.api .api-table code.sig > a { font-weight: 500; }
.api .api-table .chip { font-size: 11px; }
.api .row-kind { display: none; }
.api code .ty-link, .api .api-table .ty-link { color: var(--accent); }
.table.facts th[scope="row"] { width: 190px; color: var(--text-2) !important; }
.table.facts code { overflow-wrap: anywhere; }
.api .none { color: var(--text-3); }
.api-menu li.sub a { padding-left: 22px; font-family: var(--ui); font-size: 13px; color: var(--text-2); }
.api-menu ol ol { margin: 0; padding: 0; list-style: none; }
/* a phone: the facts a stacked list; each member a row to tap (its name and kind, its signature,
   its words), the whole row its link; nothing goes sideways */
@media (max-width: 700px) {
  .table.facts, .api .api-members { overflow-x: visible; }
  .table.facts tr, .table.facts th, .table.facts td { display: block; width: auto !important; }
  .table.facts th[scope="row"] { padding: 10px 14px 0 !important; border-bottom: 0 !important; font-size: 12px; }
  .table.facts td { padding: 2px 14px 10px; }
  .api .api-members thead { display: none; }
  .api .api-members table, .api .api-members tbody { display: block; }
  .api .api-members tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; position: relative; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .api .api-members td { display: block; padding: 0; border: 0; }
  .api .api-members td:first-child { display: contents; }
  .api .api-members td:first-child code.sig { grid-column: 1; }
  .api .api-members .row-kind { display: block; grid-column: 2; grid-row: 1; font: 12px var(--mono); color: var(--text-3); }
  .api .api-members td:not(:first-child) { grid-column: 1 / -1; font-size: 14px; }
  .api .api-members code.sig > a::after { content: ""; position: absolute; inset: 0; }
  .api .api-members code.ty { font-size: 12.5px; color: var(--text-3); }
  .api .api-params td, .api .api-params th { padding: 8px 10px; }
}
.sig-switch { display: flex; gap: 2px; margin-top: 18px; padding: 3px; border-radius: 9px; background: var(--sunk); border: 1px solid var(--line); }
.sig-switch button { flex: 1; min-height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font: 500 12.5px var(--ui); cursor: pointer; }
.sig-switch button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.15); }


/* code made from Motion's definitions wraps instead of being cut off: each line goes on under
   itself, two characters in from where it starts */
.article pre.wrap { overflow-x: visible; }
.article pre.wrap code { display: block; white-space: normal; }
pre.wrap .ln { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding-left: calc((var(--i) + 2) * 1ch); text-indent: calc((var(--i) + 2) * -1ch); min-height: 1.65em; }
.api pre.sig .ln { min-height: 0; }
/* written code keeps its lines and scrolls; a shadow at an edge says there's more that way */
.article pre:not(.wrap) {
  background:
    linear-gradient(to right, var(--sunk) 30%, transparent) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--sunk) 30%, transparent) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 26%, transparent), transparent) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 26%, transparent), transparent) right center / 16px 100% no-repeat scroll,
    var(--sunk);
}
/* a node's pin named in its description, as a chip with its glyph and Studio's name for it */
.pin-ref { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px 0 6px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--text); font: 500 0.82em/1.6 var(--ui); white-space: nowrap; vertical-align: 0.08em; }
.pin-ref .ng-ring { width: 9px; height: 9px; }
.pin-ref .ng-glyph { width: 11px; height: 11px; opacity: 1; }

/* --- in the page editor: what's made from Motion's definitions is locked, and says so ---------- */
.ed-on [data-generated] { position: relative; outline: 1px dashed var(--line-strong); outline-offset: 6px; border-radius: 6px; opacity: .78; }
.ed-on [data-generated]::before { content: attr(data-generated); position: absolute; top: -18px; right: 0; z-index: 4; padding: 0 8px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line); color: var(--text-2); font: 600 11px/18px var(--ui); pointer-events: none; }
.ed-on .callout.ed-block, .ed-on .try-it.ed-block { outline-offset: 4px; }

/* --- the redesign on smaller screens --------------------------------------------------------- */
@media (max-width: 1180px) {
  .ex-body { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
}
@media (max-width: 980px) {
  .paths ul.link-cards, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .all-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-body { grid-template-columns: minmax(0, 1fr); }
  .ex-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 760px) {
  .article.rh { padding-top: 28px; }
  .paths ul.link-cards, .look ul.link-cards, .tiles, .used-in, .event-cards, .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .docs-grid.no-toc { grid-template-columns: minmax(0, 1fr); }
  .all-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .entry-facts { grid-template-columns: minmax(0, 1fr); }
  .entry-pic { flex-basis: 100%; }
  .node-head .nodebox { width: 100%; justify-content: flex-start; }
  .ex-hero { min-height: 300px; }
  .built { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .built > figure { grid-column: 1; grid-row: calc(var(--r) * 2 - 1); max-width: 280px; }
  .article .built > ol > li { grid-column: 1; grid-row: calc(var(--r) * 2); margin-bottom: 14px; }
  .ex-hero-words { padding-top: 90px; }
  ul.az a { grid-template-columns: minmax(0, 1fr); }
  ul.az a small { grid-column: 1; }
  .big-search .search { height: 50px; }
  .results a { grid-template-columns: minmax(0, 1fr); }
  .results a small { grid-column: 1; }
}

/* --- smaller screens ------------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .ex-grid.shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .toc { display: none; }
  .article { padding-left: 40px; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene, .scene.big { grid-column: span 1; }
  .scene.big:first-child { grid-column: span 2; }
  .facts, .downloads { grid-template-columns: 1fr; }
  .hub { grid-template-columns: 1fr; padding: 36px 28px; }
  .cards.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 56px); }
  .band { padding-top: 60px; padding-bottom: 60px; }
  .scenes { gap: 18px 12px; }
  .scene p { display: none; }
  .scene figcaption span { display: none; }
  .docs-grid { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
  .side-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 14px; font: 500 15px var(--ui); cursor: pointer; }
  .side-toggle::after { content: ""; width: 7px; height: 7px; border: solid var(--text-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .side-body { display: none; padding-top: 12px; }
  .side.open .side-body { display: block; }
  .article { padding: 24px 0 56px; }
  .article h1 { font-size: 36px; }
  .article .intro { font-size: 18px; }
  .cards, .cards.three, .ex-grid, .ex-grid.shots { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
  .nodebox { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* --- the front page's search, the stores' "Already own it?", the footer ------------------------ */
.home-search { position: relative; margin-top: 22px; max-width: 360px; }
.home-search .results { position: absolute; left: 0; right: 0; z-index: 5; max-height: 60vh; overflow: auto; }
.results a.on { background: var(--accent-dim); border-radius: 6px; }
.dl[hidden] { display: none; }
.owned { margin: 22px 0 0; color: var(--text-2); }
.m-foot h2 { font: 500 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: 6px 0 12px; }
.m-foot nav { gap: 0; }
.m-foot nav a { min-height: 44px; }
@media (min-width: 861px) { .m-foot { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } }

/* --- the 404 and the legal pages ---------------------------------------------------------------- */
/* the gutter, not --pad: --pad grows with the window to centre full-width bands, and inside a box
   already held to 640px it ate the whole width from about 1900 pixels up */
.lost { max-width: 640px; margin: 0 auto; padding: 96px var(--gutter) 120px; }
.lost h1 { font: 400 clamp(34px, 4.2vw, 50px)/1.05 var(--head); letter-spacing: -0.03em; margin: 0 0 16px; }
.lost p { color: var(--text-2); margin: 0 0 24px; }
.lost .search { margin-bottom: 8px; }
.lost .row { margin-top: 28px; }