/* Screen & Display tools (stem screen_display) – stage, control bar, simulation label and scenes */
.sd-wrap{margin:4px 0 0}
.sd-stage{position:relative;display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;outline:none}
.sd-stage:focus-visible{box-shadow:var(--focus-ring)}
.sd-screen{position:relative;width:100%;aspect-ratio:16/9;max-height:62vh;min-height:180px;overflow:hidden;background:#000;container-type:size}
.sd-content{position:absolute;inset:0}
.sd-content>canvas{display:block;width:100%;height:100%;touch-action:none}
.sd-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;background:#141b31;color:#fff;transition:opacity .3s}
.sd-btn{min-height:36px;min-width:36px;padding:4px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.55);background:#24304f;color:#fff;font:600 14px/1.2 var(--font);cursor:pointer}
.sd-btn:hover{background:#34457a}
.sd-btn:focus-visible{outline:3px solid #ffd400;outline-offset:2px}
.sd-btn[disabled]{opacity:.45;cursor:not-allowed}
.sd-btn.sd-go{background:#0a5fe0;border-color:#9cc2ff}
.sd-btn.sd-exit{background:#b42318;border-color:#fff}
.sd-info{flex:1 1 150px;min-width:0;font-size:13px;color:#dfe6f7;padding:0 4px}
.sd-msg{min-height:1.4em;margin:8px 0 0;color:var(--text-2);font-size:.95rem}
.sd-note{margin:8px 0 0;color:var(--text-3);font-size:.88rem}
/* full screen (real) and in-page maximised fallback */
.sd-stage.sd-full,.sd-stage.sd-max{display:block;width:100%;height:100%;border:0;border-radius:0;background:#000}
.sd-stage.sd-max{position:fixed;inset:0;z-index:10000;width:100vw;height:100vh;height:100dvh}
.sd-full .sd-screen,.sd-max .sd-screen{position:absolute;inset:0;aspect-ratio:auto;max-height:none;min-height:0;height:100%}
.sd-full .sd-bar,.sd-max .sd-bar{position:absolute;left:10px;right:10px;bottom:10px;z-index:8;border-radius:10px;background:rgba(20,27,49,.88);box-shadow:0 4px 18px rgba(0,0,0,.4)}
.sd-stage.sd-idle .sd-bar{background:transparent;box-shadow:none}
.sd-stage.sd-idle .sd-bar>*:not(.sd-exit){opacity:0;pointer-events:none}
.sd-stage.sd-idle .sd-exit{opacity:.5}
.sd-stage.sd-idle{cursor:none}
html.sd-noscroll,html.sd-noscroll body{overflow:hidden}
/* persistent simulation label – always rendered above the scene, no setting hides it */
.sd-label{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:9;width:max-content;max-width:94%;background:#ffd400;color:#000;border:2px solid #000;border-radius:6px;padding:4px 12px;font:800 clamp(11px,2.2cqw,24px)/1.25 var(--font);letter-spacing:.02em;text-align:center;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.sd-idle-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:52px 18px 18px;background:#0d1326;color:#e8ecf6;font-size:15px}
.sd-idle-msg p{margin:0;max-width:34em}
.sd-color{position:absolute;inset:0}
.sd-swatch{display:inline-block;width:14px;height:14px;border:1px solid #fff;border-radius:3px;vertical-align:-2px;margin-right:6px}
.sd-explain{margin-top:10px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm)}
.sd-explain h3{font-size:1rem;margin:0 0 6px}
.sd-explain ul{margin:0;padding-left:1.2em}
.sd-bp{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding:0;list-style:none}
.sd-bp li{padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:.9rem;background:var(--surface)}
.sd-bp li.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);font-weight:700}
.sd-dialog-out canvas{max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--r-sm);background:repeating-conic-gradient(#e8ecf3 0 25%,#fff 0 50%) 0 0/16px 16px}
.sd-dialog-out .sd-label-static{display:inline-block;margin-top:8px;background:#ffd400;color:#000;border:2px solid #000;border-radius:6px;padding:3px 10px;font-weight:800}
/* on-screen ruler */
.sd-ruler{position:fixed;z-index:10001;background:rgba(255,214,0,.92);color:#111;border:1px solid #6b5600;box-shadow:0 2px 10px rgba(0,0,0,.3);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.sd-ruler:focus-visible{outline:3px solid #0a5fe0;outline-offset:2px}
.sd-ruler.dragging{cursor:grabbing}
.sd-ruler canvas{display:block;pointer-events:none}
.sd-ruler.t-white{background:rgba(255,255,255,.94);border-color:#333}
.sd-ruler.t-dark{background:rgba(20,24,36,.92);color:#fff;border-color:#000}
.sd-ruler-read{position:absolute;font:700 12px/1.2 var(--mono);background:#111;color:#fff;padding:2px 6px;border-radius:4px;white-space:nowrap;pointer-events:none}
.sd-ruler-close{position:absolute;width:26px;height:26px;border-radius:50%;border:1px solid #000;background:#fff;color:#000;font:700 14px/1 var(--font);cursor:pointer;padding:0}
.sd-ruler-close:focus-visible{outline:3px solid #0a5fe0}

/* ---------------- OS-style scenes (generic layouts, sized with container units) ---------------- */
.sc{position:absolute;inset:0;overflow:hidden;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:#fff}
/* Windows 10-style stop screen */
.sc-w10{background:#1663b0;padding:13cqh 11cqw 4cqh}
.sc-w10 .face{font-size:17cqh;line-height:1;font-weight:300;margin:0 0 4cqh}
.sc-w10 .msg{font-size:3.6cqh;line-height:1.35;max-width:72cqw;margin:0 0 3.5cqh;font-weight:300}
.sc-w10 .pct{font-size:3.6cqh;margin:0 0 6cqh;font-weight:300}
.sc-w10 .foot{display:flex;gap:2.5cqw;align-items:flex-start;font-size:2cqh;line-height:1.5;max-width:70cqw}
.sc-w10 .box{flex:none;width:11cqh;height:11cqh;border:.6cqh solid #fff;display:flex;align-items:center;justify-content:center;font-size:2cqh;font-weight:700}
.sc-w10 p{margin:0}
/* Windows 11-style stop screen */
.sc-w11{background:#101114;padding:16cqh 12cqw 4cqh}
.sc-w11 .face{font-size:12cqh;line-height:1;margin:0 0 4cqh;font-weight:400;color:#e9e9ef}
.sc-w11 .msg{font-size:3.4cqh;line-height:1.4;max-width:62cqw;margin:0 0 4cqh;color:#f3f3f7}
.sc-w11 .bar{width:40cqw;height:.8cqh;background:#3b3d46;border-radius:1cqh;overflow:hidden;margin:0 0 1.8cqh}
.sc-w11 .bar i{display:block;height:100%;width:0;background:#9fb6ff;border-radius:1cqh}
.sc-w11 .pct{font-size:2.8cqh;margin:0 0 6cqh;color:#c9cad3}
.sc-w11 .foot{font-size:2cqh;line-height:1.55;color:#b4b6c2;max-width:62cqw}
.sc-w11 .foot p{margin:0}
/* macOS-style restart message */
.sc-mac{background:#000;display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.sc-mac .panel{width:min(72cqw,110cqh);background:rgba(38,38,40,.94);border:1px solid #555;border-radius:2cqh;padding:5cqh 5cqw;text-align:center;color:#eee}
.sc-mac .pw{width:9cqh;height:9cqh;margin:0 auto 3cqh;border:.7cqh solid #ddd;border-radius:50%;position:relative}
.sc-mac .pw:after{content:"";position:absolute;left:50%;top:-1.6cqh;width:.7cqh;height:5cqh;margin-left:-.35cqh;background:#ddd;border:.6cqh solid #262628;border-radius:.4cqh}
.sc-mac .ln{margin:0 0 1.6cqh;font-size:2.6cqh;line-height:1.35}
.sc-mac .ln:first-of-type{font-size:3.2cqh;font-weight:600}
.sc-mac .prog{display:flex;flex-direction:column;align-items:center;gap:5cqh}
.sc-mac .ring{width:16cqh;height:16cqh;border-radius:50%;border:1.6cqh solid #e9e9e9}
.sc-mac .pbar{width:34cqw;height:1cqh;background:#3a3a3c;border-radius:1cqh;overflow:hidden}
.sc-mac .pbar i{display:block;height:100%;width:0;background:#f2f2f2}
.sc-mac .sub{font-size:2.3cqh;color:#bbb;margin:0}
/* system update */
.sc-upd{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3.5cqh}
.sc-upd.win{background:#0b3f8a}
.sc-upd.mac{background:#000}
.sc-upd .dots{position:relative;width:11cqh;height:11cqh}
.sc-upd .dots i{position:absolute;left:50%;top:0;width:1.4cqh;height:1.4cqh;margin-left:-.7cqh;border-radius:50%;background:#fff;transform-origin:.7cqh 5.5cqh}
.sc-upd .t1{font-size:4cqh;margin:0;font-weight:300}
.sc-upd .t2{font-size:2.8cqh;margin:0;color:#d9e4ff;font-weight:300}
.sc-upd .ring{width:15cqh;height:15cqh;border-radius:50%;border:1.5cqh solid #f0f0f0}
.sc-upd .pbar{width:30cqw;height:1cqh;border-radius:1cqh;background:#3a3a3c;overflow:hidden}
.sc-upd .pbar i{display:block;height:100%;width:0;background:#f2f2f2}
.sc-upd.mac .t2{color:#bbb}
/* loading screen */
.sc-load{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqh;text-align:center;padding:12cqh 6cqw 6cqh}
.sc-load .spin{width:14cqh;height:14cqh;border-radius:50%;border:1.6cqh solid rgba(127,127,127,.3);border-top-color:currentColor}
.sc-load .lbar{width:44cqw;height:1.6cqh;border-radius:1cqh;background:rgba(127,127,127,.3);overflow:hidden}
.sc-load .lbar i{display:block;width:0;height:100%;background:currentColor}
.sc-load .ldots{display:flex;gap:2cqh}
.sc-load .ldots i{width:3cqh;height:3cqh;border-radius:50%;background:currentColor;opacity:.3}
.sc-load .lmsg{font-size:4cqh;margin:0;font-weight:500}
.sc-load .lpct{font-size:2.8cqh;margin:0;opacity:.85}
/* application crash */
.sc-crash{background:linear-gradient(135deg,#3d6fa8,#7a5aa6)}
.sc-crash .win{position:absolute;left:10cqw;top:16cqh;width:66cqw;height:66cqh;background:#fff;color:#222;border-radius:1.2cqh;box-shadow:0 2cqh 6cqh rgba(0,0,0,.35);overflow:hidden}
.sc-crash.dark .win{background:#202227;color:#e6e6ea}
.sc-crash .tb{height:6cqh;display:flex;align-items:center;padding:0 2cqw;font-size:2.4cqh;background:#eef0f4;border-bottom:1px solid #d5d9e0}
.sc-crash.dark .tb{background:#2b2e35;border-color:#3a3e48}
.sc-crash .body{padding:3cqh 2cqw}
.sc-crash .body i{display:block;height:2cqh;margin:0 0 2cqh;background:#d8dde6;border-radius:1cqh}
.sc-crash.dark .body i{background:#3a3f4b}
.sc-crash .fog{position:absolute;inset:6cqh 0 0;background:rgba(255,255,255,.65);opacity:0}
.sc-crash.dark .fog{background:rgba(120,120,130,.45)}
.sc-crash .dlg{position:absolute;left:50%;top:50%;width:min(64cqw,100cqh);transform:translate(-50%,-50%);background:#fff;color:#1d1d1f;border-radius:1.6cqh;box-shadow:0 3cqh 8cqh rgba(0,0,0,.45);padding:4cqh 3cqw;opacity:0}
.sc-crash.dark .dlg{background:#2c2f36;color:#f1f1f4}
.sc-crash .dlg .dlg-title{margin:0 0 2cqh;font-size:3.4cqh;font-weight:600;color:inherit}
.sc-crash .dlg p{margin:0 0 3cqh;font-size:2.6cqh;line-height:1.4}
.sc-crash .opts{display:flex;flex-wrap:wrap;gap:1.5cqw;justify-content:flex-end}
.sc-crash .opt{padding:1.2cqh 2.4cqw;border:1px solid #9aa3b2;border-radius:.8cqh;font-size:2.4cqh}
.sc-crash .opt.pri{background:#2f6fde;border-color:#2f6fde;color:#fff}
/* warning scene */
.sc-warn{display:flex;align-items:center;justify-content:center;padding:12cqh 6cqw 6cqh}
.sc-warn.amber{background:#2b2105}
.sc-warn.red{background:#2a0c0c}
.sc-warn.blue{background:#0b1d3a}
.sc-warn .card{max-width:min(78cqw,130cqh);text-align:center}
.sc-warn .tri{width:20cqh;height:18cqh;margin:0 auto 4cqh;position:relative}
.sc-warn .tri svg{width:100%;height:100%;display:block}
.sc-warn .wt{font-size:5cqh;margin:0 0 2cqh;font-weight:700}
.sc-warn .wm{font-size:3cqh;margin:0;line-height:1.45;color:#f3eedd}
.sc-warn .halo{position:absolute;inset:-3cqh;border-radius:50%;border:.6cqh solid currentColor;opacity:0}
@media (max-width:520px){.sd-btn{padding:4px 9px;font-size:13px}.sd-info{flex-basis:100%}}
@media (forced-colors:active){.sd-label{border:2px solid CanvasText}}