/* ==========================================================================
   Shared styles for the Working with AI Coding Tools guide series.
   Each guide links this file and defines its own :root color variables.
   ========================================================================== */

/* --- Fonts --- */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* --- Default color variables (guides override these) --- */
:root {
  --ink: #1a1a2e;
  --paper: #faf9f7;
  --slate: #5a6a7a;
  --cloud: #e0dcd6;

  /* Primary accent (concept boxes, overline, h3) */
  --accent: #4a6fa5;
  --accent-light: #e8eef6;

  /* Secondary accent (analogy boxes, prompt boxes) */
  --secondary: #c48a2a;
  --secondary-light: #f5f0e4;

  /* Tip (always green-ish) */
  --tip: #5a7a6b;
  --tip-light: #edf5f0;

  /* Warning (always warm) */
  --warn: #b8584c;
  --warn-light: #fdf0ec;

  /* Foreground text variants (lightened automatically in dark mode) */
  --accent-fg: var(--accent);
  --secondary-fg: var(--secondary);
  --tip-fg: var(--tip);
  --warn-fg: var(--warn);
  --slate-fg: var(--slate);

  /* Top bar gradient */
  --bar-1: var(--accent);
  --bar-2: var(--tip);
  --bar-3: var(--warn);

  /* Shared surfaces */
  --surface-1: #ffffff;
  --surface-2: #f8f7f5;
  --surface-3: #f0eeeb;
  --surface-4: #f5f3f0;
  --surface-inline: var(--cloud);

  /* Terminal-like surfaces */
  --terminal-bg: #1e293b;
  --terminal-bg-2: #334155;
  --terminal-border: #334155;
  --terminal-ink: #e2e8f0;
  --terminal-muted: #94a3b8;
  --terminal-comment: #64748b;
}

/* --- Reset --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Base --- */
html {
  color-scheme: light;
}

body {
  font-family: "Source Serif 4", Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.8;
  font-size: 17px;
}

/* Top accent bar */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--bar-1) 0%,
    var(--bar-2) 50%,
    var(--bar-3) 100%
  );
}

/* --- Container --- */
.container {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

/* --- Typography --- */
a {
  color: var(--accent-fg);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--ink);
}

p {
  margin-bottom: 1.25rem;
}

ul,
ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

strong {
  font-weight: 600;
}

code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9em;
  background: var(--surface-inline);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}

/* --- Header --- */
header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 3px double var(--cloud);
}

.overline {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-fg);
  margin-bottom: 0.5rem;
}

h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.subtitle {
  color: var(--slate);
  font-size: 1.15rem;
  font-style: italic;
}

/* --- Section headings --- */
h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin: 3rem 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cloud);
}

h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-fg);
  margin: 2rem 0 0.75rem;
}

/* ==========================================================================
   Box patterns
   ========================================================================== */

/* --- Concept box (primary accent) --- */
.concept {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.concept h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-fg);
  margin-bottom: 0.5rem;
}

.concept p:last-child {
  margin-bottom: 0;
}

/* Alternate: concept-box with left border (used in getting-started) */
.concept-box {
  background: var(--accent-light);
  border-left: 4px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.concept-box h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-fg);
  margin-bottom: 0.5rem;
}

.concept-box p:last-child {
  margin-bottom: 0;
}

/* --- Tip box (green) --- */
.tip-box {
  background: var(--tip-light);
  border-left: 4px solid var(--tip);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.tip-box h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tip-fg);
  margin-bottom: 0.5rem;
}

.tip-box p:last-child {
  margin-bottom: 0;
}

/* --- Warning box (warm) --- */
.warning-box {
  background: var(--warn-light);
  border-left: 4px solid var(--warn);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.warning-box h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warn-fg);
  margin-bottom: 0.5rem;
}

.warning-box p:last-child {
  margin-bottom: 0;
}

/* --- Analogy box (secondary, muted) --- */
.analogy {
  background: var(--secondary-light);
  border-radius: 8px;
  padding: 1.25rem 1.5rem 1.5rem;
  margin: 1.5rem 0;
}

