/* ==========================================================================
   undo.systems — styles.css
   palette: cool-gray monochrome with revision-red + phosphor-green accents
   typography: JetBrains Mono / Space Mono / IBM Plex Mono / Shippori Mincho
   ========================================================================== */

:root {
    --c-obsidian: #0d0f12;
    --c-slate:    #13171c;
    --c-graphite: #1d232b;
    --c-carbon:   #3b4553;
    --c-iron:     #6d7a86;
    --c-fog:      #8d9aa8;
    --c-pearl:    #c4ccd4;
    --c-red:      #d94f3f;
    --c-green:    #6fcfa4;

    --gutter: calc(100vw / 14);
    --off-register: calc(100vw / 14);
    --chapter-w: 120vw;
    --interval-w: 40vw;

    --font-body: "JetBrains Mono", ui-monospace, monospace;
    --font-display: "Space Mono", "JetBrains Mono", monospace;
    --font-hud: "IBM Plex Mono", ui-monospace, monospace;
    --font-marg: "Shippori Mincho", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-obsidian);
    color: var(--c-fog);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    font-feature-settings: "liga" 0, "calt" 0;
    overflow: hidden;
    height: 100%;
    cursor: none;
}

body {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

/* ---- Binary snow canvas --------------------------------------------------- */
#snow-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0.32;
    z-index: 2;
    mix-blend-mode: screen;
}

/* ---- Scanline overlay ----------------------------------------------------- */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(59, 69, 83, 0.0) 0px,
        rgba(59, 69, 83, 0.0) 2px,
        rgba(59, 69, 83, 0.10) 3px,
        rgba(59, 69, 83, 0.0) 4px
    );
    animation: scan-drift 3s cubic-bezier(.4,.0,.6,1) infinite;
    opacity: 0.7;
}
@keyframes scan-drift {
    0%   { background-position-y: 0; }
    100% { background-position-y: 4px; }
}

/* ---- Horizontal tear strip ----------------------------------------------- */
.tear-strip {
    position: fixed;
    left: 0;
    top: 40vh;
    width: 20vw;
    height: 14px;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(
        to bottom,
        rgba(197, 204, 212, 0.0) 0%,
        rgba(197, 204, 212, 0.08) 30%,
        rgba(217, 79, 63, 0.22) 50%,
        rgba(197, 204, 212, 0.08) 70%,
        rgba(197, 204, 212, 0.0) 100%
    );
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: none;
}
.tear-strip.tear-active {
    opacity: 1;
}

/* ---- Custom caret cursor -------------------------------------------------- */
.custom-caret {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 16px;
    background: var(--c-red);
    z-index: 9999;
    pointer-events: none;
    transform: translate3d(-100px, -100px, 0);
    mix-blend-mode: screen;
    animation: caret-blink 1.05s steps(2, end) infinite;
    will-change: transform;
    box-shadow: 0 0 6px rgba(217, 79, 63, 0.4);
}
@keyframes caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---- Undo ripple layer ---------------------------------------------------- */
.ripple-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
}
.ripple {
    position: absolute;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -12px;
    pointer-events: none;
}
.ripple svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ripple svg path {
    fill: none;
    stroke: var(--c-red);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: ripple-anim 700ms cubic-bezier(.5,0,.4,1) forwards;
}
@keyframes ripple-anim {
    0%   { transform: scale(0.2); stroke-dashoffset: 60; opacity: 1; }
    50%  { transform: scale(2.4); stroke-dashoffset: 0;  opacity: 0.9; }
    75%  { transform: scale(3.0); stroke-dashoffset: 30; opacity: 0.5; }
    100% { transform: scale(3.4); stroke-dashoffset: 60; opacity: 0; }
}

/* ==========================================================================
   HUD (persistent overlay chrome)
   ========================================================================== */
.hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    font-family: var(--font-hud);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--c-iron);
    letter-spacing: 0.04em;
}
.hud__corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 22px;
    text-transform: lowercase;
    mix-blend-mode: screen;
}
.hud__corner--tl { top: 0; left: 0; align-items: flex-start; }
.hud__corner--tr { top: 0; right: 0; align-items: flex-end; text-align: right; }
.hud__label {
    font-size: 0.62rem;
    color: var(--c-carbon);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.hud__value {
    font-size: 0.9rem;
    color: var(--c-pearl);
    letter-spacing: 0.02em;
    font-weight: 600;
}
.hud__sub {
    color: var(--c-iron);
    font-size: 0.68rem;
}
.state-committed { color: var(--c-green); }
.state-undoing { color: var(--c-red); }
.state-drifting { color: var(--c-iron); }

/* breadcrumb nav — arranged right-to-left */
.hud__breadcrumbs {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row-reverse; /* right-to-left */
    gap: 14px;
    pointer-events: auto;
}
.crumb {
    appearance: none;
    background: transparent;
    border: 1px solid var(--c-carbon);
    padding: 6px;
    width: 22px;
    height: 22px;
    color: var(--c-iron);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
    position: relative;
}
.crumb svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}
.crumb:hover {
    color: var(--c-pearl);
    border-color: var(--c-iron);
}
.crumb--active {
    color: var(--c-red);
    border-color: var(--c-red);
    background: rgba(217, 79, 63, 0.08);
}

.hud__command {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 14px;
    border: 1px solid var(--c-carbon);
    background: rgba(13, 15, 18, 0.6);
    backdrop-filter: blur(3px);
    color: var(--c-pearl);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}
.hud__caret {
    display: inline-block;
    color: var(--c-red);
    animation: caret-blink 1.05s steps(2, end) infinite;
    transform: translateY(-1px);
}

/* ==========================================================================
   Horizontal rail
   ========================================================================== */
.rail-outer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 4;
}
.rail {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    /* The inner content is laid out left-to-right in DOM order:
       [ chapter 7 (present) ][ interval ][ ch 6 ]...[ ch 1 (past) ]
       The starting position is the far right (present). JS handles this. */
}

.chapter {
    position: relative;
    flex: 0 0 var(--chapter-w);
    width: var(--chapter-w);
    height: 100vh;
    padding: 86px var(--gutter) 86px var(--gutter);
    display: flex;
    align-items: center;
}

.chapter__frame {
    position: relative;
    width: 100%;
    max-width: calc(100vw - 8 * var(--gutter));
    margin: 0 auto;
    padding: 42px 46px;
    background: linear-gradient(180deg, var(--c-slate) 0%, rgba(19, 23, 28, 0.4) 100%);
    box-shadow:
        inset 0 0 0 1px var(--c-carbon),
        inset 0 1px 0 0 rgba(196, 204, 212, 0.04),
        0 0 0 1px rgba(13, 15, 18, 0.6);
    /* "one step off-register" — nudge frame by one gutter */
    transform: translateX(calc(-1 * var(--off-register) / 2));
}

/* ---- Undo-bracket frames at chapter corners ------------------------------ */
.bracket {
    position: absolute;
    width: 34px;
    height: 34px;
    pointer-events: none;
}
.bracket::before, .bracket::after {
    content: "";
    position: absolute;
    background: var(--c-iron);
}
.bracket::before { width: 16px; height: 1px; }
.bracket::after  { width: 1px;  height: 16px; }
.bracket--tl { top: -1px; left: -1px; }
.bracket--tl::before { top: 0; left: 0; }
.bracket--tl::after  { top: 0; left: 0; }
.bracket--tr { top: -1px; right: -1px; }
.bracket--tr::before { top: 0; right: 0; }
.bracket--tr::after  { top: 0; right: 0; }
.bracket--bl { bottom: -1px; left: -1px; }
.bracket--bl::before { bottom: 0; left: 0; }
.bracket--bl::after  { bottom: 0; left: 0; }
.bracket--br { bottom: -1px; right: -1px; }
.bracket--br::before { bottom: 0; right: 0; }
.bracket--br::after  { bottom: 0; right: 0; }

/* ---- chapter meta -------------------------------------------------------- */
.chapter__meta {
    display: flex;
    gap: 22px;
    font-family: var(--font-hud);
    font-size: 0.7rem;
    color: var(--c-iron);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 36px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-carbon);
}
.meta--offset { transform: translateX(var(--off-register)); }
.meta__idx { color: var(--c-carbon); }
.meta__name { color: var(--c-pearl); }

/* ---- display typography --------------------------------------------------- */
.display {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-pearl);
    letter-spacing: -0.02em;
    line-height: 0.95;
    font-size: clamp(3rem, 7.5vw, 6.2rem);
    margin: 0 0 28px 0;
    font-feature-settings: "liga" 0;
}
.display--entry {
    font-size: clamp(3.6rem, 9vw, 7rem);
}
.display--quiet {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    color: var(--c-iron);
}

.glyph-wrap {
    position: relative;
    display: inline-block;
}
.ghost {
    position: absolute;
    top: 0;
    left: 2px;
    color: var(--c-red);
    opacity: 0.06;
    pointer-events: none;
    transition: transform 420ms cubic-bezier(.3,.1,.2,1), opacity 420ms ease;
    white-space: pre;
}
.fore {
    position: relative;
    color: inherit;
    display: inline-block;
    white-space: pre;
}
.glyph-wrap:hover .ghost {
    transform: translate3d(3px, 0, 0);
    opacity: 0.14;
}

/* body prose with ghost palimpsest */
.body {
    position: relative;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--c-fog);
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    line-height: 1.65;
    max-width: 62ch;
    margin: 0 0 18px 0;
    font-feature-settings: "liga" 0;
}
.body[data-ghost] .ghost {
    position: absolute;
    inset: 0;
    color: var(--c-red);
    opacity: 0.06;
    transform: translateX(2px);
    pointer-events: none;
    display: block;
    white-space: normal;
    max-width: 62ch;
    line-height: 1.65;
    z-index: 0;
}
.body[data-ghost] .fore {
    position: relative;
    z-index: 1;
    color: inherit;
    display: block;
    white-space: normal;
}
.body[data-ghost]:hover .ghost {
    transform: translateX(5px);
    opacity: 0.12;
}
.body--lede {
    font-size: clamp(1rem, 1.2vw, 1.22rem);
    color: var(--c-pearl);
    max-width: 52ch;
}

/* commit row */
.commit-row {
    display: flex;
    gap: 18px;
    align-items: baseline;
    font-family: var(--font-hud);
    font-size: 0.78rem;
    color: var(--c-iron);
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--c-carbon);
    text-transform: lowercase;
    letter-spacing: 0.06em;
}
.commit-label { color: var(--c-carbon); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.62rem; }
.commit-hash { color: var(--c-pearl); font-family: var(--font-hud); }
.commit-state { color: var(--c-green); }
.commit-state.is-drifting { color: var(--c-iron); }
.commit-state.is-undoing { color: var(--c-red); }

.scroll-hint {
    margin-top: 48px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--c-iron);
    font-family: var(--font-hud);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.hint-glyph {
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--c-iron);
    position: relative;
    animation: hint-pulse 2.4s ease-in-out infinite;
}
.hint-glyph::before {
    content: "";
    position: absolute;
    left: -1px; top: -3px;
    width: 7px; height: 7px;
    border-left: 1px solid var(--c-iron);
    border-bottom: 1px solid var(--c-iron);
    transform: rotate(45deg);
}
@keyframes hint-pulse {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50%      { transform: translateX(-6px); opacity: 0.5; }
}

/* ---- unlogging log stack -------------------------------------------------- */
.log-stack {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.log-stack .body {
    position: relative;
    margin: 0;
    padding: 6px 10px 6px 14px;
    background: rgba(29, 35, 43, 0.6);
    border-left: 1px solid var(--c-carbon);
    font-size: 0.86rem;
    line-height: 1.5;
    max-width: 78ch;
}
.log-stack .body[data-strike] .fore::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 10px;
    top: 50%;
    height: 1px;
    background: var(--c-red);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 500ms cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.log-stack .body[data-strike].struck .fore::after {
    transform: scaleX(1);
}
.log-stack .body[data-strike].struck .fore {
    color: var(--c-carbon);
}

.margin-note {
    font-family: var(--font-marg);
    font-style: italic;
    color: var(--c-red);
    opacity: 0.68;
    font-size: 0.98rem;
    transform: rotate(-1deg) translateX(calc(var(--off-register) * 0.8));
    margin-top: 28px;
    max-width: 40ch;
}

/* ==========================================================================
   Revision page spreads
   ========================================================================== */
.chapter--revision .chapter__frame { display: none; } /* revision uses its own container */
.chapter--revision {
    align-items: stretch;
    padding: 54px var(--gutter);
}
.revision-spread {
    position: relative;
    width: 100%;
    max-width: calc(100vw - 4 * var(--gutter));
    margin: 0 auto;
    padding: 38px 54px;
    background: #e8e2d3;
    color: #2a2620;
    box-shadow:
        inset 0 0 0 1px rgba(30, 26, 20, 0.08),
        0 0 0 1px var(--c-carbon),
        0 30px 60px -20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    gap: 22px;
    transform: rotate(-0.4deg);
}
.chapter--revision-two .revision-spread {
    transform: rotate(0.3deg);
    background: #ece6d8;
}
.revision-spread__bg {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(60, 48, 36, 0.0) 0,
            rgba(60, 48, 36, 0.0) 26px,
            rgba(80, 60, 40, 0.12) 27px
        ),
        radial-gradient(circle at 20% 30%, rgba(100, 80, 60, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(110, 90, 70, 0.18) 0%, transparent 45%);
    pointer-events: none;
    mix-blend-mode: multiply;
}
.revision-spread__head {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-hud);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #5a4e3c;
    z-index: 1;
    position: relative;
}
.spread-kicker { font-weight: 600; }
.spread-rule {
    flex: 1;
    height: 1px;
    background: rgba(90, 78, 60, 0.35);
}
.spread-foliation { opacity: 0.7; }

.revision-spread__body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    position: relative;
    z-index: 1;
    align-items: start;
}
.spread-col {
    position: relative;
}
.spread-col--code {
    background: rgba(20, 24, 28, 0.94);
    padding: 24px 26px;
    color: var(--c-pearl);
    font-family: var(--font-body);
    font-size: 0.86rem;
    line-height: 1.6;
    box-shadow: inset 0 0 0 1px rgba(139, 150, 161, 0.15);
    transform: rotate(0.5deg);
}
.code-fragment { margin: 0; white-space: pre-wrap; font-family: var(--font-body); }
.tok-kw { color: #c69dff; }
.tok-fn { color: var(--c-green); }
.tok-var { color: var(--c-pearl); }
.tok-type { color: #9fd8ff; }
.tok-method { color: #ffd59a; }
.tok-const { color: var(--c-red); }
.tok-comment { color: var(--c-iron); font-style: italic; opacity: 0.82; }
.code-fragment .strike {
    position: relative;
    color: rgba(196, 204, 212, 0.6);
}
.code-fragment .strike::before {
    content: "";
    position: absolute;
    left: -4px; right: -4px;
    top: 52%;
    height: 1.2px;
    background: var(--c-red);
    transform: rotate(-0.5deg);
}
.caret-mark {
    position: absolute;
    color: var(--c-red);
    font-size: 1.4rem;
    opacity: 0.8;
    font-family: var(--font-marg);
}
.caret-mark--1 { top: 32%; left: -18px; transform: rotate(-12deg); }
.caret-mark--2 { bottom: 12%; right: -22px; transform: rotate(8deg); }

/* marginalia (Shippori Mincho) */
.spread-col--marg {
    font-family: var(--font-marg);
    color: var(--c-red);
    font-size: 1.1rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 4px 0;
}
.marginalia {
    margin: 0;
    position: relative;
    padding-left: 20px;
    max-width: 32ch;
    font-style: italic;
}
.marginalia::before {
    content: "—";
    position: absolute;
    left: 0;
    top: -2px;
    color: var(--c-red);
    font-weight: 700;
    opacity: 0.7;
}
.marg-rot-1 { transform: rotate(-2deg) translateX(2px); }
.marg-rot-2 { transform: rotate(1.5deg) translateX(-6px); }
.marg-rot-3 { transform: rotate(-0.8deg) translateX(10px); }
.marg-rot-4 { transform: rotate(2.5deg) translateX(-2px); }

/* reel-to-reel */
.reels {
    width: 260px;
    max-width: 100%;
    height: auto;
    margin-top: 8px;
}
.reels--small { width: 200px; }
.reel-ring   { fill: none; stroke: #2a2620; stroke-width: 1.2; opacity: 0.6; }
.reel-hub    { fill: #2a2620; }
.spoke       { stroke: #2a2620; stroke-width: 1; opacity: 0.5; }
.tape-band   { fill: #2a2620; opacity: 0.35; }

.reel--left  { transform-origin: 40px 40px; animation: reel-spin 3s linear infinite reverse; }
.reel--right { transform-origin: 220px 40px; animation: reel-spin 3s linear infinite reverse; }
.reels--small .reel--left  { transform-origin: 30px 30px; }
.reels--small .reel--right { transform-origin: 170px 30px; }
@keyframes reel-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.revision-spread__foot {
    display: flex;
    gap: 32px;
    border-top: 1px dashed rgba(90, 78, 60, 0.4);
    padding-top: 12px;
    font-family: var(--font-hud);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #6a5e4a;
    position: relative;
    z-index: 1;
}

/* diary entries in revision ii */
.spread-col--diary {
    padding: 10px 20px 10px 30px;
    font-family: var(--font-marg);
    font-size: 1.05rem;
    color: #2a2620;
    line-height: 1.75;
}
.diary-entry {
    margin: 0 0 14px 0;
    max-width: 42ch;
}
.diary-entry em { font-style: italic; color: #5a4e3c; }
.diary-entry--dim { color: #7a7060; }
.diary-entry .strike {
    position: relative;
    color: #6a5e4a;
}
.diary-entry .strike::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px;
    top: 50%;
    height: 1px;
    background: var(--c-red);
    transform: rotate(-1deg);
}
.diary-ins {
    color: var(--c-red);
    font-family: var(--font-marg);
    font-style: italic;
    font-weight: 700;
    margin-left: 4px;
    transform: translateY(-4px);
    display: inline-block;
}

/* ==========================================================================
   Unlearning graph column
   ========================================================================== */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.two-col__left .display { margin-bottom: 24px; }
.forget-list {
    margin: 22px 0 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--c-iron);
}
.forget-list li {
    padding: 4px 0 4px 22px;
    position: relative;
    border-bottom: 1px dotted var(--c-carbon);
}
.forget-list li::before {
    content: "×";
    position: absolute;
    left: 0; top: 4px;
    color: var(--c-red);
    font-weight: 700;
}
.forget-list li.forgetting {
    color: var(--c-pearl);
}
.forget-list li.forgetting::before { content: "?"; color: var(--c-green); }

.graph {
    width: 100%;
    height: auto;
    max-height: 62vh;
    background: rgba(19, 23, 28, 0.55);
    box-shadow: inset 0 0 0 1px var(--c-carbon);
}
.graph-edges line {
    stroke: var(--c-iron);
    stroke-width: 1;
    opacity: 0.55;
}
.graph-edges line.edge-reversed {
    stroke: var(--c-red);
    stroke-dasharray: 3 3;
    opacity: 0.85;
}
.graph-edges line.edge-forgotten {
    stroke: var(--c-carbon);
    opacity: 0.2;
}
.graph-nodes circle {
    fill: var(--c-obsidian);
    stroke: var(--c-fog);
    stroke-width: 1;
}
.graph-nodes circle.node-dim {
    stroke: var(--c-carbon);
    fill: var(--c-slate);
}
.graph-caption {
    font-family: var(--font-hud);
    font-size: 0.68rem;
    color: var(--c-iron);
    margin-top: 10px;
    letter-spacing: 0.08em;
}

/* ==========================================================================
   Unbooting terminal
   ========================================================================== */
.terminal {
    background: var(--c-obsidian);
    box-shadow: inset 0 0 0 1px var(--c-carbon);
    max-width: 80ch;
    overflow: hidden;
    margin-top: 8px;
}
.terminal__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--c-graphite);
    border-bottom: 1px solid var(--c-carbon);
    font-family: var(--font-hud);
    font-size: 0.72rem;
    color: var(--c-iron);
}
.t-dot {
    width: 8px; height: 8px;
    border: 1px solid var(--c-carbon);
    background: transparent;
    display: inline-block;
}
.t-dot:first-child { border-color: var(--c-red); }
.t-title { margin-left: 10px; letter-spacing: 0.12em; }
.terminal__out {
    margin: 0;
    padding: 18px 20px;
    color: var(--c-fog);
    font-family: var(--font-body);
    font-size: 0.86rem;
    line-height: 1.55;
    min-height: 420px;
}
.t-line {
    display: block;
    position: relative;
    transition: opacity 300ms ease, color 300ms ease, transform 300ms ease;
}
.t-line.t-unpopulating {
    color: var(--c-red);
    opacity: 0.5;
}
.t-line.t-unpopulated {
    color: transparent;
    opacity: 0;
    transform: translateX(-8px);
}
.t-line--final { color: var(--c-iron); }

/* ==========================================================================
   Stack trace
   ========================================================================== */
.stack-frames {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 72ch;
    font-family: var(--font-body);
    font-size: 0.88rem;
}
.frame {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 18px;
    padding: 8px 0 8px 0;
    border-bottom: 1px solid var(--c-carbon);
    color: var(--c-iron);
}
.frame-idx {
    color: var(--c-carbon);
    font-family: var(--font-hud);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.7rem;
    padding-top: 2px;
}
.frame-name {
    color: var(--c-fog);
}
.frame--zero {
    color: var(--c-pearl);
    border-bottom: none;
    margin-top: 18px;
}
.frame--zero .frame-idx { color: var(--c-red); }
.frame--zero .frame-name { color: var(--c-pearl); font-weight: 500; }

.end-block {
    margin-top: 42px;
    padding-top: 20px;
    border-top: 1px solid var(--c-carbon);
    font-family: var(--font-hud);
    font-size: 0.7rem;
    color: var(--c-carbon);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}
.end-glyph { color: var(--c-red); font-size: 0.9rem; }

/* ==========================================================================
   Interval spaces
   ========================================================================== */
.interval {
    flex: 0 0 var(--interval-w);
    width: var(--interval-w);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-carbon);
    font-family: var(--font-body);
    font-size: 1.2rem;
}
.interval__glyph {
    opacity: 0.5;
    transform: translateY(-10vh);
    animation: interval-hover 6s ease-in-out infinite;
}
@keyframes interval-hover {
    0%, 100% { transform: translateY(-10vh); opacity: 0.5; }
    50%      { transform: translateY(-9vh);  opacity: 0.2; }
}

/* ==========================================================================
   Typewriter cursor glyph at end of currently-typing text
   ========================================================================== */
.fore[data-typewriter]::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 1em;
    vertical-align: -0.15em;
    background: var(--c-red);
    margin-left: 2px;
    opacity: 0;
    transform: scaleY(0.9);
}
.fore[data-typewriter].typing::after {
    opacity: 1;
    animation: caret-blink 1s steps(2) infinite;
}

/* character-flash-red when being deleted in reverse */
.char-flash {
    color: var(--c-red);
    transition: color 60ms linear;
}

/* ==========================================================================
   Responsiveness (horizontal layout stays; sizes adjust a little)
   ========================================================================== */
@media (max-width: 820px) {
    :root {
        --chapter-w: 180vw;
        --interval-w: 40vw;
    }
    .two-col { grid-template-columns: 1fr; }
    .revision-spread__body { grid-template-columns: 1fr; }
    .chapter__frame { padding: 28px 22px; }
    .revision-spread { padding: 26px 24px; }
    .display--entry { font-size: clamp(2.6rem, 9vw, 4.6rem); }
    .hud__breadcrumbs { display: none; }
}