:root {
    --bg: #0e1013;
    --panel: #171a20;
    --panel-2: #1d212a;
    --line: #2b2f36;
    --ink: #e7ecf3;
    --muted: #8b95a4;
    --accent: #4dabf7;
    --go: #40c057;
    --warn: #fab005;
    --danger: #fa5252;
    --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
}

.app { max-width: 1280px; margin: 0 auto; padding: 16px; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
h1 { font-size: 22px; margin: 0; font-weight: 700; }
.topbar h1:focus { outline: none; }
.brand { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; }
.brand .sub { margin: 0; color: var(--muted); font-weight: 400; font-size: 14px; }
.learn a { color: var(--accent); }

.engine-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 4px 4px 12px;
}
.engine-label { font-size: 12px; color: var(--muted); display: flex; align-items: baseline; gap: 6px; }
.engine-label b { color: var(--accent); font-size: 13px; }
.engine-sub { color: var(--muted); font-size: 11px; }

.status {
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
}
.status-running { color: var(--go); border-color: var(--go); }
.status-paused { color: var(--warn); border-color: var(--warn); }
.status-solved { color: var(--accent); border-color: var(--accent); }
.status-idle { color: var(--muted); }

.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .grid { grid-template-columns: 1fr; }
}

/* Board column */
.board-col {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    min-width: 0;
}
.controls { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pause-note { color: var(--go); font-size: 12px; margin: -4px 0 10px; }

/* Empty state — no population loaded yet: a single centred column for one grid column */
.grid.grid-empty { grid-template-columns: minmax(0, 480px) 380px; justify-content: center; }
@media (max-width: 900px) { .grid.grid-empty { grid-template-columns: 1fr; } }
.board-col.empty { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.empty-state { text-align: center; max-width: 380px; padding: 28px 8px; }
.empty-state .empty-icon { font-size: 46px; line-height: 1; margin-bottom: 12px; }
.empty-state h2 { margin: 0 0 8px; font-size: 18px; }
.empty-state p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
.empty-controls { justify-content: center; margin-bottom: 0; }

.board-caption { color: var(--muted); font-size: 12px; margin-bottom: 6px; min-height: 16px; overflow-wrap: anywhere; }
.board-caption b { color: var(--accent); }
.canvas-wrap {
    background: #14171c;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px;
    display: flex;
    justify-content: center;
    min-height: 200px;
}
canvas { display: block; max-width: 100%; image-rendering: auto; }

.net-wrap {
    margin-top: 12px;
    background: #14171c;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 10px 10px;
}
.net-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
}
.net-legend { display: flex; align-items: center; gap: 6px; }
.net-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.net-legend .dot.pos { background: #40c057; }
.net-legend .dot.neg { background: #4dabf7; }
#net, #chart { display: block; width: 100%; }
.net-wrap.chart-top { margin-top: 0; margin-bottom: 12px; }

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 14px;
}
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* let the grid track shrink so a large value wraps instead of overflowing the tile */
}
.stat-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Population management — save / load / delete grouped in one card */
.persist {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
}
.persist-head {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.persist-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* Load + Delete share the row evenly */
.persist-row > .filebtn, .persist-row > .btn-danger { flex: 1; justify-content: center; }
.txt {
    flex: 1;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    min-width: 0;
}
/* Feedback toast — floats over the page so it never shifts the layout (auto-dismisses) */
.toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    animation: toast-in .18s ease-out;
}
.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    flex: none;
}
.toast-ok { background: color-mix(in srgb, var(--go) 14%, var(--panel)); border-color: color-mix(in srgb, var(--go) 45%, var(--line)); color: var(--ink); }
.toast-ok .toast-icon { background: var(--go); color: #08240f; }
.toast-err { background: color-mix(in srgb, var(--danger) 14%, var(--panel)); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--ink); }
.toast-err .toast-icon { background: var(--danger); color: #2a0000; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* "Load from file" is a <label> wrapping a hidden <InputFile>, styled to match the buttons. */
.filebtn { display: inline-flex; align-items: center; text-align: center; }
.filebtn input[type="file"] { display: none; }
.filebtn.disabled { opacity: .45; cursor: not-allowed; }

/* Buttons */
.btn {
    background: var(--panel-2);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: filter .12s, border-color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-go { background: var(--go); color: #08240f; border-color: var(--go); }
/* The two consent-bar answers. Equal prominence is what the EDPB's dark-pattern guidance asks for,
   but equal *dullness* is not the same thing: two plain buttons left neither looking like an answer.
   Both are filled, identically, in the accent rather than the "go" green, so neither reads as the
   recommended one. */
.btn-choice { background: var(--accent); color: #06243b; border-color: var(--accent); }
.btn-start-icon { display: inline-block; margin-right: 7px; font-size: 13px; line-height: 1; }
.btn-warn { background: var(--warn); color: #2a2000; border-color: var(--warn); }
.btn-loop-detected { background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); animation: loop-alert 1.2s ease-in-out infinite; }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 16%, var(--panel-2)); border-color: var(--danger); }

@keyframes loop-alert { 50% { filter: brightness(1.14); } }

/* Config column */
.config-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* One-off offer to switch multi-threading on, a few generations into single-threaded training. */
.speed-hint {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}
.speed-hint p { margin: 0; flex: 1 1 260px; color: var(--muted); line-height: 1.45; font-size: 13px; }
.speed-hint strong { color: var(--ink); }
.speed-hint-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.config-panels { display: flex; flex-direction: column; gap: 10px; }
.config-footer { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 2px; }
.config-footer .btn { width: 100%; }
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: visible;
}
.panel > summary {
    cursor: pointer;
    padding: 11px 14px;
    font-weight: 700;
    list-style: none;
    user-select: none;
    background: var(--panel-2);
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::before { content: "▸ "; color: var(--muted); }
.panel[open] > summary::before { content: "▾ "; }
.panel-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.hint { color: var(--muted); font-size: 11.5px; margin: 0 0 2px; }

.field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
}
.field > label, .field > .field-label { color: var(--ink); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
/* Compact, conventional "info" icon with a Material-style floating tooltip. */
.info-button { position: relative; box-sizing: border-box; flex: 0 0 14px; display: inline-grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: var(--muted); font: 700 9px/1 system-ui, sans-serif; cursor: help; }
.info-button:hover, .info-button:focus-visible { color: var(--accent); outline: none; }
.info-tooltip { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 7px); width: min(260px, calc(100vw - 32px)); padding: 8px 10px; border-radius: 4px; background: #292d35; color: #f4f6fa; box-shadow: 0 4px 12px #0006; font: 12px/1.4 system-ui, sans-serif; font-weight: 400; text-align: left; white-space: normal; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; }
.info-tooltip::after { content: ""; position: absolute; top: 100%; left: 5px; border: 5px solid transparent; border-top-color: #292d35; }
.info-button:hover .info-tooltip, .info-button:focus-visible .info-tooltip { opacity: 1; transform: translateY(0); }
.field.readonly .val { color: var(--muted); }
.field input[type=number] {
    width: 68px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 13px;
    text-align: right;
}
.num-wrap { display: flex; align-items: center; gap: 6px; }
.range-wrap { display: flex; align-items: center; gap: 8px; }
.range-wrap input[type=range] { width: 150px; }
.num-wrap input[type=range] { width: 130px; }
.num-wrap .suffix { color: var(--muted); font-size: 12px; }
.field > input[type=range] { width: 150px; accent-color: var(--accent); }
.field input[type=range] {
    appearance: none;
    height: 18px;
    margin: 0;
    cursor: pointer;
    background: transparent;
}
.field input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 20%, var(--panel));
}
.field input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 15px;
    height: 15px;
    margin-top: -6px;
    border: 3px solid var(--panel-2);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, var(--line));
}
.field input[type=range]::-moz-range-track {
    height: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 20%, var(--panel));
}
.field input[type=range]::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--accent); }
.field input[type=range]::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: 3px solid var(--panel-2);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, var(--line));
}
.field input[type=range]:focus-visible { outline: none; }
.field input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.field input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.field select {
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 13px;
    min-width: 130px;
}
.field input[type=color] {
    width: 44px; height: 28px; padding: 0; border: 1px solid var(--line);
    border-radius: 6px; background: var(--panel-2); cursor: pointer;
}
.field .val { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.field input:disabled, .field select:disabled { opacity: .45; cursor: not-allowed; }

/* Toggle */
.toggle {
    width: 44px; height: 24px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--panel-2); position: relative; cursor: pointer; padding: 0;
    transition: background .15s;
}
.toggle .knob {
    position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--muted); transition: left .15s, background .15s;
}
.toggle.on { background: color-mix(in srgb, var(--go) 30%, var(--panel-2)); border-color: var(--go); }
.toggle.on .knob { left: 22px; background: var(--go); }
.toggle:disabled { opacity: .45; cursor: not-allowed; }

