/* ==========================================================================
   BROKNERS — the one stylesheet.

   Every page loads this file and nothing else (plus the Bricolage Grotesque
   webfont). Tokens use a golden-ratio spacing and type scale; the Brokners
   identity (typo pink, the tilted N, Bricolage display headings) is baked
   into the tokens. Page-specific rules live in their own section below;
   there are no inline <style> blocks anywhere on the site.

   Sections:  1 tokens · 2 base · 3 layout · 4 nav · 5 footer
              6 landing/terminal components · 7 terminal controls
              8 documents (.doc) · 9 motion
   ========================================================================== */


/* 1. Tokens ------------------------------------------------------------- */

:root {
    /* spacing — golden ratio, fluid */
    --space-xs: clamp(0.5rem, 1vw, 0.618rem);
    --space-sm: clamp(0.809rem, 1.5vw, 1rem);
    --space-md: clamp(1.309rem, 2vw, 1.618rem);
    --space-lg: clamp(2.118rem, 3vw, 2.618rem);
    --space-xl: clamp(3.427rem, 4vw, 4.236rem);
    --space-2xl: clamp(4.236rem, 5vw, 5.236rem);
    --space-3xl: clamp(5.545rem, 6.5vw, 6.854rem);

    /* type scale — fluid */
    --text-xs: clamp(0.618rem, 0.8vw, 0.75rem);
    --text-sm: clamp(0.875rem, 1vw, 0.95rem);
    --text-base: clamp(1rem, 1.2vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.4vw, 1.309rem);
    --text-xl: clamp(1.309rem, 1.8vw, 1.618rem);
    --text-2xl: clamp(1.618rem, 2.5vw, 2.118rem);
    --text-3xl: clamp(2.618rem, 4vw, 3.427rem);
    --text-4xl: clamp(4.236rem, 6vw, 5.545rem);

    /* faces */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Bricolage Grotesque", var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* layout */
    --container-xl: 1280px;
    --container-padding: clamp(1rem, 4vw, 2.618rem);
    --measure: 72ch;                 /* reading width for documents */

    --radius-sm: clamp(0.25rem, 0.3vw, 0.309rem);
    --radius-md: clamp(0.5rem, 0.6vw, 0.618rem);
    --radius-lg: clamp(0.809rem, 1vw, 1rem);

    --transition-speed: 0.2s;

    /* light theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-card: #ffffff;
    --bg-hover: #f1f3f5;
    --nav-glass: rgba(255, 255, 255, 0.95);

    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-tertiary: #6c757d;

    --border-color: #dee2e6;
    --border-subtle: #e9ecef;

    --accent-primary: #d6336c;       /* typo pink */
    --accent-primary-hover: #a61e4d;

    --good: #16a34a;
    --bad: #dc2626;

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #262626;
    --bg-card: #1a1a1a;
    --bg-hover: #262626;
    --nav-glass: rgba(15, 15, 15, 0.95);

    --text-primary: #f5f5f5;
    --text-secondary: #d4d4d4;
    --text-tertiary: #a3a3a3;

    --border-color: #333333;
    --border-subtle: #262626;

    --accent-primary: #f06595;
    --accent-primary-hover: #f783ac;

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}


/* 2. Base ------------------------------------------------------------------ */

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

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.618;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

::selection {
    background: var(--accent-primary);
    color: #ffffff;
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 800;
}

h1 { font-size: var(--text-4xl); margin-bottom: var(--space-lg); }
h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); line-height: 1.3; }
h3 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
h4 { font-size: var(--text-xl);  margin-bottom: var(--space-sm); }

@media (max-width: 768px) {
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
}

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

.lead {
    font-size: var(--text-xl);
    color: var(--text-secondary);
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover { color: var(--accent-primary-hover); }

ul, ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

li {
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
}

code, pre {
    font-family: var(--font-mono);
    font-size: 0.88em;
}

code {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.08em 0.35em;
}

pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    overflow-x: auto;
    margin: var(--space-sm) 0;
}

pre code {
    background: none;
    border: none;
    padding: 0;
}

