/* Shared styles for talk-notes pages (labs/experiments/<slug>/).
   Generated pages set the theme tokens (--accent, --brand1..3, --hl) inline. */
@font-face{font-family:Dosis;src:url('/fonts/dosis-latin-var.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Roboto;src:url('/fonts/roboto-latin-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
  --bg:#f4f5f6; --surface:#ffffff; --ink:#212223; --muted:#6b6c70; --line:#d8d8d9;
  --hl-ink:#101111; --hero:#212223; --hero-ink:#f4f5f6;
  --c1:#008eff; --c2:#ee4593; --c3:#1f9e89; --c4:#ff3f00; --c5:#6b1fa3; --c6:#2457a8; --c7:#b89a00; --c8:#8a8a8c;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#101111; --surface:#1c1d1f; --ink:#ececed; --muted:#9a9a9e; --line:#333438;
  --hero:#1c1d1f; --c5:#a463d6; --c6:#5b8ee0; --c7:#f0e300;
}}
:root[data-theme="dark"]{
  --bg:#101111; --surface:#1c1d1f; --ink:#ececed; --muted:#9a9a9e; --line:#333438;
  --hero:#1c1d1f; --c5:#a463d6; --c6:#5b8ee0; --c7:#f0e300;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 Roboto,-apple-system,system-ui,sans-serif}
h1,h2,h3,h4,.root,nav.tabs a,.tchap,.stars{font-family:Dosis,Roboto,sans-serif}
a{color:var(--accent)}
header{background:var(--hero);color:var(--hero-ink);position:relative;overflow:hidden}
header .in{max-width:1280px;margin:0 auto;padding:28px 16px 24px;position:relative}
header .kicker{display:inline-block;font:800 13px/1 Dosis,sans-serif;letter-spacing:.18em;text-transform:uppercase;background:var(--brand1);color:#fff;padding:6px 10px;transform:rotate(-2deg)}
header h1{margin:12px 0 4px;font-size:clamp(30px,5vw,52px);line-height:1;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;max-width:calc(100% - 150px)}
header h1 em{font-style:normal;color:var(--brand3)}
header p{margin:6px 0 0;color:#b4b4b5}
header p a{color:var(--brand2)}
header .mark{position:absolute;right:20px;top:14px;width:clamp(72px,12vw,140px);height:auto;color:var(--brand1);transform:rotate(10deg);filter:drop-shadow(5px 5px 0 var(--brand2))}
svg.p{width:1.15em;height:1.15em;vertical-align:-.2em;color:var(--accent)}
.stars{display:inline-flex;gap:2px}
.stars .off svg.p{color:var(--muted);opacity:.3}
@media (max-width:600px){header .mark{opacity:.35}header h1{max-width:none}}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--brand1) 0 33%,var(--brand2) 33% 66%,var(--brand3) 66%)}
footer{text-align:center;color:var(--muted);padding:24px 16px 40px;font-size:14px}
footer b{font-family:Dosis,sans-serif;color:var(--accent)}
nav.tabs{max-width:1280px;margin:0 auto;padding:8px 16px;display:flex;gap:6px;flex-wrap:wrap;position:sticky;top:0;background:var(--bg);z-index:5;border-bottom:1px solid var(--line)}
nav.tabs a{text-decoration:none;color:var(--muted);padding:6px 12px;border-radius:999px;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
nav.tabs a:hover{background:var(--accent-soft);color:var(--accent)}
main{max-width:1280px;margin:0 auto;padding:16px}
section{margin-bottom:40px}
h2{font-size:26px;margin:0 0 12px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
h2::after{content:"";display:block;width:48px;height:5px;background:var(--accent);margin-top:4px}
/* watch area */
.watch{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.player{position:sticky;top:56px}
.video{position:relative;aspect-ratio:16/9;width:100%;border-radius:10px;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chapbar{display:flex;height:14px;margin-top:10px;border-radius:4px;overflow:hidden;cursor:pointer;position:relative}
.chapbar div{height:100%;border-right:2px solid var(--bg);opacity:.55;transition:opacity .15s}
.chapbar div:hover,.chapbar div.on{opacity:1}
.chapbar .cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:1;border:0;pointer-events:none}
.nowchap{margin-top:8px;font-size:14px;color:var(--muted)}
.nowchap b{color:var(--ink)}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.controls button,.controls label{font:inherit;font-size:13px;padding:5px 10px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.transcript{background:var(--surface);border:1px solid var(--line);border-radius:10px;height:calc(100vh - 90px);min-height:420px;display:flex;flex-direction:column}
.tsearch{padding:10px;border-bottom:1px solid var(--line)}
.tsearch input{width:100%;padding:8px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.tbody{overflow-y:auto;padding:8px 12px 40vh;flex:1}
.tchap{margin:18px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;display:flex;gap:6px;align-items:center}
.tchap i{width:8px;height:8px;border-radius:50%;display:inline-block}
.seg{display:inline;cursor:pointer;border-radius:3px;padding:1px 0;transition:background .2s}
.seg:hover{background:var(--accent-soft)}
.seg.active{background:var(--hl);color:var(--hl-ink);box-shadow:0 0 0 2px var(--hl)}
.seg.miss{opacity:.25}
.ts{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-right:4px}
.note{font-size:13px;color:var(--muted);margin:8px 0 0}
/* chapters */
.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.chap{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:8px;padding:12px 14px;cursor:pointer}
.chap:hover{border-color:var(--c)}
.chap .top{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.chap h3{margin:4px 0 6px;font-size:18px;font-weight:700}
.tag{display:inline-block;font:700 11px/1 Dosis,sans-serif;text-transform:uppercase;letter-spacing:.08em;padding:3px 6px;border-radius:3px;background:var(--c);color:#fff;margin-right:6px}
.chap p{margin:0;font-size:14px;color:var(--muted)}
.stars{white-space:nowrap;font-size:14px}
.legend{font-size:13px;color:var(--muted);margin:-4px 0 12px}
/* summary */
.summary{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px 24px;max-width:860px}
.summary p{margin:0 0 12px}
.summary ul{margin:0 0 12px;padding-left:20px}
.t{font-variant-numeric:tabular-nums;font-size:12px;background:var(--accent-soft);color:var(--accent);padding:1px 6px;border-radius:4px;text-decoration:none;cursor:pointer;white-space:nowrap}
/* knowledge map */
.map{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px}
.map svg.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mapgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:28px 60px;align-items:center;position:relative}
.mapcol{display:flex;flex-direction:column;gap:18px}
.root{background:var(--hero);color:var(--hero-ink);border:3px solid var(--brand1);border-radius:14px;padding:16px 18px;text-align:center;max-width:220px;font-weight:800;font-size:18px;text-transform:uppercase}
.root small{display:block;font-weight:400;opacity:.75;margin-top:4px;text-transform:none}
.branch{border:2px solid var(--c);border-radius:10px;padding:10px 12px;background:var(--bg)}
.branch h4{margin:0 0 8px;font-size:15px;color:var(--c);display:flex;justify-content:space-between;gap:8px}
.leaves{display:flex;flex-wrap:wrap;gap:6px}
.leaf{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 10px;cursor:pointer;font:inherit;font-size:13px}
.leaf:hover{border-color:var(--c);color:var(--c)}
.leaf span{color:var(--muted);font-size:11px;margin-left:4px;font-variant-numeric:tabular-nums}
.leaf.key{border-color:var(--c);font-weight:600}
.xref{margin-top:16px;font-size:13px;color:var(--muted)}
.xref b{color:var(--ink)}
@media (max-width:900px){
  .watch{grid-template-columns:1fr}
  .player{position:static}
  .transcript{height:60vh}
  .mapgrid{grid-template-columns:1fr}
  .root{max-width:none;order:-1}
  .map svg.links{display:none}
}