#blazor-error-ui {
    background: var(--warn); color: #2a2000; position: fixed; bottom: 0; left: 0; right: 0;
    padding: 10px 14px; display: none; z-index: 1000;
}

/* Consent is intentionally app-owned: no third-party script loads until acceptance. */
.privacy-dialog p { margin: 4px 0 0; color: var(--muted); line-height: 1.45; }
.consent-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.consent-buttons { display: flex; gap: 9px; width: 100%; }
.consent-buttons .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.consent-actions a, .privacy-page a { color: var(--accent); }
.privacy-settings-button {
    position: fixed; z-index: 1050; right: 12px; bottom: 12px;
    color: var(--muted); background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 10px; cursor: pointer; font-size: 12px;
}
/* The first-visit question: a bar along the bottom, not a dialog, so nothing behind it is blocked.
   Above the Manage-cookies pill (which it replaces while shown), below the settings dialog. */
.consent-bar {
    position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px;
    padding: 12px 52px 12px 18px;
    background: var(--panel); border-top: 1px solid var(--accent); box-shadow: 0 -8px 28px #0008;
}
.consent-bar-text { flex: 0 1 680px; min-width: 0; }
.consent-bar-text p { margin: 3px 0 0; color: var(--muted); line-height: 1.45; font-size: 13px; }
.consent-bar-text a { color: var(--accent); }
.consent-bar-buttons { display: flex; gap: 9px; flex: none; }
.consent-bar-buttons .btn { min-width: 104px; }
.consent-bar-close {
    position: absolute; top: 8px; right: 10px; width: 32px; height: 32px;
    border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 15px; cursor: pointer;
}
.consent-bar-close:hover { color: var(--ink); }
@media (max-width: 520px) {
    .consent-bar { padding: 12px 14px; }
    .consent-bar-text { padding-right: 30px; }
    .consent-bar-buttons { width: 100%; }
    .consent-bar-buttons .btn { flex: 1 1 0; min-width: 0; }
}
/* First-run tour (snakeTour.js): above the consent bar, below the privacy dialog. The shield panels catch
   clicks on the dimmed page; the dim path (one cut-out per highlight) darkens everything else. */
.tour-dim { position: fixed; z-index: 1150; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tour-dim path { fill: #000a; }
.tour-shield { position: fixed; z-index: 1150; }
.tour-ring {
    position: fixed; z-index: 1151; pointer-events: none;
    border: 2px solid var(--go); border-radius: var(--radius);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--go) 30%, transparent);
    transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.tour-card {
    position: fixed; z-index: 1152; width: min(300px, calc(100vw - 24px));
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; box-shadow: 0 16px 40px #000b;
    transition: left .2s ease, top .2s ease;
}
.tour-count { margin: 0 0 4px; color: var(--go); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tour-title { margin: 0 0 6px; font-size: 16px; }
.tour-body { margin: 0; color: var(--muted); line-height: 1.5; font-size: 13px; white-space: pre-line; }
/* An overview step has no target: no ring, and the first shield panel dims the whole page instead. */
/* A first-time visitor usually still has the consent bar open, and it would cover the bottom of
   whatever the tour points at. Nothing is measured until Accept, so it steps aside for the tour's
   few seconds and comes back, unanswered, when the tour closes. */
.tour-open .consent-bar, .tour-open .privacy-settings-button { visibility: hidden; }
.tour-overview .tour-ring, .tour-ring[hidden] { display: none; }
/* The opening card: numbered steps, each with a grey hint. */
.tour-card { animation: tour-in .22s ease-out; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.tour-overview .tour-card { width: min(440px, calc(100vw - 24px)); padding: 26px 26px 20px; }
.tour-overview .tour-title { font-size: 23px; margin-bottom: 4px; }
.tour-overview .tour-body { font-size: 15px; }
.tour-body:empty { display: none; }
.tour-back:disabled { visibility: hidden; }
.tour-overview .tour-actions { margin-top: 20px; }
.tour-overview .tour-actions .btn { font-size: 14px; padding: 9px 16px; }
.tour-stages { display: flex; flex-direction: column; gap: 20px; margin: 20px 0 8px; padding: 0; list-style: none; }
.tour-stages[hidden] { display: none; }
.tour-stage { display: flex; align-items: center; gap: 14px; }
.tour-stage-n {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: color-mix(in srgb, var(--go) 12%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--go) 45%, var(--line));
    color: var(--go); font-size: 15px; font-weight: 700;
}
.tour-stage-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 16px; line-height: 1.35; }
.tour-stage-text small { color: var(--muted); font-size: 13px; }
.tour-overview .tour-shield:first-child { inset: 0 !important; width: auto !important; height: auto !important; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.tour-nav { display: flex; gap: 8px; }
.tour-skip { background: none; border-color: transparent; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
    .tour-ring, .tour-card { transition: none; animation: none; }
}
.privacy-backdrop {
    position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center;
    padding: 16px; background: #000b;
}
.privacy-dialog { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.privacy-dialog:focus { outline: none; }
.privacy-dialog h2 { margin: 0 0 8px; }
.privacy-dialog .consent-actions { margin-top: 16px; }
.consent-options { display: grid; gap: 10px; margin-top: 16px; }
.consent-option {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
.consent-option p { margin: 4px 0 0; color: var(--muted); line-height: 1.4; }
.consent-option input { width: 20px; height: 20px; flex: none; accent-color: var(--go); }
.consent-always { color: var(--go); font-size: 12px; font-weight: 700; white-space: nowrap; }
.privacy-page { max-width: 760px; margin: 0 auto; padding: 28px 18px 70px; line-height: 1.6; }
.privacy-page h1, .privacy-page h2 { margin-top: 1.4em; }
.learn-article h3 { margin-top: 1.1em; font-size: 15px; }
.learn-article .lead { font-size: 17px; color: var(--ink); }
.learn-article .faq { margin-top: 0.4em; }
.learn-cta { margin: 22px 0 8px; }
/* The CTA is an <a> styled as a button; override .privacy-page's link colour + underline. */
.learn-cta a.btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.learn-article a.btn-go { color: #08240f; }

/* Inline SVG illustrations (network + vision), reused on the learn page and the homepage. */
.diagram-svg { display: block; width: 100%; height: auto; }
.diagram-svg text { font-family: inherit; }
.learn-figure { margin: 22px 0 8px; }
.learn-figure figcaption { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 8px; }
/* /learn's diagrams come in a wide and a tall layout; phones get the tall one, so their text stays page-sized. */
.diagram-pair .tall { display: none; }
@media (max-width: 560px) {
    .diagram-pair .wide { display: none; }
    .diagram-pair .tall { display: block; max-width: 380px; }
}
/* /learn's list of its sections, each linking to its heading. */
.learn-toc {
    margin: 22px 0 8px;
    padding: 14px 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.learn-toc p { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.learn-toc ol { margin: 0; padding-left: 22px; }
.learn-toc li { margin: 3px 0; }
.learn-toc a { text-decoration: none; }
.learn-toc a:hover { text-decoration: underline; }
.learn-article h2[id] { scroll-margin-top: 16px; }
/* Worked examples: blocks scroll sideways on their own, so a long line never widens the page. */
.learn-article pre {
    margin: 14px 0 18px;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
}
.learn-article code { font-family: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace; }
.learn-article :not(pre) > code {
    padding: 1px 5px;
    background: var(--panel-2);
    border-radius: 4px;
    font-size: 0.92em;
}

/* Demo: one trained snake on the board beside its live network. */
.demo {
    max-width: 1040px;
    margin: 34px auto 0;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--panel);
}
.demo-heading { max-width: 720px; margin-bottom: 18px; }
.demo-heading h1 { margin: 0 0 8px; font-size: 24px; }
.demo-heading p:last-child { color: var(--muted); line-height: 1.55; margin-bottom: 0; }
.demo-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.demo-tab {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    flex: 1 1 140px; max-width: 240px; min-width: 0; padding: 10px 16px;
    background: var(--panel-2); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    font: inherit; text-align: left; cursor: pointer;
}
.demo-tab:hover { border-color: var(--accent); }
.demo-tab.active { background: color-mix(in srgb, var(--accent) 20%, var(--panel-2)); border-color: var(--accent); }
.demo-tab-name { font-weight: 700; }
.demo-tab-sub { color: var(--muted); font-size: 12px; }
.demo-about { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 14px; min-height: 1.5em; }
.demo-error { color: var(--danger); }
.demo .controls .btn { text-decoration: none; }
.brand .h1-like { margin: 0; font-size: 22px; font-weight: 700; }
.brand .h1-like a { color: inherit; text-decoration: none; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.demo-grid .net-wrap { margin-top: 22px; }
.demo-speed { margin-top: 12px; }
@media (max-width: 800px) {
    .demo { padding: 22px 16px; margin-top: 20px; }
    .demo-grid { grid-template-columns: 1fr; }
    .demo-grid .net-wrap { margin-top: 0; }
}

/* Dedicated setup screen shown between the landing page and the simulation. */
.population-setup {
    max-width: 1040px;
    margin: 34px auto 0;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: var(--panel);
}
.setup-heading { max-width: 720px; }
.setup-heading h2 { margin: 0 0 8px; font-size: 24px; }
.setup-heading p:last-child { color: var(--muted); line-height: 1.55; margin-bottom: 0; }
.setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 26px;
}
.setup-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-2);
}
.setup-card h3 { margin: 0 0 4px; font-size: 15px; }
.setup-card .field { grid-template-columns: minmax(0, 1fr) auto; }
.setup-card .field input[type=range] { width: 110px; }
.setup-card .field select { min-width: 112px; max-width: 150px; }
.setup-advanced { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.setup-advanced > summary { cursor: pointer; padding: 12px 16px; font-size: 13px; font-weight: 700; }
.setup-advanced[open] > summary { border-bottom: 1px solid var(--line); }
.setup-advanced > .setup-card { border: 0; border-radius: 0; background: transparent; }
.setup-memory {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 5%, var(--panel-2));
}
.setup-memory-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.setup-memory-head span { font-size: 13px; font-weight: 700; }
.setup-memory-head strong { color: var(--accent); font-size: 15px; }
.setup-memory p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.setup-memory-warn { border-color: color-mix(in srgb, var(--warn) 58%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--panel-2)); }
.setup-memory-warn .setup-memory-head strong { color: var(--warn); }
.setup-memory p.setup-problem { color: var(--warn); font-weight: 700; }
.setup-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }

/* Crawlable educational content below the interactive lab. */
.learn {
    margin-top: 42px;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 6%, var(--panel)), var(--panel) 35%);
    line-height: 1.65;
}
.learn h2 { margin: 0 0 10px; font-size: 20px; }
.learn p { color: var(--muted); }
.learn-heading { max-width: 780px; }
.learn-heading > p:last-child { font-size: 15px; margin-bottom: 0; }
.eyebrow {
    color: var(--go) !important;
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.learn-section { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.concepts-heading { max-width: 720px; }
.concepts-heading > p:last-child { margin-bottom: 0; }
.concept-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0 0;
}
.concept-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-2);
}
.concept-icon {
    display: block;
    color: var(--accent);
    font-size: 20px;
    margin-bottom: 12px;
}
.concept-card h3 { margin: 0; font-size: 15px; }
.concept-card p { margin: 7px 0 0; font-size: 13px; }
.experiments { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 32px; }
.experiments p { margin-bottom: 0; }
.experiments ul { margin: 0; padding-left: 20px; color: var(--muted); }
.experiments li + li { margin-top: 7px; }
.launch-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    align-items: center;
    gap: 32px;
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--go) 45%, var(--line));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--go) 7%, var(--panel-2));
}
.launch-card p:last-child { margin-bottom: 0; }
.launch-copy { min-width: 0; }
.launch-copy h2 { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.12; letter-spacing: -.025em; margin: 14px 0 20px; }
.launch-copy > p:not(.eyebrow) { max-width: 420px; margin-bottom: 24px; }
.launch-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.launch-illustration { min-width: 0; width: 100%; max-width: 380px; justify-self: center; margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transform: rotate(-2deg); }
.launch-board { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.launch-board-background { fill: var(--bg); }
.launch-grid-line { stroke: var(--line); stroke-width: 1; }
.launch-snake { stroke: var(--warn); }
.launch-snake-head { fill: var(--warn); }
.launch-snake-eye { fill: var(--bg); }
.launch-food { fill: var(--danger); }
.launch-illustration figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.btn-large { display: inline-flex; align-items: center; justify-content: center; min-width: 170px; padding: 12px 18px; }
.btn-population { min-width: 210px; padding: 15px 24px; font-size: 16px; }
/* A plain button that is really a link (e.g. "Watch trained snakes"): keep the button's colours,
   not the surrounding section's link styling. */
.btn.btn-link { color: var(--ink); text-decoration: none; }
/* Outline icons inside buttons (Tabler shapes, MIT), coloured per use. */
.btn-icon { width: 16px; height: 16px; margin-right: 8px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-icon.icon-go { color: var(--go); }
.btn-icon.icon-warn { color: var(--warn); }
.btn-icon.icon-accent { color: var(--accent); }
/* The way into /learn from the lab: in the top bar on every screen (and a button in the launch card). */
.topbar-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.topbar-link:hover { border-color: var(--accent); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { padding: 14px 2px; cursor: pointer; font-weight: 700; }
.faq details p { margin: -3px 2px 16px; max-width: 850px; }
.learn-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px 26px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}
.learn-footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    transition: color .12s, border-color .12s, background .12s;
}
.learn-footer a::before { content: "→"; color: var(--accent); font-weight: 700; }
.learn-footer a:hover { border-color: var(--accent); background: var(--panel-2); }

@media (max-width: 800px) {
    .setup-grid { grid-template-columns: 1fr; }
    .concept-cards { grid-template-columns: 1fr; }
    .experiments { grid-template-columns: 1fr; gap: 10px; }
    .launch-card { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 520px) {
    .toast { top: 12px; left: 12px; right: 12px; max-width: none; }
    .privacy-dialog .consent-buttons { flex-direction: column; }
    .population-setup { padding: 22px 16px; margin-top: 20px; }
    .setup-actions, .launch-actions { flex-direction: column; }
    .setup-actions .btn, .launch-actions .btn { width: 100%; }
    .launch-actions .btn { min-width: 0; }
    .setup-memory-head { align-items: flex-start; flex-direction: column; gap: 2px; }
    .num-field { grid-template-columns: 1fr; gap: 5px; }
    .num-field .num-wrap { justify-content: space-between; }
    .num-field .num-wrap input[type=range] { flex: 1; min-width: 0; }
    .learn { padding: 22px 18px; margin-top: 28px; }
}
@media (max-width: 420px) {
    .app { padding: 10px; }
    .board-col { padding: 10px; }
    .net-legend { flex-wrap: wrap; }
}