/* the wordmark: brokers, misspelled on purpose. The inserted N is the whole
   joke, so it is rendered as exactly that: a letter squeezed in later, in the
   wrong colour, at the wrong angle. Em-based, so it works at any size. */
.typo-n {
    display: inline-block;
    color: var(--accent-primary);
    transform: rotate(7deg) translateY(-0.08em);
    margin: 0 -0.02em;
}

/* the spellcheck squiggle: the misspelling is load-bearing, mark it as such */
.sic {
    text-decoration: underline wavy var(--bad);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: none;
}


/* 3. Layout ---------------------------------------------------------------- */
/* Every page, every section, every document sits inside .container. That is
   the only place horizontal page padding is defined. */

.container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.section {
    padding: var(--space-2xl) 0;
}

@media (max-width: 768px) {
    .section { padding: var(--space-xl) 0; }
}

.section-well {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* cards inside a well step down to the page ground so they still read as
   cards in dark mode, where --bg-card equals --bg-secondary */
.section-well .feature-card {
    background: var(--bg-primary);
}

/* a centred prose block that opens a section */
.section-intro {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-xl);
    line-height: 1.45; /* room for the wavy underline when the title wraps */
    text-decoration: underline wavy var(--accent-primary);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.3em;
    text-wrap: balance;
}

/* a short callout does not need a full section's padding */
.section:has(> .container > .research-banner) {
    padding: var(--space-lg) 0;
}

.page-header {
    padding: var(--space-2xl) 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .page-header { padding: var(--space-xl) 0; }
}

.page-subtitle {
    font-size: var(--text-xl);
    color: var(--text-tertiary);
    margin-top: var(--space-md);
}

/* tables: one skin, used by the landing page's invariants table and by every
   table inside a document */
.tablewrap {
    overflow-x: auto;
    margin: var(--space-lg) 0;
}

.table,
.doc table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th,
.doc th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
}

.table td,
.doc td {
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
    vertical-align: top;
    line-height: 1.618;
    color: var(--text-primary);
}

.table td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .table td:first-child { white-space: normal; }
}


/* 4. Nav -------------------------------------------------------------------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: var(--space-sm) 0;
    background-color: var(--nav-glass);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-speed) ease;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    min-height: 3.5rem;
}

.logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-xl);
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
}

.nav-links a {
    display: inline-block;
    padding: var(--space-xs) 0;
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent-primary);
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    transform: scale(1.05);
}

.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
}

.nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 1024px) {
    .nav-content { gap: var(--space-md); }
}

@media (max-width: 768px) {
    .logo { font-size: var(--text-lg); }

    .nav-burger { display: flex; }

    /* with the links hidden, space-between would strand the toggle mid-bar */
    .theme-toggle { margin-left: auto; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: var(--space-xs) var(--container-padding) var(--space-sm);
        font-size: var(--text-base);
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
    }

    .nav.nav-open .nav-links { display: flex; }

    .nav-links a {
        display: block;
        padding: var(--space-sm) 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .nav-links li:last-child a { border-bottom: none; }

    .nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
    .nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}


/* 5. Footer ------------------------------------------------------------------ */

.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: var(--space-2xl) 0 var(--space-lg);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(1.618rem, 4vw, 3.427rem);
    margin-bottom: var(--space-xl);
}

