:root {
  color-scheme: light;
  --bg:#f5f7fb; --surface:#fff; --text:#172033; --muted:#536079;
  --line:#d7deeb; --accent:#334bcc; --soft:#e9edff; --danger:#a52838;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#10141e; --surface:#191f2d; --text:#edf1fa; --muted:#b0bdd2;
    --line:#344057; --accent:#a5b4ff; --soft:#252f51; --danger:#ffadb5;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#10141e; --surface:#191f2d; --text:#edf1fa; --muted:#b0bdd2;
  --line:#344057; --accent:#a5b4ff; --soft:#252f51; --danger:#ffadb5;
}
* { box-sizing:border-box }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
a { color:var(--accent); text-underline-offset:4px }
button,input,select,textarea { font:inherit }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px }
.shell { width:min(1180px,calc(100% - 40px)); margin-inline:auto }
.main { flex:1; padding-block:40px 64px }
.site-header { background:var(--surface); border-bottom:1px solid var(--line) }
.navigation,.nav-links,.footer-content,.toolbar,.pagination,.section-heading {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.navigation { justify-content:space-between; padding-block:18px }
.brand { color:var(--text); font-size:24px; font-weight:800; text-decoration:none; letter-spacing:-1px }
.brand span { font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0 }
.nav-links a { text-decoration:none }
.nav-links form { margin:0 }
.button,button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 18px; border:1px solid var(--accent);
  border-radius:10px; background:var(--accent); color:var(--bg);
  text-decoration:none; font-weight:650; cursor:pointer;
}
.button.small { padding:6px 14px }
button.quiet,.button.secondary {
  color:var(--text); border-color:var(--line); background:var(--surface);
}
button.danger { color:var(--danger); background:transparent; border-color:var(--danger) }
.hero {
  padding:clamp(24px,5vw,60px); margin-bottom:32px; border-radius:24px;
  border:1px solid var(--line); background:linear-gradient(125deg,var(--soft),var(--surface));
}
.eyebrow { color:var(--accent); font-size:13px; text-transform:uppercase; font-weight:750; letter-spacing:2px }
h1 { font-size:clamp(30px,5vw,54px); line-height:1.12; letter-spacing:-1.5px; margin:14px 0 }
h2 { line-height:1.25; letter-spacing:-.5px }
h3 { margin:0 0 10px; line-height:1.4 }
.hero p { max-width:650px; color:var(--muted); font-size:18px }
.muted,.meta { color:var(--muted) }
.meta { font-size:14px }
.toolbar { margin-block:22px }
.toolbar input { flex:1; min-width:180px }
input:not([type="checkbox"]),select,textarea {
  width:100%; padding:12px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--text);
}
.toolbar select { width:auto }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px }
.card,.panel {
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; min-width:0;
}
.card-body,.panel { padding:24px }
.player { aspect-ratio:16/9; background:#000; width:100% }
.player iframe { display:block; width:100%; height:100%; border:0 }
.card h3 a { color:var(--text); text-decoration:none }
.badge { display:inline-block; background:var(--soft); color:var(--accent); border-radius:6px; padding:3px 8px; font-size:12px }
.section-heading { justify-content:space-between; margin-block:26px }
.narrow { max-width:560px; margin:20px auto }
.panel h1 { font-size:32px }
.helptext { display:block; font-size:13px; color:var(--muted) }
.errorlist { color:var(--danger) }
.notice { background:var(--soft); padding:14px 18px; border-radius:10px; margin-bottom:20px }
.empty { padding:40px; border:1px dashed var(--line); border-radius:18px; text-align:center }
.pagination { justify-content:center; margin-top:32px }
.pagination a { padding:8px 14px; border:1px solid var(--line); border-radius:8px }
.site-footer { border-top:1px solid var(--line); color:var(--muted); padding-block:26px }
.footer-content { justify-content:space-between }
.footer-content nav { display:flex; gap:22px }
.check { display:flex; gap:10px; align-items:center; cursor:pointer }
input[type="checkbox"] { width:20px; height:20px; accent-color:var(--accent) }
.description { white-space:pre-wrap; overflow-wrap:anywhere }
.skip { position:absolute; left:12px; top:-100px; z-index:10; background:var(--surface); padding:12px }
.skip:focus { top:12px }
@media(max-width:700px) {
  .shell { width:calc(100% - 28px) }
  .main { padding-top:24px }
  .navigation { align-items:flex-start }
  .nav-links { gap:10px; width:100% }
  .nav-links>a { padding-block:8px }
  .grid { grid-template-columns:1fr }
  .toolbar { align-items:stretch }
  .toolbar input,.toolbar select,.toolbar button { width:100%; flex-basis:100% }
  .card-body,.panel { padding:18px }
  .footer-content { align-items:flex-start; flex-direction:column }
}