/* Shared styles for the videoscope feature tour (main page + deep-dives). */
:root{
  --bg:#0d1117; --bg2:#161b22; --bg3:#21262d; --bg4:#30363d;
  --ink:#e6edf3; --ink2:#c9d1d9; --dim:#8b949e; --faint:#6e7681;
  --rule:#30363d; --accent:#58a6ff; --green:#3fb950; --amber:#d29922; --red:#f85149;
  --font-ui:'Manrope',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:12px 20px; background:rgba(13,17,23,.82); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule)}
.topbar .logo{font-weight:800; letter-spacing:-.02em; font-size:17px}
.topbar .logo a{color:var(--ink)}
.topbar .logo .dim{color:var(--dim); font-weight:600}
.topbar .kicker{font-family:var(--font-mono); font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.14em}
.topbar nav{display:none; gap:16px; margin-left:8px}
.topbar nav a{color:var(--dim); font-size:13px; font-weight:600}
.topbar nav a:hover{color:var(--ink); text-decoration:none}
.topbar .spacer{flex:1}
.topbar .cta{font-size:13px; font-weight:600; padding:7px 13px; border-radius:6px; border:1px solid var(--accent); color:var(--accent)}
.topbar .cta:hover{background:rgba(56,139,253,.12); text-decoration:none}
@media(min-width:860px){ .topbar nav{display:flex} }

.wrap{max-width:1160px; margin:0 auto; padding:0 20px}

/* main-page hero + sections + cards */
.hero{padding:72px 0 40px; border-bottom:1px solid var(--rule)}
.hero h1{font-size:clamp(30px,5vw,52px); line-height:1.08; letter-spacing:-.03em; margin:0 0 18px; font-weight:800}
.hero h1 .grad{background:linear-gradient(92deg,#58a6ff,#3fb950 40%,#d29922 70%,#f85149); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{font-size:18px; color:var(--ink2); max-width:700px; margin:0 0 26px}
.hero-shot{margin-top:36px; border:1px solid var(--rule); border-radius:10px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.hero-shot img{width:100%; aspect-ratio:16/9; object-fit:cover}
.hero-cap{font-family:var(--font-mono); font-size:12px; color:var(--faint); padding:9px 14px; border-top:1px solid var(--rule); background:var(--bg2)}

.section{padding:60px 0 8px}
.section > .kick{font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 8px}
.section > h2{font-size:clamp(23px,3.2vw,32px); letter-spacing:-.02em; margin:0 0 8px; font-weight:800}
.section > .lede{color:var(--dim); max-width:660px; margin:0 0 32px}

.grid{display:grid; gap:22px}
.grid.scopes{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(430px,1fr))}

.card{background:var(--bg2); border:1px solid var(--rule); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--bg4); transform:translateY(-2px)}
.card a.thumb, .card .thumb{background:#000; overflow:hidden; display:block}
.card.scope .thumb img{width:100%; aspect-ratio:1/1; object-fit:cover}
.card.over .thumb img{width:100%; aspect-ratio:16/9; object-fit:cover}
.card .body{padding:15px 17px 17px}
.card .head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.card .head h3{font-size:15.5px; margin:0; font-weight:700; letter-spacing:-.01em}
.card .head h3 a{color:var(--ink)}
.card .key{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink2); border:1px solid var(--rule); background:var(--bg3); border-radius:5px; padding:2px 7px; white-space:nowrap}
.card .desc{color:var(--dim); font-size:13.5px; margin:0}
.card .more{display:inline-block; margin-top:10px; font-size:13px; font-weight:600}

/* ---------- deep-dive pages ---------- */
.crumbs{padding:22px 0 0; font-size:13px; color:var(--dim); font-family:var(--font-mono)}
.crumbs a{color:var(--dim)} .crumbs a:hover{color:var(--ink)}

.dhero{padding:20px 0 44px; border-bottom:1px solid var(--rule); display:grid; gap:30px; grid-template-columns:1fr}
@media(min-width:820px){ .dhero{grid-template-columns:1.05fr .95fr; align-items:center} }
.dhero .meta .cat{font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 10px}
.dhero .meta h1{font-size:clamp(28px,4vw,42px); letter-spacing:-.02em; margin:0 0 14px; font-weight:800}
.dhero .meta p{font-size:17px; color:var(--ink2); margin:0 0 20px}
.dhero .facts{display:flex; flex-wrap:wrap; gap:8px}
.dhero .facts .chip{font-family:var(--font-mono); font-size:12px; color:var(--ink2); border:1px solid var(--rule); background:var(--bg2); border-radius:6px; padding:5px 10px}
.dhero .shot{border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:#000; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.dhero .shot img{width:100%; aspect-ratio:1/1; object-fit:cover}
.dhero .shot.wide img{aspect-ratio:16/9}

.block{padding:52px 0 0}
.block h2{font-size:clamp(20px,2.6vw,27px); letter-spacing:-.02em; margin:0 0 6px; font-weight:800}
.block .sub{color:var(--dim); max-width:680px; margin:0 0 26px}

.anatomy{display:grid; gap:26px; grid-template-columns:1fr}
@media(min-width:820px){ .anatomy{grid-template-columns:1fr 1fr; align-items:start} }
.anatomy .shot{border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:#000}
.anatomy .shot img{width:100%; aspect-ratio:1/1; object-fit:cover}
.anatomy dl{margin:0}
.anatomy dt{font-weight:700; font-size:15px; margin:0 0 2px}
.anatomy dt .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:middle}
.anatomy dd{margin:0 0 16px 0; color:var(--dim); font-size:14px}

.states{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.state{background:var(--bg2); border:1px solid var(--rule); border-radius:10px; overflow:hidden}
.state .shot{background:#000} .state .shot img{width:100%; aspect-ratio:1/1; object-fit:cover}
.state .cap{padding:13px 15px 15px}
.state .cap .lbl{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.state .cap .lbl b{font-size:14.5px}
.state .cap .btn{font-family:var(--font-mono); font-size:11px; color:var(--ink2); border:1px solid var(--rule); background:var(--bg3); border-radius:5px; padding:2px 7px}
.state .cap p{margin:0; color:var(--dim); font-size:13.5px}

.controls{display:flex; flex-direction:column; gap:14px}
.ctrl{display:flex; gap:14px; align-items:flex-start; background:var(--bg2); border:1px solid var(--rule); border-radius:10px; padding:15px 17px}
.ctrl .tag{font-family:var(--font-mono); font-size:12px; color:var(--ink); border:1px solid var(--bg4); background:var(--bg3); border-radius:6px; padding:4px 9px; white-space:nowrap; flex:none}
.ctrl .txt b{font-size:15px} .ctrl .txt p{margin:4px 0 0; color:var(--dim); font-size:14px}

.uses{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.use{background:var(--bg2); border:1px solid var(--rule); border-radius:10px; padding:17px 18px}
.use h3{margin:0 0 6px; font-size:15.5px}
.use p{margin:0; color:var(--dim); font-size:14px}

/* footer */
.footer{margin-top:70px; padding:26px 20px 40px; border-top:1px solid var(--rule); color:var(--dim); font-size:13px; text-align:center}
.footer a{color:var(--dim)} .footer a:hover{color:var(--ink2)}
.suite-badges{display:inline-flex; gap:5px; flex-wrap:wrap; align-items:center; justify-content:center; margin-bottom:14px}
.suite-badges .badge{font-family:var(--font-mono); font-size:11px; color:var(--dim); border:1px solid var(--rule); border-radius:5px; padding:3px 8px; text-decoration:none}
.suite-badges .badge:hover{color:var(--ink); border-color:var(--bg4); text-decoration:none}
.suite-badges .badge.current{color:var(--ink); border-color:var(--accent)}
.creds{color:var(--faint); font-size:12px; max-width:700px; margin:10px auto 0; line-height:1.6}