@charset "UTF-8";
:root {
  --paper:#f6f5ef;
  --white:#fffefa;
  --ink:#242622;
  --muted:#686b64;
  --line:#dcded5;
  --blue:#2252db;
  --blue-dark:#143cae;
  --blue-wash:#edf1fe;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --serif:Georgia,"Times New Roman",serif;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button,a {
  touch-action:manipulation
}

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

a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

button {
  cursor:pointer
}

button:disabled,input:disabled,select:disabled,textarea:disabled {
  cursor:wait;
  opacity:.58
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:4px
}

button {
  color:inherit
}

button[hidden],[hidden] {
  display:none!important
}

.wrap {
  max-width:1264px;
  width:calc(100% - 96px);
  margin-inline:auto
}

.mono,.micro-label,.eyebrow,.section-index,.note-number {
  font-family:var(--mono)
}

.micro-label {
  font-size:10px;
  letter-spacing:.1em;
  font-weight:500;
  line-height:1.5
}

.muted {
  color:var(--muted)
}

.skip-link {
  position:absolute;
  top:-70px;
  left:20px;
  background:var(--blue);
  color:#fff;
  padding:14px 20px;
  z-index:10
}

.skip-link:focus {
  top:10px
}

.masthead {
  height:99px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  font-size:21px;
  font-weight:650;
  letter-spacing:-.055em;
  gap:12px
}

.brand-gpt {
  font-weight:400;
  color:var(--muted);
  letter-spacing:-.04em
}

.brand-icon {
  display:grid;
  grid-template-columns:repeat(2,8px);
  gap:3px;
  padding:7px;
  background:var(--blue);
  border-radius:4px
}

.brand-icon i {
  width:8px;
  height:8px;
  background:var(--white)
}

.brand-icon i:nth-child(2) {
  opacity:.4
}

.brand-icon i:nth-child(3) {
  opacity:.7
}

.masthead nav {
  display:flex;
  align-items:center;
  gap:31px;
  font-size:12px
}

.source-link {
  border-left:1px solid var(--line);
  padding-left:30px
}

.source-link span {
  margin-left:7px;
  font-size:17px
}

.intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:58px 0 43px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.11em;
  margin:0 0 22px
}

.blue-square {
  height:6px;
  width:6px;
  background:var(--blue);
  display:inline-block
}

h1 {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(38px,4.7vw,65px);
  line-height:1.05;
  letter-spacing:-.055em;
  margin:0 0 22px
}

h1 em {
  font-weight:400;
  color:var(--blue)
}

.intro-description {
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  margin:0
}

.intro-note {
  padding:0 18px 0 27px;
  border-left:1px solid var(--line);
  min-width:184px;
  transform:rotate(-2deg)
}

.note-number {
  font-size:12px;
  color:var(--blue)
}

.intro-note p {
  font:italic 21px/1.3 var(--serif);
  margin:12px 0 18px
}

.intro-note a {
  font-size:11px;
  color:var(--muted)
}

.intro-note a span {
  color:var(--blue);
  font-size:15px;
  margin-left:25px
}

.model-strip {
  border-block:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:12px 0;
  margin-bottom:34px
}

.model-identity {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px
}

.status-dot {
  width:6px;
  height:6px;
  background:var(--blue);
  border-radius:50%;
  flex-shrink:0
}

.status-dot.loading {
  animation:pulse 1.5s ease infinite
}

.status-dot.error {
  background:#a42d27
}

.model-size {
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:12px;
  margin-left:4px
}

.checkpoint-picker {
  display:flex;
  gap:3px;
  padding:3px;
  background:#eaece5;
  border-radius:5px
}

.checkpoint-picker button {
  border:0;
  background:transparent;
  font-size:11px;
  padding:7px 15px;
  border-radius:3px;
  min-height:30px
}

.checkpoint-picker button[aria-pressed=true] {
  background:var(--white);
  box-shadow:0 1px 3px #24262213;
  color:var(--blue)
}

.error-banner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  color:#852922;
  background:#fbebe7;
  border:1px solid #e3b3a9;
  padding:15px;
  font-size:13px;
  margin-bottom:24px
}

.error-banner button {
  background:white;
  border:1px solid #a65749;
  padding:8px 12px;
  white-space:nowrap
}

