:root {
    --bg: #06070a;
    --panel: #101319;
    --panel-strong: #171b24;
    --panel-glass: rgba(16, 19, 25, 0.78);
    --line: #29313c;
    --line-soft: rgba(255, 255, 255, 0.08);
    --text: #eef2f6;
    --muted: #94a0ae;
    --cyan: #35d5ff;
    --green: #7dff92;
    --amber: #f5b85b;
    --rose: #ff6f8f;
    --violet: #9c8cff;
    --ink: #030405;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
    --font-main: 'Outfit', sans-serif;
    --font-tech: 'Courier New', monospace;
}

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

html {
    background: var(--bg);
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(53, 213, 255, 0.12), rgba(125, 255, 146, 0.035) 340px, rgba(6, 7, 10, 0) 640px),
        var(--bg);
    font-family: var(--font-main);
    line-height: 1.45;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(135deg, transparent 0 47%, rgba(245, 184, 91, 0.06) 48% 52%, transparent 53% 100%);
    background-size: 40px 40px, 40px 40px, 240px 240px;
    mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.8) 44%, transparent 100%);
    opacity: 0.62;
}

button,
input,
summary {
    font: inherit;
}

button,
summary,
label {
    -webkit-tap-highlight-color: transparent;
}

.app-shell {
    width: min(1440px, calc(100vw - 36px));
    margin: 0 auto;
    padding: 18px 0 58px;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 96px;
    margin-bottom: 18px;
    padding: 10px 0 16px;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.brand-mark {
    width: clamp(58px, 7vw, 78px);
    height: clamp(58px, 7vw, 78px);
    flex: 0 0 auto;
    border-radius: 18px;
    filter: drop-shadow(0 18px 28px rgba(53, 213, 255, 0.18));
}

.brand-copy {
    min-width: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.eyebrow {
    color: var(--amber);
    font-family: var(--font-tech);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-header h1 {
    margin-top: 4px;
    font-family: var(--font-tech);
    font-size: clamp(34px, 4.4vw, 62px);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 0 28px rgba(53, 213, 255, 0.2);
}

.header-subtitle {
    max-width: 600px;
    margin-top: 4px;
    color: #d4dbe5;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.32;
}

.info-button,
.upload-button,
.mode-button,
.upload-choice,
.delete-video,
.modal-close {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    background: rgba(13, 15, 20, 0.84);
    cursor: pointer;
}

.info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    color: var(--cyan);
    border-color: rgba(53, 213, 255, 0.45);
    font-family: var(--font-tech);
    font-size: 12px;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(53, 213, 255, 0.04);
}

.subtle-link {
    color: #d7dee8;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.045);
}

.info-button:hover,
.upload-button:hover,
.upload-choice:hover,
.mode-button:hover,
.delete-video:hover,
.modal-close:hover {
    border-color: var(--cyan);
    background: rgba(53, 213, 255, 0.1);
}

.studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
}

.player-stage,
.side-panel {
    min-width: 0;
}

.player-stage {
    display: grid;
    align-content: start;
    padding: 14px;
    border: 1px solid rgba(53, 213, 255, 0.22);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(53, 213, 255, 0.1), rgba(125, 255, 146, 0.035) 42%, rgba(245, 184, 91, 0.045)),
        rgba(10, 12, 17, 0.88);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.stage-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 0 2px;
}

.status,
.active-summary,
.upload-status,
.video-meta,
.video-empty,
.library-header,
.explainer-kicker {
    font-family: var(--font-tech);
    letter-spacing: 0;
}

.status {
    color: var(--cyan);
    font-size: 11px;
    text-transform: uppercase;
}

.active-summary {
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#player-container {
    position: relative;
    isolation: isolate;
    width: 100%;
    order: 2;
    height: clamp(390px, 54vh, 720px);
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(53, 213, 255, 0.44);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(53, 213, 255, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 18%),
        var(--ink);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(125, 255, 146, 0.06),
        0 0 58px rgba(53, 213, 255, 0.16);
}

#player-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.18;
    mix-blend-mode: screen;
}

#player-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -80px 120px rgba(0, 0, 0, 0.22);
}

#ascii-player,
#ascii-canvas,
#source-video {
    position: absolute;
    top: 0;
    left: 0;
}

#ascii-player {
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: transparent;
    display: none;
    font-family: var(--font-tech);
    font-size: 8px;
    font-weight: bold;
    line-height: 8px;
    pointer-events: auto;
    user-select: text;
    white-space: pre;
}

#ascii-canvas {
    z-index: 1;
    display: none;
}

#source-video {
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: none;
}

#play-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(3, 4, 5, 0.28), rgba(3, 4, 5, 0.72)),
        rgba(3, 4, 5, 0.18);
    backdrop-filter: blur(2px);
    cursor: pointer;
    user-select: none;
}

#play-overlay.hidden {
    display: none;
}

.play-btn {
    width: 82px;
    height: 82px;
    border: 1px solid rgba(125, 255, 146, 0.78);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(125, 255, 146, 0.22), rgba(53, 213, 255, 0.12)),
        rgba(6, 7, 10, 0.72);
    box-shadow: 0 0 46px rgba(125, 255, 146, 0.22), inset 0 0 22px rgba(53, 213, 255, 0.14);
}

.play-btn::after {
    content: '';
    width: 0;
    height: 0;
    margin-left: 4px;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--cyan);
}

.play-label {
    font-family: var(--font-tech);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(6, 7, 10, 0.56);
}

.throughput-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    order: 3;
    margin-top: 12px;
}

.throughput-card {
    display: grid;
    grid-template-rows: auto 24px auto;
    gap: 5px;
    min-width: 0;
    min-height: 84px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
        rgba(9, 11, 16, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.throughput-card.active {
    border-color: rgba(125, 255, 146, 0.64);
    background:
        linear-gradient(135deg, rgba(125, 255, 146, 0.12), rgba(53, 213, 255, 0.07)),
        #0d1718;
    box-shadow: inset 0 0 0 1px rgba(125, 255, 146, 0.12), 0 12px 30px rgba(0, 0, 0, 0.24);
}

.throughput-label,
.throughput-detail {
    min-width: 0;
    font-family: var(--font-tech);
    letter-spacing: 0;
}

.throughput-label {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.throughput-value {
    min-width: 0;
    color: var(--green);
    font-family: var(--font-tech);
    font-size: 20px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.throughput-detail {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.metric-explainer {
    display: grid;
    gap: 8px;
    margin-top: 0;
    padding: 14px 16px;
    border: 1px solid rgba(245, 184, 91, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(245, 184, 91, 0.12), rgba(53, 213, 255, 0.06)),
        rgba(17, 19, 25, 0.96);
}

.metric-explainer h2 {
    color: var(--amber);
    font-family: var(--font-tech);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.metric-explainer p {
    color: #c7cfda;
    font-size: 13px;
    line-height: 1.55;
}

.metric-explainer strong {
    color: var(--text);
    font-weight: 700;
}

.paper-summary {
    display: grid;
    gap: 14px;
    margin-top: 0;
    padding: 16px;
    border: 1px solid rgba(53, 213, 255, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(53, 213, 255, 0.09), rgba(125, 255, 146, 0.05) 48%, rgba(245, 184, 91, 0.08)),
        var(--panel);
}

.paper-summary-copy {
    display: grid;
    gap: 6px;
}

.section-kicker {
    color: var(--amber);
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.paper-summary h2 {
    max-width: 760px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: 0;
}

.paper-summary p {
    max-width: 820px;
    color: #c7cfda;
    font-size: 14px;
    line-height: 1.55;
}

.finding-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.finding-card {
    display: grid;
    grid-template-rows: auto minmax(42px, auto) auto;
    gap: 6px;
    min-width: 0;
    min-height: 130px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(7, 9, 13, 0.58);
}

.finding-card span,
.finding-card small {
    font-family: var(--font-tech);
    letter-spacing: 0;
}

.finding-card span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.finding-card strong {
    color: var(--green);
    font-size: 16px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.finding-card small {
    color: #adb7c5;
    font-size: 10px;
    line-height: 1.35;
}

.finding-scope strong {
    color: var(--amber);
}

.research-section {
    margin-top: 34px;
    padding: 28px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.research-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid rgba(125, 255, 146, 0.22);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(125, 255, 146, 0.08), rgba(53, 213, 255, 0.06), rgba(245, 184, 91, 0.05)),
        rgba(13, 15, 20, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.research-cta p {
    max-width: 820px;
    color: #dbe2ec;
    font-size: clamp(18px, 1.9vw, 26px);
    font-weight: 700;
    line-height: 1.2;
}

.research-cta a:not(.info-button) {
    color: var(--green);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.research-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.risk-link {
    color: var(--rose);
    border-color: rgba(255, 111, 143, 0.44);
}

.player-controls {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 0.7fr);
    gap: 10px;
    align-items: center;
    order: 1;
    margin: 0 0 10px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.048), transparent),
        rgba(12, 14, 20, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.upload-menu {
    position: relative;
}

.upload-menu > summary {
    list-style: none;
}

.upload-menu > summary::-webkit-details-marker {
    display: none;
}

.upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 0 14px;
    color: #061014;
    border-color: transparent;
    background: var(--cyan);
    font-family: var(--font-tech);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.upload-button.busy {
    opacity: 0.7;
    cursor: wait;
}

.upload-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    width: 210px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(16, 19, 25, 0.98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.upload-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 12px;
    color: var(--text);
    font-family: var(--font-tech);
    font-size: 11px;
}

.mode-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(76px, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(3, 4, 5, 0.55);
}

.mode-button {
    border: 0;
    color: var(--muted);
    background: transparent;
    font-family: var(--font-tech);
    font-size: 11px;
    letter-spacing: 0;
}

.mode-button.active {
    color: #07100b;
    background: linear-gradient(135deg, var(--green), #b7ffc3);
    box-shadow: 0 8px 20px rgba(125, 255, 146, 0.18);
}

.ctrl-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ctrl-icon {
    color: var(--muted);
    font-family: var(--font-tech);
    font-size: 11px;
    text-transform: uppercase;
}

#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 5px;
    min-width: 80px;
    border-radius: 999px;
    outline: none;
    background: linear-gradient(90deg, rgba(53, 213, 255, 0.5), rgba(125, 255, 146, 0.52), rgba(245, 184, 91, 0.55));
    cursor: pointer;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--amber);
    cursor: pointer;
}

#volume-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: none;
    border-radius: 50%;
    background: var(--amber);
    cursor: pointer;
}

.upload-status {
    order: 4;
    min-height: 20px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.upload-status[data-tone="busy"] {
    color: var(--cyan);
}

.upload-status[data-tone="ready"] {
    color: var(--green);
}

.upload-status[data-tone="error"] {
    color: var(--rose);
}

.side-panel {
    display: grid;
    gap: 14px;
    align-self: stretch;
}

.explainer-card {
    display: grid;
    gap: 7px;
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(245, 184, 91, 0.36);
    border-radius: 8px;
    color: var(--text);
    background:
        linear-gradient(135deg, rgba(245, 184, 91, 0.18), rgba(156, 140, 255, 0.1)),
        var(--panel);
    text-align: left;
    cursor: pointer;
}

.explainer-card:hover,
.explainer-card:focus-visible {
    border-color: var(--amber);
}

.risk-card {
    border-color: rgba(255, 111, 143, 0.38);
    background:
        linear-gradient(135deg, rgba(255, 111, 143, 0.16), rgba(245, 184, 91, 0.1)),
        var(--panel);
}

.risk-card .explainer-kicker,
.risk-card .explainer-title {
    color: var(--rose);
}

.risk-card:hover,
.risk-card:focus-visible {
    border-color: var(--rose);
}

.research-scope-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(53, 213, 255, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(53, 213, 255, 0.08), rgba(125, 255, 146, 0.04)),
        var(--panel);
}

.scope-list {
    display: grid;
    gap: 8px;
}

.scope-list div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(7, 9, 13, 0.45);
}

.scope-list strong {
    color: var(--cyan);
    font-family: var(--font-tech);
    font-size: 12px;
}

.scope-list span {
    min-width: 0;
    color: #bec7d3;
    font-size: 12px;
    line-height: 1.35;
}

.explainer-kicker {
    color: var(--amber);
    font-size: 10px;
    text-transform: uppercase;
}

.explainer-title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.08;
}

.explainer-copy {
    color: var(--muted);
    font-size: 13px;
}

.library-panel {
    overflow: hidden;
    border: 1px solid rgba(53, 213, 255, 0.22);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 120px),
        rgba(12, 14, 20, 0.82);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    color: #d7dee8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    text-transform: uppercase;
}

.library-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.library-actions .upload-button {
    min-height: 28px;
    min-width: 74px;
    padding: 0 10px;
    font-size: 10px;
}

.library-actions .upload-menu-panel {
    right: 0;
    left: auto;
}

.video-list {
    display: grid;
    gap: 8px;
    max-height: min(640px, calc(100vh - 160px));
    padding: 10px;
    overflow-y: auto;
    background: rgba(6, 7, 10, 0.44);
}

.video-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 70px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
        rgba(16, 19, 25, 0.76);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.video-item.active {
    border-color: rgba(53, 213, 255, 0.5);
    background:
        linear-gradient(135deg, rgba(53, 213, 255, 0.14), rgba(125, 255, 146, 0.06)),
        #0c171b;
    box-shadow: inset 3px 0 0 var(--cyan), 0 14px 32px rgba(0, 0, 0, 0.24);
}

.video-item:hover {
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.video-select {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 0;
    color: var(--text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.video-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.video-meta {
    color: #aeb8c6;
    font-size: 10px;
}

.delete-video,
.source-badge {
    justify-self: end;
    min-width: 62px;
    padding: 0 9px;
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.delete-video {
    color: var(--rose);
    border-color: rgba(255, 111, 143, 0.32);
}

.delete-video:hover,
.delete-video:focus-visible {
    border-color: var(--rose);
}

.source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    color: var(--amber);
    border: 1px solid rgba(245, 184, 91, 0.28);
    border-radius: 6px;
    background: rgba(245, 184, 91, 0.055);
}

.video-empty {
    display: grid;
    gap: 10px;
    min-height: 178px;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(53, 213, 255, 0.36);
    border-radius: 10px;
    color: #aeb8c6;
    background:
        linear-gradient(135deg, rgba(53, 213, 255, 0.08), rgba(125, 255, 146, 0.04)),
        var(--panel);
    text-align: center;
}

.video-empty strong {
    color: var(--text);
    font-size: 13px;
}

.video-empty span {
    max-width: 220px;
    font-size: 11px;
    line-height: 1.45;
}

.empty-upload-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(53, 213, 255, 0.44);
    border-radius: 6px;
    color: var(--cyan);
    background: rgba(53, 213, 255, 0.08);
    cursor: pointer;
    font-size: 10px;
    text-transform: uppercase;
}

.explainer-modal {
    width: min(980px, calc(100vw - 36px));
    max-height: min(860px, calc(100vh - 36px));
    margin: auto;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    background: var(--panel);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.explainer-modal::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.modal-shell {
    position: relative;
    padding: 26px;
}

.modal-shell h2 {
    max-width: 760px;
    margin: 6px 0 18px;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1;
    letter-spacing: 0;
}

.modal-shell code {
    color: var(--amber);
    font-family: var(--font-tech);
    font-size: 0.92em;
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 0 12px;
    color: var(--muted);
    font-family: var(--font-tech);
    font-size: 11px;
    text-transform: uppercase;
}

.pipeline-diagrams {
    display: grid;
    gap: 18px;
    margin: 0 0 28px;
}

.pipeline-diagram {
    position: relative;
    display: grid;
    gap: 16px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(53, 213, 255, 0.26);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(53, 213, 255, 0.11), rgba(125, 255, 146, 0.035) 45%, rgba(245, 184, 91, 0.06)),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        #0c0f15;
    background-size: auto, 28px 28px, 28px 28px, auto;
}

.diagram-header {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    max-width: 760px;
}

.diagram-kicker {
    color: var(--amber);
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.diagram-header h3 {
    color: var(--cyan);
    font-family: var(--font-tech);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.diagram-header p {
    color: #b7c0cc;
    font-size: 13px;
    line-height: 1.5;
}

.signal-map {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

.map-node,
.rail-step,
.map-feedback > div,
.packet-cell,
.codec-card,
.transform-card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(17, 19, 25, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.map-node {
    display: grid;
    gap: 5px;
    max-width: 480px;
    padding: 13px 15px;
    margin: 0 auto;
    text-align: center;
}

.map-source {
    border-color: rgba(53, 213, 255, 0.42);
}

.map-probe {
    border-color: rgba(245, 184, 91, 0.42);
}

.map-arrow {
    justify-self: center;
}

.map-arrow-down {
    position: relative;
    width: 12px;
    height: 28px;
}

.map-arrow-down::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 7px;
    left: 5px;
    width: 2px;
    background: linear-gradient(var(--cyan), var(--amber));
}

.map-arrow-down::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 7px solid var(--amber);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

.map-rails {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.map-rail {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(3, 4, 5, 0.32);
}

.map-rail::before {
    content: "";
    position: absolute;
    top: 54px;
    bottom: 18px;
    left: 25px;
    width: 2px;
    background: currentColor;
    opacity: 0.28;
}

.rail-original {
    color: var(--cyan);
}

.rail-glyph {
    color: var(--green);
}

.rail-pixel {
    color: var(--amber);
}

.rail-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 28px;
    color: currentColor;
}

.rail-title strong {
    color: var(--text);
    font-size: 14px;
}

.rail-dot {
    position: relative;
    z-index: 1;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 3px solid currentColor;
    border-radius: 50%;
    background: #0c0f15;
}

.rail-step {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 11px 12px 11px 16px;
    border-color: color-mix(in srgb, currentColor 35%, transparent);
}

.rail-output {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), rgba(17, 19, 25, 0.96);
}

.map-feedback {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.map-feedback > div {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border-color: rgba(53, 213, 255, 0.24);
    background:
        linear-gradient(90deg, rgba(53, 213, 255, 0.08), rgba(245, 184, 91, 0.06)),
        rgba(17, 19, 25, 0.96);
}

.map-node span,
.rail-step span,
.map-feedback span,
.packet-cell span,
.codec-card small,
.transform-card span,
.transform-card small {
    font-family: var(--font-tech);
    letter-spacing: 0;
}

.map-node span,
.rail-step span,
.map-feedback span,
.packet-cell span,
.transform-card span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
}

.map-node strong,
.rail-step strong,
.map-feedback strong,
.packet-cell strong,
.codec-card strong,
.transform-card strong {
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.map-node small,
.rail-step small,
.map-feedback small,
.packet-cell small,
.codec-card small,
.transform-card small {
    color: #aeb7c5;
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.packet-board {
    display: grid;
    gap: 12px;
}

.packet-strip {
    display: grid;
    grid-template-columns: minmax(140px, 0.9fr) minmax(98px, 0.6fr) minmax(220px, 2fr);
    gap: 8px;
}

.packet-cell {
    display: grid;
    gap: 5px;
    min-height: 96px;
    padding: 13px;
}

.packet-index {
    border-color: rgba(53, 213, 255, 0.4);
}

.packet-tag {
    border-color: rgba(125, 255, 146, 0.38);
}

.packet-payload {
    border-color: rgba(245, 184, 91, 0.44);
    background:
        repeating-linear-gradient(90deg, rgba(245, 184, 91, 0.08) 0 10px, transparent 10px 20px),
        rgba(17, 19, 25, 0.96);
}

.codec-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.codec-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border-color: rgba(125, 255, 146, 0.2);
}

.codec-card > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.codec-id {
    display: inline-grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(125, 255, 146, 0.5);
    border-radius: 8px;
    color: #061014;
    background: var(--green);
    font-family: var(--font-tech);
    font-size: 14px;
    font-weight: 700;
}

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

.transform-card {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.sample-frame {
    min-height: 86px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: #07090d;
}

.sample-raw {
    background:
        linear-gradient(135deg, rgba(53, 213, 255, 0.75), rgba(245, 184, 91, 0.64)),
        repeating-linear-gradient(90deg, transparent 0 11px, rgba(255, 255, 255, 0.16) 11px 12px),
        repeating-linear-gradient(0deg, transparent 0 11px, rgba(255, 255, 255, 0.16) 11px 12px);
    background-blend-mode: screen, normal, normal;
}

.sample-glyph {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 10px;
    color: var(--green);
    font-family: var(--font-tech);
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 0 10px rgba(125, 255, 146, 0.36);
}

.sample-pixel {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    padding: 8px;
}

.sample-pixel i {
    min-height: 22px;
    border-radius: 3px;
    background: var(--cyan);
}

.sample-pixel i:nth-child(3n + 1) {
    background: var(--amber);
}

.sample-pixel i:nth-child(3n + 2) {
    background: var(--green);
}

.sample-pixel i:nth-child(4n) {
    background: var(--rose);
}

.transform-card strong {
    font-size: 13px;
}

.transform-card small {
    font-size: 10px;
}

.transform-raw {
    border-color: rgba(53, 213, 255, 0.24);
}

.transform-glyph {
    border-color: rgba(125, 255, 146, 0.24);
}

.transform-pixel {
    border-color: rgba(245, 184, 91, 0.26);
}

.pipeline-node,
.protocol-cell,
.tag-grid strong {
    font-family: var(--font-tech);
    font-size: 12px;
}

.modal-brief {
    display: grid;
    gap: 20px;
    padding-right: 6px;
}

.modal-brief h3 {
    margin-bottom: 7px;
    color: var(--green);
    font-size: 16px;
    letter-spacing: 0;
}

.modal-brief p {
    color: #c4ccd8;
    font-size: 15px;
    line-height: 1.6;
}

.modal-brief h3 + p {
    margin-top: 0;
}

.paper-figure-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.paper-figure-strip figure {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(53, 213, 255, 0.22);
    border-radius: 8px;
    background: rgba(7, 9, 13, 0.42);
}

.paper-figure-strip img {
    display: block;
    width: 100%;
    min-width: 0;
    border-radius: 6px;
    background: #f4f0e8;
}

.paper-figure-strip figcaption {
    color: #b8c2cf;
    font-size: 12px;
    line-height: 1.45;
}

.risk-brief h3 {
    color: var(--rose);
}

.paper-body {
    background:
        linear-gradient(180deg, rgba(245, 184, 91, 0.08), rgba(8, 9, 12, 0) 280px),
        var(--bg);
}

.paper-shell {
    width: min(920px, calc(100vw - 36px));
    margin: 0 auto;
    padding: 28px 0 56px;
}

.paper-nav {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 22px;
}

.paper {
    padding: clamp(24px, 5vw, 54px);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f4f0e8;
    color: #171717;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.paper-header {
    padding-bottom: 24px;
    margin-bottom: 26px;
    border-bottom: 1px solid #c9c0b2;
}

.paper-header h1 {
    max-width: 780px;
    margin: 8px 0 14px;
    color: #111;
    font-size: clamp(32px, 5vw, 54px);
    line-height: 0.98;
    letter-spacing: 0;
}

.paper-subtitle {
    max-width: 780px;
    margin: 0 auto 12px;
    color: #3d3830;
    font-size: 18px;
    line-height: 1.35;
}

.paper-meta {
    color: #5d564d;
    font-family: var(--font-tech);
    font-size: 12px;
}

.paper-author {
    margin: 0 0 8px;
    color: #1b2529;
    font-size: 18px;
    font-weight: 700;
}

.paper-keywords {
    max-width: 760px;
    margin-top: 16px;
    color: #4b4945;
    font-size: 14px;
    line-height: 1.55;
}

.paper section {
    margin-top: 26px;
}

.paper-abstract {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.paper-toc {
    padding-bottom: 20px;
    border-bottom: 1px solid #d2c8ba;
}

.paper-toc ol {
    columns: 2;
    gap: 34px;
    padding-left: 22px;
}

.paper-toc li {
    margin-bottom: 7px;
    color: #2d2d2d;
    break-inside: avoid;
}

.paper h2 {
    margin-bottom: 10px;
    color: #111;
    font-size: 24px;
    letter-spacing: 0;
}

.paper h3 {
    margin: 16px 0 7px;
    color: #273238;
    font-size: 17px;
    letter-spacing: 0;
}

.paper p {
    margin: 0 0 13px;
    color: #2d2d2d;
    font-size: 16px;
    line-height: 1.72;
}

.paper code {
    color: #744b08;
    font-family: var(--font-tech);
    font-size: 0.92em;
    hyphens: none;
    overflow-wrap: anywhere;
    word-break: normal;
}

.paper a {
    color: #005c6c;
}

.math-block {
    margin: 12px 0 16px;
    padding: 13px 15px;
    overflow-x: auto;
    border: 1px solid #d0c5b4;
    border-radius: 8px;
    background: #fffaf0;
    color: #1d2528;
    font-family: var(--font-tech);
    font-size: 14px;
    line-height: 1.55;
}

.paper-table {
    width: 100%;
    margin: 16px 0 18px;
    border-collapse: collapse;
    font-size: 14px;
}

.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.paper-table th,
.paper-table td {
    padding: 11px 12px;
    border: 1px solid #cfc4b3;
    color: #262626;
    text-align: left;
    vertical-align: top;
}

.paper-table th {
    background: #ded4c2;
    color: #161616;
    font-weight: 700;
}

.paper-table tr:nth-child(even) td {
    background: #eee7db;
}

.paper-references {
    counter-reset: paper-reference;
    list-style: none;
    padding-left: 0;
}

.paper-references li {
    counter-increment: paper-reference;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 9px;
    padding-left: 2.2em;
    text-indent: -2.2em;
    color: #2d2d2d;
    line-height: 1.5;
}

.paper-references li::before {
    content: counter(paper-reference) ". ";
    font-variant-numeric: tabular-nums;
}

.latex-paper-body {
    background:
        linear-gradient(180deg, rgba(238, 232, 220, 0.08), rgba(8, 9, 12, 0) 260px),
        var(--bg);
}

.latex-paper-shell {
    width: min(980px, calc(100vw - 36px));
}

.latex-paper {
    font-family: Georgia, 'Times New Roman', serif;
    color: #111;
    background: #fffdf8;
}

.latex-title {
    text-align: center;
}

.paper-kicker {
    color: #5a4b35;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-variant: small-caps;
    letter-spacing: 0;
}

.latex-paper .paper-header h1,
.latex-paper h1 {
    max-width: 820px;
    margin: 10px auto 12px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.12;
    text-transform: none;
}

.latex-paper .paper-subtitle {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 19px;
    line-height: 1.35;
}

.latex-paper .paper-author {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
}

.latex-paper .paper-meta {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14px;
}

.latex-paper .paper-byline {
    margin: 7px 0 0;
    color: #333;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14.5px;
    line-height: 1.35;
    text-align: center;
}

.latex-paper .paper-byline strong {
    color: #111;
    font-weight: 700;
}

.latex-paper .paper-byline span::before {
    content: ", ";
}

.latex-paper h2 {
    margin-top: 28px;
    padding-bottom: 4px;
    border-bottom: 1px solid #d0c5b4;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    font-weight: 700;
}

.latex-paper h3 {
    margin-top: 20px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 700;
    font-style: italic;
}

.latex-paper p,
.latex-paper li,
.latex-paper td,
.latex-paper th {
    font-family: Georgia, 'Times New Roman', serif;
}

.latex-paper p {
    text-align: justify;
    hyphens: auto;
}

.latex-abstract {
    padding: 0;
    border: 0;
    background: transparent;
}

.latex-abstract h2 {
    margin-top: 0;
    border-bottom: 1px solid #d0c5b4;
    text-align: left;
}

.latex-keywords {
    margin-top: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #d0c5b4;
}

.latex-paper .math-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: 0;
    background: #fffdf8;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
}

.equation {
    min-width: 0;
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

.equation-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    white-space: normal;
}

.equation-lines .eq-line {
    white-space: nowrap;
}

.equation-number {
    color: #4d463d;
    font-family: Georgia, 'Times New Roman', serif;
    white-space: nowrap;
}

.latex-paper .paper-table {
    border-top: 2px solid #111;
    border-bottom: 2px solid #111;
}

.latex-paper .model-notation {
    table-layout: fixed;
}

.latex-paper .model-notation th:first-child,
.latex-paper .model-notation td:first-child {
    width: 28%;
}

.latex-paper .model-notation th,
.latex-paper .model-notation td,
.latex-paper .model-notation code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.latex-paper .model-equation {
    align-items: flex-start;
}

.latex-paper .model-equation .equation {
    text-align: left;
    line-height: 1.8;
}

.latex-paper .metrics-table {
    font-size: 13px;
}

.latex-paper .threat-model-table {
    table-layout: fixed;
}

.latex-paper .threat-model-table th:first-child,
.latex-paper .threat-model-table td:first-child {
    width: 16%;
}

.latex-paper .threat-model-table th:nth-child(2),
.latex-paper .threat-model-table td:nth-child(2) {
    width: 28%;
}

.latex-paper .threat-model-table th,
.latex-paper .threat-model-table td {
    vertical-align: top;
}

.latex-paper .metrics-table th,
.latex-paper .metrics-table td {
    overflow-wrap: normal;
    word-break: normal;
}

.latex-paper .metrics-table td {
    font-variant-numeric: tabular-nums;
}

@media screen {
    .latex-paper {
        overflow-x: hidden;
    }

    .latex-paper .table-scroll {
        contain: inline-size;
    }

    .latex-paper .paper-table {
        display: table;
        table-layout: fixed;
        width: 100%;
        max-width: 100%;
    }

    .latex-paper .paper-table th,
    .latex-paper .paper-table td {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .latex-paper .metrics-table th,
    .latex-paper .metrics-table td {
        overflow-wrap: normal;
        word-break: normal;
    }

    .latex-paper .equation {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.latex-paper .paper-table caption {
    caption-side: top;
    margin-bottom: 8px;
    color: #1a1a1a;
    font-size: 14px;
    font-style: italic;
    text-align: left;
}

.latex-paper .paper-table th {
    background: #f1eadf;
}

.latex-paper .paper-table td,
.latex-paper .paper-table th {
    border-color: #d8d0c4;
}

.paper-figure {
    margin: 18px 0 24px;
    break-inside: avoid;
    page-break-inside: avoid;
}

.paper-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #d8d0c4;
    background: #f7f3eb;
}

.paper-figure figcaption {
    margin-top: 8px;
    color: #2d2d2d;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-style: italic;
    line-height: 1.42;
}

.latex-paper .paper-references li {
    font-size: 14px;
}

.latex-paper .related-work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 38px;
}

.latex-paper .related-topic {
    min-width: 0;
    break-inside: avoid;
    page-break-inside: avoid;
}

.latex-paper .related-topic h3 {
    margin-top: 0;
}

.latex-paper .related-topic p:last-child {
    margin-bottom: 0;
}

.latex-paper .paper-references,
.latex-paper .paper-references li,
.latex-paper .paper-references a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.latex-paper #references {
    column-count: auto;
    column-rule: 0;
}

.latex-paper #references .paper-references {
    columns: 2;
    column-gap: 38px;
    column-rule: 1px solid #e4dccf;
    list-style: none;
    padding-left: 0;
}

@media screen and (min-width: 900px) {
    .latex-paper-shell {
        width: min(1120px, calc(100vw - 36px));
    }

    .latex-paper > section:not(.latex-abstract):not(.latex-keywords):not(.paper-toc) {
        margin-top: 30px;
    }

    .latex-paper > section:not(.latex-abstract):not(.latex-keywords):not(.paper-toc):not(.has-wide-blocks) {
        column-count: 2;
        column-gap: 38px;
        column-rule: 1px solid #e4dccf;
    }

    .latex-paper .paper-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-count: auto;
        column-rule: 0;
        gap: 0 38px;
        clear: both;
        overflow: visible;
    }

    .latex-paper > section:not(.latex-abstract):not(.latex-keywords):not(.paper-toc):not(.has-wide-blocks) > h2 {
        column-span: all;
    }

    .latex-paper .paper-columns {
        margin-top: 14px;
        margin-bottom: 22px;
    }

    .latex-paper .paper-columns > :first-child,
    .latex-paper > section.has-wide-blocks > h2 + .paper-columns {
        margin-top: 0;
    }

    .latex-paper > section.has-wide-blocks > .table-scroll {
        display: block;
        width: 100%;
        margin: 16px 0 28px;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .latex-paper > section.has-wide-blocks > .paper-figure {
        display: block;
        width: 100%;
        margin: 26px 0 34px;
        column-span: all;
        clear: both;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .latex-paper > section.has-wide-blocks > .table-scroll + .table-scroll {
        margin-top: 26px;
    }

    .latex-paper p,
    .latex-paper li {
        font-size: 16px;
        line-height: 1.62;
    }

    .latex-paper .related-work-grid {
        gap: 18px 38px;
    }

    .latex-paper h2 {
        break-after: avoid;
        page-break-after: avoid;
        font-size: 20px;
    }

    .latex-paper > section:not(.latex-abstract):not(.latex-keywords):not(.paper-toc) > h2 {
        margin-top: 0;
    }

    .latex-paper h3 {
        break-after: avoid;
        page-break-after: avoid;
        font-size: 16px;
    }

    .latex-paper .math-block {
        break-inside: avoid-column;
        page-break-inside: avoid;
    }

    .latex-paper .paper-table {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .latex-paper .paper-figure {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

@page {
    size: A4;
    margin: 13mm 14mm;
    @bottom-center {
        content: counter(page);
        color: #555;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 8.5pt;
    }
}

@media print {
    html,
    body,
    .paper-body,
    .latex-paper-body {
        background: #fff;
    }

    .screen-only,
    .paper-nav {
        display: none !important;
    }

    .paper-shell,
    .latex-paper-shell {
        width: auto;
        margin: 0;
        padding: 0;
    }

    .paper,
    .latex-paper {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
    }

    .paper-header {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .latex-paper h1 {
        font-size: 27px;
    }

    .latex-paper .paper-subtitle {
        font-size: 12.5px;
        line-height: 1.32;
    }

    .latex-paper .paper-byline {
        font-size: 10.5px;
        line-height: 1.25;
    }

    .latex-paper h2 {
        break-after: avoid;
        page-break-after: avoid;
        font-size: 18px;
    }

    .latex-paper h3 {
        break-after: avoid;
        page-break-after: avoid;
        font-size: 14.5px;
    }

    .latex-paper #references {
        break-before: page;
        page-break-before: always;
    }

    .latex-abstract h2 {
        text-align: left;
    }

    .latex-paper p,
    .paper-references li {
        color: #111;
        font-size: 12.2px;
        line-height: 1.42;
        orphans: 3;
        widows: 3;
    }

    .latex-paper > section:not(.latex-abstract):not(.latex-keywords):not(.paper-toc) {
        margin-top: 10px;
    }

    .latex-paper > section:not(.latex-abstract):not(.latex-keywords):not(.paper-toc):not(.has-wide-blocks) {
        column-count: 2;
        column-gap: 7mm;
        column-rule: 0.2pt solid #d8d0c4;
    }

    .latex-paper .paper-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-count: auto;
        column-rule: 0;
        gap: 0 7mm;
        clear: both;
        margin-bottom: 7mm;
        overflow: visible;
    }

    .latex-paper > section:not(.latex-abstract):not(.latex-keywords):not(.paper-toc):not(.has-wide-blocks) > h2 {
        column-span: all;
    }

    .latex-paper > section.has-wide-blocks > .table-scroll {
        display: block;
        width: 100%;
        margin: 5px 0 8px;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .latex-paper > section.has-wide-blocks > .paper-figure {
        display: block;
        width: 100%;
        margin: 7mm 0 9mm;
        column-span: all;
        clear: both;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .latex-paper section {
        margin-top: 10px;
    }

    .latex-paper .related-work-grid {
        display: block;
        column-count: 2;
        column-gap: 7mm;
        column-rule: 0.2pt solid #d8d0c4;
    }

    .latex-paper .related-topic {
        display: block;
        break-inside: auto;
        page-break-inside: auto;
        margin-bottom: 7px;
    }

    .latex-paper .related-topic h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    .latex-paper #references {
        column-count: auto !important;
        column-rule: 0 !important;
    }

    .latex-paper #references .paper-references {
        columns: 2;
        column-gap: 7mm;
        column-rule: 0.2pt solid #d8d0c4;
        list-style: none;
        padding-left: 0;
    }

    .paper-abstract,
    .latex-abstract,
    .math-block,
    .paper-table {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .latex-paper .math-block {
        margin: 8px 0 10px;
        padding: 7px 8px;
        font-size: 10.5px;
    }

    .latex-paper .equation-lines {
        gap: 2px;
    }

    .paper-figure figcaption {
        font-size: 9.5px;
        line-height: 1.35;
    }

    .paper-table {
        font-size: 10.2px;
    }

    .paper-references {
        padding-left: 0;
    }

    .paper-references li {
        font-size: 9px;
        line-height: 1.28;
        margin-bottom: 4px;
        padding-left: 2.85em;
        text-indent: -2.15em;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .paper-references a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .paper-table th,
    .paper-table td {
        padding: 5px 6px;
    }

    .latex-paper #threat-model > .table-scroll,
    .latex-paper #threat-model .paper-table {
        break-inside: auto;
        page-break-inside: auto;
    }

    .latex-paper #threat-model .paper-table thead {
        display: table-header-group;
    }

    .latex-paper #threat-model .paper-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .latex-paper #results > .table-scroll,
    .latex-paper #results .metrics-table {
        break-inside: auto;
        page-break-inside: auto;
    }

    .latex-paper #results .metrics-table thead {
        display: table-header-group;
    }

    .latex-paper #results .metrics-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .latex-paper #results .metrics-table {
        font-size: 8.6px;
    }

    .latex-paper #results .metrics-table th,
    .latex-paper #results .metrics-table td {
        padding: 3.5px 4px;
    }

    .latex-paper .threat-model-table {
        font-size: 7.6px;
    }

    .latex-paper .threat-model-table th,
    .latex-paper .threat-model-table td {
        padding: 3.5px 4px;
    }

    .paper a {
        color: #111;
        text-decoration: none;
    }
}

@media (max-width: 980px) {
    .studio-layout {
        grid-template-columns: 1fr;
    }

    .side-panel {
        grid-template-columns: 1fr;
    }

    .research-cta {
        align-items: start;
        flex-direction: column;
    }

    .research-actions {
        justify-content: flex-start;
    }

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

    .video-list {
        max-height: 320px;
    }
}

@media (max-width: 680px) {
    .app-shell {
        width: min(100vw - 24px, 1180px);
        padding-top: 18px;
    }

    .app-header {
        align-items: start;
        flex-direction: column;
        gap: 12px;
    }

    .brand-lockup {
        width: 100%;
    }

    .brand-mark {
        border-radius: 14px;
    }

    .header-actions {
        justify-content: flex-start;
    }

    .player-stage {
        padding: 10px;
    }

    #player-container {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .player-controls {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr;
    }

    .throughput-panel {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .finding-grid,
    .paper-figure-strip {
        grid-template-columns: 1fr;
    }

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

    .mode-button {
        min-width: 0;
        padding: 0 6px;
        font-size: 10px;
        line-height: 1.12;
        white-space: normal;
    }

    .active-summary {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }

    .stage-topline {
        align-items: start;
        flex-direction: column;
        min-width: 0;
        width: 100%;
    }

    .modal-shell {
        padding: 22px 16px 16px;
    }

    .modal-close {
        position: static;
        margin-bottom: 14px;
    }

    .paper-shell {
        width: min(100vw - 20px, 920px);
        padding-top: 18px;
    }

    .paper {
        padding: 22px 16px;
    }

    .paper-toc ol {
        columns: 1;
    }

    .paper-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .latex-paper .model-notation {
        display: table;
        overflow-x: visible;
        white-space: normal;
    }

    .latex-paper .model-notation th,
    .latex-paper .model-notation td,
    .latex-paper .model-notation code {
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .map-rails,
    .map-feedback,
    .packet-strip,
    .codec-stack,
    .transform-grid {
        grid-template-columns: 1fr;
    }

    .map-node {
        max-width: none;
    }

    .rail-step,
    .packet-cell {
        min-height: 0;
    }
}

/* Rasterift designed interface refresh */
:root {
    --bg: #070806;
    --panel: #10110f;
    --panel-strong: #171a16;
    --panel-glass: rgba(17, 19, 17, 0.78);
    --line: #343a34;
    --line-soft: rgba(232, 226, 214, 0.09);
    --text: #f4efe6;
    --muted: #9fa79d;
    --cyan: #77e4f6;
    --green: #9ff5a5;
    --amber: #e8b665;
    --rose: #ee7d8c;
    --violet: #b8a8ff;
    --ink: #030403;
    --shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
    --font-main: 'Outfit', system-ui, sans-serif;
    --font-tech: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
}

body {
    background:
        linear-gradient(180deg, rgba(232, 182, 101, 0.055), rgba(7, 8, 6, 0) 360px),
        #070806;
}

body::before {
    display: none;
}

.interface-field {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(7, 8, 6, 0.1), #070806 76%),
        url('/static/assets/interface-field.svg') center top / cover no-repeat;
    opacity: 0.74;
    overflow: hidden;
    animation: rasterFieldDrift 36s linear infinite;
}

.interface-field::before,
.interface-field::after {
    content: '';
    position: absolute;
    inset: -18%;
    pointer-events: none;
}

.interface-field::before {
    background:
        linear-gradient(110deg, transparent 0 42%, rgba(119, 228, 246, 0.13) 47%, rgba(159, 245, 165, 0.08) 50%, transparent 57% 100%);
    transform: translateX(-38%);
    animation: rasterScanSweep 15s ease-in-out infinite;
}

.interface-field::after {
    background:
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(232, 226, 214, 0.035) 42px 43px, transparent 43px 86px),
        repeating-linear-gradient(0deg, transparent 0 58px, rgba(232, 182, 101, 0.035) 58px 59px, transparent 59px 116px);
    opacity: 0.48;
    animation: rasterSignalDrift 24s linear infinite;
}

@keyframes rasterFieldDrift {
    0% {
        background-position: center top;
    }
    100% {
        background-position: calc(50% + 72px) 64px;
    }
}

@keyframes rasterScanSweep {
    0%, 18% {
        transform: translateX(-42%);
        opacity: 0;
    }
    38%, 62% {
        opacity: 1;
    }
    82%, 100% {
        transform: translateX(42%);
        opacity: 0;
    }
}

@keyframes rasterSignalDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-86px, 58px, 0);
    }
}

.app-shell {
    width: min(1460px, calc(100vw - 40px));
    padding-top: 22px;
}

.app-header {
    min-height: 104px;
    margin-bottom: 20px;
    padding: 0;
}

.brand-lockup {
    gap: 17px;
}

.brand-mark {
    width: clamp(58px, 6.2vw, 76px);
    height: clamp(58px, 6.2vw, 76px);
    border-radius: 8px;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.28));
}

.eyebrow,
.status,
.active-summary,
.upload-status,
.video-meta,
.video-empty,
.library-header,
.explainer-kicker,
.throughput-label,
.throughput-detail,
.ctrl-icon,
.mode-button,
.info-button,
.upload-button,
.upload-choice,
.delete-video,
.source-badge,
.modal-close {
    letter-spacing: 0;
}

.eyebrow {
    color: var(--amber);
    font-size: 10px;
}

.app-header h1 {
    margin-top: 2px;
    font-family: var(--font-main);
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 700;
    line-height: 0.9;
    text-shadow: none;
}

.header-subtitle {
    margin-top: 7px;
    color: #ddd5c9;
    font-size: clamp(16px, 1.25vw, 18px);
}

.header-actions {
    gap: 14px;
}

.header-signal {
    display: grid;
    grid-template-columns: repeat(3, 5px);
    align-items: end;
    gap: 5px;
    height: 28px;
    padding: 7px 9px;
    border: 1px solid rgba(232, 226, 214, 0.12);
    border-radius: 8px;
    background: rgba(17, 19, 17, 0.58);
}

.header-signal i {
    display: block;
    width: 5px;
    border-radius: 999px;
    background: var(--green);
}

.header-signal i:nth-child(1) {
    height: 8px;
}

.header-signal i:nth-child(2) {
    height: 14px;
    background: var(--cyan);
}

.header-signal i:nth-child(3) {
    height: 20px;
    background: var(--amber);
}

.info-button,
.upload-button,
.upload-choice,
.mode-button,
.delete-video,
.modal-close {
    border-radius: 8px;
}

.info-button {
    min-height: 38px;
    color: #d9efe8;
    border-color: rgba(232, 226, 214, 0.16);
    background: rgba(17, 19, 17, 0.68);
    font-size: 11px;
}

.info-button:hover,
.upload-button:hover,
.upload-choice:hover,
.mode-button:hover,
.delete-video:hover,
.modal-close:hover {
    border-color: rgba(119, 228, 246, 0.48);
    background: rgba(119, 228, 246, 0.08);
}

.studio-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
}

.player-stage {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-color: rgba(232, 226, 214, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.06), rgba(244, 239, 230, 0.018)),
        rgba(13, 15, 13, 0.88);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(244, 239, 230, 0.055);
}

.stage-plate {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        url('/static/assets/interface-field.svg') center / cover no-repeat;
    opacity: 0.18;
    mix-blend-mode: screen;
    mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.3) 62%, transparent);
}

.stage-topline,
.player-controls,
#player-container,
.throughput-panel,
.upload-status {
    position: relative;
    z-index: 1;
}

.stage-topline {
    min-height: 34px;
    padding: 0 2px 8px;
}

.status {
    color: #d8f9ef;
    font-size: 10px;
}

.active-summary {
    color: #b4b7ad;
}

.player-controls {
    grid-template-columns: minmax(320px, 1fr) minmax(180px, 0.56fr);
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px;
    border-color: rgba(232, 226, 214, 0.1);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.055), rgba(244, 239, 230, 0.014)),
        rgba(7, 8, 6, 0.58);
}

.mode-toggle {
    gap: 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
}

.mode-button {
    min-height: 38px;
    color: #b6b9b0;
    border: 1px solid rgba(232, 226, 214, 0.08);
    background: rgba(3, 4, 3, 0.54);
    font-size: 11px;
}

.mode-button.active {
    color: #0b100c;
    background: linear-gradient(180deg, #c8ffc9, var(--green));
    box-shadow: none;
}

.ctrl-group {
    min-height: 38px;
    padding: 0 9px;
    border: 1px solid rgba(232, 226, 214, 0.08);
    border-radius: 8px;
    background: rgba(3, 4, 3, 0.42);
}

#volume-slider {
    height: 4px;
    background: linear-gradient(90deg, #77e4f6, #9ff5a5 58%, #e8b665);
}

#volume-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid #211d14;
    background: #e8b665;
}

#volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid #211d14;
    background: #e8b665;
}

#player-container {
    height: clamp(400px, 55vh, 740px);
    border-color: rgba(119, 228, 246, 0.33);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.04), rgba(3, 4, 3, 0.08)),
        #030403;
    box-shadow:
        0 24px 72px rgba(0, 0, 0, 0.46),
        inset 0 0 0 1px rgba(244, 239, 230, 0.035);
}

#player-container::before {
    background:
        linear-gradient(rgba(244, 239, 230, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 239, 230, 0.028) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.13;
}

#player-container::after {
    box-shadow:
        inset 0 0 0 1px rgba(244, 239, 230, 0.055),
        inset 0 -84px 120px rgba(0, 0, 0, 0.34);
}

#play-overlay {
    background:
        linear-gradient(180deg, rgba(3, 4, 3, 0.14), rgba(3, 4, 3, 0.72));
    backdrop-filter: none;
}

.play-btn {
    width: 76px;
    height: 76px;
    border-color: rgba(159, 245, 165, 0.78);
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.06), rgba(244, 239, 230, 0.02)),
        rgba(17, 19, 17, 0.72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.play-btn::after {
    border-color: transparent transparent transparent var(--cyan);
}

.play-label {
    border-color: rgba(232, 226, 214, 0.14);
    border-radius: 8px;
    background: rgba(7, 8, 6, 0.72);
    color: #f4efe6;
}

.throughput-panel {
    gap: 12px;
}

.throughput-card {
    position: relative;
    grid-template-rows: 15px 26px auto;
    min-height: 92px;
    padding: 13px 14px;
    border-color: rgba(232, 226, 214, 0.1);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.05), rgba(244, 239, 230, 0.012)),
        rgba(10, 12, 10, 0.82);
    box-shadow: inset 0 1px 0 rgba(244, 239, 230, 0.035);
}

.throughput-mark {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 38px;
    height: 14px;
    background:
        linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 7px, var(--green) 7px 15px, transparent 15px 18px, var(--amber) 18px 32px);
    opacity: 0.62;
}

.throughput-card.active {
    border-color: rgba(159, 245, 165, 0.42);
    background:
        linear-gradient(180deg, rgba(159, 245, 165, 0.1), rgba(119, 228, 246, 0.035)),
        rgba(12, 18, 13, 0.88);
    box-shadow: inset 0 1px 0 rgba(244, 239, 230, 0.045);
}

.throughput-label {
    color: #b2b8ad;
}

.throughput-value {
    color: #b6ffb8;
    font-size: 21px;
}

.throughput-detail {
    color: #a3aa9f;
}

.upload-status {
    color: #aeb5aa;
}

.side-panel {
    gap: 16px;
}

.library-panel {
    border-color: rgba(232, 226, 214, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.06), transparent 116px),
        rgba(13, 15, 13, 0.84);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(244, 239, 230, 0.05);
}

.library-header {
    min-height: 54px;
    border-bottom-color: rgba(232, 226, 214, 0.08);
    color: #ded7ca;
}

.library-title {
    position: relative;
    padding-left: 16px;
}

.library-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    background: var(--cyan);
}

.library-actions .upload-button,
.upload-button {
    color: #081008;
    background: linear-gradient(180deg, #c9fbff, var(--cyan));
    box-shadow: none;
}

.upload-menu-panel {
    border-color: rgba(232, 226, 214, 0.12);
    background: #11130f;
}

.video-list {
    gap: 8px;
    padding: 10px;
    background: rgba(3, 4, 3, 0.38);
}

.video-item {
    min-height: 74px;
    border-color: rgba(232, 226, 214, 0.09);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.045), rgba(244, 239, 230, 0.01)),
        rgba(14, 16, 14, 0.86);
    transform: none;
}

.video-item:hover {
    border-color: rgba(119, 228, 246, 0.26);
    transform: none;
}

.video-item.active {
    border-color: rgba(119, 228, 246, 0.44);
    background:
        linear-gradient(90deg, rgba(119, 228, 246, 0.12), rgba(159, 245, 165, 0.035)),
        rgba(12, 17, 15, 0.92);
    box-shadow: inset 3px 0 0 var(--cyan);
}

.video-name {
    color: #f4efe6;
}

.video-meta {
    color: #aab0a5;
}

.delete-video {
    color: #f0a2a9;
    border-color: rgba(238, 125, 140, 0.28);
    background: rgba(238, 125, 140, 0.035);
}

.source-badge {
    color: var(--amber);
    border-color: rgba(232, 182, 101, 0.24);
    background: rgba(232, 182, 101, 0.055);
}

.research-section {
    border-top-color: rgba(232, 226, 214, 0.08);
}

.mode-explainer {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(232, 226, 214, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(232, 182, 101, 0.075), rgba(119, 228, 246, 0.035)),
        rgba(13, 15, 13, 0.84);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(244, 239, 230, 0.045);
}

.mode-explainer-copy {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
}

.mode-explainer-copy h2 {
    max-width: 520px;
    color: #f4efe6;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 0.98;
}

.mode-explainer-copy p:not(.eyebrow) {
    max-width: 560px;
    color: #c9c3b8;
    font-size: 15px;
    line-height: 1.55;
}

.mode-explainer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mode-explainer-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    min-height: 228px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(232, 226, 214, 0.1);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.05), rgba(244, 239, 230, 0.012)),
        rgba(7, 8, 6, 0.64);
}

.mode-explainer-card::after {
    content: '';
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 72px;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--green), var(--amber));
    opacity: 0.48;
}

.mode-explainer-card h3 {
    color: #f4efe6;
    font-size: 19px;
    line-height: 1.05;
}

.mode-explainer-card p {
    color: #bfc4b9;
    font-size: 13px;
    line-height: 1.48;
}

.mode-card-visual {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    height: 86px;
    padding: 10px;
    border: 1px solid rgba(232, 226, 214, 0.08);
    border-radius: 6px;
    background:
        linear-gradient(rgba(244, 239, 230, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 239, 230, 0.03) 1px, transparent 1px),
        rgba(3, 4, 3, 0.58);
    background-size: 16px 16px;
}

.mode-card-visual span {
    display: grid;
    place-items: center;
    min-width: 0;
    border-radius: 4px;
    font-family: var(--font-tech);
    font-size: 22px;
    font-weight: 700;
}

.mode-original .mode-card-visual span {
    background: linear-gradient(180deg, rgba(119, 228, 246, 0.24), rgba(119, 228, 246, 0.055));
}

.mode-original .mode-card-visual span:nth-child(2) {
    background: linear-gradient(180deg, rgba(159, 245, 165, 0.22), rgba(159, 245, 165, 0.05));
}

.mode-original .mode-card-visual span:nth-child(3) {
    background: linear-gradient(180deg, rgba(232, 182, 101, 0.2), rgba(232, 182, 101, 0.05));
}

.mode-glyph .mode-card-visual span {
    color: #081008;
    background: #9ff5a5;
}

.mode-glyph .mode-card-visual span:nth-child(2) {
    color: #061014;
    background: #77e4f6;
}

.mode-glyph .mode-card-visual span:nth-child(3) {
    color: #161006;
    background: #e8b665;
}

.mode-pixel .mode-card-visual {
    grid-template-columns: repeat(6, 1fr);
}

.mode-pixel .mode-card-visual span {
    min-height: 0;
    background: linear-gradient(135deg, rgba(119, 228, 246, 0.32), rgba(159, 245, 165, 0.18));
}

.mode-pixel .mode-card-visual span:nth-child(2) {
    background: linear-gradient(135deg, rgba(159, 245, 165, 0.34), rgba(232, 182, 101, 0.18));
}

.mode-pixel .mode-card-visual span:nth-child(3) {
    background: linear-gradient(135deg, rgba(232, 182, 101, 0.34), rgba(238, 125, 140, 0.18));
}

.research-cta {
    border-color: rgba(232, 226, 214, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(232, 182, 101, 0.105), rgba(119, 228, 246, 0.045)),
        rgba(14, 16, 14, 0.84);
}

.research-cta p {
    color: #eee7dc;
}

.research-cta a:not(.info-button) {
    color: #b6ffb8;
}

.explainer-modal {
    border-color: rgba(232, 226, 214, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.05), transparent 210px),
        #10110f;
}

.explainer-modal::backdrop {
    background: rgba(3, 4, 3, 0.78);
}

.modal-shell h2 {
    font-family: var(--font-main);
}

.pipeline-diagram,
.modal-brief,
.paper-summary,
.metric-explainer,
.research-scope-panel {
    border-radius: 8px;
    border-color: rgba(232, 226, 214, 0.12);
    background:
        linear-gradient(180deg, rgba(244, 239, 230, 0.046), rgba(244, 239, 230, 0.012)),
        rgba(13, 15, 13, 0.86);
}

@media (max-width: 980px) {
    .studio-layout {
        grid-template-columns: 1fr;
    }

    .library-panel {
        box-shadow: none;
    }
}

@media (max-width: 680px) {
    .app-shell {
        width: min(100vw - 24px, 1180px);
        padding-top: 18px;
    }

    .app-header {
        min-height: 0;
        gap: 14px;
    }

    .brand-lockup {
        align-items: center;
        width: 100%;
        gap: 12px;
    }

    .brand-mark {
        width: 58px;
        height: 58px;
    }

    .app-header h1 {
        font-size: clamp(34px, 12vw, 46px);
    }

    .header-subtitle {
        font-size: 15px;
    }

    .header-signal {
        display: none;
    }

    .player-stage {
        padding: 10px;
    }

    .stage-plate {
        opacity: 0.12;
    }

    .player-controls {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .mode-toggle {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .mode-button {
        min-width: 0;
        min-height: 46px;
        padding: 0 6px;
        font-size: 10px;
        line-height: 1.1;
        white-space: normal;
    }

    #player-container {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .throughput-panel {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .throughput-card {
        min-height: 86px;
    }

    .active-summary {
        width: 100%;
        text-align: left;
    }

    .research-cta {
        align-items: start;
        flex-direction: column;
    }

    .mode-explainer {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .mode-explainer-grid {
        grid-template-columns: 1fr;
    }

    .mode-explainer-card {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .interface-field,
    .interface-field::before,
    .interface-field::after {
        animation: none;
    }
}

/* Rasterift human-directed redesign: quiet instrument, not sci-fi wallpaper */
:root {
    --bg: #ede8dc;
    --panel: #fbf8ef;
    --panel-strong: #f3eee3;
    --line: #d7cdbd;
    --line-soft: #e7ded0;
    --text: #171717;
    --muted: #696258;
    --cyan: #287989;
    --green: #426f45;
    --amber: #9b6b2f;
    --rose: #9b4146;
    --violet: #605b82;
    --ink: #050505;
    --shadow: none;
    --font-main: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-tech: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
}

html {
    background: var(--bg);
}

body {
    color: var(--text);
    background:
        linear-gradient(90deg, rgba(23, 23, 23, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 23, 23, 0.025) 1px, transparent 1px),
        var(--bg);
    background-size: 80px 80px, 80px 80px, auto;
}

body::before,
.interface-field,
.interface-field::before,
.interface-field::after,
.stage-plate,
.header-signal,
.throughput-mark {
    display: none;
}

.app-shell {
    width: min(1420px, calc(100vw - 44px));
    padding: 28px 0 64px;
}

.app-header {
    min-height: 86px;
    margin-bottom: 20px;
    padding: 0;
    border-bottom: 1px solid var(--line);
}

.brand-lockup {
    gap: 16px;
}

.brand-mark {
    width: clamp(52px, 5vw, 64px);
    height: clamp(52px, 5vw, 64px);
    border-radius: 5px;
    filter: none;
}

.eyebrow {
    color: var(--amber);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}

.app-header h1 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-main);
    font-size: clamp(38px, 4.6vw, 68px);
    font-weight: 700;
    line-height: 0.92;
    text-shadow: none;
    text-transform: none;
}

.header-subtitle {
    margin-top: 6px;
    color: var(--muted);
    font-size: clamp(15px, 1.2vw, 18px);
}

.info-button,
.upload-button,
.upload-choice,
.mode-button,
.delete-video,
.modal-close {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    color: var(--text);
    box-shadow: none;
}

.info-button {
    min-height: 36px;
    padding: 0 14px;
    color: var(--text);
    border-color: #c9bda9;
    background: transparent;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
}

.info-button:hover,
.upload-button:hover,
.upload-choice:hover,
.mode-button:hover,
.delete-video:hover,
.modal-close:hover {
    border-color: #9d8f79;
    background: #f7f0e3;
}

.studio-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
}

.player-stage,
.library-panel,
.mode-explainer,
.research-cta {
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgba(251, 248, 239, 0.94);
    box-shadow: none;
}

.player-stage {
    position: relative;
    overflow: hidden;
    padding: 16px;
}

.stage-topline {
    min-height: 34px;
    padding: 0 0 10px;
}

.status,
.active-summary,
.upload-status,
.video-meta,
.video-empty,
.library-header,
.throughput-label,
.throughput-detail,
.ctrl-icon {
    font-family: var(--font-tech);
    letter-spacing: 0;
}

.status {
    color: var(--green);
    font-size: 11px;
    text-transform: none;
}

.active-summary {
    color: var(--muted);
    font-size: 11px;
}

.player-controls {
    grid-template-columns: minmax(320px, 1fr) minmax(180px, 0.55fr);
    gap: 10px;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mode-toggle {
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

.mode-button {
    min-height: 40px;
    color: var(--text);
    border-color: #d3c8b8;
    background: #f6f1e7;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.mode-button.active {
    color: #fbf8ef;
    border-color: #171717;
    background: #171717;
    box-shadow: none;
}

.ctrl-group {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #d3c8b8;
    border-radius: 4px;
    background: #f6f1e7;
}

.ctrl-icon {
    color: var(--muted);
    text-transform: none;
}

#volume-slider {
    height: 3px;
    background: #b8aa96;
}

#volume-slider::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    border: 2px solid var(--panel);
    background: #171717;
}

#volume-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 2px solid var(--panel);
    background: #171717;
}

#player-container {
    height: clamp(410px, 55vh, 720px);
    border: 1px solid #171717;
    border-radius: 3px;
    background: #050505;
    box-shadow: none;
}

#player-container::before,
#player-container::after {
    display: none;
}

#play-overlay {
    background: rgba(5, 5, 5, 0.58);
    backdrop-filter: none;
}

.play-btn {
    width: 72px;
    height: 72px;
    border: 2px solid #fbf8ef;
    background: transparent;
    box-shadow: none;
}

.play-btn::after {
    border-color: transparent transparent transparent #fbf8ef;
}

.play-label {
    padding: 6px 10px;
    border: 1px solid rgba(251, 248, 239, 0.8);
    border-radius: 4px;
    background: rgba(5, 5, 5, 0.66);
    color: #fbf8ef;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

.throughput-panel {
    gap: 10px;
    margin-top: 12px;
}

.throughput-card {
    grid-template-rows: auto 28px auto;
    min-height: 92px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #f6f1e7;
    box-shadow: none;
}

.throughput-card.active {
    border-color: #171717;
    background: #eee6d8;
    box-shadow: none;
}

.throughput-label {
    color: var(--muted);
    font-size: 10px;
    text-transform: none;
}

.throughput-value {
    color: #171717;
    font-size: 21px;
}

.throughput-detail {
    color: var(--muted);
}

.upload-status[data-tone="ready"],
.upload-status[data-tone="busy"] {
    color: var(--green);
}

.upload-status[data-tone="error"] {
    color: var(--rose);
}

.library-panel {
    overflow: hidden;
}

.library-header {
    min-height: 52px;
    padding: 0 14px;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

.library-title {
    padding-left: 0;
}

.library-title::before {
    display: none;
}

.library-actions .upload-button,
.upload-button {
    min-height: 32px;
    color: #fbf8ef;
    border-color: #171717;
    background: #171717;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.upload-menu-panel {
    border-color: var(--line);
    background: var(--panel);
    box-shadow: none;
}

.video-list {
    gap: 0;
    padding: 0;
    background: transparent;
}

.video-item {
    min-height: 74px;
    padding: 12px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    background: transparent;
    transition: background-color 140ms ease;
}

.video-item:hover {
    border-color: var(--line-soft);
    background: #f3eadc;
    transform: none;
}

.video-item.active {
    background: #e9decd;
    box-shadow: inset 3px 0 0 #171717;
}

.video-name {
    color: var(--text);
    font-size: 14px;
}

.video-meta {
    color: var(--muted);
}

.delete-video,
.source-badge {
    min-height: 30px;
    color: var(--muted);
    border-color: #d3c8b8;
    background: transparent;
    font-family: var(--font-main);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.delete-video:hover {
    color: var(--rose);
    border-color: var(--rose);
}

.source-badge {
    color: var(--amber);
}

.mode-explainer {
    grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
    padding: 18px;
}

.mode-explainer-copy h2 {
    max-width: 520px;
    color: var(--text);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1;
}

.mode-explainer-copy p:not(.eyebrow) {
    color: var(--muted);
}

.mode-explainer-grid {
    gap: 10px;
}

.mode-explainer-card {
    min-height: 218px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #f6f1e7;
}

.mode-explainer-card::after {
    display: none;
}

.mode-explainer-card h3 {
    color: var(--text);
    font-size: 18px;
}

.mode-explainer-card p {
    color: var(--muted);
}

.mode-card-visual {
    height: 82px;
    border-color: #d3c8b8;
    border-radius: 3px;
    background: #efe6d8;
    background-size: auto;
}

.mode-card-visual span {
    border-radius: 2px;
}

.mode-original .mode-card-visual span,
.mode-original .mode-card-visual span:nth-child(2),
.mode-original .mode-card-visual span:nth-child(3) {
    background: #cfc2ad;
}

.mode-glyph .mode-card-visual span,
.mode-glyph .mode-card-visual span:nth-child(2),
.mode-glyph .mode-card-visual span:nth-child(3) {
    color: #171717;
    background: #d8d0c1;
}

.mode-pixel .mode-card-visual span,
.mode-pixel .mode-card-visual span:nth-child(2),
.mode-pixel .mode-card-visual span:nth-child(3) {
    background: #cfc2ad;
}

.mode-pixel .mode-card-visual span:nth-child(even) {
    background: #b9c0ae;
}

.research-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.research-cta {
    align-items: center;
    padding: 18px;
}

.research-cta p {
    color: var(--text);
    font-size: clamp(18px, 1.5vw, 22px);
}

.research-cta a:not(.info-button) {
    color: var(--text);
    text-decoration-thickness: 1px;
}

.risk-link {
    color: #171717;
    border-color: #d3c8b8;
}

.research-actions .info-button,
.research-actions .risk-link {
    color: #171717;
}

.explainer-modal {
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--text);
    background: var(--panel);
    box-shadow: none;
}

.explainer-modal::backdrop {
    background: rgba(23, 23, 23, 0.42);
}

.modal-shell h2 {
    color: var(--text);
    font-family: var(--font-main);
}

.pipeline-diagram,
.modal-brief,
.paper-summary,
.metric-explainer,
.research-scope-panel,
.rail-step,
.packet-cell,
.codec-step,
.transform-card,
.map-node {
    border-radius: 4px;
    border-color: var(--line);
    background: #f6f1e7;
    box-shadow: none;
}

@media (max-width: 980px) {
    .studio-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .app-shell {
        width: min(100vw - 24px, 1180px);
        padding-top: 18px;
    }

    .app-header {
        min-height: 0;
        gap: 14px;
    }

    .brand-lockup {
        width: 100%;
        gap: 12px;
    }

    .brand-mark {
        width: 52px;
        height: 52px;
    }

    .app-header h1 {
        font-size: clamp(34px, 12vw, 46px);
    }

    .player-stage {
        padding: 10px;
    }

    .player-controls {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mode-toggle {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .mode-button {
        min-width: 0;
        min-height: 46px;
        padding: 0 6px;
        font-size: 12px;
        line-height: 1.1;
        white-space: normal;
    }

    #player-container {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .throughput-panel,
    .mode-explainer-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .mode-explainer {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .mode-explainer-card {
        min-height: 0;
    }

    .research-cta {
        align-items: start;
        flex-direction: column;
    }
}

/* Texture correction: warmer material without returning to AI/neon tropes */
:root {
    --bg: #d8cdbb;
    --panel: #f4ecdf;
    --panel-strong: #e9decf;
    --line: #b8aa98;
    --line-soft: #cfc2b0;
    --text: #1b1a17;
    --muted: #665e53;
    --shadow: 0 16px 34px rgba(59, 47, 35, 0.08);
}

body {
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.36), transparent 26%),
        radial-gradient(circle at 78% 8%, rgba(139, 95, 46, 0.1), transparent 30%),
        linear-gradient(90deg, rgba(44, 38, 31, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(44, 38, 31, 0.045) 1px, transparent 1px),
        repeating-linear-gradient(8deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 7px),
        var(--bg);
    background-size: auto, auto, 72px 72px, 72px 72px, 100% 100%, auto;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        repeating-radial-gradient(circle at 12% 18%, rgba(44, 38, 31, 0.08) 0 0.7px, transparent 0.7px 4px),
        repeating-radial-gradient(circle at 82% 62%, rgba(255, 255, 255, 0.18) 0 0.8px, transparent 0.8px 5px);
    opacity: 0.28;
    mix-blend-mode: multiply;
}

.app-header {
    border-bottom-color: rgba(77, 66, 53, 0.24);
}

.player-stage,
.library-panel,
.mode-explainer,
.research-cta,
.explainer-modal {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08)),
        repeating-linear-gradient(0deg, rgba(77, 66, 53, 0.022) 0 1px, transparent 1px 5px),
        var(--panel);
    border-color: rgba(85, 72, 57, 0.3);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.player-stage {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.08)),
        repeating-linear-gradient(90deg, rgba(77, 66, 53, 0.018) 0 1px, transparent 1px 6px),
        #f2eadc;
}

.library-panel,
.mode-explainer,
.research-cta {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.05)),
        repeating-linear-gradient(8deg, rgba(77, 66, 53, 0.024) 0 1px, transparent 1px 8px),
        #efe4d4;
}

.mode-explainer-copy h2 {
    max-width: 560px;
}

.player-controls,
.ctrl-group,
.mode-button,
.throughput-card,
.mode-explainer-card,
.mode-card-visual,
.upload-menu-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04)),
        #eadfce;
    border-color: rgba(85, 72, 57, 0.26);
}

.mode-button.active {
    background: #1b1a17;
}

.throughput-card.active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04)),
        #dfd3c1;
}

#player-container {
    border-color: #2b2925;
    background: #050505;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 24px rgba(59, 47, 35, 0.14);
}

.video-item.active {
    background: #ded2c0;
}

.video-item:hover {
    background: #e8dccb;
}

.mode-card-visual {
    background:
        linear-gradient(90deg, rgba(43, 41, 37, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(43, 41, 37, 0.05) 1px, transparent 1px),
        #dfd3c1;
    background-size: 14px 14px;
}

.mode-explainer {
    grid-template-columns: minmax(280px, 0.46fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 22px;
}

.mode-explainer-copy {
    align-content: start;
    padding-right: 6px;
}

.mode-explainer-copy h2 {
    max-width: 430px;
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.05;
}

.mode-explainer-copy p:not(.eyebrow) {
    max-width: 430px;
    font-size: 14px;
    line-height: 1.55;
}

.mode-comparison {
    display: grid;
    align-self: stretch;
    min-width: 0;
    border: 1px solid rgba(85, 72, 57, 0.26);
    border-radius: 4px;
    background:
        repeating-linear-gradient(0deg, rgba(77, 66, 53, 0.018) 0 1px, transparent 1px 6px),
        #eadfce;
}

.mode-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 18px;
    align-items: start;
    min-width: 0;
    padding: 13px 14px;
    border-top: 1px solid rgba(85, 72, 57, 0.18);
}

.mode-row:first-child {
    border-top: 0;
}

.mode-row-head {
    min-height: 34px;
    padding-top: 10px;
    padding-bottom: 9px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.18);
    font-family: var(--font-tech);
    font-size: 11px;
}

.mode-row strong {
    color: var(--text);
    font-size: 15px;
}

.mode-row span {
    min-width: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.42;
}

.mode-row:not(.mode-row-head) span:last-child {
    color: #51493e;
}

@media (max-width: 900px) {
    .mode-explainer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .mode-comparison {
        border: 0;
        background: transparent;
    }

    .mode-row,
    .mode-row-head {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .mode-row {
        margin-top: 8px;
        padding: 12px;
        border: 1px solid rgba(85, 72, 57, 0.24);
        border-radius: 4px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04)),
            #eadfce;
    }

    .mode-row:first-child {
        margin-top: 0;
    }

    .mode-row-head {
        display: none;
    }
}

#technical-trigger,
#risk-card,
#technical-modal,
#risk-modal,
#technical-modal *,
#risk-modal * {
    color: #171717;
}

#technical-modal .rail-original,
#technical-modal .rail-glyph,
#technical-modal .rail-pixel,
#technical-modal .rail-title,
#technical-modal .diagram-header h3,
#technical-modal .diagram-kicker,
#technical-modal .map-node span,
#technical-modal .rail-step span,
#technical-modal .map-feedback span,
#technical-modal .packet-cell span,
#technical-modal .transform-card span,
#risk-modal .risk-brief h3 {
    color: #171717;
}

#technical-modal .map-feedback > div,
#technical-modal .codec-card,
#technical-modal .sample-frame {
    border-color: #b8aa96;
    background: #f6f1e7;
}

#technical-modal .packet-payload {
    background:
        repeating-linear-gradient(90deg, rgba(85, 72, 57, 0.06) 0 10px, transparent 10px 20px),
        #f6f1e7;
}

#technical-modal .sample-glyph {
    color: #171717;
    background:
        radial-gradient(circle at 18% 22%, rgba(125, 255, 146, 0.16), transparent 32%),
        #f6f1e7;
    text-shadow: none;
}

#technical-modal .sample-pixel {
    background: #171717;
}

.tldr-section {
    display: grid;
    grid-template-columns: minmax(280px, 0.52fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #171717;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06)),
        repeating-linear-gradient(8deg, rgba(77, 66, 53, 0.024) 0 1px, transparent 1px 8px),
        #efe4d4;
    box-shadow: var(--shadow);
}

.tldr-copy {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.tldr-copy h2 {
    max-width: 520px;
    color: #171717;
    font-size: clamp(26px, 2.5vw, 38px);
    line-height: 1.04;
}

.tldr-copy p:not(.eyebrow) {
    max-width: 500px;
    color: #4f473d;
    font-size: 15px;
    line-height: 1.55;
}

.tldr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.tldr-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    min-height: 176px;
    padding: 14px;
    border: 1px solid #c9bba8;
    border-radius: 4px;
    color: #171717;
    background: #f6f1e7;
}

.tldr-card span {
    color: #171717;
    font-family: var(--font-tech);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: uppercase;
}

.tldr-card p {
    color: #171717;
    font-size: 14px;
    line-height: 1.48;
}

@media (max-width: 900px) {
    .tldr-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .tldr-section {
        padding: 14px;
    }

    .tldr-grid {
        grid-template-columns: 1fr;
    }

    .tldr-card {
        min-height: 0;
    }
}