/* The help center, in the landing page's look: its fonts, its dark warm ground, the pink spark, the pill with the voice
   meter, the playhead with its timecode and the timeline's lanes. Each topic takes one of the brand's and the lanes'
   colors (pink, teal, gold, violet, sand). The hub has the search and a card per topic; a topic's page has all its
   articles one after another, beside the editor's two lists: the topics' glyphs and the open topic's articles. Reading
   comes first: body text is calm and high in contrast, and nothing that moves ever moves the words being read. Dark first,
   with a light version for visitors who prefer it. */

/* The two typefaces, served from this site (/fonts, SIL Open Font License, the same files as the landing page). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/hanken-grotesk-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/hanken-grotesk-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --paper: #1A1714; --well: #100D0B; --surface: #241F1B; --raise: #2E2823; --ink: #F6F2EC; --text: #ECE5DB; --muted: #B6ACA0; --faint: #8F857A;
  --rule: rgba(246, 242, 236, .12); --rule-strong: rgba(246, 242, 236, .22);
  --pink: #F0537A; --teal: #2BC6B5; --gold: #F0B526; --violet: #A07CF5; --sand: #D9C1A0;
  /* Each color as text on the ground (the light version darkens them to stay readable). */
  --pink-t: #F46C8D; --teal-t: #3DD3C2; --gold-t: #F3C14D; --violet-t: #B59BF8; --sand-t: #DDC7A8;
  /* What sits on the pink, in either version: the landing page's dark paper. */
  --on: #1A1714; --cream: #F6F2EC;
  --shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --gut: clamp(16px, 5vw, 72px);
  --bar-h: 72px;
  --a: var(--pink); --at: var(--pink-t);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --paper: #F7F3EE; --well: #ECE5DC; --surface: #FFFFFF; --raise: #F1EBE3; --ink: #1F1A16; --text: #2A231E; --muted: #5F564D; --faint: #7D7268;
    --rule: rgba(31, 26, 22, .12); --rule-strong: rgba(31, 26, 22, .22);
    --pink-t: #C42A53; --teal-t: #0B7368; --gold-t: #855B00; --violet-t: #6E46D8; --sand-t: #7A5C37;
    --shadow: 0 30px 60px -36px rgba(31, 26, 22, .35);
    color-scheme: light;
  }
}
[data-accent="pink"] { --a: var(--pink); --at: var(--pink-t); }
[data-accent="teal"] { --a: var(--teal); --at: var(--teal-t); }
[data-accent="gold"] { --a: var(--gold); --at: var(--gold-t); }
[data-accent="violet"] { --a: var(--violet); --at: var(--violet-t); }
[data-accent="sand"] { --a: var(--sand); --at: var(--sand-t); }

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Each place a link lands on (a card, an article) keeps clear of the bar with its own scroll-margin-top. */
html { background: var(--well); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--paper); color: var(--text); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
ul, ol { list-style: none; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.d { font-family: var(--display); font-optical-sizing: auto; font-weight: 700; font-stretch: 82%; letter-spacing: -.028em; line-height: .92; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 100; left: 12px; top: -64px; padding: 10px 16px; border-radius: 12px; background: var(--pink); color: var(--on); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- the pill button with the voice meter, as on the landing page: pointing at it wipes cream across and the meter talks ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 9px 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--pink); color: var(--on); text-decoration: none; white-space: nowrap;
  font: 700 17px/1 var(--display); font-stretch: 88%; letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 44px -18px rgba(240, 83, 122, .75);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cream);
  clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.65, 0, .25, 1);
}
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0); }
.btn:active { transform: scale(.97); }
.btn-meter {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  width: 38px; height: 38px; border-radius: 50%; background: var(--on);
}
.btn-meter b { width: 3px; height: 9px; border-radius: 2px; background: var(--pink); }
.btn-meter b:nth-child(2) { height: 17px; }
.btn-meter b:nth-child(3) { height: 12px; }
.btn-meter b:nth-child(4) { height: 6px; }
:is(.btn:hover, .btn:focus-visible, .is-talking) .btn-meter b { animation: talk .7s ease-in-out infinite alternate; }
:is(.btn:hover, .btn:focus-visible, .is-talking) .btn-meter b:nth-child(2) { animation-delay: -.25s; }
:is(.btn:hover, .btn:focus-visible, .is-talking) .btn-meter b:nth-child(3) { animation-delay: -.5s; }
:is(.btn:hover, .btn:focus-visible, .is-talking) .btn-meter b:nth-child(4) { animation-delay: -.1s; }
@keyframes talk { from { transform: scaleY(.35); } to { transform: scaleY(1.15); } }
.btn-sm { height: 44px; padding: 0 6px 0 18px; gap: 10px; font-size: 15.5px; }
.btn-sm .btn-meter { width: 32px; height: 32px; }
.btn-sm .btn-meter b:nth-child(2) { height: 13px; }

/* ---------- the bar along the top: clear over the page's head, dark and blurred once the page moves ---------- */
.bar {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px;
  padding: 16px var(--gut); border-bottom: 1px solid transparent;
  transition: padding .4s, background-color .4s, border-color .4s;
}
.bar.solid {
  padding-top: 9px; padding-bottom: 9px; background-color: color-mix(in srgb, var(--well) 84%, transparent); border-bottom-color: var(--rule);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.bar-name { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); font: 700 22px/1 var(--display); font-stretch: 90%; letter-spacing: -.01em; }
.bar-name svg { width: 25px; height: 25px; color: var(--pink); }
.bar-help { padding: 7px 13px; border-radius: 999px; background: var(--raise); color: var(--ink); font: 600 14px/1 var(--body); text-decoration: none; box-shadow: inset 0 0 0 1px var(--rule); }
.bar-help:hover { box-shadow: inset 0 0 0 1px var(--pink); }
.bar-links { margin-left: auto; display: flex; gap: 22px; font-size: 15px; }
.bar-links a { color: var(--muted); text-decoration: none; }
.bar-links a:hover { color: var(--ink); }
.bar-search { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
/* On a topic page, how far through it you are: a pink playhead along the bar's lower edge. */
.bar-progress { display: none; }
.is-topic .bar-progress {
  display: block; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--read, 0) * 100%);
  background: var(--pink); box-shadow: 0 0 10px rgba(240, 83, 122, .7); pointer-events: none;
}
.is-topic .bar:not(.solid) .bar-progress { opacity: 0; }
.is-topic .bar-progress::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 9px; border-radius: 3px 3px 6px 6px; background: var(--pink); }

