@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/google-sans.woff2) format('woff2');
}
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/google-sans-code.woff2) format('woff2');
}
@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/klee-one-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Klee One';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/klee-one-600.woff2) format('woff2');
}

@font-face {
  font-family: 'DejaVu Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/dejavusans.woff2) format('woff2');
}
@font-face {
  font-family: 'DejaVu Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/dejavusans-bold.woff2) format('woff2');
}
@font-face {
  font-family: cmtt10;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/cmtt10.woff2) format('woff2');
}

html { scroll-behavior: smooth; }
main, main > h2 { scroll-margin-top: 28px; }

body {
  margin: 0;
  background: #fff;
  color: #222;
  font: 17px/1.7 'Klee One', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 900px; margin: 0 auto; padding: 72px 16px 80px; }
.paper-header { max-width: 680px; margin-inline: auto; }

h1, h2 { font-family: 'Google Sans', system-ui, sans-serif; font-weight: 600; }
h1 { margin: 0 0 14px; font-size: clamp(28px, 4.5vw, 32px); line-height: 1.25; text-wrap: balance; }
h2 { margin: 48px 0 10px; font-size: 23px; line-height: 1.3; }
#setup + p b, .defined-term { font-family: 'Google Sans', system-ui, sans-serif; font-weight: 700; }
.defined-term { color: #000; }

p { margin: 0 0 16px; }
b { font-weight: 600; }
a { color: #2e6b46; text-underline-offset: 3px; text-decoration-thickness: 1px; }
sup { font-size: 0.68em; line-height: 0; }

.dataset-reference { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; }
.dataset-reference:hover { color: #2e6b46; }
.dataset-reference:focus-visible, .dataset-paper a:focus-visible { outline: 2px solid #2e6b46; outline-offset: 3px; border-radius: 2px; }
.dataset-paper { box-sizing: border-box; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 14px 16px; border: 1px solid #d7ddd4; border-radius: 12px; background: #fff; color: #272b30; box-shadow: 0 6px 24px rgb(0 0 0 / 0.14); font: 14px/1.5 'Google Sans', system-ui, sans-serif; }
.dataset-paper strong { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.dataset-paper a { display: inline-block; padding-block: 4px; }

.authors { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; font-size: 20px; line-height: 1.5; }
.authors > span { white-space: nowrap; }
.authors sup { margin-left: 2px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0; font-size: 15px; color: #666; }
.affiliation { display: inline-flex; align-items: center; gap: 5px; }
.affiliation sup { align-self: flex-start; margin-top: 3px; }
.meta img { display: block; width: auto; }
.meta .berkeley { height: 22px; }
.meta .eth { height: 18px; }
.contribution sup { margin-right: 3px; }
.links { margin: 18px 0 0; }
.links a { margin-right: 16px; }
.arxiv-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; box-sizing: border-box; padding: 4px 12px; border: 1px solid #bd4444; border-radius: 6px; background: #cf5757; color: #fff; text-decoration: none; box-shadow: 0 2px 5px rgb(100 15 15 / 0.12); }
.arxiv-link:hover { background: #bd4444; border-color: #aa3636; }
.arxiv-link:focus-visible { outline: 3px solid #b31b1b; outline-offset: 4px; }
.arxiv-paper { display: block; flex: none; width: 18px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.arxiv-logo { display: block; flex: none; width: 54px; height: auto; }
.warning { margin: 24px 0 32px; font-size: 15px; color: #d20000; }

img, video { display: block; width: 100%; height: auto; }
video { margin: 28px 0 32px; }
.paper-header + video { max-width: 680px; margin-inline: auto; }
figure { margin: 28px 0 32px; }
figcaption { margin-top: 8px; font-size: 14.5px; color: #666; }
figure:not(.rsd) > figcaption { text-align: center; }
figure:not(.rsd) > figcaption > strong { font-family: 'Google Sans', system-ui, sans-serif; font-weight: 700; color: #222; }
figure.small { max-width: 440px; margin-inline: auto; }

.scaling-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 16px; }
.scaling-layout > p { margin: 0; }
.scaling-layout > figure { width: 100%; margin: 0; }
@media (max-width: 800px) {
  .scaling-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .scaling-layout > figure { margin-inline: auto; }
}

/* Contents stays outside the reading column and shares the page's green accents. */
.contents {
  position: fixed; z-index: 20; top: 50%; transform: translateY(-50%);
  left: max(12px, calc((100vw - 900px) / 2 - 244px)); width: 184px;
  max-height: calc(100dvh - 48px); overflow-y: auto;
}
.contents-title { margin: 0 0 14px 14px; font: 600 18px/1.4 'Google Sans', system-ui, sans-serif; color: #303d32; }
.contents ol { list-style: none; margin: 0 0 0 2px; padding: 0; border-left: 1px solid #d9e3d9; }
.contents li { margin: 2px 0; }
.contents a {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  min-height: 24px; padding: 6px 12px 6px 14px; border-radius: 0 6px 6px 0;
  font: 14px/1.5 'Klee One', system-ui, sans-serif; text-decoration: none;
  color: #43644b; transition: background .15s, color .15s;
}
.contents a:hover { color: #244e35; background: #f5f8f2; text-decoration: underline; }
.contents a[aria-current="location"] { color: #244e35; background: #edf4e9; font-weight: 600; }
.contents a[aria-current="location"]::before { content: ''; position: absolute; left: -2px; top: 7px; bottom: 7px; width: 3px; background: #2e6b46; border-radius: 3px; }
.contents a > span { color: #7c917e; }
.contents :focus-visible { outline: 2px solid #2e6b46; outline-offset: 2px; }
.contents-toggle { display: none; }

@media (max-width: 1359px) {
  .contents { position: static; transform: none; width: auto; max-height: none; margin: 20px 16px; }
  .js .contents { position: fixed; top: auto; bottom: max(18px, env(safe-area-inset-bottom)); left: 18px; width: auto; max-width: calc(100vw - 36px); margin: 0; overflow: visible; }
  .js .contents-title { display: none; }
  .js .contents-toggle {
    display: flex; align-items: center; gap: 9px; min-height: 44px; max-width: 100%;
    padding: 10px 14px; border: 1px solid #d8e3d6; border-radius: 12px; background: #fff;
    color: #2e6b46; font: 500 13px/1.5 'Google Sans', system-ui, sans-serif;
    box-shadow: 0 3px 16px rgb(32 52 35 / .08); cursor: pointer;
  }
  .contents-toggle svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .contents-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; padding-left: 10px; border-left: 1px solid #dce5d8; color: #657465; font-size: 11px; }
  .js .contents ol {
    display: none; position: absolute; bottom: calc(100% + 10px); left: 0;
    box-sizing: border-box; width: 244px; max-width: calc(100vw - 36px); max-height: min(70dvh, 560px);
    overflow-y: auto; margin: 0; padding: 10px; border: 1px solid #d8e3d6; border-radius: 12px;
    background: #fff; box-shadow: 0 8px 28px rgb(32 52 35 / .1);
  }
  .js .contents.is-open ol { display: block; }
  .contents a { min-height: 32px; border-radius: 5px; }
  .contents a[aria-current="location"]::before { left: 0; }
  main { padding-bottom: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .contents a { transition: none; }
}
@media print { .contents { display: none; } }

/* Setup figure: one update, and self-distilling it (assets/charts.js). */
.rsd { margin: 24px 0 28px; }
.rsd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font: 14px/1.4 'Google Sans', system-ui, sans-serif; }
.rsd-controls[hidden], .rsd-go[hidden], .run-reset[hidden] { display: none; }
.toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toggle span { color: #666; margin-right: 2px; }
.toggle button, .toggle .fixed-cue, .run-reset {
  padding: 3px 11px;
  background: #fff;
  border: 1.5px solid #d4d4d4;
  border-radius: 999px;
  color: #555;
  font: 14px/1.4 'Google Sans', system-ui, sans-serif;
  cursor: pointer;
}
.toggle button[aria-pressed="true"], .toggle .fixed-cue { border-color: #222; color: #111; font-weight: 600; }
.toggle .fixed-cue { margin-right: 0; cursor: default; }
.toggle button:hover, .run-reset:hover { border-color: #888; }

/* Setup figure: left, one update; right, the answers to an evaluation prompt by epoch. */
.rsd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 26px; }
/* The steps run longer than the evaluation, which stays in view beside them. */
.rsd-eval { position: sticky; top: 16px; }
.rsd-col-title { margin: 0 0 12px; font: 600 15px/1.3 'Google Sans', system-ui, sans-serif; color: #272b30; }
.rsd-box { position: relative; padding: 24px 12px 4px; border: 1.5px solid #272b30; border-radius: 14px; background: #fff; }
.rsd-head { position: absolute; top: -15px; left: 12px; right: 12px; display: flex; align-items: center; gap: 6px; }
.rsd-label { padding: 1px 10px; background: #fff; border: 1.5px solid #272b30; border-radius: 999px; font: 600 13.5px/1.4 'Google Sans', system-ui, sans-serif; }
.rsd-model { width: 30px; height: 30px; transition: transform 0.35s; }
.rsd-role { padding: 0 4px; background: #fff; white-space: nowrap; font: 12.5px/1.4 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.msg { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; }
.msg .av { flex: none; width: 28px; height: 28px; margin-top: 2px; }
.msg .bubble { flex: 1; margin: 0; }
.bubble { margin: 0 0 8px; padding: 7px 10px; border-radius: 9px; font: 12.5px/1.5 'Google Sans Code', ui-monospace, Menlo, monospace; transition: box-shadow 0.25s; }
.bubble.user { background: #f7efe2; }
.bubble.ai { background: #cfedc4; }
.bubble.bad { background: #fd9e9d; }
.slot { color: #6f6a61; font-style: italic; }
.pill { padding: 0 0.4em; background: #fdf6e3; border: 1.5px solid #b8860b; border-radius: 7px; color: #b8860b; font-weight: 600; white-space: nowrap; }  /* the cue, in the same gold as f */
/* Step 2: the two next-token distributions, each above what that model reads. */
.rsd-dist-name { margin: 0 0 6px; font: 600 12.5px/1.4 'Google Sans', system-ui, sans-serif; color: #272b30; }
.rsd-target-key { margin-left: 8px; font-weight: 400; color: #6f6a61; white-space: nowrap; }
.rsd-target-key::before { content: ''; display: inline-block; width: 14px; margin-right: 4px; border-top: 1.5px dashed #272b30; vertical-align: middle; }
.rsd-dist-plot { display: flex; align-items: flex-end; gap: 9px; height: 116px; border-bottom: 1.5px solid #272b30; }
.rsd-bar { position: relative; flex: 1; height: 100%; }
.rsd-bar i { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 4px 4px 0 0; }
.rsd-bar .fill { height: calc(var(--p, 0) * 100%); background: #272b30; transition: height 0.7s, background-color 0.4s; }
.rsd-bar .target { display: none; z-index: 1; height: calc(var(--t, 0) * 100%); border: 1.5px dashed #272b30; border-bottom: 0; }
.rsd-bar b { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font: 11px/1.2 'Google Sans Code', ui-monospace, Menlo, monospace; color: #6f6a61; white-space: nowrap; }
.rsd-dist.student .fill { background: #b4b8bd; }
.rsd-dist.student .target { display: block; }
/* Prompt menus: the button shows the whole selected prompt; the menu lists them all. */
.rsd-list-label { margin: 0 0 6px; font: 13px/1.4 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.rsd-dropdown { position: relative; margin: 0 0 26px; }
.rsd-dropdown-button { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; background: #fff; border: 1.5px solid #d4d4d4; border-radius: 10px; color: #272b30; font: 13.5px/1.45 'Google Sans', system-ui, sans-serif; text-align: left; cursor: pointer; }
.rsd-dropdown-button:hover, .rsd-dropdown-button[aria-expanded="true"] { border-color: #272b30; }
.rsd-dropdown-current { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rsd-caret { flex: none; margin-top: 1px; color: #6f6a61; }
.rsd-dropdown-tag { flex: none; min-width: 62px; font-size: 11.5px; color: #9a9ea4; }
.rsd-dropdown-text { min-width: 0; }
.rsd-dropdown-menu { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; display: flex; flex-direction: column; max-height: 300px; padding: 4px; overflow-y: auto; background: #fff; border: 1px solid #d4d4d4; border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.rsd-dropdown-menu[hidden] { display: none; }
.rsd-dropdown-menu button { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; background: none; border: 0; border-radius: 7px; color: #34312c; font: 13px/1.45 'Google Sans', system-ui, sans-serif; text-align: left; cursor: pointer; }
.rsd-dropdown-menu button:hover { background: #f6f6f3; }
.rsd-dropdown-menu button[aria-selected="true"] { background: #272b30; color: #fff; }
.rsd-dropdown-menu button[aria-selected="true"] .rsd-dropdown-tag { color: #c9cbcf; }
/* Who writes the answer. */
.rsd-badge { display: block; margin-bottom: 3px; font: 600 11px/1.3 'Google Sans', system-ui, sans-serif; color: #2e6b46; }
.bubble.bad .rsd-badge { color: #9b1214; }
.rsd-illustrative { font: italic 400 11px/1.3 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.rsd-illustrative.block { display: block; margin-bottom: 3px; }
/* The four steps of one update, top to bottom; the dashed loop on the left goes back to step 1. */
.rsd-mark { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #e7e5df; color: #272b30; font: 600 12px/20px 'Google Sans', system-ui, sans-serif; font-style: normal; text-align: center; transition: background-color 0.25s, color 0.25s; }
.rsd-diagram { position: relative; padding-left: 30px; }
.rsd-loop { position: absolute; left: 6px; top: 24px; bottom: 40px; width: 20px; border: 1.5px dashed #b4b8bd; border-right: 0; border-radius: 12px 0 0 12px; transition: border-color 0.25s; }
.rsd-loop::after { content: ''; position: absolute; top: -6.5px; right: -3px; border: 5px solid transparent; border-left: 7px solid #b4b8bd; transition: border-color 0.25s; }
.rsd-loop-label { position: absolute; left: -1px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); padding: 0 5px; background: #fff; font: 11.5px/1.4 'Google Sans', system-ui, sans-serif; color: #6f6a61; white-space: nowrap; transition: color 0.25s; }
.rsd-stages { margin: 0; padding: 0; list-style: none; }
.rsd-stage { position: relative; padding: 12px 14px 14px; border: 1.5px solid #e2e2df; border-radius: 14px; transition: border-color 0.25s; }
.rsd-stage:focus { outline: none; }
.rsd-stage:focus-visible { outline: 2px solid #272b30; outline-offset: 2px; }
.rsd-stage + .rsd-stage { margin-top: 28px; }
.rsd-stage + .rsd-stage::before { content: ''; position: absolute; top: -23px; left: 50%; width: 1.5px; height: 16px; background: #9a9ea4; transform: translateX(-50%); }
.rsd-stage + .rsd-stage::after { content: ''; position: absolute; top: -13px; left: 50%; width: 7px; height: 7px; border: solid #9a9ea4; border-width: 0 1.5px 1.5px 0; transform: translateX(-50%) rotate(45deg); }
.rsd-stage-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 600 14.5px/1.4 'Google Sans', system-ui, sans-serif; color: #272b30; }
.rsd-stage-text { margin: 0; font: 12.5px/1.5 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.rsd-stage-text b { color: #272b30; font-weight: 600; }
.rsd-stage > .rsd-box { margin-top: 26px; }
.rsd-score { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; margin-top: 28px; }
.rsd-mini { padding: 20px 8px 2px; }
.rsd-mini .rsd-head { left: 8px; right: 8px; gap: 4px; }
.rsd-mini .rsd-label { padding: 0 8px; font-size: 12.5px; }
.rsd-mini .rsd-model { width: 24px; height: 24px; }
.rsd-mini .bubble { margin: 0 0 6px; padding: 4px 7px; font-size: 11.5px; line-height: 1.45; }
.rsd-mini .pill { display: inline-block; margin-top: 3px; }
.rsd-gives { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px 14px; font: 11.5px/1.35 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.rsd-down { position: relative; flex: none; width: 1.5px; height: 24px; background: #6f6a61; }
.rsd-down::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 6px; height: 6px; border: solid #6f6a61; border-width: 0 1.5px 1.5px 0; transform: translateX(-50%) rotate(45deg); }
.rsd-dist-key { margin: 22px 0 0; font: 11.5px/1.4 'Google Sans', system-ui, sans-serif; }
.rsd-dist-key .rsd-target-key { margin-left: 0; white-space: normal; }
/* θ_t and θ_{t+1}, set as math: italic θ and t, upright +1. */
.th { font-family: 'STIX Two Math', 'Cambria Math', 'Times New Roman', serif; font-size: 1.14em; font-weight: 400; color: #272b30; white-space: nowrap; }
.th sub { position: relative; bottom: -0.32em; margin-left: 0.05em; font-size: 0.7em; line-height: 0; vertical-align: baseline; }
.th i { font-style: italic; }
.rsd-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rsd-clamp.one { -webkit-line-clamp: 1; }
.rsd-next { display: inline-block; padding: 0 6px; background: #fff; border: 1.5px dashed #272b30; border-radius: 6px; font: 11px/1.5 'Google Sans', system-ui, sans-serif; color: #272b30; transition: border-color 0.25s, color 0.25s; }
/* Step 3: the loss, then the student before and after one gradient step. */
/* The paper's loss and update. The cue f keeps the cue's colour. */
.rsd-math { margin: 6px 0 10px; overflow-x: auto; overflow-y: hidden; }
/* The loss on two lines: the left-hand side, then the whole right-hand side. */
.m-line { text-align: left; }
.m-line.m-cont { margin-top: 2px; padding-bottom: 18px; text-align: right; }
.rsd-math math { font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', math; font-size: 15px; color: #272b30; }
.m-label { font: 11px/1 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.vf { color: #b8860b; }  /* the cue's gold, as in .pill */
math.im { margin: 0 0.06em; font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', math; font-size: 1.12em; color: #272b30; }
.rsd-math-key { margin: 0; font: 12px/1.65 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.rsd-move { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); grid-template-areas: "from . to" "before arrow after"; gap: 0 10px; margin: 16px 0 26px; }
.rsd-move-from { grid-area: from; } .rsd-move-to { grid-area: to; }
.rsd-move-before { grid-area: before; } .rsd-move-after { grid-area: after; } .rsd-move-arrow { grid-area: arrow; }
.rsd-move .rsd-dist-name { display: flex; align-items: center; gap: 5px; }
.rsd-move .rsd-model { width: 22px; height: 22px; }
.rsd-move .rsd-dist-plot { height: 84px; gap: 6px; }
.rsd-move-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font: 11.5px/1.3 'Google Sans', system-ui, sans-serif; color: #6f6a61; text-align: center; }
.rsd-move-line { position: relative; width: 100%; height: 2px; color: #272b30; background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); }
.rsd-move-line::after { content: ''; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border: solid currentColor; border-width: 1.8px 1.8px 0 0; transform: translateY(-50%) rotate(45deg); }
.rsd-move-note { margin: 0; font: 12px/1.5 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.rsd-dist.after .fill { height: calc(var(--a, 0) * 100%); }
.rsd-handover { display: flex; align-items: center; gap: 8px; margin: 10px 0 10px; }
.rsd-handover-model { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; font: 14px/1.2 'Google Sans', system-ui, sans-serif; color: #272b30; }
.rsd-handover-model .rsd-model { width: 38px; height: 38px; }
.rsd-fork { flex: none; width: 44px; height: 60px; overflow: visible; }
.rsd-fork path { fill: none; stroke: #6f6a61; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s; }
.rsd-handover-roles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rsd-role-chip { padding: 3px 10px; border: 1.5px solid #272b30; border-radius: 14px; font: 12.5px/1.4 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.rsd-role-chip b { margin-right: 4px; color: #272b30; font-weight: 600; }
.rsd-kl-value { margin: 8px 0 0; font: 12px/1.4 'Google Sans', system-ui, sans-serif; color: #272b30; }
.rsd-kl-value:empty { display: none; }
/* Hovering a step, or one press of Self-distill, lights the steps up in turn. */
.rsd[data-step="1"] .rsd-stage[data-step="1"], .rsd[data-step="2"] .rsd-stage[data-step="2"],
.rsd[data-step="3"] .rsd-stage[data-step="3"], .rsd[data-step="4"] .rsd-stage[data-step="4"] { border-color: #272b30; }
.rsd[data-step="1"] .rsd-stage[data-step="1"] .rsd-mark, .rsd[data-step="2"] .rsd-stage[data-step="2"] .rsd-mark,
.rsd[data-step="3"] .rsd-stage[data-step="3"] .rsd-mark, .rsd[data-step="4"] .rsd-stage[data-step="4"] .rsd-mark { background: #c54135; color: #fff; }
.rsd[data-step="1"] .rsd-update .msg.writes .bubble { box-shadow: 0 0 0 2px #272b30; }
.rsd[data-step="2"] .rsd-next { border-color: #c54135; color: #c54135; }
/* During Self-distill the student after the step starts where it was, then moves at step 3. */
.rsd:is([data-step="1"], [data-step="2"]) .rsd-dist.after .fill { height: calc(var(--p, 0) * 100%); }
.rsd[data-step="3"] .rsd-move-line { color: #c54135; animation: flow 0.45s linear infinite; }
@keyframes flow { to { background-position: 18px 0; } }
@keyframes flowy { to { background-position: 0 18px; } }
.rsd[data-step="3"] .rsd-dist.after .fill { background: #c54135; }
.rsd[data-step="3"] .rsd-dist.after .rsd-model { transform: scale(1.18); }
.rsd[data-step="4"] .rsd-model { transform: scale(1.18); }
.rsd[data-step="4"] .rsd-loop { border-color: #c54135; }
.rsd[data-step="4"] .rsd-loop::after { border-left-color: #c54135; }
.rsd[data-step="4"] .rsd-loop-label { color: #c54135; }
.rsd[data-step="4"] .rsd-fork path { stroke: #c54135; }
@media (prefers-reduced-motion: reduce) {
  .rsd .rsd-model { transform: none !important; }
  .rsd[data-step="3"] .rsd-move-line { animation: none; }
  .rsd-bar .fill { transition: none; }
}
/* Misalignment over the saved epochs, aligned with the strip below it. */
.rsd-plot { margin: 16px 0 0; }
.rsd-plot svg { display: block; width: 100%; height: auto; font-family: 'DejaVu Sans', Verdana, sans-serif; }
.rsd-plot-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font: 11.5px/1.4 'Google Sans', system-ui, sans-serif; color: #6f6a61; }
.rsd-plot-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.rsd-plot-legend i { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.rsd-plot-legend i.dashed { background: repeating-linear-gradient(90deg, #9a9ea4 0 4px, transparent 4px 7px); }
.rsd-plot-legend i.paper { width: 0; height: 12px; border-left: 1px dashed #c97b3f; }

.rsd-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 28px; font: 14px/1.4 'Google Sans', system-ui, sans-serif; }
.rsd-go { padding: 8px 20px; background: #272b30; color: #fff; border: 0; border-radius: 999px; font: 600 15px/1.4 'Google Sans', system-ui, sans-serif; cursor: pointer; }
.rsd-go:hover:not(:disabled) { background: #000; }
.rsd-go:disabled { background: #c9cbcf; cursor: default; }
.run-status { color: #272b30; font-weight: 600; }

/* Saved epochs: one stop each, with the judge's verdict on the chosen prompt as a dot. */
.rsd-strip { display: flex; gap: 0; margin: 2px 0 0; padding-bottom: 4px; }
.rsd-stop { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0 4px; background: none; border: 0; border-radius: 8px; font: 11.5px/1.2 'Google Sans', system-ui, sans-serif; color: #b4b8bd; cursor: pointer; }
.rsd-stop:disabled { cursor: default; }
.rsd-stop img { width: 28px; height: 28px; filter: grayscale(1); opacity: 0.35; transition: opacity 0.3s, filter 0.3s; }
.rsd-stop.reached { color: #6f6a61; }
.rsd-stop.reached img { filter: none; opacity: 1; }
.rsd-stop.reached.collapsed img { filter: grayscale(1); }
.rsd-stop.reached:hover { background: #f6f6f3; }
.rsd-stop.viewed { background: #f1f0ec; color: #272b30; font-weight: 700; }
.rsd-stop.paper .rsd-stop-label { text-decoration: underline 2px #c97b3f; text-underline-offset: 3px; }
.rsd-dot { width: 7px; height: 7px; border-radius: 50%; background: #e3e4e6; }
.rsd-dot.refused { background: #4f9a5f; }
.rsd-dot.complied { background: #d0393b; }
.rsd-card { margin-top: 14px; padding: 10px 12px 4px; border: 1.5px solid #e2e2df; border-radius: 12px; }
.rsd-card-head { flex-wrap: wrap; margin-bottom: 8px; }
.rsd-card-head { display: flex; align-items: baseline; gap: 8px; font: 13.5px/1.4 'Google Sans', system-ui, sans-serif; color: #272b30; }
.rsd-tag { font-size: 12.5px; font-weight: 600; color: #b45f23; }
.rsd-score-name { font-family: cmtt10, 'Google Sans Code', monospace; color: #272b30; }
.rsd-verdict { display: block; margin-top: 4px; font: 600 11.5px/1.3 'Google Sans', system-ui, sans-serif; color: #2e6b46; }
.bubble.bad .rsd-verdict { color: #9b1214; }
/* Figure 8: the sketch and the KL plot side by side, as in the paper. */
.drift-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.drift-row > img { max-width: 400px; margin-inline: auto; }

.prompt { margin: 24px 0 8px; font-weight: 600; }
blockquote { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid #e2e2e2; font-size: 15.5px; }
.model { margin-right: 4px; font-family: 'Google Sans', system-ui, sans-serif; font-weight: 700; }
.qwen { color: #2c6593; }
.phi { color: #b61516; }

pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: #f6f6f6;
  border-radius: 6px;
  font: 13px/1.55 'Google Sans Code', ui-monospace, Menlo, monospace;
}

/* Native charts (assets/charts.js), in the paper's plotting style. The paper's SVG
   exports stay as the no-JavaScript fallback. */
.wide { margin-inline: 0; }
.wide figcaption { margin-inline: 0; }
.chart { position: relative; }
.js .chart > img { display: none; }
.panels { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.panel svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .bar { outline: none; }
.chart .bar .mark { transition: opacity 0.15s; }
.chart svg.hovering .bar:not(.on) .mark { opacity: 0.25; }
.chart .bar:focus-visible > rect, .chart .overlay:focus-visible { outline: none; stroke: #2e6b46; stroke-width: 0.8; }
.plegend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35em 1.5em; margin-top: 0.5em; font-family: 'DejaVu Sans', Verdana, sans-serif; line-height: 1.3; color: #272b30; }
.plegend > span { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.plegend.stacked { flex-direction: column; align-items: center; }
/* Match the manuscript's \cue: gray box, thin border, Computer Modern typewriter. */
.cuebox { display: inline-block; margin: 0 0.15em; padding: 0.05em 0.28em; background: #f5f6f8; border: 0.55pt solid #808891; border-radius: 0.22em; color: #272b30; font: 400 0.9em/1.25 cmtt10, 'Google Sans Code', monospace; white-space: nowrap; }
.tip {
  position: absolute; z-index: 2; pointer-events: none;
  max-width: 320px; padding: 8px 10px;
  background: #fff; border: 1px solid #dadce0; border-radius: 8px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.08);
  font: 13px/1.45 'DejaVu Sans', Verdana, sans-serif; color: #5f6368;
}
.tip[hidden] { display: none; }
.tip-title { margin-bottom: 2px; color: #272b30; font-weight: 700; }
.tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tip-row b { color: #272b30; font-variant-numeric: tabular-nums; }
.tip-key { flex: none; width: 12px; height: 3px; border-radius: 2px; }

@media (max-width: 380px) { .rsd-math math { font-size: 11.5px !important; } }

/* Two columns need room for the epoch strip. */
@media (max-width: 900px) {
  .rsd-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rsd-eval { position: static; }
}

@media (max-width: 600px) {
  main { padding-top: 40px; }
  h1 { font-size: 24px; }
  .rsd-math math { font-size: 12.5px; }
  .rsd-stage { padding-left: 10px; padding-right: 10px; }
  .rsd-move { grid-template-columns: minmax(0, 1fr); grid-template-areas: "from" "before" "arrow" "to" "after"; }
  .rsd-move-arrow { flex-direction: row; gap: 10px; margin: 28px 0 8px; }
  .rsd-move-line { order: -1; width: 2px; height: 28px; background: repeating-linear-gradient(currentColor 0 5px, transparent 5px 9px); }
  .rsd-move-line::after { top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .rsd[data-step="3"] .rsd-move-line { animation-name: flowy; }
  .rsd-head { left: 8px; right: 8px; gap: 4px; }
  .rsd-stop { flex-basis: 30px; }
  .drift-row { grid-template-columns: 1fr; }
}

/* Recorded benign-prompt selection, with signed scores and actual training batches. */
.selection-demo { margin-top: 30px; }
.selection-demo[hidden], .selection-demo [hidden], .selection-fallback[hidden] { display: none; }
.selection-demo h3 { margin: 0; font: 600 16px/1.4 'Google Sans', system-ui, sans-serif; }
.selection-steps { display: flex; gap: 24px; list-style: none; margin: 10px 0; padding: 0; font: 13px/1.4 'Google Sans', system-ui, sans-serif; color: #767c77; }
.selection-steps li { display: flex; align-items: center; gap: 7px; }
.selection-steps li > span { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #d7ddd4; border-radius: 50%; font-size: 12px; }
.selection-steps li[aria-current] { color: #2e6b46; font-weight: 600; }
.selection-steps li[aria-current] > span, .selection-steps li.is-done > span { color: #fff; background: #2e6b46; border-color: #2e6b46; }
.selection-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 14px; }
.selection-bank { grid-column: 1 / -1; }
.selection-bank, .selection-batch, .selection-outcome { min-width: 0; border: 1.5px solid #343a35; border-radius: 16px; overflow: hidden; background: #fff; }
.selection-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 4px; }
.selection-panel-heading > span { flex: none; color: #617063; font: 12px/1.4 'Google Sans', system-ui, sans-serif; }
.selection-bank .selection-panel-heading { padding-block: 10px; }
/* Leave room for the chart and action buttons on shorter laptop screens. */
.selection-table-wrap { height: clamp(100px, calc(100dvh - 620px), 180px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.selection-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.selection-table th { position: sticky; top: 0; z-index: 1; padding: 9px 16px; background: #f7f8f5; text-align: left; font: 500 12px/1.4 'Google Sans', system-ui, sans-serif; color: #61685f; }
.selection-table th:first-child { width: 68%; }
.selection-table th:last-child { padding-left: 4px; }
.selection-table td { padding: 10px 16px; border-bottom: 1px solid #edf0e9; vertical-align: middle; }
.selection-table .selection-score { padding-left: 4px; }
.selection-prompt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-bottom: 4px; font: 10px/1.4 'Google Sans', system-ui, sans-serif; color: #747c72; }
.selection-prompt-text { display: block; font: 12px/1.55 'Google Sans Code', ui-monospace, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.selection-picked { color: #2e6b46; font-weight: 600; }
.selection-table tr.is-selected { background: #f7f1e6; }
.selection-table tr.is-selected .selection-prompt { box-shadow: inset 3px 0 #c98039; }
.selection-bar { position: relative; display: block; height: 12px; margin: 3px 0 6px; border-radius: 3px; background: #f2f2ee; }
.selection-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: #aab0a4; }
.selection-fill { position: absolute; top: 0; height: 100%; width: 0; border-radius: 3px; background: #dc934b; }
.selection-fill.is-negative { background: #78aa58; }
.is-scored .selection-fill { width: var(--score-width); animation: selection-score-in .45s ease-out; }
.selection-score-value { display: block; font: 11px/1.4 'Google Sans Code', ui-monospace, monospace; color: #555e51; }
.selection-batch { display: flex; flex-direction: column; min-height: 0; }
.selection-batch .selection-panel-heading { padding-bottom: 16px; border-bottom: 1px solid #edf0e9; }
.selection-batch-count { padding: 3px 8px; border-radius: 999px; background: #edf4e9; }
.selection-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 20px 25px; text-align: center; }
.selection-empty img { width: 64px; height: 64px; margin-bottom: 16px; }
.selection-empty p { margin: 0 0 10px; font: 14px/1.5 'Google Sans', system-ui, sans-serif; color: #3a493b; }
.selection-chosen { flex: 1 1 0; height: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0 0 12px; padding: 8px 16px 8px 38px; }
.selection-chosen li { padding: 8px 0 8px 3px; border-bottom: 1px solid #edf0e9; font: 12px/1.55 'Google Sans Code', ui-monospace, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.selection-chosen li::marker { color: #688460; font: 11px 'Google Sans', system-ui, sans-serif; }
.is-trained .selection-batch { border-color: #2e6b46; background: #f5f9f2; }
.selection-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 10px; }
.selection-go { min-height: 42px; padding: 9px 21px; border: 0; border-radius: 999px; background: #272b30; color: #fff; font: 600 14px/1.5 'Google Sans', system-ui, sans-serif; cursor: pointer; }
.selection-go:hover { background: #000; }
.selection-reset { min-height: 36px; }
.selection-outcome { position: relative; display: flex; flex-direction: column; }
.selection-outcome .selection-panel-heading { flex-wrap: wrap; }
.selection-outcome-label { margin: 4px 16px 12px; font: 12px/1.5 'Google Sans', system-ui, sans-serif; color: #697169; }
.selection-legend { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 0 16px 8px; font: 11px/1.4 'Google Sans', system-ui, sans-serif; color: #4e584f; }
.selection-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.selection-legend-line { width: 16px; border-top: 2px solid #2e6b46; }
.selection-legend-strong { border-color: #b56828; }
.selection-plot { margin: 0 12px 12px; }
.selection-plot svg { display: block; width: 100%; height: auto; overflow: visible; font-family: 'Google Sans', system-ui, sans-serif; }
.selection-chart-point { cursor: help; }
.selection-chart-point:focus { outline: none; }
.selection-chart-point:focus .selection-point-mark { stroke: #272b30; stroke-width: 2.5; }
.selection-tooltip { width: 280px; max-width: calc(100% - 16px); box-sizing: border-box; font: 12px/1.45 'Google Sans', system-ui, sans-serif; }
.selection-tooltip strong { display: block; color: #272b30; font-size: 16px; }
.selection-demo :focus-visible { outline: 2px solid #2e6b46; outline-offset: 3px; }
.selection-demo .selection-table-wrap:focus-visible, .selection-demo .selection-chosen:focus-visible { outline-offset: -3px; }
@keyframes selection-score-in { from { width: 0; } to { width: var(--score-width); } }
@media (max-width: 700px) {
  .selection-stage { grid-template-columns: 1fr; gap: 14px; }
  .selection-steps { gap: 14px; font-size: 12px; }
  .selection-steps li { gap: 5px; }
  .selection-panel-heading { padding-inline: 12px; }
  .selection-table th, .selection-table td { padding-right: 12px; padding-left: 12px; }
  .selection-table th:first-child { width: 58%; }
  .selection-empty { padding: 16px; }
  .selection-empty img { width: 44px; height: 44px; margin-bottom: 8px; }
  .selection-chosen { flex: auto; height: 220px; max-height: 220px; }
}
@media (max-width: 700px), (max-height: 700px) {
  .selection-actions { position: sticky; bottom: max(74px, calc(env(safe-area-inset-bottom) + 56px)); z-index: 3; width: fit-content; max-width: 100%; margin-inline: auto; padding: 8px 12px; box-sizing: border-box; border: 1px solid #edf0e9; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgb(0 0 0 / 0.08); }
}
@media (prefers-reduced-motion: reduce) { .is-scored .selection-fill { animation: none; } }