:root {
  color-scheme: dark;
  --night: #101015;
  --panel: #1b1720;
  --cream: #f5eee9;
  --muted: #b8adbe;
  --line: #594a5b;
  --orange: #ff9b57;
  --gold: #ffe493;
  --mint: #b8edc0;
  --lilac: #cba6e7;
  --coral: #ff7773;
  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--night); color: var(--cream); }
.vignette {
  min-height: 100vh;
  padding: clamp(16px, 2.5vw, 30px);
  background:
    linear-gradient(90deg, #c6a5b012 1px, transparent 1px),
    linear-gradient(#c6a5b012 1px, transparent 1px),
    radial-gradient(circle at 94% 35%, #a86948 0, #61404a 20%, transparent 47%),
    linear-gradient(110deg, #17121d 22%, #372430 100%);
  background-size: 42px 42px, 42px 42px, auto, auto;
  border-left: 9px solid var(--orange);
}
.vignette header { margin-bottom: 16px; }
.kicker, .eyebrow, .note, .small-label {
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.kicker { color: var(--orange); }
h1 {
  margin: 2px 0 1px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(32px, 4.25vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .015em;
}
.deck { margin: 0; color: var(--cream); font-size: clamp(16px, 1.7vw, 22px); }
.panel {
  min-width: 0;
  padding: clamp(15px, 1.8vw, 22px);
  border: 2px solid var(--line);
  border-radius: 12px;
  background: rgba(20, 17, 25, .94);
}
.panel h2 {
  margin: 0;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.1;
}
.subtle { color: var(--muted); }
.pause-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pause-toggle:checked ~ .vignette .motion { animation-play-state: paused; }
.control {
  display: inline-block;
  flex: none;
  min-width: 104px;
  padding: 6px 10px;
  border: 1px solid var(--orange);
  border-radius: 5px;
  background: #33232a;
  color: var(--cream);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.control:hover, .pause-toggle:focus-visible ~ .vignette .control {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.control .play-label { display: none; }
.pause-toggle:checked ~ .vignette .control .play-label { display: inline; }
.pause-toggle:checked ~ .vignette .control .pause-label { display: none; }
.vignette footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.note {
  max-width: 78ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.35;
}
@media (max-width: 700px) {
  .vignette { min-height: 100vh; padding: 16px; border-left-width: 6px; }
  .panel { padding: 13px; }
  .vignette footer { align-items: center; }
  .control { min-width: 82px; }
}

html.is-embedded .vignette { min-height: 0; }