/* shell.css — minimal dark frame shared by every demo. Palette matches the
   existing portfolio so demos feel like one system. */
:root {
  --bg: #0c0e14; --panel: #12151d; --line: #232838;
  --fg: #c8ccd4; --dim: #828a9c; --accent: #5fd0c4;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: var(--sans); }

.shell { display: flex; flex-direction: column; height: 100vh; }

.shell-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 14px;
}
.shell-title { color: var(--fg); letter-spacing: .02em; }
.shell-actions { display: flex; gap: 12px; align-items: center; }  /* empty for now */

/* The stage: a clean full-bleed area the demo's canvas fills. */
.shell-stage { flex: 1 1 auto; position: relative; overflow: hidden; display: grid; place-items: stretch; }
.shell-stage > canvas { display: block; width: 100%; height: 100%; }

.shell-nav { flex: 0 0 auto; }  /* empty for now — about / browse-next later */

/* The only visible capture state: a pulsing dot while recording. Lives outside the
   stage, so it never appears in the captured canvas stream. */
.shell-rec-dot {
  position: fixed; top: 14px; right: 16px; width: 12px; height: 12px; border-radius: 50%;
  background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,.6); animation: shell-pulse 1.2s infinite;
  z-index: 50; pointer-events: none;
}
@keyframes shell-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229,72,77,.55); }
  70% { box-shadow: 0 0 0 9px rgba(229,72,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}
@media (prefers-reduced-motion: reduce) { .shell-rec-dot { animation: none; } }