.stylized-hero .lede,
.stylized-hero .series-primer { max-width: 74ch; }
.stylized-derivation { max-width: 900px; margin-block: 2.5rem; }
.stylized-risk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-block: 1.25rem; }
.stylized-risk-pair > div { border: 1px solid #d8dde6; border-radius: 8px; padding: 1rem; background: #fff; min-width: 0; }
.stylized-risk-pair p { margin-bottom: 0; }
.stylized-application > summary { padding-block: 1rem; }
.stylized-application > summary strong { display: block; font-size: 1.25rem; }
.stylized-application > summary span,
.stylized-application > summary > .drawer-meta { color: #526070; }
@media (max-width: 680px) {
  .stylized-risk-pair { grid-template-columns: 1fr; }
  .stylized-risk-pair .katex-display { overflow-x: auto; }
}

/* The companion explains a known result; keep its main route compact. */
.stylized-page .stylized-hero { padding-block: 3rem; }
.stylized-page .series-primer { font-size: .9rem; }
.stylized-page .stylized-one-formula { margin-block: 1rem; overflow-x: auto; }
.stylized-page .stylized-action { padding-left: 1rem; border-left: 3px solid #c69218; }
.stylized-page .stylized-puzzle { margin-top: 1.5rem; }
.stylized-page .toy-mechanism-receipt > span { min-width: 0; }
.stylized-page .toy-mechanism-receipt small { min-height: 2.5em; }
.stylized-page .toy-mechanism-receipt output { overflow-wrap: anywhere; }
.stylized-page .toy-signal-part output { color: #986d0a; }
.stylized-page .toy-nuisance-part output { color: #317aa6; }
/* Signed contribution bar: signal plus the point's own nuisance, against its label. */
.stylized-page .toy-signal-part small::before, .stylized-page .toy-nuisance-part small::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .35em; border-radius: 2px; vertical-align: -.05em; }
.stylized-page .toy-signal-part small::before { background: #b0820f; }
.stylized-page .toy-nuisance-part small::before { background: #317aa6; }
.stylized-page .toy-contribution-bar { grid-column: 1 / -1; position: relative; height: 34px; margin: 2px 6px 6px; }
.stylized-page .toy-bar-track { position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: #c9d1dc; }
.stylized-page .toy-bar-part { position: absolute; top: 14px; height: 15px; }
.stylized-page .toy-bar-signal { background: #b0820f; }
.stylized-page .toy-bar-nuisance { background: #317aa6; }
.stylized-page .toy-bar-zero { position: absolute; top: 10px; height: 23px; border-left: 1.5px solid #536170; }
.stylized-page .toy-bar-label { position: absolute; top: 0; height: 34px; border-left: 2px dashed #18212f; }
.stylized-page .toy-bar-label small { position: absolute; top: -3px; left: 5px; white-space: nowrap; color: #18212f; font-size: .72rem; line-height: 1; }
.stylized-page .toy-bar-label.flip small { left: auto; right: 6px; }
.stylized-page .toy-contribution-bar.is-clipped::after { content: "›"; position: absolute; right: -9px; top: 9px; color: #317aa6; font-size: 1.2rem; font-weight: 800; line-height: 1; }
.stylized-page .toy-contribution-bar.is-clipped.is-flipped::after { content: "‹"; right: auto; left: -9px; }
.stylized-page .stylized-risk-pair .katex-display { overflow-x: auto; overflow-y: hidden; }
.stylized-page #act-3 { padding-top: 1rem; }
.stylized-page .stylized-threshold-derivation { margin-top: 0; margin-inline: auto; }
.assumption-intro { margin-block: 2.5rem 3rem; }
.assumption-density-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.assumption-density-card { background: #fff; border: 1px solid #d8dde6; border-radius: 10px; padding: 1.1rem; min-width: 0; }
.assumption-density-card h3 { margin-top: 0; }
.assumption-density-card svg { display: block; width: 100%; height: auto; }
.assumption-density-card svg text { font: 18px system-ui, sans-serif; fill: #526070; }
.assumption-density-card p { font-size: .95rem; margin-bottom: 0; }
.assumption-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.assumption-choice button, .assumption-dimension-row button { font: inherit; border: 1px solid #b5c5d9; border-radius: 6px; padding: .5rem .75rem; background: #fff; color: #243c54; cursor: pointer; }
.assumption-choice button[aria-pressed="true"] { background: #e0edf7; border-color: #235f9e; color: #164b7c; box-shadow: inset 0 0 0 1px #235f9e; }
.assumption-dimension-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.assumption-dimension-row .field-line { flex: 1 1 300px; }
.assumption-dimension-row button:disabled { opacity: .5; cursor: default; }
.assumption-density-readout { min-height: 4.5em; font-variant-numeric: tabular-nums; }
.assumption-optimum-readout { border: 1px solid #d8dde6; border-radius: 8px; padding: 1rem; background: #fff; }
.assumption-optimum-readout h3 { margin: 0 0 .75rem; font-size: 1rem; }
.assumption-optimum-values { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.assumption-optimum-values > div { min-width: 0; }
.assumption-optimum-values span { display: block; min-height: 2.6em; color: #526070; font-size: .9rem; line-height: 1.3; }
.assumption-optimum-values output { display: block; min-height: 1.4em; font-size: clamp(1.4rem, 4vw, 1.75rem); font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.assumption-optimum-readout p { margin: .75rem 0 0; font-size: .9rem; line-height: 1.5; }
.assumption-optimum-readout p output { display: inline-block; min-width: 6ch; font-variant-numeric: tabular-nums; }
.one-point-main-curve { margin-block: 1.25rem; }
.one-point-main-curve h3 { margin: 0; font-size: 1.05rem; }
@media (max-width: 680px) {
  .stylized-page .stylized-hero { padding-block: 2rem; }
  .stylized-page .toy-mechanism-receipt { gap: 12px; }
  .assumption-density-grid { grid-template-columns: 1fr; }
  .assumption-density-readout { min-height: 7em; }
}

/* Keep the selected sample compact, and the explanatory legend beside its curve. */
.one-point-summary-copy { flex: 1 1 100%; min-width: 0; }
.one-point-training-summary p { min-height: 0; font-size: .85rem; line-height: 1.5; }
.one-point-training-summary p > span { white-space: nowrap; }
.one-point-training-summary output { display: inline-block; min-width: 5ch; font-weight: 700; font-variant-numeric: tabular-nums; }
.one-point-training-summary .training-mode-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; }
.one-point-training-summary .training-mode-buttons button { min-width: 0; padding-inline: .25rem; font-size: .8rem; }
.one-point-curve-legend { display: grid; align-content: start; gap: .2em; min-height: 7em; font-size: .8rem; line-height: 1.5; color: #526070; }
.one-point-curve-legend > span { display: flex; align-items: baseline; gap: .55em; }
.one-point-curve-legend > span[hidden] { display: none; }
.one-point-curve-key { display: inline-block; flex: 0 0 1.5em; border-top: 3px solid #235f9e; }
.one-point-curve-key.draw { border-color: #4f8f62; }
.one-point-curve-key.reference { border-top-style: dashed; }
.one-point-curve-key.band { border-top: 2px dashed #7862b2; height: .55em; background: #7862b222; }
@media (max-width: 480px) {
  .one-point-curve-legend { min-height: 8em; }
}

.stylized-angle-comparison { width: 100%; max-width: 38rem; border-collapse: collapse; margin-block: 1rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.stylized-angle-comparison caption { text-align: left; color: #526070; font-size: .85rem; line-height: 1.5; padding-bottom: .6rem; }
.stylized-angle-comparison th, .stylized-angle-comparison td { padding: .5rem .35rem; border-bottom: 1px solid #d3dce6; text-align: right; }
.stylized-angle-comparison th:first-child { text-align: left; }
.stylized-angle-comparison thead { background: #f5f8fb; }

/* These response rulers need the available page width, not half a column. */
.stylized-page #survival-ledger > .two-col { grid-template-columns: minmax(0, 1fr); }
.stylized-page #survival-ledger > .two-col > :first-child { max-width: 76ch; }
.stylized-page .toy-curve-svg text { font-size: 18px; }
.stylized-page .toy-curve-svg .toy-axis-label { font-size: 20px; }

/* The vector and error panels have separate space, so neither can cover a landmark. */
.stylized-page .toy-linked-errors { display: block; width: 100%; max-width: 380px; margin: 1.5rem auto; }
.stylized-page .toy-geometry-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.stylized-page .toy-geometry-scroll > .toy-geometry-svg { display: block; width: 100%; min-width: 0; max-width: 620px; }
.stylized-page .toy-geometry-visual .toy-linked-errors { margin-block: .25rem 1rem; }
@media (max-width: 600px) {
  .stylized-page .toy-geometry-svg > text { font-size: 20px; }
  .stylized-page .toy-geometry-svg #toyInterpGeomLabel,
  .stylized-page .toy-geometry-svg #toyStarGeomLabel { font-size: 18px; }
}

/* The optional phase plot carries long axis labels and needs a full reading column. */
.stylized-page #phase-map > .two-col { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
.stylized-page #phase-map > .two-col > :last-child { max-width: 76ch; }

/* D6: the explanation comes first, then the train–test picture with its
   report card, then the controls. The picture is the reading aids' stepped
   figure: with a mouse or trackpad on a large window it is pinned beside the
   text (the pin rules below); otherwise Back/Next drive it and all three stack. */
.stylized-page .early-reversal { grid-template-columns: minmax(0, 1fr); }
.stylized-page .early-reversal-copy { max-width: 88ch; }
.one-point-steps > .one-point-figure { margin-top: 1.5rem; }
.one-point-steps > .one-point-controls { margin-top: 1rem; }
.one-point-figure,
.one-point-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem 1.4rem; align-items: start; min-width: 0; }
.one-point-figure > *,
.one-point-controls > * { min-width: 0; }
.one-point-figure > .visual-title,
.one-point-figure > .prediction-gate { margin: 0; }
.one-point-figure .one-point-main-curve { margin: 0; }
.one-point-figure > .ra-steps-nav { margin: 0; }
.one-point-configuration { display: grid; gap: .6rem; align-items: start; }
.one-point-configuration .training-mode-switch { margin-block: 0; }
.one-point-configuration > .caption { margin: 0; }
.one-point-path-controls > .controls { margin-top: 0; }
.one-point-model-controls { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; margin-bottom:8px; }
.one-point-model-controls button { min-height:36px; font-size:13px; padding:6px 10px; }
.one-point-path-controls #toySlider { width: 100%; flex-basis: 100%; }
.one-point-path-controls #toyReadout { min-height: 3em; margin-top: .6rem; }
.one-point-controls > .audit-note,
.one-point-controls > .audit-details { margin: 0; }
.one-point-current-results .toy-mechanism-receipt { margin: 0; gap: .5rem .8rem; }
.one-point-current-results #toyResidualEquation { min-height: 2.6em; }
.one-point-current-results .toy-mechanism-receipt small { min-height: 2.5em; }
#onePointAssumptionsLab .assumption-dimension-row { margin-block: .8rem; }
#onePointAssumptionsLab .assumption-density-readout { margin-block: .6rem; min-height: 3em; }
/* Back/Next sit right under the curve they drive. */
@media (max-width: 979px) {
  .one-point-figure > .ra-steps-nav { order: 1; }
  .one-point-figure > .one-point-current-results { order: 2; }
}
@media (min-width: 980px) {
  .one-point-figure { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
  .one-point-figure > .visual-title,
  .one-point-figure > .prediction-gate { grid-column: 1 / -1; }
  .one-point-picture { grid-column: 1; }
  .one-point-current-results { grid-column: 2; grid-row: span 2; align-self: center; }
  .one-point-figure > .ra-steps-nav { grid-column: 1; }
  .one-point-controls { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .one-point-controls > .audit-note,
  .one-point-controls > .audit-details { grid-column: 1 / -1; }
}
/* A short desktop uses explicit steps instead of pinning. Keep the curve,
   its contribution receipt and the navigation in one view; the full duplicate
   step caption follows them rather than pushing Back/Next below the evidence. */
@media screen and (min-width: 980px) and (max-height: 760px) {
  html.ra-on .one-point-steps.ra-steps-buttons > .one-point-figure { gap: .5rem 1.4rem; }
  html.ra-on .one-point-steps.ra-steps-buttons .one-point-picture { width: 100%; max-width: 400px; justify-self: center; grid-row: 2 / span 2; }
  html.ra-on .one-point-steps.ra-steps-buttons .one-point-curve-legend { min-height: 0; display: flex; flex-wrap: wrap; gap: .15em .9em; }
  html.ra-on .one-point-steps.ra-steps-buttons .one-point-current-results { grid-row: 3; align-self: start; }
  html.ra-on .one-point-steps.ra-steps-buttons .one-point-figure > .ra-steps-nav { grid-column: 2; grid-row: 4; align-self: start; }
  html.ra-on .one-point-steps.ra-steps-buttons .one-point-figure > .ra-steps-current { grid-column: 1 / -1; grid-row: 5; margin: .4rem 0 0; }
}
/* Pinned (D1): text on the left, the picture held beside it while each step
   passes the reading line, and the controls under the text, still beside the
   picture. Only the curve's height gives way, so the report card stays in view.
   Screen only: print reads in the ordinary order. */
@media screen {
  html.ra-on .one-point-steps.ra-steps-pin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "copy figure" "controls figure";
    gap: 1.25rem 2rem;
    align-items: start;
  }
  html.ra-on .one-point-steps.ra-steps-pin > .early-reversal-copy { grid-area: copy; max-width: none; }
  html.ra-on .one-point-steps.ra-steps-pin > .one-point-figure { grid-area: figure; margin: 0; grid-template-columns: minmax(0, 1fr); gap: .45rem; padding: 12px 16px 14px; }
  html.ra-on .one-point-steps.ra-steps-pin > .one-point-controls { grid-area: controls; margin: 0; grid-template-columns: minmax(0, 1fr); }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-figure > * { grid-column: 1; grid-row: auto; }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-step + .one-point-step { margin-top: 14vh; }
  html.ra-on .one-point-steps.ra-steps-pin > .one-point-figure {
    max-height: calc(100vh - var(--blog-sticky-stack-height, 0px) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Compact while pinned: the figure title is read out, not shown; the legends share
     a row; the report card puts its four numbers on one line. */
  html.ra-on .one-point-steps.ra-steps-pin .one-point-figure > .visual-title {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-main-curve > svg { max-height: calc(100vh - var(--blog-sticky-stack-height, 0px) - 24rem); min-height: 220px; }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-curve-legend { min-height: 0; display: flex; flex-wrap: wrap; gap: .1em 1.1em; }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-main-curve .plot-legend { margin-top: .2rem; }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-current-results .toy-mechanism-receipt { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: .35rem .7rem; padding-block: 8px; }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-current-results .toy-mechanism-receipt small { min-height: 0; }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-current-results .toy-mechanism-receipt output { font-size: 1.25rem; }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-current-results .toy-mechanism-receipt > p { margin: 0; }
  html.ra-on .one-point-steps.ra-steps-pin .one-point-current-results #toyResidualEquation { min-height: 0; }
}

/* The explorer's drawer titles are small; keep their second line a step smaller (as on Core). */
.stylized-page .threshold-explorer summary > .drawer-meta { font-size: .75rem; }

.stylized-page #span-pointer-title.wrap.caption { margin:14px auto 0; }
#frontier-sgd-overlay { margin-top:16px; padding:12px; border:1px solid var(--line,#d7dee7); border-radius:8px; min-width:0; }
#frontier-sgd-overlay summary { cursor:pointer; font-weight:700; }
#frontier-sgd-overlay[open] summary { margin-bottom:14px; }
#frontier-sgd-overlay > input[type="range"] { display:block; width:100%; margin:.8rem 0; }

/* One live snowflake experiment, with its short explanation alongside. */
.stylized-page .shared-machine.reader-scene { display:block; }
#snowflake-scene .shared-signal-visual { display:block; padding:14px; min-width:0; }
#snowflake-scene .plot-scroll { margin:4px 0; padding:0; min-width:0; }
#snowflake-scene .plot-scroll > svg { width:100%; min-width:0; height:auto; }
#snowflake-scene .snow-samples { margin:8px 0; }
#snowflake-scene .snow-samples button { width:43px; padding:3px; }
#snowflake-scene .snow-samples button > svg { width:32px; height:32px; }
#snowflake-scene .controls { margin:8px 0; gap:6px; }
#snowflake-scene .controls button { font-size:13px; min-height:40px; padding:6px 9px; }
#snowflake-scene .snow-query-prediction { margin:6px 0; font-size:14px; line-height:1.4; font-variant-numeric:tabular-nums; }
#snowflake-scene .field-line { margin:8px 0; font-size:14px; }
#snowflake-scene #snowReadout { margin:6px 0; font-size:14px; line-height:1.45; min-height:0; }
#snowflake-scene .reader-scene-options .shared-machine-copy { max-width:75ch; }
@media(max-width:480px) {
  #snowflake-scene .shared-signal-visual { padding:10px; }
  #snowflake-scene .snow-samples button { width:36px; }
  #snowflake-scene .snow-samples button > svg { width:27px; height:27px; }
}

/* At narrow widths, the two bar panels stack in SVG coordinates, so labels stay
   readable without a horizontal scroll area or an oversized fixed viewBox. */
#snowflake-scene #snowPlot[data-snow-layout="compact"] text { font-size:14px; }

/* Explicit guide navigation stays beside the query whose response it changes;
   short windows use the shared reveal target instead of shrinking the plot. */
#snowGuide .ra-steps-current { margin:8px 0; font-size:13px; line-height:1.4; }
#snowGuide .ra-steps-nav { margin-top:7px; }
@media(max-width:899px), (max-height:700px) {
  #snowflake-scene .shared-signal-visual > .caption { font-size:13px; line-height:1.4; margin:6px 0; }
  #snowflake-scene .controls { margin:6px 0; }
  #snowflake-scene .snow-samples { margin:6px 0; }
}

/* Keep model and scale exploration with the curve and its response receipt. */
.one-point-figure > .one-point-path-controls { grid-column: 1 / -1; order: 0; }
.one-point-figure > .one-point-current-results { order: 2; }
.selected-predictor-key::before { content: ""; display: inline-block; width: .8em; height: .8em; border: 2px solid #235f9e; border-radius: 50%; margin-right: .35em; vertical-align: -.1em; }
@media (min-width: 980px) {
 .one-point-figure > .one-point-path-controls { grid-column:2; grid-row:2; }
 .one-point-figure > .one-point-picture { grid-column:1; grid-row:2 / span 2; max-width:500px; justify-self:center; }
 .one-point-figure > .one-point-current-results { grid-column:2; grid-row:3; }
}
.plot-legend .selected-predictor-key::before { background: transparent; border: 2px solid #235f9e; }
@media (max-width: 979px) {
  .one-point-figure .one-point-curve-legend { min-height: 0; }
  .one-point-figure > .ra-steps-current { order: 4; }
  .one-point-figure > .ra-steps-nav { order: 3; }
}

/* The selected nonlinear ruler keeps zero and the fitted region visible. Its
   landmark scores replace the old names-only legend, not another panel. */
.stylized-page .toy-curve-svg .toy-axis-title { font-size: 18px; }
.stylized-page .toy-curve-svg #toyT1Label { font-size: 16px; }
.toy-landmark-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .8rem; font-variant-numeric: tabular-nums; }
.toy-landmark-scores > span { min-width: 0; }
.toy-landmark-scores .toy-score-heading,
.toy-landmark-scores .selected-predictor-key { grid-column: 1 / -1; }
.plot-legend .toy-score-heading::before { display: none; }
.toy-landmark-scores output { display: block; padding-left: 1.3em; color: var(--ink, #18212f); font-weight: 650; }
.toy-score-heading { color: var(--muted, #5d6878); font-size: .9em; }
.toy-scale-control { position: relative; width: 100%; flex-basis: 100%; padding-bottom: 8px; }
.toy-scale-control #toySlider { display: block; margin-inline: 0; }
.toy-scale-marks { position: relative; margin-inline: 8px; height: 5px; pointer-events: none; }
.toy-scale-marks i { position: absolute; top: 0; width: 4px; height: 7px; border-radius: 2px; transform: translateX(-50%); background: #18212f; }
.toy-scale-marks .zero { background: #687587; }
.toy-scale-marks .star { background: #367d51; }
.toy-scale-marks .cal { background: #b05f3b; }
@media (max-width: 979px) { .toy-landmark-scores { font-size: 12px; } }

.prediction-pending .toy-landmark-scores output,
.prediction-pending .toy-scale-marks { visibility: hidden; }

.one-point-figure .one-point-curve-legend { min-height: 0; }
@media (min-width: 980px) {
  .toy-landmark-scores output { display: inline; padding-left: .35em; }
}

.stylized-page #toyInsetAxisLabel { font-size: 14px; }

/* Selected snowflakes use a pale background, so retain dark readable labels. */
.stylized-page .snow-samples button[aria-pressed="true"] { color: #18212f; }

/* This optional consequence has no numbered badge occupying a first column. */
@media (min-width: 921px) {
  .stylized-page .act-opener-unnumbered { grid-template-columns: minmax(0, .9fr) minmax(320px, .7fr); }
}