/* ---------- the hub's head: big words left, the search as a message to your agent, questions people ask beside ---------- */
.hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; align-items: end;
  min-height: min(90vh, 980px); padding: calc(var(--bar-h) + 6vh) var(--gut) 8vh;
}
.hero-main { grid-column: 1 / 9; position: relative; z-index: 3; }
.hub-h { font-size: clamp(64px, 10.6vw, 184px); font-weight: 800; font-stretch: 75%; line-height: .84; letter-spacing: -.03em; color: var(--ink); }
.hub-h span { display: block; padding-bottom: .04em; }
.hub-h span:nth-child(2) { color: var(--pink); padding-left: .55em; }
.hub-sub { margin-top: 26px; max-width: 42ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.prompt { margin-top: 36px; max-width: 780px; }
.prompt-field { position: relative; }
.prompt-box {
  display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 16px;
  border-radius: 30px 30px 30px 8px; background: var(--surface); border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow); transition: border-color .25s, box-shadow .25s;
}
.prompt-box:focus-within { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(240, 83, 122, .16), var(--shadow); }
.prompt-you { flex: none; padding: 6px 11px; border-radius: 999px; background: var(--raise); color: var(--muted); font: 600 13px/1 var(--body); }
.prompt input {
  flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; color: var(--ink);
  font: 500 clamp(17px, 1.5vw, 21px) var(--body); caret-color: var(--pink); appearance: none; -webkit-appearance: none;
}
.prompt input::placeholder { color: var(--faint); opacity: 1; }
.prompt input:focus { outline: none; }
.prompt input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.prompt .btn-meter { width: 52px; height: 52px; background: var(--pink); }
.prompt .btn-meter b { background: var(--on); }
.prompt-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 15px; }
.prompt-try span { margin-right: 4px; }
.prompt-try button {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: transparent; color: var(--text);
  font: 500 15px/1 var(--body); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s;
}
.prompt-try button:hover { border-color: var(--pink); color: var(--ink); background: color-mix(in srgb, var(--pink) 10%, transparent); }

/* Live results drop under the field, each with its topic's color as a clip on the left. */
.results {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 10px); max-height: min(62vh, 560px); overflow-y: auto;
  padding: 8px; border-radius: 22px; background: var(--surface); border: 1px solid var(--rule-strong); box-shadow: var(--shadow);
}
.results[hidden] { display: none; }
.results li { animation: pop .32s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.results a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 11px 14px 12px 24px;
  border-radius: 14px; text-decoration: none; color: var(--ink); outline-offset: -2px;
}
.results a::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 4px; border-radius: 3px; background: var(--a); }
.results a:hover, .results a:focus-visible { background: var(--raise); }
.r-title { font: 600 17px/1.3 var(--body); }
.r-topic { grid-column: 2; grid-row: 1; align-self: start; margin-top: 2px; color: var(--at); font: 600 13px/1.3 var(--body); white-space: nowrap; }
.r-answer { grid-column: 1 / -1; color: var(--muted); font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.results mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--pink) 24%, transparent); color: var(--ink); }
.results .none { padding: 14px 16px; color: var(--muted); }

.hero-side { grid-column: 9 / 13; align-self: end; display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.hero-side-h { color: var(--muted); font: 600 14px/1 var(--body); text-align: right; }
.chats { display: grid; gap: 16px; }
.chats li:nth-child(2) { margin-right: 9%; }
.chats li:nth-child(3) { margin-right: 3%; }
.chat { display: grid; justify-items: end; gap: 8px; text-decoration: none; }
.chat-q {
  padding: 12px 18px 13px; border-radius: 22px 22px 6px 22px; background: var(--cream); color: var(--on);
  font: 600 17px/1.3 var(--body); box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .7); transition: background-color .25s;
}
@media (prefers-color-scheme: light) { .chat-q { background: var(--ink); color: var(--paper); } }
.chat-a { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; line-height: 1.3; text-align: right; transition: color .25s; }
.chat-a svg { flex: none; width: 15px; height: 15px; color: var(--pink); }
.chat:hover .chat-q, .chat:focus-visible .chat-q { background: var(--pink); color: var(--on); }
.chat:hover .chat-a, .chat:focus-visible .chat-a { color: var(--ink); }
/* The landing page's scroll cue: a playhead keeps dropping down a short track while its timecode runs. */
.cue { display: flex; align-items: flex-end; justify-content: flex-end; gap: 14px; margin-top: 3vh; text-decoration: none; color: var(--ink); }
.cue-track { position: relative; order: 2; width: 2px; height: 64px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.cue-track i {
  position: absolute; left: 0; top: 0; width: 2px; height: 26px; border-radius: 2px;
  background: linear-gradient(rgba(240, 83, 122, 0), var(--pink)); box-shadow: 0 0 10px rgba(240, 83, 122, .8);
  animation: cue-drop 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes cue-drop { 0% { transform: translateY(-28px); } 70%, 100% { transform: translateY(66px); } }
.cue-text { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cue-text b { font: 600 14px/1 var(--body); }
.cue-tc, .tc, .tl-tc { font-family: var(--display); font-stretch: 90%; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cue-tc { font-size: 13px; line-height: 1; color: var(--pink-t); }
.cue:hover b { color: var(--pink-t); }

/* The head's one entrance: the two lines cut in from the left, then the questions come in as messages. */
@media (prefers-reduced-motion: no-preference) {
  .js .hub-h span { animation: cut-in .95s cubic-bezier(.65, 0, .25, 1) both; }
  .js .hub-h span:nth-child(2) { animation-delay: .16s; }
  .js .hub-sub, .js .hero .prompt { animation: rise .8s cubic-bezier(.2, .8, .2, 1) .45s both; }
  .js .hero .prompt { animation-delay: .58s; }
  .js .chats li { animation: msg .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.9s + var(--i) * .5s); }
  .js .chats .chat-a { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(1.2s + var(--i) * .5s); }
}
@keyframes cut-in { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -10% -20% 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes msg { from { opacity: 0; transform: translateY(16px) scale(.94); transform-origin: 100% 100%; } }

/* ---------- the topics: cards two or three to a row, leaning one way then the other, each with its clip ---------- */
.topics {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px);
  padding: 0 var(--gut) 11vh;
}
.topic {
  grid-column: span var(--span, 4); position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 26px; background: var(--surface); border: 1px solid var(--rule); overflow: hidden;
  scroll-margin-top: calc(var(--bar-h) + 20px);
}
.topic.is-wide { flex-direction: row; }
.topic.is-wide.is-right { flex-direction: row-reverse; }
.topic.is-wide .stage { flex: 0 0 47%; min-height: 420px; }
.topic.is-wide .topic-body { flex: 1; padding: 34px 34px 30px; }
.stage .wide { width: 84%; height: auto; }
/* Beside the list, the clip stands in the middle of its stage, clear of the lanes, as wide as the stage allows. */
.topic.is-wide .stage .clip { top: calc(50% - 30px); width: 82%; height: auto; transform: translate(-50%, -50%) rotate(var(--tilt)); }
.topic.is-wide:hover .stage .clip { transform: translate(-50%, -50%) rotate(0deg) scale(1.03); }

/* The stage: the clip in its frame on the topic's color, a little timeline along its foot, the playhead crossing it. */
.stage {
  position: relative; flex: 1 0 auto; min-height: 270px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--a) 34%, transparent), transparent 70%),
    var(--well);
}
.stage .clip {
  /* A little taller than the stage, so it runs off the foot (a wide frame goes by its width instead). */
  position: absolute; z-index: 1; left: 50%; top: 26px; height: 112%; aspect-ratio: var(--ar);
  transform: translateX(-50%) rotate(var(--tilt)); transform-origin: 50% 30%;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  background: #070605; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(246, 242, 236, .1);
}
.topic:hover .stage .clip { transform: translateX(-50%) rotate(0deg) scale(1.03); }
.stage .clip > img, .stage .clip > video { position: absolute; width: auto; height: auto; max-width: none; object-fit: cover; }
.stage .clip > video { opacity: 0; transition: opacity .4s; }
.stage .clip.is-playing > video { opacity: 1; }
.stage .phone { border-radius: 9% / 5%; }
.stage .phone > img, .stage .phone > video { inset: 1.25% 2.2%; width: 95.6%; height: 97.5%; border-radius: 7.5% / 4.2%; }
.stage .phone::after { content: ""; position: absolute; z-index: 2; top: 3%; left: 50%; width: 26%; height: 2.4%; transform: translateX(-50%); border-radius: 99px; background: #070605; }
.stage :is(.pane, .wide) { border-radius: 14px; background: #241F1B; }
.stage :is(.pane, .wide) > img, .stage :is(.pane, .wide) > video { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 9px; }
/* A look sweeping across the clip, the pink edge riding the wipe, as a filter comes in on a Wipe. */
@property --wipe { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.stage .look {
  position: absolute; z-index: 2; inset: 1.25% 2.2%; border-radius: 7.5% / 4.2%; pointer-events: none;
  -webkit-backdrop-filter: sepia(.45) saturate(2.3) hue-rotate(-14deg) contrast(1.16);
  backdrop-filter: sepia(.45) saturate(2.3) hue-rotate(-14deg) contrast(1.16);
  clip-path: inset(0 0 0 var(--wipe));
}
.stage .look-edge { position: absolute; z-index: 3; top: 1.25%; bottom: 1.25%; width: 2px; left: calc(2.2% + var(--wipe) * .956); background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.stage .clip:has(.look) { animation: wipe 5.5s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes wipe { 0%, 8% { --wipe: 96%; } 46%, 58% { --wipe: 4%; } 96%, 100% { --wipe: 96%; } }

.lanes {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 34px 16px 14px;
  background: linear-gradient(color-mix(in srgb, var(--well) 0%, transparent), color-mix(in srgb, var(--well) 94%, transparent) 46%);
}
.lanes span { position: relative; height: 9px; }
.lanes b { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); border-radius: 3px; background: color-mix(in srgb, var(--a) 78%, transparent); }
.lanes span:nth-child(2) b { background: color-mix(in srgb, var(--ink) 24%, transparent); }
.lanes span:nth-child(3) b { background: color-mix(in srgb, var(--a) 34%, transparent); }
.stage .head { position: absolute; z-index: 5; bottom: 9px; height: 52px; width: 2px; left: calc(16px + var(--t, 0) * (100% - 32px)); background: var(--pink); box-shadow: 0 0 10px rgba(240, 83, 122, .6); }
.stage .head::before { content: ""; position: absolute; left: -5px; top: -2px; width: 12px; height: 9px; border-radius: 3px 3px 6px 6px; background: var(--pink); }
.stage .tc { position: absolute; z-index: 5; top: 14px; right: 14px; padding: 5px 9px; border-radius: 999px; background: rgba(16, 13, 11, .66); color: #F6F2EC; font-size: 12px; line-height: 1; }
.stage.is-motif .head { animation: run 4.4s linear infinite; }
@keyframes run { from { left: 16px; } to { left: calc(100% - 16px); } }

/* The drawn loops, for topics with no clip that fits. */
.motif { position: absolute; z-index: 1; inset: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px 20px 0; }
.m-words { font: 800 clamp(28px, 2.8vw, 42px)/1 var(--display); font-stretch: 76%; letter-spacing: -.02em; color: var(--ink); text-align: center; }
.m-words span { display: inline-block; padding: .06em .16em .1em; border-radius: .16em; opacity: .2; animation: word 4.4s infinite; }
.m-words span:nth-child(2) { animation-delay: .55s; }
.m-words span:nth-child(3) { animation-delay: 1.1s; }
.m-words span:nth-child(4) { animation-delay: 1.65s; }
@keyframes word {
  0% { opacity: .2; transform: none; background: transparent; color: var(--ink); }
  5%, 12% { opacity: 1; transform: translateY(-4px) scale(1.08); background: var(--a); color: var(--on); }
  20%, 82% { opacity: 1; transform: none; background: transparent; color: var(--ink); }
  92%, 100% { opacity: .2; }
}
.m-wave { display: flex; align-items: center; gap: 3px; width: min(86%, 360px); height: 70px; }
.m-wave b { flex: 1; height: var(--h); border-radius: 2px; background: color-mix(in srgb, var(--a) 85%, transparent); animation: talk 1s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.m-wave b:nth-child(3n) { animation-delay: -.3s; }
.m-wave b:nth-child(3n+1) { animation-delay: -.65s; }
.m-wave b:nth-child(4n) { animation-duration: 1.3s; }
.m-reel { display: flex; gap: 8px; }
.m-reel i { width: 46px; aspect-ratio: 9 / 16; border-radius: 7px; background: linear-gradient(160deg, color-mix(in srgb, var(--a) 60%, #3a302a), #1a1512 80%); box-shadow: 0 0 0 1px rgba(246, 242, 236, .12); opacity: .35; animation: frame 4.4s infinite; }
.m-reel i:nth-child(2) { animation-delay: .9s; }
.m-reel i:nth-child(3) { animation-delay: 1.8s; }
@keyframes frame { 0% { opacity: .35; } 8%, 80% { opacity: 1; } 92%, 100% { opacity: .35; } }
@property --ring { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.m-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px; border-radius: 999px;
  background: var(--pink); color: var(--on); font: 700 17px/1 var(--display); font-stretch: 88%;
  animation: pill 4.4s infinite;
}
.m-ring { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--on) var(--ring), rgba(26, 23, 20, .25) 0); -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px); animation: ring 4.4s linear infinite; }
.m-done { display: none; }
@keyframes ring { 0% { --ring: 0%; } 78%, 100% { --ring: 100%; } }
@keyframes pill { 0%, 78% { background: var(--pink); } 80%, 100% { background: var(--teal); } }

.topic-body { display: flex; flex-direction: column; padding: 24px 26px 22px; }
.topic h2 { font-size: clamp(28px, 2.4vw, 40px); font-weight: 800; font-stretch: 78%; line-height: .96; letter-spacing: -.02em; color: var(--ink); }
.topic-open { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.topic-open::after { content: ""; position: absolute; z-index: 6; inset: 0; border-radius: 26px; }
.topic-open:focus-visible { outline: none; }
.topic-open:focus-visible::after { outline: 2px solid var(--pink); outline-offset: -3px; }
.topic-go { position: relative; flex: none; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; background: color-mix(in srgb, var(--a) 16%, transparent); transition: background-color .25s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.topic-go::before { content: ""; position: absolute; inset: 8px; background-color: var(--at); -webkit-mask: url(/docs/icons/chevronRight.svg) center / contain no-repeat; mask: url(/docs/icons/chevronRight.svg) center / contain no-repeat; }
.topic:hover .topic-go, .topic-open:focus-visible .topic-go { background: var(--a); transform: translateX(3px); }
.topic:hover .topic-go::before, .topic-open:focus-visible .topic-go::before { background-color: var(--on); }
.topic-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--a) 18%, transparent); color: var(--at); }
.topic-icon svg, .rail-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The app's own icons (site/docs/icons), drawn as a mask so they take the color around them. */
.glyph { flex: none; display: block; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.blurb { position: relative; z-index: 7; margin: 12px 0 16px; max-width: 46ch; color: var(--muted); font-size: 15.5px; line-height: 1.5; pointer-events: none; }
.topic-body ul { position: relative; z-index: 7; }
.topic li a { position: relative; display: block; padding: 10px 4px 10px 20px; border-top: 1px solid var(--rule); color: var(--text); font-size: 16px; line-height: 1.35; text-decoration: none; transition: color .2s; }
.topic li a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: color-mix(in srgb, var(--a) 60%, transparent); transition: height .25s, width .25s, margin .25s, background-color .25s; }
.topic li a:hover, .topic li a:focus-visible { color: var(--ink); }
.topic li a:hover::before, .topic li a:focus-visible::before { width: 3px; height: 22px; margin-top: -11px; margin-left: 2px; background: var(--pink); }

/* ---------- the hub's timeline along the bottom: a clip per topic, the pink playhead where you are ---------- */
.tl {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: stretch; gap: 14px; padding: 0 16px 0 14px;
  background: color-mix(in srgb, var(--well) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule); transform: translateY(100%); visibility: hidden;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s .5s;
}
.tl.on { transform: none; visibility: visible; transition-delay: 0s; }
.tl-tc { flex: none; align-self: center; width: 104px; color: var(--ink); font-size: 15px; line-height: 1; }
.tl-lanes { position: relative; flex: 1; min-width: 0; }
.tl-clips { position: absolute; left: 0; right: 0; top: 8px; height: 22px; display: flex; gap: 3px; }
.tl-clip {
  flex-basis: 0; min-width: 0; padding: 0 8px; border-radius: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--a) 20%, var(--raise)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 36%, transparent);
  color: var(--muted); font: 600 11.5px/22px var(--body); text-decoration: none;
}
.tl-clip:hover { color: var(--ink); }
.tl-clip.on { background: color-mix(in srgb, var(--a) 52%, var(--raise)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--a); }
.tl-wave { position: absolute; left: 0; right: 0; top: 34px; height: 13px; display: flex; align-items: center; gap: 2px; }
.tl-wave b { flex: 1; height: var(--h); border-radius: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.tl-head { position: absolute; top: 2px; bottom: 4px; left: 0; width: 0; pointer-events: none; will-change: transform; }
.tl-head::before { content: ""; position: absolute; left: -1px; top: 4px; bottom: 0; width: 2px; background: var(--pink); }
.tl-head::after { content: ""; position: absolute; left: -6px; top: 0; width: 12px; height: 9px; border-radius: 3px 3px 6px 6px; background: var(--pink); }

/* ---------- a topic's page: the editor's two lists on the left, every article of the topic beside them ---------- */
.page {
  display: grid; grid-template-columns: 318px minmax(0, 720px); justify-content: center; column-gap: clamp(40px, 5vw, 80px);
  max-width: 1280px; margin: 0 auto; padding: calc(var(--bar-h) + 44px) var(--gut) 12vh;
}
/* The glyphs open another topic's page; the panel beside them lists this topic's articles, the one you are reading marked
   by the playhead as you scroll (help.js). */
.rail {
  position: sticky; z-index: 20; top: calc(var(--bar-h) + 20px); align-self: start; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px;
  max-height: calc(100vh - var(--bar-h) - 40px);
}
.rail-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 4px 0; border-right: 1px solid var(--rule); overflow-y: auto; scrollbar-width: none; }
.rail-list::-webkit-scrollbar, .rail-arts::-webkit-scrollbar { display: none; }
.rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 7px; border-radius: 10px;
  color: var(--muted); font: 600 10.5px/1.1 var(--body); text-align: center; text-decoration: none; transition: background-color .2s, color .2s;
}
.rail-item:hover { background: var(--raise); color: var(--ink); }
.rail-item[aria-current] { background: color-mix(in srgb, var(--a) 18%, transparent); color: var(--at); }
.rail-panel { min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; padding: 2px 4px 8px 0; }
.rail-title { margin: 4px 0 14px; font-size: 26px; font-weight: 800; font-stretch: 78%; line-height: .98; }
.rail-title a { color: var(--ink); text-decoration: none; }
.rail-title a:hover { color: var(--at); }
.rail-title::after { content: ""; display: block; width: 34px; height: 6px; margin-top: 12px; border-radius: 3px; background: var(--a); }
.rail-arts a { position: relative; display: block; padding: 8px 10px 8px 16px; border-radius: 9px; color: var(--muted); font-size: 15px; line-height: 1.35; text-decoration: none; transition: background-color .2s, color .2s; }
.rail-arts a:hover { color: var(--ink); background: var(--raise); }
.rail-arts a[aria-current] { color: var(--ink); background: color-mix(in srgb, var(--a) 12%, transparent); }
.rail-arts a[aria-current]::before { content: ""; position: absolute; left: 4px; top: 11px; bottom: 8px; width: 2px; background: var(--pink); box-shadow: 0 0 8px rgba(240, 83, 122, .6); }
.rail-arts a[aria-current]::after { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 7px; border-radius: 2px 2px 5px 5px; background: var(--pink); }
@media (prefers-reduced-motion: no-preference) {
  .rail-arts a[aria-current]::before, .rail-arts a[aria-current]::after { animation: land .35s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes land { from { opacity: 0; transform: translateY(-6px); } }

.doc-main { min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--faint); font-size: 14px; line-height: 1.4; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--at); }
/* The page's head is the topic's card from the hub: its clip, its name and what it covers. */
.topic-head {
  position: relative; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); margin-bottom: 64px;
  border-radius: 26px; background: var(--surface); border: 1px solid var(--rule); overflow: hidden;
}
.topic-head .stage { min-height: 330px; }
.topic-head:hover .stage .clip { transform: translateX(-50%) rotate(0deg) scale(1.03); }
.topic-head .stage .wide { top: calc(50% - 30px); width: 86%; height: auto; transform: translate(-50%, -50%) rotate(var(--tilt)); }
.topic-head:hover .stage .wide { transform: translate(-50%, -50%) rotate(0deg) scale(1.03); }
.topic-head-body { display: flex; flex-direction: column; justify-content: center; padding: 30px 32px; }
.sec-count { display: flex; align-items: center; gap: 10px; color: var(--at); font: 600 14px/1 var(--body); }
.sec-count .topic-icon { width: 38px; height: 38px; border-radius: 12px; }
.sec-count .glyph { width: 20px; height: 20px; }
.topic-head h1 { margin-top: 18px; font-size: clamp(44px, 4.8vw, 72px); font-weight: 800; font-stretch: 76%; line-height: .92; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.topic-head .blurb { margin: 14px 0 0; pointer-events: auto; }

/* The articles, in full, one after another. */
.article { min-width: 0; font-size: 18px; line-height: 1.7; }
.article + .article { margin-top: 84px; padding-top: 44px; border-top: 1px solid var(--rule); }
.art-h { margin: 0 0 22px; font-size: clamp(36px, 4vw, 56px); font-weight: 800; font-stretch: 78%; line-height: .96; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.article h1 { margin: 16px 0 24px; font-size: clamp(40px, 5vw, 70px); font-weight: 800; font-stretch: 78%; line-height: .95; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.answer {
  position: relative; margin-bottom: 8px; padding: 20px 24px 21px 34px; border-radius: 20px;
  background: color-mix(in srgb, var(--a) 10%, var(--surface)); color: var(--ink); font-size: clamp(19px, 1.45vw, 21px); line-height: 1.5;
}
.answer::before { content: ""; position: absolute; left: 14px; top: 20px; bottom: 20px; width: 4px; border-radius: 4px; background: var(--a); }
.article > h3 { display: flex; align-items: center; gap: 12px; margin: 56px 0 14px; color: var(--ink); font: 700 clamp(26px, 2.3vw, 32px)/1.1 var(--display); font-stretch: 84%; letter-spacing: -.015em; }
.article > h3::before { content: ""; flex: none; width: 22px; height: 10px; border-radius: 3px; background: var(--a); }
.article h4 { margin: 32px 0 6px; color: var(--ink); font: 700 20px/1.3 var(--body); }
.article p { margin: 14px 0; }
.article b, .article strong { color: var(--ink); font-weight: 650; }
.article :is(p, li, td) a { color: var(--at); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article :is(p, li, td) a:hover { color: var(--ink); text-decoration-color: var(--pink); }
.article code { padding: 1px 6px; border-radius: 6px; background: var(--raise); color: var(--ink); font: 500 .86em ui-monospace, Menlo, monospace; }
.article kbd { padding: 1px 7px 2px; border-radius: 6px; border: 1px solid var(--rule-strong); border-bottom-width: 2px; background: var(--raise); color: var(--ink); font: 600 .84em var(--body); white-space: nowrap; }
.article ul:not([class]) { margin: 14px 0; }
.article ul:not([class]) > li { position: relative; margin: 9px 0; padding-left: 24px; }
.article ul:not([class]) > li::before { content: ""; position: absolute; left: 3px; top: .66em; width: 8px; height: 8px; border-radius: 2px; background: var(--a); }

/* Steps: numbered markers along the playhead's line, lighting up as you read past them. */
.article ol:not([class]) {
  position: relative; counter-reset: step; margin: 24px 0 28px; padding: 14px 0 0 60px;
  background: linear-gradient(var(--pink), var(--pink)) 14px 0 / 12px 9px no-repeat;
}
.article ol:not([class])::before, .article ol:not([class])::after { content: ""; position: absolute; left: 19px; top: 4px; width: 2px; border-radius: 2px; }
.article ol:not([class])::before { bottom: 24px; background: color-mix(in srgb, var(--pink) 26%, transparent); }
.article ol:not([class])::after { height: calc((100% - 28px) * var(--p, 1)); background: var(--pink); box-shadow: 0 0 12px rgba(240, 83, 122, .5); }
.js .article ol:not([class]) { --p: 0; }
.article ol:not([class]) > li { position: relative; counter-increment: step; min-height: 40px; margin: 0 0 20px; padding-top: 5px; }
.article ol:not([class]) > li:last-child { margin-bottom: 0; }
.article ol:not([class]) > li::before {
  content: counter(step); position: absolute; z-index: 1; left: -60px; top: 0; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pink) 45%, transparent);
  color: var(--muted); font: 700 18px/1 var(--display); font-stretch: 85%; font-variant-numeric: tabular-nums;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
html:not(.js) .article ol:not([class]) > li::before, .article ol:not([class]) > li.on::before {
  background: var(--pink); color: var(--on); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pink) 16%, transparent);
}

/* The two ways to do it: in the window, or as a message to your agent with a Copy button. */
.way-head { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 600 14px/1.2 var(--body); }
.win { margin: 22px 0; }
.win > .way-head { margin-bottom: 4px; }
.win > .way-head::before { content: ""; flex: none; width: 15px; height: 12px; border-radius: 3px; border: 2px solid var(--a); border-top-width: 4px; }
.ask { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 30px 0; }
.ask > .way-head::before {
  content: ""; flex: none; width: 15px; height: 14px;
  background: linear-gradient(var(--teal), var(--teal)) 0 50% / 2px 6px no-repeat, linear-gradient(var(--teal), var(--teal)) 4px 50% / 2px 14px no-repeat,
    linear-gradient(var(--teal), var(--teal)) 8px 50% / 2px 9px no-repeat, linear-gradient(var(--teal), var(--teal)) 12px 50% / 2px 5px no-repeat;
}
.ask-msg {
  position: relative; max-width: min(100%, 580px); padding: 12px 18px 14px; border-radius: 22px 22px 6px 22px;
  background: var(--cream); color: var(--on); box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .75);
}
@media (prefers-color-scheme: light) { .ask-msg { background: var(--ink); color: var(--paper); } }
.ask-you { display: block; margin-bottom: 4px; font: 500 12.5px/1.2 var(--body); opacity: .62; }
.article .ask-msg p { margin: 0; font: 600 18px/1.45 var(--body); }
.ask-msg q { quotes: none; }
.copy {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 13px 6px 10px; border: 0; border-radius: 999px;
  background: var(--on); color: var(--cream); font: 600 13px/1 var(--body); cursor: pointer; transition: background-color .2s;
}
@media (prefers-color-scheme: light) { .copy { background: var(--paper); color: var(--ink); } }
.copy::before { content: ""; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/docs/icons/copy.svg) center / contain no-repeat; mask: url(/docs/icons/copy.svg) center / contain no-repeat; }
.copy:hover { background: var(--pink); color: var(--on); }
.copy.done { background: var(--teal); color: var(--on); }
.copy.done::before { width: 10px; height: 6px; border: 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 0; background: none; -webkit-mask: none; mask: none; transform: rotate(-45deg) translate(1px, -2px); }
.copy[hidden] { display: none; }
.article .ask-more { max-width: 580px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.ways { display: grid; gap: 18px; margin: 28px 0; }
.ways .win { margin: 0; padding: 18px 22px 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--rule); }
.ways .win p { font-size: 17px; }
.ways .ask { margin: 0; align-items: stretch; }
.ways .ask > .way-head { justify-content: flex-end; }
.ways .ask-msg { max-width: none; }
@media (min-width: 1200px) { .ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .ways .ask > .way-head { justify-content: flex-start; } }