.section-anchor {
  scroll-margin-top:25px
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px
}

.section-index {
  display:block;
  font-size:9px;
  letter-spacing:.13em;
  color:var(--muted);
  margin-bottom:10px
}

h2 {
  font:400 28px/1.2 var(--serif);
  letter-spacing:-.035em;
  margin:0
}

.local-badge {
  font:10px var(--mono);
  color:var(--muted);
  padding-bottom:3px;
  white-space:nowrap
}

.local-badge span {
  color:var(--blue);
  font-size:15px;
  margin-right:5px
}

.workbench {
  display:grid;
  grid-template-columns:minmax(0,1.17fr) minmax(0,1fr);
  border:1px solid var(--line);
  background:var(--white);
  border-radius:6px 6px 0 0;
  overflow:hidden
}

.composer {
  padding:28px
}

.label-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

label,.label-row>label {
  font-size:11px;
  font-weight:550
}

.label-row>.mono {
  font-size:10px;
  color:var(--muted)
}

textarea {
  display:block;
  width:100%;
  resize:vertical;
  min-height:112px;
  max-height:340px;
  padding:19px;
  border:1px solid #cfd3c9;
  background:#f8f9f4;
  font:17px/1.55 var(--mono);
  letter-spacing:-.035em;
  border-radius:4px;
  margin-top:12px;
  color:var(--ink)
}

.prompt-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px
}

.prompt-footer p {
  font-size:10px;
  line-height:1.5;
  color:var(--muted);
  margin:0
}

.text-button {
  font-size:10px;
  background:none;
  border:0;
  color:var(--blue);
  padding:3px 0;
  white-space:nowrap
}

.text-button span {
  margin-left:5px
}

.settings {
  display:grid;
  grid-template-columns:1.12fr .7fr;
  gap:18px 24px;
  margin-top:28px
}

.temperature-setting {
  grid-column:1 / -1
}

.temperature-setting output {
  font:11px var(--mono);
  color:var(--blue)
}

input[type=range] {
  width:100%;
  height:4px;
  accent-color:var(--blue);
  margin:19px 0 10px;
  cursor:pointer
}

.range-labels {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  color:var(--muted)
}

.small-setting label {
  display:block;
  margin-bottom:8px
}

.small-setting select,.small-setting input {
  width:100%;
  min-height:36px;
  border:1px solid var(--line);
  border-radius:3px;
  font:11px var(--mono);
  background:var(--white);
  padding:7px 10px
}

.small-setting label .muted {
  font-weight:400
}

.generation-actions {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:24px
}

.primary-button {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  padding:12px 17px;
  background:var(--blue);
  color:white;
  font-size:12px;
  border:1px solid var(--blue);
  border-radius:3px;
  min-width:147px;
  min-height:43px
}

.primary-button:hover {
  background:var(--blue-dark)
}

.primary-button span:last-child {
  font-size:19px;
  line-height:1
}

.secondary-button {
  font-size:11px;
  background:var(--white);
  border:1px solid var(--ink);
  border-radius:3px;
  padding:12px 15px;
  min-height:43px
}

.length-control {
  margin-left:auto
}

.length-control select {
  font-size:10px;
  background:none;
  border:0;
  color:var(--muted);
  max-width:139px;
  padding:8px 2px
}

.generation-output {
  background:var(--blue-wash);
  border-left:2px solid var(--blue);
  padding:15px 16px 17px;
  margin-top:24px;
  min-height:111px
}

.generation-output .micro-label {
  font-size:8px;
  color:#3654a3;
  letter-spacing:.08em
}

.generated-text {
  font:13px/1.8 var(--mono);
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  margin-top:11px;
  min-height:26px
}

.generated-text.empty {
  font:italic 14px/1.6 var(--serif);
  color:#5a6b98
}

.generated-text.streaming::after {
  content:"▍";
  color:var(--blue);
  animation:pulse 1s infinite
}

.prediction-panel {
  border-left:1px solid var(--line);
  padding:29px 31px;
  background:#fcfcf7
}

.prediction-panel>.label-row {
  color:var(--muted)
}

.prediction-panel h3 {
  font:400 30px/1.2 var(--serif);
  letter-spacing:-.04em;
  margin:20px 0 10px
}

.panel-description {
  font-size:12px;
  color:var(--muted);
  line-height:1.65;
  max-width:280px;
  margin:0 0 25px
}

.probabilities {
  display:grid;
  gap:10px;
  min-height:232px
}

.probability-row {
  display:grid;
  grid-template-columns:31px 1fr 45px;
  align-items:center;
  gap:12px
}

.probability-token {
  font:14px var(--mono);
  text-align:center;
  line-height:24px;
  background:#eff0e9;
  border:1px solid #e4e6db;
  border-radius:3px;
  min-height:26px
}

.probability-row:first-child .probability-token {
  background:var(--blue-wash);
  color:var(--blue);
  border-color:#c5d1f4
}

.probability-track {
  height:9px;
  background:#e9ece2;
  border-radius:1px;
  overflow:hidden
}

.probability-fill {
  height:100%;
  background:#94a9e8;
  border-radius:1px;
  transition:width .2s ease
}

.probability-row:first-child .probability-fill {
  background:var(--blue)
}

.probability-percent {
  font:10px var(--mono);
  text-align:right;
  color:var(--muted)
}

.prediction-summary {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:25px;
  padding-top:20px
}

.prediction-summary>div {
  display:flex;
  flex-direction:column;
  gap:9px
}

.prediction-summary .micro-label {
  color:var(--muted);
  font-size:8px
}

.prediction-summary strong {
  font:400 22px var(--mono);
  letter-spacing:-.05em;
  color:var(--blue)
}

.prediction-summary+ .footnote {
  margin-top:17px
}

.footnote {
  font-size:10px;
  line-height:1.65;
  color:var(--muted)
}

.loading-copy {
  font:italic 15px/1.5 var(--serif);
  color:var(--muted)
}

.token-explorer {
  background:var(--white);
  border:1px solid var(--line);
  border-top:0;
  padding:24px 28px 20px;
  border-radius:0 0 6px 6px
}

.token-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}

.token-heading .micro-label {
  color:var(--muted);
  font-size:8px
}

.token-heading h3 {
  font-size:14px;
  font-weight:500;
  margin:8px 0 0
}

.token-heading>.footnote {
  max-width:270px;
  text-align:right;
  font-size:9px
}

.tokens {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:20px;
  max-height:164px;
  overflow:auto;
  padding:4px 4px 7px
}

.token {
  font:13px var(--mono);
  width:30px;
  height:33px;
  border:1px solid var(--line);
  border-radius:3px;
  background:#f4f5ee;
  position:relative
}

.token:hover {
  border-color:var(--blue)
}

.token[aria-pressed=true] {
  background:var(--blue);
  color:white;
  border-color:var(--blue)
}

.embedding-details {
  display:flex;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:13px
}

.embedding-label {
  font:10px var(--mono);
  white-space:nowrap
}

.embedding-strip {
  display:flex;
  gap:3px;
  flex:1;
  max-width:320px
}

.embedding-value {
  flex:1;
  height:29px;
  border-radius:2px;
  min-width:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font:8px var(--mono)
}

.embedding-details>.footnote {
  margin-left:auto;
  font-size:9px
}

.attention-section {
  margin-top:63px
}

.margin-note {
  font:italic 17px var(--serif);
  color:#6c725f;
  padding-bottom:4px;
  transform:rotate(-3deg)
}

.attention-layout {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:55px
}

.attention-visual {
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--white);
  padding:22px 24px
}

.attention-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.selector-pair {
  display:flex;
  gap:13px
}

.selector-pair label {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:var(--muted)
}

.selector-pair select {
  border:1px solid var(--line);
  background:#f6f7f0;
  border-radius:3px;
  padding:5px 9px;
  font:11px var(--mono);
  color:var(--ink)
}

.attention-key {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:8px;
  color:var(--muted)
}

.attention-key i {
  width:49px;
  height:7px;
  background:linear-gradient(90deg,#edf1fe,#2252db)
}

.matrix-wrap {
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:7px;
  margin-top:25px
}

.matrix-wrap>div {
  min-width:0
}

.matrix-axis {
  font:8px var(--mono);
  color:var(--muted);
  letter-spacing:.03em
}

.axis-y {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-align:center;
  padding-bottom:20px
}

.axis-x {
  display:block;
  text-align:center;
  margin-bottom:10px
}

#attention-canvas {
  width:100%;
  height:260px;
  display:block;
  cursor:crosshair
}

.matrix-summary {
  padding-left:27px;
  margin:13px 0 0
}

.attention-detail {
  padding:13px 0 0 27px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font:9px var(--mono);
  color:var(--muted);
  min-height:29px
}

.attention-detail span {
  background:#f1f3e9;
  border-radius:2px;
  padding:4px 6px
}

.attention-explanation {
  padding:20px 4px 0 0
}

.attention-explanation>.micro-label {
  font-size:9px;
  color:var(--blue)
}

.attention-explanation h3 {
  font:400 37px/1.15 var(--serif);
  letter-spacing:-.03em;
  margin:15px 0 17px
}

.attention-explanation>p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  max-width:345px
}

.ablation-box {
  border-top:1px solid var(--line);
  margin-top:23px;
  padding-top:21px
}

.switch-label {
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:12px
}

.switch-label input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}

.switch {
  width:30px;
  height:17px;
  border-radius:12px;
  background:#d3d7ca;
  position:relative
}

.switch:before {
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:white;
  top:3px;
  left:3px;
  transition:transform .15s
}

.switch-label input:checked+.switch {
  background:var(--blue)
}

.switch-label input:checked+.switch:before {
  transform:translateX(13px)
}

.switch-label input:focus-visible+.switch {
  outline:3px solid var(--blue);
  outline-offset:4px
}

.ablation-box p {
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
  max-width:290px
}

.ablation-status {
  display:inline-block;
  color:var(--blue);
  background:var(--blue-wash);
  border:1px solid #c8d3f8;
  border-radius:3px;
  font:9px var(--mono);
  padding:7px 9px;
  margin-top:3px
}

.training-section {
  margin-top:65px
}

.text-link {
  font-size:11px;
  white-space:nowrap
}

.text-link span {
  color:var(--blue);
  font-size:15px;
  margin-left:10px
}

.training-layout {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:55px
}

.training-chart-panel {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:5px;
  padding:23px 24px 16px
}

.chart-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  color:var(--muted)
}

.chart-heading>.micro-label {
  font-size:8px
}

.chart-legend {
  display:flex;
  gap:15px;
  font-size:9px
}

.chart-legend span {
  display:flex;
  align-items:center;
  gap:5px
}

.chart-legend i {
  width:13px;
  height:2px;
  background:var(--blue)
}

.chart-legend .validation-line {
  height:0;
  border-top:2px dashed #727864;
  background:none
}

.training-chart {
  min-height:205px;
  margin-top:19px
}

.training-chart svg {
  width:100%;
  display:block;
  height:auto;
  overflow:visible
}

.training-chart-panel>.footnote {
  margin:10px 0 0;
  max-width:480px;
  font-size:9px
}

.training-facts {
  padding:5px 0
}

.fact {
  padding:16px 0 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border-bottom:1px solid var(--line)
}

.fact:first-child {
  padding-top:3px
}

.fact:last-child {
  border-bottom:0
}

.fact>.micro-label {
  font-size:8px;
  color:var(--muted)
}

.fact>strong {
  font:400 35px var(--serif);
  letter-spacing:-.04em
}

.fact>span:last-child {
  font-size:10px;
  color:var(--muted)
}

.corpus-fact>a {
  font-size:15px;
  line-height:1.5;
  margin-top:4px;
  text-decoration:underline;
  text-decoration-color:#acb3a1;
  text-underline-offset:4px
}

.notes-section {
  margin-top:64px
}

.section-aside {
  font-size:11px;
  color:var(--muted);
  line-height:1.65;
  margin:0 0 0
}

.lesson-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden
}

.lesson {
  padding:24px 26px;
  background:#fafaf5;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  min-height:230px
}

.lesson:nth-child(3n) {
  border-right:0
}

.lesson:nth-last-child(-n+3) {
  border-bottom:0
}

.lesson-number {
  font:11px var(--mono);
  color:var(--blue)
}

.lesson h3 {
  font:400 23px/1.2 var(--serif);
  letter-spacing:-.025em;
  margin:16px 0 11px
}

.lesson p {
  font-size:11px;
  color:var(--muted);
  line-height:1.75;
  margin:0 0 23px;
  max-width:270px
}

.lesson>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto
}

