/* ============================================================
      Ouroboros — site styles
      Personal zettelkasten + app marketing. Vanilla CSS only.
      ============================================================ */

/* ---------- Self-hosted fonts (drop woff2 files into assets/fonts/) ---------- */
/* Inter — UI / body. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src:
        url("./fonts/Inter-Variable.woff2") format("woff2-variations"),
        url("./fonts/Inter-Variable.woff2") format("woff2");
}
/* Source Serif — long-form prose / notes. */
@font-face {
    font-family: "Source Serif";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src:
        url("./fonts/SourceSerif4-Variable.woff2") format("woff2-variations"),
        url("./fonts/SourceSerif4-Variable.woff2") format("woff2");
}
/* JetBrains Mono — metadata, IDs, code. */
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src:
        url("./fonts/JetBrainsMono-Variable.woff2") format("woff2-variations"),
        url("./fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
    /* Light (default — paper) */
    --bg: oklch(0.985 0.005 70);
    --bg-2: oklch(0.965 0.008 70);
    --bg-3: oklch(0.935 0.01 70);
    --bg-4: oklch(0.9 0.012 70);
    --fg-0: oklch(0.2 0.01 60);
    --fg-1: oklch(0.36 0.01 60);
    --fg-2: oklch(0.5 0.01 60);
    --fg-3: oklch(0.62 0.008 60);
    --line: oklch(0.86 0.005 70);
    --line-strong: oklch(0.74 0.005 70);

    --accent-h: 25;
    --accent: oklch(0.58 0.16 var(--accent-h));
    --accent-text: oklch(0.5 0.16 var(--accent-h));
    --accent-faint: oklch(0.94 0.045 var(--accent-h));
    --accent-edge: oklch(0.86 0.08 var(--accent-h));

    --font-ui:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
        sans-serif;
    --font-prose:
        "Source Serif", ui-serif, Georgia, Cambria, "Times New Roman", serif;
    --font-mono:
        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --measure: 36rem; /* prose reading width */
    --measure-wide: 56rem; /* layout / index width */
    --gutter: 1.25rem;

    --radius-1: 3px;
    --radius-2: 6px;

    color-scheme: light;
}

[data-theme="dark"] {
    --bg: oklch(0.16 0.006 60);
    --bg-2: oklch(0.2 0.006 60);
    --bg-3: oklch(0.24 0.006 60);
    --bg-4: oklch(0.3 0.006 60);
    --fg-0: oklch(0.96 0.005 60);
    --fg-1: oklch(0.86 0.006 60);
    --fg-2: oklch(0.66 0.008 60);
    --fg-3: oklch(0.5 0.008 60);
    --line: oklch(0.3 0.006 60);
    --line-strong: oklch(0.42 0.006 60);

    --accent: oklch(0.74 0.13 var(--accent-h));
    --accent-text: oklch(0.78 0.13 var(--accent-h));
    --accent-faint: oklch(0.3 0.05 var(--accent-h) / 0.5);
    --accent-edge: oklch(0.45 0.1 var(--accent-h));

    color-scheme: dark;
}

