/* The video skill, in one minute: the one design system every scene uses. 1080x1350 (4:5). */

@font-face { font-family: "Geist"; src: url("/_skill/assets/fonts/geist-wght-normal.woff2") format("woff2"); font-weight: 100 900; }
@font-face { font-family: "Geist Mono"; src: url("/_skill/assets/fonts/geist-mono-wght-normal.woff2") format("woff2"); font-weight: 100 900; }
/* Geist has no Greek: ζ comes from Inter, matched by unicode-range under the same names. */
@font-face { font-family: "Geist"; src: url("/_skill/assets/fonts/inter-greek-wght-normal.woff2") format("woff2"); font-weight: 100 900; unicode-range: U+0370-03FF; }
@font-face { font-family: "Geist Mono"; src: url("/_skill/assets/fonts/inter-greek-wght-normal.woff2") format("woff2"); font-weight: 100 900; unicode-range: U+0370-03FF; }

:root {
  --canvas: #ecebe7; --paper: #ffffff; --ink: #161513; --sand: #e6ddcc; --pine: #265746;
  --muted: #5c5953; --muted-dark: #c9c4ba; --saffron: #e8a33d; --clay: #9e3d27;
  --green: #1a6b45; --mint: #7fd1a8; --red: #c63b2f; --line: #d6d2ca;

  /* Type scale at 1080 px wide. Nothing under 28 px. */
  --t-hero: 168px;   /* one word or two, set huge */
  --t-display: 120px;
  --t-h1: 84px;
  --t-h2: 56px;
  --t-body: 36px;
  --t-small: 30px;
  --t-label: 28px;

  --r-card: 28px;
  --shadow: 0 22px 60px rgba(22, 21, 19, 0.14), 0 2px 6px rgba(22, 21, 19, 0.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1080px; height: 1350px; overflow: hidden; background: var(--ink); }
body {
  font-family: "Geist", system-ui, sans-serif; color: var(--ink); font-size: var(--t-body);
  font-feature-settings: "tnum" 1, "ss01" 1; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}

/* Frame zones: chrome (y 68-110), stage (y 140-1100), caption band (y 1110-1255). */
#scenes { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
/* transitions.js owns each root's opacity, transform, filter, clip-path, z-index and visibility.
   A scene sets only its own background and its content. */
.scene { position: absolute; inset: 0; overflow: hidden; background: var(--canvas); color: var(--ink); }
.scene.dark { color: var(--canvas); }
#cap { position: absolute; left: 0; top: 1110px; width: 1080px; height: 145px; z-index: 60;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 64px;
  --caption-size: 40px; --caption-color: #ffffff; --caption-accent: #f2c47a; --caption-bg: rgba(22, 21, 19, 0.88); }
#cap .caption-line { padding: 14px 32px 18px; border-radius: 24px; line-height: 1.22; }
#finish { z-index: 1000; }

/* ---- building blocks ---- */
.chrome { position: absolute; left: 54px; right: 54px; top: 68px; height: 42px; display: flex; justify-content: space-between;
  align-items: center; font: 500 var(--t-label)/1 "Geist Mono", monospace; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.chrome.dark { color: var(--muted-dark); }
.hero-word { font-size: var(--t-hero); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; white-space: nowrap; }
.display { font-size: var(--t-display); font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; }
.h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; }
.h2 { font-size: var(--t-h2); font-weight: 650; letter-spacing: -0.025em; line-height: 1.08; }
.body { font-size: var(--t-body); font-weight: 450; line-height: 1.3; }
.small { font-size: var(--t-small); font-weight: 500; line-height: 1.3; color: var(--muted); }
.dark .small { color: var(--muted-dark); }
.label { font: 500 var(--t-label)/1.1 "Geist Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dark .label { color: var(--muted-dark); }
.mono { font-family: "Geist Mono", ui-monospace, monospace; font-feature-settings: "zero" 1; }
.abs { position: absolute; }
.card { position: absolute; background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow); color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px; white-space: nowrap;
  font: 600 var(--t-small)/1 "Geist", sans-serif; background: var(--paper); color: var(--ink); }
.chip.green { background: #dcefe4; color: var(--green); }
.chip.dim { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
.dark .chip.dim { color: var(--muted-dark); box-shadow: inset 0 0 0 2px rgba(236, 235, 231, 0.22); }
.clipwin { position: absolute; overflow: hidden; border-radius: var(--r-card); background: #000; box-shadow: var(--shadow); }
.clipwin.dark { box-shadow: none; }
/* The hairline sits above the picture: an inset shadow on the window itself is covered by its <img>. */
.clipwin::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1.5px rgba(22, 21, 19, 0.12); }
.clipwin.dark::after { box-shadow: inset 0 0 0 1.5px rgba(236, 235, 231, 0.14); }
.clipwin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
svg.plot { position: absolute; overflow: visible; }
svg.plot .axis { stroke: currentColor; stroke-opacity: 0.25; stroke-width: 2; fill: none; }
svg.plot .curve { stroke: var(--saffron); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
svg.plot .ghost { stroke: currentColor; stroke-opacity: 0.35; stroke-width: 3; fill: none; stroke-dasharray: 2 10; stroke-linecap: round; }
svg.plot text { font-family: "Geist Mono", monospace; font-size: 28px; fill: currentColor; }
.placeholder { position: absolute; left: 54px; right: 54px; top: 300px; }