:root {
    /* YC brand, carried over from the entrance: ivory paper, ink, one wine
       accent for actions, denim for structure. Dark theme is Orbit's dusk. */
    --bg: #F4EEE3;
    --card-bg: rgba(253, 251, 246, 0.97);
    --card-border: rgba(26, 26, 46, 0.09);
    --text: #1A1A2E;
    /* Three tiers, all clearing 4.5:1 on --bg. */
    --text-secondary: #474757;
    --text-muted: #626270;
    --pink-light: #F5E1E0;
    --pink: #D98A93;
    --pink-dark: #B23A48;
    --cream: #FBF1DF;
    --cream-dark: #E7C28A;
    --lavender: #ECE6F0;
    --lavender-dark: #9C8BB0;
    --mint: #E1EEE4;
    --mint-dark: #6FA383;
    --sky: #E1EAF3;
    --sky-dark: #6E97C2;
    --peach: #F8E7D6;
    --peach-dark: #D69A6A;
    --rose: #F6DEDC;
    --rose-dark: #C0453F;
    --orbit-ice: #bdf1ff;
    --orbit-blue: #8fb6ff;
    --orbit-ink: #172033;
    --connection-path: rgba(26, 26, 46, 0.22);
    --connection-primary: rgba(178, 58, 72, 0.55);
    --connection-secondary: rgba(59, 110, 165, 0.42);
    --connection-project: rgba(59, 110, 165, 0.5);
    --connection-outreach: rgba(166, 112, 62, 0.46);
    --connection-muted: 0.045;
    --shadow: 0 2px 16px rgba(60, 40, 30, 0.05);
    --shadow-hover: 0 8px 32px rgba(60, 40, 30, 0.1);
    --shadow-card: 0 4px 20px rgba(60, 40, 30, 0.06);
    --sidebar-w: 248px;
    --topbar-h: 64px;

    /* --- Control system: one surface/hairline/elevation vocabulary for all chrome --- */
    --chrome-bg: rgba(250, 246, 238, 0.86);
    --surface: rgba(253, 251, 246, 0.94);
    --surface-solid: #FDFBF6;
    --surface-sunken: rgba(26, 26, 46, 0.05);
    --surface-hover: rgba(26, 26, 46, 0.05);
    --surface-thumb: #FDFBF6;
    --hairline: rgba(26, 26, 46, 0.1);
    --hairline-soft: rgba(26, 26, 46, 0.06);
    --accent: #B23A48;
    /* Accent text on an accent tint needs the deeper wine to clear 4.5:1. */
    --accent-strong: #8E2C3A;
    --accent-soft: rgba(178, 58, 72, 0.09);
    --ring: rgba(178, 58, 72, 0.42);
    --brand-fill: #B23A48;
    --brand-hover: #9E3140;
    --brand-edge: #7A2331;
    --on-brand: #FFF9F6;
    --available: #3F9A6B;
    --grid-line: rgba(26, 26, 46, 0.05);
    --region-fill: rgba(255, 255, 255, 0.42);
    --region-line: rgba(26, 26, 46, 0.08);
    --elev-1: 0 1px 2px rgba(60, 40, 30, 0.05), 0 2px 8px rgba(60, 40, 30, 0.05);
    --elev-2: 0 6px 20px rgba(60, 40, 30, 0.09);
    --elev-3: 0 20px 52px rgba(60, 40, 30, 0.16);
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --control-h: 34px;
    --control-h-sm: 28px;
    /* Editorial serif from the YC brand: Fraunces for Latin, the system Song
       face for Chinese. Titles and numbers only; body text stays sans. */
    --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../vendor/fonts/fraunces/fraunces-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('../vendor/fonts/fraunces/fraunces-latin-wght-italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Hues. Everything coloured by topic (regions, the navigator, icon tiles,
   Timeline stages, minimap plates) reads these, so a colour means the same
   thing everywhere. --hue decorates, --hue-ink carries text at AA on paper
   and on the wash, --hue-wash tints a surface. The light values are the
   Timeline's original stage colours. */
[data-tone='sky'] { --hue: #4A7FB5; --hue-ink: #2F5E8E; --hue-wash: rgba(214, 234, 248, 0.82); }
[data-tone='mint'] { --hue: #3A9B6B; --hue-ink: #2A7350; --hue-wash: rgba(212, 245, 224, 0.84); }
[data-tone='amber'] { --hue: #C9842B; --hue-ink: #8F5716; --hue-wash: rgba(253, 235, 208, 0.86); }
[data-tone='peach'] { --hue: #C9842B; --hue-ink: #8F5716; --hue-wash: rgba(255, 232, 212, 0.86); }
[data-tone='blush'] { --hue: #B23A48; --hue-ink: #8E2C3A; --hue-wash: rgba(245, 225, 224, 0.88); }
[data-tone='lilac'] { --hue: #7D6B8D; --hue-ink: #5E4C70; --hue-wash: rgba(232, 224, 240, 0.88); }
[data-tone='rose'] { --hue: #CB5A78; --hue-ink: #9F3754; --hue-wash: rgba(251, 229, 236, 0.9); }
body[data-theme='dark'] [data-tone='sky'] { --hue: #9DBDE0; --hue-ink: #B7D0EA; --hue-wash: rgba(157, 189, 224, 0.14); }
body[data-theme='dark'] [data-tone='mint'] { --hue: #94D0AD; --hue-ink: #AEDDC2; --hue-wash: rgba(148, 208, 173, 0.14); }
body[data-theme='dark'] [data-tone='amber'],
body[data-theme='dark'] [data-tone='peach'] { --hue: #EBC48C; --hue-ink: #F1D3A8; --hue-wash: rgba(235, 196, 140, 0.14); }
body[data-theme='dark'] [data-tone='blush'] { --hue: #E4A6AC; --hue-ink: #EBB5BC; --hue-wash: rgba(210, 141, 149, 0.16); }
body[data-theme='dark'] [data-tone='lilac'] { --hue: #CDB9DA; --hue-ink: #D9CAE3; --hue-wash: rgba(205, 185, 218, 0.14); }
body[data-theme='dark'] [data-tone='rose'] { --hue: #E89AB0; --hue-ink: #F0B4C5; --hue-wash: rgba(224, 138, 158, 0.16); }

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    user-select: none;
    transition: background-color 0.25s ease, color 0.25s ease;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* The static placeholder in index.html, painted while the scripts load. It
   fades in only after a beat, so a fast load goes straight to the entrance
   without a flash; render() replaces it. */
.boot-shell {
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 20px;
    opacity: 0;
    animation: boot-shell-in 0.4s ease 0.45s forwards;
}

.boot-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--pink-dark);
    color: #FFF9F6;
    font: 700 0.95rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 0 #7A2331, 0 10px 22px rgba(178, 58, 72, 0.22);
}

.boot-track {
    width: 112px;
    height: 2px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(26, 26, 46, 0.08);
}

.boot-track i {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--pink-dark);
    animation: boot-track 1.1s ease-in-out infinite;
}

@keyframes boot-shell-in { to { opacity: 1; } }
@keyframes boot-track { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

@media (prefers-reduced-motion: reduce) {
    .boot-track i { width: 100%; opacity: 0.45; animation: none; }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(26, 26, 46, 0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(26, 26, 46, 0.22); }

body[data-theme='dark'] {
    --bg: #251817;
    --card-bg: rgba(52, 36, 33, 0.97);
    --card-border: rgba(247, 242, 232, 0.1);
    --text: #F7F2E8;
    --text-secondary: #DCCCC4;
    --text-muted: #AC978F;
    --pink-light: #45282C;
    --pink: #E4A6AC;
    --pink-dark: #E4A6AC;
    --cream: #3A2C20;
    --cream-dark: #EBC48C;
    --lavender: #372B35;
    --lavender-dark: #CDB9DA;
    --mint: #26322A;
    --mint-dark: #94D0AD;
    --sky: #26303A;
    --sky-dark: #9DBDE0;
    --peach: #3D2B20;
    --peach-dark: #F0BF8E;
    --rose: #3F2526;
    --rose-dark: #FF9B8F;
    --connection-path: rgba(247, 242, 232, 0.22);
    --connection-primary: rgba(228, 166, 172, 0.6);
    --connection-secondary: rgba(157, 189, 224, 0.46);
    --connection-project: rgba(157, 189, 224, 0.5);
    --connection-outreach: rgba(235, 196, 140, 0.44);
    --connection-muted: 0.055;
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
    --shadow-hover: 0 22px 48px rgba(0, 0, 0, 0.34);
    --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.26);

    --chrome-bg: rgba(38, 25, 23, 0.86);
    --surface: rgba(56, 39, 36, 0.92);
    --surface-solid: #382724;
    --surface-sunken: rgba(0, 0, 0, 0.22);
    --surface-hover: rgba(247, 242, 232, 0.06);
    --surface-thumb: rgba(247, 242, 232, 0.12);
    --hairline: rgba(247, 242, 232, 0.12);
    --hairline-soft: rgba(247, 242, 232, 0.07);
    --accent: #D28D95;
    --accent-strong: #E4A6AC;
    --accent-soft: rgba(210, 141, 149, 0.16);
    --ring: rgba(210, 141, 149, 0.5);
    --brand-fill: #B23A48;
    --brand-hover: #C4485A;
    --brand-edge: #6E1F2B;
    --on-brand: #FFF9F6;
    --available: #6BC495;
    --grid-line: rgba(247, 236, 220, 0.045);
    --region-fill: rgba(255, 244, 230, 0.035);
    --region-line: rgba(247, 242, 232, 0.08);
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.22);
    --elev-2: 0 10px 26px rgba(0, 0, 0, 0.3);
    --elev-3: 0 26px 62px rgba(0, 0, 0, 0.44);
}

body[data-theme='dark'] #canvas-app {
    background:
        radial-gradient(ellipse 60% 50% at 70% 10%, rgba(255, 214, 170, 0.06), transparent 70%),
        var(--bg);
}

body[data-theme='dark'] .top-action-panel {
    background: var(--surface-solid);
    box-shadow: var(--elev-3), inset 0 1px rgba(255, 255, 255, 0.04);
}

body[data-theme='dark'] .stat-block,
body[data-theme='dark'] .modal-link-list p {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--hairline);
}

body[data-theme='dark'] .quick-link-row {
    border-bottom-color: var(--hairline);
}

body[data-theme='dark'] .modal-overlay {
    background: rgba(18, 10, 9, 0.72);
}

body[data-theme='dark'] .modal {
    background: var(--surface-solid);
    border-color: var(--hairline);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
}

body[data-theme='dark'] .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg, #382724, #3F2A2A 48%, #362826);
}

body[data-theme='dark'] .modal[data-modal-variant='logic'] .modal-header {
    background:
        linear-gradient(135deg, rgba(217, 138, 147, 0.18), rgba(40, 58, 78, 0.72) 48%, rgba(29, 58, 46, 0.56)),
        #382724;
}

body[data-theme='dark'] .modal-header::after {
    background: linear-gradient(90deg, rgba(217, 138, 147, 0.18), rgba(133, 193, 233, 0.18), rgba(184, 169, 201, 0.14));
}

body[data-theme='dark'] .modal-body {
    background: #33231F;
}

body[data-theme='dark'] .logic-snapshot,
body[data-theme='dark'] .logic-rule-grid div {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .modal-section p strong,
body[data-theme='dark'] .modal-section li strong {
    box-shadow: inset 0 -0.45em 0 rgba(217, 138, 147, 0.16);
}

body[data-theme='dark'] .modal-link-list p,
body[data-theme='dark'] .modal-tags {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .modal-stack-pill,
body[data-theme='dark'] .modal-tag,
body[data-theme='dark'] .project-tag {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
        var(--tone-bg);
    box-shadow: none;
}

body[data-theme='dark'] .tag-tone-sky {
    --tone-bg: rgba(93, 178, 235, 0.16);
    --tone-border: rgba(115, 195, 248, 0.3);
    --tone-text: #aad8ff;
}

body[data-theme='dark'] .tag-tone-mint {
    --tone-bg: rgba(83, 198, 141, 0.16);
    --tone-border: rgba(125, 225, 178, 0.3);
    --tone-text: #9ee5bd;
}

body[data-theme='dark'] .tag-tone-amber {
    --tone-bg: rgba(231, 169, 92, 0.15);
    --tone-border: rgba(246, 196, 128, 0.3);
    --tone-text: #f4c887;
}

body[data-theme='dark'] .tag-tone-blush {
    --tone-bg: rgba(210, 141, 149, 0.14);
    --tone-border: rgba(210, 141, 149, 0.32);
    --tone-text: #EBB5BC;
}

body[data-theme='dark'] .tag-tone-lilac {
    --tone-bg: rgba(185, 160, 235, 0.15);
    --tone-border: rgba(205, 186, 255, 0.3);
    --tone-text: #d5c8ff;
}


/* Headings break into even lines and paragraphs avoid a lone last word, so a
   Chinese title never ends on a single stranded character. */
:is(h1, h2, h3, h4, .region-title, .project-name, .modal-title) { text-wrap: balance; }
p { text-wrap: pretty; }