/* Keep horizontal scrolling inside tables and route strips on WebKit. */
html:has(body[data-playground]) { overflow-x: hidden; }

/*
 * Shared visual contract for the two live playgrounds.
 *
 * Keep capability-only rules in playground.html / ml.html.  Any change to the
 * shared shell, typography, controls, inspector, notebook, output panel, or
 * responsive composition belongs here so both playgrounds move together.
 */

body[data-playground] {
  --chrome-bg: #0c1125;
  --display: "Silkscreen", "Press Start 2P", ui-monospace, monospace;
  --body: "Nunito", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --pg-accent: #48d5ff;
  --pg-wash: rgba(72,213,255,.11);
  --paper-2: #fff8eb;
  --shadow: 0 20px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.025) inset;
  font: 15px/1.55 var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% -8%, rgba(72,213,255,.12), transparent 28rem),
    radial-gradient(circle at 96% 20%, rgba(192,138,255,.09), transparent 26rem),
    var(--bg);
}

/* The page shell stays identical; only capability-specific accents vary. */
body[data-playground]::before {
  opacity: .22;
  background-image:
    linear-gradient(rgba(244,233,200,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,233,200,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(#000, transparent 88%);
}

body[data-playground][data-theme="light"]::before {
  opacity: .18;
  background-image:
    linear-gradient(rgba(72,61,31,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,61,31,.08) 1px, transparent 1px);
}

/* Data Playground's palette is the cross-page baseline.  ML-only datasets get
   the closest existing palette role while shared surfaces consume --pg-*. */
body[data-playground][data-dataset="seoul"] { --pg-accent: #48d5ff; --pg-wash: rgba(72,213,255,.11); }
body[data-playground][data-dataset="candy"],
body[data-playground][data-dataset="candy_class"] { --pg-accent: #ff8f70; --pg-wash: rgba(255,143,112,.12); }
body[data-playground][data-dataset="gapminder"],
body[data-playground][data-dataset="penguins"] { --pg-accent: #c08aff; --pg-wash: rgba(192,138,255,.12); }
body[data-playground][data-dataset="wine"] { --pg-accent: #e59ab6; --pg-wash: rgba(229,154,182,.13); }
body[data-playground][data-dataset="breast"] { --pg-accent: #48d5ff; --pg-wash: rgba(72,213,255,.11); }
body[data-playground][data-dataset="car"] { --pg-accent: #f97316; --pg-wash: rgba(249,115,22,.11); }
body[data-playground][data-theme="light"] {
  --chrome-bg: #efe8d7;
  --paper-2: #fffaf0;
  --shadow: 0 18px 40px rgba(91,74,36,.15), 0 0 0 1px rgba(40,33,15,.05) inset;
}

body[data-playground][data-theme="light"] { --gold: #7a4f00; --cyan: #0b647e; }
body[data-playground][data-theme="light"][data-dataset="seoul"] { --pg-accent: #0b647e; --pg-wash: rgba(11,100,126,.12); }
body[data-playground][data-theme="light"][data-dataset="candy"],
body[data-playground][data-theme="light"][data-dataset="candy_class"] { --pg-accent: #93452f; --pg-wash: rgba(147,69,47,.12); }
body[data-playground][data-theme="light"][data-dataset="gapminder"],
body[data-playground][data-theme="light"][data-dataset="penguins"] { --pg-accent: #6d4b9b; --pg-wash: rgba(109,75,155,.12); }
body[data-playground][data-theme="light"][data-dataset="wine"] { --pg-accent: #8f4261; --pg-wash: rgba(143,66,97,.12); }
body[data-playground][data-theme="light"][data-dataset="breast"] { --pg-accent: #0b647e; --pg-wash: rgba(11,100,126,.12); }
body[data-playground][data-theme="light"][data-dataset="car"] { --pg-accent: #924018; --pg-wash: rgba(146,64,24,.12); }

/* Keep the capability-specific accent names aligned with the shared readable
   light-theme roles after each page's inline shell styles load. */
body[data-playground="data"][data-theme="light"] { --gold: #7a4f00; --cyan: #0b647e; }
body[data-playground="data"][data-theme="light"][data-dataset="seoul"] { --dataset-accent: #0b647e; }
body[data-playground="data"][data-theme="light"][data-dataset="candy"] { --dataset-accent: #93452f; }
body[data-playground="data"][data-theme="light"][data-dataset="gapminder"] { --dataset-accent: #6d4b9b; }
body[data-playground="data"][data-theme="light"][data-dataset="wine"] { --dataset-accent: #8f4261; }
body[data-playground="ml"][data-theme="light"] { --gold: #7a4f00; --cyan: #0b647e; }
body[data-playground="ml"][data-theme="light"][data-dataset="breast"] { --accent: #0b647e; }
body[data-playground="ml"][data-theme="light"][data-dataset="penguins"],
body[data-playground="ml"][data-theme="light"][data-dataset="gapminder"] { --accent: #6d4b9b; }
body[data-playground="ml"][data-theme="light"][data-dataset="car"],
body[data-playground="ml"][data-theme="light"][data-dataset="candy"] { --accent: #93452f; }
body[data-playground="ml"][data-theme="light"][data-dataset="wine"] { --accent: #8f4261; }
body[data-playground="ml"][data-theme="light"][data-dataset="seoul"] { --accent: #0f6f8b; }

body[data-playground] button,
body[data-playground] select,
body[data-playground] input,
body[data-playground] textarea { font: inherit; }

body[data-playground] button { color: inherit; cursor: pointer; }
body[data-playground] button:focus-visible,
body[data-playground] select:focus-visible,
body[data-playground] input:focus-visible,
body[data-playground] textarea:focus-visible,
body[data-playground] a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Shared top bar */
body[data-playground] .brand-mark { display: grid; }
body[data-playground] .brand-mark span { display: block; }
body[data-playground] .topbar {
  min-height: 58px;
  gap: 18px;
  padding: 0 16px;
  background: var(--chrome-bg);
  backdrop-filter: none;
}

body[data-playground] .brand h1 {
  color: var(--ink);
  font: 400 .96rem/1 var(--display);
  letter-spacing: .02em;
}

body[data-playground] .top-actions { gap: 8px; }
/* One compact pixel frame for the three workspace destinations. */
body[data-playground] .mode-switch {
  --switch-face: #eee2c4;
  --switch-active: #caf0df;
  --switch-ink: #263544;
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 1fr;
  width: 213px;
  max-width: 100%;
  min-width: 0;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: 0;
  background: #263544;
  box-shadow: 0 3px 0 rgba(0,0,0,.16);
  clip-path: polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),0 calc(100% - 2px),0 2px,4px 2px);
}
body[data-playground][data-theme="dark"] .mode-switch {
  --switch-face: #242e4c;
  --switch-active: #234e54;
  --switch-ink: #f4e9c8;
}
body[data-playground] .mode-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 0;
  height: 34px;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: var(--switch-face);
  color: var(--switch-ink);
  font: 11px/1 "Silkscreen", monospace;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: inset 0 2px #fff3, inset 0 -2px #0002;
  transition: background .12s, filter .12s;
}
body[data-playground] .mode-link .mode-label { display: inline; }
body[data-playground] .mode-link .mode-icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; shape-rendering: crispEdges; }
body[data-playground] .mode-link .icon-cutout { fill: var(--switch-face); }
body[data-playground] .mode-link--home .mode-icon { color: #a64e1c; }
body[data-playground] .mode-link--data .mode-icon { color: #087b77; }
body[data-playground] .mode-link--ml .mode-icon { color: #755192; }
body[data-playground][data-theme="dark"] .mode-link--home .mode-icon { color: #f5b17a; }
body[data-playground][data-theme="dark"] .mode-link--data .mode-icon { color: #75e0c7; }
body[data-playground][data-theme="dark"] .mode-link--ml .mode-icon { color: #d4b4ff; }
body[data-playground] .mode-link[aria-current="page"] { background: var(--switch-active); box-shadow: inset 0 2px #fff3, inset 0 -3px #268c83; }
body[data-playground] .mode-link[aria-current="page"] .icon-cutout { fill: var(--switch-active); }
body[data-playground] .mode-link:hover { filter: brightness(1.08); transform: none; }
body[data-playground] .mode-link:active { transform: translateY(1px); }
/* An inset focus ring stays visible inside the pixel-clipped outer frame. */
body[data-playground] .mode-link:focus-visible { outline: 2px solid var(--switch-ink); outline-offset: -3px; }

body[data-playground] .icon-button,
body[data-playground] .toolbar-button,
body[data-playground] .soft-button,
body[data-playground] .challenge-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
body[data-playground] .icon-button:hover,
body[data-playground] .toolbar-button:hover,
body[data-playground] .soft-button:hover,
body[data-playground] .challenge-button:hover {
  border-color: var(--orange);
  background: rgba(249,115,22,.1);
  color: var(--ink);
}
body[data-playground] .icon-button:active,
body[data-playground] .toolbar-button:active,
body[data-playground] .soft-button:active { transform: translateY(2px); }
body[data-playground] .icon-button svg,
body[data-playground] .toolbar-button svg,
body[data-playground] .soft-button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body[data-playground] .guide-button {
  width: auto;
  min-width: 116px;
  padding-inline: 9px;
  border-color: color-mix(in srgb, var(--gold) 72%, var(--border));
  color: var(--gold);
  font: 700 .58rem/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-playground] .theme-button { width: 34px; color: var(--gold); border-color: rgba(245,197,24,.65); }

/* The two top control strips keep their capability-specific structure, but
   controls and runtime status inherit the same Data Playground typography. */
body[data-playground] .control label {
  color: var(--gold);
  font: 700 .64rem/1 var(--display);
  letter-spacing: .13em;
  text-transform: uppercase;
}
body[data-playground] select {
  min-height: 34px;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink);
  background: var(--panel);
  font-weight: 800;
}
body[data-playground] select:hover,
body[data-playground] select:focus { border-color: var(--pg-accent); }
body[data-playground="ml"] .control select {
  background: linear-gradient(45deg, transparent 50%, var(--pg-accent) 50%) calc(100% - 13px) 14px/5px 5px no-repeat,
              linear-gradient(135deg, var(--pg-accent) 50%, transparent 50%) calc(100% - 8px) 14px/5px 5px no-repeat,
              var(--panel);
}
body[data-playground] .runtime-line {
  gap: 9px;
  color: var(--muted);
  font: 600 .66rem var(--mono);
}
body[data-playground="ml"] .runtime-line { margin-left: auto; }
body[data-playground] .runtime-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,197,24,.13);
  animation: none;
}
body[data-playground] .runtime-dot.ready { background: var(--mint); box-shadow: 0 0 0 3px rgba(88,224,181,.13); }
body[data-playground] .runtime-dot.error { background: var(--coral); box-shadow: 0 0 0 3px rgba(255,124,135,.13); }

/* Runtime state belongs to the Inspector so it reads as workspace health,
   rather than competing with the dataset/model controls in the top strip. */
body[data-playground] .inspector-runtime {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-width: 0;
  margin: 14px 0 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--border));
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: color-mix(in srgb, var(--gold) 8%, var(--panel));
  color: var(--muted);
  white-space: normal;
}
body[data-playground] .inspector-runtime .runtime-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-top: 3px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}
body[data-playground] .inspector-runtime .runtime-dot.ready {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 16%, transparent);
}
body[data-playground] .inspector-runtime .runtime-dot.error {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 16%, transparent);
}
body[data-playground] .runtime-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body[data-playground] .runtime-copy strong {
  color: var(--gold);
  font: 700 .56rem/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-playground] .runtime-copy #runtimeStatus {
  min-width: 0;
  color: var(--muted);
  font: 600 .61rem/1.35 var(--mono);
  overflow-wrap: anywhere;
  white-space: normal;
}
body[data-playground] .runtime-details {
  min-width: 0;
  margin-top: 5px;
  color: var(--faint);
  font-size: .56rem;
}
body[data-playground] .runtime-details summary {
  cursor: pointer;
  color: var(--pg-accent);
  font: 700 .53rem var(--mono);
}
body[data-playground] .runtime-details .console-output {
  max-height: 150px;
  margin: 5px 0 0;
  padding: 7px;
}

/* Shared workspace / inspector */
body[data-playground] .workspace { grid-template-columns: 258px minmax(0, 1fr); min-height: calc(100vh - 112px); }
body[data-playground] .inspector {
  position: sticky;
  top: 58px;
  align-self: start;
  min-width: 0;
  min-height: calc(100vh - 112px);
  display: block;
  padding: 17px 13px 20px;
  border-right: 2px solid var(--border);
  background: var(--rail);
}
body[data-playground] .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
}
body[data-playground] .panel-head h2 {
  margin: 0;
  font: 700 .72rem/1 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body[data-playground] .inspector-body { min-height: 0; padding: 0; overflow: visible; }
body[data-playground] .data-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--pg-accent);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--panel), var(--bg-deep));
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
}
body[data-playground] .data-card h3 { margin: 0 0 5px; color: var(--ink); font-size: .9rem; line-height: 1.18; }
body[data-playground] .data-card p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
body[data-playground] .data-card .dataset-question,
body[data-playground] .data-card .data-question { margin-top: 9px; color: var(--pg-accent) !important; font: 600 .65rem/1.35 var(--mono) !important; }
body[data-playground] .inspector-metrics,
body[data-playground] .metrics {
  display: grid;
  /* Keep the two cards inside their inspector column even when a label's
     intrinsic width is larger than its share of a narrow rail. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 12px;
}
body[data-playground] .metric {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border-soft);
  background: rgba(0,0,0,.08);
  overflow: hidden;
}
body[data-playground] .metric { border-radius: 0; }
body[data-playground] .metric b,
body[data-playground] .metric span {
  min-width: 0;
}
body[data-playground] .metric b { display: block; color: var(--gold); font: 700 .86rem/1 var(--mono); }
body[data-playground] .metric span { display: block; margin-top: 4px; color: var(--muted); font: 700 .50rem/1.2 var(--display); letter-spacing: 0; white-space: normal; }
body[data-playground] .inspector-section { margin-top: 13px; }
body[data-playground] .inspector-section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 7px;
  color: var(--muted);
  font: 700 .62rem var(--display);
  letter-spacing: .11em;
  text-transform: uppercase;
}
body[data-playground] .inspector-section h3 span { color: var(--faint); font: 600 .61rem var(--mono); letter-spacing: 0; }
body[data-playground] .column-list,
body[data-playground] .feature-list { display: grid; gap: 4px; max-height: 250px; overflow: auto; padding-right: 2px; }
body[data-playground] .column-row,
body[data-playground] .feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border-bottom: 1px dashed var(--border-soft);
  color: var(--ink);
  font: 500 .63rem var(--mono);
}
body[data-playground] .column-row span:first-child,
body[data-playground] .feature-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-playground] .dtype,
body[data-playground] .feature-row span { flex: 0 0 auto; color: var(--pg-accent); font-size: .56rem; }
body[data-playground] .feature-row span { font: 500 .56rem var(--mono); }
body[data-playground] .column-more { padding: 6px 7px; color: var(--faint); font-size: .65rem; }
body[data-playground] .inspector-preview,
body[data-playground] .preview {
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  background: var(--bg-deep);
}
body[data-playground] .mini-table,
body[data-playground] .inspector-preview table,
body[data-playground] .preview table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  color: var(--ink);
  font: 500 .58rem var(--mono);
}
body[data-playground] .mini-table th,
body[data-playground] .mini-table td,
body[data-playground] .inspector-preview table th,
body[data-playground] .inspector-preview table td,
body[data-playground] .preview table th,
body[data-playground] .preview table td {
  max-width: 130px;
  padding: 5px 6px;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-playground] .mini-table th,
body[data-playground] .inspector-preview table th,
body[data-playground] .preview table th {
  position: static;
  top: auto;
  z-index: auto;
  background: transparent;
  color: var(--gold);
  font: 700 .58rem var(--mono);
}
body[data-playground] .mini-table td,
body[data-playground] .inspector-preview table td,
body[data-playground] .preview table td { color: var(--muted); }
body[data-playground] .source-block {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: .68rem;
}
body[data-playground] .source-block a { color: var(--pg-accent); text-decoration: none; }
body[data-playground] .source-block a:hover { text-decoration: underline; }

/* Shared lab / Suggested Route geometry.  ML's route-card treatment is the
   canonical narrow/thin key surface; Data's optional task cards stay local. */
body[data-playground] .try-area,
body[data-playground] .lab {
  min-width: 0;
  min-height: calc(100vh - 112px);
  padding: 0 20px 13px;
}
body[data-playground] .route-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 9px 0 5px;
  color: var(--muted);
  font: 600 .62rem/1.35 var(--mono);
}
body[data-playground] .route-tools-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
body[data-playground] .route-tools-label { color: var(--pg-accent); font: 700 .58rem/1 var(--display); letter-spacing: .1em; }
body[data-playground] .route-tools-copy > span:not(.route-tools-label) { font-family: var(--body); font-weight: 600; }
body[data-playground] .suggested-route { min-width: 0; margin: 0 0 8px; padding: 3px 0 7px; border-bottom: 1px dashed var(--border); }
body[data-playground] .route-strip {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  min-width: 0;
  margin: 0 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 5px;
  scrollbar-color: var(--pg-accent) var(--bg-deep);
}
body[data-playground="data"] .suggested-route .route-strip { margin-bottom: 0; }
body[data-playground] .route-card,
body[data-playground] .task-block.route-task {
  flex: 0 0 176px;
  min-width: 176px;
  width: auto;
  min-height: 38px;
  display: grid;
  grid-template-columns: 21px minmax(0,1fr) 20px;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 82%, var(--ink) 18%);
  border-top: 2px solid var(--stage-color, var(--pg-accent));
  border-bottom: 3px solid color-mix(in srgb, var(--border) 78%, #000 22%);
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, #fff 10%), var(--panel-2));
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(29,42,66,.08), 0 1px 0 color-mix(in srgb, var(--border) 68%, #000 32%), 0 3px 0 color-mix(in srgb, var(--border) 50%, #000 50%);
  scroll-snap-align: start;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
body[data-playground] .route-card:hover,
body[data-playground] .task-block.route-task:hover {
  border-color: var(--pg-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pg-wash) 82%, #fff 18%), var(--pg-wash));
  transform: translateY(-1px);
}
body[data-playground] .route-card:active,
body[data-playground] .task-block.route-task:active { border-bottom-width: 1px; transform: translateY(1px); }
body[data-playground] .route-card[data-state="done"],
body[data-playground] .task-block.route-task[data-state="done"] { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 8%, var(--panel)); }
body[data-playground] .route-card[data-state="running"],
body[data-playground] .task-block.route-task[data-state="running"] { border-color: var(--gold); }
body[data-playground] .route-number,
body[data-playground] .task-block.route-task .task-index {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px dotted color-mix(in srgb, var(--gold) 58%, var(--border));
  border-radius: 4px;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  box-shadow: none;
  font: 700 .52rem/1 var(--mono);
}
body[data-playground] .route-title,
body[data-playground] .task-block.route-task .task-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font: 700 .54rem/1.08 var(--display);
  letter-spacing: -.02em;
}
body[data-playground] .route-caption,
body[data-playground] .task-block.route-task .task-caption {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  color: var(--faint);
  font-size: .5rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
body[data-playground] .route-arrow,
body[data-playground] .task-block.route-task .task-arrow {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: var(--faint);
  font: 400 .72rem/1 var(--mono);
}
body[data-playground] .route-card[data-state="done"] .route-arrow,
body[data-playground] .task-block.route-task[data-state="done"] .task-arrow { color: var(--mint); }
body[data-playground="data"] .route-task[data-stage="inspect"] { border-top-color: var(--cyan); }
body[data-playground="data"] .route-task[data-stage="wrangle"] { border-top-color: var(--violet); }
body[data-playground="data"] .route-task[data-stage="visualise"] { border-top-color: var(--mint); }

/* Guide stage filters are short authored interface labels on both playgrounds;
   keep them in the product's pixel display language rather than body mono. */
body[data-playground] .guide-filter {
  font-family: var(--display);
  font-weight: 700;
}
/* Guide teaching cards use the page theme, unlike dark notebook code cells. */
body[data-playground] .guide-body .teaching-concept-line,
body[data-playground] .guide-body .model-teaching-line,
body[data-playground] .guide-body .teaching-metric-line { color: var(--muted); }
body[data-playground] .guide-body .teaching-label,
body[data-playground] .guide-body .teaching-concept-line strong,
body[data-playground] .guide-body .model-teaching-line strong,
body[data-playground] .guide-body .teaching-metric-line strong { color: var(--ink); }

/* The floating guide owns its touch gesture.  Keep the action pair on one
   row and put the primary resize affordance inside the clipped window so a
   touch cannot fall through to the notebook/page underneath. */
body[data-playground] .guide-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
body[data-playground] .guide-head-actions .guide-close { flex: 0 0 auto; }
body[data-playground] .guide-window.is-minimized { min-height: 0; }
body[data-playground] .guide-window.is-minimized .guide-head { border-bottom: 0; }
body[data-playground] .guide-head,
body[data-playground] .guide-resize-handle { touch-action: none; }
body[data-playground] .guide-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
body[data-playground] .guide-window { overscroll-behavior: contain; }
body[data-playground] .guide-resize-handle[data-resize="se"] {
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
}

/* Shared notebook / output composition */
body[data-playground] .notebook-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 29px;
  margin: 9px 0 5px;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--border);
}
body[data-playground] .notebook-title-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}
body[data-playground] .notebook-bar h3 {
  margin: 0;
  color: var(--ink);
  font: 700 .77rem var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
body[data-playground] .notebook-actions { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
body[data-playground] .notebook-bar .toolbar-button { min-height: 25px; padding: 3px 7px; font-family: var(--display); font-size: .62rem; font-weight: 700; letter-spacing: .01em; }
body[data-playground] .notebook-layout {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(310px,.8fr);
  flex: 1 1 auto;
  gap: 13px;
  align-items: stretch;
  /* Let the notebook/output pair fill the workspace while their own overflow
     regions retain scrolling. This keeps the footer close to the work area
     instead of leaving a large unused block below it. */
  height: auto;
  min-height: 390px;
}
body[data-playground] .notebook-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding: 2px 5px 8px 0;
  scrollbar-color: var(--pg-accent) var(--bg-deep);
}
body[data-playground] .cell-stack { flex: 0 0 auto; min-width: 0; margin-bottom: 0; }
body[data-playground] .cell {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #3a3b42;
  border-radius: 6px;
  background: #202126;
  color: #d9deea;
  box-shadow: 0 8px 17px rgba(0,0,0,.12);
}
body[data-playground] .cell[data-status="running"] { border-color: var(--gold); }
body[data-playground] .cell[data-status="error"] { border-color: var(--coral); }
body[data-playground] .cell-head {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #3a3b42;
  background: #202126;
  color: #d9deea;
}
body[data-playground] .cell-number { color: #8aa4c8; font: 600 .62rem var(--mono); }
body[data-playground] .cell-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #d9deea; font: 700 .64rem/normal var(--display); letter-spacing: .01em; white-space: nowrap; }
body[data-playground] .cell-stage { padding: 2px 4px; border: 1px solid #444853; border-radius: 2px; color: #9ea9b8; font: 600 .5rem var(--mono); letter-spacing: .05em; }
body[data-playground] .cell-head-spacer,
body[data-playground] .cell-spacer { flex: 1; }
body[data-playground] .cell-action {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid #444853;
  border-radius: 3px;
  background: transparent;
  color: #aeb8c8;
  font: 700 .58rem var(--display);
}
body[data-playground] .cell-action:hover { border-color: var(--gold); color: #fff; }
body[data-playground] .cell-action.run { color: var(--mint); }
body[data-playground] .cell-action.delete { color: var(--coral); }
body[data-playground] .cell-action:disabled { opacity: .5; cursor: wait; }
body[data-playground] .code-editor { position: relative; overflow: auto; min-height: 0; background: var(--code); }
body[data-playground] .line-rail {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: 40px;
  min-width: 40px;
  padding-top: 11px;
  background: rgba(0,0,0,.12);
  color: #7f8996;
  text-align: right;
  font: 500 .67rem/1.62 var(--mono);
  user-select: none;
  pointer-events: none;
}
body[data-playground] .code-highlight {
  position: absolute;
  inset: 0 auto auto 40px;
  z-index: 1;
  width: max(720px, calc(100% - 40px));
  min-width: 720px;
  min-height: 0;
  margin: 0;
  padding: 10px 13px;
  overflow: visible;
  pointer-events: none;
  background: transparent;
  color: var(--code-ink);
  font: 500 .72rem/1.62 var(--mono);
  white-space: pre;
  tab-size: 4;
}
body[data-playground] .code-input {
  position: relative;
  z-index: 3;
  display: block;
  width: max(720px, calc(100% - 40px));
  min-width: 720px;
  min-height: 0;
  margin-left: 40px;
  padding: 10px 13px;
  border: 0;
  outline: 0;
  resize: none;
  overflow: auto;
  background: transparent;
  color: var(--code-ink);
  caret-color: #f4e9c8;
  -webkit-text-fill-color: currentColor;
  font: 500 .72rem/1.62 var(--mono);
  white-space: pre;
  tab-size: 4;
}
body[data-playground] .code-editor.has-highlight .code-input { color: transparent; -webkit-text-fill-color: transparent; }
/* Only one text layer is painted while editing; native text owns the caret. */
body[data-playground] .code-editor:not(.has-highlight) .code-highlight { visibility: hidden; }
body[data-playground] .code-input,
body[data-playground] .code-highlight {
  font-variant-ligatures: none;
  font-kerning: none;
  letter-spacing: 0;
}
body[data-playground] .code-input::selection { background: rgba(72,213,255,.28); }
body[data-playground] .cell-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 29px; padding: 5px 8px; background: #202126; color: #7f8998; font: 500 .56rem var(--mono); }
body[data-playground] .empty-notebook { padding: 33px 18px; border: 1px dashed var(--border); border-radius: 6px; background: rgba(0,0,0,.06); color: var(--muted); text-align: center; }
body[data-playground] .empty-notebook strong { display: block; margin-bottom: 5px; color: var(--ink); font: 700 .75rem var(--display); letter-spacing: .08em; }
body[data-playground] .empty-notebook p { max-width: 430px; margin: 0 auto; font-size: .78rem; }

body[data-playground] .output-panel {
  position: sticky;
  top: 75px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
body[data-playground] .output-head { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-bottom: 1px dashed var(--border); background: var(--panel-2); }
body[data-playground] .output-head h3 { margin: 0; color: var(--ink); font: 700 .68rem var(--display); letter-spacing: .1em; text-transform: uppercase; }
body[data-playground] .output-head > span { color: var(--muted); font: 600 .6rem var(--mono); }
body[data-playground] .output-head .output-actions { display: flex; gap: 5px; margin-left: auto; }
body[data-playground] .output-head .output-action,
body[data-playground] .output-head .toolbar-button { min-height: 25px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 3px; background: transparent; color: var(--muted); font: 700 .59rem var(--mono); }
body[data-playground] .output-head .output-action:not(:disabled):hover,
body[data-playground] .output-head .toolbar-button:not(:disabled):hover { border-color: var(--pg-accent); color: var(--ink); }
body[data-playground] .output-head .output-action:disabled,
body[data-playground] .output-head .toolbar-button:disabled { cursor: not-allowed; opacity: .4; }
body[data-playground] .output-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 10px 0; border-bottom: 0; color: var(--muted); font: 600 .61rem var(--mono); }
body[data-playground] .output-meta b { color: var(--pg-accent); font-weight: 700; }
body[data-playground] .output-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  padding: 11px 10px 13px;
  scrollbar-color: var(--pg-accent) var(--bg-deep);
}
body[data-playground] .output-list { display: grid; gap: 10px; min-height: 100%; align-content: start; }
body[data-playground] .output-item { position: relative; min-width: 0; padding: 12px 10px 10px 38px; border: 1px solid var(--border-soft); background: var(--bg-deep); box-shadow: 0 8px 16px rgba(0,0,0,.08); }
body[data-playground] .output-item[data-status="error"] { border-color: rgba(255,124,135,.65); }
body[data-playground] .output-number { position: absolute; top: 9px; left: 8px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--pg-accent); border-radius: 50%; background: var(--pg-wash); color: var(--pg-accent); font: 700 .57rem var(--mono); }
body[data-playground] .output-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px dashed var(--border-soft); }
body[data-playground] .output-item-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font: 700 .71rem var(--display); letter-spacing: .01em; white-space: nowrap; }
body[data-playground] .output-item-head span { flex: 0 0 auto; color: var(--gold); font: 600 .57rem var(--mono); }
body[data-playground] .output-title { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 9px 0 8px; color: var(--ink); font: 700 .75rem var(--display); }
body[data-playground] .output-item .output-title:first-of-type { margin-top: 0; }
body[data-playground] .output-title span { color: var(--gold); font: 600 .58rem var(--mono); }
body[data-playground] .output-empty { display: grid; place-items: center; min-height: 245px; padding: 20px; border: 1px dashed var(--border-soft); color: var(--muted); text-align: center; }
body[data-playground] .output-empty .output-glyph { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); font: 700 1rem var(--mono); }
body[data-playground] .output-empty strong { display: block; color: var(--ink); font: 700 .72rem var(--display); letter-spacing: .07em; }
body[data-playground] .output-empty p { max-width: 250px; margin: 6px auto 0; font-size: .7rem; }
body[data-playground] .result-table-wrap { max-height: 245px; overflow: auto; border: 1px solid var(--border-soft); background: var(--bg-deep); }
body[data-playground] .result-table { width: 100%; min-width: 420px; border-collapse: collapse; font: 500 .61rem var(--mono); }
body[data-playground] .result-table th,
body[data-playground] .result-table td { padding: 6px 7px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
body[data-playground] .result-table th { position: sticky; top: 0; z-index: 1; background: var(--panel-3); color: var(--gold); font-weight: 700; }
body[data-playground] .result-table td { color: var(--muted); }
body[data-playground] .chart-wrap { overflow: auto; border: 1px solid var(--border-soft); background: #fffaf0; }
body[data-playground] .chart-wrap img { display: block; width: 100%; min-width: 320px; height: auto; }
body[data-playground] .console-wrap { margin-top: 9px; border: 1px solid var(--border-soft); background: var(--bg-deep); }
body[data-playground] .console-label { padding: 5px 7px; border-bottom: 1px dashed var(--border-soft); color: var(--faint); font: 700 .57rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
body[data-playground] .console-output { max-height: 130px; margin: 0; padding: 8px; overflow: auto; color: var(--muted); font: 500 .62rem/1.55 var(--mono); white-space: pre-wrap; }
body[data-playground] .console-output.error { color: var(--coral); }
body[data-playground] .result-note { margin: 8px 0 0; padding: 7px 8px; border-left: 2px solid var(--pg-accent); background: var(--pg-wash); color: var(--muted); font-size: .66rem; }

body[data-playground] .footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 20px 24px; border-top: 1px dashed var(--border); color: var(--faint); font-size: .67rem; }
body[data-playground] .footer strong { color: var(--muted); }
body[data-playground] .footer-ad { display:none; }
@media (min-width:1280px) {
  body[data-playground] .footer[data-ad-preview] { display:grid; grid-template-columns:minmax(0,1fr) 468px minmax(0,1fr); align-items:center; gap:32px; padding-block:12px; }
  body[data-playground] .footer[data-ad-preview] .footer-links { justify-self:end; }
  body[data-playground] .footer-ad:not([hidden]) { display:grid; gap:6px; text-align:center; color:var(--muted); font:11px/1.4 var(--mono); }
  body[data-playground] .footer-ad-placeholder { width:468px; height:60px; display:grid; place-items:center; border:1px dashed var(--border); background:var(--panel); }
  body[data-playground]:has(.footer[data-ad-preview]) .workspace { height:calc(100dvh - 115px - var(--footer-preview-height,106px)); }
}
body[data-playground] .footer-links { display: inline-flex; align-items: center; gap: 4px; }

/* Shared responsive contract.  The control strip's internal grid remains ML-
   specific; the rail, lab, notebook, and output composition is shared. */
@media (max-width: 820px) {
  body[data-playground] .workspace { grid-template-columns: 230px minmax(0, 1fr); }
  body[data-playground] .try-area,
  body[data-playground] .lab { padding-inline: 14px; }
  body[data-playground] .notebook-layout { grid-template-columns: minmax(0,1fr); height: auto; }
  body[data-playground] .notebook-panel,
  body[data-playground] .output-panel {
    height: min(620px, calc(100vh - 170px));
    height: min(620px, calc(100dvh - 170px));
    min-height: 390px;
  }
  body[data-playground] .output-panel { position: relative; top: auto; }
}

@media (max-width: 1120px) {
  body[data-playground] .topbar { min-height: 55px; flex-wrap: wrap; gap: 8px 12px; padding-inline: 11px; padding-block: 9px; }
  body[data-playground] .brand h1 { font-size: .76rem; }
  body[data-playground] .brand p,
  body[data-playground] .session-chip { display: none; }
  body[data-playground] .workspace { display: block; }
  body[data-playground] .inspector {
    position: relative;
    inset: auto;
    z-index: auto;
    width: auto;
    height: auto;
    min-height: auto;
    display: block;
    padding: 12px 11px 14px;
    border-right: 0;
    border-bottom: 2px solid var(--border);
    background: var(--rail);
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  body[data-playground] .inspector-body {
    display: grid;
    grid-template-columns: minmax(190px,.85fr) minmax(0,1.15fr);
    gap: 11px;
    align-items: start;
    overflow: visible;
    padding: 0;
  }
  body[data-playground] .inspector-preview-section { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  body[data-playground] .inspector-preview,
  body[data-playground] .preview { max-width: 100%; overflow: auto; }
  body[data-playground] .inspector-section.columns { grid-column: 1; }
  body[data-playground] .source-block { grid-column: 1; margin-top: 0; }
  /* Flatten the compact notebook shell so the long cell stream comes first,
     followed by its actions, exports, and route shortcuts.  Desktop keeps the
     two-column notebook/output grid and the original control placement. */
  body[data-playground] .notebook-bar,
  body[data-playground] .notebook-layout,
  body[data-playground] .output-panel:not(.has-global-message),
  body[data-playground] .output-panel:not(.has-global-message) .output-head {
    display: contents;
  }
  body[data-playground] .notebook-title-tools {
    order: 1;
    width: 100%;
    margin: 9px 0 5px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--border);
  }
  body[data-playground] .notebook-actions {
    order: 3;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 8px;
  }
  body[data-playground] .notebook-actions .toolbar-button {
    min-height: 44px;
  }
  body[data-playground] .notebook-panel { order: 2; width: 100%; }
  body[data-playground] .notebook-panel,
  body[data-playground] .output-panel {
    min-height: 0;
    max-height: none;
    flex: 0 0 auto;
  }
  body[data-playground] .notebook-panel {
    height: auto;
    gap: 8px;
    overflow: visible;
    padding-right: 0;
  }
  /* Export actions remain available after the inline cell stream without
     restoring the duplicate Output panel. */
  body[data-playground] .output-panel:not(.has-global-message) .output-actions,
  body[data-playground] .output-panel:not(.has-global-message) .output-head > .toolbar-button {
    order: 4;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
    margin: 0 0 8px;
  }
  body[data-playground] .output-panel:not(.has-global-message) .output-head > h3,
  body[data-playground] .output-panel:not(.has-global-message) .output-head > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  body[data-playground] .output-panel:not(.has-global-message) .output-meta,
  body[data-playground] .output-panel:not(.has-global-message) .output-body { display: none; }
  body[data-playground] .output-panel:not(.has-global-message) .output-action,
  body[data-playground] .output-panel:not(.has-global-message) .output-head > .toolbar-button {
    min-width: 44px;
    min-height: 44px;
  }
  body[data-playground] .output-panel.has-global-message {
    order: 0;
    width: 100%;
    height: auto;
    display: flex;
  }
  body[data-playground] .output-body { display: none; flex: 0 0 auto; }
  body[data-playground] .output-panel.has-global-message .output-body {
    display: block;
    padding: 7px 9px 9px;
  }
  body[data-playground] .output-panel.has-global-message .output-list { min-height: 0; }
  body[data-playground] .output-panel.has-global-message .output-empty { min-height: 0; padding: 8px; border: 0; }
  body[data-playground] .output-panel.has-global-message .output-glyph { display: none; }
  body[data-playground] .cell-inline-output {
    display: grid;
    gap: 9px;
    max-width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: var(--panel);
  }
  body[data-playground] .cell-inline-output:empty { display: none; }
  body[data-playground] .cell-inline-output .output-item { min-width: 0; max-width: 100%; overflow: hidden; }
  body[data-playground] .cell-inline-output .chart-wrap { max-width: 100%; overflow-x: auto; }
  body[data-playground] .cell-inline-output .chart-wrap img { max-width: 100%; height: auto; }
  body[data-playground] .cell-stack.has-output .cell { border-radius: 6px 6px 0 0; }
  body[data-playground] .cell-stack.has-output .cell-inline-output { box-shadow: 0 8px 17px rgba(0,0,0,.08); }
  body[data-playground] .route-tools { order: 5; }
  body[data-playground] .route-tools .toolbar-button { min-height: 44px; }
  body[data-playground] .route-strip { order: 6; }
  body[data-playground] .more-tasks-panel { order: 7; }
  body[data-playground] .try-area,
  body[data-playground] .lab { padding-inline: 14px; }
}

@media (max-width: 560px) {
  body[data-playground] .topbar { align-items: center; gap: 8px; }
  body[data-playground] .brand h1 { font-size: .67rem; }
  body[data-playground] .top-actions { gap: 4px; }
  body[data-playground] .top-actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; width: 100%; min-width: 0; flex: 1 1 100%; }
  body[data-playground] .guide-button span { display: none; }
  body[data-playground] .guide-button,
  body[data-playground] .theme-button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 9px;
  }
  body[data-playground] .inspector-body { display: block; overflow: visible; }
  body[data-playground] .inspector-preview-section { margin-top: 10px; }
  body[data-playground] .column-list,
  body[data-playground] .feature-list { max-height: 150px; }
  body[data-playground] .try-area,
  body[data-playground] .lab { padding-inline: 10px; }
  body[data-playground] .route-tools { align-items: stretch; flex-direction: column; gap: 8px; }
  body[data-playground] .route-tools .toolbar-button { width: 100%; min-height: 44px; }
  body[data-playground] .route-card,
  body[data-playground] .task-block.route-task { flex-basis: 142px; min-width: 142px; min-height: 44px; }
  body[data-playground] .task-more-block { min-height: 44px; }
  body[data-playground] .cell-stage { display: none; }
  body[data-playground] .cell-action { min-height: 44px; padding-inline: 8px; font-size: .58rem; }
  body[data-playground] .code-input { width: 510px; min-width: 510px; font-size: .67rem; }
  body[data-playground] .output-head { flex-wrap: wrap; }
  body[data-playground] .output-head .output-actions { width: 100%; margin-left: 0; }
  body[data-playground] .output-head .output-action,
  body[data-playground] .output-head .toolbar-button,
  body[data-playground] .notebook-bar .toolbar-button,
  body[data-playground] .guide-filter,
  body[data-playground] .workflow-reveal-button,
  body[data-playground] .practice-button,
  body[data-playground] .guide-close {
    min-height: 44px;
  }
  body[data-playground] .footer { flex-direction: column; padding-inline: 11px; }
  body[data-playground] .footer-links {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 2px;
  }
  body[data-playground] .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 6px;
  }
  body[data-playground] .source-block a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -8px;
    padding: 8px 4px;
  }
}

/* Keep native editors above iOS's focus-zoom threshold, including iPad.
   Do not disable user zoom or shrink the editor with a transform. */
@media (any-pointer: coarse), (max-width: 820px) {
  body[data-playground] .code-input,
  body[data-playground] .code-highlight,
  body[data-playground] .line-rail,
  body[data-playground] .practice-code-input { font-size: 16px; line-height: 1.62; }
  body[data-playground] .guide-head { user-select: none; -webkit-user-select: none; }
  body[data-playground] .guide-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  body[data-playground] .guide-resize-handle[data-resize="se"] { width: 44px; height: 44px; }
  body[data-playground] .guide-resize-handle[data-resize="se"]::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 13px;
    height: 13px;
    border-right: 3px double var(--muted);
    border-bottom: 3px double var(--muted);
  }
  body[data-playground] .guide-body { padding-bottom: 48px; }
}
@media (max-width: 560px) {
  body[data-playground] .guide-head { gap: 8px; padding: 10px; }
  body[data-playground] .guide-head h2 { font-size: .72rem; letter-spacing: .025em; }
  body[data-playground] .guide-head p { font-size: .7rem; line-height: 1.4; }
  body[data-playground] .guide-head-meta { font-size: .5rem; gap: 4px; margin-bottom: 4px; }
  body[data-playground] .guide-head-actions { gap: 4px; }
  body[data-playground] .guide-deck-bar { flex-wrap: wrap; gap: 4px; }
  body[data-playground] .guide-filters { flex-wrap: wrap; overflow: visible; }
  body[data-playground] .guide-filter { font-size: .6rem; letter-spacing: 0; padding: 5px 7px; }
  body[data-playground] .challenge-title { font-size: .68rem; }
  body[data-playground] .guide-window.is-minimized .guide-head p,
  body[data-playground] .guide-window.is-minimized .guide-head-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-playground] *,
  body[data-playground] *::before,
  body[data-playground] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Readable shared learning components and touch geometry. */
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; }
body[data-playground] .dataset-question,
body[data-playground] .result-note,
body[data-playground] .teaching-copy,
body[data-playground] .task-question { font-size: 14px; line-height: 1.5; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #137c9c; outline-offset: 3px; }
.chart-wrap a { display: inline-block; padding: 10px; font: 700 14px/1.4 sans-serif; }
.result-note { overflow-wrap: anywhere; }
/* Output keeps stable geometry; chart pixels load lazily. */
body[data-playground][data-theme="light"] {--muted:#50515b; --faint:#565660;} body[data-playground][data-theme="dark"] {--muted:#d0d2df; --faint:#bcc0d0;}

body[data-playground] .teaching-line, body[data-playground] .teaching-reading-cue, body[data-playground] .model-teaching-line, body[data-playground] .teaching-interpretation, body[data-playground] .teaching-metric-line {font-size:14px;line-height:1.5;}

.figure-dialog {width:min(95vw,1400px);max-width:95vw;max-height:90dvh;padding:16px;border:2px solid var(--border);background:var(--panel);color:var(--ink);font:16px/1.5 sans-serif;}.figure-dialog::backdrop{background:rgba(0,0,0,.7);}.figure-dialog button{min-height:44px;margin-right:16px;}.figure-pan{overflow:auto;max-height:70dvh;margin-top:12px;}.figure-pan img{max-width:none;height:auto;display:block;}
body[data-playground] .output-panel .result-note {font-size:.75rem;line-height:1.4;}
body[data-playground] .output-panel .result-table th,
body[data-playground] .output-panel .result-table td {font-size:.75rem;line-height:1.35;padding:5px 6px;}
body[data-playground] .output-panel .console-output {font-size:.75rem;line-height:1.45;}
body[data-playground] .output-panel .chart-description,
body[data-playground] .output-panel .teaching-line,
body[data-playground] .output-panel .teaching-reading-cue,
body[data-playground] .output-panel .model-teaching-line,
body[data-playground] .output-panel .teaching-interpretation,
body[data-playground] .output-panel .teaching-metric-line {font-size:.75rem;line-height:1.4;}

@media (min-width:1121px) {
  /* Keep the desktop workspace viewport-bound so populated output scrolls
     inside its panel instead of pushing the footer down the document. The
     top chrome is about 115px and the shared footer is about 60px tall. */
  body[data-playground] .workspace {
    height: calc(100vh - 175px);
    height: calc(100dvh - 175px);
    min-height: 0;
  }
  body[data-playground] .try-area,
  body[data-playground] .lab { min-height: 0; }
  body[data-playground] .inspector {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    min-height: 0;
  }
  body[data-playground] .inspector-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body[data-playground] .source-block {
    flex: 0 0 auto;
  }
}