.analogy h3 {
  color: var(--secondary-fg);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.analogy h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary-fg);
  margin-bottom: 0.5rem;
}

.analogy p:last-child {
  margin-bottom: 0;
}

/* Alternate: analogy-box with left border */
.analogy-box {
  background: var(--secondary-light);
  border-left: 4px solid var(--secondary);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.analogy-box h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary-fg);
  margin-bottom: 0.5rem;
}

.analogy-box p:last-child {
  margin-bottom: 0;
}

/* --- Problem box (warm/rust) --- */
.problem-box {
  background: var(--warn-light);
  border-left: 4px solid var(--warn);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.problem-box h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warn-fg);
  margin-bottom: 0.5rem;
}

.problem-box p:last-child {
  margin-bottom: 0;
}

/* --- Solution box (green) --- */
.solution-box {
  background: var(--tip-light);
  border-left: 4px solid var(--tip);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.solution-box h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tip-fg);
  margin-bottom: 0.5rem;
}

.solution-box p:last-child {
  margin-bottom: 0;
}

/* --- Caveat box (muted) --- */
.caveat {
  background: var(--surface-4);
  border-left: 4px solid var(--cloud);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.caveat h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate);
  margin-bottom: 0.5rem;
}

.caveat p:last-child {
  margin-bottom: 0;
}

/* --- Prompt box (dark terminal) --- */
.prompt-box {
  background: var(--terminal-bg);
  color: var(--terminal-ink);
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.6;
}

.prompt-box .label {
  color: var(--accent-fg);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  display: block;
  opacity: 0.8;
}

.prompt-box .response {
  color: var(--terminal-muted);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--terminal-border);
  font-style: italic;
}

.prompt-box .response .label {
  color: var(--tip-fg);
}

/* --- Prompt example (bordered, light bg) --- */
.prompt-example {
  border: 2px solid var(--secondary);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--surface-1);
}

.prompt-example .label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--secondary-fg);
  margin-bottom: 0.5rem;
  display: block;
}

/* ==========================================================================
   Code blocks
   ========================================================================== */

.code-block {
  background: var(--terminal-bg);
  color: var(--terminal-ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  border-radius: 8px;
  margin: 1.5rem 0;
}

.code-block-label {
  display: block;
  background: var(--terminal-bg-2);
  color: var(--terminal-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5rem 1.25rem;
  border-radius: 8px 8px 0 0;
}

.code-block pre {
  padding: 1.25rem;
  overflow-x: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--terminal-ink);
  margin: 0;
}

.code-block pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Syntax highlighting */
.code-block .comment {
  color: var(--terminal-comment);
  font-style: italic;
}
.code-block .key {
  color: #7dd3fc;
}
.code-block .string {
  color: #86efac;
}
.code-block .heading {
  color: #fbbf24;
}
.code-block .keyword {
  color: #c4b5fd;
}
.code-block .tag {
  color: #f472b6;
}
.code-block .attr {
  color: #7dd3fc;
}

/* ==========================================================================
   Diagram system
   ========================================================================== */

.diagram {
  background: var(--surface-2);
  border: 2px solid var(--cloud);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
}

.diagram-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--slate);
  margin-bottom: 1rem;
  text-align: center;
}

.diagram-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.diagram-node {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-align: center;
  font-size: 0.8rem;
  border: 1px solid var(--cloud);
  background: var(--surface-1);
}

.diagram-arrow {
  color: var(--slate);
  font-size: 1.2rem;
}

.diagram-caption {
  font-size: 0.75rem;
  color: var(--slate);
  text-align: center;
  margin-top: 0.75rem;
  font-style: italic;
}

/* ==========================================================================
   Story / case study
   ========================================================================== */

.story {
  background: var(--surface-1);
  border-left: 4px solid var(--secondary);
  border-radius: 0 8px 8px 0;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.story h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary-fg);
  margin-bottom: 0.5rem;
}

.story p:last-child {
  margin-bottom: 0;
}

.case-study {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.case-study h4 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-fg);
  margin-bottom: 0.5rem;
}

.case-study p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   File tree
   ========================================================================== */

.file-tree {
  background: var(--terminal-bg);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--terminal-ink);
}

