/* ===== Design tokens (match index.html) ===== */
:root{
  --bg:#020202;
  --fg:#baf8c7;
  --muted:#76d69b;
  --accent:#00ff88;
  --accent-2:#39ff14;
  --warn:#ff3b3b;
  --panel:#070b07;
  --glass:rgba(0,0,0,0.5);
  --line:rgba(0,255,136,0.2);
  --grid:rgba(0,255,136,0.06);
  --shadow:0 0 12px rgba(0,255,136,0.35), 0 0 32px rgba(0,255,136,0.15);
}
body.theme-purple { --bg:#0b0211; --fg:#eedaff; --muted:#c9a7ff; --accent:#b84cff; --accent-2:#e05cff; --panel:#14061d; --line:rgba(184,76,255,0.25); --grid:rgba(184,76,255,0.09); --shadow:0 0 12px rgba(184,76,255,0.45), 0 0 32px rgba(184,76,255,0.2); }
body.theme-cyan   { --bg:#021015; --fg:#c9f7ff; --muted:#9de9fb; --accent:#00e5ff; --accent-2:#39d5ff; --panel:#031a22; --line:rgba(0,229,255,0.25); --grid:rgba(0,229,255,0.08); --shadow:0 0 12px rgba(0,229,255,0.45), 0 0 32px rgba(0,229,255,0.2); }
body.theme-magenta{ --bg:#12000b; --fg:#ffd8ec; --muted:#ffb0db; --accent:#ff2fa1; --accent-2:#ff5cc8; --panel:#1e0012; --line:rgba(255,47,161,0.25); --grid:rgba(255,47,161,0.08); --shadow:0 0 12px rgba(255,47,161,0.45), 0 0 32px rgba(255,47,161,0.2); }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  background:var(--bg);
  color:var(--fg);
  line-height:1.5;
  overflow-x:hidden;
}
/* Flexbox is sorcery. Touch it gently or the layout gremlins will unionize. */
a{color:var(--accent-2);text-decoration:none;border-bottom:1px dotted var(--accent-2)}
a:hover{color:var(--accent);border-bottom-color:transparent}
.muted{color:var(--muted);opacity:.95}
.hidden{display:none!important}

/* CRT scanlines + vignette (subtle, like index) */
body::before, body::after {content:""; position:fixed; inset:0; pointer-events:none; z-index:0}
body::before {background:repeating-linear-gradient(to bottom, rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 2px, rgba(0,0,0,0.15) 3px); mix-blend-mode:multiply; opacity:.55}
body::after  {background:radial-gradient(60% 80% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%), linear-gradient(to bottom, transparent 0, transparent 88%, rgba(0,0,0,0.25) 100%)}

/* Global backgrounds (match index IDs) */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
             repeating-linear-gradient(0deg, var(--grid) 0px, var(--grid) 1px, transparent 1px, transparent 24px),
             repeating-linear-gradient(90deg, var(--grid) 0px, var(--grid) 1px, transparent 1px, transparent 24px);
  filter:saturate(1.2);
}
.matrix-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; display:block }
@media (prefers-reduced-motion: reduce){ .matrix-canvas{ display:none !important } }

.wrap{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:clamp(12px,2.8vw,24px) }

/* Sticky topbar */
.topbar{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  padding:10px 14px; border-radius:10px; box-shadow:var(--shadow);
  position:sticky; top:16px; backdrop-filter:blur(4px); z-index:10;
}
/* If you change this margin, the navbar will file a complaint with HR (Hover Rules). */
.brand{display:flex; align-items:center; gap:12px; letter-spacing:.5px}
.logo{width:clamp(32px,6vw,40px); height:clamp(32px,6vw,40px); border-radius:8px; border:1px solid var(--line); display:grid; place-items:center; color:var(--accent); text-shadow:var(--shadow); box-shadow: inset 0 0 12px rgba(0,255,136,.25)}
.studio-name{font-size:clamp(1.15rem,3.5vw,1.4rem); font-weight:700; color:var(--accent-2); text-shadow:var(--shadow)}
.tagline{font-size:.9rem; color:var(--muted); opacity:.95}