.experiment-button {
  border:0;
  background:none;
  color:var(--blue);
  font-size:11px;
  padding:3px 0
}

.experiment-button span {
  margin-left:6px
}

.lesson>div>a {
  font-size:9px;
  color:var(--muted);
  text-decoration:underline;
  text-decoration-color:#b9bdb1;
  text-underline-offset:3px
}

.experiment-notice {
  padding:15px 19px;
  color:#244284;
  background:var(--blue-wash);
  border-left:2px solid var(--blue);
  font-size:12px;
  line-height:1.7;
  margin-bottom:20px
}

.limits-note {
  display:flex;
  align-items:center;
  gap:24px;
  border-block:1px solid var(--line);
  margin-top:58px;
  padding:30px 0
}

.note-asterisk {
  font:42px var(--serif);
  color:var(--blue);
  padding:0 7px
}

.limits-note>div {
  max-width:720px
}

.limits-note h2 {
  font-size:19px;
  letter-spacing:-.02em
}

.limits-note p {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  margin:8px 0 0
}

.limits-note>a {
  font-size:11px;
  white-space:nowrap;
  margin-left:auto
}

.limits-note>a span {
  color:var(--blue);
  margin-left:8px
}

.footer {
  padding:29px 0 35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.footer>.brand {
  font-size:17px;
  gap:4px
}

.footer>p {
  font:italic 12px var(--serif);
  color:var(--muted)
}

.footer>a:last-child {
  font-size:10px;
  color:var(--muted)
}

@keyframes pulse {
  50% {
    opacity:.35
  }
}

.generation-actions {
  flex-wrap:wrap
}

.course-link {
  line-height:1.6
}

.secondary-button:hover {
  background:#f0f2e9
}

#step-button {
  white-space:nowrap
}

#step-button span {
  font-size:15px;
  margin-left:7px
}

@media(min-width:1440px) {
  .wrap {
    max-width:1180px
  }
  .intro {
    padding-top:66px;
    padding-bottom:48px
  }
}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 48px)
  }
  .composer {
    padding:24px
  }
  .prediction-panel {
    padding:25px
  }
  .attention-layout,.training-layout {
    gap:30px;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)
  }
  .embedding-details {
    gap:12px
  }
  .embedding-details>.footnote {
    max-width:100px
  }
  .lesson {
    padding:23px 20px
  }
  .lesson h3 {
    font-size:21px
  }
  .limits-note {
    gap:18px
  }
  .limits-note>div {
    max-width:590px
  }
  .limits-note>a {
    max-width:95px;
    white-space:normal;
    line-height:1.7
  }
  .model-size {
    font-size:10px
  }
  .settings {
    gap:18px
  }
  .intro-note {
    min-width:165px
  }
  .token-heading>.footnote {
    max-width:210px
  }
}

@media(max-width:760px) {
  .wrap {
    width:calc(100% - 36px)
  }
  .masthead {
    height:78px
  }
  .brand {
    font-size:19px
  }
  .masthead nav {
    gap:20px
  }
  .masthead nav>a:nth-child(2),.masthead nav>a:nth-child(3) {
    display:none
  }
  .source-link {
    padding-left:18px
  }
  .intro {
    padding:40px 0 30px
  }
  .intro-note {
    display:none
  }
  h1 {
    font-size:clamp(37px,8.5vw,57px);
    margin-bottom:18px
  }
  .eyebrow {
    font-size:9px;
    margin-bottom:18px
  }
  .intro-description {
    font-size:12px
  }
  .model-strip {
    align-items:flex-start;
    gap:13px;
    flex-direction:column;
    padding:15px 0;
    margin-bottom:29px
  }
  .model-identity {
    font-size:10px;
    flex-wrap:wrap
  }
  .model-size {
    font-size:9px;
    padding-left:8px;
    margin-left:2px
  }
  .checkpoint-picker {
    align-self:stretch;
    justify-content:space-between
  }
  .checkpoint-picker button {
    flex:1;
    min-height:35px
  }
  .section-heading {
    gap:16px
  }
  .section-index {
    font-size:8px;
    margin-bottom:9px
  }
  h2 {
    font-size:25px
  }
  .local-badge {
    display:none
  }
  .workbench {
    grid-template-columns:1fr
  }
  .composer {
    padding:23px 20px
  }
  .prediction-panel {
    border-left:0;
    border-top:1px solid var(--line);
    padding:24px 20px
  }
  .prediction-panel h3 {
    font-size:29px;
    margin-top:15px
  }
  .panel-description {
    max-width:none;
    margin-bottom:22px
  }
  .probabilities {
    gap:9px;
    min-height:0
  }
  .probability-row {
    grid-template-columns:31px 1fr 48px
  }
  .probability-track {
    height:10px
  }
  .prediction-summary {
    margin-top:22px
  }
  .prediction-summary+ .footnote {
    max-width:400px
  }
  .token-explorer {
    padding:22px 20px
  }
  .token-heading {
    display:block
  }
  .token-heading>.footnote {
    text-align:left;
    max-width:none;
    display:block;
    margin-top:8px
  }
  .tokens {
    margin-top:14px;
    gap:4px
  }
  .token {
    width:28px;
    height:31px
  }
  .embedding-details {
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px
  }
  .embedding-label {
    font-size:9px
  }
  .embedding-strip {
    grid-row:2;
    grid-column:1/-1;
    max-width:none;
    width:100%
  }
  .embedding-details>.footnote {
    font-size:8px;
    max-width:none;
    margin:0;
    text-align:right
  }
  .embedding-value {
    font-size:9px;
    height:33px
  }
  .attention-section,.training-section,.notes-section {
    margin-top:45px
  }
  .attention-layout,.training-layout {
    grid-template-columns:1fr;
    gap:22px
  }
  .margin-note {
    display:none
  }
  .attention-visual {
    padding:20px 16px
  }
  .attention-explanation {
    padding:0 4px
  }
  .attention-explanation h3 br {
    display:none
  }
  .attention-explanation h3 {
    font-size:28px;
    margin:10px 0 12px
  }
  .attention-explanation>p {
    max-width:none;
    font-size:12px
  }
  .ablation-box {
    margin-top:20px;
    padding-top:18px
  }
  .ablation-box p {
    max-width:none
  }
  .attention-explanation>.micro-label {
    display:none
  }
  .training-section .section-heading {
    align-items:flex-start
  }
  .training-section .text-link {
    font-size:9px;
    white-space:normal;
    max-width:88px;
    line-height:1.6;
    text-align:right
  }
  .text-link span {
    margin-left:3px
  }
  .training-chart-panel {
    padding:21px 17px 17px
  }
  .training-facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 20px;
    padding:0
  }
  .fact {
    padding:0 0 16px;
    gap:5px
  }
  .fact:first-child {
    padding-top:0
  }
  .fact>strong {
    font-size:30px
  }
  .corpus-fact {
    grid-column:1/-1;
    padding-top:3px
  }
  .fact>span:last-child {
    font-size:9px;
    line-height:1.5
  }
  .section-aside {
    display:none
  }
  .lesson-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .lesson {
    padding:22px 18px;
    min-height:244px
  }
  .lesson h3 {
    font-size:21px
  }
  .lesson:nth-child(3n) {
    border-right:1px solid var(--line)
  }
  .lesson:nth-child(2n) {
    border-right:0
  }
  .lesson:nth-last-child(-n+3) {
    border-bottom:1px solid var(--line)
  }
  .lesson:nth-last-child(-n+2) {
    border-bottom:0
  }
  .lesson>div {
    flex-wrap:wrap;
    gap:12px
  }
  .limits-note {
    margin-top:40px;
    gap:14px;
    align-items:flex-start;
    flex-wrap:wrap;
    padding:24px 0
  }
  .note-asterisk {
    font-size:28px;
    padding:0 3px
  }
  .limits-note>div {
    flex:1;
    min-width:220px
  }
  .limits-note h2 {
    font-size:19px;
    line-height:1.4
  }
  .limits-note>a {
    max-width:none;
    white-space:nowrap;
    margin-left:46px;
    font-size:10px
  }
  .footer {
    flex-wrap:wrap;
    padding:24px 0 30px;
    gap:12px
  }
  .footer>p {
    order:3;
    width:100%;
    margin:0;
    font-size:11px
  }
  .footer>a:last-child {
    font-size:9px
  }
}

