.tool-stage { width:100%;min-width:0;border:1px solid var(--border);border-radius:22px;overflow:hidden;background:var(--surface); }
.tool-stage-viewport { position:relative;width:100%;height:clamp(200px,36vw,350px);overflow:hidden;background:#101722; }
.tool-canvas { display:block;width:100%;height:100%; }
.tool-stage-controls { padding:16px; }
.tool-stage-common { display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap; }
.tool-stage-common button,.stage-show { min-height:44px; }
.tool-stage .stage-start { margin:0;width:auto;min-width:140px;padding:10px 24px; }
.tool-stage-hint,.tool-stage-status { font-size:.75rem;line-height:1.6;margin:10px 0 0;color:var(--muted); }
.tool-stage-hint:empty,.tool-stage-status:empty { display:none; }
.tool-stage-status[data-state=active] { color:var(--accent); }
.tool-stage-open { overflow:hidden; }
.tool-stage.is-active { position:fixed;inset:0;z-index:1000;width:100%;height:100%;height:100dvh;border:0;border-radius:0;background:#000;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.tool-stage.is-active .tool-stage-viewport { position:absolute;inset:0;width:100%;height:100%; }
/* The canvas receives keyboard input, but a focus ring would alter the test image. */
.tool-stage.is-active .tool-canvas:focus { outline:none; }
.tool-stage.is-active .tool-stage-controls { position:absolute;z-index:2;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(700px,calc(100% - 24px));max-height:calc(100% - 32px);overflow:auto;border:1px solid #435268;border-radius:20px;background:#152235f5;color:#eef4fa;box-shadow:0 8px 30px #0003;--ink:#eef4fa;--surface:#152235;--muted:#b3c2d3;--border:#435268;--soft:#253449;--accent:#9be5cf; }
.tool-stage.is-active .quiet-button { color:var(--ink);background:var(--surface); }
.tool-stage.is-active .tool-stage-common { justify-content:flex-end; }
.stage-show { position:absolute;z-index:3;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));background:#152235;color:#fff;border-color:#435268;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab; }
.stage-show.is-dragging { cursor:grabbing; }
.tool-stage.is-active.controls-hidden .tool-canvas { cursor:none; }
.tool-stage.is-active[data-swipe-enabled=true] .tool-canvas { touch-action:none; }
.tool-stage .tool-field { display:flex;flex-direction:column;gap:7px;min-width:0; }
.tool-stage label { font-size:.8125rem; }
.tool-stage select,.tool-stage input { font:inherit;max-width:100%;min-width:0; }
.tool-stage select { appearance:none;-webkit-appearance:none;height:auto;min-height:44px;padding:9px 36px 9px 14px;border:1px solid var(--border);border-radius:999px;background-color:var(--surface);color:var(--ink);font-size:.875rem;font-weight:700;line-height:1.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f8d9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-size:16px;background-repeat:no-repeat; }
.tool-stage input[type=range] { accent-color:var(--accent); }
@media(max-width:420px) { .tool-stage-controls { padding:12px; }.tool-stage.is-active .tool-stage-controls { border-radius:16px; }.tool-stage-common { gap:6px; }.tool-stage-common button { padding:8px 11px;font-size:.8125rem; } }
@media(prefers-reduced-motion:reduce) { .tool-stage * { scroll-behavior:auto; } }