@import url("https://storage.googleapis.com/rlc-behavior-2026-public-exhibit/fonts/fonts.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.5 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #606c71; background: #fff; }
.page-header { padding: 5rem 6rem; text-align: center; color: #fff; background: linear-gradient(120deg, #155799, #159957); }
.page-header h1 { max-width: 72rem; margin: 0 auto; font-size: 3.25rem; line-height: 1.4; font-weight: 700; }
.header-result { margin: 1rem 0 1.5rem; font-size: 1.25rem; }
.header-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.header-links a, .header-links span { padding: 0.55rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0.3rem; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.08); }
.header-links a:hover, .header-links a:focus-visible { background: rgba(255, 255, 255, 0.2); }
.header-links span { opacity: 0.55; }
.main-content { max-width: 64rem; margin: 0 auto; padding: 2rem 6rem; font-size: 1.1rem; overflow-wrap: break-word; }
.main-content :is(section[id], h3[id]) { scroll-margin-top: 4rem; }
.page-guide { position: fixed; z-index: 40; top: max(20vh, calc(var(--page-guide-header-bottom, 0px) + 2rem)); left: max(1rem, calc(50% - 38rem)); width: 10rem; visibility: hidden; font-size: 0.78rem; line-height: 1.3; }
.page-guide.is-ready { visibility: visible; }
.page-guide-toggle { display: none; }
.page-guide-links { border-left: 1px solid #dce6e4; }
.page-guide-label { display: block; padding: 0.15rem 0.65rem 0.6rem; color: #849095; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.page-guide-entry > a, .page-guide-sublist a { display: block; margin-left: -1px; padding: 0.38rem 0.65rem; border-left: 2px solid transparent; color: #66747a; text-decoration: none; }
.page-guide-entry > a:hover, .page-guide-sublist a:hover { color: #155799; }
.page-guide-entry > a:focus-visible, .page-guide-sublist a:focus-visible, .page-guide-toggle:focus-visible { outline: 2px solid #155799; outline-offset: 2px; }
.page-guide-entry.is-active > a { border-left-color: #159957; color: #33454e; font-weight: 700; }
.page-guide-sublist { padding-left: 0.5rem; }
.page-guide-sublist a { padding: 0.28rem 0.55rem; font-size: 0.72rem; }
.page-guide-sublist a[aria-current="location"] { color: #159957; font-weight: 700; }
.astra-figure { margin: 1.4rem 0 2rem; }
.astra-legend { display: flex; justify-content: flex-end; gap: 1.1rem; margin-bottom: 0.25rem; color: #526375; font-size: 0.76rem; }
.astra-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.astra-legend i { display: inline-block; width: 0.85rem; height: 0.6rem; }
.astra-policy-key, .astra-policy-bar { fill: #0072b2; background: #0072b2; }
.astra-gain-key, .astra-gain-bar { fill: #009e73; background: #009e73; }
.astra-chart-scroll { overflow-x: auto; }
.astra-q-chart { min-width: 650px; }
.astra-q-chart svg { display: block; width: 100%; height: auto; }
.astra-grid { stroke: #e4eaec; stroke-width: 1; }
.astra-axis { stroke: #8c969b; stroke-width: 1; }
.astra-tick { fill: #6b777d; font: 9px "Open Sans", sans-serif; }
.astra-figure figcaption { margin-top: 0.2rem; color: #66747a; font-size: 0.8rem; }
.cook-comparison { margin: 1.75rem 0 2rem; padding: 1rem; border: 1px solid #dce6e4; border-radius: 10px; background: #fbfdfc; }
.cook-comparison > figcaption { margin-bottom: 0.9rem; color: #33454e; font-size: 0.95rem; }
.cook-comparison-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.cook-comparison-video { min-width: 0; }
.cook-comparison-label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; color: #33454e; font-size: 0.85rem; }
.cook-q { padding: 1px 5px; border-radius: 3px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.cook-q-low { background: #fdecea; color: #b42318; }
.cook-q-high { background: #e4f3ed; color: #137547; }
.cook-comparison-video video { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; background: #172d3b; cursor: pointer; }
.cook-comparison-video video:focus-visible { outline: 2px solid #155799; outline-offset: 2px; }
.cook-transport { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.8rem; color: #66747a; font-size: 0.78rem; }
.cook-transport input:focus-visible { outline: 2px solid #155799; outline-offset: 2px; }
.cook-transport input { flex: 1; min-width: 0; accent-color: #155799; cursor: pointer; }
.cook-transport #cook-time { min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cook-speed { font-weight: 700; white-space: nowrap; }
.main-content h2, .main-content h3 { color: #159957; font-weight: 400; }
.main-content h2 { margin: 2rem 0 1rem; font-size: 2rem; }
.main-content h3 { margin: 1.5rem 0 1rem; font-size: 1.5rem; }
.blog-section { min-height: 9rem; }
.method-subsection { min-height: 6rem; margin: 1.75rem 0; padding: 1.25rem; border: 1px solid #e3eae7; border-radius: 10px; background: #fbfdfc; }
.method-subsection h3 { margin: 0 0 1rem; text-align: center; }
.method-figure { position: relative; width: 100%; }
.method-figure img, .method-figure svg { display: block; width: 100%; height: auto; }
.method-figure svg.method-mobile-part { display: none; }
.method-figure svg [data-method-topic] { cursor: help; pointer-events: bounding-box; }
.method-figure svg [data-method-topic]:is(:hover, :focus-visible) { filter: drop-shadow(0 0 5px #16825b); outline: none; }
.method-popover { position: fixed; z-index: 100; width: min(350px, calc(100vw - 24px)); padding: 0.85rem 2.5rem 0.85rem 1rem; border: 1px solid #155799; border-radius: 8px; background: #fff; color: #3a4b54; box-shadow: 0 8px 28px #172d3b38; font-size: 0.88rem; line-height: 1.4; }
.method-popover[hidden] { display: none; }
.method-popover strong { display: block; margin-bottom: 0.25rem; color: #155799; }
.method-popover p { margin: 0; }
.method-popover-close { position: absolute; top: 0.35rem; right: 0.45rem; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; background: transparent; color: #526375; font: 24px/1 system-ui, sans-serif; cursor: pointer; }
.method-popover-close:hover, .method-popover-close:focus-visible { color: #155799; }
.training-examples { margin: 1.5rem 0; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; }
.training-examples h3 { margin-top: 0; }
.training-examples p { margin: 0 0 1rem; }
.example-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.example-tabs button { padding: 0.5rem 0.75rem; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; color: #606c71; cursor: pointer; }
.example-tabs button[aria-selected="true"] { border-color: #155799; background: #155799; color: #fff; }
.example-tabs button:focus-visible { outline: 2px solid #155799; outline-offset: 2px; }
#example-video { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto 1rem; border-radius: 6px; }
.training-examples .example-instruction { margin: 0; }
.results-table-wrap { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.results-table th, .results-table td { padding: 0.35rem 0.4rem; border-bottom: 1px solid #dce6e4; text-align: left; vertical-align: top; }
.results-table th { color: #155799; white-space: nowrap; }
.results-table td:nth-child(5), .results-table td:nth-child(6) { white-space: nowrap; }
.results-table .our-team { background: #eaf7ef; font-weight: 700; }
.results-table .our-team td { padding-top: 0.65rem; padding-bottom: 0.65rem; }
.results-table tfoot td { padding: 0; border-bottom: 0; }
.leaderboard-more { display: block; padding: 0.3rem; color: #155799; font-size: 1.5rem; line-height: 1; text-align: center; text-decoration: none; }
.leaderboard-more:hover, .leaderboard-more:focus-visible { background: #f3f8f7; text-decoration: underline; }
.score-badge { display: inline-block; margin-left: 0.2rem; padding: 0.1rem 0.3rem; border-radius: 999px; font-size: 0.7rem; font-weight: 400; }
.score-badge.verified { background: #e4f3ed; color: #276f64; }
.score-badge.self-reported { background: #edf1f4; color: #526375; }
.task-explorer { margin: 1.5rem 0 2rem; }
.task-explorer h3 { margin-bottom: 0.35rem; }
.selected-task { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.selected-task-name { color: #33454e; font-size: 1.05rem; font-weight: 700; }
.selected-task-score { padding: 0.12rem 0.42rem; border-radius: 4px; background: #e8f2f8; color: #155799; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.task-chart-scroll { overflow-x: auto; }
.task-chart { display: flex; min-width: 760px; height: 220px; }
.task-chart-ticks { display: flex; flex-direction: column; justify-content: space-between; width: 2.5rem; padding: 0 0.35rem 0.1rem 0; color: #606c71; font-size: 0.72rem; text-align: right; }
.task-bars { display: flex; align-items: flex-end; flex: 1; gap: 1px; padding: 0 2px; border-left: 1px solid #8c969b; border-bottom: 1px solid #8c969b; background: linear-gradient(to bottom, #e5e9eb 1px, transparent 1px) 0 50% / 100% 50% no-repeat; }
.task-bar { display: flex; align-items: flex-end; flex: 1; min-width: 6px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.task-bar-fill { display: block; width: 100%; background: #0072b2; }
.task-bar.new-task .task-bar-fill { background: #56b4e9; }
.task-bar:hover .task-bar-fill { filter: brightness(1.25); }
.task-bar[aria-pressed="true"] .task-bar-fill { outline: 2px solid #113b5c; outline-offset: 1px; }
.task-bar:focus-visible { outline: 3px solid #159957; outline-offset: 2px; z-index: 2; }
.task-chart-legend { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 1rem 2.5rem; font-size: 0.8rem; }
.task-chart-legend span { display: inline-block; width: 0.8rem; height: 0.8rem; }
.prior-task-key { background: #0072b2; }
.new-task-key { background: #56b4e9; margin-left: 0.8rem; }
.episode-shell { overflow: hidden; border: 1px solid #dce6e4; border-radius: 8px; background: #fff; box-shadow: 0 2px 10px #172d3b14; }
.episode-frame { display: block; width: 100%; height: 800px; border: 0; background: #fff; }
.failure-analysis { margin: 1.5rem 0 2rem; }
.failure-intro { margin: -0.3rem 0 0.9rem; }
.failure-chart { min-width: 690px; font-size: 0.75rem; }
.failure-chart-legend { display: flex; justify-content: flex-end; gap: 1.2rem; padding: 0 2.7rem 0.55rem 0; color: #526375; }
.failure-chart-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.failure-chart-legend i { display: inline-block; width: 0.85rem; height: 0.6rem; }
.failure-chart-legend .year-2026 { background: #0072b2; }
.failure-chart-legend .year-2025 { background: #8e9ca6; }
.failure-row { display: grid; grid-template-columns: 11.7rem minmax(0, 1fr); gap: 0.65rem; align-items: center; width: 100%; min-height: 1.5rem; padding: 0.04rem 0.1rem; border: 0; background: transparent; color: #43535b; font: inherit; text-align: left; cursor: help; }
.failure-row:hover, .failure-row:focus-visible { background: #f1f8f6; outline: none; }
.failure-row:focus-visible { box-shadow: inset 0 0 0 2px #159957; }
.failure-reason { text-align: right; }
.failure-plot { display: block; min-width: 0; }
.failure-series { display: flex; align-items: center; height: 0.68rem; line-height: 1; }
.failure-bar { display: block; flex: none; height: 0.42rem; min-width: 0; }
.failure-series.year-2026 .failure-bar { background: #0072b2; }
.failure-series.year-2025 .failure-bar { background: #8e9ca6; }
.failure-popover { position: fixed; z-index: 110; width: min(350px, calc(100vw - 24px)); padding: 0.75rem 0.9rem; border: 1px solid #155799; border-radius: 8px; background: #fff; color: #3a4b54; box-shadow: 0 8px 28px #172d3b38; font-size: 0.85rem; line-height: 1.4; pointer-events: none; }
.failure-popover[hidden] { display: none; }
.failure-popover p { margin: 0; }
.emergent-clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 1.5rem; }
.emergent-clip { min-width: 0; margin: 0; }
.emergent-video { position: relative; }
.emergent-clip video { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 6px; background: #000; }
.emergent-speed { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 4px; background: #172d3bcc; color: #fff; font-size: 0.75rem; font-weight: 700; pointer-events: none; }
.emergent-dialogue { position: relative; min-height: 5.6rem; margin-top: 0.85rem; padding: 0.7rem 0.85rem 0.6rem; border: 1px solid #bedccc; border-radius: 10px; background: #f0f8f3; color: #33454e; }
.emergent-dialogue::before { position: absolute; top: -6px; left: 1.5rem; width: 10px; height: 10px; transform: rotate(45deg); border-top: 1px solid #bedccc; border-left: 1px solid #bedccc; background: #f0f8f3; content: ''; }
.emergent-cue { margin: 0; }
.emergent-cue-steps { display: flex; gap: 0.35rem; margin-top: 0.55rem; }
.emergent-cue-steps span { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: #b7c9be; }
.emergent-cue-steps span.is-active { background: #159957; }
.team-contributions { margin: 0 0 2rem; padding-left: 1.35rem; }
.team-contributions li { margin: 0.3rem 0; }
.team-footer { margin-top: 2rem; padding: 2.5rem 1.5rem 3rem; border-top: 1px solid #dce6e4; background: #f7faf9; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1.25rem; max-width: 64rem; margin: 0 auto; }
.team-person { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: #33454e; font-size: 0.9rem; font-weight: 700; text-align: center; text-decoration: none; }
.team-person:hover { color: #155799; text-decoration: underline; }
.team-person:focus-visible { outline: 2px solid #155799; outline-offset: 5px; }
.team-avatar { display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; }
.team-initials { background: #f9e9e4; color: #dc4b27; font-size: 1.65rem; }
@media (max-width: 64rem) { .page-header { padding: 3rem 4rem; } .page-header h1 { font-size: 2.25rem; } .main-content { padding: 2rem 4rem; } }
@media (max-width: 75rem) { .page-guide { position: sticky; top: 0.5rem; left: auto; width: max-content; max-width: 100%; margin: 0 0 1rem auto; visibility: visible; } .page-guide-toggle { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.6rem; border: 1px solid #dce6e4; border-radius: 6px; background: #fff; color: #33454e; box-shadow: 0 2px 8px #172d3b12; cursor: pointer; } .page-guide-toggle #page-guide-current { font-weight: 700; } .page-guide-toggle span:last-child { margin-left: 0.25rem; } .page-guide-links { display: none; position: absolute; top: calc(100% + 0.3rem); right: 0; width: min(14rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto; padding: 0.35rem 0; border: 1px solid #dce6e4; border-radius: 6px; background: #fff; box-shadow: 0 6px 20px #172d3b24; } .page-guide.is-open .page-guide-links { display: block; } .page-guide-label { display: none; } }
@media (max-width: 42rem) { .page-header { padding: 2rem 1rem; } .page-header h1 { font-size: 1.75rem; } .main-content { padding: 2rem 1rem; font-size: 1rem; } .method-subsection { padding: 0.75rem; } .method-figure svg.method-desktop-figure { display: none; } .method-figure svg.method-mobile-part { display: block; margin-bottom: 0.5rem; } .method-popover { left: 1rem !important; right: 1rem; top: auto !important; bottom: 1rem; width: auto; } }
@media (max-width: 42rem) { .emergent-clips { grid-template-columns: 1fr; } }
@media (max-width: 42rem) { .cook-comparison-videos { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }