:root {
  --bg-base: #d7efe0;
  --bg-surface: rgba(255, 255, 255, 0.78);
  --bg-surface-strong: rgba(255, 255, 255, 0.7);
  --bg-accent-1: rgba(20, 184, 166, 0.18);
  --bg-accent-2: rgba(34, 197, 94, 0.16);
  --text: #10281f;
  --muted: #466255;
  --line: rgba(18, 60, 43, 0.12);
  --accent: #0f766e;
  --accent-strong: #115e59;
  --font-sans: "Outfit", sans-serif;
}

:root[data-theme="dark"] {
  --bg-base: #071610;
  --bg-surface: rgba(15, 30, 24, 0.82);
  --bg-surface-strong: rgba(7, 18, 14, 0.72);
  --bg-accent-1: rgba(45, 212, 191, 0.18);
  --bg-accent-2: rgba(15, 118, 110, 0.14);
  --text: #eefbf4;
  --muted: #bad9ca;
  --line: rgba(255, 255, 255, 0.12);
  --success: #4ade80;
  --danger: #f87171;
}

.hero,
.toolbox {
  padding: 1.4rem;
}

.workspace {
  margin-top: 1.25rem;
}

.hero-notes {
  display: flex;
  gap: 0.85rem;
}

.tool-row {
  align-items: end;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.tool-row.second {
  align-items: center;
}

.toggle {
  margin-top: 1.7rem;
}

.button-row {
  flex-wrap: wrap;
}

.panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.editor-shell,
.output-shell {
  height: 520px;
  min-height: 320px;
}

.output-shell .line-numbers {
  min-width: 3.75rem;
  padding: 1.15rem 0.75rem 1.15rem 1rem;
  font-size: 0.95rem;
}

.output-shell .output-block {
  padding: 1.15rem 1.2rem;
  font-size: 0.95rem;
}

@media (max-width: 1080px) {
  .panes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .hero,
  .toolbox {
    padding: 1rem;
  }

  .editor-shell,
  .output-shell {
    height: 320px;
  }
}