.footer-section h3,
.footer-section h4 {
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.footer-section p {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li { margin-bottom: var(--space-xs); }

.footer-section a {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.footer-section a:hover { color: var(--accent-primary); }

.footer-disclaimer {
    font-size: 0.7rem;
    line-height: 1.5;
    opacity: 0.9;
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.footer-bottom p {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    margin: 0;
}


/* 6. Landing + Terminal components ---------------------------------------- */

/* ticker tape */
.ticker {
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

.ticker-track {
    display: inline-block;
    padding: var(--space-xs) 0;
    animation: ticker-scroll 40s linear infinite;
}

.ticker-track span { margin-right: var(--space-xl); }

.ticker-track span::before {
    content: "◆";
    color: var(--accent-primary);
    margin-right: var(--space-xs);
    font-size: 0.7em;
}

/* hero */
.wordmark {
    font-size: clamp(3rem, 9vw, 5.5rem);
    letter-spacing: 0.02em;
    line-height: 1;
}

.brain-hero h1 { letter-spacing: 0.06em; }

/* the eyebrow is a quiet pill; the wordmark is the star. inline-block (not
   flex) so inline children like .sic wrap like a sentence on narrow screens */
.hero-eyebrow {
    display: inline-block;
    max-width: min(92%, 36rem);
    text-align: center;
    text-wrap: balance;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.7;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.35rem 0.95em 0.35rem 1.05em;
    margin-bottom: var(--space-md);
}

.hero-eyebrow::before {
    content: "\25C6";
    color: var(--accent-primary);
    font-size: 0.7em;
    margin-right: 0.55em;
    vertical-align: 0.15em;
}

/* hero rhythm: the wordmark's line box carries ~0.28em of empty font descent,
   so its bottom margin shaves that off and the visual gap above the subtitle
   equals the header's bottom padding at every viewport width */
.brain-hero .hero-eyebrow { margin-bottom: var(--space-lg); }
.brain-hero .wordmark { margin-bottom: calc(var(--space-2xl) - 0.28em); }
.brain-hero .page-subtitle { margin-top: 0; margin-bottom: 0; }

.hero-brain {
    display: inline-block;
    margin-left: var(--space-sm);
    animation: brain-bob 3s ease-in-out infinite;
}

/* callouts and notes */
.research-banner {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-secondary);
    line-height: 1.618;
}

.research-banner strong { color: var(--text-primary); }

.roster-note {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}

.roster-note + .features-grid { margin-top: 0; }

.features-grid + .roster-note {
    margin-top: var(--space-lg);
    margin-bottom: 0;
}

.muted {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-align: center;
}

.doc-links a { font-weight: 600; }

.doc-links.center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    margin-top: var(--space-md);
}

.doc-links .sep { color: var(--text-secondary); }

/* stack the links, one per line, once they no longer fit on one */
@media (max-width: 640px) {
    .doc-links.center { flex-direction: column; gap: var(--space-xs); }
    .doc-links .sep { display: none; }
}

/* card grid: flex so an incomplete last row centres */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.feature-card {
    flex: 1 1 300px;
    max-width: 420px;
    background: var(--bg-card);
    padding: clamp(1.618rem, 4vw, 3.427rem) clamp(1.309rem, 3vw, 2.618rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-speed) ease;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.feature-icon {
    display: block;
    font-size: var(--text-4xl);
    line-height: 1;
    margin-bottom: var(--space-lg);
}

.feature-card h3 {
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.feature-card p {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* specimen cards sit like stickers: slightly askew until you look at them */
.trader-card { text-align: left; }
.features-grid .trader-card:nth-child(odd)  { transform: rotate(-1.2deg); }
.features-grid .trader-card:nth-child(even) { transform: rotate(1deg); }
.features-grid .trader-card:hover { transform: rotate(0deg) translateY(-4px); }

/* looking closely agitates the specimen */
.trader-card:hover .bubble    { animation-duration: 2s; }
.trader-card:hover .jar-brain { animation-duration: 1.5s; }

.trader-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
}

.flavor {
    font-style: italic;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: var(--space-xs) 0 0;
}

.pnl-badge {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--text-sm);
    padding: 2px var(--space-xs);
    border-radius: var(--radius-sm);
}

.pnl-up   { color: var(--good); background: rgba(22, 163, 74, 0.12); }
.pnl-down { color: var(--bad);  background: rgba(220, 38, 38, 0.12); }

.sparkline {
    width: 100%;
    height: 2.5rem;
    margin: var(--space-sm) 0;
}

.sparkline polyline {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.trader-stats {
    display: flex;
    gap: var(--space-lg);
    margin: var(--space-sm) 0;
}

.trader-stats dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.trader-stats dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.stat-inline { font-variant-numeric: tabular-nums; }

.trait-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: var(--space-sm) 0;
}

.trait-badges span,
.tier-chip {
    font-size: var(--text-xs);
    padding: 2px var(--space-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.tier-chip {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    vertical-align: middle;
}


/* specimen jars: glass, a tinted fluid (hue from the genome commitment via
   --fluid-h, so every brain's jar is its own colour), two drifting wave crests
   at the surface, a lid, the brain, bubbles */
.jar {
    --fluid-h: 205;
    --fluid-s: 65%;
    --fluid-l: 78%;
    --fluid-top: 30%;
    --fluid: hsl(var(--fluid-h) var(--fluid-s) var(--fluid-l) / 0.6);
    position: relative;
    width: 5rem;
    height: 6rem;
    margin: 0 auto var(--space-md);
    border: 2px solid var(--border-color);
    border-radius: 0.8rem 0.8rem 1.6rem 1.6rem;
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-card));
    overflow: hidden;
}

[data-theme="dark"] .jar { --fluid: hsl(var(--fluid-h) var(--fluid-s) calc(var(--fluid-l) - 32%) / 0.6); }

.jar-fluid {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--fluid-top);
    background: var(--fluid);
}

/* the surface: a wave-shaped mask over the fluid colour, two layers drifting
   at different speeds so the brine looks alive */
.jar-wave {
    position: absolute;
    left: -50%;
    width: 200%;
    height: 0.6rem;
    top: calc(var(--fluid-top) - 0.45rem);
    background: var(--fluid);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q6 2 12 8 T24 8 V12 H0 Z'/%3E%3C/svg%3E") repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q6 2 12 8 T24 8 V12 H0 Z'/%3E%3C/svg%3E") repeat-x;
    -webkit-mask-size: 1.4rem 100%;
    mask-size: 1.4rem 100%;
    animation: wave-drift 5s linear infinite;
}

.jar-wave.w2 {
    height: 0.5rem;
    top: calc(var(--fluid-top) - 0.3rem);
    opacity: 0.7;
    -webkit-mask-size: 1.9rem 100%;
    mask-size: 1.9rem 100%;
    animation-duration: 7s;
    animation-direction: reverse;
}

/* the lid sits over the mouth: the jar's own top border is dropped and the
   lid's top corners are square, so the jar's overflow clip shapes the lid to
   the glass and nothing shows above it */
.jar { border-top-color: transparent; }

.jar-lid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.7rem;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-color);
    z-index: 1;
}

/* sealed custody (1 and 2): a wooden cap across the top of the jar, covering
   the mouth — grain, a lit top edge, a darker rim where it meets the glass;
   authored jars keep the plain grey lid, so the custody reads off the jar
   before the badge does */
.jar.sealed .jar-lid {
    height: 16%;
    background:
        repeating-linear-gradient(90deg, rgba(92, 56, 24, 0.16) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #dcb48a 0%, #c99b6b 45%, #b07f4f 100%);
    border: 0;
    border-bottom: 2px solid rgba(92, 56, 24, 0.5);
    border-radius: 0 0 0.1rem 0.1rem;
    box-shadow: inset 0 2px 0 rgba(255, 240, 220, 0.5), inset 0 -3px 4px rgba(92, 56, 24, 0.22);
}

[data-theme="dark"] .jar.sealed .jar-lid {
    background:
        repeating-linear-gradient(90deg, rgba(30, 16, 6, 0.32) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #b98a5d 0%, #9a6b40 45%, #7f5532 100%);
    border-bottom-color: rgba(20, 10, 2, 0.6);
}

.jar-brain {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    animation: brain-float 4s ease-in-out infinite;
}

.bubble {
    position: absolute;
    bottom: -0.5rem;
    width: 0.3rem;
    height: 0.3rem;
    border: 1px solid var(--accent-primary);
    border-radius: 50%;
    opacity: 0;
    animation: bubble-rise 5s ease-in infinite;
}

.bubble.b1 { left: 22%; animation-delay: 0s; }
.bubble.b2 { left: 50%; animation-delay: 1.7s; width: 0.2rem; height: 0.2rem; }
.bubble.b3 { left: 72%; animation-delay: 3.1s; }


/* 7. Terminal (app.html) ------------------------------------------------------ */

/* buttons: one skin site-wide */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
    transition: border-color var(--transition-speed) ease, color var(--transition-speed) ease, background var(--transition-speed) ease;
}

.btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border-color); color: var(--text-primary); }
.btn.primary { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.btn.primary:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); color: #fff; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: #fff; }
.btn.bell { border-color: var(--accent-primary); }
.btn.tiny, .btn-ghost.tiny { font-size: var(--text-xs); padding: 2px var(--space-xs); }
.btn-ghost { background: none; border: none; color: var(--text-secondary); cursor: pointer; font: inherit; padding: 0 0.3em; }
.btn-ghost:hover { color: var(--accent-primary); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin: var(--space-sm) 0 0; }

