/* Canvas-story look: scenes, panels, words, pele theme, phone stack, full-screen stage.
   Part of THE engine (canvas-kit/starter). Used by index.html (the player) and by any page
   that embeds scenes with embed.js (a sessions post). Do not edit it inside a story. */
/* Colours: one token per colour, light and dark. Drawings follow the system setting.
   ?theme=light or ?theme=dark (or <html data-cs-theme="…">) forces one, e.g. for recording. */
:root {
  --cs-paper: light-dark(#ffffff, #1f1f22);
  --cs-black: light-dark(#1d1d1d, #ebebe8); --cs-black-fill: light-dark(#f1f3f5, #2c2d31);
  --cs-grey: light-dark(#8f98a3, #9aa2ad);   --cs-grey-fill: light-dark(#f1f3f5, #2c2d31);
  --cs-blue: light-dark(#4465e9, #8aa0ff);   --cs-blue-fill: light-dark(#e7edff, #262d4a);
  --cs-green: light-dark(#099268, #4cc79a);  --cs-green-fill: light-dark(#e3f7e8, #1d382c);
  --cs-red: light-dark(#e03131, #ff7a7a);    --cs-red-fill: light-dark(#ffe8e8, #442628);
  --cs-violet: light-dark(#ae3ec9, #d98cf0); --cs-violet-fill: light-dark(#f6e5fb, #3a2643);
  --cs-orange: light-dark(#e16919, #f5945a); --cs-orange-fill: light-dark(#fff0e0, #40301f);
  --cs-yellow: light-dark(#e8a33d, #f0b45a); --cs-yellow-fill: light-dark(#fff4cc, #423620);
  --cs-muted: light-dark(#6b6b6b, #a3a3a0);
  --cs-edge: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
}
.scene, .pele-wrap, .cs-stage, .cs-full { color-scheme: light dark; }
[data-cs-theme="light"] :is(.scene, .pele-wrap, .cs-stage, .cs-full) { color-scheme: light; }
[data-cs-theme="dark"] :is(.scene, .pele-wrap, .cs-stage, .cs-full) { color-scheme: dark; }

@font-face { font-family: 'Shantell Sans'; src: url(vendor/shantell-latin.woff2) format('woff2'); font-weight: 300 800; font-display: block; }

.scene { position: relative; aspect-ratio: 1600 / var(--fh, 900); background: var(--cs-paper); color: var(--cs-black); border-radius: 12px; box-shadow: 0 0 0 0.5px var(--cs-edge), 0 1px 3px rgb(0 0 0 / 0.04); }
/* --fy / --fh: embed.js crops a scene in a post to its drawing; the frame is 1600 x 900 otherwise */
.panel { position: absolute; left: calc(var(--x) / 1600 * 100%); top: calc((var(--y) - var(--fy, 0)) / var(--fh, 900) * 100%); width: calc(var(--w) / 1600 * 100%); }
.panel svg { display: block; width: 100%; height: auto; overflow: visible; margin: 0 auto; }
.only-narrow { display: none; }
.tx { white-space: pre-line; text-wrap: pretty; }
.pele-wrap { --pele-bg: var(--cs-paper); --pele-fg: var(--cs-black); --pele-muted: var(--cs-muted); --pele-line: var(--cs-black); --pele-surface: var(--cs-yellow-fill); --pele-surface-alt: var(--cs-blue-fill); --pele-border: var(--cs-black); --pele-accent: var(--cs-blue); --pele-critical: var(--cs-red); --pele-radius: 10px; }
.code pre { margin: 0; padding: 14px 18px; font: 19px/1.45 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--cs-black); background: var(--cs-grey-fill); border: 1.5px solid var(--cs-edge); border-radius: 10px; white-space: pre-wrap; }

/* phone, scrolling: panels stack so words stay readable */
@media (max-width: 760px) {
  body:not(.present) .scene { aspect-ratio: auto; display: flex; flex-direction: column; gap: 4px; padding: 8px 0; overflow: hidden; }
  body:not(.present) .panel { position: static; width: auto; padding: 0 4px; }
  body:not(.present) .only-wide { display: none; }
  body:not(.present) .only-narrow { display: block; }
}

/* embed.js: one scene full screen, 16:9, for recording over a post */
.cs-stage { position: fixed; inset: 0; z-index: 1000; background: var(--cs-paper); }
.cs-stage .scene { --fy: 0 !important; --fh: 900 !important; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(100vw, calc(100dvh * 16 / 9)); margin: 0; border-radius: 0; box-shadow: none; }
.cs-stage .cs-n { position: absolute; right: 16px; bottom: 12px; font: 500 13px/1 Inter, ui-sans-serif, system-ui, sans-serif; color: var(--cs-grey); font-variant-numeric: tabular-nums; }
.cs-full { position: absolute; right: 8px; top: 8px; z-index: 2; appearance: none; border: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--cs-paper); box-shadow: 0 0 0 0.5px var(--cs-edge); color: var(--cs-black); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity 150ms ease-out, scale 150ms ease-out; }
.cs-full:active { scale: 0.94; }
.cs-full:focus-visible { opacity: 1; outline: 2px solid #2456f5; outline-offset: 2px; }
.cs-slot:hover .cs-full { opacity: 1; }
@media (hover: none) { .cs-full { display: none; } }
.cs-slot { position: relative; }