:root {
    --bg: #0b1016;
    --bg-soft: #121820;
    --panel: rgba(16, 22, 31, 0.78);
    --panel-strong: rgba(18, 24, 33, 0.94);
    --line: rgba(218, 228, 249, 0.1);
    --text: #ebf0fb;
    --muted: #a3aec3;
    --accent: #9bb8ec;
    --accent-soft: #8fc9c1;
    --accent-warm: #d8c7a7;
    --danger: #de8475;
    --shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(146, 178, 235, 0.2), transparent 28%),
        radial-gradient(circle at bottom right, rgba(130, 212, 200, 0.15), transparent 32%),
        linear-gradient(180deg, #090c11 0%, #10161f 100%);
    color: var(--text);
    font-family: "IBM Plex Sans", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.shell {
    position: relative;
    padding: 2rem 1.5rem 4rem;
}

.shell-auth {
    display: grid;
    place-items: center;
    padding: 2rem;
}

.ambient {
    position: fixed;
    inset: auto;
    width: 28rem;
    height: 28rem;
    border-radius: 999px;
    filter: blur(80px);
    opacity: 0.26;
    pointer-events: none;
}

.ambient-one {
    top: -6rem;
    left: -8rem;
    background: rgba(143, 184, 255, 0.4);
}

.ambient-two {
    right: -8rem;
    bottom: 0;
    background: rgba(126, 224, 209, 0.28);
}

.topbar,
.page,
.login-panel {
    position: relative;
    z-index: 2;
}

.topbar {
    max-width: 1280px;
    margin: 0 auto 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.brand,
.hero-card h2,
.panel h2,
.panel h3,
.panel h4,
.login-panel h1,
.center-message h1,
.opening-title,
.stage-head h3,
.dossier-head h3,
.analysis-panel h3,
.recommendation-atlas h3,
.evidence-block h3 {
    margin: 0;
    font-family: inherit;
    letter-spacing: -0.03em;
    font-weight: 600;
}

.brand {
    font-size: clamp(2.15rem, 4vw, 3.3rem);
    line-height: 0.92;
}

.eyebrow {
    margin: 0 0 0.35rem;
    color: var(--accent-soft);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.topnav a {
    color: rgba(235, 240, 251, 0.92);
}

.system-status-menu {
    position: relative;
}

.system-status-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.78rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(235, 240, 251, 0.92);
    cursor: pointer;
    list-style: none;
}

.system-status-menu summary::-webkit-details-marker {
    display: none;
}

.system-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(235, 240, 251, 0.32);
    box-shadow: 0 0 0 0 rgba(235, 240, 251, 0.18);
}

.system-status-dot.is-live {
    background: var(--accent-soft);
    box-shadow: 0 0 0 0.28rem rgba(143, 201, 193, 0.12);
}

.system-status-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.55rem);
    min-width: 18rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(10, 14, 22, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.system-status-panel strong {
    display: block;
    margin-bottom: 0.25rem;
}

.system-status-panel p {
    margin: 0.25rem 0 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 0.92rem;
}

.page {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
}

.hero-grid,
.grid-two,
.grid-three,
.admin-grid {
    display: grid;
    gap: 1.5rem;
}

.hero-grid,
.grid-two,
.admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-card,
.panel,
.metric-wall,
.login-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.hero-card,
.panel,
.login-panel {
    padding: 1.4rem;
}

.metric-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.metric-card {
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.metric-card span,
.muted,
.status-line {
    color: var(--muted);
}

.metric-card strong {
    display: block;
    margin-top: 0.5rem;
    font-size: 2rem;
}

.hero-text,
.lede {
    max-width: 52rem;
    color: #d8e0f2;
    line-height: 1.7;
}

.hero-badges,
.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1rem;
}

.hero-badges span,
.score-pill {
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(143, 184, 255, 0.1);
    border: 1px solid rgba(143, 184, 255, 0.14);
}

.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.timeline-chart,
.constellation-map {
    min-height: 360px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.rank-list,
.mode-stack,
.obsession-stack,
.recommendation-grid,
.log-table,
.admin-actions {
    display: grid;
    gap: 1rem;
}

.rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rank-list li,
.mode-card,
.obsession-card,
.recommendation-card,
.log-row {
    padding: 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.rank-list li span,
.track-line,
.log-row span {
    display: block;
    margin-top: 0.25rem;
    color: var(--muted);
}

.mode-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.recommendation-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.primary-button,
.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.85rem 1.15rem;
    border: 1px solid transparent;
    font: inherit;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.primary-button {
    background: linear-gradient(135deg, var(--accent), var(--accent-soft));
    color: #07111a;
    font-weight: 800;
}

.ghost-button {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text);
}

.ghost-button.danger {
    border-color: rgba(255, 143, 135, 0.2);
    color: var(--danger);
}

.primary-button:hover,
.ghost-button:hover {
    transform: translateY(-1px);
}

.inline-button {
    width: fit-content;
}

.login-wrap {
    width: min(100%, 880px);
}

.login-panel {
    padding: 2rem;
}

.stack-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.stack-form label,
.file-field {
    display: grid;
    gap: 0.5rem;
}

input[type="email"],
input[type="password"],
input[type="file"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 0.95rem 1rem;
    font: inherit;
}

.alert {
    border-radius: 18px;
    padding: 0.9rem 1rem;
    margin: 1rem 0;
}

.alert-success {
    background: rgba(126, 224, 209, 0.1);
    border: 1px solid rgba(126, 224, 209, 0.2);
}

.alert-error {
    background: rgba(255, 143, 135, 0.1);
    border: 1px solid rgba(255, 143, 135, 0.2);
}

.center-message {
    min-height: 60vh;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 1rem;
}

.tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(10, 14, 22, 0.94);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 0.65rem 0.8rem;
    color: var(--text);
    font-size: 0.9rem;
    transform: translate(-50%, calc(-100% - 12px));
    white-space: nowrap;
}

.observatory-shell {
    display: grid;
    gap: 1.7rem;
}

.observatory-opening {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, 0.9fr);
    gap: 1.5rem;
    align-items: stretch;
}

.opening-copy,
.opening-ledger,
.constellation-theatre,
.evidence-block,
.timeline-chamber,
.annotation-block,
.analysis-panel,
.recommendation-atlas {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 30px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.opening-copy {
    padding: 2rem 2rem 1.8rem;
    position: relative;
    overflow: hidden;
}

.opening-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 15%, rgba(146, 178, 235, 0.12), transparent 26%),
        radial-gradient(circle at 15% 80%, rgba(130, 212, 200, 0.1), transparent 28%);
    pointer-events: none;
}

.opening-overline {
    margin: 0 0 1rem;
    color: rgba(235, 240, 251, 0.72);
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.opening-title {
    font-size: clamp(2.6rem, 5vw, 4.85rem);
    line-height: 0.94;
    max-width: 12ch;
}

.opening-title span {
    display: block;
    margin-top: 0.8rem;
    color: rgba(235, 240, 251, 0.78);
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    line-height: 1.12;
}

.opening-narrative {
    max-width: 50rem;
    margin: 1.25rem 0 0;
    color: #d6deef;
    line-height: 1.72;
    font-size: 1.06rem;
}

.signal-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.6rem;
}

.signal-card {
    padding: 1rem 1rem 1.1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.signal-head,
.mode-row-head,
.casefile-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}

.signal-head strong,
.mode-row-head strong,
.casefile-head strong {
    font-size: 1.02rem;
}

.signal-head span,
.mode-row-head span,
.casefile-head span {
    color: rgba(235, 240, 251, 0.72);
    font-size: 0.92rem;
}

.signal-meter,
.mode-row-meter {
    width: 100%;
    height: 6px;
    margin: 0.8rem 0 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.signal-meter span,
.mode-row-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(146, 178, 235, 0.95), rgba(130, 212, 200, 0.95));
}

.signal-card p,
.annotation-card p,
.casefile-card p,
.mode-row p,
.atlas-card p {
    margin: 0;
    color: #d0d9ec;
    line-height: 1.55;
}

.signal-obsession .signal-meter span {
    background: linear-gradient(90deg, rgba(215, 192, 155, 0.95), rgba(223, 138, 121, 0.95));
}

.signal-exploration .signal-meter span,
.signal-activation .signal-meter span {
    background: linear-gradient(90deg, rgba(146, 178, 235, 0.95), rgba(132, 189, 255, 0.95));
}

.signal-centering .signal-meter span,
.signal-calming .signal-meter span {
    background: linear-gradient(90deg, rgba(130, 212, 200, 0.95), rgba(196, 231, 220, 0.95));
}

.signal-nostalgia .signal-meter span {
    background: linear-gradient(90deg, rgba(202, 178, 214, 0.95), rgba(215, 192, 155, 0.95));
}

.opening-ledger {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.ledger-block {
    padding: 1.1rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ledger-block strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.18rem;
}

.ledger-block p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.observatory-stage,
.dossier-grid,
.analysis-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
    gap: 1.5rem;
}

.constellation-theatre,
.timeline-chamber,
.analysis-panel,
.recommendation-atlas {
    padding: 1.5rem;
}

.constellation-map-hero {
    min-height: 560px;
    margin-top: 1.2rem;
    background:
        radial-gradient(circle at 50% 42%, rgba(146, 178, 235, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
}

.evidence-rail,
.annotation-rail {
    display: grid;
    gap: 1rem;
}

.evidence-block,
.annotation-block {
    padding: 1.25rem;
}

.force-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.85rem;
}

.force-list li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    padding: 0.95rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.force-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    border-radius: 999px;
    background: rgba(146, 178, 235, 0.12);
    color: #dce6fb;
    font-size: 0.92rem;
    font-weight: 600;
}

.force-list strong {
    display: block;
    margin-bottom: 0.22rem;
}

.force-list p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.dossier-section {
    display: grid;
    gap: 1rem;
}

.dossier-head,
.atlas-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

.timeline-chart-wide {
    min-height: 460px;
}

.annotation-list,
.casefile-list {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
}

.annotation-card,
.casefile-card,
.mode-row {
    padding: 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.annotation-card span,
.casefile-card span {
    display: inline-block;
    margin-bottom: 0.3rem;
    color: var(--muted);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.annotation-card strong {
    display: block;
    margin-bottom: 0.55rem;
}

.annotation-card-obsession {
    background: linear-gradient(180deg, rgba(223, 138, 121, 0.07), rgba(255, 255, 255, 0.03));
}

.analysis-panel {
    display: grid;
    gap: 1rem;
}

.mode-stack.refined {
    gap: 0.8rem;
}

.recommendation-atlas {
    padding: 1.5rem;
}

.atlas-grid {
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.atlas-card {
    min-height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.025));
}

@media (max-width: 1080px) {
    .hero-grid,
    .grid-two,
    .grid-three,
    .admin-grid,
    .observatory-opening,
    .observatory-stage,
    .dossier-grid,
    .analysis-columns {
        grid-template-columns: 1fr;
    }

    .panel-head,
    .topbar,
    .dossier-head,
    .atlas-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .signal-band {
        grid-template-columns: 1fr;
    }

    .constellation-map-hero {
        min-height: 460px;
    }
}

@media (max-width: 720px) {
    .shell,
    .shell-auth {
        padding: 1rem 0.9rem 3rem;
    }

    .metric-wall {
        grid-template-columns: 1fr 1fr;
    }

    .login-panel,
    .hero-card,
    .panel {
        border-radius: 24px;
    }
}

.observatory-shell.v2 {
    display: grid;
    gap: 1.35rem;
}

.aperture-stage,
.temporal-atlas,
.evidence-floor,
.deep-read,
.atlas-v2 {
    position: relative;
    border: 1px solid rgba(226, 234, 251, 0.08);
    background: linear-gradient(180deg, rgba(14, 19, 27, 0.88), rgba(13, 18, 26, 0.8));
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.aperture-stage {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.26fr);
    gap: 0;
    border-radius: 34px;
    overflow: hidden;
}

.aperture-copy,
.aperture-map-panel,
.atlas-main,
.atlas-side,
.evidence-column,
.cognitive-ledger,
.casefile-atlas,
.atlas-v2 {
    padding: 1.7rem 1.8rem;
}

.aperture-copy {
    border-right: 1px solid rgba(226, 234, 251, 0.06);
    background:
        radial-gradient(circle at 72% 22%, rgba(146, 178, 235, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}

.aperture-kicker {
    margin: 0 0 0.7rem;
    color: rgba(235, 240, 251, 0.68);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.88rem;
}

.aperture-title {
    max-width: 10.5ch;
    font-size: clamp(3rem, 5.4vw, 5.8rem);
    line-height: 0.92;
}

.aperture-deck {
    max-width: 32rem;
    margin: 1.2rem 0 0;
    color: #dce5f6;
    font-size: 1.1rem;
    line-height: 1.68;
}

.aperture-secondary {
    max-width: 32rem;
    margin: 1rem 0 0;
    color: rgba(220, 229, 246, 0.74);
    line-height: 1.6;
}

.force-ribbon {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.force-strip {
    padding: 0.95rem 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.force-strip-head,
.ledger-line-head,
.casefile-entry-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}

.force-strip-head strong,
.ledger-line-head strong,
.casefile-entry-head strong {
    font-size: 1rem;
}

.force-strip-head span,
.ledger-line-head span,
.casefile-entry-head span {
    color: rgba(235, 240, 251, 0.68);
    font-size: 0.9rem;
}

.force-strip-meter,
.ledger-line-meter {
    height: 6px;
    margin: 0.72rem 0 0.85rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
}

.force-strip-meter span,
.ledger-line-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(148, 180, 236, 1), rgba(130, 212, 200, 1));
}

.force-strip p,
.field-note p,
.margin-note p,
.evidence-copy p,
.ledger-line p,
.casefile-entry p,
.atlas-v2-card p,
.backstage-lines p {
    margin: 0;
    color: #d2dbee;
    line-height: 1.55;
}

.aperture-map-panel {
    display: grid;
    gap: 1rem;
    background:
        radial-gradient(circle at 52% 46%, rgba(146, 178, 235, 0.09), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0));
}

.aperture-map-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

.aperture-map-wrap {
    position: relative;
    min-height: 620px;
}

.aperture-map {
    min-height: 620px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 45%, rgba(146, 178, 235, 0.08), transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
}

.map-note {
    position: absolute;
    max-width: 14rem;
    padding: 0.8rem 0.9rem;
    border-radius: 18px;
    background: rgba(9, 13, 20, 0.88);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

.map-note strong {
    display: block;
    margin-bottom: 0.25rem;
}

.map-note p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.map-note-1 {
    top: 1rem;
    left: 1rem;
}

.map-note-2 {
    right: 1rem;
    top: 7rem;
}

.map-note-3 {
    left: 2rem;
    bottom: 1.2rem;
}

.field-notes-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border-radius: 26px;
    overflow: hidden;
    background: rgba(226, 234, 251, 0.08);
}

.field-note {
    padding: 1.15rem 1.2rem 1.25rem;
    background: rgba(14, 19, 27, 0.84);
}

.field-note strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.12rem;
}

.temporal-atlas {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.8fr);
    gap: 0;
    border-radius: 30px;
    overflow: hidden;
}

.atlas-main {
    border-right: 1px solid rgba(226, 234, 251, 0.06);
}

.atlas-headline,
.atlas-v2-head,
.evidence-column-head,
.ledger-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.atlas-timeline {
    min-height: 500px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008));
    border: 1px solid rgba(255,255,255,0.04);
}

.atlas-side {
    display: grid;
    gap: 1rem;
}

.margin-notes {
    padding-bottom: 0.2rem;
}

.margin-note-list,
.evidence-list,
.ledger-lines,
.casefile-atlas-list {
    display: grid;
    gap: 0.75rem;
}

.margin-note,
.evidence-row,
.ledger-line,
.casefile-entry,
.atlas-v2-card {
    padding: 1rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
}

.margin-note span,
.obsession-note span {
    display: inline-block;
    margin-bottom: 0.3rem;
    color: rgba(235, 240, 251, 0.56);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}

.margin-note strong {
    display: block;
    margin-bottom: 0.5rem;
}

.obsession-note {
    background: linear-gradient(180deg, rgba(223, 138, 121, 0.08), rgba(255,255,255,0.03));
}

.evidence-floor,
.deep-read {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(226, 234, 251, 0.08);
}

.evidence-column,
.cognitive-ledger,
.casefile-atlas {
    background: rgba(14, 19, 27, 0.84);
}

.evidence-row {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.evidence-key span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    min-height: 2.1rem;
    border-radius: 999px;
    background: rgba(146, 178, 235, 0.12);
    color: #dce7fb;
    font-weight: 600;
}

.evidence-copy strong {
    display: block;
    margin-bottom: 0.25rem;
}

.backstage-lines {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.atlas-v2 {
    border-radius: 30px;
}

.atlas-v2-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.atlas-v2-card {
    min-height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
}

.atlas-v2-card h4 {
    margin: 0 0 0.35rem;
}

.atlas-v2-card .track-line {
    display: block;
    margin-bottom: 0.8rem;
}

.v2 .score-pill {
    margin-top: 0.85rem;
    display: inline-flex;
}

@media (max-width: 1280px) {
    .field-notes-strip,
    .atlas-v2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .aperture-stage,
    .temporal-atlas,
    .evidence-floor,
    .deep-read,
    .atlas-v2-grid,
    .field-notes-strip {
        grid-template-columns: 1fr;
    }

    .aperture-copy,
    .atlas-main {
        border-right: 0;
        border-bottom: 1px solid rgba(226, 234, 251, 0.06);
    }

    .aperture-map-head,
    .atlas-headline,
    .atlas-v2-head,
    .evidence-column-head,
    .ledger-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 720px) {
    .aperture-copy,
    .aperture-map-panel,
    .atlas-main,
    .atlas-side,
    .evidence-column,
    .cognitive-ledger,
    .casefile-atlas,
    .atlas-v2 {
        padding: 1.2rem;
    }

    .aperture-title {
        max-width: 100%;
        font-size: clamp(2.5rem, 14vw, 4rem);
    }

    .aperture-map-wrap,
    .aperture-map {
        min-height: 430px;
    }

    .map-note {
        position: static;
        max-width: none;
        margin-top: 0.8rem;
    }
}

.observatory-shell.v3 {
    display: grid;
    gap: 1.8rem;
}

.instrument-surface,
.analysis-runway,
.open-ledger-grid {
    border: 1px solid rgba(226, 234, 251, 0.08);
    background: linear-gradient(180deg, rgba(13, 18, 26, 0.9), rgba(11, 16, 23, 0.82));
    border-radius: 32px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.instrument-surface {
    padding: 1.25rem 1.25rem 1.4rem;
    position: relative;
    overflow: hidden;
}

.instrument-surface::before {
    content: "";
    position: absolute;
    inset: -20% auto auto -10%;
    width: 28rem;
    height: 28rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 58%);
    pointer-events: none;
}

.instrument-surface[data-signal="activation"] {
    --focus-color: #9bb8ec;
}

.instrument-surface[data-signal="apaisement"] {
    --focus-color: #8fc9c1;
}

.instrument-surface[data-signal="recentrage"] {
    --focus-color: #d8c7a7;
}

.instrument-surface[data-signal="nostalgie"] {
    --focus-color: #b8a7d7;
}

.instrument-surface[data-signal="exploration"] {
    --focus-color: #f2a59b;
}

.instrument-surface[data-signal="obsession"] {
    --focus-color: #de8475;
}

.surface-head,
.surface-grid,
.analysis-runway,
.open-ledger-grid {
    position: relative;
    z-index: 1;
}

.surface-head {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: start;
}

.surface-intro {
    max-width: 54rem;
}

.surface-intro h2,
.runway-head h3,
.ledger-title h3,
.map-panel-head h3 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.surface-deck {
    max-width: 46rem;
    margin: 0.95rem 0 0;
    color: #cad3e5;
    line-height: 1.68;
    font-size: 1rem;
}

.surface-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    max-width: 24rem;
}

.surface-status span,
.panel-tag,
.map-readout span,
.timeline-readout span,
.fragment span {
    color: rgba(235, 240, 251, 0.56);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
}

.surface-status span {
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.surface-controls {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

.chip-band {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.focus-chip,
.lens-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    border: 0;
    border-radius: 999px;
    padding: 0.68rem 0.95rem;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(235, 240, 251, 0.84);
    font: inherit;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease, color 180ms ease, border-color 180ms ease;
    border: 1px solid transparent;
}

.focus-chip strong,
.lens-chip strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.82rem;
    font-weight: 600;
}

.focus-chip:hover,
.lens-chip:hover,
.focus-chip.is-active,
.lens-chip.is-active {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.08);
}

.focus-chip.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus-color, var(--accent)) 68%, white 12%);
}

.surface-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 1.2rem;
    margin-top: 1.35rem;
}

.focus-panel,
.map-panel {
    min-height: 100%;
}

.focus-panel {
    padding: 0.35rem 0.1rem 0 0.1rem;
    display: grid;
    gap: 1rem;
}

.focus-panel h3 {
    margin: 0;
    max-width: 10.8ch;
    font-size: clamp(3rem, 6vw, 5.4rem);
    line-height: 0.9;
    letter-spacing: -0.06em;
}

.focus-summary {
    max-width: 30rem;
    margin: 0;
    color: #d8e0f1;
    font-size: 1.1rem;
    line-height: 1.62;
}

.focus-meter-large {
    width: min(28rem, 100%);
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.focus-meter-large span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--focus-color, var(--accent)) 88%, white 12%), color-mix(in srgb, var(--focus-color, var(--accent)) 72%, black 8%));
}

.focus-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.1rem;
    margin: 0;
    padding: 0.2rem 0 0;
}

.focus-facts div {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.focus-facts dt {
    color: rgba(235, 240, 251, 0.52);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
}

.focus-facts dd {
    margin: 0.35rem 0 0;
    color: #edf2ff;
    line-height: 1.5;
}

.focus-fragments {
    display: grid;
    gap: 0.75rem;
}

.fragment {
    padding: 0.95rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.fragment p {
    margin: 0.45rem 0 0;
    color: #d6deef;
    line-height: 1.62;
}

.fragment-quiet p {
    color: rgba(214, 222, 239, 0.82);
}

.mode-readout {
    margin-top: 0.15rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mode-readout strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

.mode-readout p {
    margin: 0.45rem 0 0;
    line-height: 1.58;
}

.map-panel {
    padding: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.map-panel-head,
.runway-head,
.ledger-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

.map-panel-head {
    margin-bottom: 0.9rem;
}

.instrument-map {
    min-height: 620px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--focus-color, var(--accent)) 20%, transparent) 0%, transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.map-readout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.map-readout strong,
.timeline-readout strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.05rem;
}

.map-readout p,
.timeline-readout p,
.trace-button p,
.phase-row p,
.ledger-row p,
.ledger-disclosure-body p {
    margin: 0.4rem 0 0;
    color: #d0d8eb;
    line-height: 1.56;
}

.analysis-runway {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
    gap: 0;
    overflow: hidden;
}

.timeline-panel,
.context-rail,
.open-ledger {
    padding: 1.25rem;
}

.timeline-panel {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.runway-head {
    margin-bottom: 0.95rem;
}

.instrument-timeline {
    min-height: 460px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.timeline-readout {
    display: grid;
    grid-template-columns: 13rem 15rem minmax(0, 1fr);
    gap: 1rem;
    margin-top: 0.9rem;
}

.timeline-readout-wide {
    max-width: 100%;
}

.context-rail {
    display: grid;
    gap: 0;
}

.context-block + .context-block {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.trace-list,
.phase-list,
.ledger-rows,
.ledger-disclosures {
    display: grid;
    gap: 0;
}

.trace-button,
.phase-row,
.ledger-row {
    padding: 0.95rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    color: inherit;
    font: inherit;
}

.trace-button {
    cursor: pointer;
    transition: color 180ms ease, transform 180ms ease;
}

.trace-button:hover,
.trace-button.is-active {
    transform: translateX(4px);
    color: var(--text);
}

.trace-button span,
.phase-row span {
    display: inline-block;
    margin-bottom: 0.28rem;
    color: rgba(235, 240, 251, 0.52);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.76rem;
}

.trace-button strong,
.phase-row strong,
.ledger-row strong,
.ledger-disclosure summary strong {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
}

.open-ledger-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
}

.open-ledger + .open-ledger {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.ledger-title {
    align-items: start;
    margin-bottom: 0.5rem;
}

.ledger-title h3 {
    font-size: 1.55rem;
}

.ledger-row span,
.ledger-disclosure summary span {
    display: block;
    margin-top: 0.2rem;
    color: rgba(235, 240, 251, 0.62);
}

.ledger-disclosure {
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ledger-disclosure summary {
    list-style: none;
    cursor: pointer;
}

.ledger-disclosure summary::-webkit-details-marker {
    display: none;
}

.ledger-disclosure .track-line {
    margin-top: 0.3rem;
    font-size: 0.92rem;
}

.ledger-disclosure-body {
    padding-top: 0.75rem;
}

.ledger-disclosure[open] summary strong {
    color: color-mix(in srgb, var(--focus-color, var(--accent)) 82%, white 18%);
}

@media (max-width: 1180px) {
    .surface-grid,
    .analysis-runway,
    .open-ledger-grid {
        grid-template-columns: 1fr;
    }

    .map-panel,
    .timeline-panel,
    .open-ledger + .open-ledger {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .timeline-panel {
        border-right: 0;
    }
}

@media (max-width: 820px) {
    .surface-head,
    .map-panel-head,
    .runway-head,
    .ledger-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .surface-status {
        justify-content: flex-start;
    }

    .focus-facts,
    .timeline-readout,
    .map-readout {
        grid-template-columns: 1fr;
    }

    .focus-panel h3 {
        max-width: 100%;
        font-size: clamp(2.6rem, 12vw, 4.5rem);
    }

    .instrument-map {
        min-height: 470px;
    }
}

.observatory-shell.v4 {
    display: grid;
    gap: 1.6rem;
}

.skydeck,
.time-lab,
.ledger-floor {
    position: relative;
    border: 1px solid rgba(226, 234, 251, 0.08);
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(12, 17, 24, 0.92), rgba(11, 15, 22, 0.86));
    box-shadow: var(--shadow);
    overflow: hidden;
}

.skydeck {
    padding: 1.4rem;
    --focus-color: #e8a39a;
}

.skydeck[data-signal="activation"] { --focus-color: #93b2ea; }
.skydeck[data-signal="apaisement"] { --focus-color: #83c7be; }
.skydeck[data-signal="recentrage"] { --focus-color: #d6c39f; }
.skydeck[data-signal="nostalgie"] { --focus-color: #b9a7da; }
.skydeck[data-signal="exploration"] { --focus-color: #e8a39a; }
.skydeck[data-signal="obsession"] { --focus-color: #db8474; }

.skydeck::before,
.time-lab::before,
.ledger-floor::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(146, 178, 235, 0.1), transparent 28%),
        radial-gradient(circle at 86% 84%, rgba(131, 199, 190, 0.08), transparent 24%);
    pointer-events: none;
}

.skydeck-topline,
.skydeck-grid,
.time-lab,
.ledger-floor {
    position: relative;
    z-index: 1;
}

.skydeck-topline {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: end;
}

.skydeck-topline h2,
.map-theater-head h3,
.time-lab-head h3,
.ledger-panel h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    max-width: 24ch;
}

.status-tape {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.status-tape span {
    padding: 0.45rem 0.68rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(235, 240, 251, 0.72);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.skydeck-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 1.2rem;
    margin-top: 1.2rem;
    align-items: start;
}

.explorer-rail {
    display: grid;
    gap: 0.95rem;
}

.control-block,
.trace-block,
.ledger-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
}

.control-block {
    padding: 1rem;
}

.control-block h3 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.16;
    letter-spacing: -0.04em;
}

.muted-strong {
    margin: 0.55rem 0 0;
    color: #d3dbee;
    line-height: 1.56;
    font-size: 0.95rem;
}

.current-reading {
    margin: 0.9rem 0 0;
    color: #edf2ff;
    font-size: 0.98rem;
    line-height: 1.58;
}

.focus-anchors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}

.focus-anchors div,
.time-readout > div {
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.focus-anchors span,
.time-readout span {
    display: block;
    color: rgba(235, 240, 251, 0.52);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.focus-anchors strong,
.time-readout strong,
.mode-note strong,
.control-block-node strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.02rem;
}

.chip-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.focus-chip,
.lens-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(235, 240, 251, 0.82);
    font: inherit;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease, border-color 180ms ease, color 180ms ease;
}

.focus-chip strong,
.lens-chip strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    min-height: 1.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
}

.focus-chip:hover,
.lens-chip:hover,
.focus-chip.is-active,
.lens-chip.is-active {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.05);
    border-color: color-mix(in srgb, var(--focus-color) 50%, rgba(255, 255, 255, 0.14));
    color: #fff;
}

.mode-note {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.mode-note p,
.control-block-system p,
.control-block-node p,
.time-readout p,
.trace-button p,
.phase-row p,
.ledger-item p,
.ledger-disclosure-body p {
    margin: 0.4rem 0 0;
    color: #d2dbee;
    line-height: 1.54;
    font-size: 0.94rem;
}

.trace-button p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.map-theater {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.01));
    display: grid;
    gap: 0.9rem;
    align-self: start;
}

.map-theater-head,
.time-lab-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 0.9rem;
}

.map-quickstart {
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem 0.95rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.map-quickstart-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.map-quickstart-steps span {
    padding: 0.38rem 0.56rem;
    border-radius: 999px;
    background: rgba(8, 12, 18, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(235, 240, 251, 0.78);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.map-guide-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.guide-node-button {
    padding: 0.45rem 0.68rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.guide-node-button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.07);
    border-color: color-mix(in srgb, var(--focus-color) 55%, rgba(255, 255, 255, 0.12));
}

.map-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.map-tools span {
    padding: 0.4rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(235, 240, 251, 0.6);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.map-reset-button {
    padding: 0.55rem 0.85rem;
}

.cosmos-map {
    height: 560px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--focus-color) 14%, transparent), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.map-footer {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
    gap: 1rem;
    padding-top: 0.15rem;
}

.map-inspector,
.map-footer-meta {
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.node-visual-link {
    display: inline-flex;
    margin-bottom: 0.7rem;
}

.node-visual-link.is-hidden,
.node-visual.is-hidden {
    display: none;
}

.node-visual {
    width: 4.25rem;
    height: 4.25rem;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

.map-inspector strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
}

.neighbor-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.neighbor-pill {
    padding: 0.38rem 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(235, 240, 251, 0.78);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.neighbor-pill:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.map-footer-meta p {
    margin: 0.4rem 0 0;
    color: #d0d8eb;
    line-height: 1.58;
    font-size: 0.94rem;
}

.time-lab {
    display: grid;
    gap: 1rem;
    align-items: start;
    padding: 1.15rem;
}

.time-lab-main {
    position: relative;
    z-index: 1;
    align-self: start;
}

.temporal-band {
    height: 252px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.008));
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}

.temporal-band::-webkit-scrollbar {
    height: 8px;
}

.temporal-band::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 999px;
}

.timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.timeline-legend span {
    padding: 0.38rem 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(235, 240, 251, 0.66);
    font-size: 0.76rem;
}

.time-readout {
    display: grid;
    grid-template-columns: 150px 180px minmax(0, 1fr);
    gap: 1rem;
    margin-top: 0.9rem;
}

.time-readout-wide {
    max-width: 100%;
}

.trace-block {
    padding: 1rem;
}

.time-lab-support {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
}

.time-guide-list {
    margin: 0.2rem 0 0;
    padding-left: 1rem;
    color: #d2dbee;
    line-height: 1.55;
}

.time-guide-list li + li {
    margin-top: 0.45rem;
}

.trace-list,
.phase-list,
.ledger-list,
.ledger-disclosures {
    display: grid;
    gap: 0;
}

.trace-button,
.phase-row {
    padding: 0.95rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    color: inherit;
    font: inherit;
}

.trace-button {
    cursor: pointer;
    transition: transform 180ms ease, color 180ms ease;
}

.trace-button:hover,
.trace-button.is-active {
    transform: translateX(4px);
    color: #fff;
}

.trace-button span,
.phase-row span {
    display: inline-block;
    margin-bottom: 0.3rem;
    color: rgba(235, 240, 251, 0.52);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.trace-button strong,
.phase-row strong,
.ledger-item strong,
.ledger-disclosure summary strong {
    display: block;
    font-size: 0.96rem;
    line-height: 1.38;
}

.ledger-floor {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.ledger-panel {
    padding: 1rem;
    border-radius: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.ledger-panel:first-child {
    border-left: 0;
}

.ledger-list .ledger-item {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ledger-disclosure {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ledger-disclosure summary {
    list-style: none;
    cursor: pointer;
}

.ledger-disclosure summary::-webkit-details-marker {
    display: none;
}

.ledger-disclosure summary span {
    display: block;
    margin-top: 0.25rem;
    color: rgba(235, 240, 251, 0.62);
    font-size: 0.9rem;
}

.ledger-disclosure-body {
    padding-top: 0.7rem;
}

.ledger-disclosure .track-line {
    color: #edf2ff;
}

.micro-cluster + .micro-cluster {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.micro-cluster-label {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: rgba(235, 240, 251, 0.54);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.micro-list {
    display: grid;
    gap: 0.7rem;
}

.micro-item {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
}

.micro-item img {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    object-fit: cover;
}

.micro-item strong {
    display: block;
    font-size: 0.96rem;
}

.micro-item p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.control-block-compact p:last-child {
    margin: 0;
    color: #d9e2f5;
}

.recommendation-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
}

.recommendation-head img {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 12px;
    object-fit: cover;
}

@media (max-width: 1240px) {
    .skydeck-grid,
    .ledger-floor {
        grid-template-columns: 1fr;
    }

    .ledger-panel,
    .explorer-rail,
    .map-theater {
        border-right: 0;
        border-left: 0;
    }

    .ledger-panel + .ledger-panel {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .time-lab-support {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .skydeck-topline,
    .map-theater-head,
    .time-lab-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .status-tape,
    .map-tools {
        justify-content: flex-start;
    }

    .time-readout,
    .focus-anchors,
    .map-footer {
        grid-template-columns: 1fr;
    }

    .cosmos-map {
        height: 500px;
    }
}

.observatory-shell.v5 {
    display: grid;
    gap: 1.4rem;
}

.observatory-shell.v5 .question-deck,
.observatory-shell.v5 .proof-panel,
.observatory-shell.v5 .support-band {
    position: relative;
    border: 1px solid rgba(226, 234, 251, 0.08);
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(12, 17, 24, 0.92), rgba(11, 15, 22, 0.86));
    box-shadow: var(--shadow);
    overflow: hidden;
}

.observatory-shell.v5 .question-deck,
.observatory-shell.v5 .proof-panel,
.observatory-shell.v5 .support-band {
    padding: 1.25rem;
}

.question-deck-head,
.proof-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    align-items: flex-start;
}

.question-deck-head h2,
.proof-panel-head h3,
.support-panel h3 {
    margin: 0;
    font-size: clamp(1.25rem, 2.1vw, 1.85rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    max-width: 18ch;
}

.question-deck-intro,
.panel-note {
    margin: 0.7rem 0 0;
    color: #d2dbee;
    line-height: 1.6;
    max-width: 64ch;
}

.question-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.05rem;
}

.question-pill {
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(235, 240, 251, 0.84);
    font: inherit;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.question-pill:hover,
.question-pill.is-active {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.06);
    border-color: color-mix(in srgb, var(--focus-color) 55%, rgba(255, 255, 255, 0.14));
}

.question-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 320px;
    gap: 1rem;
    margin-top: 1rem;
}

.question-stage-main,
.question-stage-side {
    padding: 1rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.question-stage-main h3 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3.1rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    max-width: 12ch;
}

.question-stage-answer {
    margin: 1rem 0 0;
    font-size: 1.06rem;
    line-height: 1.58;
    color: #edf2ff;
    max-width: 54ch;
}

.question-stage-proof {
    margin: 0.9rem 0 0;
    color: #cdd6ea;
    line-height: 1.58;
    max-width: 60ch;
}

.question-stage-side {
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.stage-fact {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stage-fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.stage-fact span {
    display: block;
    color: rgba(235, 240, 251, 0.52);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.stage-fact strong {
    display: block;
    margin-top: 0.3rem;
    font-size: 1.04rem;
}

.stage-fact p {
    margin: 0.28rem 0 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 0.92rem;
}

.focus-strip {
    margin-top: 1rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.proof-canvas {
    display: grid;
    gap: 1.4rem;
}

.proof-panel-body {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.proof-panel-body-map {
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
}

.map-column {
    display: grid;
    gap: 0.85rem;
}

.map-inspector-panel {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.micro-support {
    padding: 1rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.timeline-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
    margin-top: 1rem;
}

.support-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.support-panel {
    padding: 0 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.support-panel:first-child {
    border-left: 0;
}

.support-panel .ledger-list,
.support-panel .ledger-disclosures {
    margin-top: 0.8rem;
}

.question-emphasis {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--focus-color) 40%, transparent), 0 24px 60px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1180px) {
    .question-stage,
    .proof-panel-body-map,
    .timeline-support,
    .support-band {
        grid-template-columns: 1fr;
    }

    .support-panel {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 1rem;
    }

    .support-panel:first-child {
        border-top: 0;
        padding-top: 0;
    }
}

@media (max-width: 820px) {
    .question-deck-head,
    .proof-panel-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .question-stage-main h3 {
        max-width: 100%;
        font-size: clamp(1.55rem, 9vw, 2.6rem);
    }
}

.atlas-shell {
    display: grid;
    gap: 1.3rem;
}

.atlas-shell .atlas-overview,
.atlas-shell .atlas-stage,
.atlas-shell .atlas-timeline-board,
.atlas-shell .atlas-ledger {
    position: relative;
    border: 1px solid rgba(226, 234, 251, 0.08);
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(10, 14, 20, 0.94), rgba(11, 15, 21, 0.9));
    box-shadow: var(--shadow);
    overflow: hidden;
}

.atlas-shell .atlas-overview::before,
.atlas-shell .atlas-stage::before,
.atlas-shell .atlas-timeline-board::before,
.atlas-shell .atlas-ledger::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 8% 18%, rgba(146, 178, 235, 0.08), transparent 24%),
        radial-gradient(circle at 88% 88%, rgba(131, 199, 190, 0.07), transparent 22%);
    pointer-events: none;
}

.atlas-shell .atlas-overview,
.atlas-shell .atlas-stage,
.atlas-shell .atlas-timeline-board {
    padding: 1.2rem;
}

.atlas-overview,
.atlas-stage,
.atlas-timeline-board,
.atlas-ledger {
    position: relative;
    z-index: 1;
}

.atlas-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) 320px;
    gap: 1rem;
    align-items: start;
}

.atlas-overview-main,
.atlas-overview-side {
    position: relative;
    z-index: 1;
}

.atlas-overview-main h2 {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(1.75rem, 4vw, 3.35rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.atlas-narrative {
    margin: 0.95rem 0 0;
    max-width: 62ch;
    color: #e6edf9;
    line-height: 1.6;
    font-size: 1.02rem;
}

.atlas-overview-side {
    display: grid;
    gap: 0.8rem;
    padding: 0.1rem 0 0;
}

.atlas-fact {
    padding: 0 0 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.atlas-fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.atlas-fact span,
.atlas-readout span,
.atlas-time-hint span {
    display: block;
    color: rgba(235, 240, 251, 0.52);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.atlas-fact strong {
    display: block;
    margin-top: 0.3rem;
    font-size: 1.04rem;
}

.atlas-fact p {
    margin: 0.22rem 0 0;
    color: var(--muted);
    line-height: 1.48;
    font-size: 0.92rem;
}

.atlas-stage {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 310px;
    gap: 1rem;
    align-items: start;
}

.atlas-rail {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.9rem;
}

.atlas-card,
.atlas-map-board,
.atlas-timeline-side .atlas-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
}

.atlas-card {
    padding: 0.95rem;
}

.atlas-card-mini {
    padding: 0.9rem;
}

.atlas-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.atlas-metrics span {
    padding: 0.42rem 0.62rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(235, 240, 251, 0.72);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.atlas-chip-cluster {
    gap: 0.5rem;
}

.atlas-map-board {
    padding: 1rem;
    position: relative;
    z-index: 1;
}

.atlas-map-head,
.atlas-timeline-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.atlas-map-head h3,
.atlas-timeline-head h3,
.atlas-ledger-panel h3 {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.atlas-map-guide {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.atlas-map-guide span {
    padding: 0.38rem 0.58rem;
    border-radius: 999px;
    background: rgba(8, 12, 18, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(235, 240, 251, 0.78);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.atlas-map-scene {
    margin-top: 0.8rem;
}

.atlas-map {
    height: 620px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--focus-color) 16%, transparent), transparent 27%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.atlas-map-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 1rem;
    margin-top: 0.9rem;
}

.atlas-readout,
.atlas-time-hint {
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.atlas-readout p,
.atlas-time-hint p {
    margin: 0.32rem 0 0;
    color: #d3dbee;
    line-height: 1.56;
    font-size: 0.94rem;
}

.atlas-card-node strong {
    display: block;
    margin-top: 0.3rem;
    font-size: 1rem;
}

.atlas-timeline-board {
    padding: 1.15rem;
}

.atlas-timeline-head {
    position: relative;
    z-index: 1;
}

.atlas-timeline-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 1rem;
    margin-top: 0.9rem;
}

.atlas-timeline-main {
    display: grid;
    gap: 0.8rem;
}

.atlas-timeline {
    height: 280px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.008));
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}

.atlas-timeline::-webkit-scrollbar {
    height: 8px;
}

.atlas-timeline::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 999px;
}

.atlas-time-readout {
    margin-top: 0;
}

.atlas-timeline-side {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.atlas-ledger {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 1rem 0;
}

.atlas-ledger-panel {
    position: relative;
    z-index: 1;
    padding: 0 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.atlas-ledger-panel:first-child {
    border-left: 0;
}

@media (max-width: 1220px) {
    .atlas-overview,
    .atlas-stage,
    .atlas-timeline-stage,
    .atlas-ledger {
        grid-template-columns: 1fr;
    }

    .atlas-ledger-panel {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 1rem;
    }

    .atlas-ledger-panel:first-child {
        border-top: 0;
        padding-top: 0;
    }
}

@media (max-width: 820px) {
    .atlas-overview-main h2 {
        max-width: 100%;
        font-size: clamp(1.55rem, 9vw, 2.5rem);
    }

    .atlas-map-head,
    .atlas-timeline-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .atlas-map,
    .atlas-timeline {
        height: 460px;
    }

    .atlas-map-foot {
        grid-template-columns: 1fr;
    }
}