/* inputs */
.field { display: flex; flex-direction: column; gap: 0.3rem; margin: var(--space-sm) 0; }
.field-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.field-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
.field input, .field textarea, .field select, .select, .field-input {
    font: inherit;
    font-size: var(--text-sm);
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.field input:focus, .field textarea:focus, .select:focus { outline: 2px solid var(--accent-primary); outline-offset: 1px; }
.field-input { display: flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-sm) 0 0; }
.field-input input { border: none; background: none; padding: var(--space-xs) var(--space-sm); }
.field-input input:focus { outline: none; }
.field-sym { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.mono, .field .mono { font-family: var(--font-mono); font-size: 0.88em; }
.small { font-size: var(--text-xs); }
.select { width: auto; }
.check { display: block; font-size: var(--text-sm); margin: 0.2rem 0; }
.inline-form { display: flex; gap: var(--space-xs); align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { flex: 1 1 16rem; margin-bottom: 0; }
.inline-form .btn { margin-bottom: 2px; }
input[type="range"] { width: 100%; accent-color: var(--accent-primary); }

/* terminal bar + tabs */
.term-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-lg);
}
.term-status { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); }
.net { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; }
.net::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--text-tertiary); }
.net.readonly::before, .net.wallet::before { background: var(--good); }
.net.offline::before { background: var(--bad); }
.addr { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); }
.addr-chip { display: inline-flex; align-items: center; gap: 0.2em; }
.tabs { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.tabs a {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--text-sm);
}
.tabs a:hover { color: var(--accent-primary); }
.tabs a.active { background: var(--bg-primary); color: var(--accent-primary); box-shadow: var(--shadow-md); }
.view { min-height: 40vh; }
.section-sub { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-xl); }
.back { font-weight: 600; }
.toolbar { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-md); }
.toolbar-item { font-size: var(--text-sm); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.4em; }
.floor-head { text-align: center; }

