/* zekkū's site. One dark world like the app's Melee Menu palette, the name on
   its yellow tile, and one light band (privacy) for rhythm.
   Layout: big centered-left type, a full-bleed hero canvas, a two-column
   sticky tour that becomes one column on phones. */
:root {
  --ink: #08080b;        /* page */
  --ink-2: #0f0f14;      /* alternate sections */
  --panel: #16161d;      /* the app mocks */
  --panel-2: #1f1f29;
  --line: #2a2a38;
  --text: #f3f3f6;
  --muted: #9b9bb0;
  --gold: #f0b429;       /* the Melee Menu yellow, the app's accent */
  --gold-text: var(--gold); /* the yellow as words and lines on the page */
  --on-gold: #101014;
  --good: #6fdc8c;
  --bad: #ff7a7a;
  --paper: #eeeef2;      /* the light band */
  --paper-ink: #15151c;
  --paper-muted: #5c5c70;
  --g-inacc: #ff9f40; --g-blund: #ff6464; --g-brill: #3fd0c9; /* the app's verdict colors */

  --display: "Maven Pro", "Segoe UI", system-ui, sans-serif;
  --body: "Maven Pro", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-hero: clamp(44px, 7.4vw, 104px);
  --t-h2: clamp(32px, 4.6vw, 60px);
  --t-h3: clamp(22px, 2.2vw, 30px);
  --t-lede: clamp(17px, 1.5vw, 21px);
  --t-body: 17px;
  --t-small: 14px;
  --t-mono: 13px;

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1180px;
  --r: 14px;
  color-scheme: dark;
}
/* Light: the site follows the visitor's system, or the nav's toggle
   (site-theme.js, data-theme). A warm paper page, white panels, the same
   yellow tile with dark type on it, and a deeper gold wherever the yellow is
   words or a thin line; the privacy band turns dark for the same rhythm. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #f7f6f2; --ink-2: #efede6; --panel: #ffffff; --panel-2: #f2f0ea; --line: #dcd8cd;
    --text: #17171d; --muted: #5a5a69; --gold-text: #8a5c00; --good: #1d8445; --bad: #c2312f;
    --paper: #17171d; --paper-ink: #f3f3f6; --paper-muted: #a6a6b8;
    --g-inacc: #b05200; --g-blund: #c2312f; --g-brill: #0b8580;
    --tier-common: #5f6675; --tier-uncommon: #1d8a4f; --tier-rare: #1f66c9;
    --tier-epic: #7442cc; --tier-legendary: #a86a00; --tier-ultra: #c0246a;
    --tip-bg: #ffffff; --shadow: rgba(30, 28, 20, .18);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ink: #f7f6f2; --ink-2: #efede6; --panel: #ffffff; --panel-2: #f2f0ea; --line: #dcd8cd;
  --text: #17171d; --muted: #5a5a69; --gold-text: #8a5c00; --good: #1d8445; --bad: #c2312f;
  --paper: #17171d; --paper-ink: #f3f3f6; --paper-muted: #a6a6b8;
  --g-inacc: #b05200; --g-blund: #c2312f; --g-brill: #0b8580;
  --tier-common: #5f6675; --tier-uncommon: #1d8a4f; --tier-rare: #1f66c9;
  --tier-epic: #7442cc; --tier-legendary: #a86a00; --tier-ultra: #c0246a;
  --tip-bg: #ffffff; --shadow: rgba(30, 28, 20, .18);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--text);
  font: 400 var(--t-body)/1.55 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, canvas, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.lede { font-size: var(--t-lede); color: var(--muted); max-width: 40ch; }
.good { color: var(--good); }
.bad { color: var(--bad); }

/* the name, on the Melee Menu yellow */
.wordmark {
  display: inline-block; font: 800 21px/30px var(--display); letter-spacing: .01em;
  padding: 0 10px; border-radius: 8px; background: var(--gold); color: var(--on-gold); text-decoration: none;
}
.wm-sm { font-size: 15px; line-height: 22px; padding: 0 7px; border-radius: 6px; }

