@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #0a0a0a !important;
  --bg-soft: #111111 !important;
  --panel: rgba(24, 24, 27, 0.46) !important;
  --panel-2: rgba(39, 39, 42, 0.56) !important;
  --panel-3: rgba(63, 63, 70, 0.38) !important;
  --surface: rgba(24, 24, 27, 0.46) !important;
  --surface-2: rgba(39, 39, 42, 0.56) !important;
  --surface-3: rgba(63, 63, 70, 0.38) !important;
  --text: #fafafa !important;
  --muted: #a1a1aa !important;
  --muted-2: #71717a !important;
  --line: rgba(255, 255, 255, 0.09) !important;
  --accent: #e11d48 !important;
  --accent-dark: #be123c !important;
  --accent-glow: rgba(225, 29, 72, 0.24) !important;
  --font-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
  --font-heading: 'Space Grotesk', system-ui, sans-serif !important;
  --font-title: 'DM Serif Display', Georgia, serif !important;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace !important;
  --cyan: #e11d48 !important;
  --teal: #e11d48 !important;
  --teal-dark: rgba(225, 29, 72, 0.15) !important;
  --blue: #e11d48 !important;
  --green: #35d08b !important;
  --amber: #f5a524 !important;
  --orange: #f5a524 !important;
  --red: #fb7185 !important;
  --rose: #fb7185 !important;
  --purple: #c084fc !important;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36) !important;
}

html {
  background: #0a0a0a;
  scrollbar-color: rgba(225, 29, 72, 0.45) #0a0a0a;
  scrollbar-width: thin;
}

* {
  scrollbar-color: rgba(225, 29, 72, 0.45) transparent;
  scrollbar-width: thin;
}

body {
  background:
    radial-gradient(circle at 6% 0%, rgba(127, 29, 29, 0.22), transparent 28%),
    radial-gradient(circle at 95% 16%, rgba(225, 29, 72, 0.12), transparent 26%),
    #0a0a0a !important;
  color: #fafafa !important;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #1a1a1a;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2a2a2a;
}

.notebook-shellbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 12px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(18px);
}

.notebook-shellbar a {
  color: inherit;
  text-decoration: none;
}

.notebook-shellbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.notebook-shellbar__brand img {
  width: auto;
  height: 30px;
}

.notebook-shellbar__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.notebook-shellbar__links a {
  font-size: 0.68rem;
  line-height: 1;
  color: #71717a;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.notebook-shellbar__links a:hover {
  color: #ffffff;
}

.topbar {
  position: relative !important;
  top: auto !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(10, 10, 10, 0.86) !important;
  backdrop-filter: blur(18px) !important;
}

.rail,
.sidebar,
.side-rail,
.tab-rail,
.lesson-list,
.side-panel,
.toc,
nav.sidebar,
aside.sidebar {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(10, 10, 10, 0.88) !important;
  box-shadow: none !important;
}

.rail-toggle,
.tab-list button,
.tab-list a,
.lesson-list button,
.side-panel button,
.toc button {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #e4e4e7 !important;
}

.rail-toggle:hover,
.tab-list button:hover,
.tab-list button.active,
.tab-list a:hover,
.tab-list a.active,
.lesson-list button:hover,
.lesson-list button.active,
.side-panel button:hover,
.side-panel button.active,
.toc button:hover,
.toc button.active {
  border-color: rgba(225, 29, 72, 0.45) !important;
  background: rgba(225, 29, 72, 0.14) !important;
  color: #ffffff !important;
}

.rail-toggle-lines,
.rail-toggle-lines::before,
.rail-toggle-lines::after {
  background: #f4f4f5 !important;
}

.brand {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

.main-nav a,
.button,
.tab-list button,
.tab-list a,
.step-controls button,
.tool-form button,
.solution-toggle,
button {
  border-radius: 999px !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: #e4e4e7 !important;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.08em;
}

.main-nav a:hover,
.main-nav a.active,
.button:hover,
.tab-list button:hover,
.tab-list button.active,
.tab-list a:hover,
.tab-list a.active,
.step-controls button:hover,
.tool-form button:hover,
.solution-toggle:hover {
  border-color: rgba(225, 29, 72, 0.45) !important;
  background: rgba(225, 29, 72, 0.12) !important;
  color: #ffffff !important;
}

.button.primary,
.main-nav a.active {
  border-color: rgba(225, 29, 72, 0.5) !important;
  background: rgba(225, 29, 72, 0.14) !important;
  color: #ffffff !important;
}

h1 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  color: #ffffff !important;
  letter-spacing: 0 !important;
}

h2,
h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  color: #ffffff !important;
}

