body {
    background-color: var(--bg-canvas);
    background-image:
        linear-gradient(to right, var(--grid-line) var(--border-w), transparent var(--border-w)),
        linear-gradient(to bottom, var(--grid-line) var(--border-w), transparent var(--border-w));
    background-size: var(--grid-cell) var(--grid-cell);
    background-position: 0 0;
}

::selection { background: var(--highlighter); color: var(--ink); }

.skip-link {
    position: absolute;
    top: var(--space-three);
    left: var(--space-three);
    z-index: var(--z-overlay);
    padding: var(--space-two) var(--space-four);
    background: var(--navy);
    color: var(--text-inverse);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--t-fast) var(--e-standard);
}
.skip-link:focus-visible { outline: none; transform: translateY(0); box-shadow: var(--ring-focus); }

.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-five);
    padding: 0 var(--space-six);
    height: var(--topbar-h);
    background: var(--bg-canvas);
    border-bottom: var(--border-w) solid var(--border-subtle);
}

.brand-lockup { display: flex; align-items: center; gap: var(--space-three); flex: none; }
.logo-swap { display: inline-flex; align-items: center; }
.logo-swap img { height: var(--logo-topbar); width: auto; display: block; }
.logo-swap .l-dark { display: none; }
[data-theme="dark"] .logo-swap .l-light { display: none; }
[data-theme="dark"] .logo-swap .l-dark { display: inline-block; }

.brand-sep {
    width: var(--border-w);
    height: var(--sep-h);
    background: var(--border-subtle);
    flex: none;
}

.brand-sys {
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.topbar-tabs {
    display: flex;
    gap: var(--space-five);
    align-self: stretch;
    margin-left: var(--space-four);
}

.topbar-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t-fast) var(--e-standard);
}
.topbar-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--border-w));
    height: var(--rule-accent);
    background: var(--accent-strong);
    opacity: 0;
    transition: opacity var(--t-fast) var(--e-standard);
}
.topbar-tab:hover { color: var(--text-primary); }
.topbar-tab.is-active { color: var(--text-primary); }
.topbar-tab.is-active::after { opacity: 1; }

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-four);
    min-width: 0;
}

.util-sep { width: var(--border-w); height: var(--sep-h); background: var(--border-subtle); flex: none; }

.icon-btn {
    width: var(--icon-btn);
    height: var(--icon-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-w) solid var(--border-subtle);
    border-radius: 50%;
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
    flex: none;
    padding: 0;
    transition: border-color var(--t-base) var(--e-standard), color var(--t-base) var(--e-standard);
}
.icon-btn:hover { border-color: var(--border-hairline); color: var(--text-primary); }
.icon-btn svg { width: var(--icon-glyph); height: var(--icon-glyph); }

.theme-toggle { position: relative; }
.theme-toggle svg { position: absolute; inset: auto; transition: opacity var(--t-base) var(--e-standard), transform var(--t-base) var(--e-standard); }
.theme-toggle .i-moon { opacity: 1; transform: rotate(0deg); }
.theme-toggle .i-sun { opacity: 0; transform: rotate(calc(-1 * var(--turn-quarter))); }
[data-theme="dark"] .theme-toggle .i-moon { opacity: 0; transform: rotate(var(--turn-quarter)); }
[data-theme="dark"] .theme-toggle .i-sun { opacity: 1; transform: rotate(0deg); }

.user { display: flex; align-items: center; gap: var(--space-three); min-width: 0; }
.avatar {
    width: var(--avatar-chip);
    height: var(--avatar-chip);
    border-radius: 50%;
    background: var(--navy);
    color: var(--on-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: none;
}
[data-theme="dark"] .avatar { background: var(--accent-strong); color: var(--ink); }
.user-meta { display: flex; flex-direction: column; line-height: var(--lh-compact); min-width: 0; }
.user-name { font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; color: var(--text-primary); }
.user-mail { font-size: var(--fs-small); color: var(--text-muted); }
.user-name, .user-mail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wrap {
    max-width: var(--view);
    margin: 0 auto;
    padding: 0 var(--space-six);
}

.railed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
    gap: 0 var(--space-seven);
    align-items: start;
}
.rail-main { min-width: 0; }

.railed > .page-rail { margin-top: var(--space-eight); }
.page-rail {
    position: sticky;
    top: var(--rail-top);
    max-height: calc(100vh - var(--rail-top) - var(--space-six));
    overflow-y: auto;
    border-left: var(--border-w) solid var(--border-subtle);
    padding-left: var(--space-four);
}
.rail-eyebrow {
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-two);
}
.rail-link {
    position: relative;
    display: block;
    padding: var(--space-two) 0;
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: var(--lh-compact);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--t-fast) var(--e-standard);
}
.rail-link::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-four) - var(--border-w));
    top: var(--space-two);
    bottom: var(--space-two);
    width: var(--rule-accent);
    background: var(--accent-strong);
    opacity: 0;
    transition: opacity var(--t-fast) var(--e-standard);
}
.rail-link:hover { color: var(--text-primary); }
.rail-link[aria-current="true"] { color: var(--text-primary); }
.rail-link[aria-current="true"]::before { opacity: 1; }
.railed [data-stop] { scroll-margin-top: var(--rail-top); }

.rail-strip {
    display: none;
    flex-wrap: wrap;
    gap: var(--space-two) var(--space-four);
    padding: var(--space-three) 0;
    border-bottom: var(--border-w) solid var(--border-subtle);
}
.rail-strip .rail-link { padding: var(--space-one) 0; }
.rail-strip .rail-link::before { content: none; }

@media (max-width: 88rem) {
    .railed { grid-template-columns: minmax(0, 1fr); }
    .page-rail { display: none; }
    .rail-strip { display: flex; }
}

.foot { margin: var(--space-nine) 0 var(--space-eight); }
.foot-inner {
    border-top: var(--border-w) solid var(--border-rule);
    padding-top: var(--space-four);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-four);
}
.foot img { height: var(--logo-foot); width: auto; opacity: var(--logo-foot-fade); display: block; }
.foot .gen { font-size: var(--fs-small); color: var(--text-muted); }

[data-anim="1"] [data-reveal] { opacity: 0; transform: translateY(var(--reveal-drop)); }
[data-anim="1"][data-ready] [data-reveal] {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--t-reveal) var(--e-entrance) var(--reveal-delay, 0ms),
        transform var(--t-reveal) var(--e-entrance) var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    [data-anim="1"] [data-reveal] { opacity: 1; transform: none; }
}