.demo[data-demo="gcode"] .gc-text { min-height: 120px; font-size: .98rem; }
.gc-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: .8rem; }
.gc-fields .field label { font-size: .86rem; }
.gc-fields input { padding: .65rem .75rem; }
.gc-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .75rem; }
.gc-partname { font: 650 1rem/1.2 var(--display); }
.gc-engine { margin: -.35rem 0 .75rem; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.gc-engine.is-offline { color: var(--ink); border-left: 3px solid var(--line); padding-left: .65rem; }
.gc-warn { background: var(--sun-soft); color: var(--sun-ink); border-radius: var(--radius-sm); padding: .65rem .9rem; font-size: .88rem; margin-bottom: .75rem; }
.gc-warn ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.gc-warn li { margin: .15rem 0; }
.gc-safety { border: 2px solid var(--sun); background: #fff8ee; color: var(--ink); border-radius: var(--radius-sm); padding: .7rem .95rem; font-size: .9rem; line-height: 1.45; margin-bottom: 1rem; }
.gc-safety b { color: var(--sun-ink); }
.gc-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.gc-tab { font: 650 .92rem/1 var(--body); padding: .7rem 1rem; border: 0; background: none; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.gc-tab:hover { color: var(--ink); }
.gc-tab.is-on { color: var(--ink); border-bottom-color: var(--sun); }
.gc-tab:focus-visible { outline: 3px solid rgba(11, 127, 120, .4); outline-offset: -3px; border-radius: 6px; }
.gc-panel[hidden] { display: none; }
.gc-drawing { background: #fffdf9; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.gc-drawing svg { display: block; width: 100%; height: auto; }
.gc-canvas-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fffdf9; line-height: 0; }
.gc-canvas-wrap canvas { display: block; max-width: 100%; }
.gc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .75rem; }
.gc-controls input[type="range"] { flex: 1 1 140px; min-width: 120px; accent-color: var(--sun); }
.gc-speed { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--muted); }
.gc-speed select { width: auto; padding: .4rem .5rem; font-size: .88rem; }
.gc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .84rem; color: var(--muted); margin-top: .6rem; }
.gc-key { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--sun-ink); margin-left: .4rem; }
.gc-key-rapid { border-top: 2px dashed var(--sea); }
.gc-readout { margin-left: auto; font: .8rem var(--mono); color: var(--ink); }
.gc-codebar { margin-bottom: .6rem; }
.gc-lines { font-size: .84rem; color: var(--muted); }
.gc-code { max-height: 460px; }
.gc-ln { display: inline-block; width: 3.2ch; margin-right: 1.4ch; text-align: right; color: #5f7a8c; user-select: none; }
.gc-c { color: #7f98a8; }
.gc-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 0; }
.gc-summary > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .65rem .8rem; min-width: 0; }
.gc-summary dt { font: 650 .7rem/1.1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem; }
.gc-summary dd { margin: 0; font: 700 1.1rem/1.2 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gc-summary small { display: block; color: var(--muted); font-size: .76rem; margin-top: .2rem; }
@media (max-width: 520px) { .gc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gc-tab { padding: .7rem .75rem; } .gc-readout { margin-left: 0; width: 100%; } }
.demo[data-demo="gcode"] .demo-in, .demo[data-demo="gcode"] .demo-out, .gc-panel { min-width: 0; }
.demo[data-demo="gcode"] .demo-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 900px) { .demo[data-demo="gcode"] .demo-body { grid-template-columns: minmax(0, 1fr); } }
.gc-code { max-width: 100%; }
.demo[data-demo="gcode"] .field[hidden] { display: none; }
.gc-optnote { margin: -.2rem 0 0; font-size: .84rem; color: var(--sun-ink); }
.gc-optnote[hidden] { display: none; }
.gc-drawing:focus-visible { outline: 3px solid rgba(11, 127, 120, .4); outline-offset: 2px; }
/* On phones the drawing keeps a readable size and scrolls sideways rather than shrinking its text */
.gc-scrollhint { display: none; }
@media (max-width: 520px) {
  .gc-drawing { overflow-x: auto; }
  .gc-drawing svg { width: 520px; max-width: none; }
  .gc-scrollhint { display: block; margin: .4rem 0 0; font-size: .8rem; color: var(--muted); }
}

.gc-hint { color: var(--muted); margin: .4rem 0 0; }

/* result status: a result is always a draft, and says how much is left to check */
.gc-state { margin-left: auto; font: 650 .78rem/1 var(--body); letter-spacing: .02em; padding: .38rem .6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--white); white-space: nowrap; }
.gc-state.is-check { border-color: var(--sun); color: var(--sun-ink); background: var(--sun-soft); }
.gc-state.is-stop { border-color: #b42318; color: #fff; background: #b42318; }
.gc-stop { border: 2px solid #b42318; background: #fdf0ee; color: #4a1510; border-radius: var(--radius-sm); padding: .7rem .95rem; font-size: .9rem; line-height: 1.45; margin-bottom: .75rem; }
.gc-stop > b { color: #b42318; font-size: .98rem; }
.gc-stop p { margin: .35rem 0 0; }
.gc-stop[hidden], .gc-warn[hidden] { display: none; }
.gc-warn > b { display: block; }
.gc-codebar .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) { .gc-state { margin-left: 0; } }