.note { position: relative; margin: 24px 0; padding: 14px 18px 15px 30px; border-radius: 16px; background: color-mix(in srgb, var(--gold) 11%, var(--surface)); font-size: 16.5px; line-height: 1.6; }
.note::before { content: ""; position: absolute; left: 13px; top: 16px; bottom: 16px; width: 4px; border-radius: 4px; background: var(--gold); }
.tips { position: relative; margin: 48px 0 0; padding: 26px 26px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--rule); overflow: hidden; }
.tips::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--teal) 0 18%, transparent 18% 19.5%, color-mix(in srgb, var(--teal) 55%, transparent) 19.5% 46%, transparent 46% 47.5%, var(--teal) 47.5% 61%, transparent 61% 62.5%, color-mix(in srgb, var(--teal) 55%, transparent) 62.5% 100%);
}
.tips h3 { margin-bottom: 6px; color: var(--ink); font: 700 23px/1.1 var(--display); font-stretch: 85%; }
.article .tips ul > li { padding-left: 26px; font-size: 16.5px; }
.article .tips ul > li::before { left: 0; top: .3em; width: 15px; height: 15px; border-radius: 0; background: var(--teal); -webkit-mask: url(/docs/icons/sparkle.svg) center / contain no-repeat; mask: url(/docs/icons/sparkle.svg) center / contain no-repeat; }
.t-wrap { margin: 24px 0; overflow-x: auto; border: 1px solid var(--rule); border-radius: 16px; }
table.t { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
table.t th { padding: 11px 16px; background: var(--surface); color: var(--ink); font: 700 15px/1.3 var(--display); font-stretch: 88%; text-align: left; white-space: nowrap; }
table.t td { padding: 11px 16px; border-top: 1px solid var(--rule); vertical-align: top; }
table.t td:first-child { color: var(--ink); font-weight: 600; }

/* Figures in a small editor window; until a shot is recorded, a drawing of the editor holds its place. */
.shot { margin: 32px 0; }
.frame { position: relative; overflow: hidden; border-radius: 16px; background: var(--well); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); }
.frame-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); }
.frame-bar i:nth-child(2) { background: var(--gold); }
.frame-bar i:nth-child(3) { background: var(--teal); }
.frame-bar span { margin-left: auto; color: var(--muted); font: 600 12px/1 var(--body); }
.frame > img, .frame > video { width: 100%; height: auto; }
.ph { display: grid; grid-template-columns: 24% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 30%; gap: 6px; aspect-ratio: 2 / 1; padding: 8px; }
.ph-side { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 9px; background: var(--surface); }
.ph-side b { height: 7px; border-radius: 4px; background: var(--rule-strong); }
.ph-side b:nth-child(1) { width: 60%; background: color-mix(in srgb, var(--a) 60%, transparent); }
.ph-side b:nth-child(3) { width: 82%; }
.ph-side b:nth-child(4) { width: 70%; }
.ph-side b:nth-child(5) { width: 46%; }
.ph-view { display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--well) 60%, #000); }
@media (prefers-color-scheme: light) { .ph-view { background: #1F1A16; } }
.ph-reel { position: relative; height: 86%; aspect-ratio: 9 / 16; border-radius: 7px; background: linear-gradient(165deg, color-mix(in srgb, var(--a) 46%, #3A302A), #191411 75%); box-shadow: 0 0 0 1px rgba(246, 242, 236, .1); }
.ph-reel i { position: absolute; left: 16%; right: 16%; bottom: 20%; height: 9%; border-radius: 3px; background: var(--cream); }
.ph-lanes { position: relative; grid-column: 1 / -1; display: grid; align-content: center; gap: 5px; padding: 8px 12px; border-radius: 9px; background: var(--surface); }
.ph-lanes span { position: relative; height: 9px; }
.ph-lanes b { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); border-radius: 3px; background: color-mix(in srgb, var(--teal) 55%, transparent); }
.ph-lanes span:nth-child(2) b { background: color-mix(in srgb, var(--pink) 60%, transparent); }
.ph-lanes span:nth-child(3) b { background: color-mix(in srgb, var(--violet) 55%, transparent); }
.ph-head { position: absolute; top: 5px; bottom: 5px; left: 34%; width: 2px; background: var(--pink); }
.ph-head::before { content: ""; position: absolute; left: -5px; top: -2px; width: 12px; height: 8px; border-radius: 3px 3px 6px 6px; background: var(--pink); }
[data-kind="clip"] .ph-head { animation: ph-run 6s linear infinite; }
[data-kind="clip"] .ph-reel i { animation: ph-cap 1.5s steps(1) infinite; }
@keyframes ph-run { from { left: 12px; } to { left: calc(100% - 12px); } }
@keyframes ph-cap { 50% { left: 26%; right: 26%; } }
.shot figcaption { margin-top: 11px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }

/* Galleries of looks: one small loop per look, labeled, so you see each one and how it moves. Until a loop is recorded, a
   drawing holds its place: a little reel with you in it and the kind of look moving over you (only while in view). */
.gal { margin: 28px 0 34px; }
.article .gal-group { margin: 22px 0 10px; color: var(--at); font: 600 14px/1.2 var(--body); }
.article .gal-group:first-child { margin-top: 0; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 12px; }
.gal-wide .gal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gal-item { min-width: 0; }
.gal-clip {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate; border-radius: 12px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--a) 40%, #3A302A), #15110E 82%);
  box-shadow: 0 0 0 1px var(--rule), 0 16px 30px -18px rgba(0, 0, 0, .6);
}
.gal-clip > img, .gal-clip > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal-clip > video { opacity: 0; transition: opacity .3s; }
.gal-clip.is-playing > video { opacity: 1; }
.article .gal-name { margin: 8px 0 0; color: var(--ink); font: 600 14px/1.25 var(--body); }
.article .gal-note { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.gal-soon { margin-top: 14px; color: var(--faint); font-size: 13.5px; line-height: 1.4; }

/* The drawing: you (a head and shoulders), and two marks that move as the kind of look does. */
:where(.gal-clip.is-ph) > i { position: absolute; display: block; animation-duration: 3.2s; animation-iteration-count: infinite; animation-delay: calc(var(--i, 0) * -.37s); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.gp-you { left: 18%; right: 18%; bottom: 0; height: 58%; transform-origin: 50% 18%; }
.gp-you::before { content: ""; position: absolute; left: 50%; top: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: rgba(246, 242, 236, .2); }
.gp-you::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; border-radius: 48% 48% 0 0; background: rgba(246, 242, 236, .15); }
.gp-a, .gp-b { border-radius: 3px; }
/* Captions: a line low on you, the spoken word marked as it moves along. */
[data-draw="caption"] .gp-a { left: 14%; right: 14%; top: 66%; height: 5%; background: rgba(246, 242, 236, .86); }
[data-draw="caption"] .gp-b { left: 14%; top: 66%; width: 24%; height: 5%; background: var(--a); animation-name: gp-word; animation-timing-function: steps(1); }
@keyframes gp-word { 0% { transform: none; } 33% { transform: translateX(100%); } 66% { transform: translateX(200%); } }
/* Text and its In: a title in the top band coming in, a second line after it. */
:is([data-draw="text"], [data-draw="in"]) .gp-a { left: 12%; right: 12%; top: 12%; height: 8%; background: rgba(246, 242, 236, .9); animation-name: gp-in; }
:is([data-draw="text"], [data-draw="in"]) .gp-b { left: 26%; right: 26%; top: 23%; height: 4.5%; background: var(--a); animation-name: gp-in; animation-delay: calc(var(--i, 0) * -.37s + .25s); }
@keyframes gp-in { 0% { opacity: 0; transform: translateY(40%) scale(.6); } 18%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
[data-draw="out"] .gp-a { left: 12%; right: 12%; top: 18%; height: 8%; background: rgba(246, 242, 236, .9); animation-name: gp-out; }
[data-draw="out"] .gp-b { display: none; }
@keyframes gp-out { 0%, 10% { opacity: 0; transform: none; } 14%, 56% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(-30%) scale(.5); } }
/* Writing on: the line uncovered from left to right; a Typewriter's cursor blinking at its end. */
[data-draw="write-on"] .gp-a, [data-draw="cursor"] .gp-a { left: 12%; right: 12%; top: 16%; height: 8%; background: rgba(246, 242, 236, .9); animation-name: gp-write; animation-timing-function: linear; }
[data-draw="write-on"] .gp-b { display: none; }
@keyframes gp-write { 0% { clip-path: inset(0 100% 0 0); } 55%, 100% { clip-path: inset(0 0 0 0); } }
[data-draw="cursor"] .gp-b { right: 9%; top: 15%; width: 2.5%; height: 10%; background: var(--a); animation-name: gp-blink; animation-timing-function: steps(1); animation-duration: 1s; }
@keyframes gp-blink { 50% { opacity: 0; } }
/* Graphics: a card popping in over you, with a mark on it. */
[data-draw="graphic"] .gp-a { left: 16%; right: 16%; top: 14%; height: 26%; border-radius: 8px; background: rgba(246, 242, 236, .9); animation-name: gp-in; }
[data-draw="graphic"] .gp-b { right: 12%; top: 9%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--a); animation-name: gp-in; animation-delay: calc(var(--i, 0) * -.37s + .3s); }
/* Card looks: a picture coming in over you. */
[data-draw="card"] .gp-a { right: 9%; top: 9%; width: 48%; aspect-ratio: 4 / 5; border-radius: 7px; background: linear-gradient(160deg, var(--a), color-mix(in srgb, var(--a) 30%, #1a1512)); box-shadow: 0 0 0 3px rgba(246, 242, 236, .85), 0 12px 20px -8px rgba(0, 0, 0, .7); animation-name: gp-in; }
[data-draw="card"] .gp-b { display: none; }
/* Zooms: you, pushed in on. */
[data-draw="zoom"] .gp-you { animation-name: gp-zoom; }
[data-draw="zoom"] :is(.gp-a, .gp-b) { display: none; }
@keyframes gp-zoom { 0%, 12% { transform: none; } 40%, 70% { transform: scale(1.45); } 92%, 100% { transform: none; } }
/* Transitions: the next clip coming across, the edge riding the change. */
[data-draw="wipe"] .gp-a { inset: 0; border-radius: 0; background: linear-gradient(200deg, color-mix(in srgb, var(--a) 72%, #1a1512), #2A201B); animation-name: gp-wipe; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
[data-draw="wipe"] .gp-b { top: 0; bottom: 0; left: 0; width: 2px; border-radius: 0; background: var(--cream); box-shadow: 0 0 10px rgba(246, 242, 236, .8); animation-name: gp-edge; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
@keyframes gp-wipe { 0%, 20% { transform: translateX(-100%); } 55%, 100% { transform: none; } }
@keyframes gp-edge { 0%, 20% { opacity: 1; left: 0; } 55% { opacity: 1; left: 100%; } 56%, 100% { opacity: 0; left: 100%; } }
/* Filters: a look washing over you and off again, each its own tint. */
[data-draw="tint"] .gp-a { inset: 0; border-radius: 0; background: color-mix(in srgb, var(--a) 70%, transparent); mix-blend-mode: color; filter: hue-rotate(calc(var(--i, 0) * 47deg)); animation-name: gp-tint; }
[data-draw="tint"] .gp-b { display: none; }
@keyframes gp-tint { 0%, 15% { opacity: 0; } 40%, 80% { opacity: .9; } 100% { opacity: 0; } }
/* Effects: lines rolling over you, and a flash now and then. */
[data-draw="fx"] .gp-a { inset: -10% 0; border-radius: 0; background: repeating-linear-gradient(0deg, rgba(246, 242, 236, .1) 0 2px, transparent 2px 6px); animation-name: gp-roll; animation-timing-function: linear; }
[data-draw="fx"] .gp-b { inset: 0; border-radius: 0; background: color-mix(in srgb, var(--a) 40%, rgba(246, 242, 236, .5)); opacity: 0; animation-name: gp-flash; }
@keyframes gp-roll { to { transform: translateY(10%); } }
@keyframes gp-flash { 0%, 46%, 60%, 100% { opacity: 0; } 50% { opacity: .55; } }
/* Masks: the shape moving across, the rest hidden. */
[data-draw="mask"] .gp-a { inset: -50%; border-radius: 0; background: radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(12, 10, 8, .86) 15.5%); animation-name: gp-mask; animation-timing-function: ease-in-out; animation-direction: alternate; }
[data-draw="mask"] .gp-b { display: none; }
@keyframes gp-mask { from { transform: translate(-14%, -12%); } to { transform: translate(14%, 10%); } }
/* Curves: a dot going from one keyframe to the next with the curve's timing. */
[data-draw="curve"] .gp-b { left: 14%; right: 14%; top: 50%; height: 2px; background: rgba(246, 242, 236, .3); }
[data-draw="curve"] .gp-a { left: 14%; top: calc(50% - 7%); width: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 3px rgba(246, 242, 236, .85); animation: gp-curve 2.2s var(--ease, linear) infinite alternate; }
[data-draw="curve"] .gp-you { opacity: .4; }
@keyframes gp-curve { from { transform: none; } to { transform: translateX(415%); } }
/* Related articles: a row of small chips, each with its topic's color. */
.rel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 40px; }
.rel-h { margin: 0; color: var(--muted); font: 600 14px/1 var(--body); }
.article .rel-h { margin: 0; }
.rel-list { display: flex; flex-wrap: wrap; gap: 8px; }
.article .rel a {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--rule); color: var(--text); font-size: 14.5px; line-height: 1.25; text-decoration: none; transition: border-color .2s, color .2s;
}
.article .rel a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--a); }
.article .rel a:hover, .article .rel a:focus-visible { border-color: color-mix(in srgb, var(--a) 60%, transparent); color: var(--ink); }

.stuck {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 28px; margin-top: 104px; padding: 28px 30px;
  border-radius: 24px; background: var(--well); border: 1px solid var(--rule);
}
.stuck-h { color: var(--ink); font-size: clamp(32px, 3vw, 44px); font-weight: 800; font-stretch: 76%; }
.stuck p:not(.stuck-h) { grid-column: 1; margin: 0; color: var(--muted); font-size: 16.5px; }
.stuck .btn { grid-column: 2; grid-row: 1 / 3; }
/* Onward: the next topic's page, as a card in its color. */
.next-topic {
  display: grid; gap: 8px; margin-top: 18px; padding: 22px 26px 24px; border-radius: 24px; text-decoration: none;
  background: color-mix(in srgb, var(--a) 12%, var(--surface)); border: 1px solid var(--rule); transition: border-color .25s;
}
.next-topic:hover, .next-topic:focus-visible { border-color: color-mix(in srgb, var(--a) 60%, transparent); }
.next-label { color: var(--at); font: 600 14px/1 var(--body); }
.next-title { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: clamp(30px, 3vw, 40px); font-weight: 800; font-stretch: 78%; }
.next-title::after { content: ""; flex: none; width: 26px; height: 26px; margin-left: auto; background-color: var(--at); -webkit-mask: url(/docs/icons/chevronRight.svg) center / contain no-repeat; mask: url(/docs/icons/chevronRight.svg) center / contain no-repeat; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.next-topic:hover .next-title::after { transform: translateX(4px); }
.next-blurb { color: var(--muted); font-size: 15.5px; }

/* The search on a topic page: a panel under the bar, opened by Search help. */
.search-pop { position: fixed; z-index: 55; left: 0; right: 0; top: 0; padding: calc(var(--bar-h) + 10px) var(--gut) 22px; background: color-mix(in srgb, var(--well) 94%, transparent); border-bottom: 1px solid var(--rule); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.search-pop[hidden] { display: none; }
.search-pop-in { position: relative; max-width: 780px; margin: 0 auto; }
.search-pop .prompt { margin-top: 0; }
.search-close { position: absolute; right: 0; bottom: 0; padding: 7px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent; color: var(--text); font: 500 14px/1 var(--body); cursor: pointer; }
.search-close:hover { border-color: var(--pink); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .search-pop:not([hidden]) { animation: rise .35s cubic-bezier(.2, .8, .2, 1); } }

/* ---------- the footer: the name runs past, leaning with the scroll, a small pink spark between ---------- */
.footer { background: var(--well); padding-top: 7vh; overflow: hidden; }
.loop { white-space: nowrap; transform: skewX(var(--skew, 0deg)); }
.loop-row {
  display: inline-flex; align-items: baseline; color: var(--ink);
  font: 800 clamp(5rem, 19vw, 22rem)/.9 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.04em;
  --xh: .5em; animation: loop 46s linear infinite;
}
@keyframes loop { to { transform: translateX(-50%); } }
.loop-row span:nth-of-type(even) { color: var(--pink); }
.loop-row svg {
  color: var(--pink); --s: .56; flex: none; width: calc(var(--xh) * var(--s)); height: calc(var(--xh) * var(--s));
  margin: 0 .2em 0 .24em; position: relative; top: calc(var(--xh) * (var(--s) - 1) / 2);
}
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 5vh; padding: 24px var(--gut) 28px; background: var(--paper); color: var(--muted); font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--ink); }

/* Off screen, the loops and the drawings wait (help.js marks what is in view). */
.stage:not(.is-live) *, .stage:not(.is-live) { animation-play-state: paused; }
.js :is(.frame-ph, .gal):not(.is-live), .js :is(.frame-ph, .gal):not(.is-live) * { animation-play-state: paused; }

.article, .topic-head { scroll-margin-top: calc(var(--bar-h) + 20px); }

/* ---------- narrower screens ---------- */
@media (max-width: 1200px) {
  .topic, .topic.is-wide { grid-column: span 6; flex-direction: column; }
  .topic.is-wide.is-right { flex-direction: column; }
  .topic.is-wide .stage { flex: 1 0 auto; min-height: 290px; }
  .topic.is-wide .topic-body { flex: none; padding: 24px 26px 22px; }
  .page { grid-template-columns: 284px minmax(0, 720px); column-gap: clamp(28px, 3.5vw, 48px); }
  .rail { column-gap: 12px; }
  .rail-title { font-size: 23px; }
  .rail-arts a { font-size: 14.5px; }
}
@media (max-width: 960px) {
  :root { --bar-h: 64px; --pin: 63px; --tabs-h: 58px; --arts-h: 46px; }
  .hero { min-height: 0; padding-top: calc(var(--bar-h) + 6vh); row-gap: 48px; }
  .hero-main, .hero-side { grid-column: 1 / -1; }
  .hero-side { align-self: start; }
  .hero-side-h { text-align: left; }
  .chats { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .chats li:nth-child(n) { margin: 0; }
  .chat { justify-items: start; }
  .chat-q { border-radius: 22px 22px 22px 6px; }
  .chat-a { text-align: left; }
  .cue { justify-content: flex-start; }
  .cue-track { order: 0; }
  .cue-text { align-items: flex-start; }
  .page { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--bar-h) + 10px); }
  /* The two lists become two rows pinned under the bar, each scrolling sideways on its own: the editor's compact row of
     topic glyphs, then the open topic's articles. */
  .rail {
    position: sticky; top: var(--pin); display: block; max-height: none; margin: 0 calc(var(--gut) * -1) 26px;
    background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--rule);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .rail-list { flex-direction: row; gap: 4px; height: var(--tabs-h); padding: 4px var(--gut); border-right: 0; overflow-x: auto; overflow-y: hidden; }
  .rail-list li { flex: none; }
  .rail-item { width: 66px; height: 100%; justify-content: center; padding: 4px 2px; }
  .rail-panel { overflow: visible; padding: 0; }
  .rail-title { display: none; }
  .rail-arts { display: flex; align-items: center; gap: 6px; height: var(--arts-h); padding: 0 var(--gut) 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .rail-arts li { flex: none; }
  .rail-arts a { padding: 7px 13px; border-radius: 999px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--rule); font-size: 13.5px; line-height: 1.2; white-space: nowrap; }
  .rail-arts a[aria-current] { background: color-mix(in srgb, var(--a) 24%, var(--raise)); box-shadow: inset 0 0 0 1px var(--a); }
  .rail-arts a[aria-current]::before, .rail-arts a[aria-current]::after { display: none; }
  .article, .topic-head { scroll-margin-top: calc(var(--pin) + var(--tabs-h) + var(--arts-h) + 14px); }
}
@media (max-width: 760px) {
  .topic, .topic.is-wide { grid-column: 1 / -1; }
  .topic .stage, .topic.is-wide .stage { min-height: 250px; }
  .bar-links { display: none; }
  .bar-search { margin-left: auto; }
  .topic-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 48px; }
  .topic-head .stage { min-height: 240px; }
  .topic-head-body { padding: 24px 22px 22px; }
  .stuck { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .stuck .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
  .tl { gap: 10px; padding: 0 12px; height: 50px; }
  .tl-tc { width: 78px; font-size: 12px; }
  .tl-clips { top: 7px; height: 18px; gap: 2px; }
  .tl-clip { padding: 0; font-size: 0; }
  .tl-clip.on { padding: 0 6px; font-size: 10.5px; line-height: 18px; min-width: max-content; }
  .tl-wave { top: 29px; height: 10px; }
}
@media (max-width: 560px) {
  :root { --pin: 57px; }
  body { font-size: 16px; }
  .bar { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .bar.solid { padding-top: 7px; padding-bottom: 7px; }
  .bar-name { font-size: 19px; gap: 6px; }
  .bar-name svg { width: 22px; height: 22px; }
  .bar-help { padding: 6px 10px; font-size: 13px; }
  .bar .bar-search { justify-content: center; width: 42px; height: 42px; padding: 0; gap: 0; }
  .bar-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar-search .btn-meter { width: 32px; height: 32px; }
  .hub-h { font-size: 19.5vw; }
  .hub-h span:nth-child(2) { padding-left: .3em; }
  .prompt-box { gap: 8px; padding: 6px 6px 6px 10px; }
  .prompt-you { display: none; }
  .prompt input { height: 46px; font-size: 17px; }
  .prompt .btn-meter { width: 44px; height: 44px; }
  .results a { grid-template-columns: minmax(0, 1fr); }
  .r-topic { grid-column: 1; grid-row: auto; }
  .chats { gap: 12px; }
  .chat-q { font-size: 16px; }
  .topic-body, .topic.is-wide .topic-body { padding: 22px 20px 18px; }
  .topic h2 { font-size: 30px; }
  .article { font-size: 17px; }
  .art-h { font-size: 36px; }
  .topic-head h1 { font-size: 46px; }
  .search-close { position: static; margin-top: 12px; }
  .answer { padding: 16px 18px 17px 28px; font-size: 18px; }
  .answer::before { left: 11px; top: 16px; bottom: 16px; }
  .article ol:not([class]) { padding-left: 50px; }
  .article ol:not([class]) > li::before { left: -50px; width: 34px; height: 34px; font-size: 16px; }
  .article ol:not([class])::before, .article ol:not([class])::after { left: 16px; }
  .article ol:not([class]) { background-position: 11px 0; }
  .article ol:not([class]) > li { min-height: 34px; padding-top: 3px; }
  .ask-msg { max-width: 100%; }
  .article .ask-msg p { font-size: 17px; }
  .ph { aspect-ratio: 16 / 10; }
  .tips { padding: 22px 20px 14px; }
  .btn { height: 52px; padding: 0 7px 0 20px; font-size: 16px; gap: 10px; }
  .btn-meter { width: 36px; height: 36px; }
}

/* ---------- reduced motion: nothing plays or moves on its own ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stage .clip:has(.look) { --wipe: 50%; }
  .m-words span { opacity: 1; }
  .m-reel i { opacity: 1; }
  .m-ring { --ring: 70%; }
  .stage.is-motif .head { left: 62%; }
  .loop { transform: none; }
}