:root {
  --bg: #fbfaf7; --ink: #1c1b19; --muted: #6b675f; --line: #dedad0; --card: #fff; --accent: #1d4f91;
  --warn-bg: #fdf3e1; --warn: #8a5a00;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #161513; --ink: #ece9e2; --muted: #a39e94; --line: #34312c; --card: #1f1d1a; --accent: #8fb8f2;
  --warn-bg: #2e2617; --warn: #f0c36a; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #161513; --ink: #ece9e2; --muted: #a39e94; --line: #34312c; --card: #1f1d1a; --accent: #8fb8f2;
  --warn-bg: #2e2617; --warn: #f0c36a; color-scheme: dark }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans) }
.wrap { max-width: 920px; margin: 0 auto; padding: 40px 16px 64px }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; text-wrap: balance }
h1 { font-size: 2.1rem } h2 { font-size: 1.35rem }
p { margin: 0 0 1em } a { color: var(--accent) }
.lede { color: var(--muted); font-size: 1.08rem; max-width: 64ch }
.kicker { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 28px 0 }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column }
.card p { color: var(--muted); font-size: .95rem; flex: 1 }
.btn { display: inline-block; background: var(--accent); color: var(--bg); text-decoration: none; border: 0; border-radius: 6px;
  padding: 9px 16px; font: 500 15px var(--sans); cursor: pointer; align-self: flex-start }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line) }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.notice { background: var(--warn-bg); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 8px; padding: 14px 18px; margin: 20px 0 }
.notice b { color: var(--warn) }
.muted { color: var(--muted) } .small { font-size: .88rem }
code { font: .9em var(--mono) }
footer { margin-top: 40px; color: var(--muted); font-size: .85rem }
select { font: 15px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; max-width: 100% }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted) }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end }
video { width: 100%; background: #000; border-radius: 8px; display: block }
.player { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 20px 0 }
.speeds button { font: 500 14px var(--sans); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; cursor: pointer }
.speeds button[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent) }