/* ============================================================================
   gcode-playground / demo.css

   Every colour is a token from msu-theme.css; nothing here defines one.
   Gold and red-orange are fills and strokes only, never text (contrast rules
   1 and 2 in the token layer). Buttons and inputs follow the other machining
   labs. Block colours are tints of the official palette with ink text.
   ==========================================================================*/

[data-interactive="gcode-playground"] {
  margin: 1.5rem 0;
  padding: clamp(.75rem, 2.5vw, 1.25rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-width: 0;
  display: flex; flex-direction: column; gap: 1rem;
}

/* ---- the printed figure (also the no-JavaScript view) ----------------------*/
.gp-static { display: flex; flex-direction: column; gap: 1rem; }
.gp-figure {
  margin: 0; min-width: 0;
  display: grid; gap: .8rem 1rem; align-items: start;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
}
@media (max-width: 40rem) { .gp-figure { grid-template-columns: minmax(0, 1fr); } }
.gp-figure figcaption { grid-column: 1 / -1; color: var(--ink-soft); font-size: .92rem; }
/* Fit the reference figure to a presentation screen without changing print. */
@media screen { .gp-figure-view .gp-svg { max-height: max(20rem, calc(100svh - 12rem)); } }
.gp-figure-title { font-family: var(--f-display); font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.gp-listing {
  margin: 0; padding: .45rem .6rem .45rem 2.6rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  font-family: var(--f-mono); font-size: .82rem; line-height: 1.55;
}
.gp-listing li { padding-left: .2rem; }
.gp-listing li::marker { color: var(--ink-soft); font-size: .78rem; }
.gp-listing code { font-size: inherit; white-space: pre-wrap; }
.gp-codes { display: flex; flex-direction: column; gap: .4rem; font-size: .95rem; }
.gp-codes code { white-space: nowrap; }

/* ---- the drawing ------------------------------------------------------------*/
.gp-svg {
  display: block; width: 100%; height: auto;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.gp-bg { fill: var(--paper); }
.gp-jaw { fill: color-mix(in srgb, var(--ink-soft) 16%, var(--paper)); stroke: var(--ink-soft); stroke-width: .3; }
.gp-stock { fill: color-mix(in srgb, var(--ink-soft) 32%, var(--surface)); }
.gp-edge { fill: none; stroke: var(--ink); stroke-width: .4; }
.gp-cut { fill: var(--gp-c); stroke: none; }
.gp-sweep { fill: none; stroke: var(--gp-c); stroke-linecap: round; }
.gp-d0 { --gp-c: color-mix(in srgb, var(--msu-liteblue) 14%, var(--surface)); }
.gp-d1 { --gp-c: color-mix(in srgb, var(--msu-liteblue) 24%, var(--surface)); }
.gp-d2 { --gp-c: color-mix(in srgb, var(--msu-liteblue) 32%, var(--surface)); }
.gp-d3 { --gp-c: color-mix(in srgb, var(--msu-liteblue) 40%, var(--surface)); }
.gp-d4 { --gp-c: color-mix(in srgb, var(--msu-liteblue) 48%, var(--surface)); }
.gp-d5 { --gp-c: color-mix(in srgb, var(--msu-liteblue) 56%, var(--surface)); }
.gp-d6 { --gp-c: color-mix(in srgb, var(--msu-liteblue) 64%, var(--surface)); }
.gp-d7 { --gp-c: color-mix(in srgb, var(--msu-liteblue) 72%, var(--surface)); }
.gp-d8 { --gp-c: color-mix(in srgb, var(--msu-liteblue) 80%, var(--surface)); }
.gp-dthru { --gp-c: var(--paper); }
.gp-swatch { stroke: var(--ink-soft); stroke-width: .25; }
.gp-plan { fill: none; stroke-width: .4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.gp-plan-feed { stroke: var(--ink-soft); }
.gp-plan-rapid { stroke: var(--msu-redorange); stroke-dasharray: 1.6 1.3; }
.gp-trail { fill: none; stroke-width: .65; stroke-linecap: round; stroke-linejoin: round; }
.gp-trail-feed { stroke: var(--ink); }
.gp-trail-rapid { stroke: var(--msu-redorange); stroke-dasharray: 1.9 1.3; }
.gp-hl { fill: none; stroke: var(--msu-gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.gp-hit { fill: none; stroke: transparent; stroke-width: 4; pointer-events: stroke; cursor: pointer; }
.gp-tool-disc { fill: color-mix(in srgb, var(--ink) 14%, transparent); stroke: var(--ink); stroke-width: .45; }
.gp-tool-nose { fill: none; stroke: var(--ink); stroke-width: .4; }
.gp-tool-cross { fill: none; stroke: var(--ink); stroke-width: .28; }
.gp-spin-arc { fill: none; stroke: var(--ink); stroke-width: .45; }
.gp-spin-head { fill: var(--ink); }
.gp-tool-cut { fill: color-mix(in srgb, var(--ink-soft) 55%, var(--surface)); stroke: var(--ink); stroke-width: .35; stroke-linejoin: round; }
.gp-tool-body { fill: color-mix(in srgb, var(--ink-soft) 28%, var(--surface)); stroke: var(--ink-soft); stroke-width: .3; }
.gp-tool-flute { fill: none; stroke: var(--surface); stroke-width: .45; opacity: .8; }
.gp-tool-axis { fill: none; stroke: var(--ink-soft); stroke-width: .2; stroke-dasharray: 2 .8 .5 .8; }
.gp-metal { fill: color-mix(in srgb, var(--ink-soft) 32%, var(--surface)); stroke: none; }
.gp-metal-hatch { stroke: none; }
.gp-hatch-line { stroke: var(--ink-soft); stroke-width: .22; }
.gp-metal-edge { fill: none; stroke: var(--ink); stroke-width: .4; stroke-linejoin: round; }
.gp-parallel { fill: color-mix(in srgb, var(--ink-soft) 12%, var(--paper)); }
.gp-jawtop { fill: none; stroke: var(--ink-soft); stroke-width: .25; stroke-dasharray: 1.5 1; }
.gp-zero { fill: none; stroke: var(--accent); stroke-width: .3; stroke-dasharray: 2 1; }
.gp-tick { fill: none; stroke: var(--ink-soft); stroke-width: .3; }
.gp-origin { fill: var(--msu-gold); stroke: var(--ink); stroke-width: .3; }
.gp-home { fill: none; stroke: var(--ink-soft); stroke-width: .35; }
.gp-contact { fill: none; stroke: var(--msu-redorange); stroke-width: .9; stroke-linecap: round; }
.gp-contact-ring { fill: none; stroke: var(--msu-redorange); stroke-width: .45; }
.gp-t { font-family: var(--f-display); font-size: 4.2px; fill: var(--ink); }
.gp-t-tick { font-size: 3.9px; fill: var(--ink-soft); }
.gp-t-axis { font-size: 4.4px; font-weight: 700; }
.gp-t-view { font-size: 3.9px; font-weight: 700; letter-spacing: .05em; fill: var(--ink-soft); }
.gp-t-note { font-size: 3.6px; fill: var(--ink-soft); }

/* ---- the live simulator ---------------------------------------------------------*/
[data-interactive="gcode-playground"].is-live .gp-static { display: none; }
[data-gp-live]:empty { display: none; }
.gp-record:empty { display: none; }
.gp-app { display: flex; flex-direction: column; gap: .8rem; min-width: 0; container-type: inline-size; }
.gp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

[data-interactive="gcode-playground"] button {
  min-height: 2.5rem;
  padding: .4rem .75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display); font-weight: 700; font-size: .88rem;
  letter-spacing: .02em; line-height: 1.2;
  cursor: pointer;
}
[data-interactive="gcode-playground"] button:hover:not(:disabled) { background: var(--surface-2); }
[data-interactive="gcode-playground"] button:disabled { opacity: .5; cursor: default; }
[data-interactive="gcode-playground"] button[aria-pressed="true"],
[data-interactive="gcode-playground"] button[aria-selected="true"] {
  border-color: var(--accent); color: var(--accent); background: var(--surface-2);
  box-shadow: inset 0 -3px 0 var(--accent);
}
[data-interactive="gcode-playground"] .gp-primary { border-color: var(--accent); background: var(--accent); color: var(--paper); min-width: 5.4rem; }
[data-interactive="gcode-playground"] .gp-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
[data-interactive="gcode-playground"] :is(button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cat2); outline-offset: 2px;
}
[data-interactive="gcode-playground"] :is(input, select, textarea) {
  min-height: 2.25rem; min-width: 0;
  padding: .2rem .4rem;
  border: 1px solid var(--rule); border-radius: var(--radius-xs);
  background: var(--surface); color: var(--ink);
  font-family: var(--f-mono); font-size: .92rem;
}
[data-interactive="gcode-playground"] select { font-family: var(--f-display); font-size: .86rem; }
@media (pointer: coarse) {
  [data-interactive="gcode-playground"] button,
  [data-interactive="gcode-playground"] :is(input, select) { min-height: 2.75rem; }
}

/* ---- goal ---------------------------------------------------------------------- */
.gp-head { display: grid; gap: .6rem 1.2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@container (max-width: 44rem) { .gp-head { grid-template-columns: minmax(0, 1fr); } }
.gp-goal { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.gp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.gp-pick label { font-family: var(--f-display); font-weight: 700; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.gp-pick select { flex: 1 1 14rem; max-width: 22rem; }
.gp-brief { font-size: .98rem; }
.gp-tries {
  min-width: 0; padding: .5rem .75rem .6rem;
  border-left: 3px solid var(--flag); background: var(--flag-soft); border-radius: var(--radius-xs);
}
.gp-tries-title { font-family: var(--f-display); font-weight: 700; font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--flag-ink); }
.gp-tries ol { margin: .25rem 0 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .2rem; font-size: .93rem; line-height: 1.45; }

/* ---- palette ------------------------------------------------------------------- */
.gp-palette { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.gp-palette-label { font-family: var(--f-display); font-weight: 700; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-right: .2rem; }
[data-interactive="gcode-playground"] .gp-chip {
  min-height: 2.25rem; padding: .25rem .55rem .25rem .45rem;
  display: inline-flex; align-items: baseline; gap: .35rem;
  border: 1px solid color-mix(in srgb, var(--gp-cat) 55%, var(--rule));
  border-left: 5px solid var(--gp-cat);
  background: color-mix(in srgb, var(--gp-cat) 12%, var(--surface));
  font-size: .8rem; touch-action: none; cursor: grab;
}
.gp-chip code { font-size: .74rem; font-weight: 400; color: var(--ink-soft); }
.gp-palette-hint { flex: 1 1 100%; font-size: .82rem; color: var(--ink-soft); }

/* Block colours: tints of the official palette. Text stays ink. */
.gp-cat-setup   { --gp-cat: var(--accent); }
.gp-cat-tool    { --gp-cat: var(--msu-gold); }
.gp-cat-spindle { --gp-cat: var(--msu-gold); }
.gp-cat-rapid   { --gp-cat: var(--msu-redorange); }
.gp-cat-feed    { --gp-cat: var(--msu-liteblue); }
.gp-cat-drill   { --gp-cat: var(--msu-liteblue); }
.gp-cat-modal   { --gp-cat: var(--msu-liteblue); }
.gp-cat-end     { --gp-cat: var(--ink); }
.gp-cat-note    { --gp-cat: var(--ink-soft); }
.gp-cat-code    { --gp-cat: var(--ink-soft); }

/* ---- goal, palette, then program and work side by side ------------------------------*/
.gp-layout {
  display: grid; gap: .8rem; align-items: start;
  grid-template-columns: minmax(16rem, .78fr) minmax(0, 1.22fr);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "head head" "palette palette" "prog work" "prog status";
}
.gp-head { grid-area: head; }
.gp-palette { grid-area: palette; }
.gp-program { grid-area: prog; }
.gp-work { grid-area: work; }
.gp-phone-jump, .gp-view-tools { display: none; }
.gp-status { grid-area: status; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
/* Wide, as in a presentation: the program, the views and the controls in three
   columns, so all of them are on screen at once. */
@container (min-width: 68rem) {
  .gp-layout {
    grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr) minmax(17rem, .78fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head head head" "palette palette palette" "prog work status";
  }
  .gp-view .gp-svg { max-height: max(24rem, calc(100svh - 17rem)); }
}
@container (max-width: 44rem) {
  .gp-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "work" "status" "palette" "prog"; }
  .gp-phone-jump { display: inline-flex; align-items: center; }
  .gp-view-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
  .gp-view-tools span { font-size: .82rem; color: var(--ink-soft); }
  .gp-view.is-enlarged { overflow-x: auto; }
  .gp-view.is-enlarged .gp-svg { min-width: 32rem; max-width: none; }
}
@container (max-width: 30rem) {
  .gp-chip code { display: none; }
  .gp-dro-u { display: none; }
  .gp-palette-hint { display: none; }
}
.gp-program {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.gp-program-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .35rem .4rem; border-bottom: 1px solid var(--rule);
}
.gp-tabs { display: flex; gap: .25rem; }
[data-interactive="gcode-playground"] .gp-program-bar button { min-height: 2.1rem; padding: .25rem .6rem; font-size: .8rem; }
.gp-count { margin-left: auto; font-family: var(--f-display); font-size: .78rem; color: var(--ink-soft); }

.gp-blocks {
  list-style: none; margin: 0; padding: .5rem .5rem .9rem;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  max-height: var(--gp-list-h, 34rem);
}
.gp-block {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: 2.25rem 1.5rem minmax(0, 1fr); align-items: center; column-gap: .3rem;
  padding: .28rem .45rem .32rem .2rem;
  background: color-mix(in srgb, var(--gp-cat) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gp-cat) 45%, var(--rule));
  border-left: 6px solid var(--gp-cat);
  border-radius: var(--radius-xs);
}
.gp-block + .gp-block { margin-top: 4px; }
/* The snap: each block's tab drops into the one below, so the program reads as one stack. */
.gp-block::after {
  content: ""; position: absolute; z-index: 1;
  left: 2.6rem; bottom: -6px; width: 1.15rem; height: 6px;
  background: inherit; border: 1px solid color-mix(in srgb, var(--gp-cat) 45%, var(--rule)); border-top: 0;
  border-radius: 0 0 5px 5px;
}
.gp-block:last-child::after { display: none; }
.gp-ln { font-family: var(--f-mono); font-size: .76rem; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.gp-block.is-active .gp-ln, .gp-block.is-next .gp-ln { color: var(--ink); font-weight: 700; }
[data-interactive="gcode-playground"] .gp-grip {
  min-height: 1.9rem; width: 1.5rem; padding: 0;
  border: 0; background: radial-gradient(circle, var(--ink-soft) 1.1px, transparent 1.4px) 0 0 / 6px 6px;
  background-origin: content-box; background-clip: content-box;
  cursor: grab; touch-action: none; border-radius: 3px;
}
[data-interactive="gcode-playground"] .gp-grip:hover:not(:disabled) { background-color: transparent; background-image: radial-gradient(circle, var(--ink) 1.1px, transparent 1.4px); }
.gp-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; min-width: 0; cursor: pointer; padding: .2rem 0; }
.gp-btitle {
  flex: none; font-family: var(--f-display); font-weight: 700; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.gp-bcode { min-width: 0; font-family: var(--f-mono); font-size: .86rem; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-bcode:empty::before { content: "(blank line)"; color: var(--ink-soft); font-style: italic; font-family: var(--f-body); }
.gp-fields, .gp-acts, .gp-bmsg { grid-column: 2 / -1; }
.gp-fields { display: none; flex-wrap: wrap; gap: .35rem .5rem; padding: .3rem 0 .15rem; }
.gp-block.is-selected .gp-fields { display: flex; }
.gp-field { display: inline-flex; align-items: center; gap: .25rem; }
.gp-field > span { font-family: var(--f-mono); font-weight: 700; font-size: .86rem; }
.gp-field input { width: 4.6rem; }
.gp-field-wide { flex: 1 1 100%; }
.gp-field-wide input { width: 100%; }
.gp-field.is-off input:placeholder-shown { background: transparent; }
.gp-unit { font-family: var(--f-display); font-size: .74rem; color: var(--ink-soft); }
.gp-acts { display: none; flex-wrap: wrap; gap: .3rem; padding-top: .2rem; }
.gp-block.is-selected .gp-acts { display: flex; }
[data-interactive="gcode-playground"] .gp-acts button { min-height: 2rem; padding: .2rem .55rem; font-size: .78rem; }
.gp-note { grid-column: 2 / -1; font-size: .8rem; color: var(--ink-soft); }
.gp-bmsg { display: none; font-size: .86rem; line-height: 1.4; padding: .2rem 0 .1rem; }
.gp-block.is-error .gp-bmsg, .gp-block.is-also .gp-bmsg { display: block; }
.gp-tag { font-family: var(--f-display); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.gp-tag:empty { display: none; }

.gp-block.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }
.gp-block.is-active, .gp-block.is-next { box-shadow: inset 4px 0 0 var(--msu-gold), 0 0 0 2px var(--msu-gold); z-index: 2; }
.gp-block.is-done .gp-ln::after { content: " \2713"; }
.gp-block.is-error { border-color: var(--msu-redorange); background: color-mix(in srgb, var(--msu-redorange) 12%, var(--surface)); }
.gp-block.is-also { border-color: var(--msu-redorange); }
.gp-block.is-after { opacity: .62; }
.gp-block.is-dragging { opacity: .35; }
.gp-block.is-snapped { animation: gp-snap .32s ease-out; }
@keyframes gp-snap { 0% { transform: translateY(-5px) scale(1.02); } 60% { transform: translateY(1px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gp-block.is-snapped { animation: none; } }
.gp-drop {
  list-style: none; min-height: 2.4rem; margin-top: 4px;
  border: 2px dashed var(--accent); border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  display: flex; align-items: center; padding-left: 1rem;
  font-family: var(--f-display); font-size: .78rem; color: var(--accent);
}
.gp-ghost {
  position: fixed; z-index: 1000; pointer-events: none; margin: 0;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 30%, transparent);
  opacity: .95;
}
.gp-empty { padding: 1rem; color: var(--ink-soft); font-size: .92rem; }

.gp-blocks[hidden], .gp-textpane[hidden] { display: none; }
.gp-textpane { display: flex; flex-direction: column; gap: .45rem; padding: .5rem; }
.gp-textpane textarea { width: 100%; min-height: 22rem; resize: vertical; line-height: 1.5; font-size: .88rem; }
.gp-textnote { font-size: .84rem; color: var(--ink-soft); }
.gp-problems { margin: 0; padding-left: 1.2rem; font-size: .88rem; display: flex; flex-direction: column; gap: .2rem; }
.gp-problems:empty { display: none; }

/* ---- the work view and its controls --------------------------------------------- */
.gp-work { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.gp-view { min-width: 0; }
.gp-transport { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
[data-interactive="gcode-playground"] .gp-transport button { padding: .35rem .6rem; }
.gp-timeline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .6rem; font-size: .86rem; color: var(--ink-soft); }
.gp-time b { font-family: var(--f-mono); font-weight: 700; color: var(--ink); }
.gp-speed { display: inline-flex; align-items: center; }
.gp-speed select { width: auto; min-height: 2.1rem; }
.gp-now {
  min-height: 4.2rem;
  padding: .5rem .7rem; border-left: 4px solid var(--accent); background: var(--surface-2);
  border-radius: var(--radius-xs); font-size: .93rem; line-height: 1.45;
  display: flex; flex-direction: column; gap: .2rem;
}
.gp-now.is-alarm { border-left-color: var(--msu-redorange); background: var(--cat3-soft); }
.gp-now.is-changed { border-left-color: var(--msu-gold); background: var(--flag-soft); }
.gp-now.is-done { border-left-color: var(--msu-liteblue); background: var(--cat1-soft); }
.gp-now-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-family: var(--f-display); font-weight: 700; font-size: .84rem; }
.gp-now-head code { font-size: .86rem; font-weight: 400; }
[data-interactive="gcode-playground"] .gp-now button { align-self: flex-start; min-height: 2rem; padding: .2rem .6rem; font-size: .78rem; }
.gp-state { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.gp-dro { display: flex; flex-direction: column; padding: .25rem .5rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-xs); min-width: 0; }
.gp-dro > span:first-child { font-family: var(--f-display); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.gp-dro > span + span { font-family: var(--f-mono); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-modes { display: flex; flex-wrap: wrap; gap: .25rem .35rem; font-size: .84rem; }
.gp-mode { padding: .05rem .4rem; border: 1px solid var(--rule); border-radius: var(--radius-xs); background: var(--paper); white-space: nowrap; }
.gp-mode b { font-family: var(--f-mono); font-weight: 700; }
.gp-subset { font-size: .82rem; color: var(--ink-soft); }
.gp-subset code { white-space: normal; }

/* ---- print: the reference figure, plus the learner's own program ------------------ */
@media print {
  [data-interactive="gcode-playground"] { background: #FFF !important; border-color: #777 !important; color: #111 !important; }
  [data-interactive="gcode-playground"].is-live .gp-static { display: flex; }
  [data-gp-live] { display: none !important; }
  .gp-record:not(:empty) { display: flex; flex-direction: column; gap: .5rem; break-inside: avoid; }
  .gp-figure { break-inside: avoid; grid-template-columns: 14rem minmax(0, 1fr); }
  .gp-svg { max-width: 6.5in; }
}