.rail-title,
.hero h1,
.study-hero h1,
.content-card h1,
.panel h1,
.card h1 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.content-card h2,
.content-card h3,
.panel h2,
.panel h3,
.card h2,
.card h3,
.svg-label,
.diagram-label {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

.content-card > h2,
.p2-overview > h2,
.p2-section > h2 {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

p,
li,
td {
  color: #d4d4d8 !important;
}

.hero,
.study-hero {
  min-height: auto !important;
  padding-top: clamp(64px, 11vw, 128px) !important;
}

.hero-panel,
.panel,
.card,
.route-card,
.topic-card,
.exercise-card,
.lesson-card,
.content-card,
.summary-card,
.quiz-card,
.tool-card,
.visual-card,
.example-card,
.callout,
.note,
.warning,
details {
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
  background: rgba(24, 24, 27, 0.42) !important;
  box-shadow: none !important;
}

.hero-panel:hover,
.panel:hover,
.card:hover,
.route-card:hover,
.topic-card:hover,
.exercise-card:hover,
.lesson-card:hover,
.content-card:hover,
.summary-card:hover,
.quiz-card:hover,
.tool-card:hover,
.visual-card:hover,
.example-card:hover {
  border-color: rgba(225, 29, 72, 0.3) !important;
}

.hero-panel,
.automaton-preview,
.network-preview,
.graph-box,
.automaton-box,
.tree-box,
.diagram-panel,
.diagram-box,
.svgbox,
.usecase-svg,
.interactive,
.animation-card,
.p2-card,
.p2-simulator,
.tape-grid,
.tape-display,
.stack-display,
.regex-display,
.sim-controls,
.glass-panel,
.result-item,
canvas {
  background:
    radial-gradient(circle at 18% 0%, rgba(127, 29, 29, 0.18), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(225, 29, 72, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018) !important;
}

.hero-panel > svg,
.hero-panel svg,
.automaton-preview svg,
.network-preview svg,
.graph-box svg,
.automaton-box svg,
.tree-box svg,
.diagram-box svg,
.diagram-panel svg,
.svgbox svg,
.usecase-svg {
  background:
    radial-gradient(circle at 16% 0%, rgba(127, 29, 29, 0.16), transparent 34%),
    radial-gradient(circle at 78% 72%, rgba(225, 29, 72, 0.10), transparent 30%),
    #0a0a0a !important;
}

.network-preview::before,
.automaton-preview::before,
.graph-box::before,
.automaton-box::before,
.tree-box::before,
.diagram-box::before,
.svgbox::before {
  background:
    linear-gradient(90deg, transparent, rgba(225, 29, 72, 0.08), transparent) !important;
}

.network-preview span,
.automaton-preview .state,
.diagram-node,
.stat,
.result-item,
.tape-cell,
.p2-tape-cell,
.formula,
.desc,
.diagram-note,
.diagram-caption {
  background: rgba(24, 24, 27, 0.64) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.tape-display,
.stack-display,
.p2-tape,
.multi-tape-row,
.sim-controls,
.regex-display {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(10, 10, 10, 0.82) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018) !important;
}

.tape-cell.head,
.p2-tape-cell.head,
.transition-table td.active-cell,
.sim-status.running,
.p2-segment.seg-x {
  border-color: rgba(225, 29, 72, 0.45) !important;
  background: rgba(225, 29, 72, 0.16) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.tape-cell.head::after {
  color: #e11d48 !important;
  text-shadow: none !important;
}

.transition-table tr:hover td {
  background: rgba(225, 29, 72, 0.08) !important;
}

.sim-controls .sim-input,
.p2-anim input,
input,
select,
textarea {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(10, 10, 10, 0.68) !important;
  color: #fafafa !important;
  box-shadow: none !important;
}

.sim-controls .sim-input:focus,
.p2-anim input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(225, 29, 72, 0.5) !important;
  outline: none !important;
}

.automaton-preview .state {
  color: #fafafa !important;
  border-color: rgba(244, 244, 245, 0.62) !important;
  box-shadow: none !important;
}

.automaton-preview .state.accepting {
  border-color: rgba(225, 29, 72, 0.78) !important;
  box-shadow:
    0 0 0 3px #0a0a0a,
    0 0 0 5px rgba(225, 29, 72, 0.74) !important;
}

.network-preview path,
.diagram-flow path,
.diagram-link,
.actor-stroke,
.tree-edge,
.automaton-edge,
.svg-edge,
.transition-line {
  stroke: rgba(244, 244, 245, 0.54) !important;
}

.network-preview span,
.diagram-node,
.automaton-state,
.svg-state,
.tree-node,
.system-boundary,
.usecase-ellipse {
  fill: rgba(24, 24, 27, 0.82) !important;
  stroke: rgba(225, 29, 72, 0.56) !important;
}

.transition-active,
.active-state,
.active-node,
.active-edge,
.state-active .svg-state,
.svg-state.state-active,
.state-accepting.state-active .svg-state,
.state-accepting .svg-state-inner,
.svg-state-inner.state-accepting,
.diagram-arrow,
.diagram-arrow path,
.include-link {
  stroke: #e11d48 !important;
  fill: #e11d48 !important;
}

svg [stroke="#22c8d8"],
svg [stroke="#28c7d8"],
svg [stroke="#32c6a6"],
svg [stroke="#1D9E75"],
svg [stroke="#3B82F6"],
svg [stroke="#4f8cff"] {
  stroke: #e11d48 !important;
}

svg [fill="#22c8d8"],
svg [fill="#28c7d8"],
svg [fill="#32c6a6"],
svg [fill="#1D9E75"],
svg [fill="#3B82F6"],
svg [fill="#4f8cff"] {
  fill: #e11d48 !important;
}

svg [fill="#172238"],
svg [fill="#132030"],
svg [fill="#1f2937"],
svg [fill="#0f172a"] {
  fill: rgba(24, 24, 27, 0.84) !important;
}

svg {
  max-width: 100%;
}

pre,
code,
.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

.tape-cell,
.p2-tape-cell,
.formula,
.regex-display,
.stack-display,
.transition-table,
.sim-input {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: #0a0a0a !important;
}

@media (max-width: 720px) {
  .notebook-shellbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .topbar {
    top: auto !important;
  }

  .notebook-shellbar__links {
    justify-content: flex-start;
  }

  h1 {
    font-size: clamp(2.35rem, 11vw, 3.15rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    padding-top: 0.08em;
  }

  .hero,
  .study-hero {
    padding-top: 52px !important;
  }
}