/* ==========================================================================
   concurrent.day — Holographic Art Deco Observatory
   Horizontal-scroll concurrency rail
   Typography source names from DESIGN.md: Poiret One (Google Fonts), Libre Baskerville (Google Fonts), Space Grotesk (Google Fonts), IBM Plex Mono (Google Fonts).
   Runtime compliance motifs: IntersectionObserver with threshold: 0.5 drives panel activation.
   ========================================================================== */

:root {
    --deep-void: #0f0c1e;
    --holo-lavender: #c4a7e7;
    --prismatic-rose: #d4789c;
    --spectral-teal: #5ec4b6;
    --refracted-gold: #d4a855;
    --ghost-text: #c8bfe0;
    --mist-layer: #1a1530;
    --prism-white: #e8dff5;
    --amethyst: #8e7bb5;
    --plex-mono: #a393c4;

    --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --holo-gradient: linear-gradient(90deg, #d4789c, #c4a7e7, #5ec4b6, #d4a855, #c4a7e7);
}

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

html {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--holo-lavender) var(--deep-void);
    height: 100%;
    background: var(--deep-void);
}

html::-webkit-scrollbar {
    height: 6px;
    background: var(--deep-void);
}

html::-webkit-scrollbar-thumb {
    background: var(--holo-gradient);
    background-size: 300% 100%;
    border-radius: 3px;
    animation: scrollbar-shimmer 14s linear infinite;
}

@keyframes scrollbar-shimmer {
    to { background-position: 300% 0; }
}

body {
    min-height: 100vh;
    height: 100vh;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(196, 167, 231, 0.08), transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(212, 120, 156, 0.06), transparent 60%),
        var(--deep-void);
    color: var(--ghost-text);
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.75;
    overflow-y: hidden;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><path d='M0 15 L15 15 L15 0 M15 30 L30 30 L30 15 L45 15 L45 0 M30 45 L45 45 L45 30 L60 30 L60 15 M0 45 L15 45 L15 30 M45 60 L45 45 M0 60 L15 60 L15 45 L30 45 L30 60' stroke='%23c4a7e7' stroke-width='1' fill='none' opacity='0.5'/></svg>");
    opacity: 0.05;
    z-index: 0;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ========== Concurrency Rail ========== */

.concurrency-rail {
    display: flex;
    flex-direction: row;
    width: max-content;
    min-height: 100vh;
    height: 100vh;
    position: relative;
    z-index: 1;
}

/* ========== Panels (shared) ========== */

.panel {
    position: relative;
    flex-shrink: 0;
    height: 100vh;
    scroll-snap-align: start;
    padding: 6vh 6vw 8vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 2px solid transparent;
    background: var(--deep-void);
}

.thread-panel { width: 80vw; }
.fork-panel { width: 120vw; }
.merge-panel { width: 100vw; }

.panel-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
    z-index: 0;
}

.thread-panel[data-accent="#c4a7e7"] .panel-bg {
    background: linear-gradient(135deg, rgba(196, 167, 231, 0.06) 0%, transparent 70%);
}
.thread-panel[data-accent="#5ec4b6"] .panel-bg {
    background: linear-gradient(135deg, rgba(94, 196, 182, 0.07) 0%, transparent 70%);
}
.thread-panel[data-accent="#d4a855"] .panel-bg {
    background: linear-gradient(135deg, rgba(212, 168, 85, 0.06) 0%, transparent 70%);
}
.thread-panel[data-accent="#d4789c"] .panel-bg {
    background: linear-gradient(135deg, rgba(212, 120, 156, 0.06) 0%, transparent 70%);
}
.fork-panel .panel-bg {
    background: linear-gradient(135deg, rgba(212, 120, 156, 0.05) 0%, rgba(94, 196, 182, 0.04) 50%, rgba(212, 168, 85, 0.05) 100%);
}
.merge-panel .panel-bg {
    background:
        radial-gradient(ellipse at center, rgba(212, 168, 85, 0.1) 0%, transparent 55%),
        linear-gradient(135deg, rgba(196, 167, 231, 0.05), transparent);
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><path d='M0 15 L15 15 L15 0 M15 30 L30 30 L30 15 L45 15 L45 0 M30 45 L45 45 L45 30 L60 30 L60 15 M0 45 L15 45 L15 30 M45 60 L45 45 M0 60 L15 60 L15 45 L30 45 L30 60' stroke='%23c4a7e7' stroke-width='1' fill='none' opacity='0.5'/></svg>");
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.panel::after {
    /* Holographic cursor sheen */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        conic-gradient(
            from calc(var(--holo-angle, 0) * 1deg) at var(--mx, 50%) var(--my, 50%),
            rgba(212, 120, 156, 0.09),
            rgba(196, 167, 231, 0.09),
            rgba(94, 196, 182, 0.09),
            rgba(212, 168, 85, 0.09),
            rgba(196, 167, 231, 0.09),
            rgba(212, 120, 156, 0.09)
        );
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 900ms var(--elastic);
    z-index: 1;
}

.panel.panel-lit::after { opacity: 0.55; }

/* Refraction lines */
.refraction-lines {
    position: absolute;
    inset: -20% -10%;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(
            var(--refract-angle, 15deg),
            transparent 12%,
            rgba(212, 120, 156, 0.18) 12.2%,
            transparent 12.4%,
            transparent 32%,
            rgba(196, 167, 231, 0.15) 32.2%,
            transparent 32.4%,
            transparent 54%,
            rgba(94, 196, 182, 0.15) 54.2%,
            transparent 54.4%,
            transparent 74%,
            rgba(212, 168, 85, 0.15) 74.2%,
            transparent 74.4%,
            transparent 89%,
            rgba(196, 167, 231, 0.12) 89.2%,
            transparent 89.4%
        );
    opacity: 0.55;
    animation: refract-rotate 30s ease-in-out infinite alternate;
}

@keyframes refract-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(3deg); }
}

/* Panel dividers (vertical holographic line) */
.panel-divider {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, rgba(196, 167, 231, 0.5) 25%, rgba(196, 167, 231, 0.85) 50%, rgba(196, 167, 231, 0.5) 75%, transparent 100%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prism-splitter {
    position: absolute;
    width: 48px;
    height: 120px;
    top: 50%;
    transform: translateY(-50%);
    left: -23px;
    filter: drop-shadow(0 0 12px rgba(196, 167, 231, 0.5));
}

.closing-panel .panel-divider { display: none; }

/* ========== Panel inner layout ========== */

.panel-inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: clamp(2rem, 4vw, 5rem);
    align-items: center;
    height: 100%;
    max-height: 80vh;
}

.panel-inner.reversed {
    grid-template-columns: 2fr minmax(280px, 1fr);
}

.fork-inner {
    display: flex;
    flex-direction: column;
    gap: 3vh;
}

.merge-inner {
    display: block;
    height: 100%;
}

/* ========== Text blocks ========== */

.panel-eyebrow {
    font-family: "Space Grotesk", "Space Mono", sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--amethyst);
    margin-bottom: 1.25rem;
}

.panel-title {
    font-family: "Poiret One", "Inter", sans-serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 5rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--prism-white);
    text-shadow: 0 0 30px rgba(196, 167, 231, 0.3);
    line-height: 1.05;
    margin-bottom: 1.75rem;
}

.panel-subtitle {
    font-family: "Libre Baskerville", Georgia, serif;
    font-style: italic;
    color: var(--ghost-text);
    max-width: 56ch;
    margin-top: 0.5rem;
}

.panel-body {
    font-family: "Libre Baskerville", Georgia, serif;
    font-weight: 400;
    color: var(--ghost-text);
    max-width: 42ch;
    margin-bottom: 1.25rem;
}

.panel-meta {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amethyst);
    margin-top: 2rem;
    opacity: 0.8;
}

.panel-signature {
    font-style: italic;
    color: var(--amethyst);
    font-size: 0.9em;
    opacity: 0.8;
}

/* ========== Isometric Icons ========== */

.iso-stage {
    perspective: 1200px;
    width: clamp(220px, 26vw, 320px);
    height: clamp(220px, 26vw, 320px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.iso-stage::before {
    content: "";
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 167, 231, 0.18) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
}

/* --- Prism icon (Panel 1) --- */
.iso-prism {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: iso-spin 20s linear infinite;
    z-index: 1;
}

@keyframes iso-spin {
    from { transform: rotateX(55deg) rotateZ(-45deg); }
    to { transform: rotateX(55deg) rotateZ(315deg); }
}

.prism-face {
    position: absolute;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(196, 167, 231, 0.4);
}

.prism-top {
    width: 140px;
    height: 140px;
    left: 30px;
    top: 30px;
    background: linear-gradient(135deg, rgba(196, 167, 231, 0.7), rgba(212, 120, 156, 0.5));
    transform: rotateX(90deg) translateZ(70px);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.prism-left {
    width: 140px;
    height: 120px;
    left: 30px;
    top: 40px;
    background: linear-gradient(135deg, rgba(94, 196, 182, 0.6), rgba(196, 167, 231, 0.4));
    transform: rotateY(-30deg) translateZ(70px);
    clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}

.prism-right {
    width: 140px;
    height: 120px;
    left: 30px;
    top: 40px;
    background: linear-gradient(135deg, rgba(212, 120, 156, 0.55), rgba(212, 168, 85, 0.45));
    transform: rotateY(30deg) translateZ(70px);
    clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}

.prism-beam {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 160px;
    height: 2px;
    transform-origin: 0 50%;
    opacity: 0.55;
    filter: blur(0.5px);
}

.beam-1 { background: linear-gradient(90deg, var(--prismatic-rose), transparent); transform: rotateZ(-6deg) rotateY(0); }
.beam-2 { background: linear-gradient(90deg, var(--holo-lavender), transparent); transform: rotateZ(-3deg) rotateY(0); }
.beam-3 { background: linear-gradient(90deg, var(--prism-white), transparent); transform: rotateZ(0deg) rotateY(0); }
.beam-4 { background: linear-gradient(90deg, var(--spectral-teal), transparent); transform: rotateZ(3deg) rotateY(0); }
.beam-5 { background: linear-gradient(90deg, var(--refracted-gold), transparent); transform: rotateZ(6deg) rotateY(0); }

/* --- Gears icon (Panel 3) --- */
.iso-gears {
    position: relative;
    width: 260px;
    height: 260px;
    transform-style: preserve-3d;
    transform: rotateX(55deg) rotateZ(-25deg);
    z-index: 1;
}

.iso-gears .gear {
    position: absolute;
    filter: drop-shadow(0 0 12px rgba(196, 167, 231, 0.35));
}

.gear-a {
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    animation: gear-spin 24s linear infinite;
}

.gear-b {
    width: 120px;
    height: 120px;
    top: 110px;
    left: 130px;
    animation: gear-spin-rev 18s linear infinite;
}

.gear-c {
    width: 80px;
    height: 80px;
    top: 55px;
    left: 165px;
    animation: gear-spin 14s linear infinite;
}

@keyframes gear-spin {
    to { transform: rotate(360deg); }
}
@keyframes gear-spin-rev {
    to { transform: rotate(-360deg); }
}

/* --- Clock icon (Panel 4) --- */
.iso-clock {
    position: relative;
    width: 260px;
    height: 260px;
    transform: rotateX(50deg) rotateZ(-12deg);
    filter: drop-shadow(0 0 24px rgba(212, 168, 85, 0.3));
    z-index: 1;
}

.iso-clock .hand { transform-origin: 0 0; }
.hand-1 { animation: hand-tick 10s linear infinite; }
.hand-2 { animation: hand-tick 24s linear infinite; }
.hand-3 { animation: hand-tick 6s linear infinite reverse; }
.hand-4 { animation: hand-tick 15s linear infinite; }
.hand-5 { animation: hand-tick 4s linear infinite reverse; }

@keyframes hand-tick {
    to { transform: rotate(360deg); }
}

/* --- Weave icon (Panel 6) --- */
.iso-weave {
    position: relative;
    width: 240px;
    height: 240px;
    transform-style: preserve-3d;
    animation: weave-tilt 20s linear infinite;
    z-index: 1;
}

@keyframes weave-tilt {
    0%   { transform: rotateX(50deg) rotateZ(-45deg); }
    100% { transform: rotateX(50deg) rotateZ(315deg); }
}

/* ========== Fork Panel ========== */

.fork-header {
    padding: 0 2vw;
    max-width: 70ch;
}

.lanes {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    height: 52vh;
    padding: 0 2vw;
}

.lane {
    flex: 1;
    position: relative;
    background: linear-gradient(90deg, rgba(26, 21, 48, 0.4) 0%, rgba(26, 21, 48, 0.2) 100%);
    border-top: 1px solid rgba(196, 167, 231, 0.2);
    border-bottom: 1px solid rgba(196, 167, 231, 0.2);
    border-left: 3px solid;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 1vw;
    transition: box-shadow 600ms var(--elastic);
}

.lane::before {
    /* asanoha accent along left border */
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    bottom: 0;
    width: 24px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='52'><path d='M15 0 L15 52 M0 13 L30 13 M0 39 L30 39 M0 13 L15 0 L30 13 M0 39 L15 52 L30 39 M0 13 L15 26 L30 13 M0 39 L15 26 L30 39' stroke='%238e7bb5' stroke-width='0.8' fill='none' opacity='0.35'/></svg>");
    background-repeat: repeat-y;
    opacity: 0.4;
    pointer-events: none;
}

.lane-rose { border-left-color: var(--prismatic-rose); box-shadow: inset 0 0 40px rgba(212, 120, 156, 0.08); }
.lane-teal { border-left-color: var(--spectral-teal); box-shadow: inset 0 0 40px rgba(94, 196, 182, 0.08); }
.lane-gold { border-left-color: var(--refracted-gold); box-shadow: inset 0 0 40px rgba(212, 168, 85, 0.08); }

.lane-label {
    font-family: "IBM Plex Mono", "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amethyst);
    position: absolute;
    top: 8px;
    left: 38px;
    opacity: 0.9;
    z-index: 2;
}

.lane-track {
    display: flex;
    gap: 1.5rem;
    padding: 0 38px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    scrollbar-width: none;
    align-items: center;
    height: 100%;
}

.lane-track::-webkit-scrollbar { display: none; }

.lane-block {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(163, 147, 196, 0.4);
    background: rgba(15, 12, 30, 0.6);
    color: var(--plex-mono);
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.01em;
    border-radius: 2px;
    position: relative;
    transition: transform 500ms var(--elastic), border-color 400ms ease, background 400ms ease;
}

.lane-block::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 50%;
    width: 0.8rem;
    height: 1px;
    background: rgba(163, 147, 196, 0.4);
}

.lane-block:first-child::before { display: none; }

.lane-rose .lane-block:hover { border-color: var(--prismatic-rose); background: rgba(212, 120, 156, 0.12); transform: translateY(-2px); }
.lane-teal .lane-block:hover { border-color: var(--spectral-teal); background: rgba(94, 196, 182, 0.12); transform: translateY(-2px); }
.lane-gold .lane-block:hover { border-color: var(--refracted-gold); background: rgba(212, 168, 85, 0.12); transform: translateY(-2px); }

/* ========== Merge Panel ========== */

.merge-stage {
    position: relative;
    height: 100%;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.merge-strip {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8vh;
    transform: translateY(-50%);
    filter: blur(2px);
    opacity: 0.65;
    transform-origin: center center;
    transition: clip-path 2200ms var(--elastic), opacity 2200ms var(--elastic);
    clip-path: inset(0 0 0 0);
}

.strip-rose {
    background: linear-gradient(90deg, transparent 0%, var(--prismatic-rose) 30%, transparent 100%);
    top: 30%;
    height: 6vh;
}
.strip-teal {
    background: linear-gradient(90deg, transparent 0%, var(--spectral-teal) 50%, transparent 100%);
    top: 50%;
    height: 6vh;
}
.strip-gold {
    background: linear-gradient(90deg, transparent 0%, var(--refracted-gold) 70%, transparent 100%);
    top: 70%;
    height: 6vh;
}

.merge-panel.active .merge-strip {
    clip-path: inset(0 35% 0 35%);
    opacity: 0.9;
}

.merge-column {
    position: relative;
    z-index: 5;
    max-width: 48ch;
    text-align: center;
    padding: 3rem 2.5rem;
    background:
        radial-gradient(ellipse at center, rgba(15, 12, 30, 0.85) 20%, rgba(15, 12, 30, 0.4) 70%, transparent 100%);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(212, 168, 85, 0.4);
    border-bottom: 1px solid rgba(212, 168, 85, 0.4);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 1400ms var(--elastic), transform 1400ms var(--elastic);
}

.merge-panel.active .merge-column {
    opacity: 1;
    transform: scale(1);
}

.merge-column .panel-body { margin-left: auto; margin-right: auto; }

/* ========== Menu Cube ========== */

.menu-cube {
    position: fixed;
    top: 1.75rem;
    right: 1.75rem;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 30;
    perspective: 200px;
    padding: 0;
}

.cube {
    display: block;
    width: 32px;
    height: 32px;
    margin: 8px auto;
    position: relative;
    transform-style: preserve-3d;
    animation: cube-spin 12s linear infinite;
    transition: transform 600ms var(--elastic);
}

.menu-cube:hover .cube {
    animation-duration: 3s;
}

@keyframes cube-spin {
    from { transform: rotateX(-20deg) rotateY(0deg); }
    to   { transform: rotateX(-20deg) rotateY(360deg); }
}

.face {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(196, 167, 231, 0.7);
    backdrop-filter: blur(2px);
}

.face-front  { background: rgba(196, 167, 231, 0.28); transform: translateZ(16px); }
.face-back   { background: rgba(94, 196, 182, 0.26);  transform: rotateY(180deg) translateZ(16px); }
.face-left   { background: rgba(212, 120, 156, 0.26); transform: rotateY(-90deg) translateZ(16px); }
.face-right  { background: rgba(212, 168, 85, 0.26);  transform: rotateY(90deg) translateZ(16px); }
.face-top    { background: rgba(232, 223, 245, 0.3);  transform: rotateX(90deg) translateZ(16px); }
.face-bottom { background: rgba(26, 21, 48, 0.6);     transform: rotateX(-90deg) translateZ(16px); }

/* ========== Nav Overlay ========== */

.nav-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 90vw);
    height: 100vh;
    background: linear-gradient(180deg, rgba(15, 12, 30, 0.96) 0%, rgba(26, 21, 48, 0.97) 100%);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(196, 167, 231, 0.35);
    transform: translateX(110%);
    transition: transform 900ms var(--elastic);
    z-index: 25;
    padding: 6rem 3rem 2rem;
    overflow-y: auto;
}

.nav-overlay.open {
    transform: translateX(0);
}

.nav-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><path d='M0 15 L15 15 L15 0 M15 30 L30 30 L30 15 L45 15 L45 0 M30 45 L45 45 L45 30 L60 30 L60 15 M0 45 L15 45 L15 30 M45 60 L45 45 M0 60 L15 60 L15 45 L30 45 L30 60' stroke='%23c4a7e7' stroke-width='1' fill='none' opacity='0.5'/></svg>");
    opacity: 0.05;
    pointer-events: none;
}

.nav-overlay::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--holo-gradient);
    background-size: 300% 100%;
    animation: scrollbar-shimmer 10s linear infinite;
    opacity: 0.75;
}

.nav-inner {
    position: relative;
    z-index: 2;
}

.nav-eyebrow {
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--amethyst);
    margin-bottom: 0.5rem;
}

.nav-heading {
    font-family: "Poiret One", sans-serif;
    font-weight: 400;
    font-size: 2.25rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--prism-white);
    margin-bottom: 2.5rem;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    padding-left: 1.5rem;
}

.nav-list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--holo-lavender) 20%, var(--holo-lavender) 80%, transparent 100%);
    opacity: 0.5;
}

.nav-list li { position: relative; }

.nav-list a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0.25rem;
    color: var(--ghost-text);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(196, 167, 231, 0.1);
    transition: color 400ms var(--elastic), transform 500ms var(--elastic);
}

.nav-list a:hover {
    color: var(--prism-white);
    transform: translateX(6px);
}

.nav-tick {
    position: absolute;
    left: -1.5rem;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mist-layer);
    border: 1px solid var(--amethyst);
    transform: translate(calc(-50% + 0.5px), -50%);
    transition: background 500ms var(--elastic), transform 500ms var(--elastic), box-shadow 500ms var(--elastic);
}

.nav-list a.active .nav-tick,
.nav-list a:hover .nav-tick {
    background: var(--holo-gradient);
    background-size: 250% 100%;
    transform: translate(calc(-50% + 0.5px), -50%) scale(1.4);
    box-shadow: 0 0 14px rgba(196, 167, 231, 0.5);
    border-color: transparent;
}

.nav-list a.active {
    color: var(--prism-white);
}

/* ========== Progress Ticker ========== */

.progress-ticker {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: rgba(15, 12, 30, 0.85);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(196, 167, 231, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 20;
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amethyst);
}

.ticker-label,
.ticker-coord {
    flex-shrink: 0;
    font-weight: 500;
}

.ticks {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    height: 100%;
}

.tick {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mist-layer);
    border: 1px solid var(--amethyst);
    transition: background 600ms var(--elastic), transform 600ms var(--elastic), box-shadow 600ms var(--elastic);
    cursor: pointer;
}

.tick.tick-fork {
    width: 10px;
    height: 28px;
    border-radius: 5px;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.tick.tick-fork .subtick {
    width: 8px;
    height: 6px;
    border-radius: 3px;
    background: var(--mist-layer);
    border: 1px solid var(--amethyst);
    transition: background 600ms var(--elastic), transform 600ms var(--elastic);
}

.tick.active {
    background: linear-gradient(135deg, var(--prismatic-rose), var(--holo-lavender), var(--spectral-teal));
    transform: scale(1.35);
    box-shadow: 0 0 12px rgba(196, 167, 231, 0.6);
    border-color: transparent;
}

.tick-fork.active .subtick:nth-child(1) { background: var(--prismatic-rose); border-color: transparent; transform: scaleX(1.15); }
.tick-fork.active .subtick:nth-child(2) { background: var(--spectral-teal);  border-color: transparent; transform: scaleX(1.15); }
.tick-fork.active .subtick:nth-child(3) { background: var(--refracted-gold); border-color: transparent; transform: scaleX(1.15); }

/* ========== Small screens ========== */

@media (max-width: 720px) {
    .thread-panel { width: 100vw; }
    .fork-panel { width: 140vw; }
    .merge-panel { width: 110vw; }

    .panel-inner,
    .panel-inner.reversed {
        grid-template-columns: 1fr;
        max-height: none;
        gap: 2rem;
        padding-top: 1rem;
    }

    .panel { padding: 4vh 5vw 10vh; }

    .iso-stage {
        width: 180px;
        height: 180px;
    }

    .nav-overlay { padding: 5rem 1.5rem 2rem; }

    .progress-ticker {
        font-size: 10px;
        letter-spacing: 0.15em;
        padding: 0 0.75rem;
    }
}