.arm-viewport { width:100%;height:clamp(330px,48vw,540px);overflow:hidden;position:relative;border:1px solid var(--border);border-radius:12px;background:var(--surface-2); }
.arm-viewport canvas { width:100%;height:100%;display:block;touch-action:none;cursor:grab; }
.arm-viewport canvas:active { cursor:grabbing; }
.arm-viewport canvas:focus-visible { outline:2px solid var(--blue);outline-offset:-3px; }
.arm-viewport>svg { height:100%;max-height:540px; }
.arm-view-toolbar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:16px 0 10px; }
.arm-view-toolbar .project-actions { gap:6px; }
.arm-view-toolbar button,.arm-view-toolbar select { font-size:12px;padding:6px 10px; }
.arm-scene-copy { display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:8px 0 18px;color:var(--muted);font-size:12px;line-height:1.7; }
.arm-scene-copy [role=status] { flex:1 1 220px; }
.arm-scene-legend { display:flex;gap:16px;flex-wrap:wrap; }
.arm-scene-legend span::before { content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#3589db; }
.arm-scene-legend span:first-child::before { background:#23aa90; }.arm-scene-legend span:last-child::before { background:#f3a32d; }
.arm-playback-state { display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:24px;align-items:start; }
.arm-playback-state p { margin:0; }.arm-playback-state label { justify-content:space-between; }
@media(max-width:650px) { .arm-playback-state { grid-template-columns:1fr;gap:12px; }.arm-viewport { height:360px; }.arm-scene-copy { margin-bottom:12px; } }