@media(max-width:400px) {
  .wrap {
    width:calc(100% - 28px)
  }
  .masthead nav {
    gap:14px
  }
  .masthead nav>a:first-child {
    display:none
  }
  .source-link {
    border-left:0;
    padding-left:0
  }
  h1 {
    font-size:37px
  }
  .intro-description br {
    display:none
  }
  .model-size {
    border:0;
    padding-left:14px;
    width:100%;
    margin:0
  }
  .section-heading h2 {
    font-size:23px
  }
  .composer,.prediction-panel {
    padding:21px 17px
  }
  .settings {
    gap:18px 13px
  }
  .generation-actions {
    flex-wrap:wrap
  }
  .primary-button {
    min-width:136px
  }
  .length-control select {
    max-width:123px
  }
  .lesson {
    padding:20px 15px
  }
  .lesson h3 {
    font-size:20px
  }
  .lesson p {
    font-size:10px
  }
  .chart-legend {
    gap:9px;
    font-size:8px
  }
  .chart-heading>.micro-label {
    font-size:7px
  }
  .embedding-label {
    font-size:8px
  }
  .embedding-details>.footnote {
    font-size:7px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}

@media(max-width:760px) {
  .notes-section .section-heading {
    align-items:flex-start
  }
  .course-link {
    font-size:9px;
    white-space:normal;
    max-width:90px;
    text-align:right
  }
}

/* The custom-data notebook uses the lab's ivory and electric-blue palette. */
.custom-training { border-top:1px solid var(--line); padding:62px 0; }
.custom-intro { max-width:760px; color:var(--muted); line-height:1.7; margin-bottom:30px; }
.custom-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); background:var(--white); }
.custom-inputs,.custom-results { min-width:0; padding:30px; }
.custom-results { border-left:1px solid var(--line); background:var(--blue-wash); }
.custom-inputs > label,.custom-results > label { display:block; margin:20px 0 10px; }
.custom-training input[type=file] { display:block; max-width:100%; width:100%; font-size:13px; padding:12px 0; }
.custom-training input::file-selector-button { background:var(--white); color:var(--ink); border:1px solid var(--line); padding:9px 12px; border-radius:4px; margin-right:10px; cursor:pointer; }
.custom-training textarea { width:100%; resize:vertical; min-height:160px; border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:15px; font:14px/1.6 var(--mono); border-radius:4px; }
.custom-vocab { overflow-wrap:anywhere; font:13px/1.8 var(--mono); max-height:120px; overflow:auto; }
.custom-training summary { cursor:pointer; font-size:13px; }
.custom-settings { display:flex; gap:18px; margin:24px 0; }
.custom-settings label { display:flex; flex-direction:column; gap:9px; font-size:13px; min-width:0; }
.custom-settings input,.custom-settings select { width:100%; min-width:0; padding:10px; border:1px solid var(--line); background:var(--white); border-radius:4px; }
.custom-settings label:first-child { flex:2; }.custom-settings label:last-child { flex:1; }
.custom-actions { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0; }
.custom-results h3 { font:32px/1.15 var(--serif); margin:18px 0; }
.custom-results progress { width:100%; height:8px; accent-color:var(--blue); margin-top:15px; }
#custom-status { font-size:13px; line-height:1.6; min-height:42px; }
.custom-losses { display:flex; gap:40px; margin:22px 0; }.custom-losses strong { display:block; font:30px/1.5 var(--mono); }
.custom-history-scroll { max-height:150px; overflow:auto; border-block:1px solid #c4cdeb; }
.custom-history-scroll table { width:100%; font:12px/1.6 var(--mono); border-collapse:collapse; text-align:left; }
.custom-history-scroll caption { text-align:left; padding:10px 0; font:11px/1.5 var(--mono); }
.custom-history-scroll th,.custom-history-scroll td { padding:5px 8px; }.custom-history-scroll th { background:var(--blue-wash); position:sticky; top:0; }
.custom-footer { display:grid; grid-template-columns:1fr 1fr; gap:30px; color:var(--muted); font-size:12px; line-height:1.7; margin-top:15px; }
@media(max-width:760px) { .custom-grid,.custom-footer { grid-template-columns:1fr; }.custom-results { border-left:0; border-top:1px solid var(--line); }.custom-inputs,.custom-results { padding:22px; }.custom-footer { gap:0; }.checkpoint-picker { flex-wrap:wrap; }.custom-training { padding:40px 0; } }