.nav{display:flex; gap:10px; flex-wrap:wrap}
.nav a{ color:var(--fg); border:1px dashed var(--line); border-radius:8px; padding:8px 12px; display:inline-flex; align-items:center; gap:6px; min-height:40px; transition:transform 120ms }
.nav a:hover{ transform:translateY(-1px); box-shadow:var(--shadow); color:var(--accent-2); border-color:var(--accent-2) }
.nav a[aria-current="page"]{ color:var(--accent-2); border-color:var(--accent-2) }

.controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.chip{ border:1px dashed var(--line); border-radius:8px; padding:6px 10px; background:linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.35)); color:var(--fg); display:flex; align-items:center; gap:8px; min-height:40px }
.chip input[type="checkbox"]{ accent-color:var(--accent-2) }
.chip select{ background:transparent; color:var(--accent-2); border:1px dashed var(--line); border-radius:6px; padding:4px 6px }

/* Terminal card */
.term{ border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(2,12,6,0.65)); box-shadow:var(--shadow); overflow:hidden; margin-top:22px }
body.theme-purple .term{ background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(20,6,29,0.65)) }
body.theme-cyan   .term{ background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(3,26,34,0.65)) }
body.theme-magenta.term{ background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(30,0,18,0.65)) }
.term-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:#061b0f; border-bottom:1px solid var(--line) }
.dots{ display:flex; gap:6px }
.dot{ width:10px; height:10px; border-radius:50%; background:#1f3; box-shadow:0 0 12px rgba(0,255,128,0.6); opacity:.8 }
.dot:nth-child(2){ background:#ffea00; box-shadow:0 0 12px rgba(255,234,0,0.6) }
.dot:nth-child(3){ background:#ff3b3b; box-shadow:0 0 12px rgba(255,59,59,0.6) }
.term-title{ color:var(--muted); font-weight:700; letter-spacing:.6px }
.term-body{ padding:16px; font-size:clamp(.96rem,2.6vw,.98rem) }
h2{ color:var(--accent-2); text-shadow:var(--shadow); margin:0 0 10px; font-size:clamp(1.05rem,3.2vw,1.2rem) }

/* Cards & grids */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px }
.card{ border:1px dashed var(--line); border-radius:10px; padding:14px; background:linear-gradient(180deg, rgba(0,5,2,0.5), rgba(0,0,0,0.5)); box-shadow:var(--shadow) }
.card h3{ margin:0 0 6px; color:var(--accent); text-shadow:var(--shadow); font-size:1.05rem }
.card p{ margin:0 0 10px; color:var(--fg); opacity:.95 }

/* Videos layout */
.video-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px }
.yt-frame{ border:1px dashed var(--line); border-radius:10px; overflow:hidden; background:var(--panel) }
.aspect-16x9{ position:relative; width:100% }
.aspect-16x9::before{ content:""; display:block; padding-top:56.25% }
.aspect-16x9 > iframe{ position:absolute; inset:0; width:100%; height:100% }
/* Note to self: aspect ratios are the final boss of CSS. Bring snacks. */

/* Footer */
footer{ margin:24px 0 60px; opacity:.9; color:var(--muted); text-align:center }

/* Responsive */
@media (max-width: 820px){
  .topbar{ flex-wrap:wrap; align-items:stretch; gap:10px }
  .brand{ width:100% }
  .controls{ order:2; width:100% }
  .nav{ order:3; width:100%; justify-content:center }
}
@media (max-width:560px){
  .topbar{ top:calc(8px + env(safe-area-inset-top,0px)) }
  .nav a{ flex:1 1 auto; text-align:center; padding:10px 12px }
  .grid{ grid-template-columns:1fr }
  .term-body{ padding:14px }
}