/* Answer Print — a grading suite framed as a letterbox. Suite grey inside black mattes,
   Gloock title cards, Share Tech Mono readouts, and one red-orange: the halation, on black or as light. */
@font-face { font-family: "Gloock"; src: url("/assets/fonts/specimen/gloock-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("/assets/fonts/specimen/share-tech-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@property --an-glow { syntax: "<number>"; inherits: true; initial-value: 1; }

body.spec-answer-print { margin: 0; background: #000; }

.an-reel {
  --an-suite: #484848; --an-ink: #EDEBE6; --an-halo: #FF5C3A;
  --an-ink-2: #C9C6BF; --an-ink-3: #8F8D88; --an-hair: rgb(237 235 230 / .18); --an-hair-k: rgb(237 235 230 / .24);
  --an-suite-hi: #4E4E4E; --an-scrim: rgb(0 0 0 / .45); --an-chip: rgb(0 0 0 / .6);
  --an-halo-k: .35;
  --an-serif: "Gloock", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
  --an-mono: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --an-f4: 167ms; --an-f6: 250ms; --an-f10: 417ms; --an-f12: 500ms; --an-f14: 583ms;
  --an-top: 44px; --an-bot: 56px;
  --an-m: clamp(0px, (100svh - var(--bar-h, 44px) - 100vw / 2.39) / 2 - 50px, 110px);
  --an-mt: calc(var(--an-m) + 6px); --an-mb: max(0px, var(--an-m) - 6px);
  --an-frame: min(calc(100svh - var(--bar-h, 44px) - var(--an-top) - var(--an-bot) - var(--an-mt) - var(--an-mb)), 64rem);
  --an-side: clamp(20px, 4.4vw, 64px); --an-gut: 24px;
  --an-pad: clamp(48px, 7vw, 112px);
  position: relative; color-scheme: dark;
  background: var(--an-suite); color: var(--an-ink);
  font: 400 clamp(1.0625rem, .95rem + .35vw, 1.25rem)/1.58 var(--an-serif); letter-spacing: .005em;
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
@media (max-width: 1023px) { .an-reel { --an-m: 0px; --an-mt: 0px; --an-mb: 0px; } }
@media (max-width: 699px) { .an-reel { --an-top: 40px; --an-bot: 52px; --an-side: 20px; --an-gut: 16px; } }
@media (max-height: 479px) { .an-reel { --an-m: 0px; --an-mt: 0px; --an-mb: 0px; } }

.an-reel *, .an-reel *::before, .an-reel *::after { box-sizing: border-box; }
.an-reel :where(p, h1, h2, h3, figure, ol, ul, dl, dd, fieldset, legend, table) { margin: 0; padding: 0; }
.an-reel fieldset { border: 0; min-width: 0; }
.an-reel a { color: inherit; }
.an-reel img { max-width: 100%; }
.an-reel [hidden] { display: none !important; }
.an-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.an-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.an-reel :focus-visible { outline: 2px solid var(--an-halo); outline-offset: 2px; box-shadow: 0 0 0 2px #000; }
.an-reel :is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-block: calc(var(--bar-h, 44px) + var(--an-top) + var(--an-mt) + 12px) calc(var(--an-bot) + var(--an-mb) + 12px); }

/* the mono voice: everything the suite would print */
.an-sl, .an-slate, .an-chip, .an-kicker, .an-sc-top, .an-btn, .an-cue, .an-nav a, .an-reelname, .an-now, .an-ro, .an-txb, .an-burn, .an-lt, .an-evt, .an-tr, .an-caprow, .an-rc span, .an-xr, .an-tog span, .an-where, .an-send, .an-status, .an-stamp, .an-pnum, .an-wv, .an-seg span, .an-scsel span, .an-grip, .an-type summary {
  font-family: var(--an-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .1em;
  font-size: clamp(.6875rem, .66rem + .1vw, .8125rem); line-height: 1.35;
}

/* ── the strips: sticky, black, with their matte extensions on the outside ── */
.an-top { position: sticky; top: var(--bar-h, 44px); z-index: 40; transition: transform var(--an-f14) cubic-bezier(.2, 0, 0, 1); }
.an-foot { position: sticky; bottom: 0; z-index: 40; transition: transform var(--an-f14) cubic-bezier(.2, 0, 0, 1); }
.an-matte { background: #000; }
.an-top .an-matte { height: var(--an-mt); }
.an-foot .an-matte { height: var(--an-mb); }
.an-reel.is-gate .an-top { transform: translateY(calc(-1 * var(--an-mt))); }
.an-reel.is-gate .an-foot { transform: translateY(var(--an-mb)); }
.an-strip { background: #000; padding-inline: var(--an-side); }
.an-strip-t { height: var(--an-top); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 24px; padding-bottom: 10px; }
.an-brand { display: flex; align-items: baseline; gap: 18px; white-space: nowrap; min-width: 0; }
.an-mark { font-family: var(--an-serif); font-size: 20px; line-height: 1; letter-spacing: 0; text-decoration: none; }
.an-reelname { color: var(--an-ink-3); font-size: 12px; }
.an-rn-b, .an-rn-p { display: none; }
.an-reel.is-gate .an-rn-a { display: none; }
.an-reel.is-gate .an-rn-b { display: inline; }
.an-tc { display: flex; align-items: baseline; gap: 10px; line-height: 1; font-family: var(--an-mono); }
.an-rec { font-size: 11px; letter-spacing: .14em; color: var(--an-ink-3); }
.an-tcv { font-size: clamp(.875rem, .8rem + .2vw, 1.0625rem); letter-spacing: .04em; color: var(--an-halo); text-shadow: 0 0 8px rgb(255 92 58 / .45); }
.an-nav { justify-self: end; }
.an-nav ul { list-style: none; display: flex; gap: 22px; }
.an-nav a { font-size: 12px; color: var(--an-ink-3); text-decoration: none; }
.an-nav a:hover { color: var(--an-ink); }
.an-nav a.is-on { color: var(--an-halo); }

.an-strip-b { height: var(--an-bot); padding-top: 9px; }
.an-trackw { position: relative; height: 18px; }
.an-track { list-style: none; display: flex; gap: 1px; height: 100%; margin: 0; padding: 0; }
.an-track li { flex: var(--w, 1) 1 0; min-width: 3px; }
.an-track a { display: block; height: 100%; background: rgb(237 235 230 / .14); }
.an-track a.is-pic { background: rgb(237 235 230 / .24); }
.an-track a.is-on { background: rgb(237 235 230 / .4); }
.an-track a:focus-visible { outline-offset: -2px; box-shadow: none; }
.an-ph { position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px; margin-left: -1px; background: var(--an-halo); box-shadow: 0 0 6px var(--an-halo); transform: translateX(var(--x, 0px)); pointer-events: none; }
.an-ph::before { content: ""; position: absolute; top: -3px; left: -4px; border: 5px solid transparent; border-top-color: var(--an-halo); border-bottom: 0; }
.an-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: calc(var(--an-bot) - 27px); }
.an-now { color: var(--an-halo); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-ro { font-size: clamp(.6875rem, .62rem + .12vw, .8125rem); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 62vw; }
.an-tx { justify-self: end; display: flex; gap: 2px; }
.an-txb { background: none; border: 0; color: var(--an-ink); font-size: 12px; padding: 6px 8px; cursor: pointer; }
.an-txb:hover { text-decoration: underline; text-underline-offset: 4px; }
.an-tx-s { display: none; }

/* grain: over the picture window only, grey specks, 12 a second */
.an-grain { position: fixed; left: 0; right: 0; top: calc(var(--bar-h, 44px) + var(--an-top) + var(--an-mt)); bottom: calc(var(--an-bot) + var(--an-mb)); z-index: 30; pointer-events: none; overflow: hidden; }
.an-reel.is-gate .an-grain { top: calc(var(--bar-h, 44px) + var(--an-top)); bottom: var(--an-bot); }
.an-grain::before { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27 x=%270%27 y=%270%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.82%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%274 0 0 0 -1.5 4 0 0 0 -1.5 4 0 0 0 -1.5 0 0 0 0 .055%27/%3E%3C/filter%3E%3Crect width=%27160%27 height=%27160%27 filter=%27u%72l(%23n)%27/%3E%3C/svg%3E"); animation: an-grain 333ms steps(1) infinite; }
@keyframes an-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-37px, 21px); } 50% { transform: translate(19px, -43px); } 75% { transform: translate(-53px, -11px); } }

/* ── title cards: black bands, the h2 centred and glowing with the page's halation ── */
.an-tcard { background: #000; text-align: center; padding: clamp(40px, 6vw, 96px) var(--an-side); display: grid; justify-items: center; }
.an-slate { color: var(--an-ink-3); margin-bottom: clamp(18px, 2vw, 28px); }
.an-h2, .an-title { font-family: var(--an-serif); font-weight: 400; text-shadow: 0 0 .04em rgb(255 250 245 / .5), 0 0 .12em rgb(255 92 58 / calc((.10 + .28 * var(--an-halo-k)) * var(--an-glow))), 0 0 .45em rgb(255 92 58 / calc((.04 + .16 * var(--an-halo-k)) * var(--an-glow))); }
.an-h2 { font-size: clamp(2rem, 1.3rem + 3.1vw, 4rem); line-height: 1.06; max-width: 17em; text-wrap: balance; }
.an-lead { font-size: clamp(1.1875rem, .95rem + .9vw, 1.625rem); line-height: 1.32; max-width: 30em; }
.an-tcard .an-lead { margin-top: 48px; text-wrap: pretty; }
.an-body { max-width: 34em; }
.an-body + .an-body { margin-top: 1em; }
.an-small { font-size: clamp(.9375rem, .9rem + .12vw, 1.0625rem); line-height: 1.5; color: var(--an-ink-2); }
.an-h3 { font-weight: 400; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .an-tcard > :is(.an-h2, .an-lead) { animation: an-up linear both, an-bloom linear both; animation-timeline: view(), view(); animation-range: entry 20% entry 60%, entry 60% entry 85%; }
  }
  .an-reel.is-io .an-tcard > :is(.an-h2, .an-lead) { opacity: 0; --an-glow: 0; transition: opacity var(--an-f12) linear, --an-glow var(--an-f6) linear var(--an-f12); }
  .an-reel.is-io .an-tcard.is-in > :is(.an-h2, .an-lead) { opacity: 1; --an-glow: 1; }
}
@keyframes an-up { from { opacity: 0; } to { opacity: 1; } }
@keyframes an-bloom { from { --an-glow: 0; } to { --an-glow: 1; } }

/* ── stills: each carries its own filter; with a script and motion they start as the camera saw them ── */
.an-still { position: relative; overflow: hidden; background: #000; }
.an-still img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--an-f); }
.an-st-01 { --an-f: url(#an-f-01); }
.an-st-03 { --an-f: url(#an-f-03); }
.an-st-04 { --an-f: url(#an-f-04) brightness(var(--an-lo, .84)); }
.an-st-04 .an-pw-up img { --an-f: url(#an-f-04) brightness(var(--an-hi, 1.16)); }
.an-st-05 { --an-f: url(#an-f-05); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .an-reel:not(.is-live) .an-still img { filter: url(#an-flat); animation: an-safe 1ms linear 4s forwards; }
}
@keyframes an-safe { to { filter: var(--an-f); } }
.an-chip { position: absolute; z-index: 4; background: var(--an-chip); color: var(--an-ink); padding: 6px 10px; font-size: 11px; max-width: calc(100% - 32px); }
.an-chip-slate { top: 16px; left: 16px; }
.an-chip-note { right: 16px; bottom: 16px; }

.an-cue, .an-btn { color: var(--an-ink); text-decoration: none; background: none; border: 0; box-shadow: 0 1px 0 var(--an-ink); transition: box-shadow var(--an-f4) linear; cursor: pointer; }
.an-cue { padding-bottom: 4px; }
.an-cue:hover, .an-cue:focus-visible, .an-btn:hover, .an-btn:focus-visible { box-shadow: 0 1px 0 var(--an-halo), 0 4px 12px rgb(255 92 58 / .35); }
.an-btn { padding: 12px 0 5px; min-height: 44px; }
.an-btn:disabled { color: var(--an-ink-2); box-shadow: 0 1px 0 var(--an-hair); cursor: default; }

/* ── 01, the desk: the page opens in the open gate, so the shot starts right under the top strip ── */
.an-reel { --an-open: calc(100svh - var(--bar-h, 44px) - var(--an-top) - var(--an-bot)); }
.an-deskshot { margin-top: calc(-1 * var(--an-mt)); }

/* the slate: the name set small as a title card, a time-of-day timecode running in the halation red */
.an-side { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.an-slatecard { background: #000; padding: 0 20px 16px; }
.an-slatecard::before { content: ""; display: block; height: 10px; margin: 0 -20px 14px; background: repeating-linear-gradient(-58deg, var(--an-ink) 0 11px, #000 11px 22px); opacity: .88; }
.an-sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--an-ink-3); }
.an-sc-tc { display: inline-flex; align-items: baseline; gap: 8px; }
.an-sc-tl { font-size: 10px; letter-spacing: .14em; }
#an-stc { font-size: clamp(1.25rem, .9rem + .7vw, 1.625rem); letter-spacing: .03em; line-height: 1; color: var(--an-halo); text-shadow: 0 0 10px rgb(255 92 58 / .55); }
.an-title { margin-top: 10px; font-size: clamp(2.25rem, 1.5rem + 1.3vw, 2.875rem); line-height: 1; letter-spacing: -.005em; white-space: nowrap; }
.an-kicker { margin-top: 10px; color: var(--an-ink-2); font-size: 11px; }
.an-log { margin-top: 12px; font-size: clamp(1.0625rem, .95rem + .3vw, 1.25rem); line-height: 1.34; text-wrap: pretty; }
.an-sc-f { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; margin-top: 14px; border-top: 1px solid var(--an-hair-k); }
.an-sc-f > div { padding: 9px 12px 0; border-left: 1px solid var(--an-hair-k); min-width: 0; }
.an-sc-f > div:first-child { padding-left: 0; border-left: 0; }
.an-sc-f dt { font: 10px/1.3 var(--an-mono); letter-spacing: .14em; color: var(--an-ink-3); }
.an-sc-f dd { margin: 3px 0 0; font: 13px/1.3 var(--an-mono); letter-spacing: .08em; white-space: nowrap; }
.an-l2 { max-width: 30em; }
.an-cues { display: flex; flex-wrap: wrap; gap: 12px 32px; }

/* ── the desk ── */
.an-grade { position: relative; padding: 32px var(--an-side); }
.an-poster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--an-gut); }
.an-pf img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.an-pf-log img { filter: url(#an-flat); }
.an-pf-grade img { filter: url(#an-f-desk); }
.an-pf figcaption { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--an-ink-2); }
.an-pnum { grid-column: 1 / -1; letter-spacing: .04em; color: var(--an-ink-2); }
.an-grade:not(.is-on) :is(.an-mlines, .an-wline, .an-grip) { display: none; }
.an-grade.is-on { padding: 24px 32px; }
.an-grade.is-on .an-inst { position: relative; z-index: 2; }
.an-grade.is-on .an-mon { position: relative; aspect-ratio: 3 / 2; background: #000; cursor: ew-resize; touch-action: pan-y; }
.an-grade.is-on .an-poster { position: absolute; inset: 0; display: block; }
.an-grade.is-on .an-pf { position: absolute; inset: 0; }
.an-grade.is-on .an-pf img { height: 100%; object-position: 50% 70%; }
/* with a script and motion, the frame arrives as the camera recorded it and the grade wipes in */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .an-grade { --an-wipe: 1; } }
.an-grade:not(.is-drawn) :is(.an-wave, .an-vec) { background: #000; }
.an-mnote { right: 12px; bottom: 12px; pointer-events: none; }

/* 1024 and up: the slate beside a 2.39 monitor, the panel (wheels, vectorscope, waveform, dials) along the bottom,
   all inside the open gate */
@media (min-width: 1024px) {
  .an-grade.is-on {
    --an-deck: 198px;
    --an-mw: min(calc((var(--an-open) - var(--an-deck) - 136px) * 2.39), 66vw, calc(100vw - 64px - 24px - 320px));
    display: grid; grid-template-columns: minmax(0, 1fr) var(--an-mw); grid-template-areas: "side mcol" "deck deck";
    column-gap: 24px; row-gap: 20px; align-content: center; align-items: start;
    min-height: var(--an-open); padding: 20px 32px 16px;
  }
  .an-grade.is-on .an-side { grid-area: side; }
  .an-grade.is-on .an-mcol { grid-area: mcol; }
  .an-grade.is-on .an-mon { aspect-ratio: 2.39; }
  .an-grade.is-on .an-mlines { display: none; }
  .an-grade.is-on .an-inst { grid-area: deck; display: grid; grid-template-columns: auto 156px minmax(0, 1fr) minmax(228px, 280px); column-gap: 28px; align-items: center; padding-top: 16px; border-top: 1px solid var(--an-hair); }
  .an-grade.is-on .an-inst :is(.an-scopes, .an-row2) { display: contents; }
  .an-grade.is-on .an-wheels { grid-column: 1; grid-row: 1; margin-top: 0; gap: 16px; }
  .an-grade.is-on .an-vec { grid-column: 2; grid-row: 1; width: 156px; height: 156px; }
  .an-grade.is-on .an-wave { grid-column: 3; grid-row: 1; height: 156px; }
  .an-grade.is-on .an-knobs { grid-column: 4; grid-row: 1; }
  .an-grade.is-on .an-static { grid-column: 2 / 4; grid-row: 1; margin-top: 0; }
  .an-grade.is-on :is(.an-plain-w, .an-plain-v) { display: none; }
  .an-grade.is-on .an-wheel { --an-wd: 116px; gap: 4px; }
  .an-grade.is-on .an-wn { display: flex; gap: 8px; align-items: baseline; }
  .an-grade.is-on .an-mfoot { margin-top: 6px; }
  .an-grade.is-on .an-lookrow { flex-wrap: nowrap; margin-top: 4px; }
  .an-grade.is-on .an-looks { flex-wrap: nowrap; flex: none; }
  .an-grade.is-on .an-prompt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .an-grade.is-on .an-words { font-size: 16px; line-height: 1.42; }
}
/* the first screen has to hold the panel: on narrower or shorter desktops the slate column sheds its note,
   and then the scopes in words go to the screen reader only (the scopes themselves are on screen) */
@media (min-width: 1024px) and (max-width: 1279px), (min-width: 1024px) and (max-height: 860px) {
  .an-grade.is-on .an-l2 { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px), (min-width: 1024px) and (max-height: 760px) {
  .an-grade.is-on .an-words { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .an-grade.is-on .an-prompt { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .an-strip-t { grid-template-columns: minmax(0, 1fr) auto; }
  .an-nav { display: none; }
}
/* from 1100 the bottom strip writes every number, so the wheels need not */
@media (min-width: 1100px) { .an-grade.is-on .an-wv { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .an-grade.is-on .an-inst { grid-template-columns: auto 132px minmax(0, 1fr) minmax(200px, 232px); column-gap: 20px; }
  .an-grade.is-on .an-vec { width: 132px; height: 132px; }
  .an-grade.is-on .an-wave { height: 132px; }
  .an-grade.is-on .an-wheel { --an-wd: 100px; }
  .an-grade.is-on .an-wheels { gap: 10px; }
  .an-grade.is-on .an-wv { display: none; }
  .an-grade.is-on .an-knobs { grid-template-columns: 80px minmax(0, 1fr); column-gap: 14px; }
  .an-grade.is-on .an-dial { width: 80px; height: 80px; }
  .an-grade.is-on .an-looks .an-rc span { padding: 0 9px; }
}
.an-grade.is-on :is(.an-pf figcaption, .an-pnum) { display: none; }
.an-grade.is-on .an-pf-grade { clip-path: inset(0 0 0 calc(var(--an-wipe, .5) * 100%)); }
.an-grade.is-drawn .an-poster { visibility: hidden; }
.an-cv { position: absolute; z-index: 1; display: block; pointer-events: none; }
.an-mlines { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.an-mlines::before, .an-mlines::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--an-hair-k); }
.an-mlines::before { top: 18.6%; }
.an-mlines::after { top: 81.4%; }
.an-wline { position: absolute; top: 0; bottom: 0; z-index: 3; left: calc(var(--an-wipe, .5) * 100%); width: 1px; background: var(--an-halo); box-shadow: 0 0 8px var(--an-halo); pointer-events: none; }
.an-grip { position: absolute; z-index: 4; left: clamp(64px, calc(var(--an-wipe, .5) * 100%), calc(100% - 64px)); top: 50%; transform: translate(-50%, -50%); display: flex; background: #000; color: var(--an-ink); font-size: 11px; padding: 9px 12px; border: 1px solid var(--an-halo); cursor: ew-resize; touch-action: none; white-space: nowrap; }
.an-grip span + span::before { content: "|"; margin: 0 8px; color: var(--an-halo); }
/* flat, there is nothing to compare: the wipe stays away until the first grade */
.an-wline, .an-grip, .an-wipel { transition: opacity var(--an-f6) linear, visibility var(--an-f6) linear; }
.an-grade.is-log :is(.an-wline, .an-grip, .an-wipel) { opacity: 0; visibility: hidden; }
.an-grade.is-on.is-log .an-mon { cursor: default; }
.an-wipel { display: block; }
.an-wipel input { width: 100%; }
.an-lookrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
.an-looks { display: flex; flex-wrap: wrap; gap: 6px; }
.an-lookrow .an-btn { flex: none; white-space: nowrap; }
.an-rc, .an-xc, .an-tog, .an-seg label, .an-scsel label { position: relative; display: inline-flex; }
.an-rc input, .an-xc input, .an-tog input, .an-seg input, .an-scsel input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.an-rc span, .an-seg span, .an-scsel span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; font-size: 12px; border: 1px solid var(--an-hair); }
.an-rc input:checked + span, .an-seg input:checked + span { background: #000; border-color: #000; box-shadow: inset 0 0 0 1px var(--an-ink); }
:is(.an-rc, .an-xc, .an-tog, .an-seg label, .an-scsel label):has(input:focus-visible) { outline: 2px solid var(--an-halo); outline-offset: 2px; }
.an-prompt { margin-left: auto; font: 13px/1.4 var(--an-mono); letter-spacing: .04em; color: var(--an-ink-2); }
.an-words { margin-top: 10px; font-size: 17px; line-height: 1.45; max-width: 36em; }

.an-reel input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 28px; margin: 0; cursor: pointer; }
.an-reel input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--an-ink); }
.an-reel input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 18px; margin-top: -9px; border: 0; border-radius: 0; background: var(--an-ink); }
.an-reel input[type="range"]::-moz-range-track { height: 1px; background: var(--an-ink); }
.an-reel input[type="range"]::-moz-range-thumb { width: 11px; height: 18px; border: 0; border-radius: 0; background: var(--an-ink); }

.an-scope { position: relative; }
.an-wave { height: 176px; }
.an-wave::after { content: ""; position: absolute; inset: 0 0 0 34px; pointer-events: none; background: linear-gradient(var(--an-hair), var(--an-hair)) 0 4.5% / 100% 1px no-repeat, linear-gradient(var(--an-hair), var(--an-hair)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--an-hair), var(--an-hair)) 0 95.5% / 100% 1px no-repeat; }
.an-vec { width: 176px; height: 176px; flex: none; }
.an-vec svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.an-sname, .an-gr { background: #000; color: var(--an-ink-3); z-index: 1; }
.an-sname { position: absolute; right: 6px; top: 5px; font-size: 10px; padding: 1px 3px; }
.an-vec .an-sname { top: auto; bottom: 5px; }
.an-gr { position: absolute; left: 6px; font: 10px/1 var(--an-mono); letter-spacing: .04em; padding: 1px 2px; transform: translateY(-50%); }
.an-gr-a { top: 4.5%; } .an-gr-b { top: 50%; } .an-gr-c { top: 95.5%; }
.an-plain { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--an-ink-2); }
.an-row2 { display: flex; gap: 24px; margin-top: 14px; }
.an-knobs { flex: 1; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; row-gap: 6px; align-content: center; }
.an-dialw { grid-row: 1 / 3; display: grid; justify-items: center; gap: 8px; align-self: center; }
.an-dial { position: relative; width: 96px; height: 96px; border-radius: 50%; background: #000; cursor: grab; touch-action: none; --v: 0; }
.an-dial svg { display: block; width: 100%; height: 100%; }
.an-dial circle { fill: none; transform: rotate(135deg); transform-origin: 48px 48px; }
.an-dial-t { stroke: rgb(237 235 230 / .22); stroke-width: 2; stroke-dasharray: 179.07 238.76; }
.an-dial-a { stroke: var(--an-halo); stroke-width: 3; stroke-dasharray: calc(179.07 * var(--v)) 238.76; filter: drop-shadow(0 0 calc(1px + 7px * var(--v)) rgb(255 92 58 / .8)); }
.an-dial-n { stroke: var(--an-ink); stroke-width: 1.5; transform: rotate(calc(-135deg + 270deg * var(--v))); transform-origin: 48px 48px; }
.an-dial-v { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 12px/1 var(--an-mono); letter-spacing: .02em; }
.an-rng { display: grid; gap: 0; }
.an-rng .an-sl { display: flex; justify-content: space-between; gap: 8px; }
.an-rng output { letter-spacing: .02em; }
.an-wp { font: 15px/1.2 var(--an-serif); color: var(--an-ink-2); letter-spacing: 0; text-transform: none; }
.an-seg { display: none; }
.an-wheels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.an-wheel { display: grid; justify-items: center; gap: 6px; text-align: center; --an-wd: 128px; }
.an-wn { display: grid; }
.an-disc { position: relative; width: var(--an-wd); aspect-ratio: 1; border-radius: 50%; background: #000; cursor: crosshair; touch-action: none; }
.an-disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -13deg, #c75c5c, #c75cc7 53deg, #6b6bd0 108deg, #5cbdbd 180deg, #5cae5c 233deg, #c7c75c 288deg, #c75c5c 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.an-disc::after { content: ""; position: absolute; inset: 12%; pointer-events: none; background: linear-gradient(var(--an-hair-k), var(--an-hair-k)) center / 1px 100% no-repeat, linear-gradient(var(--an-hair-k), var(--an-hair-k)) center / 100% 1px no-repeat; }
.an-puck { position: absolute; left: 50%; top: 50%; z-index: 1; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 1.5px solid var(--an-ink); background: rgb(0 0 0 / .35); box-shadow: 0 0 0 1px #000; transform: translate(var(--px, 0px), var(--py, 0px)); cursor: grab; }
.an-lum input { width: var(--an-wd); }
.an-wv { display: flex; gap: 8px; font-size: 11px; letter-spacing: .02em; }
.an-static { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 18px; }
.an-static > p { grid-column: 1 / -1; margin-top: 0; }
.an-static img { display: block; width: 100%; height: auto; background: #000; }
.an-static figcaption { margin-top: 6px; font: 11px/1.35 var(--an-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--an-ink-2); }
.an-grade.is-nogl :is(.an-wave, .an-vec, .an-plain-w, .an-plain-v) { display: none; }
.an-grade.is-nogl .an-row2 { margin-top: 0; }
.an-grade.is-on .an-mfoot { position: relative; z-index: 2; }
.an-under { display: grid; justify-items: start; gap: 20px; padding: 0 32px var(--an-pad); }
.an-type summary { display: inline-block; cursor: pointer; list-style: none; padding: 12px 0 5px; box-shadow: 0 1px 0 var(--an-ink); }
.an-type summary::-webkit-details-marker { display: none; }
.an-tgrid { display: grid; gap: 8px; margin-top: 18px; }
.an-th, .an-trow { display: grid; grid-template-columns: 84px repeat(3, 112px); gap: 12px; align-items: center; }
.an-th { font: 11px/1 var(--an-mono); color: var(--an-ink-2); }
.an-trow3 { grid-template-columns: repeat(3, 150px); margin-top: 8px; }
.an-trow3 label { display: grid; gap: 4px; }
.an-tgrid input { width: 100%; min-height: 40px; background: #000; color: var(--an-ink); border: 0; border-bottom: 1px solid var(--an-hair-k); border-radius: 0; font: 14px var(--an-mono); padding: 6px 8px; }
.an-timeit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.an-status { font-size: 12px; color: var(--an-ink); letter-spacing: .06em; text-transform: none; max-width: 52em; }
.an-closer { margin-top: 24px; font-size: clamp(1.1875rem, .95rem + .9vw, 1.625rem); line-height: 1.32; max-width: 30em; }

/* ── 03 and 04: a picture shot with a tool ── */
.an-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--an-gut); align-items: center; padding: clamp(32px, 4vw, 56px) var(--an-side); min-height: var(--an-frame); }
.an-split-a .an-cut { grid-column: 1 / 8; }
.an-split-a .an-copy { grid-column: 9 / 13; }
.an-split-b .an-pw { grid-column: 6 / 13; grid-row: 1; }
.an-split-b .an-copy { grid-column: 1 / 5; grid-row: 1; }
.an-frame32 { aspect-ratio: 3 / 2; }
.an-copy { display: grid; gap: 18px; align-content: center; }
.an-copy .an-body + .an-body { margin-top: 0; }
.an-guide { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.an-gw { position: absolute; inset: 18.6% 0; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .74), inset 0 0 0 1px var(--an-hair-k); transition: inset var(--an-f10) linear; }
.an-cut:has(#an-x-169:checked) .an-gw { inset: 7.8% 0; }
.an-cut:has(#an-x-45:checked) .an-gw { inset: 0 23.4%; }
.an-cut:has(#an-x-916:checked) .an-gw { inset: 0 31.25%; }
.an-xg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.an-xg legend { padding-bottom: 8px; color: var(--an-ink-2); }
.an-xc { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--an-hair); }
.an-xr { font-size: 14px; letter-spacing: .06em; }
.an-xw { font-size: 15px; line-height: 1.2; color: var(--an-ink-2); }
.an-xc:has(input:checked) { background: #000; border-color: #000; }
.an-pw-up { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(var(--an-ww, 17%) var(--an-wh, 30%) at var(--an-wx, 54%) var(--an-wy, 45%), #000 40%, transparent 100%); mask-image: radial-gradient(var(--an-ww, 17%) var(--an-wh, 30%) at var(--an-wx, 54%) var(--an-wy, 45%), #000 40%, transparent 100%); }
.an-pw-up img { height: 100%; }
.an-pw:has(#an-pw-on:not(:checked)) { --an-lo: 1; --an-hi: 1; }
.an-pw-ring { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity var(--an-f4) linear; }
.an-pw-ring ellipse { fill: none; stroke: var(--an-ink); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.an-pw.is-drag .an-pw-ring, .an-pw:has(.an-win:focus-visible) .an-pw-ring { opacity: 1; }
.an-pw .an-still { cursor: move; touch-action: pan-y; }
.an-win { position: absolute; z-index: 3; left: var(--an-wx, 54%); top: var(--an-wy, 45%); width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 1px solid var(--an-ink); background: rgb(0 0 0 / .3); cursor: move; touch-action: none; }
.an-win::before, .an-win::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--an-ink); }
.an-win::before { width: 1px; height: 12px; margin: -6px 0 0 -.5px; }
.an-win::after { width: 12px; height: 1px; margin: -.5px 0 0 -6px; }
.an-pw:has(#an-pw-on:not(:checked)) :is(.an-win, .an-pw-ring) { visibility: hidden; }
.an-pwc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
.an-tog span { display: inline-flex; align-items: flex-end; min-height: 44px; padding-bottom: 5px; box-shadow: 0 1px 0 var(--an-ink); }
.an-tog-b { display: none !important; }
.an-tog:has(input:not(:checked)) .an-tog-a { display: none !important; }
.an-tog:has(input:not(:checked)) .an-tog-b { display: inline-flex !important; }
.an-where { color: var(--an-ink-2); font-size: 12px; }
.an-pw-line { font-size: clamp(1.1875rem, 1rem + .5vw, 1.4375rem); }

/* ── 05 to 10, reading shots on the suite grey ── */
.an-read { padding: var(--an-pad) var(--an-side); background: radial-gradient(90% 70% at 50% 45%, var(--an-suite-hi), var(--an-suite) 72%); }
.an-cuesheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(24px, 5vw, 80px); max-width: 1120px; margin: 0 auto; }
.an-cs-h { color: var(--an-ink-2); padding-bottom: 14px; border-bottom: 1px solid var(--an-hair); }
.an-cs-l { list-style: none; counter-reset: an-c; }
.an-cs-l li { counter-increment: an-c; display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 16px 0 17px; border-bottom: 1px solid var(--an-hair); line-height: 1.45; }
.an-cs-l li::before { content: counter(an-c, decimal-leading-zero); font: 12px/1 var(--an-mono); color: var(--an-ink-2); padding-top: .55em; }
.an-cs-note { margin: 64px auto 0; text-align: center; max-width: 26em; }
.an-wide { height: var(--an-frame); }
.an-aside { display: grid; justify-items: center; gap: 28px; text-align: center; }
.an-aside .an-body { text-align: left; }
.an-burn { background: #000; padding: 8px 12px; letter-spacing: .16em; font-size: 12px; }
.an-l3-lead { margin: 0 auto 56px; text-align: center; }
.an-l3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 0 var(--an-gut); max-width: 1320px; margin: 0 auto; }
.an-lk { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
.an-lk-f { aspect-ratio: 2.39; overflow: hidden; background: #000; }
.an-lk-f img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; }
.an-lk-warm img { filter: url(#an-f-warm); }
.an-lk-cold img { filter: url(#an-f-cold); }
.an-lk-dfn img { filter: url(#an-f-dfn); }
.an-lk .an-h3 { margin-top: 10px; }
.an-lt { width: 100%; border-collapse: collapse; font-size: 13px; letter-spacing: .02em; }
.an-lt :is(th, td) { height: 32px; padding: 0; text-align: right; font-weight: 400; border-bottom: 1px solid var(--an-hair); }
.an-lt th[scope="row"] { text-align: left; color: var(--an-ink-2); letter-spacing: .1em; }
.an-lt thead th { color: var(--an-ink-2); }
.an-load { justify-self: start; }
.an-edl-lead { margin: 0 auto 18px; text-align: center; max-width: 26em; }
.an-edl-key { margin: 0 auto 44px; text-align: center; max-width: 46em; text-wrap: pretty; }
.an-edl { background: #000; max-width: 1120px; margin: 0 auto; padding: 4px 0 8px; }
.an-edl-h, .an-ev { display: grid; grid-template-columns: 64px 72px minmax(0, 260px) minmax(0, 1fr); column-gap: 24px; padding-inline: 28px; }
.an-edl-h { padding-block: 14px; border-bottom: 1px solid var(--an-hair-k); font: 11px/1 var(--an-mono); letter-spacing: .12em; color: var(--an-ink-3); }
.an-edl-l { list-style: none; }
.an-ev { position: relative; align-items: baseline; padding-block: 22px; border-bottom: 1px solid var(--an-hair-k); }
.an-ev:last-child { border-bottom: 0; }
.an-evt, .an-tr { font-size: 13px; letter-spacing: .06em; color: var(--an-ink-3); }
.an-evn { font-weight: 400; font-size: 24px; line-height: 1.2; }
.an-evp { font-size: 17px; line-height: 1.5; color: var(--an-ink-2); }
.an-evx { grid-column: 3 / -1; margin-top: 14px; font-size: 17px; line-height: 1.55; max-width: 40em; }
.an-ev.is-on .an-evt { color: var(--an-ink); }
.an-ev.is-on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--an-halo); box-shadow: 0 0 6px var(--an-halo); }
.an-gloss { columns: 2; column-gap: clamp(32px, 5vw, 80px); max-width: 1120px; margin: 0 auto; }
.an-gloss > div { break-inside: avoid; padding: 18px 0 22px; border-top: 1px solid var(--an-hair); }
.an-gloss dt { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); line-height: 1.25; margin-bottom: 8px; }
.an-gloss dt a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--an-ink-2); }
.an-gloss dd { font-size: 17px; line-height: 1.5; color: var(--an-ink-2); }
.an-num { font: .88em var(--an-mono); }
.an-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(32px, 5vw, 72px); max-width: 960px; margin: 0 auto; }
.an-q .an-h3 { font-size: clamp(1.375rem, 1.15rem + .6vw, 1.75rem); margin-bottom: 10px; }
.an-form { position: relative; display: grid; gap: 30px; max-width: 880px; margin: 0 auto; }
.an-form-h { color: var(--an-ink-2); padding-bottom: 14px; border-bottom: 1px solid var(--an-hair); }
.an-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px var(--an-gut); }
.an-fld { display: grid; gap: 6px; align-content: start; }
.an-fld > .an-sl, .an-fs legend { color: var(--an-ink-2); }
.an-fs legend { padding-bottom: 6px; }
.an-form :is(input[type="text"], select, textarea) { width: 100%; min-height: 48px; padding: 10px 0; font: 19px/1.4 var(--an-serif); color: var(--an-ink); background: transparent; border: 0; border-bottom: 1px solid var(--an-ink); border-radius: 0; }
.an-form select { cursor: pointer; }
.an-form select option { background: #000; }
.an-form textarea { resize: vertical; }
.an-form ::placeholder { color: var(--an-ink-2); opacity: 1; }
.an-fs { display: flex; flex-wrap: wrap; gap: 0 28px; }
.an-opt { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-size: 19px; line-height: 1.3; cursor: pointer; }
.an-opt input { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0; border: 1px solid var(--an-ink); background: transparent; }
.an-opt input:checked::before { content: ""; width: 8px; height: 8px; background: var(--an-ink); }
/* one choice is a diamond, several are squares: the difference shows before anything is ticked */
.an-opt input[type="radio"] { width: 14px; height: 14px; margin-inline: 2px; transform: rotate(45deg); }
.an-opt input[type="radio"]:checked::before { width: 6px; height: 6px; }
.an-opt input[type="checkbox"]:checked::before { width: 5px; height: 10px; background: none; border: solid var(--an-ink); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.an-opt input:disabled { border-color: var(--an-ink-2); }
.an-opt input:disabled + span { color: var(--an-ink-2); }
.an-hint { font-size: 15px; line-height: 1.45; color: var(--an-ink-2); }
.an-sendrow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.an-send { min-height: 52px; padding: 0 24px; background: #000; color: var(--an-halo); border: 1px solid var(--an-halo); font-size: 13px; letter-spacing: .12em; cursor: pointer; transition: box-shadow var(--an-f4) linear; }
.an-send:hover, .an-send:focus-visible { box-shadow: 0 0 18px rgb(255 92 58 / .45); }
.an-stamp { position: absolute; top: 0; right: 0; background: #000; padding: 8px 12px; letter-spacing: .12em; }
.an-end { display: grid; justify-items: center; gap: 28px; max-width: 30em; margin: clamp(80px, 9vw, 144px) auto 0; text-align: center; }
.an-end-h { color: var(--an-ink-2); letter-spacing: .3em; }
.an-endl { display: grid; gap: 20px; }
.an-endl dt { font: 11px/1.3 var(--an-mono); letter-spacing: .16em; color: var(--an-ink-2); }
.an-endl dd { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); line-height: 1.3; }
.an-endnote { font-size: 17px; color: var(--an-ink-2); }
.an-eor { background: #000; display: grid; justify-items: center; gap: 22px; padding: 80px var(--an-side) 72px; text-align: center; }
.an-eor .an-sl { letter-spacing: .34em; font-size: 13px; }
.an-shots { position: fixed; inset: auto var(--an-side) calc(var(--an-bot) + var(--an-mb) + 10px) auto; margin: 0; width: min(460px, calc(100vw - 2 * var(--an-side))); max-height: calc(100svh - var(--bar-h, 44px) - var(--an-bot) - 40px); overflow: auto; padding: 20px 24px 16px; background: #000; color: var(--an-ink); border: 1px solid var(--an-hair-k); }
.an-shots::backdrop { background: rgb(0 0 0 / .55); }
.an-shots-h { color: var(--an-ink-3); }
.an-shots-l { list-style: none; margin: 10px 0 12px; }
.an-shots-l a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--an-hair-k); text-decoration: none; font: 12px/1.3 var(--an-mono); letter-spacing: .1em; }
.an-shots-l a span:last-child { color: var(--an-ink-3); letter-spacing: .04em; }
.an-shots-l a.is-on span:first-child { color: var(--an-halo); }

/* ── 700 to 1023 ── */
@media (max-width: 1023px) {
  .an-strip-t { grid-template-columns: minmax(0, 1fr) auto; }
  .an-nav { display: none; }
  /* under 1024 the desk is one column: the slate, the monitor, the wipe and looks, the words, the instruments */
  .an-grade.is-on { display: flex; flex-direction: column; align-items: stretch; }
  .an-grade.is-on :is(.an-side, .an-mcol) { display: contents; }
  .an-grade.is-on .an-slatecard { order: -2; margin-bottom: 20px; }
  .an-grade.is-on .an-l2 { order: -1; margin-bottom: 20px; }
  .an-grade.is-on .an-mon { order: 0; }
  .an-grade.is-on .an-mfoot { order: 1; }
  .an-grade.is-on .an-words { order: 2; }
  .an-grade.is-on .an-inst { order: 3; margin-top: 28px; }
  .an-grade.is-on .an-cues { order: 4; margin-top: 24px; }
  .an-slatecard { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; }
  .an-slatecard::before, .an-sc-top { grid-column: 1 / -1; }
  .an-slatecard > :is(.an-title, .an-kicker, .an-log) { grid-column: 1; }
  .an-sc-f { grid-column: 2; grid-row: 3 / 6; align-self: end; margin-top: 0; }
  .an-inst .an-scopes { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  .an-wave { grid-column: 1; }
  .an-plain-w { grid-column: 1; }
  .an-row2 { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .an-plain-v { grid-column: 1 / -1; }
  .an-knobs { display: none; }
  .an-inst { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 24px; }
  .an-inst > .an-scopes, .an-inst > .an-static { grid-column: 1 / -1; }
  .an-wheels { grid-column: 1; }
  .an-inst::after { content: none; }
  .an-split { grid-template-columns: minmax(0, 1fr); row-gap: 32px; min-height: 0; }
  .an-split > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .an-split-b .an-copy { order: 2; }
  .an-l3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(10, auto); row-gap: 0; }
  .an-lk { margin-bottom: 40px; }
  .an-edl-h, .an-ev { grid-template-columns: 56px 64px minmax(0, 200px) minmax(0, 1fr); column-gap: 18px; padding-inline: 20px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .an-grade.is-on .an-inst { grid-template-columns: minmax(0, 1fr); }
  .an-knobs { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .an-inst .an-scopes { grid-template-columns: minmax(0, 1fr) 176px minmax(0, 260px); }
  .an-row2 { display: contents; }
  .an-vec { grid-column: 2; grid-row: 1; }
  .an-knobs { grid-column: 3; grid-row: 1 / 3; }
}
/* tall tablets: the monitor sticks under the strip with the scopes row riding under it (desk.js moves it
   there), so the three wheels come up directly beneath and picture, scopes and wheels share one screen */
@media (min-width: 700px) and (max-width: 1023px) and (min-height: 900px) {
  .an-grade.is-on .an-mon { position: sticky; top: calc(var(--bar-h, 44px) + var(--an-top)); z-index: 5; order: 0; width: 100%; max-width: max(420px, calc((100svh - var(--bar-h, 44px) - var(--an-top) - var(--an-bot) - 450px) * 1.5)); margin-inline: auto; }
  .an-grade.is-on .an-inst { order: 1; margin-top: 16px; }
  .an-grade.is-on .an-mfoot { order: 2; margin-top: 10px; }
  .an-grade.is-on .an-words { order: 3; }
  .an-grade.is-on .an-wheels { margin-top: 0; }
  .an-mon:has(> .an-scopes) { --an-band: 204px; margin-bottom: var(--an-band); }
  /* a full-width suite-grey backdrop behind the stuck monitor and its band, so nothing shows beside them */
  .an-mon:has(> .an-scopes)::after { content: ""; position: absolute; z-index: -1; left: -50vw; right: -50vw; top: 0; bottom: calc(-1 * var(--an-band)); background: var(--an-suite); pointer-events: none; }
  .an-mon > .an-scopes { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; height: var(--an-band); padding-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 176px minmax(0, 240px); column-gap: 24px; cursor: default; }
  .an-mon > .an-scopes .an-plain { display: none; }
  .an-mon > .an-scopes .an-knobs { grid-row: 1; align-self: center; }
}

/* ── phones ── */
@media (max-width: 699px) {
  .an-strip-t { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding-bottom: 10px; }
  .an-mark { font-size: 16px; }
  .an-brand { display: contents; }
  .an-reelname { justify-self: center; align-self: end; font-size: 11px; }
  .an-rn-a { display: none; }
  .an-reel.is-picshot:not(.is-gate) .an-rn-p { display: inline; }
  .an-rec { display: none; }
  .an-tcv { font-size: 13px; }
  .an-strip-b { padding-top: 0; }
  .an-trackw { height: 12px; }
  .an-row { grid-template-columns: minmax(0, 1fr) auto; height: 40px; gap: 8px; }
  .an-ro { display: none; max-width: none; }
  .an-reel.is-desk .an-ro { display: block; }
  .an-reel.is-desk .an-now { display: none; }
  .an-tx-l { display: none; }
  .an-tx-s { display: inline; font-size: 22px; line-height: 1; }
  .an-txb { min-width: 40px; height: 40px; padding: 0 8px; }
  .an-shotsb { font-size: 11px; }
  .an-cue { display: inline-flex; align-items: center; min-height: 44px; padding: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .an-chip { font-size: 10px; }
  .an-grade.is-on { display: flex; flex-direction: column; align-items: stretch; padding: 0 0 24px; }
  .an-grade:not(.is-on) { padding-inline: var(--an-side); }
  .an-poster { grid-template-columns: minmax(0, 1fr); }
  /* the slate goes full bleed above the monitor, compact: its name, the clock, and what the studio does */
  .an-slatecard { display: block; margin-bottom: 0 !important; padding: 0 var(--an-side) 14px; }
  .an-slatecard::before { margin: 0 calc(-1 * var(--an-side)) 12px; height: 8px; }
  .an-title { font-size: 34px; margin-top: 6px; }
  .an-kicker { font-size: 10px; margin-top: 8px; }
  .an-log { font-size: 16px; margin-top: 8px; }
  .an-sc-f { display: none; }
  #an-stc { font-size: 17px; }
  .an-grade.is-on .an-mon { position: sticky; top: calc(var(--bar-h, 44px) + var(--an-top)); z-index: 5; order: 0; }
  .an-grade.is-on .an-inst { order: 1; display: flex; flex-direction: column; margin-top: 0; padding: 16px var(--an-side) 0; }
  .an-grade.is-on .an-mfoot { order: 2; padding: 0 var(--an-side); }
  .an-grade.is-on .an-words { order: 3; padding: 0 var(--an-side); }
  .an-grade.is-on .an-l2 { order: 4; margin: 16px 0 0; padding: 0 var(--an-side); }
  .an-grade.is-on .an-cues { order: 5; margin-top: 8px; padding: 0 var(--an-side); }
  .an-mnote { display: none; }
  .an-scsel:not([hidden]) { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 0; background: var(--an-chip); }
  .an-scsel span { min-height: 30px; padding: 0 8px; font-size: 10px; border: 0; }
  .an-scsel input:checked + span { box-shadow: inset 0 -1px 0 var(--an-ink); }
  .an-mon > .an-scope { position: absolute; left: 8px; right: auto; bottom: 8px; z-index: 3; pointer-events: none; }
  .an-mon > .an-wave { width: 132px; height: 66px; }
  .an-mon > .an-vec { width: 88px; height: 88px; }
  .an-mon > .an-scope :is(.an-gr, .an-sname) { display: none; }
  .an-mon > .an-wave::after { left: 0; }
  .an-mon:has(input[value="vec"]:checked) > .an-wave, .an-mon:has(input[value="wave"]:checked) > .an-vec, .an-mon:has(input[value="off"]:checked) > .an-scope { display: none; }
  .an-inst .an-scopes { display: block; order: 2; margin-top: 18px; }
  .an-plain-w, .an-plain-v { display: none; }
  .an-row2 { margin-top: 0; }
  .an-knobs { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .an-seg { display: flex; order: 0; }
  .an-seg label { flex: 1; }
  .an-seg span { width: 100%; justify-content: center; min-height: 40px; }
  .an-wheels { order: 1; display: block; margin-top: 14px; }
  .an-wheel { --an-wd: 200px; }
  .an-inst:has(.an-seg input[value="lift"]:checked) :is(#an-gamma, #an-gain), .an-inst:has(.an-seg input[value="gamma"]:checked) :is(#an-lift, #an-gain), .an-inst:has(.an-seg input[value="gain"]:checked) :is(#an-lift, #an-gamma) { display: none; }
  .an-caprow { font-size: 10px; }
  .an-caphint { display: none; }
  .an-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .an-looks .an-rc span { width: 100%; justify-content: center; min-height: 44px; }
  .an-lookrow { gap: 8px; }
  .an-under { padding-inline: var(--an-side); }
  .an-th, .an-trow { grid-template-columns: 64px repeat(3, minmax(0, 1fr)); gap: 8px; }
  .an-trow3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-split { padding: 0 0 48px; row-gap: 24px; }
  .an-copy { padding-inline: var(--an-side); }
  .an-xg, .an-pwc { padding-inline: var(--an-side); }
  .an-xg { gap: 4px; }
  .an-xg legend { padding-inline: var(--an-side); }
  .an-xc { padding: 6px 4px; align-items: center; text-align: center; min-height: 44px; }
  .an-xw { display: none; }
  .an-xc::after { font: 10px/1.2 var(--an-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--an-ink-2); }
  .an-xc:nth-of-type(1)::after { content: "cinema"; }
  .an-xc:nth-of-type(2)::after { content: "TV, web"; }
  .an-xc:nth-of-type(3)::after { content: "feed"; }
  .an-xc:nth-of-type(4)::after { content: "phone"; }
  .an-chip-slate { top: 10px; left: 10px; }
  .an-still .an-chip { padding: 5px 8px; }
  .an-wide { height: auto; aspect-ratio: 3 / 2; }
  .an-cuesheet, .an-qa, .an-f2 { grid-template-columns: minmax(0, 1fr); }
  .an-gloss { columns: 1; }
  .an-l3 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; grid-template-rows: repeat(5, auto); column-gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--an-side)); padding: 0 var(--an-side) 12px; scroll-padding-inline: var(--an-side); }
  .an-lk { scroll-snap-align: start; margin-bottom: 0; }
  .an-edl-h { display: none; }
  .an-ev { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 18px 18px 20px; }
  .an-evn { grid-column: 1 / -1; grid-row: 2; font-size: 22px; }
  .an-evp, .an-evx { grid-column: 1 / -1; }
  .an-shots { inset: auto 12px calc(var(--an-bot) + 8px) 12px; width: auto; }
}
@media (max-width: 699px) and (max-height: 640px) {
  .an-kicker { display: none; }
  .an-title { font-size: 30px; }
  .an-log { font-size: 15px; }
  /* the whole wheel group under the stuck monitor: the disc, and beside it the name, the numbers and the slider */
  .an-wheel { --an-wd: 120px; grid-template-columns: var(--an-wd) minmax(0, 11.5rem); grid-template-rows: auto auto 1fr; justify-content: center; justify-items: start; align-items: start; column-gap: 18px; row-gap: 6px; text-align: left; }
  .an-wheel .an-disc { grid-column: 1; grid-row: 1 / 4; }
  .an-wheel .an-wn { grid-column: 2; grid-row: 1; }
  .an-wheel .an-wv { grid-column: 2; grid-row: 2; flex-direction: column; gap: 3px; }
  .an-wheel .an-lum { grid-column: 2; grid-row: 3; align-self: end; width: 100%; }
  .an-wheel .an-lum input { width: 100%; }
}
@media (max-height: 479px) {
  .an-top, .an-foot { position: relative; top: auto; bottom: auto; }
  .an-grain { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .an-reel *, .an-reel *::before, .an-reel *::after { transition-duration: 0s !important; }
  .an-grain::before { animation: none; }
}
.an-scsel { display: none; }
.an-shot { scroll-margin-top: calc(var(--bar-h, 44px) + var(--an-top) + var(--an-mt)); }
.an-grade { scroll-margin-top: calc(var(--bar-h, 44px) + var(--an-top) + 8px); }
@media (max-width: 699px) { .an-prompt { margin-left: 0; width: 100%; } }
.an-sprite { display: block; aspect-ratio: 3 / 1; overflow: hidden; background: #000; }
.an-sprite-b img { margin-top: -33.3333%; }
.an-shot { position: relative; }
/* without a script: the slate, then the log and our warm day side by side with their captions */
@media (scripting: none) {
  .an-grade.is-on { align-content: start; min-height: 0; }
  .an-grade.is-on .an-mon { position: relative; aspect-ratio: auto; background: none; cursor: auto; }
  .an-grade.is-on .an-poster { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--an-gut); }
  .an-grade.is-on .an-pf { position: static; }
  .an-grade.is-on .an-pf img { height: auto; }
  .an-grade.is-on .an-pf-grade { clip-path: none; }
  .an-grade.is-on :is(.an-pf figcaption, .an-pnum) { display: block; }
  .an-grade :is(.an-mlines, .an-wline, .an-grip, .an-mnote, .an-mfoot, .an-inst, .an-sc-tc, .an-words) { display: none !important; }
}
@media (scripting: none) and (max-width: 699px) {
  .an-grade.is-on .an-poster { grid-template-columns: minmax(0, 1fr); padding: 16px var(--an-side) 0; }
}