.scr{gap:18px;display:grid}.scr-screen{aspect-ratio:16/9;width:100%;max-height:420px;box-shadow:inset 0 0 0 1px var(--line), 0 1px 0 #ffffffe6;border-radius:22px;position:relative;overflow:hidden}.scr-screen:focus{outline:none}.scr-screen[data-full]{z-index:1000;aspect-ratio:auto;max-height:none;box-shadow:none;touch-action:manipulation;border-radius:0;position:fixed;inset:0}.tool-stage:has(.scr-screen[data-full]){animation:none}.scr-screen[data-idle]{cursor:none}.scr-preview-go{cursor:zoom-in;background:0 0;border:0;width:100%;position:absolute;inset:0}.scr-bar{left:50%;bottom:max(20px, env(safe-area-inset-bottom));width:min(100% - 32px,720px);box-shadow:var(--ring), var(--float);color:var(--ink);text-align:center;transition:opacity .3s var(--ease-out);background:#fffffff0;border-radius:24px;justify-items:center;gap:10px;padding:14px 16px;display:grid;position:absolute;transform:translate(-50%)}.scr-screen[data-idle] .scr-bar:not(:has(:focus-visible)){opacity:0;pointer-events:none}.scr-bar .tool-row{justify-content:center}.scr-step{font-size:14px}.scr-step b{font-family:var(--font-mono);margin-right:6px;font-weight:500}.scr-tip{max-width:56ch;color:var(--muted);font-size:13.5px;line-height:1.45}.scr-swatches{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.scr-swatches button{background:var(--tile);height:40px;color:var(--ink);font:inherit;cursor:pointer;border:0;border-radius:999px;align-items:center;gap:8px;padding:0 14px 0 8px;font-size:13.5px;font-weight:600;display:inline-flex}.scr-swatches button[aria-pressed=true]{background:var(--ink);color:#fff}.scr-swatches button:focus-visible,.scr-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.scr-dot{border-radius:50%;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #1916132e}.scr-steps{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.scr-steps li{background:var(--tile);border-radius:999px;align-items:center;gap:8px;padding:6px 12px 6px 6px;font-size:13px;font-weight:600;display:inline-flex}@media (max-width:679px){.scr-screen:not([data-full]){border-radius:16px}.scr-bar{border-radius:20px;padding:12px}}