/* buttons */
.btn {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font: 700 16px/1.15 var(--body); text-decoration: none; color: var(--text); background: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: color-mix(in srgb, var(--gold) 88%, #fff); }
.btn-ghost { border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-sub { font: 500 12px/1 var(--body); opacity: .72; }

/* nav */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--muted); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--text); }

/* hero */
.hero { position: relative; padding-block: clamp(56px, 9vw, 120px) 0; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 22px; }
.hero h1 { font-size: var(--t-hero); font-weight: 800; line-height: .98; letter-spacing: -.035em; max-width: 13ch; will-change: transform; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-figure { position: relative; margin: clamp(-40px, -3vw, -12px) 0 0; height: clamp(300px, 42vw, 520px); }
.hero-figure canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-readout {
  position: absolute; right: var(--gutter); bottom: 28px; display: flex; flex-wrap: wrap; gap: 6px 18px;
  color: var(--muted); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 80%, transparent); backdrop-filter: blur(8px);
}
.hero-readout b { color: var(--text); font-weight: 500; }
.hero-readout .good b { color: var(--good); }
/* wide screens: the fan runs beside the headline, behind nothing */
@media (min-width: 1000px) {
  .hero { padding-block: clamp(72px, 8vw, 120px) clamp(24px, 3vw, 48px); }
  .hero-figure { position: absolute; inset: 0; margin: 0; height: auto; z-index: 0; }
  .hero-readout { bottom: 32px; }
}

/* the nav's light/dark toggle (site-theme.js): the sun in dark, the moon in light */
.theme-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s; }
.theme-btn:hover { color: var(--text); border-color: var(--muted); }
.theme-btn .i-moon, .theme-btn[data-mode="light"] .i-sun { display: none; }
.theme-btn[data-mode="light"] .i-moon { display: block; }
@media (max-width: 860px) { .theme-btn { margin-left: auto; } .nav-in { gap: 12px; } }

/* the hero: the pitch over a moment, analyzed (one of the demo's moments as
   the app shows it: the panel is written by the app repo's demo export) */
.hero { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 96px); }
.hero-grid { position: relative; z-index: 2; }
@media (min-width: 1000px) {
  .hero-copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; row-gap: 16px; align-items: start;
    grid-template-areas: "eye eye" "h1 lede" "h1 cta" "h1 hint"; grid-template-rows: auto auto auto 1fr; }
  .hero-copy .lede { font-size: 18px; }
  .hero-copy .cta-row { margin-top: 0; }
  .hero-copy .eyebrow { grid-area: eye; }
  .hero-copy h1 { grid-area: h1; font-size: clamp(40px, 3.7vw, 54px); max-width: 15ch; }
  .hero-copy .lede { grid-area: lede; }
  .hero-copy .cta-row { grid-area: cta; }
  .hero-copy .hero-hint { grid-area: hint; }
}
@media (max-width: 560px) {
  .hero-copy { gap: 16px; }
  .hero-copy h1 { font-size: 36px; }
  .hero-copy .lede { font-size: 16px; }
  /* (no dropping files on a phone) */
  .hero-copy .hero-hint { display: none; }
}
.hero-panel { position: relative; z-index: 2; margin-top: clamp(32px, 4vw, 48px); }
.hero-panel:empty { display: none; }

.hp { border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); background: var(--panel);
  padding: clamp(18px, 2.4vw, 28px); display: grid; gap: clamp(16px, 2vw, 22px);
  box-shadow: 0 24px 60px -30px var(--shadow, rgba(0, 0, 0, .55)); }
.hp-head { display: grid; gap: 8px; }
.hp-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: var(--t-small); }
.hp-sep { opacity: .6; }
.hp-who { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 700;
  padding: 1px 10px 1px 4px; border-radius: 999px; border: 1.5px solid var(--pc, var(--line));
  background: color-mix(in srgb, var(--pc, transparent) 14%, transparent); }
.hp-who img { width: 20px; height: 20px; image-rendering: pixelated; }
.hp-title { font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; max-width: 46ch; }
.hp-body { display: grid; gap: clamp(18px, 2.4vw, 28px); }
@media (min-width: 900px) {
  .hp-body { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
}
.hp-left, .hp-right { display: grid; gap: 18px; min-width: 0; align-content: start; }
.hp-screen { position: relative; aspect-ratio: 73 / 60; border-radius: var(--r); overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line); }
.hp-screen picture, .hp-screen img, .hp-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hp-screen img { object-fit: cover; }
.hp-screen iframe { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.hp-screen iframe.on { opacity: 1; }
.hp-k { font: 700 12px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* the verdict, as the card says it */
.hp-verdict { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hp-v1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hp-chip { font: 700 13px/1 var(--body); padding: 5px 11px; border-radius: 999px; border: 1.5px solid currentColor; }
.hp-num { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.hp-kind { font-size: 13px; color: var(--muted); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.hp-ahead { font-size: 19px; font-weight: 700; color: var(--text); }
.hp-detail { color: var(--muted); font-size: var(--t-small); }
/* a punish's two readings: the attacker's, then the defender's */
.hp-reads { display: grid; gap: 8px; margin-top: 4px; }
.hp-read { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 2px 10px; font-size: var(--t-small); }
.hp-role { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.hp-read .hp-who { padding: 0 8px; font-size: 13px; }
.hp-read b { font-size: 16px; color: var(--text); }
.hp-line { grid-column: 1 / -1; color: var(--muted); }
.hp-inaccuracy { color: var(--g-inacc); }
.hp-blunder { color: var(--g-blund); }
.hp-brilliant { color: var(--g-brill); }
.hp-unlabelled { color: var(--muted); }

/* the two charts: the app's drawings, colored here */
.hp svg { display: block; width: 100%; height: auto; overflow: visible; }
.hp svg text { fill: var(--muted); font: 500 11px var(--body); }
.hp-did svg { max-width: 420px; }
.hp-did svg text { font-size: 10px; }
.hp .rszero { stroke: var(--line); stroke-dasharray: 3 3; }
.hp .rsw { stroke: var(--muted); stroke-width: 1.5; }
.hp .rsb { fill: color-mix(in srgb, var(--gold) 35%, transparent); stroke: var(--gold); }
.hp .rsm { stroke: var(--gold); stroke-width: 2; }
.hp .rsy { fill: var(--text); stroke: var(--ink); }
.hp .band { fill: var(--gold); opacity: .05; }
.hp .axis { stroke: var(--line); }
.hp .even { stroke: var(--muted); opacity: .8; stroke-dasharray: 4 6; }
.hp .grid { stroke: var(--line); opacity: .6; }
.hp .fanruns path { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linejoin: round; }
.hp .fanruns.better path { stroke: var(--gold-text); }
.hp .fanyou { fill: none; stroke: var(--bad) !important; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.hp .fanglow { fill: var(--gold); opacity: .14; }
.hp .fandot { fill: var(--gold); }
.hp-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-small); }
.hp-legend li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.hp-legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--muted); }
.hp-legend b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-legend li.you span { color: var(--text); }
.hp-did .hp-legend li.you i { background: var(--text) !important; }
.hp-fanlegend li.you i { background: var(--bad); }
.hp-fanlegend li.fanbetter i { background: var(--gold); }
.hp-fanlegend li.fanrest i { background: var(--muted); opacity: .6; }
.hp-ksub { margin-left: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; }
.hp-olist li.hp-ohead { padding-block: 0 2px; background: none; border: 0; font-size: 12px; color: var(--muted); }
.hp-olist li.hp-ohead span:nth-child(n+3) { justify-self: end; white-space: nowrap; }
.hp-did, .hp-fan { min-width: 0; }

/* Compare options: its first lines */
.hp-olist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hp-olist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 7.2em 6.2em; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); font-size: 15px; }
.hp-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.hp-oname { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.hp-olist b { color: var(--gold-text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hp-on { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.hp-go { display: flex; justify-content: flex-start; }
/* one column: the replay, the verdict, Compare options, then the charts */
@media (max-width: 899px) {
  .hp-left, .hp-right { display: contents; }
  .hp-screen { order: 1; }
  .hp-verdict { order: 2; }
  .hp-opts { order: 3; }
  .hp-did { order: 4; }
  .hp-fan { order: 5; }
  .hp-go { order: 6; }
}
@media (max-width: 560px) {
  .hp-olist li.hp-ohead span:nth-child(3) { visibility: hidden; }
  .hp-olist li { grid-template-columns: 16px minmax(0, 1fr) auto 4.4em; gap: 8px; padding: 9px 10px; font-size: 14px; }
  .hp { margin-inline: calc(var(--gutter) * -1 + 4px); padding: 16px; }
  .hp-num { font-size: 22px; }
  .hp-ahead { font-size: 17px; }
}

/* the demo in the page: the app's own pages, with no top bar (?embed=1) */
.demo { padding-block: clamp(72px, 10vw, 140px); border-top: 1px solid var(--line); }
.hero + .trailer[hidden] + .demo, .hero + .demo { padding-top: clamp(24px, 3vw, 40px); border-top: 0; }
.demo-frame { position: relative; height: min(860px, calc(100svh - 120px)); min-height: 560px;
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* wide screens: wider than the text, so the app has its two columns (its
   player beside the moments) */
@media (min-width: 1200px) {
  .demo-frame { --fw: min(1360px, calc(100vw - 2 * var(--gutter))); width: var(--fw); margin-left: calc((100% - var(--fw)) / 2); }
}
.demo-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.demo-tabs { margin-bottom: 14px; }
.demo-head { margin-bottom: 14px; }
.demo-head h2.eyebrow { margin: 0; }
/* phones: the whole width, as the app is on a phone */
@media (max-width: 560px) {
  .demo-frame { margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-inline: 0; min-height: 520px; }
  .demo-foot { justify-content: flex-start; }
}

/* sections */
.quick, .tour, .get, .faq { padding-block: clamp(52px, 6.5vw, 96px); }
.quick { background: var(--ink-2); border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head h2, .get h2, .faq h2, .privacy h2 { font-size: var(--t-h2); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; max-width: 18ch; }

/* segmented choices (the demo's tabs) */
.segs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.seg { font: 600 13px/1 var(--body); padding: 8px 12px; border-radius: 999px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.seg:hover { color: var(--text); }
.seg.on { background: var(--gold); color: var(--on-gold); }

/* the tour: each step its words, and beside them (under them on a phone)
   the app's own picture of it. Each picture is taken cropped to its subject
   at about the width it is shown at here, so the app's words read at their
   own size: never drawn larger than taken, smaller only where the column is
   narrower. The list runs past the text column on the right on wide
   screens, to give the pictures the room. */
.tour-list { --tcol: clamp(220px, 20vw, 280px); display: grid; gap: clamp(40px, 5vw, 64px);
  margin-right: calc(-1 * clamp(0px, (100vw - var(--maxw)) / 2 - 8px, 160px)); }
.step { display: grid; grid-template-columns: var(--tcol) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.step-text { display: grid; gap: 10px; padding-top: 6px; }
.step-k { font: 500 13px/1 var(--mono); color: var(--gold-text); }
.step h3 { font-size: var(--t-h3); font-weight: 800; letter-spacing: -.015em; line-height: 1.12; }
.step p:not(.step-k) { color: var(--muted); max-width: 38ch; }
.step-shot { min-width: 0; }

/* privacy: the light band */
.privacy { background: var(--paper); color: var(--paper-ink); padding-block: clamp(52px, 6.5vw, 96px); }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.privacy-points { display: grid; gap: 20px; font-size: var(--t-lede); color: var(--paper-muted); }
.privacy-points b { color: var(--paper-ink); }
.privacy :focus-visible { outline-color: var(--paper-ink); }

/* get */
.get { border-bottom: 1px solid var(--line); }
.get-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.get-grid > div { display: grid; gap: 16px; }
.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.needs li { background: var(--ink); padding: 18px 22px; display: grid; gap: 4px; }
.needs span { color: var(--muted); font-size: 15px; }

/* faq */
.faq .wrap { display: grid; gap: 32px; }
.faq-list { display: grid; border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font: 700 19px/1.3 var(--body); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-text); font-weight: 500; font-size: 24px; line-height: 1; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 22px; max-width: 62ch; }

/* footer */
.foot { padding-block: 40px 56px; }
.foot-grid { display: grid; gap: 14px; color: var(--muted); font-size: 13px; max-width: var(--maxw); }
.foot-grid p { max-width: 90ch; }
.foot-grid .wordmark { justify-self: start; }
.credits h3 { margin: 6px 0 4px; font-size: 14px; color: var(--text); letter-spacing: .02em; }
.credits p { margin: 0 0 8px; }
.credits-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; max-width: 90ch; }
.credits-list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credits-list a:hover { color: var(--text); }

/* reveal: everything is readable at rest; JS only adds a soft lift on the way in */
.rise { transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .9s ease; }
.rise.below { transform: translateY(28px); opacity: .45; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-in { justify-content: space-between; }
  .tour-list { margin-right: 0; gap: 40px; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .step-text { padding-top: 0; }
  .privacy-grid, .get-grid { grid-template-columns: 1fr; }
  .hero-readout { position: relative; right: auto; bottom: auto; margin: 0 var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .btn { transition: none; }
  .rise.below { transform: none; opacity: 1; }
}

/* where a real capture from the app goes */
.shot-slot { min-height: 220px; display: grid; place-content: center; gap: 6px; text-align: center; padding: 24px;
  border: 1.5px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 14px; }
.shot-slot b { color: var(--text); }
/* a capture in the slot's place: drawn at the size it was taken (--w, its
   CSS width; --wp for the phone's picture), or the column's width where that
   is narrower, in a dark frame like the app's window (the captures are of
   the dark app, in both of the site's themes). A fixture capture says so
   under it. Where the picture is shown smaller than taken, or a phone shows
   the phone's crop, it opens larger (.can-zoom, shots.js). */
.shot { margin: 0; display: grid; gap: 10px; justify-items: start; }
.shot-frame { display: block; width: fit-content; max-width: 100%; padding: 8px; border-radius: 14px;
  border: 1px solid var(--line); background: #0d0d12; box-shadow: 0 30px 60px -34px var(--shadow, #000); }
.shot-frame.can-zoom { cursor: zoom-in; }
.shot-box { display: block; }
.shot-box img, .shot-box video { display: block; width: var(--w, 100%); max-width: 100%; height: auto; border-radius: 8px; }
.shot-box video { background: #0d0d12; }
.shot-tag { padding: 6px 10px; border-radius: 6px; background: var(--gold); color: var(--on-gold);
  font-weight: 500; line-height: 1; }
@media (max-width: 640px) {
  .shot-frame { padding: 6px; border-radius: 12px; }
  .shot-box img, .shot-box video { width: var(--wp, var(--w, 100%)); border-radius: 7px; }
}
/* the larger picture: the site's own overlay, the picture at the size it
   was taken, scrolled when it is wider or taller than the window */
.shot-zoom { position: fixed; inset: 0; z-index: 70; display: flex; overflow: auto; overscroll-behavior: contain;
  padding: 64px 16px 24px; background: color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.shot-zoom-pic { margin: auto; flex: none; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: #0d0d12; }
.shot-zoom-pic img { display: block; height: auto; border-radius: 8px; }
.shot-zoom-x { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 71;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 700 14px/1 var(--body); cursor: pointer; }
.shot-zoom-x:hover { border-color: var(--muted); }
.shot-zoom-x svg { width: 16px; height: 16px; }

/* using your own replays: the page-wide drop, the hero's hint, the example's banner */
.drop-all { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(6px);
  outline: 3px dashed var(--gold); outline-offset: -18px; pointer-events: none; }
.drop-all p { display: grid; gap: 8px; text-align: center; font: 800 clamp(28px, 4vw, 48px)/1.1 var(--display); color: var(--text); }
.drop-all span { font: 400 var(--t-lede)/1.4 var(--body); color: var(--muted); }
.hero-hint { color: var(--muted); font-size: var(--t-small); }

/* the download and the community links (config.json, site-config.js); an
   empty download is Coming Soon: shown, not a link */
.get-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn.is-soon { cursor: default; opacity: .75; }
.btn.is-soon:hover { transform: none; }
/* the trailer: YouTube's no-cookie player, 16:9 */
.trailer { padding-block: clamp(32px, 5vw, 64px); }
.trailer-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.trailer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }