:root { color-scheme: light dark; --bg:#fff; --fg:#14181f; --muted:#4b5563; --line:#c7ccd4; --accent:#0a4fb3; --accent-fg:#fff; --ok:#0b6b2e; --err:#a11212; --panel:#f3f6fb; }
@media (prefers-color-scheme: dark) { :root { --bg:#10141b; --fg:#eef1f6; --muted:#b6bfcc; --line:#3a4453; --accent:#7db1ff; --accent-fg:#0b1220; --ok:#6fe39a; --err:#ff9a9a; --panel:#182030; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:1.05rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { width:min(100% - 2rem, 52rem); margin-inline:auto; }
.skip { position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-fg); padding:.6rem 1rem; z-index:10; }
.skip:focus { left:.5rem; top:.5rem; }
header.site { border-bottom:1px solid var(--line); }
.bar { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; padding:.75rem 0; }
.brand { font-weight:700; font-size:1.2rem; text-decoration:none; color:inherit; }
nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin:0; padding:0; }
a { color:var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .result:focus-visible, main:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
main { padding:1.25rem 0 2rem; }
h1 { font-size:1.8rem; line-height:1.2; margin:.25rem 0 .5rem; }
h2 { font-size:1.3rem; margin:1.5rem 0 .5rem; }
.lead { font-size:1.15rem; color:var(--muted); }
.meta, .help { color:var(--muted); font-size:.95rem; margin:.15rem 0; }
.big { font-size:1.35rem; font-weight:600; margin:.25rem 0; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:.6rem; padding:.75rem 1rem; margin:1rem 0; }
.field { margin:.75rem 0; }
label { display:block; font-weight:600; margin-bottom:.15rem; }
.row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:stretch; }
input[type=search], select { flex:1 1 14rem; min-height:2.75rem; padding:.4rem .6rem; font:inherit; color:var(--fg); background:var(--bg); border:2px solid var(--line); border-radius:.4rem; }
.button { display:inline-block; min-height:2.75rem; padding:.45rem 1rem; font:inherit; font-weight:600; color:var(--accent-fg); background:var(--accent); border:2px solid var(--accent); border-radius:.4rem; text-decoration:none; cursor:pointer; }
.button.secondary { color:var(--accent); background:transparent; }
.episodes, .plain { list-style:none; padding:0; margin:.5rem 0; }
.episodes li { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--line); }
.episodes .name { flex:1 1 16rem; overflow-wrap:anywhere; }
.plain li { padding:.35rem 0; }
.series li { padding:.5rem 0; border-bottom:1px solid var(--line); }
.result:empty { display:none; }
.notice { border-left:6px solid var(--ok); background:var(--panel); padding:.7rem 1rem; margin:.5rem 0; border-radius:.3rem; }
.notice.error { border-color:var(--err); }
.pager { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin:1rem 0; }
footer.site { border-top:1px solid var(--line); padding:1rem 0; color:var(--muted); font-size:.95rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }