[data-interactive="saw-teeth-in-cut"] { min-width: 0; margin-block: 1rem; }
.st-live > .st-static { display: none; }
.st-lab { font: .94rem/1.45 var(--f-display); }
.st-workbench, .st-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.st-workbench > *, .st-case { min-width: 0; }
.st-svg { display: block; width: 100%; height: auto; background: var(--paper); }
.st-svg text { fill: var(--ink); font: 18px var(--f-display); }
.st-stock { fill: var(--surface-2); stroke: var(--ink-soft); stroke-width: 1.5; }
.st-hole { fill: var(--paper); stroke: var(--ink-soft); }
.st-axis, .st-blade { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.st-blade { stroke-width: 4; }
.st-tooth { fill: none; stroke: var(--ink-soft); stroke-width: 1; }
.st-engaged { stroke: var(--accent); stroke-width: 2; }
.st-contact, .st-curve { stroke: var(--accent); stroke-width: 3; fill: none; }
.st-low { fill: var(--cat2-soft); }
.st-guide { stroke: var(--ink); stroke-dasharray: 6 4; stroke-width: 1.5; fill: none; }
.st-cursor { stroke: var(--ink-soft); stroke-width: 1; }
.st-dot { fill: var(--ink); }
.st-many { stroke-width: 5; }
.st-results { padding: .6rem; border-block: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.st-controls label { display: block; font-weight: 600; }
.st-controls :is(select, input[type="number"], input[type="range"]) { width: 100%; min-width: 0; min-height: 44px; margin: .2rem 0 .7rem; }
.st-controls :is(select, input[type="number"], button) { color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-xs); padding: .4rem .6rem; font: inherit; }
.st-controls button { min-height: 44px; cursor: pointer; }
.st-controls button:disabled { opacity: .55; cursor: default; }
.st-controls :is(input, select, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.st-controls input { accent-color: var(--accent); }
.st-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .5rem; }
.st-predict { min-width: 0; border: 1px solid var(--rule); border-left: 4px solid var(--flag); padding: .6rem; margin: 1rem 0; }
.st-predict label { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.st-case { margin: 0; padding: .5rem; border: 1px solid var(--rule); break-inside: avoid; }
.st-case h3 { font-size: 1rem; }
.st-case figcaption { font-size: .9rem; }
@media (max-width: 55rem) { .st-workbench, .st-cases { grid-template-columns: 1fr; } }
@media (max-width: 28rem) { .xcard:has([data-interactive="saw-teeth-in-cut"]) .body { padding-inline: .5rem; } }
@media (prefers-reduced-motion: reduce) { [data-interactive="saw-teeth-in-cut"] * { animation: none !important; transition: none !important; } }
@media print {
  .st-lab { display: none !important; }
  .st-live > .st-static { display: block !important; }
  .st-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}