/* console */
.console-row { text-align: right; margin: var(--space-sm) 0 0; }
.term-log {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    max-height: 14rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
}
.term-log .err { color: var(--bad); }
.term-log .ok  { color: var(--good); }

/* brain cards on the Floor */
.brain-card { color: inherit; display: flex; flex-direction: column; }
.brain-card:hover { color: inherit; }
.card-badges { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin: var(--space-xs) 0; }
.card-spark { min-height: 2.5rem; }
.card-foot { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-xs) 0 0; }
.badge {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 2px var(--space-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
}
.badge.good { color: var(--good); border-color: var(--good); }
.badge.bad { color: var(--bad); border-color: var(--bad); }
.badge.accent { color: var(--accent-primary); border-color: var(--accent-primary); }
.badge.muted { color: var(--text-tertiary); }
.pnl-badge.flat { color: var(--text-tertiary); background: var(--bg-tertiary); font-weight: 500; }
/* one chip skin: the genome hash and the internship progress bar share it;
   the bar only adds block layout and the fill behind the label */
.hash-chip,
.progress {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 3px var(--space-sm);
    margin-top: var(--space-xs);
    text-align: left;
}
.hash-chip { display: inline-block; }
.progress {
    position: relative;
    display: block;
    padding: 0;            /* the label carries the padding so the fill covers the full box */
    overflow: hidden;
    margin-bottom: var(--space-xs);
}
.progress-bar { position: absolute; top: 0; left: 0; bottom: 0; background: var(--accent-primary); opacity: 0.3; }
.progress-label { position: relative; display: block; padding: 3px var(--space-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* brain page */
.brain-head { display: flex; align-items: center; gap: var(--space-md); margin: var(--space-sm) 0 var(--space-md); }
.brain-head .jar { margin: 0; flex: none; }
.brain-head.compact .jar { width: 3.2rem; height: 3.8rem; }
.brain-head.compact .jar-brain { font-size: 1.4rem; }
.brain-title h2, .brain-title h3 { margin: 0; }
.brain-title p { margin: 0.2rem 0 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0; }
.stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 0.15rem; }
.stat-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.stat-value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.stat-sub { font-size: var(--text-xs); color: var(--text-tertiary); }
.chart { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-xs); }
.chart-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.chart-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-delta.up { color: var(--good); }
.chart-delta.down { color: var(--bad); }
.chart-axis { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-tertiary); }
.sparkline { width: 100%; height: 2.5rem; display: block; }
.sparkline.large { height: 7.5rem; }
.sparkline polyline, .sparkline line { fill: none; stroke: var(--accent-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sparkline.down polyline { stroke: var(--bad); }
.sparkline.up polyline { stroke: var(--good); }
.panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md) var(--space-md); margin: var(--space-sm) 0; }
.panel h4 { font-size: var(--text-base); margin: 0 0 var(--space-xs); }
.panel.born { text-align: center; padding: var(--space-lg); }
.actions-panel { display: flex; flex-direction: column; gap: var(--space-xs); }
.actions-panel .btn-row { margin: 0; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-sm); align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-sm); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem var(--space-md); font-size: var(--text-sm); margin: 0; }
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.table.trades td:nth-child(2) { color: var(--text-primary); }
.table.trades td:first-child { white-space: nowrap; }
.empty { text-align: center; padding: var(--space-lg) var(--space-md); color: var(--text-secondary); border: 1px dashed var(--border-color); border-radius: var(--radius-md); margin: var(--space-sm) 0; }
.empty p { margin: 0 0 var(--space-sm); }
.loading { color: var(--text-secondary); padding: var(--space-md); text-align: center; }
.spin { display: inline-block; width: 0.9em; height: 0.9em; border: 2px solid var(--border-color); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -0.15em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* modal + toasts + steps */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: var(--space-md); z-index: 200; }
.modal { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(100%, 32rem); max-height: 90vh; overflow: auto; padding: var(--space-md) var(--space-lg) var(--space-lg); }
.modal.wide { width: min(100%, 48rem); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.modal-head h3 { font-size: var(--text-lg); margin: 0; }
.modal-body p { color: var(--text-primary); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-md); }
.keybox { word-break: break-all; white-space: pre-wrap; font-size: var(--text-sm); }
.toasts { position: fixed; right: var(--space-md); bottom: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); z-index: 300; }
.toast { background: var(--text-primary); color: var(--bg-primary); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md); font-size: var(--text-sm); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; max-width: 24rem; }
.toast.show { opacity: 1; transform: none; }
.toast.ok { background: var(--good); color: #fff; }
.toast.err { background: var(--bad); color: #fff; }
.steps { list-style: none; padding: 0; margin: var(--space-sm) 0 0; }
.step { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.2rem var(--space-xs); align-items: baseline; margin: var(--space-xs) 0; color: var(--text-secondary); }
.step-dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--border-color); display: inline-block; align-self: center; }
.step.running .step-dot { border-color: var(--accent-primary); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.step.done .step-dot { background: var(--good); border-color: var(--good); }
.step.failed .step-dot { background: var(--bad); border-color: var(--bad); }
.step.done .step-label, .step.running .step-label { color: var(--text-primary); }
.step-meta { grid-column: 2; font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-tertiary); overflow-wrap: anywhere; }
.step.failed .step-meta { color: var(--bad); font-family: var(--font-sans); }

