:root{
  --bg:#ffffff; --fg:#1a1a1a; --muted:#606770; --line:#e4e6eb;
  --card:#f5f6f7; --accent:#1b64da; --accentfg:#fff; --warn:#b35900;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15181c; --fg:#e6e8ea; --muted:#9aa0a6; --line:#2a2f36;
    --card:#1e2228; --accent:#4d8bff; --accentfg:#0b1220; --warn:#e3a008;
  }
}
:root[data-theme="dark"]{
  --bg:#15181c; --fg:#e6e8ea; --muted:#9aa0a6; --line:#2a2f36;
  --card:#1e2228; --accent:#4d8bff; --accentfg:#0b1220; --warn:#e3a008;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height:1.7;-webkit-text-size-adjust:100%}
.wrap{max-width:960px;margin:0 auto;padding:20px}
h1{font-size:1.5rem;margin:.2em 0 .1em}
.lead{color:var(--muted);margin:.2em 0 1.4em}

.route{margin:34px 0 10px;padding-top:8px;border-top:3px solid var(--line)}
.route:first-of-type{border-top:0}
.route > h2{font-size:1.25rem;margin:.2em 0 .6em;border:0;padding:0}
.route > h2 small{color:var(--muted);font-weight:400;font-size:.8rem;margin-left:8px}

.player{background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9;position:relative}
.player video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.player .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#cfd3d8;font-size:.95rem;text-align:center;padding:16px;pointer-events:none}
.cams{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.cams .grp{flex-basis:100%;color:var(--muted);font-size:.8rem;margin:8px 0 -2px}
.cams button{
  border:1px solid var(--line);background:var(--card);color:var(--fg);
  padding:7px 12px;border-radius:999px;cursor:pointer;font-size:.88rem;line-height:1.3}
.cams button[aria-pressed="true"]{background:var(--accent);color:var(--accentfg);border-color:var(--accent)}
.cams button .k{font-size:.68rem;opacity:.6;margin-left:5px}
.status{color:var(--muted);font-size:.84rem;min-height:1.2em;margin-top:2px}
.status.err{color:var(--warn)}

.ad{margin:22px 0;padding:10px;border:1px dashed var(--line);border-radius:10px;
  text-align:center;color:var(--muted);font-size:.85rem}

.info h3{font-size:1.02rem;margin:20px 0 .3em;border-bottom:1px solid var(--line);padding-bottom:.25em}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{border:1px solid var(--line);padding:7px 9px;text-align:left}
th{background:var(--card)}
.info ul{margin:.4em 0;padding-left:1.2em}
.todo{color:var(--muted);font-size:.85rem}

footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.82rem}
a{color:var(--accent)}