/* Honor OS preference unless explicitly overridden via data-theme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: oklch(0.16 0.006 60);
        --bg-2: oklch(0.2 0.006 60);
        --bg-3: oklch(0.24 0.006 60);
        --bg-4: oklch(0.3 0.006 60);
        --fg-0: oklch(0.96 0.005 60);
        --fg-1: oklch(0.86 0.006 60);
        --fg-2: oklch(0.66 0.008 60);
        --fg-3: oklch(0.5 0.008 60);
        --line: oklch(0.3 0.006 60);
        --line-strong: oklch(0.42 0.006 60);
        --accent: oklch(0.74 0.13 var(--accent-h));
        --accent-text: oklch(0.78 0.13 var(--accent-h));
        --accent-faint: oklch(0.3 0.05 var(--accent-h) / 0.5);
        --accent-edge: oklch(0.45 0.1 var(--accent-h));
        color-scheme: dark;
    }
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg-1);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
    color: var(--fg-0);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
    margin: 0;
}
p {
    margin: 0 0 1em;
    text-wrap: pretty;
}
a {
    color: inherit;
    text-decoration: none;
}
hr {
    border: 0;
    border-top: 0.5px solid var(--line);
    margin: 2.5rem 0;
}
small {
    font-size: 0.85em;
    color: var(--fg-3);
}
code,
kbd,
pre,
.mono {
    font-family: var(--font-mono);
    font-feature-settings: "ss01";
}

/* ---------- Header ---------- */
.site-hd {
    border-bottom: 0.5px solid var(--line);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(160%) blur(8px);
    background: color-mix(in oklab, var(--bg) 88%, transparent);
}
.site-hd-inner {
    max-width: var(--measure-wide);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.875rem var(--gutter);
}
.brand {
    align-items: center;
    border: none;
    color: var(--fg-0);
    display: inline-flex;
    font-weight: 600;
    font-size: 0.95rem;
    gap: 0.5rem;
    letter-spacing: -0.015em;
}
.brand svg {
    color: var(--accent-text);
}
.brand .word {
    font-feature-settings: "ss01";
}
.brand .ver {
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 400;
    margin-left: 0.4rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-left: auto;
}
.site-nav a {
    color: var(--fg-2);
    font-size: 0.875rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition:
        color 80ms,
        border-color 80ms;
}
.site-nav a:hover {
    color: var(--fg-0);
    border-bottom-color: var(--accent);
}
.site-nav a.is-active {
    color: var(--fg-0);
    border-bottom-color: var(--accent);
}

.theme-toggle,
.menu-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0.5px solid var(--line);
    border-radius: var(--radius-1);
    color: var(--fg-2);
    cursor: pointer;
}
.theme-toggle:hover,
.menu-btn:hover {
    color: var(--fg-0);
    border-color: var(--line-strong);
}
.theme-toggle .ph {
    font-size: 16px;
}
/* Default (system): show monitor only */
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: none; }
.theme-toggle .system { display: inline; }
/* Explicit light: show sun only */
[data-theme="light"] .theme-toggle .sun { display: inline; }
[data-theme="light"] .theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .system { display: none; }
/* Explicit dark: show moon only */
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: inline; }
[data-theme="dark"] .theme-toggle .system { display: none; }

/* ---------- Search overlay ---------- */
.search-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0.5px solid var(--line);
    border-radius: var(--radius-1);
    color: var(--fg-2);
    cursor: pointer;
}
.search-btn:hover {
    color: var(--fg-0);
    border-color: var(--line-strong);
}
.search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: oklch(0 0 0 / 0.5);
    backdrop-filter: blur(4px);
    padding: 12vh var(--gutter) 2rem;
    justify-content: center;
    align-items: flex-start;
}
.search-overlay.is-open {
    display: flex;
}
.search-modal {
    width: 100%;
    max-width: 32rem;
    background: var(--bg);
    border: 0.5px solid var(--line);
    border-radius: var(--radius-2);
    box-shadow: 0 16px 48px oklch(0 0 0 / 0.3);
    overflow: hidden;
}
.search-input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-bottom: 0.5px solid var(--line);
}
.search-input-row .ph {
    font-size: 16px;
    color: var(--fg-3);
}
.search-input-row input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--fg-0);
}
.search-input-row input::placeholder {
    color: var(--fg-3);
}
.search-input-row kbd {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--fg-3);
    background: var(--bg-2);
    border: 0.5px solid var(--line);
    border-radius: 3px;
    padding: 0.15em 0.4em;
}
.search-results {
    max-height: 50vh;
    overflow-y: auto;
}
.search-results:empty::after {
    content: "Type to search across all notes and pages";
    display: block;
    padding: 1.25rem 1rem;
    font-size: 0.82rem;
    color: var(--fg-3);
    text-align: center;
}
.search-result {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 0.5px solid var(--line);
    color: var(--fg-1);
    transition: background 80ms;
}
.search-result:last-child {
    border-bottom: 0;
}
.search-result:hover,
.search-result.is-selected {
    background: var(--bg-2);
}
.search-result h3 {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.15rem;
}
.search-result p {
    font-size: 0.78rem;
    color: var(--fg-3);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-no-results {
    padding: 1.25rem 1rem;
    font-size: 0.85rem;
    color: var(--fg-3);
    text-align: center;
}

.hd-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.menu-btn {
    display: none;
}

/* Mobile nav — slides in below the sticky header */
.mobile-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    border-bottom: 0.5px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms ease;
    z-index: 9;
}
.mobile-nav.is-open {
    max-height: 20rem;
}
.mobile-nav a {
    padding: 0.75rem var(--gutter);
    font-size: 0.95rem;
    color: var(--fg-2);
    border-bottom: 0.5px solid var(--line);
    transition: color 80ms, background 80ms;
}
.mobile-nav a:last-child {
    border-bottom: 0;
}
.mobile-nav a:hover {
    color: var(--fg-0);
    background: var(--bg-2);
}
.mobile-nav a.is-active {
    color: var(--accent-text);
}

/* Scroll lock + backdrop blur when mobile nav is open */
body.nav-open {
    overflow: hidden;
}
body.nav-open main,
body.nav-open .site-ft {
    filter: blur(6px);
    pointer-events: none;
    transition: filter 200ms ease;
}
body:not(.nav-open) main,
body:not(.nav-open) .site-ft {
    transition: filter 200ms ease;
}

/* ---------- Layout ---------- */
main {
    padding: 2rem var(--gutter) 4rem;
}
.container {
    max-width: var(--measure-wide);
    margin: 0 auto;
}
.prose {
    max-width: var(--measure);
    margin: 0 auto;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 1.5rem 0;
}
.prose th,
.prose td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 0.5px solid var(--line);
}
.prose th {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-2);
    border-bottom-width: 1px;
}
.prose td {
    color: var(--fg-1);
}
.prose td code {
    font-size: 0.8125rem;
    background: var(--bg-2);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}
.prose tr:hover td {
    background: var(--bg-2);
}

/* ---------- Hero ---------- */
.hero {
    padding: 4rem 0 3rem;
}
.hero .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fg-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
}
.hero .eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.hero h1 {
    font-family: var(--font-prose);
    font-weight: 400;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}
.hero h1 em {
    font-style: italic;
    color: var(--accent-text);
    font-weight: 400;
}
.hero .lede {
    font-size: 1.125rem;
    color: var(--fg-1);
    max-width: 38rem;
}

/* ---------- Sections ---------- */
.section {
    padding: 2.5rem 0;
    border-top: 0.5px solid var(--line);
}
.section-hd {
    display: grid;
    grid-template-columns: 6rem 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    margin-bottom: 1.5rem;
}
.section-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fg-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.section h2 {
    font-family: var(--font-prose);
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}
.section .section-sub {
    color: var(--fg-2);
    font-size: 0.95rem;
    margin-top: 0.4rem;
    max-width: 38rem;
}

.section-body {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1.5rem;
}
.section-body > .marg {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 1.1rem;
}

/* ---------- Now panel (zettelkasten /now convention) ---------- */
.now-panel {
    border: 0.5px solid var(--line);
    border-left: 2px solid var(--accent);
    background: var(--bg-2);
    padding: 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.25rem;
    align-items: baseline;
    font-size: 0.95rem;
}
.now-panel dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.now-panel dd {
    margin: 0;
    color: var(--fg-1);
}

/* ---------- View toggle ---------- */
.view-toggle {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.view-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--line);
    border-radius: 4px;
    background: transparent;
    color: var(--fg-3);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.view-btn:hover {
    color: var(--fg-1);
    background: var(--bg-2);
}
.view-btn.is-active {
    color: var(--accent-text);
    border-color: var(--accent-text);
    background: var(--bg-2);
}

/* ---------- Note graph ---------- */
.graph-wrap {
    padding: 0;
}
#note-graph {
    grid-column: 1 / -1;
    width: 100%;
    border: 0.5px solid var(--line);
    border-radius: 6px;
    background: var(--bg-1);
    overflow: hidden;
    position: relative;
}
#note-graph .graph-hint {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-text);
    background: var(--bg-2);
    padding: 4px 10px;
    border-radius: 4px;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
#note-graph svg {
    display: block;
}
.graph-edge {
    stroke: var(--fg-2);
    stroke-width: 0.5;
    stroke-opacity: 0.6;
}
.graph-edge-hl {
    stroke: var(--accent-text);
    stroke-width: 1.5;
    stroke-opacity: 1;
}
.graph-edge-dim {
    stroke-opacity: 0.12;
}
.graph-node circle {
    fill: var(--fg-3);
    stroke: var(--bg-1);
    stroke-width: 1.5;
    transition: fill 0.12s;
}
.graph-node:hover circle {
    fill: var(--accent-text);
}
.graph-node text {
    font-family: var(--font-ui);
    font-size: 13px;
    fill: var(--fg-2);
}
.graph-node:hover text {
    fill: var(--fg-0);
}
.graph-node-dim circle {
    fill-opacity: 0.2;
}
.graph-node-dim text {
    fill-opacity: 0.2;
}

/* ---------- Notes list ---------- */
.notes-list {
    display: flex;
    flex-direction: column;
}
.notes-list .note-row {
    display: grid;
    grid-template-columns: 7rem 1fr auto;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 0.5px dashed var(--line);
    align-items: baseline;
}
.notes-list .note-date {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
}
.notes-list .note-title {
    color: var(--fg-0);
    font-size: 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.notes-list .note-title .blurb {
    color: var(--fg-2);
    font-size: 0.9rem;
    font-weight: 400;
}
.notes-list .note-row:hover .note-title {
    color: var(--accent-text);
}
.notes-list .note-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--fg-3);
    white-space: nowrap;
}
.notes-list .tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-text);
    padding: 0.05rem 0.35rem;
    border: 0.5px solid var(--accent-edge);
    border-radius: 2px;
}

/* ---------- Wiki link styling (zettelkasten DNA) ---------- */
.wiki,
a.wiki,
a {
    color: var(--accent-text);
    border-bottom: 0.5px dashed var(--accent-edge);
    cursor: pointer;
}
.wiki.broken {
    color: var(--fg-3);
    border-bottom-color: var(--fg-3);
}
.wiki::before {
    content: "[[";
    color: var(--fg-3);
}
.wiki::after {
    content: "]]";
    color: var(--fg-3);
}

/* External link indicator */
a .ph-arrow-square-out {
    font-size: 0.85em;
    margin-left: 0.2em;
    vertical-align: baseline;
    opacity: 0.6;
}

/* ---------- Note pager (prev / random / next) ---------- */
.note-pager {
    max-width: var(--measure);
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 0.5px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
}
.pager-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--fg-2);
    transition: color 0.1s;
}
.pager-link:hover {
    color: var(--accent-text);
}
.pager-link.prev {
    justify-self: start;
}
.pager-link.next {
    justify-self: end;
    text-align: right;
}
.pager-link.random {
    width: 32px;
    height: 32px;
    justify-content: center;
    border: 0.5px solid var(--line);
    border-radius: var(--radius-1);
    font-size: 16px;
    cursor: pointer;
}
.pager-link.random:hover {
    border-color: var(--accent-edge);
}
.pager-link.disabled {
    visibility: hidden;
}
.pager-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 20ch;
}

/* Backlinks block at the foot of a note */
.backlinks {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 0.5px solid var(--line);
    font-size: 0.9rem;
}
.backlinks h3 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    font-weight: 500;
    margin-bottom: 0.75rem;
}
.backlinks ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.backlinks li {
    color: var(--fg-2);
}

/* ---------- Prose ---------- */
.note {
    font-family: var(--font-prose);
    font-size: 1.075rem;
    line-height: 1.65;
    color: var(--fg-1);
}
.note h1 {
    font-family: var(--font-prose);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.15;
    margin: 1rem 0 3rem;
}
.note h2 {
    font-family: var(--font-prose);
    font-weight: 400;
    font-size: 1.3rem;
    margin: 2.2rem 0 0.6rem;
    color: var(--fg-0);
}
.note h3 {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin: 1.8rem 0 0.4rem;
}
.note p {
    margin: 0 0 1.1em;
}
.note blockquote {
    margin: 1.5em 0;
    padding: 0.4em 1.2em;
    border-left: 2px solid var(--line-strong);
    color: var(--fg-2);
    font-style: italic;

    em {
        font-style: normal;
    }
}
.note ul,
.note ol {
    padding-left: 1.4em;
}
.note li {
    margin: 0.25em 0;
}
.note .image-figure {
    margin: 1.5rem 0;
}
.note .image-figure img {
    display: block;
    max-width: 100%;
    border-radius: var(--radius-2);
    width: 100%;
}
.note .image-figure figcaption {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--fg-3);
    margin-top: 0.5rem;
    letter-spacing: 0.01em;
}