/* create wizard */
.stepper { display: flex; gap: var(--space-sm); list-style: none; padding: 0; margin: var(--space-sm) 0 var(--space-md); flex-wrap: wrap; }
.stepper li { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-sm); color: var(--text-tertiary); }
.stepper li.current { color: var(--text-primary); font-weight: 600; }
.stepper li.done { color: var(--good); }
.stepper-no { width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); }
.stepper li.current .stepper-no { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.wizard-nav { justify-content: space-between; margin-top: var(--space-md); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xs) 0; }
.chip { font: inherit; font-size: var(--text-xs); padding: 2px var(--space-sm); border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; }
.chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.adv summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-xs) 0; }
.choice-list { display: grid; gap: var(--space-xs); }
.choice { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; background: var(--bg-card); }
.choice.selected { border-color: var(--accent-primary); }
.choice.disabled { opacity: 0.6; cursor: not-allowed; }
.choice-body { display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--text-sm); color: var(--text-secondary); }
.choice-body strong { color: var(--text-primary); }
.next-steps li { margin-bottom: var(--space-xs); color: var(--text-secondary); }
.next-steps strong { color: var(--text-primary); }

/* desk + dev */
.desk-h { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-lg); }
.desk-brain { border-top: 1px solid var(--border-color); padding-top: var(--space-sm); margin-top: var(--space-sm); }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0 var(--space-md); }
.dev-grid .field { margin: var(--space-xs) 0; }
.est { min-height: 1.2em; }
.tip {
    display: inline-block;
    font-size: 0.85em;
    line-height: 1;
    color: var(--text-tertiary);
    cursor: help;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: 0.05em;
}
.tip:hover, .tip:focus { color: var(--accent-primary); outline: none; }
.runtime-status { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; font-size: var(--text-sm); }
.runtime-status .badge { font-size: var(--text-sm); padding: 2px var(--space-sm); }
input[type="file"].jarfile { font-size: var(--text-sm); }
.token-row { display: flex; gap: var(--space-md); align-items: flex-start; flex-wrap: wrap; }
.token-img { width: 7rem; height: 7rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); flex: none; }


/* Game layer: leaderboard ranks + medals, milestone trophies, quest bar, confetti */
.leaderboard-title { margin: 0 0 var(--space-xs); }
.leaderboard-title .muted { font-weight: 400; }
.brain-card { position: relative; }
.rank-chip {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.rank-chip.medal { font-size: 1.1rem; background: none; border: 0; }
.brain-card.leader {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--accent-primary) 55%, transparent);
}
.brain-card.leader .jar { animation-duration: 3s; }

.trophies { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.trophy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    font-size: var(--text-sm);
    background: var(--bg-tertiary);
}
.trophy.locked { opacity: 0.4; filter: grayscale(1); }
.trophy.earned { border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color)); background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-card)); }
.trophy-icon { font-size: 1rem; line-height: 1; }

.quest-count { color: var(--accent-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.quest-bar { display: flex; gap: 0.4rem; margin: 0 0 var(--space-sm); }
.quest-pip {
    flex: 1;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: background 0.3s ease;
}
.quest-pip.done { background: var(--accent-primary); border-color: var(--accent-primary); }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 3000; overflow: hidden; }
.confetti-bit {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    width: 0.55rem;
    height: 0.85rem;
    border-radius: 1px;
    opacity: 0.95;
    animation: confetti-fall var(--d, 1200ms) ease-in var(--delay, 0ms) forwards;
}
@keyframes confetti-fall {
    0% { transform: translate(-50%, -1.5rem) rotate(0); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--x, 0)), 102vh) rotate(var(--r, 360deg)); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
    .brain-card.leader .jar { animation: none; }
    .confetti { display: none; }
}

/* Learn tab: the lifecycle as numbered steps that tick themselves off from chain state */
.learn-steps { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.learn-step {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    background: var(--bg-card);
}
.learn-step.done { border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color)); }
.learn-no {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--accent-primary);
    line-height: 1.2;
}
.learn-body h4 { margin: 0 0 var(--space-xs); }
.learn-body p { margin: 0 0 var(--space-xs); }
.learn-body .btn-row { margin-top: var(--space-sm); }
@media (max-width: 560px) { .learn-step { grid-template-columns: 1fr; } .learn-no { display: none; } }

/* 8. Documents (.doc) -------------------------------------------------------- */
/* The paper and the architecture note. Markup is
   <main><div class="container"><article class="doc">…</article></div></main>
   so horizontal padding comes from .container like everywhere else; the
   article only sets its reading measure and vertical rhythm. */

.doc {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--space-xl) 0 var(--space-3xl);
}

.doc h1 {
    font-size: var(--text-3xl);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-xs);
    text-wrap: balance;
}

.doc h2 {
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
    margin: var(--space-xl) 0 var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    text-wrap: balance;
}

.doc h2 .no {
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
    margin-right: 0.55em;
}

.doc h3 {
    font-size: var(--text-lg);
    margin: var(--space-md) 0 var(--space-xs);
}

.doc p,
.doc li {
    color: var(--text-primary);
    margin: var(--space-sm) 0;
}

.doc ul,
.doc ol {
    padding-left: var(--space-md);
    margin: var(--space-sm) 0;
}

.doc li { margin: var(--space-xs) 0; }
.doc li::marker { color: var(--accent-primary); }
.doc strong { color: var(--text-primary); }
.doc em { color: inherit; }

.doc .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-primary);
    margin: 0 0 var(--space-sm);
}

.doc .tagline {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin: 0 0 var(--space-xs);
}

.doc .version {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-lg);
}

/* the paper's status box and the architecture note's fallback share the
   landing page's callout skin */
.doc .notice {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    color: var(--text-secondary);
    margin: 0 0 var(--space-xl);
}

.doc .notice strong { color: var(--text-primary); }

.doc .secret {
    color: var(--good);
    font-weight: 600;
}

.doc pre { margin: var(--space-sm) 0; }

/* rendered markdown (architecture.md via marked) has bare tables and
   mermaid blocks with no wrapper */
.doc table {
    display: block;
    overflow-x: auto;
    margin: var(--space-md) 0;
}

.doc .mermaid {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    overflow-x: auto;
    margin: var(--space-md) 0;
}

.doc-fallback { color: var(--text-secondary); }


/* My Desk: the owner's own inference key, a sub-panel of Runtime */
.cred-panel { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--border-subtle); }
.cred-panel h5 { margin: 0 0 var(--space-xs); }

/* First-visit alpha notice (js/main.js), shown once per browser */
html.modal-open { overflow: hidden; }
.alpha-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--container-padding);
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    backdrop-filter: blur(6px);
}
.alpha-modal {
    max-width: 34rem; width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg);
}
.alpha-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs); font-weight: 600; color: var(--accent-primary); margin: 0 0 var(--space-xs); }
.alpha-modal h2 { font-size: var(--text-xl); margin: 0 0 var(--space-sm); text-wrap: balance; }
.alpha-modal ul { margin: 0 0 var(--space-md); padding-left: var(--space-md); color: var(--text-secondary); }
.alpha-modal li { margin: var(--space-xs) 0; }
.alpha-modal li::marker { color: var(--accent-primary); }
.alpha-actions { display: flex; justify-content: flex-end; }

/* landing: the "real today / not yet" table */
.table.reality th, .table.reality td { width: 50%; vertical-align: top; }
.table.reality td:first-child { font-weight: 400; }

/* 9. Motion ------------------------------------------------------------------ */

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes brain-bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-0.35rem) rotate(4deg); }
}

@keyframes wave-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(25%); }
}

@keyframes brain-float {
    0%, 100% { transform: translateY(0.1rem); }
    50%      { transform: translateY(-0.2rem); }
}

@keyframes bubble-rise {
    0%   { transform: translateY(0); opacity: 0; }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.4; }
    100% { transform: translateY(-5rem); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track,
    .hero-brain,
    .jar-brain,
    .jar-wave,
    .bubble {
        animation: none;
    }

    .nav-burger span { transition: none; }
}