/* Evolving Flappy Bird module */
:root {
  --night: #07111f;
  --night-soft: #0b1728;
  --panel: rgba(11, 24, 41, 0.86);
  --paper: #edf7ff;
  --muted: #8aa2b8;
  --line: rgba(142, 190, 226, 0.16);
  --blue: #71c8ff;
  --blue-bright: #b7e7ff;
  --blue-dim: #246e9b;
  --green: #83e6ca;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 78% 0%, rgba(31, 96, 139, 0.13), transparent 32rem),
    var(--night);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button, select { color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.55rem clamp(1.2rem, 4vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}

.site-header p,
.eyebrow,
.section-index,
.panel-label,
.step-number,
.network-heading,
.stats span,
.speed-control > span,
.personal-best span {
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-header p { margin: 0; }
.back-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-decoration: none;
}
.back-link span:first-child { color: var(--blue); transition: transform 180ms ease; }
.back-link:hover span:first-child { transform: translateX(-3px); }

main { overflow: visible; }
.intro,
.lab,
.parameter-guide,
.explanation-panels,
.explanations,
.method-note {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding-right: clamp(1.2rem, 4vw, 4.5rem);
  padding-left: clamp(1.2rem, 4vw, 4.5rem);
}

.intro {
  display: grid;
  align-content: center;
  min-height: 72svh;
  padding-top: clamp(6rem, 11vw, 10rem);
  padding-bottom: clamp(6rem, 11vw, 10rem);
}
.eyebrow { margin: 0 0 1.5rem; color: var(--blue); }
h1, h2, h3, p { text-wrap: pretty; }
h1 {
  margin: 0;
  font-size: clamp(4rem, 10vw, 9.5rem);
  font-weight: 520;
  letter-spacing: -0.085em;
  line-height: 0.79;
}
.lede {
  max-width: 600px;
  margin: 3rem 0 0 auto;
  color: #aec2d3;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.7;
}

.lab {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}
.page-panel[hidden] { display: none; }
.page-tabs { position: sticky; z-index: 10; top: 0; display: flex; width: min(1440px, 100%); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 4.5rem); overflow-x: auto; border-bottom: 1px solid var(--line); background: rgba(7, 17, 31, 0.94); backdrop-filter: blur(12px); }
.page-tabs button { flex: 0 0 auto; padding: 1rem 1.1rem; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; }
.page-tabs button:first-child { padding-left: 0; }
.page-tabs button[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--paper); }
.section-heading {
  display: grid;
  grid-template-columns: minmax(90px, 0.32fr) 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.section-index { margin: 0.5rem 0 0; }
.section-heading h2,
.method-note h2 {
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  font-weight: 520;
  letter-spacing: -0.065em;
  line-height: 0.92;
}
.section-heading > div > p,
.method-note > div > p {
  max-width: 640px;
  margin: 1.5rem 0 0;
  color: #9fb5c7;
  font-size: 1rem;
  line-height: 1.7;
}

.mode-switch {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(6, 15, 27, 0.7);
}
.mode-button {
  min-height: 38px;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 0.78rem;
}
.mode-button.is-active { color: var(--night); background: var(--paper); }
.mode-button:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.simulation-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.7fr);
  border: 1px solid var(--line);
  background: rgba(5, 13, 24, 0.64);
}
.game-column { grid-column: 2; grid-row: 1; min-width: 0; border-left: 1px solid var(--line); }
.control-panel { grid-column: 1; grid-row: 1; }
.game-frame {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background: #081827;
}
#game-canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 520; touch-action: manipulation; }
.network-overlay { position: absolute; z-index: 2; top: 1rem; right: 1rem; width: min(45%, 390px); padding: 0.7rem; border: 1px solid rgba(142, 190, 226, 0.2); background: rgba(5, 14, 25, 0.82); backdrop-filter: blur(5px); pointer-events: none; }
.network-overlay #network-canvas { margin-top: 0.55rem; border: 0; background: transparent; }
.canvas-hint {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  margin: 0;
  color: rgba(196, 223, 241, 0.54);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: rgba(5, 14, 25, 0.76);
  backdrop-filter: blur(4px);
}
.game-overlay.is-hidden { display: none; }
.game-overlay p { margin: 0; font-size: 1.3rem; font-weight: 600; }
.game-overlay button { padding: 0.75rem 1.15rem; border: 1px solid var(--line); background: var(--paper); color: var(--night); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stats div { min-width: 0; padding: 1.2rem; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; }
.stats span { display: block; margin-bottom: 0.55rem; white-space: nowrap; }
.stats strong { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 520; font-variant-numeric: tabular-nums; }
.fitness-history { padding: 1.2rem; border-top: 1px solid var(--line); background: rgba(5, 14, 25, 0.7); }
.fitness-history-heading, .chart-legend {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#fitness-history-summary { color: #afc3d2; text-align: right; text-transform: none; }
#fitness-canvas { display: block; width: 100%; height: auto; margin-top: 0.8rem; }
.chart-legend { justify-content: flex-end; gap: 1.2rem; margin-top: 0.35rem; }
.chart-legend span::before { content: ""; display: inline-block; width: 12px; height: 1px; margin: 0 0.4rem 0.2rem 0; background: var(--blue); }
.chart-legend span:last-child::before { background: rgba(131, 230, 202, 0.72); }

.control-panel, .play-panel { padding: clamp(1.2rem, 2.8vw, 2.25rem); background: var(--panel); }
.control-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.control-heading p { margin: 0; }
.control-heading p + p { margin-top: 0.4rem; color: #8fa5b8; font-size: 0.75rem; line-height: 1.45; }
.run-indicator { display: flex; align-items: center; gap: 0.45rem; color: #a7bdcc; font-size: 0.72rem; white-space: nowrap; }
.run-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.run-indicator.is-paused i { background: var(--muted); box-shadow: none; }
.control-grid { display: grid; gap: 1.4rem; margin-top: 2.1rem; }
.architecture-field { grid-column: 1 / -1; }
.field-label, .choice-field legend { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; color: #bacbd9; font-size: 0.76rem; }
.field-label a, .choice-field legend a { color: var(--blue); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.56rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
select, input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #0b192a;
  font-size: 0.78rem;
}
input[type="text"] { color: var(--paper); }
input[aria-invalid="true"] { border-color: #ff8395; }
.field-note { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.68rem; line-height: 1.45; }
.field-note.is-error { color: #ff9aa8; }
.shape-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.shape-presets button { padding: 0.35rem 0.5rem; border: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 0.58rem; }
.shape-presets button:hover, .shape-presets button:focus-visible { border-color: rgba(113, 200, 255, 0.45); color: var(--blue); }
.choice-field { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; }
.choice-field legend { width: 100%; padding: 0; }
.choice-option { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 36px; padding: 0.35rem 0.45rem 0.35rem 0.6rem; border: 1px solid rgba(142, 190, 226, 0.13); background: rgba(5, 14, 25, 0.35); }
.choice-option:has(input:checked) { border-color: rgba(113, 200, 255, 0.48); background: rgba(113, 200, 255, 0.07); }
.choice-option label { display: flex; flex: 1; align-items: center; gap: 0.55rem; color: #9fb4c4; font-size: 0.68rem; cursor: pointer; }
.choice-option input { width: 11px; height: 11px; margin: 0; accent-color: var(--blue); }
.choice-option:has(input:checked) label { color: var(--paper); }
.mutation-controls { padding-top: 0.2rem; }
.mutation-controls > label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.55rem; color: #9fb4c4; font-size: 0.68rem; }
.mutation-controls input { width: 78px; min-height: 34px; padding: 0 0.5rem; border: 1px solid var(--line); border-radius: 0; color: var(--paper); background: #0b192a; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.7rem; }
.mutation-controls > p { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.64rem; line-height: 1.5; }
.tooltip { position: relative; display: inline-flex; }
.tooltip > button { display: grid; width: 20px; height: 20px; padding: 0; place-items: center; border: 1px solid rgba(142, 190, 226, 0.3); border-radius: 50%; color: var(--blue); background: transparent; font: 600 0.65rem/1 "SFMono-Regular", Consolas, monospace; }
.tooltip-content { position: absolute; z-index: 4; right: 0; bottom: calc(100% + 0.65rem); width: min(245px, 70vw); padding: 0.75rem 0.85rem; border: 1px solid rgba(142, 190, 226, 0.28); color: #c4d6e3; background: #0b192a; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); font-size: 0.7rem; font-weight: 400; line-height: 1.5; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 150ms ease, transform 150ms ease; }
.tooltip:hover .tooltip-content, .tooltip:focus-within .tooltip-content { opacity: 1; transform: translateY(0); }
.speed-control { display: flex; align-items: center; justify-content: space-between; margin-top: 1.7rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.speed-control div { display: flex; gap: 0.35rem; }
.speed-control button { width: 42px; height: 32px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 0.7rem; }
.speed-control button.is-active { border-color: rgba(113, 200, 255, 0.5); color: var(--blue-bright); background: rgba(113, 200, 255, 0.09); }
.actions { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; margin-top: 1.7rem; }
.primary-action, .secondary-action {
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 650;
}
.primary-action { border-color: var(--paper); color: var(--night); background: var(--paper); }
.primary-action:hover { background: var(--blue-bright); }
.secondary-action { color: var(--paper); background: transparent; }
.secondary-action:hover { border-color: rgba(183, 231, 255, 0.42); }
button:disabled { cursor: not-allowed; opacity: 0.42; }
.overfit-experiment { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.overfit-heading { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; }
#pattern-state { color: var(--green); text-align: right; }
.overfit-experiment > p { max-width: 720px; margin: 0.9rem 0 0; color: #98adbe; font-size: 0.82rem; line-height: 1.65; }
.overfit-simulation { margin-top: 1.5rem; border: 1px solid var(--line); background: rgba(5, 13, 24, 0.64); }
.overfit-game-frame { position: relative; min-height: 280px; overflow: hidden; background: #081827; }
#overfit-game-canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 520; }
.overfit-canvas-hint { position: absolute; right: 1rem; bottom: 0.75rem; margin: 0; color: rgba(196, 223, 241, 0.54); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.62rem; letter-spacing: 0.04em; }
.overfit-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.overfit-stats div { min-width: 0; padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.overfit-stats div:last-child { border-right: 0; }
.overfit-stats span { display: block; margin-bottom: 0.45rem; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.overfit-stats strong { font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 520; font-variant-numeric: tabular-nums; }
.overfit-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.overfit-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.overfit-toolbar .overfit-actions { margin-top: 0; }
.overfit-actions button { min-height: 42px; padding: 0.7rem 1rem; border: 1px solid var(--line); color: #c4d6e3; background: transparent; font-size: 0.72rem; }
.overfit-actions button:not(:disabled):hover { border-color: rgba(113, 200, 255, 0.5); color: var(--blue); }
.overfit-actions button:disabled { cursor: not-allowed; opacity: 0.38; }
.overfit-speed { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; }
.overfit-speed div { display: flex; gap: 0.3rem; }
.overfit-speed button { width: 42px; height: 34px; border: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 0.68rem; }
.overfit-speed button.is-active { border-color: rgba(113, 200, 255, 0.5); color: var(--blue-bright); background: rgba(113, 200, 255, 0.09); }
.overfit-experiment .overfit-result { color: var(--blue-bright); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.68rem; }
.overfit-todo { max-width: 960px; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.overfit-todo > p { margin: 0; color: var(--blue); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; }
.overfit-todo h4 { max-width: 660px; margin: 0.65rem 0 0; color: var(--blue-bright); font-size: 1rem; font-weight: 600; line-height: 1.4; }
.overfit-todo ul { display: grid; gap: 0.8rem; margin: 1.15rem 0 0; padding-left: 1.2rem; color: #91a8ba; }
.overfit-todo li { padding-left: 0.35rem; font-size: 0.8rem; line-height: 1.65; }
.overfit-todo li::marker { color: var(--blue); }

.network-view { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.network-heading { display: flex; justify-content: space-between; gap: 1rem; }
#network-canvas { display: block; width: 100%; height: auto; margin-top: 0.8rem; border: 1px solid rgba(142, 190, 226, 0.1); background: rgba(5, 14, 25, 0.58); }
.explanation-panels { padding-top: 1.25rem; padding-bottom: 2rem; }
.guide-panel { min-height: 360px; padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid var(--line); background: rgba(7, 17, 31, 0.66); scroll-margin-top: 4.5rem; }
.guide-panel[hidden] { display: none; }
.guide-panel > h3 { max-width: 760px; margin: 0; font-size: clamp(2rem, 4vw, 4rem); font-weight: 520; letter-spacing: -0.055em; line-height: 1; }
.guide-kicker { margin: 0 0 1rem; color: var(--blue); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; }
.guide-panel > .guide-intro { max-width: 840px; margin: 1.4rem 0 0; color: #9eb3c4; font-size: 1rem; line-height: 1.75; }
.io-layer-guide { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr); max-width: 1120px; margin-top: 2rem; border: 1px solid var(--line); background: rgba(5, 14, 25, 0.32); }
.io-layer-guide article { padding: clamp(1.4rem, 3vw, 2.2rem); }
.io-layer-guide article + article { border-left: 1px solid var(--line); }
.io-layer-guide > article > span { color: var(--blue); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.io-layer-guide h4 { margin: 0.6rem 0 0; color: var(--blue-bright); font-size: 1.05rem; font-weight: 600; }
.io-layer-guide p { margin: 1rem 0 0; color: #91a8ba; font-size: 0.84rem; line-height: 1.7; }
.io-layer-guide code { padding: 0.1rem 0.3rem; color: #c9ecff; background: rgba(113, 200, 255, 0.08); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.82em; }
.io-layer-guide dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 1.2rem 0 0; }
.io-layer-guide dl div { padding: 1rem 1.2rem 1rem 0; border-top: 1px solid var(--line); }
.io-layer-guide dl div:nth-child(even) { padding-right: 0; padding-left: 1.2rem; border-left: 1px solid var(--line); }
.io-layer-guide dt { color: #c9ecff; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.io-layer-guide dd { margin: 0.45rem 0 0; color: #91a8ba; font-size: 0.78rem; line-height: 1.6; }
.concept-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-top: 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.concept-pair article { padding: 1.25rem 1.5rem 1.4rem 0; }
.concept-pair article + article { padding-right: 0; padding-left: 1.5rem; border-left: 1px solid var(--line); }
.concept-pair span { color: var(--blue); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.concept-pair h4 { margin: 0.5rem 0 0; color: var(--blue-bright); font-size: 1rem; font-weight: 600; }
.concept-pair p { margin: 0.65rem 0 0; color: #91a8ba; font-size: 0.82rem; line-height: 1.65; }
.guide-detail { display: grid; grid-template-columns: minmax(260px, 0.78fr) minmax(360px, 1.22fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; margin-top: clamp(3rem, 6vw, 5rem); }
.guide-copy h4 { margin: 0; color: var(--blue-bright); font-size: 0.86rem; font-weight: 600; }
.guide-copy h4:not(:first-child) { margin-top: 2rem; }
.guide-copy p { margin: 0.7rem 0 0; color: #91a8ba; font-size: 0.84rem; line-height: 1.7; }
.guide-copy code { padding: 0.1rem 0.28rem; color: #c9ecff; background: rgba(113, 200, 255, 0.08); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.8em; }
.guide-visual { min-width: 0; margin: 0; padding: 1rem; border: 1px solid rgba(142, 190, 226, 0.14); background: #071321; }
.guide-animation-visual { padding-top: 0; }
.guide-animation-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.guide-animation-controls > span { margin-right: 0.35rem; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; }
.guide-animation-controls button { min-height: 34px; padding: 0.45rem 0.7rem; border: 1px solid var(--line); color: var(--muted); background: transparent; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.65rem; }
.guide-animation-controls button[aria-pressed="true"] { border-color: rgba(113, 200, 255, 0.5); color: var(--blue-bright); background: rgba(113, 200, 255, 0.09); }
.guide-animation-controls button:hover { border-color: rgba(113, 200, 255, 0.42); color: var(--paper); }
.guide-visual canvas { display: block; width: 100%; height: auto; }
.guide-visual figcaption { margin-top: 0.8rem; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.58rem; line-height: 1.5; }
.guide-formula { display: inline-block; margin: 2rem 0 0; padding: 0.9rem 1rem; border: 1px solid rgba(113, 200, 255, 0.28); color: var(--blue-bright); background: rgba(113, 200, 255, 0.06); font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(0.72rem, 1.5vw, 0.95rem); }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 3rem; background: var(--line); }
.guide-grid > div { padding: 1.5rem; background: #091524; }
.guide-grid h4 { margin: 0; color: var(--blue-bright); font-size: 0.82rem; font-weight: 600; }
.guide-grid p { margin: 0.8rem 0 0; color: #91a8ba; font-size: 0.8rem; line-height: 1.65; }
.fitness-formula { display: inline-block; margin: 2rem 0 0; padding: 0.9rem 1rem; border: 1px solid rgba(113, 200, 255, 0.28); color: var(--blue-bright); background: rgba(113, 200, 255, 0.06); font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(0.8rem, 1.5vw, 1rem); }

.play-panel { display: flex; flex-direction: column; justify-content: center; }
.play-panel[hidden] { display: none; }
.play-panel h3 { margin: 1rem 0 0; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 530; letter-spacing: -0.045em; line-height: 1.05; }
.play-panel > p:not(.panel-label) { margin: 1.2rem 0 2rem; color: #9eb4c5; font-size: 0.9rem; line-height: 1.7; }
kbd { padding: 0.2rem 0.4rem; border: 1px solid var(--line); color: var(--paper); background: rgba(255,255,255,0.05); font-family: inherit; }
.personal-best { display: flex; align-items: end; justify-content: space-between; margin-top: 2.3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.personal-best strong { color: var(--blue); font-size: 2.3rem; font-weight: 520; }

.explanations { padding-top: clamp(6rem, 10vw, 10rem); padding-bottom: clamp(6rem, 10vw, 10rem); }
.explanation-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(300px, 1.2fr);
  min-height: 390px;
  margin-top: -1px;
  border: 1px solid var(--line);
}
.explanation-card.reverse { grid-template-columns: minmax(300px, 1.2fr) minmax(260px, 0.8fr); }
.explanation-card.reverse .step-copy { grid-column: 2; }
.explanation-card.reverse .selection-animation { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line); border-left: 0; }
.step-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 4.5vw, 4.5rem); }
.step-number { margin: 0 0 1.5rem; color: var(--blue); }
.step-copy h3 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.6rem); font-weight: 520; letter-spacing: -0.06em; line-height: 0.98; }
.step-copy > p:last-child { max-width: 510px; margin: 1.5rem 0 0; color: #9eb3c4; font-size: 0.94rem; line-height: 1.72; }

.variation-animation, .selection-animation, .crossover-animation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: radial-gradient(circle at 50% 50%, rgba(39, 112, 158, 0.12), transparent 60%);
}
.variation-animation { gap: clamp(1.3rem, 4vw, 4rem); }
.mini-network { position: relative; width: 88px; height: 150px; animation: networkPulse 3.6s infinite ease-in-out; }
.mini-network:nth-child(2) { animation-delay: -1.2s; }
.mini-network:nth-child(3) { animation-delay: -2.4s; }
.mini-network::before, .mini-network::after { content: ""; position: absolute; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(transparent, rgba(113,200,255,.3), transparent); transform: rotate(28deg); left: 44px; }
.mini-network::after { transform: rotate(-28deg); }
.mini-network i { position: absolute; left: 0; width: 8px; height: 8px; border: 1px solid var(--blue); border-radius: 50%; background: var(--night-soft); }
.mini-network i:nth-child(1) { top: 15px; }.mini-network i:nth-child(2) { top: 48px; }.mini-network i:nth-child(3) { top: 91px; }.mini-network i:nth-child(4) { top: 126px; }
.mini-network b { position: absolute; top: 70px; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 16px var(--blue); }

.selection-animation { flex-direction: column; gap: 1.2rem; padding: 3rem; }
.fitness-row { display: flex; align-items: center; width: min(420px, 100%); gap: 1rem; opacity: 0.55; }
.fitness-row::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid var(--muted); border-radius: 50%; }
.fitness-row span { width: var(--fitness); height: 5px; background: #467793; animation: fitnessGrow 3s infinite alternate ease-in-out; }
.fitness-row i { margin-left: auto; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.66rem; font-style: normal; }
.fitness-row.selected { opacity: 1; }
.fitness-row.selected::before { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.fitness-row.selected span { background: var(--blue); }

.crossover-animation { flex-direction: column; gap: 1.35rem; }
.chromosome { display: flex; gap: 5px; }
.chromosome i { width: clamp(24px, 4vw, 42px); height: 18px; background: #1b608d; }
.chromosome.parent-b i { background: #78c9dc; }
.chromosome.child i { animation: geneSwap 3.5s infinite steps(1); }
.chromosome.child i:nth-child(odd) { background: #1b608d; }
.chromosome.child i:nth-child(even) { background: #78c9dc; }
.chromosome.child i:last-child { background: var(--green); box-shadow: 0 0 12px rgba(131, 230, 202, 0.5); }
.merge-line { width: 1px; height: 35px; background: linear-gradient(var(--blue), transparent); }

.method-note {
  display: grid;
  grid-template-columns: minmax(90px, 0.32fr) 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  padding-top: clamp(5rem, 8vw, 8rem);
  padding-bottom: clamp(6rem, 10vw, 10rem);
  border-top: 1px solid var(--line);
}
.signal-flow { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; color: #bfd1df; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.signal-flow i { width: clamp(20px, 7vw, 90px); height: 1px; background: linear-gradient(90deg, var(--blue), transparent); }

@keyframes networkPulse { 0%, 70%, 100% { opacity: .42; transform: translateY(0); } 18%, 45% { opacity: 1; transform: translateY(-4px); } }
@keyframes fitnessGrow { from { transform: scaleX(.82); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes geneSwap { 0%, 48% { filter: brightness(.8); } 50%, 100% { filter: brightness(1.4); } }
@media (max-width: 960px) {
  .simulation-shell { grid-template-columns: 1fr; }
  .control-panel { grid-column: 1; grid-row: 1; }
  .game-column { grid-column: 1; grid-row: 2; border-bottom: 0; border-left: 0; border-top: 1px solid var(--line); }
  .control-grid { grid-template-columns: repeat(2, 1fr); }
  .explanation-card, .explanation-card.reverse { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .site-header p { display: none; }
  .intro { min-height: 62svh; }
  .lede { margin-left: 0; }
  .section-heading, .method-note { grid-template-columns: 1fr; gap: 1.4rem; }
  .section-heading { margin-bottom: 3rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .control-grid { grid-template-columns: 1fr; }
  .network-overlay { top: 0.6rem; right: 0.6rem; width: 58%; padding: 0.45rem; }
  .network-overlay .network-heading span:first-child { display: none; }
  .guide-grid { grid-template-columns: 1fr; }
  .io-layer-guide { grid-template-columns: 1fr; }
  .io-layer-guide article + article { border-top: 1px solid var(--line); border-left: 0; }
  .io-layer-guide dl { grid-template-columns: 1fr; }
  .io-layer-guide dl div:nth-child(even) { padding-right: 0; padding-left: 0; border-left: 0; }
  .concept-pair { grid-template-columns: 1fr; }
  .concept-pair article { padding-right: 0; }
  .concept-pair article + article { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .guide-detail { grid-template-columns: 1fr; }
  .overfit-stats { grid-template-columns: repeat(2, 1fr); }
  .overfit-stats div:nth-child(2) { border-right: 0; }
  .overfit-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .overfit-toolbar { align-items: stretch; flex-direction: column; }
  .overfit-speed { justify-content: space-between; }
  .explanation-card, .explanation-card.reverse { grid-template-columns: 1fr; }
  .explanation-card.reverse .step-copy { grid-column: 1; }
  .explanation-card.reverse .selection-animation { grid-column: 1; grid-row: 2; }
  .variation-animation, .selection-animation, .crossover-animation { min-height: 270px; border-top: 1px solid var(--line); border-left: 0; }
  .explanation-card.reverse .selection-animation { border-right: 0; }
  .signal-flow { gap: 0.6rem; font-size: 0.57rem; }
  .canvas-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}