.frame-demo{position:relative;height:var(--feature-media-height);min-width:0;overflow:hidden;background:var(--site-soft)}
.frame-view,.frame-view canvas{display:block;width:100%;height:100%}
.frame-toolbar{position:absolute;inset:0 0 auto;height:34px;display:flex;align-items:center;gap:2px;padding:4px 9px;background:var(--site-surface);border-bottom:1px solid var(--site-line);color:var(--site-muted);pointer-events:none;user-select:none}
.frame-tool-icon{display:grid;place-items:center;flex:0 0 22px;height:24px;border:1px solid transparent;border-radius:5px}
.frame-tool-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.frame-tool-icon.is-on{color:var(--site-accent);background:var(--site-accent-soft);border-color:var(--site-line)}.frame-tool-icon.is-muted{opacity:.4}
.frame-tool-divider{width:1px;height:16px;background:var(--site-line);flex:none;margin:0 3px}
.frame-dock{--dock-tile:calc((var(--feature-media-height) - 76px)/10);position:absolute;left:10px;top:42px;display:flex;flex-direction:column;gap:2px;padding:4px;border:1px solid var(--site-line);border-radius:12px;background:var(--site-surface);box-shadow:0 5px 12px #21364a12}
.frame-dock-item,.frame-dock-add{display:grid;place-items:center;width:var(--dock-tile);height:var(--dock-tile);border-radius:5px;background:var(--dock-color);flex:none}
.frame-demo .frame-dock-item img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.frame-dock-add{border:1px dashed var(--site-line);background:transparent;color:var(--site-muted)}.frame-dock-add svg{width:70%;height:70%;stroke-width:2}
.frame-picking .frame-material{outline:2px solid #5487dc;outline-offset:1px;transform:scale(1.12)}
.frame-hud{position:absolute;padding:5px 8px;border:1px solid var(--site-line);border-radius:5px;background:var(--site-surface);color:var(--site-accent);font-size:11px;white-space:nowrap;pointer-events:none}
.frame-hud.is-snapped{background:var(--site-soft);border-color:var(--site-line);color:var(--site-success)}
.frame-complete{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:550;color:var(--site-muted);white-space:nowrap}
.frame-cursor{position:absolute;left:0;top:0;width:20px;height:25px;z-index:3;pointer-events:none;filter:drop-shadow(1px 2px 1px #0003)}
.frame-cursor svg{display:block;width:20px;height:25px;fill:#223146;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.frame-cursor>span{position:absolute;left:2px;top:2px;width:28px;height:28px;border:2px solid #4986dc;border-radius:50%;background:#4986dc20}
.frame-picking .frame-cursor::after{content:'';position:absolute;left:17px;top:8px;width:26px;height:26px;background:url('assets/profile-2020.png') center/contain no-repeat;opacity:.85}
.frame-status{position:absolute;left:15px;right:15px;bottom:12px;text-align:center;color:var(--site-muted);font-size:12px}
@media(max-width:600px){.frame-dock{left:8px}}
@media(prefers-reduced-motion:reduce){.frame-cursor{display:none}}