/* VICTR project page. Layout follows eyerobot2.github.io: a single 1000px
   column with a fixed section index in the left gutter on wide screens. */

:root {
    --content-width: 1000px;
    --ink: #333;
    --ink-strong: #1a1a1a;
    --muted: #777;
    --faint: #aaa;
    --rule: #e3e5e7;
    --panel: #f7f8f9;
    --panel-border: #e6e8ea;

    /* Paper palette (scripts/colors.py). */
    --pi05: #FFC5C5;      --pi05-ink: #c25b5b;
    --ricl: #B4E5A2;      --ricl-ink: #4f9a37;
    --vv: #C0E5EF;        --vv-ink: #4b93a8;
    --victr: #FFE89F;     --victr-ink: #b8901a;

    /* Roles used by the method figures. */
    --value: #e0a400;     /* progress / value signal */
    --vision: #4b93a8;    /* DINOv2 visual signal */
    --chunk: #7a5bb5;     /* retrieved context chunk */
    --attend: #8fd19e;    /* attention: always-on edges */
    --causal: #f2a3b3;    /* attention: block-causal extra edges */

    --sans: 'Open Sans', sans-serif;
    --display: 'Avenir Next', Avenir, 'Nunito Sans', 'Open Sans', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 2em 2em 4em;
    background: #fff;
    font-family: var(--sans);
    color: var(--ink);
    font-size: 18px;
    line-height: 1.5;
}

@media (max-width: 750px) {
    body { padding: 20px 16px 3em; font-size: 16px; }
}

h1, h2, h3, h4 { font-family: var(--display); color: var(--ink-strong); }

h1 { font-size: 30px; font-weight: 500; margin: 2.2em 0 0.6em; padding-bottom: 6px; border-bottom: 1px solid var(--rule); scroll-margin-top: 20px; }
h2 { font-size: 22px; font-weight: 500; margin: 2em 0 0.5em; scroll-margin-top: 20px; }
h3 { font-size: 17px; font-weight: 600; margin: 1.4em 0 0.4em; }

p { margin: 0.6em 0; }
a { color: #2563eb; }

main, .masthead, .page-hero { max-width: var(--content-width); margin: 0 auto; }

.math { font-family: 'Times New Roman', Times, serif; font-style: italic; }
.eq { text-align: center; font-size: 1.15em; margin: 0.5em 0; }

/* ---------------------------------------------------------------- masthead */

.masthead { padding-bottom: 22px; border-bottom: 1px solid var(--rule); text-align: center; }

.title {
    margin: 0; border: 0; padding: 0;
    font-size: 38px; line-height: 1.2; font-weight: 400;
    text-wrap: pretty;
}
.title-name { font-weight: 600; }

.masthead-authors { margin: 16px auto 0; max-width: 760px; font-size: 18px; line-height: 1.6; color: var(--ink-strong); }
.masthead-authors .author { white-space: nowrap; }
.masthead-authors sup, .masthead-affil sup, .masthead-note sup { font-size: 0.65em; }
.masthead-affil { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
.masthead-note { margin: 4px 0 0; font-size: 13px; color: #6a6f73; }
.masthead-note a { color: inherit; }
.masthead-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; margin-top: 16px; }
.masthead-meta { margin: 0; font-size: 13px; color: #6a6f73; }

.project-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.project-link {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 18px 0 14px;
    border: 0; border-radius: 999px; background: #363636;
    color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.project-link:hover { background: #1f1f1f; }
.project-link.disabled { background: #8a8d90; pointer-events: none; }
.project-link .hf { font-size: 16px; line-height: 1; }
.project-link .ai { font-size: 16px; line-height: 1; }
.project-link svg { width: 15px; height: 15px; }

@media (max-width: 600px) { .title { font-size: 28px; } }

/* ------------------------------------------------------------------ hero */

.hero-video { width: 100%; margin-top: 28px; border-radius: 10px; display: block; background: #000; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 4px; }
.stat {
    border: 1px solid var(--panel-border); border-radius: 10px; padding: 12px 14px;
    background: var(--panel);
}
.stat-value { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--ink-strong); line-height: 1.1; }
.stat-value .from { color: var(--faint); font-weight: 400; font-size: 18px; }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

@media (max-width: 600px) { .stat-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- section index */

.section-index {
    position: fixed; z-index: 20; top: 2em;
    left: max(18px, calc(50vw - (var(--content-width) / 2) - 224px));
    width: 184px; padding: 2px 18px 2px 0;
    border-right: 1px solid #e2e2e2;
    font-family: var(--display);
    opacity: 0; transition: opacity .25s;
}
.section-index.visible { opacity: 1; }
.section-index ol { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.section-index a {
    display: block; color: var(--faint); font-size: 13px; line-height: 1.3; text-decoration: none;
    transition: color .14s;
}
.section-index a[data-level="1"] { color: #929292; font-weight: 500; }
.section-index a[data-level="2"] { padding-left: 10px; }
.section-index a:hover { color: #555; }
.section-index a.is-active { color: #292929; }
.section-index a[data-level="2"].is-active { box-shadow: inset 2px 0 0 var(--victr-ink); }

@media (max-width: 1483px) { .section-index { display: none; } }

/* ----------------------------------------------------------- shared bits */

.caption { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.widget {
    margin: 18px 0 8px; padding: 16px;
    border: 1px solid var(--panel-border); border-radius: 12px; background: #fff;
}
.widget-title { font-family: var(--display); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }

/* Segmented selectors (task pickers, toggles). */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    border: 1px solid #dfe2e4; background: #fff; color: #444;
    border-radius: 999px; padding: 5px 12px; font: 500 13px var(--sans);
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { background: #f4f5f6; }
.chip.active { background: #2c2f31; border-color: #2c2f31; color: #fff; }
.chip .tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; margin-left: 6px; opacity: .65; }

/* Task dropdown. */
.task-picker { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.task-picker .toggle button.active[data-id="ood"] { background: var(--victr-ink); }
.toggle button:disabled { color: #c4c7ca; cursor: not-allowed; }
.task-select {
    appearance: none; -webkit-appearance: none;
    font: 500 13px var(--sans); color: var(--ink-strong);
    padding: 5px 34px 5px 12px; min-width: 260px; max-width: 100%;
    border: 1px solid #dfe2e4; border-radius: 8px; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 11px 8px;
}
.task-select:hover { border-color: #c9cdd0; }
.task-select:focus-visible { outline: 2px solid var(--victr-ink); outline-offset: 1px; }

.toggle { display: inline-flex; border: 1px solid #dfe2e4; border-radius: 8px; overflow: hidden; }
.toggle button { border: 0; background: #fff; padding: 5px 11px; font: 500 13px var(--sans); color: #555; cursor: pointer; }
.toggle button + button { border-left: 1px solid #dfe2e4; }
.toggle button.active { background: #2c2f31; color: #fff; }

.controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0; }
.controls-row .label { font-size: 13px; color: var(--muted); }

/* Placeholder media, shown wherever real clips have not been dropped in. */
.media-placeholder {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 12px, #e9e9e9 12px, #e9e9e9 24px);
    border: 2px dashed #c4c4c4; border-radius: 10px;
    color: #888; font-size: 14px; text-align: center; padding: 1em; overflow: hidden;
}
.media-placeholder .ph-title { font-weight: 600; color: #666; }
.media-placeholder .ph-sub { font-size: 12px; font-family: var(--mono); }
.media-placeholder .ph-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.25); }
.media-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; }
.media-frame video, .media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.speed-tag { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: 600 12px var(--mono); pointer-events: none; }

.badge { display: inline-block; font: 700 11px var(--sans); letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.badge.fail { background: #fde2e2; color: #a33; }
.badge.success { background: #ddf3d5; color: #2e7a1a; }
.badge.partial { background: #fff1c4; color: #8a6a00; }

.player-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.play-btn {
    width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid #dfe2e4; background: #fff;
    display: grid; place-items: center; cursor: pointer;
}
.play-btn:hover { background: #f4f5f6; }
.play-btn svg { width: 14px; height: 14px; fill: #333; }
.scrubber { flex: 1; accent-color: #2c2f31; }
.timecode { font: 12px var(--mono); color: var(--muted); min-width: 92px; text-align: right; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: #555; margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.25); }
.legend i.line { height: 2px; border: 0; border-radius: 0; width: 16px; }
.legend i.dash { height: 0; border: 0; border-top: 2px dashed currentColor; border-radius: 0; width: 16px; }

svg text { font-family: var(--sans); }
.axis text { font-size: 11px; fill: #777; }
.axis line, .axis path { stroke: #ddd; }

/* --------------------------------------------- Section 2: why context */

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.versus-col h4 { margin: 0 0 6px; font-size: 14px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.versus-note { font-size: 14px; color: #555; margin: 10px 0 0; }
.versus-stats { font-size: 12px; color: var(--muted); margin-top: 6px; }
@media (max-width: 600px) { .versus { grid-template-columns: 1fr; } }

/* -------------------------------------- Section 3: overview pipeline */

.pipeline svg { width: 100%; height: auto; display: block; }
.pipeline .node rect { transition: stroke .2s, fill .2s; }
.pipeline .node { cursor: pointer; }
.pipeline .node:hover rect.box { stroke: #2c2f31; }
.pipeline .node text { font-size: 13px; fill: #333; pointer-events: none; }
.pipeline .node .sub { font-size: 10.5px; fill: #888; }
.pipeline .stage-label { font: 600 11px var(--display); letter-spacing: .08em; fill: #999; text-transform: uppercase; }
.pipeline .flow { fill: none; stroke: #9aa0a4; stroke-width: 1.6; marker-end: url(#arrow); }
.pipeline .flow.value { stroke: var(--value); }
.pipeline .flow.chunk { stroke: var(--chunk); }
.pipeline .node, .pipeline .flow { transition: opacity .35s; }
.pipeline .node.dim { opacity: .45; }
.pipeline .flow { opacity: .35; }
.pipeline .flow.on { opacity: 1; stroke-dasharray: 6 5; animation: march 1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -11; } }

/* ------------------------------------- Section 3.1: demo pool builder */

.poolbuilder svg { width: 100%; height: auto; display: block; }
.poolbuilder .demo-bar { transition: transform .8s cubic-bezier(.4,.1,.2,1), opacity .4s; }
.poolbuilder .demo-bar g, .poolbuilder .demo-bar text { transition: opacity 1s ease; }
.poolbuilder .demo-bar rect { transition: fill 1s ease, stroke 1s ease; }
.poolbuilder .step-text { transition: opacity .45s ease; }
.step-text { font-size: 14px; min-height: 2.8em; color: #444; margin-top: 8px; }
.step-dots { display: flex; gap: 6px; margin-top: 6px; }
.step-dots button { width: 22px; height: 6px; border-radius: 3px; border: 0; background: #ddd; cursor: pointer; padding: 0; }
.step-dots button.active { background: #2c2f31; }

/* -------------------------------------------- Section 3.2: IC-VFE */

.vfe-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; }
.vfe-plot svg { width: 100%; height: auto; display: block; }
.ref-strip { display: flex; gap: 3px; margin-top: 10px; }
.ref-strip div { flex: 1; height: 26px; border-radius: 3px; background: #eee; position: relative; transition: outline-color .15s; outline: 2px solid transparent; }
.ref-strip div.hot { outline-color: var(--value); }
.ref-label { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; justify-content: space-between; }
.readout { font: 13px var(--mono); color: #444; margin-top: 8px; }
.readout b { color: var(--value); }
@media (max-width: 700px) { .vfe-grid { grid-template-columns: 1fr; } }

.retrieval-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.retrieval-grid h4 { margin: 0 0 6px; font-size: 13px; color: #555; font-weight: 600; display: flex; justify-content: space-between; }
.chunk-frame { outline: 3px solid var(--chunk); outline-offset: -3px; }
.paused-note { font-size: 12px; color: var(--chunk); min-height: 1.4em; margin-top: 6px; }
.pool-map { margin-top: 12px; }
.pool-map svg { width: 100%; height: auto; display: block; }
@media (max-width: 600px) { .retrieval-grid { grid-template-columns: 1fr; } }

.fig5-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fig5-grid figure { margin: 0; }
.fig5-grid img { width: 100%; border-radius: 6px; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.fig5-grid figcaption { font-size: 12px; color: #555; margin-top: 4px; text-align: center; }
.fig5-grid figure.query img { outline: 3px solid #2c2f31; outline-offset: -3px; }
.fig5-grid figure.value img { outline: 3px solid var(--value); outline-offset: -3px; }
@media (max-width: 600px) { .fig5-grid { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------- Section 3.25: attention */

.attn-wrap { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.attn-wrap svg { display: block; max-width: 100%; height: auto; }
.attn-side { font-size: 14px; color: #444; }
.attn-side .layer-name { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ink-strong); }
.attn-side .layer-kind { font-size: 13px; color: var(--muted); }
.layer-strip { display: grid; grid-template-columns: repeat(18, 1fr); gap: 2px; margin: 10px 0 4px; }
.layer-strip button { height: 22px; border: 0; border-radius: 3px; background: #e8ebe9; cursor: pointer; padding: 0; font: 9px var(--mono); color: #888; }
.layer-strip button.causal { background: #fbd9e0; color: #a3455b; }
.layer-strip button.active { outline: 2px solid #2c2f31; outline-offset: 1px; }
.attn-cell { transition: fill-opacity .35s; }
@media (max-width: 700px) { .attn-wrap { grid-template-columns: 1fr; } }

/* ----------------------------------------- Section 3.3: IC-VLA panel */

.action-plot svg { width: 100%; height: auto; display: block; }

/* ------------------------------------------- Section 4: eval browser */

.chart svg { width: 100%; height: auto; display: block; }
.chart-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .chart-pair { grid-template-columns: 1fr; } }
.chart .bar { transition: height .4s, y .4s; }
.chart .bar-label { font-size: 10.5px; fill: #444; }
.chart .group-label { font-size: 12px; fill: #333; font-weight: 600; }
.chart .sub-label { font-size: 10px; fill: #888; }

.tooltip {
    position: fixed; z-index: 50; pointer-events: none;
    background: #2c2f31; color: #fff; font-size: 12px; line-height: 1.4;
    padding: 6px 9px; border-radius: 6px; opacity: 0; transition: opacity .1s; max-width: 260px;
}

.eval-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.eval-table th { font: 600 12px var(--display); color: #666; text-align: center; padding: 6px 4px; border-bottom: 1px solid var(--rule); }
.eval-table th:first-child, .eval-table td:first-child { text-align: left; }
.eval-table td { padding: 4px; border-bottom: 1px solid #f1f2f3; text-align: center; }
.eval-table tr.domain-row td { font: 700 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #999; padding-top: 14px; border-bottom: 1px solid var(--rule); }
.eval-table tr.task-row { cursor: pointer; }
.eval-table tr.task-row:hover td { background: #fafafa; }
.eval-table tr.task-row.selected td { background: #f4f1fb; }
.cell-bar { position: relative; height: 22px; border-radius: 4px; background: #f3f4f5; overflow: hidden; min-width: 70px; }
.cell-bar .p { position: absolute; left: 0; top: 0; bottom: 0; opacity: .45; }
.cell-bar .s { position: absolute; left: 0; top: 0; bottom: 0; }
.cell-bar span { position: relative; font: 600 11px var(--mono); line-height: 22px; color: #333; }
.cell-bar.na { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 4px, #f0f0f0 4px, #f0f0f0 8px); }
.cell-bar.na span { color: #bbb; font-weight: 400; }

.rollout-panel { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.rollout-panel h3 { margin-top: 0; }
.rollout-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
.rollout-dots button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font: 600 11px var(--mono); color: #333; }
.rollout-dots button.success { background: #ddf3d5; }
.rollout-dots button.partial { background: #fff1c4; }
.rollout-dots button.failure { background: #fde2e2; }
.rollout-dots button.active { border-color: #2c2f31; }

.vfe-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vfe-table th, .vfe-table td { padding: 5px 6px; text-align: center; border-bottom: 1px solid #f1f2f3; }
.vfe-table th { font: 600 12px var(--display); color: #666; border-bottom: 1px solid var(--rule); cursor: pointer; user-select: none; }
.vfe-table th:first-child, .vfe-table td:first-child { text-align: left; }
.vfe-table td.group { font: 700 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #999; padding-top: 12px; }
.vfe-table tr.ours td { background: #fff8db; font-weight: 600; }
.vfe-table td .best { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.vfe-table td.metric { position: relative; }
.vfe-table td.metric .bg { position: absolute; left: 0; top: 3px; bottom: 3px; background: #eef1f3; border-radius: 3px; z-index: 0; }
.vfe-table td.metric span { position: relative; z-index: 1; font-family: var(--mono); }


/* ------------------------------------------------------ Section 5 */

.bibtex {
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px;
    padding: 14px 16px; font: 13px/1.5 var(--mono); white-space: pre; overflow-x: auto;
}

footer { max-width: var(--content-width); margin: 4em auto 0; font-size: 12px; color: var(--faint); text-align: center; }
#abstract + p sub { line-height: 0; }
#train-deploy-chart .group-label { font-size: 10.5px; }
#train-deploy-chart .sub-label { font-size: 9.5px; }