.note code:not(pre code) {
    font-size: 0.9em;
    background: var(--bg-2);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    border: 0.5px solid var(--line);
}
.code-wrap {
    position: relative;
}
.code-copy {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--line);
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--fg-3);
    font-size: 14px;
    transition: color 0.12s, background 0.12s;
    cursor: pointer;
}
.code-copy:hover {
    color: var(--fg-0);
    background: var(--bg-4);
}
.code-copy.copied {
    color: var(--accent-text);
    opacity: 1;
}

.note pre {
    background: var(--bg-2);
    border: 0.5px solid var(--line);
    border-radius: var(--radius-2);
    padding: 0.9em 1em;
    font-size: 0.85em;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Footnotes (pulldown-cmark output) */
.footnote-reference {
    font-family: var(--font-mono);
    font-size: 0.65em;
    line-height: 0;
    vertical-align: super;
    margin-left: 0.05em;
}
.footnote-reference a {
    color: var(--accent-text);
    text-decoration: none;
    background: var(--accent-faint);
    padding: 0.1em 0.35em;
    border-radius: 2px;
    transition: background 80ms;
}
.footnote-reference a:hover {
    background: var(--accent-edge);
}
.footnote-definition:first-of-type {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 0.5px solid var(--line);
}
.footnote-definition:first-of-type::before {
    content: "Notes";
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--fg-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    grid-column: 1 / -1;
}
.footnote-definition {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0 0.75rem;
    align-items: baseline;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--fg-2);
    padding: 0.75rem 0;
}
.footnote-definition + .footnote-definition {
    border-top: 0.5px dashed var(--line);
}
.footnote-definition-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-text);
    font-weight: 500;
}
.footnote-definition p {
    margin: 0 0 0.4em;
}
.footnote-definition p:last-child {
    margin-bottom: 0;
}
.footnote-definition a {
    color: var(--accent-text);
    border-bottom: 0.5px dashed var(--accent-edge);
}

/* Note frontmatter — date, id, tags */
.note-fm {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--fg-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.note-fm .id {
    color: var(--accent-text);
}

/* ---------- App page ---------- */
.app-hero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 0;
}
.app-hero h1 {
    font-family: var(--font-prose);
    font-weight: 400;
    font-size: clamp(1.8rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
.app-hero .lede {
    font-size: 1.05rem;
    color: var(--fg-1);
    margin-bottom: 1.5rem;
    max-width: 32rem;
}

.app-screenshot {
    border: 0.5px solid var(--line);
    border-radius: var(--radius-2);
    background: var(--bg-2);
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
}
.app-screenshot .winbar {
    height: 26px;
    border-bottom: 0.5px solid var(--line);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: var(--bg-3);
}
.app-screenshot .winbar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bg-4);
    display: block;
}
.app-screenshot .winbar i:first-child {
    background: oklch(0.72 0.16 25);
}
.app-screenshot .winbar i:nth-child(2) {
    background: oklch(0.82 0.13 90);
}
.app-screenshot .winbar i:nth-child(3) {
    background: oklch(0.72 0.13 150);
}
.app-screenshot .winbar .url {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--fg-3);
}
.app-screenshot .body {
    position: absolute;
    inset: 26px 0 0 0;
    display: grid;
    grid-template-columns: 28% 1fr;
    padding: 12px;
    gap: 12px;
}
.app-screenshot .sb {
    border-right: 0.5px solid var(--line);
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.app-screenshot .sb i {
    height: 14px;
    background: var(--bg-3);
    border-radius: 3px;
    display: block;
}
.app-screenshot .sb i:nth-child(2) {
    width: 75%;
}
.app-screenshot .sb i:nth-child(3) {
    width: 60%;
}
.app-screenshot .sb i:nth-child(4) {
    width: 70%;
    background: var(--accent-faint);
}
.app-screenshot .sb i:nth-child(5) {
    width: 55%;
}
.app-screenshot .sb i:nth-child(6) {
    width: 65%;
}
.app-screenshot .pane {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.app-screenshot .pane .row {
    height: 20px;
    background: var(--bg-3);
    border-radius: 3px;
    border-left: 2px solid var(--accent);
}
.app-screenshot .pane .row:nth-child(2) {
    border-left-color: oklch(0.74 0.09 75);
}
.app-screenshot .pane .row:nth-child(3) {
    border-left-color: oklch(0.72 0.1 240);
}
.app-screenshot .pane .row:nth-child(4) {
    border-left-color: oklch(0.72 0.1 340);
}
.app-screenshot .pane .big {
    height: 80px;
    background: var(--bg-3);
    border-radius: var(--radius-2);
    border: 0.5px solid var(--line);
    border-left: 2px solid var(--accent);
    margin-top: 6px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 0.5px solid var(--line);
    margin: 2rem 0;
}
.feature {
    background: var(--bg);
    padding: 1.25rem 1.4rem;
}
.feature h3 {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    color: var(--fg-0);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.feature h3 .num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-text);
    font-weight: 500;
}
.feature p {
    font-size: 0.9rem;
    color: var(--fg-2);
    line-height: 1.55;
    margin: 0;
}
.feature-legend {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--fg-3);
    margin: 0.75rem 0 0;
}
.feature-legend sup {
    color: var(--accent-text);
    margin-right: 0.25rem;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    background: var(--bg);
    color: var(--fg-0);
    border: 0.5px solid var(--line-strong);
    border-radius: var(--radius-1);
    cursor: pointer;
    transition:
        background 80ms,
        border-color 80ms;
}
.btn:hover {
    background: var(--bg-2);
    border-color: var(--fg-3);
}
.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: oklch(0.16 0.006 60);
}
.btn.primary:hover {
    filter: brightness(1.05);
}
.btn .kbd {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    opacity: 0.6;
}
.btn-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* ---------- Docs ---------- */
.docs-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 3rem;
}
.docs-shell > article {
    min-width: 0;
}
.docs-toc {
    font-size: 0.875rem;
    position: sticky;
    top: 4.75rem;
    align-self: start;
    max-height: calc(100vh - 5.75rem);
    overflow-y: auto;
}
.docs-toc h4 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    font-weight: 500;
    margin: 1.5rem 0 0.6rem;
}
.docs-toc h4:first-child {
    margin-top: 0;
}
.docs-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.docs-toc a {
    border: none;
    color: var(--fg-2);
    padding: 0.25rem 0;
    display: block;
}
.docs-toc a:hover,
.docs-toc a.is-active {
    color: var(--accent-text);
}

/* ---------- Footer ---------- */
.site-ft {
    border-top: 0.5px solid var(--line);
    margin-top: 4rem;
    padding: 2rem var(--gutter);
}
.site-ft-inner {
    max-width: var(--measure-wide);
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--fg-3);
    letter-spacing: 0.04em;
}
.site-ft-inner .sep {
    color: var(--line-strong);
}
.site-ft-inner a:hover {
    color: var(--fg-1);
}
.site-ft-inner .right {
    margin-left: auto;
}

/* ---------- Mobile menu ---------- */
@media (max-width: 720px) {
    :root {
        --gutter: 1rem;
    }
    .site-hd-inner {
        gap: 0.75rem;
    }
    .site-nav {
        display: none;
    }
    .hd-actions {
        margin-left: auto;
    }
    .mobile-nav {
        display: flex;
    }
    .menu-btn {
        display: inline-grid;
    }

    .section-hd,
    .section-body {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .section-num {
        display: block;
    }
    .section-body > .marg {
        padding-top: 0;
    }

    .notes-list .note-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    .notes-list .note-meta {
        display: none;
    }

    .now-panel {
        grid-template-columns: 1fr;
        gap: 0.4rem 0;
        padding: 1rem;
    }
    .now-panel dt {
        margin-top: 0.4rem;
    }
    .now-panel dt:first-of-type {
        margin-top: 0;
    }

    .app-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem 0 2rem;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .docs-shell {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .docs-toc {
        position: static;
        max-height: none;
        border: 0.5px solid var(--line);
        border-radius: var(--radius-2);
        padding: 0.75rem 1rem;
        background: var(--bg-2);
    }

    .site-ft-inner {
        flex-wrap: wrap;
        gap: 0.6rem 1rem;
    }
    .site-ft-inner .right {
        margin-left: 0;
        width: 100%;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}