/* The workpiece is projected from geometry so the retained bevel rolls with the tube. */
.saw-animation{position:relative;margin-top:20px;border:1px solid #d9e3ee;border-radius:11px;overflow:hidden;background:#f9fbfd}
.saw-scene-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 19px 0;font-size:10px;color:#6b7c8e}
.saw-phase{color:#375d7d;font-weight:600;font-size:11px}
.saw-animation>svg{display:block;width:100%;height:auto;overflow:hidden;font-family:var(--font)}
.saw-viewport{position:relative;aspect-ratio:1.9;overflow:hidden;background:#f6f9fc}
.saw-viewport canvas{display:block;width:100%;height:100%}
.saw-face-badge{position:absolute;left:17px;top:13px;border:1px solid #cbdde6;background:#f9fcfee8;color:#156e81;font-size:10px;font-weight:600;padding:7px 10px;border-radius:5px;pointer-events:none}
.saw-face-badge.face-b{color:#7253a5;border-color:#ded2ed;background:#fcfaffe8}
.saw-dimension{position:absolute;bottom:13px;left:0;right:0;text-align:center;color:#506378;font-size:11px;font-weight:500;pointer-events:none}
.saw-roll-note{position:absolute;right:15px;bottom:13px;background:#fffdf3db;border:1px solid #e6d7c2;color:#916532;padding:7px 10px;font-size:11px;border-radius:5px;pointer-events:none}
.saw-progress{height:3px;background:#e7edf4;overflow:hidden}.saw-progress-fill{display:block;width:0;height:100%;background:#2867da}
.saw-playback{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 15px;color:#667b8c;font-size:10px;min-height:65px;background:white;border-top:1px solid #e7edf3}
.saw-playback>div{display:flex;align-items:center;gap:5px}.saw-playback button{border:1px solid #d5e0eb;border-radius:6px;background:white;color:#36536b;font-size:10px;min-height:40px;padding:8px 12px;white-space:nowrap}
.saw-playback button:hover{background:#edf4fb;border-color:#b2c8e3}.saw-playback [data-saw-play]{background:#eef4fc;color:#2157a2;border-color:#c5d6ec;min-width:72px}
.saw-showcase{min-width:0;background:#edf3fa;border-color:#dce6f0}.saw-caption{min-height:106px}.saw-showcase-top span{white-space:nowrap}
.saw-buttons{background:#dfe8f2}.saw-buttons button[aria-pressed=true]{border-color:#cddbe9}.saw-step-number{background:#dce8f8;color:#285b9f}
@media(max-width:1150px){.miter-layout{grid-template-columns:.8fr 1.2fr;gap:36px}.saw-showcase{padding:22px}.saw-playback{padding-inline:10px}.saw-playback button{padding-inline:9px}}
@media(max-width:750px){.miter-layout{grid-template-columns:1fr}.saw-showcase{width:100%;max-width:650px}.saw-caption{min-height:88px}}
@media(max-width:650px){.saw-showcase{padding:20px 14px}.saw-scene-top{padding:14px 12px 0;font-size:9px}.saw-phase{font-size:10px}.saw-playback{padding:9px 8px;font-size:9px;gap:6px}.saw-playback button{font-size:9px;padding:8px;min-height:40px}.saw-playback [data-saw-play]{min-width:61px}.saw-caption{min-height:117px}.saw-showcase-top{gap:10px}.saw-animation{margin-top:16px}}
@media(max-width:360px){.saw-playback>span{max-width:65px;line-height:1.6}.saw-playback button{padding-inline:6px}.saw-scene-top{font-size:8px}}
@media(max-width:650px){.saw-viewport{aspect-ratio:1.55}.saw-face-badge{font-size:9px;padding:5px 8px;left:11px;top:10px}.saw-dimension,.saw-roll-note{font-size:9px;bottom:9px}.saw-roll-note{right:9px;padding:5px 7px}}
@media(prefers-reduced-motion:reduce){.saw-progress{display:none}.saw-playback{min-height:45px}.saw-playback>span{max-width:none}}