/* Hand-written site styles. Tailwind utilities are compiled separately to wwwroot/tailwind.css
   and linked after this file - see Components/App.razor. */

/* FocusOnNavigate (Components/Routes.razor) moves focus to the page's h1 after every navigation,
   so a screen reader announces the new page. The h1 isn't interactive, so it takes that focus
   without the browser's focus ring, which otherwise boxed every title after a link was followed. */
h1:focus { outline: none; }

/* ── Race-condition glitch on "Unsafe" ─────────────── */
/* JS-driven for true randomness - see glitch-text.js  */
.glitch-text {
    position: relative;
    display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.glitch-text::before {
    color: #ff6b6b;
    transform: translate(var(--g-before-tx, 0), var(--g-before-ty, 0));
    clip-path: var(--g-before-clip, inset(0 0 60% 0));
    opacity: var(--g-before-o, 0);
}

.glitch-text::after {
    color: #6ea8e0;
    transform: translate(var(--g-after-tx, 0), var(--g-after-ty, 0));
    clip-path: var(--g-after-clip, inset(60% 0 0 0));
    opacity: var(--g-after-o, 0);
}

html {
    scroll-behavior: smooth;
}

/* Smooth transitions for NavLink active states */
a.active {
    color: white !important;
}

/* Hero headline border treatment */
.hero-headline {
    border: 1px solid rgba(96, 165, 250, 0.2);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    background: rgba(96, 165, 250, 0.03);
    display: inline-block;
}

/* Pixel field canvas - viewport-fixed with mesh lines */
.pixel-field-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -5;
}

/* Pixel squares - viewport-fixed cross breeze (legacy CSS version) */
.pixel-field {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -5;
}

.pixel-field .px-square {
    position: absolute;
    border-radius: 2px;
    opacity: 0;
}

