/* stankiguild.com
   Type and interface language adapted from hairline by Lucas Marques (MIT, see /licenses/):
   chroma-free greys, cards drawn by a hairline ring and two soft drops, mono uppercase labels,
   one serif voice for titles. The landscape behind the story is {Shan, Shui}* by Lingdong Huang (MIT). */

@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/assets/fonts/geist-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: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/assets/fonts/geist-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: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/assets/fonts/instrument-serif-latin-400-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: "Instrument Serif"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/assets/fonts/instrument-serif-latin-ext-400-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: "Instrument Serif"; font-style: italic; font-display: swap; font-weight: 400;
  src: url("/assets/fonts/instrument-serif-latin-400-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; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-display: swap; font-weight: 400;
  src: url("/assets/fonts/instrument-serif-latin-ext-400-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; }

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --paper: #f7f5f0;
  --veil: rgba(250, 249, 246, 0.94);
  --surface: #ffffff;
  --stone: #efede8;
  --ink: #0a0a0a;
  --muted: #5f5f5f;
  --faint: #8a8a8a;
  --line: rgba(0, 0, 0, 0.08);
  --seal: #b0302a;
  --card: 0 0 0 1px #0000000f, 0 1px 2px -1px #0000000f, 0 2px 4px 0 #0000000a;
  --lift: 0 1px 2px #00000008, 0 10px 28px -16px #00000024;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --topbar: 54px;
  --gutter: clamp(16px, 5vw, 28px);
  --ls-filter: none;
  --ls-opacity: 0.62;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #080a0f; --veil: rgba(14, 16, 21, 0.95); --surface: #13161c; --stone: #222630;
    --ink: #ededeb; --muted: #a8a8a4; --faint: #85857f; --line: rgba(255, 255, 255, 0.1); --seal: #d4574f;
    --card: 0 0 0 1px #ffffff1a, 0 1px 2px -1px #00000066, 0 2px 4px 0 #00000040;
    --lift: 0 1px 2px #00000040, 0 10px 28px -16px #000000a0;
    --ls-filter: invert(1); --ls-opacity: 0.42;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #080a0f; --veil: rgba(14, 16, 21, 0.95); --surface: #13161c; --stone: #222630;
  --ink: #ededeb; --muted: #a8a8a4; --faint: #85857f; --line: rgba(255, 255, 255, 0.1); --seal: #d4574f;
  --card: 0 0 0 1px #ffffff1a, 0 1px 2px -1px #00000066, 0 2px 4px 0 #00000040;
  --lift: 0 1px 2px #00000040, 0 10px 28px -16px #000000a0;
  --ls-filter: invert(1); --ls-opacity: 0.42;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font: 400 16px/1.65 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { a:hover { text-decoration-color: currentColor; } }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--paper); }

.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 8px; }

/* top bar: the name at the left, muted 13px links at the right, inside a 1080px column */
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--topbar); padding: 0 max(var(--gutter), calc((100% - 1080px) / 2 + var(--gutter)));
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.topbar-name { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.topbar nav { display: flex; margin-right: -10px; }
.topbar-link { display: inline-flex; align-items: center; height: 40px; padding: 0 10px; border-radius: 8px; font-size: 13px; line-height: 1; color: var(--muted); text-decoration: none; }
.topbar-link[aria-current] { color: var(--ink); }
@media (hover: hover) { .topbar-link:hover { color: var(--ink); } }
@media (max-width: 359px) { .topbar-link { padding: 0 7px; } .topbar nav { margin-right: -7px; } }

/* the seal: a small square chop, the only colour on the page */
.seal { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; background: var(--seal); color: #fff; font: 400 11px/1 var(--font-serif); letter-spacing: 0.02em; flex: none; }
.seal-lg { width: 44px; height: 44px; border-radius: 5px; font-size: 22px; }

.label { font: 400 11.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- story (home) ---------- */
.landscape { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; height: 100vh; height: 100lvh; }
.ls-strip { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; filter: var(--ls-filter); }
.ls-tile { height: 100%; width: auto; max-width: none; flex: none; opacity: 0; transition: opacity 1400ms ease; }
.ls-tile.is-in { opacity: var(--ls-opacity); }

.story { position: relative; }
.scene {
  display: flex; align-items: center; min-height: 88vh; min-height: 88svh;
  padding: 10vh max(var(--gutter), calc((100% - 1080px) / 2 + var(--gutter)));
}
.scene-card {
  position: relative; width: 100%; max-width: 31rem; padding: 28px 28px 26px; border-radius: 16px;
  background: var(--veil); box-shadow: var(--card), var(--lift);
}
@media (min-width: 900px) {
  .scene:nth-of-type(even) { justify-content: flex-end; }
}
.scene-card > * + * { margin-top: 14px; }
.scene-card > h1 + p, .scene-card > h2 + p { margin-top: 20px; }
.scene-index { display: flex; align-items: center; gap: 10px; }
.scene h1, .scene h2 { margin: 12px 0 0; font: 400 clamp(30px, 4.4vw, 40px)/1.08 var(--font-serif); letter-spacing: -0.005em; text-wrap: balance; }
.scene-hero h1 { font-size: clamp(40px, 7vw, 64px); line-height: 1.02; }
.scene-hero { min-height: 92vh; min-height: 92svh; }
.scene-hero .scene-card { max-width: 34rem; }
.scene p { margin: 0; text-wrap: pretty; }
.scene-body { font-size: 17px; line-height: 1.6; }
.proof { padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--muted); }
.proof + .proof { border-top: 0; padding-top: 0; }
.proof .label { display: block; margin-bottom: 6px; }
.note { font-size: 13px; line-height: 1.55; color: var(--muted); font-style: italic; }

.scene-apps .scene-card { max-width: 64rem; }
.apps { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 760px) { .apps { grid-template-columns: 1fr 1fr; } }
.app { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 12px; background: var(--surface); box-shadow: var(--card); }
.app h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.app p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.app .more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 9px; font-size: 14px; font-weight: 500; text-decoration: none; background: var(--ink); color: var(--paper); box-shadow: var(--lift); transition: transform 160ms var(--ease-out); align-self: flex-start; }
.btn:active { transform: scale(0.97); }

.scene-end { min-height: 70vh; }
.scene-end .scene-card { max-width: 40rem; }
.legal-lines { font-size: 14px; line-height: 1.7; }
.contact-list, .link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.contact-list li { display: grid; gap: 2px; }
.contact-list span { color: var(--muted); font-size: 13px; }
.link-list { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.link-list a, .contact-list a { display: inline-block; padding: 4px 0; }

/* ---------- reading pages (docs, legal) ---------- */
.col { max-width: calc(700px + 2 * var(--gutter)); margin: 0 auto; padding: 48px var(--gutter) 80px; }
.col-head { padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.col-head .label { display: flex; align-items: center; gap: 10px; }
.prose { overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose h1 { margin: 14px 0 0; font: 400 clamp(34px, 6vw, 46px)/1.08 var(--font-serif); letter-spacing: -0.005em; text-wrap: balance; }
.prose h2 { margin: 48px 0 0; font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -0.012em; text-wrap: balance; scroll-margin-top: calc(var(--topbar) + 16px); }
.prose h3 { margin: 32px 0 0; font-size: 16.5px; font-weight: 600; line-height: 1.4; scroll-margin-top: calc(var(--topbar) + 16px); }
.prose h4 { margin: 24px 0 0; font-size: 15px; font-weight: 600; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose .table-scroll, .prose pre { margin: 14px 0 0; }
.prose p, .prose li { text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--faint); }
.prose hr { margin: 28px 0; border: 0; border-top: 1px solid var(--line); }
.prose strong { font-weight: 600; }
.prose code { font: 400 0.86em/1.4 var(--font-mono); padding: 1px 5px; border-radius: 5px; background: var(--stone); overflow-wrap: anywhere; }
.prose pre { overflow-x: auto; padding: 14px 16px; border-radius: 12px; background: var(--surface); box-shadow: var(--card); }
.prose pre code { padding: 0; background: none; font-size: 13px; }
.prose blockquote { padding: 2px 0 2px 16px; border-left: 2px solid var(--line); color: var(--muted); }
.prose blockquote p:first-child { margin-top: 0; }
.table-scroll { overflow-x: auto; border-radius: 12px; background: var(--surface); box-shadow: var(--card); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.prose th { padding: 10px 14px; text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); vertical-align: bottom; }
.prose td { padding: 10px 14px; vertical-align: top; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .prose table { min-width: 520px; } }
.doc-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.doc-list li { padding: 20px; border-radius: 12px; background: var(--surface); box-shadow: var(--card); }
.doc-list h2 { margin: 0; font-size: 17px; }
.doc-list p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.license-text { max-height: 22rem; font-size: 12.5px; white-space: pre-wrap; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--paper); }
.site-footer-in { max-width: 1080px; margin: 0 auto; padding: 28px var(--gutter) 40px; display: grid; gap: 14px; font-size: 13px; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.site-footer nav a { display: inline-block; padding: 6px 0; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .site-footer nav a:hover { text-decoration: underline; } }
.site-footer p { margin: 0; max-width: 72ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}
@media print {
  .landscape, .topbar nav, .skip { display: none; }
  .scene { min-height: 0; padding: 12px 0; }
  .scene-card { box-shadow: none; background: none; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .scene-card { padding: 22px 20px 20px; } .app { padding: 18px 16px; } }

/* ---------- pass 2: more of hairline's details, kept quiet ---------- */
a { text-underline-offset: 4px; }

/* a small mono tag in a hairline ring (hairline's .detail-tag) */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); font: 400 11px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

/* the scene number sits on a ruler: a hairline baseline with a tick every 8px, a taller one every 40px.
   (pass 4) The same ruler drawn again in ink fills it from the left as the scene passes through the window. */
.ruler, .ruler-fill {
  --tick: var(--line);
  background:
    linear-gradient(var(--tick), var(--tick)) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 40px) bottom / 100% 7px no-repeat,
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat;
}
.ruler { position: relative; flex: 1; height: 7px; }
.ruler-fill { --tick: var(--faint); position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }

/* cards: a tag over the name, an arrow on links that leave the site */
.app .tag-row { margin-bottom: -2px; }
.ext { display: inline-block; margin-left: 2px; font-size: 13px; transition: transform 160ms var(--ease-out); }
@media (hover: hover) { .btn:hover .ext { transform: translate(1px, -1px); } }

/* reading pages: each section opens on a hairline, its title beside a link that shows on hover or focus */
.doc-head { display: flex; align-items: baseline; gap: 6px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); }
.doc-head h2 { margin: 0; }
.prose > hr + .doc-head, .prose > .doc-head:first-of-type { border-top: 0; padding-top: 0; }
.anchor { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; font: 400 13px/1 var(--font-mono); color: var(--faint); text-decoration: none; opacity: 0; transition: opacity 150ms ease, color 150ms ease; }
.doc-head:hover .anchor, .anchor:focus-visible { opacity: 1; }
@media (hover: hover) { .anchor:hover { color: var(--ink); } }
@media (hover: none) { .anchor { opacity: 1; } }

/* docs (not the legal texts, which number their own sections): leading-zero section numbers in mono */
.prose-docs { counter-reset: sec; }
.prose-docs .doc-head { counter-increment: sec; }
.prose-docs .doc-head h2::before { content: counter(sec, decimal-leading-zero); content: counter(sec, decimal-leading-zero) / ""; display: inline-block; min-width: 2.4em; font: 400 12px/1 var(--font-mono); color: var(--faint); vertical-align: 0.2em; font-variant-numeric: tabular-nums; }
/* numbered steps as hairline's how-to list: the number in mono in its own column */
.prose-docs ol { list-style: none; padding-left: 0; counter-reset: step; }
.prose-docs ol > li { position: relative; padding-left: 30px; counter-increment: step; }
.prose-docs ol > li::before { content: counter(step, decimal-leading-zero); content: counter(step, decimal-leading-zero) / ""; position: absolute; left: 0; top: 0; font: 400 12px/1.65rem var(--font-mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.prose .doc-list { padding-left: 0; }

/* callouts: a stone panel (hairline's .detail-ask) */
.prose blockquote { padding: 14px 16px; border: 0; border-radius: 12px; background: var(--stone); font-size: 15px; color: var(--muted); }
.prose blockquote p { margin-top: 8px; }

/* tables: figures line up, the first column reads as the row's name */
.prose td { font-variant-numeric: tabular-nums; }
.prose td:first-child { font-weight: 500; }
.prose th { font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* docs index: tags and a quiet count over each title */
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px !important; }
.doc-count { margin-left: auto; font: 400 11.5px/1 var(--font-mono); color: var(--faint); }
.doc-list h2 a { text-decoration: none; }
.doc-list h2 a::after { content: "\2192"; display: inline-block; margin-left: 8px; color: var(--faint); transition: transform 160ms var(--ease-out); }
@media (hover: hover) { .doc-list li:hover h2 a::after { transform: translateX(3px); color: var(--ink); } }

/* footer: the name at the left, the links at the right, as hairline's footer */
.site-footer-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; }
.foot-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.site-footer nav { gap: 2px 18px; }
.foot-lic { flex-basis: 100%; }
@media (min-width: 900px) { .site-footer nav { margin-left: auto; } .foot-lic { flex-basis: auto; } }
.site-footer nav a, .foot-lic a { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 150ms ease; }
@media (hover: hover) { .site-footer nav a:hover, .foot-lic a:hover { text-decoration-color: currentColor; } }
/* pass 3: the company line carries the details art. 206 KSH requires, so it takes the full width */
.foot-name { flex-basis: 100%; align-items: flex-start; line-height: 1.6; }
.foot-name .seal { margin-top: 1px; }

/* ---------- pass 4: reading progress and hairline figures ---------- */
/* the page-level fill: one hairline under the top bar, across the whole story */
.page-progress { position: fixed; top: calc(var(--topbar) - 1px); left: 0; right: 0; z-index: 11; height: 1px; background: var(--ink); opacity: 0.55; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
@supports (animation-timeline: view()) {
  .ruler-fill { animation: ruler-fill linear both; animation-timeline: view(); animation-range: entry 15% cover 65%; }
  .page-progress { animation: page-fill linear both; animation-timeline: scroll(root); }
}
@keyframes ruler-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes page-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .ruler-fill, .page-progress { display: none; }
}

/* hairline figures, in the library's own palette slots, set to this page's greys */
:root { --hairline-plate: #ffffff; --hairline-hi: #1d1d1b; --hairline-edge: #9b9a95; --hairline-mid: #c2c1bb; --hairline-lo: #e2e0da; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hairline-plate: #13161c; --hairline-hi: #e6e6e3; --hairline-edge: #6a6d75; --hairline-mid: #444851; --hairline-lo: #2a2e36; }
}
:root[data-theme="dark"] { --hairline-plate: #13161c; --hairline-hi: #e6e6e3; --hairline-edge: #6a6d75; --hairline-mid: #444851; --hairline-lo: #2a2e36; }

/* the figure's tile; only shown once the script has run, so a page without JavaScript has no empty box */
.fig-wrap { display: none; }
.has-figs .fig-wrap { display: block; width: min(100%, 260px); margin-left: auto; margin-right: auto; padding: 6px; border-radius: 12px; background: var(--surface); box-shadow: var(--card); }
/* the box is reserved at 5:4 before the library draws into it: no layout shift */
/* (pass 4b) the figures leave wide margins inside their 400 x 320 drawing, so each one sits in a frame cut
   to the part it actually draws. The figure element itself keeps its full 5:4 box, only larger and shifted,
   so the library's pointer mapping (pointer position over the element, scaled to 400 x 320) stays exact. */
.fig-frame { position: relative; overflow: hidden; border-radius: 8px; }
.fig-frame:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.fig { display: block; position: absolute; aspect-ratio: auto; }
.fig:focus-visible { outline: none; }
.fig-frame[data-frame="riffle"] { aspect-ratio: 262 / 231; }
.fig-frame[data-frame="riffle"] > .fig { width: 152.672%; height: 138.528%; left: -28.626%; top: -25.974%; }
.fig-frame[data-frame="exploded"] { aspect-ratio: 244 / 170; }
.fig-frame[data-frame="exploded"] > .fig { width: 163.934%; height: 188.235%; left: -23.770%; top: -74.706%; }
.fig-frame[data-frame="plot"] { aspect-ratio: 238 / 232; }
.fig-frame[data-frame="plot"] > .fig { width: 168.067%; height: 137.931%; left: -34.034%; top: -21.983%; }
@media (min-width: 760px) {
  .has-figs .scene-card.has-fig { display: grid; grid-template-columns: minmax(0, 1fr) 264px; column-gap: 28px; align-content: start; }
  .has-figs .scene-card.has-fig > * { grid-column: 1; }
  .has-figs .scene-card.has-fig > .fig-wrap { grid-column: 2; grid-row: 1 / span 5; align-self: center; width: 100%; margin-top: 0; }
  .has-figs .scene-card.has-fig > .apps { grid-column: 1 / -1; }
  .has-figs .scene:not(.scene-apps) .scene-card.has-fig { max-width: 50rem; }
}