.file-tree .dir {
  color: #7dd3fc;
}
.file-tree .file {
  color: var(--terminal-ink);
}
.file-tree .note {
  color: var(--terminal-comment);
  font-style: italic;
}

/* ==========================================================================
   Further reading
   ========================================================================== */

.further-reading {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 3px double var(--cloud);
}

.further-reading h2 {
  border-bottom: none;
  padding-bottom: 0;
}

.further-reading ul {
  list-style: none;
  padding-left: 0;
}

.further-reading li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--cloud);
}

.further-reading li:last-child {
  border-bottom: none;
}

.further-reading a {
  font-weight: 600;
}

.further-reading .desc {
  color: var(--slate);
  font-size: 0.9rem;
}

/* ==========================================================================
   Navigation (back link)
   ========================================================================== */

.nav-back {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.nav-back a {
  color: var(--slate);
  text-decoration: none;
}

.nav-back a:hover {
  color: var(--accent-fg);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  text-align: center;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 3px double var(--cloud);
  color: var(--slate);
  font-size: 0.85rem;
  line-height: 1.6;
}

footer a {
  color: var(--accent-fg);
}

/* ==========================================================================
   Theme switcher
   ========================================================================== */

.theme-switcher {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--cloud);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(12px);
}

.theme-switcher button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--slate);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.theme-switcher button:hover {
  color: var(--ink);
}

.theme-switcher button.active {
  background: var(--accent);
  color: #fff;
}

.theme-switcher button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Dark theme
   ========================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #10161d;
  --ink: #eee7dc;
  --slate: #aab4c2;
  --cloud: #2b3644;

  --accent-light: color-mix(in srgb, var(--accent) 20%, #141b24);
  --secondary-light: color-mix(in srgb, var(--secondary) 18%, #141b24);
  --tip-light: color-mix(in srgb, var(--tip) 20%, #13191c);
  --warn-light: color-mix(in srgb, var(--warn) 18%, #181517);

  --accent-fg: color-mix(in srgb, var(--accent) 60%, white);
  --secondary-fg: color-mix(in srgb, var(--secondary) 60%, white);
  --tip-fg: color-mix(in srgb, var(--tip) 60%, white);
  --warn-fg: color-mix(in srgb, var(--warn) 60%, white);
  --slate-fg: var(--slate);

  --surface-1: #171d27;
  --surface-2: #1c2430;
  --surface-3: #232d39;
  --surface-4: #1a212b;
  --surface-inline: #202936;

  --terminal-bg: #0f172a;
  --terminal-bg-2: #162033;
  --terminal-border: #334155;
  --terminal-ink: #e2e8f0;
  --terminal-muted: #94a3b8;
  --terminal-comment: #7c8ca1;

  /* Landing page variables */
  --cream: var(--surface-1);
  --ink-light: #c9c0b4;
  --ink-faint: #909aab;
  --ochre: #d9b24f;
  --ochre-light: #e2c973;
  --ochre-faded: color-mix(in srgb, var(--ochre) 18%, var(--surface-1));
  --rust: #d0906d;
  --rust-light: #ddab8c;
  --sage: #93b79d;
  --sage-light: #a8c8b1;
  --navy: #9cb7df;
  --rule: #364355;
  --rule-light: #283445;
  --shadow: rgba(0, 0, 0, 0.35);

  /* Web guide variables */
  --blue-light: color-mix(
    in srgb,
    var(--blue, var(--accent)) 18%,
    var(--surface-1)
  );
}

html[data-theme="dark"] body {
  background:
    radial-gradient(
      circle at top left,
      color-mix(in srgb, var(--accent) 8%, transparent) 0%,
      transparent 28%
    ),
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--secondary) 7%, transparent) 0%,
      transparent 24%
    ),
    var(--paper);
}

html[data-theme="dark"] a:hover {
  color: var(--ink);
}

html[data-theme="dark"] .theme-switcher {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .concept {
  background: var(--accent-light);
}

html[data-theme="dark"] .analogy {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--secondary) 18%, var(--surface-1)) 0%,
    var(--surface-1) 100%
  );
}

html[data-theme="dark"] .further-reading {
  background: var(--surface-1);
  border: 1px solid var(--cloud);
  border-radius: 8px;
  padding: 1.5rem;
}

html[data-theme="dark"] .interface-diagram,
html[data-theme="dark"] .demo-container,
html[data-theme="dark"] .walkthrough,
html[data-theme="dark"] .example,
html[data-theme="dark"] .pipeline,
html[data-theme="dark"] .skill-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .confidence-meter,
html[data-theme="dark"] .checklist,
html[data-theme="dark"] .flow-diagram,
html[data-theme="dark"] .example-card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .claude-msg,
html[data-theme="dark"] .idea-card,
html[data-theme="dark"] .try-card,
html[data-theme="dark"] .req-item,
html[data-theme="dark"] .move-card,
html[data-theme="dark"] table.comparison,
html[data-theme="dark"] .branch-explanation {
  background: var(--surface-1);
  border-color: var(--cloud);
}

html[data-theme="dark"] .try-card .example-prompt,
html[data-theme="dark"] .move-card .example,
html[data-theme="dark"] .meter-bar-track {
  background: var(--surface-3);
}

html[data-theme="dark"] .flow-step {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--cloud));
  color: color-mix(in srgb, var(--accent) 78%, white 22%);
}

html[data-theme="dark"] .flow-step.action {
  border-color: color-mix(in srgb, var(--tip) 40%, var(--cloud));
  color: color-mix(in srgb, var(--tip) 78%, white 22%);
}

html[data-theme="dark"] .flow-step.you,
html[data-theme="dark"] .conversation .approval {
  border-color: color-mix(in srgb, var(--secondary) 45%, var(--cloud));
  color: color-mix(in srgb, var(--secondary) 72%, white 28%);
}

html[data-theme="dark"] .demo-tab {
  background: var(--surface-1);
}

html[data-theme="dark"] .branch-btn.reset {
  background: var(--surface-3);
}

html[data-theme="dark"] .prompt-card .prompt-example {
  background: var(--terminal-bg-2);
}

html[data-theme="dark"] .comparison tr:hover {
  background: var(--surface-2);
}

html[data-theme="dark"] .check-mark {
  background: var(--surface-1);
}

html[data-theme="dark"] .tip {
  background: color-mix(in srgb, var(--tip) 22%, var(--surface-1));
}

html[data-theme="dark"] .tip-label {
  color: color-mix(in srgb, var(--tip) 72%, white 28%);
}

html[data-theme="dark"] .before {
  background: var(--surface-1);
  border-color: var(--cloud);
}

html[data-theme="dark"] .concept,
html[data-theme="dark"] .story,
html[data-theme="dark"] .user-says,
html[data-theme="dark"] .diagram-box.secondary {
  background: var(--surface-2);
}

html[data-theme="dark"] .story h4 {
  color: var(--secondary-fg);
}

html[data-theme="dark"] .diagram-box.secondary {
  border-color: var(--cloud);
}

html[data-theme="dark"] .code-danger {
  background: var(--terminal-bg);
  color: var(--terminal-ink);
}

html[data-theme="dark"] .code-danger .comment {
  color: var(--terminal-comment);
}

html[data-theme="dark"] .code-danger-label {
  background: color-mix(in srgb, var(--warn) 20%, transparent);
}

html[data-theme="dark"] .tag-concepts {
  background: color-mix(in srgb, var(--navy) 20%, var(--surface-1));
  color: var(--navy);
}

html[data-theme="dark"] .tag-tutorial {
  background: color-mix(in srgb, var(--sage) 20%, var(--surface-1));
  color: var(--sage);
}

html[data-theme="dark"] .tag-reference {
  background: color-mix(in srgb, var(--rust) 20%, var(--surface-1));
  color: var(--rust);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .container {
    padding: 2rem 1.25rem;
  }

  .theme-switcher {
    top: 0.75rem;
    right: 0.75rem;
  }

  .theme-switcher button {
    padding: 0.4rem 0.65rem;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  .diagram-flow {
    flex-direction: column;
  }

  .diagram-arrow {
    transform: rotate(90deg);
  }
}