@keyframes drift {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
    8%   { opacity: var(--peak, 0.7); }
    70%  { opacity: calc(var(--peak, 0.7) * 0.6); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

.pixel-field .px-left  { animation: drift var(--duration) var(--delay) ease-out infinite; }
.pixel-field .px-right { animation: drift var(--duration) var(--delay) ease-out infinite; }

/* Milestone card breathing glow effects */
@keyframes breathe-blue {
    0%, 100% { box-shadow: 0 0 8px rgba(96, 165, 250, 0.15), inset 0 0 8px rgba(96, 165, 250, 0.03); border-color: rgba(96, 165, 250, 0.2); }
    50% { box-shadow: 0 0 20px rgba(96, 165, 250, 0.3), inset 0 0 12px rgba(96, 165, 250, 0.06); border-color: rgba(96, 165, 250, 0.4); }
}

@keyframes breathe-yellow {
    0%, 100% { box-shadow: 0 0 8px rgba(234, 179, 8, 0.15), inset 0 0 8px rgba(234, 179, 8, 0.03); border-color: rgba(234, 179, 8, 0.2); }
    50% { box-shadow: 0 0 20px rgba(234, 179, 8, 0.3), inset 0 0 12px rgba(234, 179, 8, 0.06); border-color: rgba(234, 179, 8, 0.4); }
}

.milestone-complete {
    animation: breathe-blue 4s ease-in-out infinite;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.milestone-active {
    animation: breathe-yellow 3s ease-in-out infinite;
    border: 1px solid rgba(234, 179, 8, 0.2);
}

/* ── Citation target highlight ──────────────────────────── */
/* JS adds .cite-active when a [N] link scrolls to #ref-N */
[id^="ref-"].cite-active > a {
    transition: none !important;
    animation: cite-pulse 1s ease-in-out 3, cite-fade 1s ease-out 3s forwards !important;
    border-radius: 6px;
}

@keyframes cite-pulse {
    0%, 100% { background: rgba(234, 179, 8, 0.06); box-shadow: 0 0 8px rgba(234, 179, 8, 0.15); }
    50%      { background: rgba(234, 179, 8, 0.20); box-shadow: 0 0 24px rgba(234, 179, 8, 0.5), inset 0 0 10px rgba(234, 179, 8, 0.06); }
}

@keyframes cite-fade {
    0%   { background: rgba(234, 179, 8, 0.06); box-shadow: 0 0 8px rgba(234, 179, 8, 0.15); }
    100% { background: transparent; box-shadow: none; }
}

/* Collapsible milestone details */
.milestone-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.milestone-details.open {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.6s ease-in, opacity 0.3s ease-in;
}

.milestone-toggle {
    cursor: pointer;
    user-select: none;
}

.milestone-toggle .chevron {
    transition: transform 0.3s ease;
    display: inline-block;
}

.milestone-toggle .chevron.rotated {
    transform: rotate(90deg);
}

/* Generic details [ + ] / [ - ] toggle indicators */
details[open] .tc-closed,
details[open] .sources-closed,
details[open] .energy-closed,
details[open] .assumptions-closed { display: none; }
details:not([open]) .tc-open,
details:not([open]) .sources-open,
details:not([open]) .energy-open,
details:not([open]) .assumptions-open { display: none; }

/* Milestone 0 comparison animation (vertical: traditional top, continuum bottom) */
.m0-canvas-section {
    width: 100%;
    height: 620px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(34, 34, 34, 0.2);
    border-bottom: 1px solid rgba(34, 34, 34, 0.2);
}
@media (max-width: 768px) {
    .m0-canvas-section {
        height: 520px;
    }
}
.m0-canvas-section canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Temporal durability dual-canvas (fragile + durable) */
.td-canvas-section {
    width: 100%;
    height: 460px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(34, 34, 34, 0.2);
    border-bottom: 1px solid rgba(34, 34, 34, 0.2);
}
@media (max-width: 768px) {
    .td-canvas-section {
        height: 340px;
    }
}
.td-canvas-section canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Code blocks - Shiki output + no-JS fallback */
pre.code-block,
pre:has(> code[class*="language-"]) {
    background: rgba(26, 26, 26, 0.5);
    border: 1px solid rgba(34, 34, 34, 0.3);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.7;
    overflow-x: auto;
    margin: 0;
}

pre.code-block {
    background: rgba(26, 26, 26, 0.5) !important;
}

pre.code-block code,
pre > code[class*="language-"] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

pre.code-block .line:last-child:empty {
    display: none;
}

/* Dark scrollbar for code blocks */
pre.code-block,
pre:has(> code[class*="language-"]) {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

pre.code-block::-webkit-scrollbar,
pre:has(> code[class*="language-"])::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

pre.code-block::-webkit-scrollbar-track,
pre:has(> code[class*="language-"])::-webkit-scrollbar-track {
    background: transparent;
}

pre.code-block::-webkit-scrollbar-thumb,
pre:has(> code[class*="language-"])::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

pre.code-block::-webkit-scrollbar-thumb:hover,
pre:has(> code[class*="language-"])::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Copy button */
.muthr-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: rgba(160, 160, 160, 0.4);
    background: rgba(17, 17, 17, 0.7);
    border: 1px solid rgba(51, 51, 51, 0.3);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
    opacity: 0;
}

.muthr-code:hover .muthr-copy,
.muthr-copy:focus-visible {
    opacity: 1;
}

.muthr-copy:hover {
    color: rgba(200, 200, 200, 0.8);
    border-color: rgba(80, 80, 80, 0.5);
    background: rgba(25, 25, 25, 0.9);
}

.muthr-copy.muthr-copied {
    color: #33ff33;
    border-color: rgba(51, 255, 51, 0.3);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════ */
/* MU-TH-UR TERMINAL CODE SWITCHER                     */
/* ═══════════════════════════════════════════════════ */

.muthr-code {
    position: relative;
}

.muthr-toggle {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: rgba(160, 160, 160, 0.6);
    background: rgba(17, 17, 17, 0.8);
    border: 1px solid rgba(51, 51, 51, 0.4);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
}

.muthr-toggle:hover {
    color: #33ff33;
    border-color: rgba(51, 255, 51, 0.4);
    background: rgba(10, 20, 10, 0.9);
}

.muthr-toggle[disabled] {
    pointer-events: none;
    opacity: 0.3;
}

.muthr-toggle-icon {
    font-size: 0.65rem;
    opacity: 0.5;
}

/* Terminal mode - active during animation */
.muthr-code.muthr-animating pre {
    position: relative !important;
    overflow: hidden !important;
    border-color: rgba(51, 255, 51, 0.25) !important;
    background: rgba(5, 15, 5, 0.95) !important;
    box-shadow: 0 0 30px rgba(51, 255, 51, 0.05), inset 0 0 60px rgba(0, 0, 0, 0.3);
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

/* CRT scanlines */
.muthr-code.muthr-animating pre::before {
    content: '' !important;
    position: absolute !important;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.25) 2px,
        rgba(0, 0, 0, 0.25) 4px
    ) !important;
    border-radius: inherit;
}

/* CRT vignette + flicker */
.muthr-code.muthr-animating pre::after {
    content: '' !important;
    position: absolute !important;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%) !important;
    animation: muthr-flicker 3s ease-in-out infinite;
}

@keyframes muthr-flicker {
    0%, 100% { opacity: 0.85; }
    48% { opacity: 1; }
    50% { opacity: 0.7; }
    52% { opacity: 1; }
    90% { opacity: 0.9; }
    92% { opacity: 0.75; }
    93% { opacity: 1; }
}

.muthr-terminal-overlay {
    position: relative;
    z-index: 2;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #33ff33;
    white-space: pre;
    overflow-x: auto;
    text-shadow: 0 0 4px rgba(51, 255, 51, 0.3);
}

/* Skip button state during animation */
.muthr-toggle.muthr-skip {
    pointer-events: auto !important;
    opacity: 1 !important;
    color: rgba(51, 255, 51, 0.5);
    border-color: rgba(51, 255, 51, 0.2);
    cursor: pointer;
}

.muthr-toggle.muthr-skip:hover {
    color: #33ff33;
    border-color: rgba(51, 255, 51, 0.5);
}

.muthr-cursor {
    display: inline;
    color: #33ff33;
    text-shadow: 0 0 6px rgba(51, 255, 51, 0.5);
    animation: muthr-blink 530ms step-end infinite;
}

@keyframes muthr-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════ */
/* HOLOGRAPHIC NAV                                     */
/* ═══════════════════════════════════════════════════ */

/* Focal point button */
.holo-focal {
    position: relative;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 51;
}

.holo-focal__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6ea8e0;
    position: relative;
    z-index: 2;
    transition: background 0.3s ease;
}

.holo-focal__ring {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(110, 168, 224, 0.4);
    animation: focal-pulse 3s ease-in-out infinite;
    transition: border-color 0.3s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

@keyframes focal-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 0.2; }
}

/* Flare state - JS toggles this when bridge pulse arrives */
.holo-focal__ring--flare {
    transform: scale(1.6) !important;
    opacity: 0.9 !important;
    border-color: rgba(110, 168, 224, 0.8) !important;
    box-shadow: 0 0 12px rgba(110, 168, 224, 0.5);
    animation: none !important;
}

.holo-focal--active .holo-focal__dot {
    background: #e8a040;
}

.holo-focal--active .holo-focal__ring {
    border-color: rgba(232, 160, 64, 0.5);
}

/* Backdrop - dims page behind nav panel */
.holo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    background: rgba(2, 4, 10, 0);
    transition: background 0.25s ease;
}

.holo-backdrop--visible {
    display: block;
    background: rgba(2, 4, 10, 0.7);
}

/* Floating panel */
.holo-panel {
    position: fixed;
    /* top/left set dynamically by JS to track focal button */
    border-radius: 16px;
    background: rgba(8, 12, 22, 0.92);
    border: 1px solid rgba(110, 168, 224, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(110, 168, 224, 0.2);
    background-image: radial-gradient(rgba(110, 168, 224, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow: visible;
    transform: scale(0.95) translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.2s ease, visibility 0.2s ease,
                width 0.2s ease, height 0.2s ease;
    transform-origin: top left;
    z-index: 41;
}

.holo-panel--visible {
    transform: scale(1) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Bridge line: JS-positioned element connecting focal dot to panel top */
/* Bridge: matches SVG .holo-line--bridge style (dashed, 1.5px, subtle) */
.holo-bridge {
    position: fixed;
    width: 0;
    border-left: 1.5px dashed rgba(110, 168, 224, 0.35);
    z-index: 52;
    transform-origin: top center;
    opacity: 0;
    transform: scaleY(0);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: none;
}

.holo-bridge--visible {
    opacity: 1;
    transform: scaleY(1);
    animation: holo-bridge-pulse 2.5s ease-in-out 0.5s infinite;
}

@keyframes holo-bridge-pulse {
    0%, 100% {
        border-left-color: rgba(110, 168, 224, 0.35);
    }
    50% {
        border-left-color: rgba(110, 168, 224, 0.6);
    }
}

/* Junction node - sits on the panel border where bridge meets panel */
.holo-bridge__junction {
    position: absolute;
    bottom: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(8, 12, 22, 0.95);
    border: 1.5px solid rgba(110, 168, 224, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}

.holo-bridge--visible .holo-bridge__junction {
    opacity: 1;
    animation: holo-junction-glow 2.5s ease-in-out 0.5s infinite;
}

@keyframes holo-junction-glow {
    0%, 100% {
        border-color: rgba(110, 168, 224, 0.5);
        box-shadow: 0 0 4px rgba(110, 168, 224, 0.2);
    }
    50% {
        border-color: rgba(110, 168, 224, 0.8);
        box-shadow: 0 0 8px rgba(110, 168, 224, 0.5);
    }
}

/* Traveling pulse dot along the bridge - matches SVG .holo-packet style */
.holo-bridge__pulse {
    position: absolute;
    left: -2.5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6ea8e0;
    opacity: 0;
    filter: drop-shadow(0 0 4px #6ea8e0) blur(0.3px);
}

.holo-bridge--visible .holo-bridge__pulse {
    animation: holo-bridge-dot 2s ease-in-out 0.6s infinite;
}

@keyframes holo-bridge-dot {
    0% { top: -3px; opacity: 0; }
    8% { opacity: 0.9; }
    85% { opacity: 0.9; }
    100% { top: calc(100% - 3px); opacity: 0; }
}

/* Trail dots behind the bridge pulse */
.holo-bridge__trail {
    position: absolute;
    left: -1.5px;
    border-radius: 50%;
    background: #6ea8e0;
    opacity: 0;
}

.holo-bridge__trail--1 {
    width: 4px;
    height: 4px;
}

.holo-bridge__trail--2 {
    width: 3px;
    height: 3px;
    left: -1px;
}

.holo-bridge__trail--3 {
    width: 2px;
    height: 2px;
    left: -0.5px;
}

.holo-bridge--visible .holo-bridge__trail--1 {
    animation: holo-bridge-trail1 2s ease-in-out 0.6s infinite;
}
.holo-bridge--visible .holo-bridge__trail--2 {
    animation: holo-bridge-trail2 2s ease-in-out 0.6s infinite;
}
.holo-bridge--visible .holo-bridge__trail--3 {
    animation: holo-bridge-trail3 2s ease-in-out 0.6s infinite;
}

@keyframes holo-bridge-trail1 {
    0% { top: -3px; opacity: 0; }
    12% { opacity: 0.22; }
    85% { opacity: 0.22; }
    100% { top: calc(100% - 7px); opacity: 0; }
}
@keyframes holo-bridge-trail2 {
    0% { top: -3px; opacity: 0; }
    16% { opacity: 0.14; }
    85% { opacity: 0.14; }
    100% { top: calc(100% - 11px); opacity: 0; }
}
@keyframes holo-bridge-trail3 {
    0% { top: -3px; opacity: 0; }
    20% { opacity: 0.08; }
    85% { opacity: 0.08; }
    100% { top: calc(100% - 15px); opacity: 0; }
}

.holo-panel--closing {
    transform: scale(0.95) translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.15s ease, opacity 0.12s ease, visibility 0.15s ease;
}

@media (max-width: 639px) {
    .holo-panel {
        left: 12px !important;
        right: 12px;
        width: auto !important;
        height: auto !important;
    }
}

/* ── Mobile list mode ─────────────────────────────────────────── */
.holo-list {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}

.holo-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid rgba(110, 168, 224, 0.08);
    transition: background 0.15s ease;
}

.holo-list__item:last-child {
    border-bottom: none;
}

.holo-list__item:hover {
    background: rgba(110, 168, 224, 0.06);
}

.holo-list__item--expanded {
    background: rgba(232, 160, 64, 0.06);
}

.holo-list__item--expanded .holo-node__pip {
    background: #e8a040;
}

.holo-list__item--expanded > .holo-node__chevron {
    transform: rotate(90deg);
    color: rgba(232, 160, 64, 0.7);
}

.holo-list__item--current {
    background: rgba(110, 168, 224, 0.08);
}

.holo-list__item--current .holo-node__pip {
    background: #8fc4f0;
    box-shadow: 0 0 6px rgba(110, 168, 224, 0.5);
}

.holo-list__item--current .holo-node__label {
    color: rgba(230, 230, 240, 1);
}

.holo-list__item--child {
    border-bottom-color: rgba(232, 160, 64, 0.08);
}

.holo-list__item--grandchild {
    font-size: 0.85rem;
}

/* SVG layer for connection lines */
.holo-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.holo-line {
    opacity: 0;
    animation: holo-line-in 0.3s ease forwards;
}

/* Draw-on: stroke-dashoffset animates to 0 after JS sets initial values */
.holo-line--draw {
    animation: holo-line-draw 0.5s ease forwards;
}

@keyframes holo-line-in {
    from { opacity: 0; }
    to { opacity: 0.4; }
}

@keyframes holo-line-draw {
    from { stroke-dashoffset: inherit; opacity: 0.1; }
    to { stroke-dashoffset: 0; opacity: 0.6; }
}

.holo-line--active {
    animation-name: holo-line-in-active;
}

.holo-line--active.holo-line--draw {
    animation-name: holo-line-draw;
}

@keyframes holo-line-in-active {
    from { opacity: 0; }
    to { opacity: 0.6; }
}

.holo-line--bridge {
    animation-name: holo-line-in-bridge;
}

@keyframes holo-line-in-bridge {
    from { opacity: 0; }
    to { opacity: 0.35; }
}

/* Pulsing data packets with glow */
.holo-packet {
    opacity: 0.9;
    filter: drop-shadow(0 0 4px currentColor) blur(0.3px);
}

.holo-packet-trail {
    filter: blur(0.8px);
}

/* Nodes container - absolute in graph mode, relative in list mode */
.holo-nodes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

@media (max-width: 639px) {
    .holo-nodes {
        position: relative;
    }
}

/* Node tile */
.holo-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    width: 190px;
    box-sizing: border-box;
    border-radius: 8px;
    background: rgba(14, 20, 36, 0.8);
    border: 1px solid rgba(110, 168, 224, 0.25);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transform: scale(0.7);
    opacity: 0;
    animation: holo-node-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.holo-node--leaf {
    width: 210px;
}

.holo-node:hover {
    border-color: rgba(110, 168, 224, 0.6);
    background: rgba(14, 20, 36, 0.95);
}

.holo-node--current {
    border-color: rgba(110, 168, 224, 0.6);
    background: rgba(110, 168, 224, 0.1);
}

.holo-node--current .holo-node__pip {
    background: #8fc4f0;
    box-shadow: 0 0 6px rgba(110, 168, 224, 0.5);
}

.holo-node--current .holo-node__label {
    color: rgba(230, 230, 240, 1);
}

.holo-node--expanded {
    border-color: rgba(232, 160, 64, 0.5);
    box-shadow: 0 0 8px rgba(232, 160, 64, 0.2), 0 0 20px rgba(232, 160, 64, 0.08);
    animation: holo-node-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               holo-node-pulse 2.5s ease-in-out 0.3s infinite;
}

.holo-node--expanded:hover {
    border-color: rgba(232, 160, 64, 0.7);
}

@keyframes holo-node-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(232, 160, 64, 0.2), 0 0 20px rgba(232, 160, 64, 0.08);
        border-color: rgba(232, 160, 64, 0.5);
    }
    50% {
        box-shadow: 0 0 14px rgba(232, 160, 64, 0.35), 0 0 30px rgba(232, 160, 64, 0.15);
        border-color: rgba(232, 160, 64, 0.7);
    }
}

@keyframes holo-node-in {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Node collapse-out animation */
.holo-node--departing {
    animation: holo-node-out 0.15s ease forwards !important;
    pointer-events: none;
}

@keyframes holo-node-out {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.7); opacity: 0; }
}

/* SVG line collapse-out */
.holo-line--departing {
    animation: holo-line-out 0.15s ease forwards !important;
}

@keyframes holo-line-out {
    from { opacity: 0.6; }
    to { opacity: 0; }
}

/* Node pip dot */
.holo-node__pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6ea8e0;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.holo-node--expanded .holo-node__pip {
    background: #e8a040;
}

/* Node label */
.holo-node__label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(230, 230, 240, 0.85);
    letter-spacing: 0.02em;
}

/* Node chevron */
.holo-node__chevron {
    font-size: 0.6rem;
    color: rgba(110, 168, 224, 0.5);
    transition: transform 0.25s ease, color 0.2s ease;
    flex-shrink: 0;
}

.holo-node--expanded .holo-node__chevron {
    transform: rotate(90deg);
    color: rgba(232, 160, 64, 0.7);
}

/* ── Breadcrumb trail ─────────────────────────────────────────── */
.holo-breadcrumb {
    display: none;
    align-items: center;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: rgba(110, 168, 224, 0.5);
    overflow: hidden;
    white-space: nowrap;
    margin-left: 8px;
}

@media (min-width: 768px) {
    .holo-breadcrumb {
        display: flex;
    }
}

.holo-crumb__sep {
    color: rgba(110, 168, 224, 0.3);
    margin: 0 1px;
}

.holo-crumb__link {
    color: rgba(110, 168, 224, 0.6);
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    position: relative;
}

.holo-crumb__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #6ea8e0;
    transition: width 0.25s ease;
}

.holo-crumb__link:hover {
    color: #6ea8e0;
    text-shadow: 0 0 8px rgba(110, 168, 224, 0.4);
}

.holo-crumb__link:hover::after {
    width: 100%;
}

.holo-crumb__current {
    color: rgba(232, 160, 64, 0.8);
}

.holo-crumb__null {
    color: rgba(110, 168, 224, 0.35);
    font-style: italic;
}

.holo-crumb__cursor {
    display: inline-block;
    animation: blink-cursor 1s step-end infinite;
    color: rgba(232, 160, 64, 0.9);
    margin-left: 1px;
}

/* Hover preview state - slightly brighter to indicate preview */
.holo-breadcrumb--preview {
    color: rgba(110, 168, 224, 0.7);
    transition: color 0.15s ease;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── Currently Building card hover depth ─────────────────── */
.building-card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.building-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 1px rgba(96, 165, 250, 0.2);
    transform: translateY(-2px);
}

/* ── Article card hover ──────────────────────────────────── */
.article-card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.article-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

/* ── Scroll reveal ───────────────────────────────────────── */
/* Hidden state is set by JS (.reveal--hidden), not by .reveal itself,
   so content is always visible if JS hasn't initialized yet. */
.reveal--hidden {
    opacity: 0;
    transform: translateY(20px);
}

.reveal--animate {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Milestone badge shimmer ─────────────────────────────── */
@keyframes badge-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.badge-shimmer {
    background-size: 200% 100%;
    animation: badge-shimmer 3s ease-in-out infinite;
}

.badge-shimmer--green {
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(74, 222, 128, 0.15) 25%,
        rgba(74, 222, 128, 0.3) 50%,
        rgba(74, 222, 128, 0.15) 75%,
        transparent 100%
    );
}

.badge-shimmer--yellow {
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(250, 204, 21, 0.12) 25%,
        rgba(250, 204, 21, 0.25) 50%,
        rgba(250, 204, 21, 0.12) 75%,
        transparent 100%
    );
}

/* ═══════════════════════════════════════════════════ */
/* CONTINUUM DOCS - ContinuumDocsLayout.razor          */
/* ═══════════════════════════════════════════════════ */

/* Three columns at xl (tree | content | on this page), two at lg, one below. */
.docs-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}
@media (min-width: 1024px) {
    .docs-shell { grid-template-columns: 12.5rem minmax(0, 1fr); }
}
@media (min-width: 1280px) {
    .docs-shell { grid-template-columns: 12.5rem minmax(0, 1fr) 11rem; }
}

.docs-sidebar,
.docs-toc {
    display: none;
}
@media (min-width: 1024px) {
    .docs-sidebar {
        display: block;
        position: sticky;
        top: 6rem;
        align-self: start;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
    }
}
@media (min-width: 1280px) {
    .docs-toc:not([hidden]) {
        display: block;
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}

.docs-tree-section {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e5e7eb;
    margin: 1.5rem 0 0.5rem;
}
.docs-tree-section:first-child { margin-top: 0; }

.docs-tree-link {
    display: block;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: #9ca3af;
    transition: color 0.15s, background 0.15s;
}
.docs-tree-link:hover { color: #e5e7eb; background: rgba(255, 255, 255, 0.03); }
.docs-tree-link[aria-current="page"] {
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.1);
    box-shadow: inset 2px 0 0 #60a5fa;
}

/* A featured section ("Advanced inference", ContinuumNavSection.Featured): the label in the
   accent with a rule fading out beside it, and each link a small card in the lead callout's
   gradient, led by a teal dot that breathes like the animations' junction dots. It stands out
   from the tree without leaving its type scale. */
.docs-tree-section--featured {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #60a5fa;
}
.docs-tree-section--featured::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.45), rgba(96, 165, 250, 0));
}
.docs-tree-link--featured {
    position: relative;
    margin-top: 0.25rem;
    padding: 0.55rem 0.75rem 0.55rem 1.6rem;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(167, 139, 250, 0.06) 60%, rgba(17, 17, 17, 0.4));
    color: #e5e7eb;
    transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.docs-tree-link--featured::before {
    content: "";
    position: absolute;
    left: 0.7rem;
    top: 0.95rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2dd4bf;
    animation: docs-dot-breathe 2.5s ease-out infinite;
}
.docs-tree-link--featured:hover {
    color: #fff;
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 18px -6px rgba(96, 165, 250, 0.45);
}
.docs-tree-link--featured[aria-current="page"] {
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: inset 2px 0 0 #60a5fa, 0 0 18px -6px rgba(96, 165, 250, 0.5);
}
@keyframes docs-dot-breathe {
    0%   { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(45, 212, 191, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}

/* The hero link (ContinuumDocsLayout.HeroLink): the one deeper page a docs page leads to, under
   its lead. The featured sidebar card, at hero size. */
.docs-hero-link {
    position: relative;
    display: block;
    margin-top: 1.5rem;
    padding: 0.9rem 1.25rem 0.95rem 2.25rem;
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(167, 139, 250, 0.06) 60%, rgba(17, 17, 17, 0.5));
    transition: border-color 0.15s, box-shadow 0.15s;
}
.docs-hero-link::before {
    content: "";
    position: absolute;
    left: 1.05rem;
    top: 1.2rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2dd4bf;
    animation: docs-dot-breathe 2.5s ease-out infinite;
}
.docs-hero-link:hover {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 0 28px -10px rgba(96, 165, 250, 0.55);
}
.docs-hero-link-kicker {
    display: block;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #60a5fa;
}
.docs-hero-link-label {
    display: block;
    margin-top: 0.3rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
    .docs-tree-link--featured::before,
    .docs-hero-link::before { animation: none; }
}

/* Below lg the tree folds into a <details> above the content. */
.docs-sidebar-mobile {
    margin-bottom: 1.5rem;
    border: 1px solid rgba(34, 34, 34, 0.8);
    border-radius: 0.5rem;
    background: rgba(17, 17, 17, 0.6);
}
.docs-sidebar-mobile > summary {
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #60a5fa;
}
.docs-sidebar-mobile > .docs-tree { padding: 0 0.5rem 0.75rem; }
@media (min-width: 1024px) {
    .docs-sidebar-mobile { display: none; }
}

/* Articles in a series (ArticleLayout with a Sidebar) use the same tree. Two columns from lg
   up, never three - an article has no "On this page" list. The article's own sections keep
   their px-6, so the shell adds no padding of its own: a 1rem gap plus that 1.5rem matches the
   docs' 2.5rem gutter, and the tree's 3rem top lines it up with the hero's md:pt-12. */
@media (min-width: 1024px) {
    .docs-shell.docs-shell--article { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1rem; }
    .docs-shell--article > .docs-sidebar { padding: 3rem 0 0 1.5rem; }
}
.docs-shell--article .docs-sidebar-mobile { margin: 1.5rem 1.5rem 0; }

/* ═══════════════════════════════════════════════════ */
/* DEV ENTRIES - Pages/DevEntries, DevEntryLayout      */
/* ═══════════════════════════════════════════════════ */

/* The search box and tag chips, revealed by dev-entries.js. */
.dev-search { margin-bottom: 1.5rem; }
.dev-search-input {
    width: 100%;
    max-width: 36rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    background: transparent;
    color: #e5e7eb;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
    transition: border-color 0.15s;
}
.dev-search-input::placeholder { color: rgba(156, 163, 175, 0.6); }
.dev-search-input:focus { outline: none; border-color: rgba(96, 165, 250, 0.5); }

.dev-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.dev-tag {
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    background: transparent;
    color: #9ca3af;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.dev-tag:hover { color: #e5e7eb; border-color: rgba(96, 165, 250, 0.4); }
/* A pressed tag looks like the docs tree's current page. */
.dev-tag[aria-pressed="true"] {
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(96, 165, 250, 0.1);
}

.dev-count {
    min-height: 1rem;
    margin-top: 0.75rem;
    color: rgba(156, 163, 175, 0.6);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
}
.dev-empty {
    color: rgba(156, 163, 175, 0.8);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
}
/* The cards carry Tailwind's .block, which outranks the UA's [hidden] { display: none }. */
[data-dev-entry][hidden] { display: none; }

/* A line someone said, quoted in a dev entry: the speaker in small mono caps, the words below,
   a rule down the left in the accent. Consecutive quotes stack as one exchange. */
.dev-quote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 2px solid rgba(96, 165, 250, 0.45);
}
.dev-quote + .dev-quote { margin-top: -0.5rem; }
.dev-quote-who {
    margin-bottom: 0.2rem;
    color: #60a5fa;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dev-quote-words { color: #e5e7eb; font-size: 1.05rem; line-height: 1.6; }

/* Tags on a card and in an entry's hero. In the hero they link to the filtered landing page. */
.dev-card-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; }
.dev-card-tags > li {
    padding: 0.1rem 0.5rem;
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 0.375rem;
    color: rgba(147, 197, 253, 0.8);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
}
.dev-card-tags a { transition: color 0.15s; }
.dev-card-tags a:hover { color: #fff; }

.docs-toc ul { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.docs-toc li a {
    display: block;
    margin-left: -1px;
    padding: 0.25rem 0 0.25rem 0.85rem;
    border-left: 1px solid transparent;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #9ca3af;
    transition: color 0.15s, border-color 0.15s;
}
.docs-toc li a:hover { color: #e5e7eb; }
.docs-toc li a[aria-current="true"] { color: #93c5fd; border-left-color: #60a5fa; }
.docs-toc-top {
    display: inline-block;
    margin-top: 1rem;
    padding-left: 0.85rem;
    font-size: 0.75rem;
    color: rgba(156, 163, 175, 0.7);
}
.docs-toc-top:hover { color: #e5e7eb; }

/* Headings land below the sticky site nav, with their section label still visible. */
.docs-content h2[id] { scroll-margin-top: 7.5rem; }

.docs-section {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(34, 34, 34, 0.6);
}
@media (min-width: 768px) {
    .docs-section { padding: 2rem 0; }
}

.docs-callout {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.06), rgba(17, 17, 17, 0.6));
    color: #9ca3af;
    line-height: 1.7;
}

.docs-prose > * + * { margin-top: 1rem; }
.docs-prose p,
.docs-prose li { color: #9ca3af; line-height: 1.75; }
.docs-prose a,
.docs-callout a { color: #60a5fa; transition: color 0.15s; }
.docs-prose a:hover,
.docs-callout a:hover { color: #93c5fd; }
.docs-prose strong { color: #fff; font-weight: 600; }
.docs-prose em { color: #d1d5db; }
.docs-prose code,
.docs-table code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.85em;
    color: #93c5fd;
}

.docs-list { padding-left: 1.1rem; list-style: disc; }
.docs-list li + li { margin-top: 0.6rem; }
.docs-list li::marker { color: rgba(96, 165, 250, 0.6); }

.docs-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(34, 34, 34, 0.9);
    border-radius: 0.5rem;
}
.docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.docs-table th {
    text-align: left;
    padding: 0.55rem 0.9rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #60a5fa;
    background: rgba(17, 17, 17, 0.9);
}
.docs-table td {
    padding: 0.55rem 0.9rem;
    vertical-align: top;
    color: #9ca3af;
    border-top: 1px solid rgba(34, 34, 34, 0.9);
}
.docs-table td:first-child { color: #e5e7eb; white-space: nowrap; }
/* A table whose last column is prose. Below 36rem it scrolls inside .docs-table-wrap, rather
   than the nowrap first column squeezing that prose to a word or two a line (at 375px the
   durable inference page's timing table ran 1,583px tall). */
.docs-table--wide { min-width: 36rem; }

/* A fold for the numbers behind a claim: a chart's table view, earlier runs, the full setup. The
   claim and its one figure stay open, and the rest waits one click away. */
.docs-fold {
    margin-top: 1rem;
    border: 1px solid rgba(34, 34, 34, 0.9);
    border-radius: 0.5rem;
}
.docs-fold > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.6rem 0.9rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #60a5fa;
}
.docs-fold > summary::-webkit-details-marker { display: none; }
.docs-fold > summary::before { content: "+"; display: inline-block; width: 1rem; }
.docs-fold[open] > summary::before { content: "\2212"; }
.docs-fold > summary:hover { color: #93c5fd; }
.docs-fold > :not(summary) { margin: 0 0.9rem 0.9rem; }

/* ═══════════════════════════════════════════════════ */
/* DATA FIGURES - Components/Shared/Data                */
/* ═══════════════════════════════════════════════════ */

/* SummaryFigures: a page's results under its brief, each card a link to the section that shows
   it. The figure is the loudest thing on the card and the claim the next; the detail is in the
   muted mono of a label. Two across from 36rem, one below. */
.glance { margin: 1.5rem 0 0.5rem; }
.glance-label {
    margin-bottom: 0.75rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #60a5fa;
}
.glance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 36rem) {
    .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.glance-grid > li { display: flex; }
.glance-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(34, 34, 34, 0.9);
    border-radius: 0.75rem;
    background: rgba(17, 17, 17, 0.6);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.glance-card:hover,
.glance-card:focus-visible {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.05);
}
.glance-figure {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.glance-claim { font-size: 0.925rem; line-height: 1.5; color: #d1d5db; }
.glance-detail {
    margin-top: auto;
    padding-top: 0.35rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #6b7280;
}

/* Series colours, checked with the dataviz validator (dark mode, surface #0a0a0a): the three
   runtimes pass every check together, at most three hues to a figure, and Continuum's own time
   is the one emphasised series against the model's gray. Text never wears a series colour. */
.pstrip-row--lmstudio, .tsplit-swatch--lmstudio { --series: #d97706; }
.pstrip-row--vllm-nvfp4, .tsplit-swatch--vllm-nvfp4 { --series: #0fa292; }
.pstrip-row--vllm-bf16, .tsplit-swatch--vllm-bf16 { --series: #8b5cf6; }
.pstrip-row--continuum, .tsplit-swatch--continuum { --series: #3b82f6; }
.tsplit-swatch--model { --series: #52525b; }

/* The percentile strip (PercentileStrip.razor): label | track | values, one row per setup. */
.pstrip { margin: 1.5rem 0 0; }
.pstrip-caption { margin-bottom: 0.5rem; font-size: 0.875rem; color: #9ca3af; }
.pstrip-row,
.pstrip-axis {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr) 13rem;
    column-gap: 1.25rem;
    align-items: center;
}
.pstrip-row { padding: 0.6rem 0; border-bottom: 1px solid rgba(34, 34, 34, 0.6); }
.pstrip-label { font-size: 0.875rem; line-height: 1.3; color: #e5e7eb; }
.pstrip-note { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: #9ca3af; }
.pstrip-track { position: relative; height: 0.5rem; border-radius: 999px; background: #1a1a1a; }
.pstrip-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--series); opacity: 0.35; }
.pstrip-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-sizing: border-box; }
.pstrip-mark--p50 { width: 0.8rem; height: 0.8rem; background: var(--series); box-shadow: 0 0 0 2px #0a0a0a; }
.pstrip-mark--p95 { width: 0.7rem; height: 0.7rem; border: 2px solid var(--series); background: #0a0a0a; }
.pstrip-mark--p99 { width: 0.95rem; height: 0.95rem; border: 2px solid var(--series); }
/* Past the axis: an arrow at the track's end, the real number in the text beside it. */
.pstrip-mark--over {
    left: 100% !important;
    width: 0;
    height: 0;
    border-radius: 0;
    border: 0;
    background: none;
    box-shadow: none;
    border-top: 0.45rem solid transparent;
    border-bottom: 0.45rem solid transparent;
    border-left: 0.6rem solid var(--series);
    transform: translate(0.15rem, -50%);
}
.pstrip-values {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}
.pstrip-values strong { color: #e5e7eb; font-weight: 600; }
.pstrip-axis { padding-top: 0.4rem; }
.pstrip-ticks { position: relative; height: 1rem; }
.pstrip-ticks > span,
.pstrip-unit {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    color: #6b7280;
}
.pstrip-ticks > span { position: absolute; transform: translateX(-50%); }
@media (max-width: 639px) {
    .pstrip-row { grid-template-columns: minmax(0, 1fr); row-gap: 0.45rem; }
    .pstrip-axis { grid-template-columns: minmax(0, 1fr) auto; }
    .pstrip-axis > span:first-child { display: none; }
}

/* Where the time goes (TimeSplitBar.razor): one request as one bar at true scale, the small
   stretches labelled on leader arms. Below 640px the arms and in-bar text would shrink with the
   SVG, so a list takes their place. */
.tsplit { margin: 1.5rem 0 0; }
.tsplit-caption { margin-bottom: 0.5rem; font-size: 0.875rem; color: #9ca3af; }
.tsplit svg { display: block; width: 100%; height: auto; overflow: visible; }
.tsplit-seg { fill: #3b82f6; }
.tsplit-seg--model { fill: #52525b; }
.tsplit-arm { fill: none; stroke: #6b7280; stroke-width: 1; }
.tsplit-text { font-size: 12px; fill: #e5e7eb; }
.tsplit-text .tsplit-ms { fill: #9ca3af; }
.tsplit-axis-line { stroke: #222; }
.tsplit-axis-text { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 11px; fill: #6b7280; }
.tsplit-summary { margin-top: 0.4rem; font-size: 0.875rem; color: #e5e7eb; }
.tsplit-summary span { color: #9ca3af; }
.tsplit-legend { display: none; margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: #e5e7eb; }
.tsplit-legend li { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; }
.tsplit-legend .tsplit-ms { margin-left: auto; font-family: 'JetBrains Mono', 'Fira Code', monospace; color: #9ca3af; font-variant-numeric: tabular-nums; }
.tsplit-swatch { width: 0.7rem; height: 0.7rem; border-radius: 2px; background: var(--series); flex: none; }
@media (max-width: 639px) {
    .tsplit-labels, .tsplit-axis-text { display: none; }
    .tsplit-legend { display: block; }
}

.docs-roadmap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .docs-roadmap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.docs-roadmap > li > * {
    display: block;
    height: 100%;
    padding: 1rem;
    border: 1px solid rgba(34, 34, 34, 0.9);
    border-radius: 0.5rem;
    background: rgba(17, 17, 17, 0.6);
    transition: border-color 0.15s;
}
.docs-roadmap > li > a:hover { border-color: rgba(96, 165, 250, 0.35); }
.docs-roadmap-tag {
    display: block;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: #60a5fa;
}
.docs-roadmap-title { display: block; margin-top: 0.35rem; color: #fff; font-weight: 600; }
.docs-roadmap-body { display: block; margin-top: 0.35rem; font-size: 0.8125rem; line-height: 1.55; color: #9ca3af; }

.docs-next {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(34, 34, 34, 0.6);
    text-align: right;
}
.docs-next a {
    display: inline-block;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgba(34, 34, 34, 0.9);
    border-radius: 0.5rem;
    transition: border-color 0.15s;
}
.docs-next a:hover { border-color: rgba(96, 165, 250, 0.35); }

/* ═══════════════════════════════════════════════════ */
/* ANIMATION FIGURES - Components/Shared/Animations     */
/* ═══════════════════════════════════════════════════ */

/* Self-contained: the stage owns its height, and nothing here reaches outside the figure, so a
   figure can sit in any section or move between paragraphs. Size variants below. */
.anim-figure { margin: 1.5rem 0; }
.anim-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(34, 34, 34, 0.8);
    border-radius: 0.75rem;
    background: #0a0a0a;
}
.anim-stage canvas { display: block; width: 100%; height: 100%; }
.anim-caption {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(156, 163, 175, 0.8);
}

/* continuum-overview.js switches to its stacked layout below 600px of stage width, which the
   docs column reaches below a 648px viewport. Keep the two breakpoints together. */
.anim-stage--overview { height: 500px; }
@media (max-width: 647px) {
    .anim-stage--overview { height: 600px; }
}

/* continuum-system.js: the static platform diagram. Its compact (rows) layout starts below 600px
   of stage width, the same 648px viewport as the overview. */
/* milestone0.js in a docs column: the Milestone 0 page's own 620px / 520px heights. */
.anim-stage--m0 { height: 620px; }
@media (max-width: 768px) {
    .anim-stage--m0 { height: 520px; }
}

/* no-parking.js: the 404 page's parking lot, bays either side of a central aisle. */
.anim-stage--no-parking { height: 280px; }

.anim-stage--system { height: 440px; }
@media (max-width: 647px) {
    .anim-stage--system { height: 560px; }
}

/* benchmark-flow.js: the flow on top, the histogram in its own band below, and a 44px row at
   the bottom for the replay button. Its compact layout starts below 600px of stage width, the
   same 648px viewport as the overview, and takes the extra height for its taller 1 ms bins. */
.anim-stage--benchmark-flow { height: 360px; }
@media (max-width: 647px) {
    .anim-stage--benchmark-flow { height: 400px; }
}

/* Controls over a stage's bottom-right corner (AnimationFigure's Controls). They sit outside
   the aria-hidden stage so assistive tech can reach them. The replay button matches the
   terminal's (.muthr-toggle), in the site's blue rather than the terminal's green. */
.anim-frame { position: relative; }
.anim-controls {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
}
.anim-replay {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(160, 160, 160, 0.7);
    background: rgba(17, 17, 17, 0.8);
    border: 1px solid rgba(51, 51, 51, 0.5);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    backdrop-filter: blur(4px);
}
.anim-replay:hover,
.anim-replay:focus-visible {
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(10, 16, 28, 0.9);
}
.anim-replay:focus-visible { outline: 1px solid #60a5fa; outline-offset: 2px; }
.anim-replay[hidden] { display: none; }
.anim-replay-icon { font-size: 0.8rem; opacity: 0.7; }

/* Companion HTML (cards that label the stages) sits above the stage. Its cards stay
   transparent - border only - so they give way to the canvas and the space behind them, as
   the retired pitch page's store cards did. Don't give them a background. */
.anim-header { position: relative; z-index: 1; }

/* pipeline.js under its three store cards, as on the retired pitch page: borderless, transparent, and
   reaching up 128px (56px mobile) behind the transparent cards, so the warp streaks and nebula
   glow show through them. Those are the pitch page's own numbers: its cards' 32px bottom
   padding, its .pipeline-canvas-section's -80px margin and the canvas's -80px top (with the
   canvas 160px taller than the section, to overdraw the bleed) put the canvas 128px above the
   cards' bottom edge. Mobile halved the margins and the overdraw: -40px, -40px, +80px. That
   page and its CSS were removed on 2026-09-24; the geometry lives on here. The overlap stays
   inside the figure. */
.anim-stage--pipeline {
    height: 320px;
    margin-top: -128px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
@media (max-width: 768px) {
    .anim-stage--pipeline { height: 160px; margin-top: -56px; }
}

/* A type-on terminal block waits hidden, box and all in place, until it scrolls into view. */
.muthr-code.muthr-pending pre code { visibility: hidden; }