.model-3d{background:var(--card);overflow:hidden}.model-viewport{height:100%;position:relative;display:flex;flex-direction:column;min-height:0}.model-bar{position:absolute;top:8px;left:8px;right:8px;display:flex;align-items:center;justify-content:space-between;gap:5px;z-index:4;pointer-events:none}.model-bar button{pointer-events:auto;min-height:26px;padding:4px 7px;font-size:10px}.model-modes{display:flex;border:1px solid var(--line);border-radius:7px;background:var(--card);padding:2px;gap:2px}.model-modes button{white-space:nowrap;border:0;background:transparent;border-radius:5px;color:var(--muted)}.model-modes button[aria-pressed=true]{color:var(--accent);background:#477de213}.model-modes button.model-recenter{background:#3467cc;color:#fff;font-weight:600;box-shadow:0 1px 3px #3467cc24}.model-modes button.model-recenter:hover{background:#2854ab}.model-modes button.model-recenter:focus-visible{outline:2px solid #3467cc;outline-offset:2px}.model-expand{font-size:16px!important;padding:0 7px!important;background:var(--card);border:1px solid var(--line)}.model-stage{position:relative;flex:1;min-height:0;background:radial-gradient(ellipse at 50% 30%,#fff,#f8fafb 52%,#e9eff1);overflow:hidden}.model-stage:before{content:"";position:absolute;left:20%;top:70%;width:60%;height:12%;background:radial-gradient(ellipse,#244b571c,transparent 70%);filter:blur(8px);pointer-events:none}.model-3d .model-stage canvas{width:100%;height:100%;display:block;position:relative;z-index:1;outline-offset:-4px;touch-action:pan-y}.model-viewport[data-mode=inspect] canvas{cursor:grab;touch-action:none}.model-viewport[data-mode=inspect] canvas:active{cursor:grabbing}.model-state{position:absolute;top:45px;left:10px;background:#fffdf4d9;border:1px solid #e5dfcf;color:#9d8d68;font-size:9px;border-radius:5px;padding:3px 5px;z-index:3;pointer-events:none;max-width:calc(100% - 20px)}.model-state.model-live{background:#edf8f2db;color:#418b6b;border-color:#cfe5da}.model-viewport[data-mode=inspect] .model-state{color:#718891;background:#ffffffce;border-color:#dce5e9}.model-description{position:absolute;left:10px;bottom:8px;z-index:2;font-size:9px;color:#90a1aa;pointer-events:none}.model-tools[hidden],.model-failure[hidden]{display:none!important}.model-tools{display:flex;align-items:center;gap:4px;justify-content:center;padding:4px 7px;border-top:1px solid var(--line);background:var(--card);min-height:34px;flex-shrink:0}.model-tools select{min-width:0;width:55px;font-size:10px;padding:3px 2px;height:26px;border-radius:5px}.model-tools button{min-height:26px;font-size:10px;padding:4px 7px;white-space:nowrap}.model-tools button[aria-pressed=true]{color:var(--accent);background:#477de214;border-color:#477de244}.model-palette{padding:4px 6px!important}.model-palette i{display:block;width:10px;height:10px;border-radius:50%}.model-3d .attitude-values{height:48px;min-height:48px;flex-shrink:0;position:relative;display:flex;align-items:center}.model-3d .attitude-values div{font-size:9px;margin:0;padding:5px 7px}.model-3d .attitude-values b{font-size:12px}.model-dialog{width:min(1000px,96vw);max-width:96vw;padding:0;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;max-height:92dvh;overflow:hidden}.model-dialog::backdrop{background:#1f344b70;backdrop-filter:blur(4px)}.model-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}.model-dialog-head b{font-size:15px}.model-dialog-head small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.model-dialog-head button{font-size:21px;width:34px;padding:0}.model-dialog-host{height:min(65dvh,600px);min-height:260px}.model-dialog-host .model-bar{top:12px;left:12px;right:12px}.model-dialog-host .model-bar button{font-size:12px;min-height:30px;padding:5px 12px}.model-dialog-host .model-expand{display:none}.model-dialog-host .model-state{top:60px;left:14px;font-size:11px}.model-dialog-host .model-description{left:14px;bottom:12px;font-size:11px}.model-dialog-host .model-tools{gap:8px;padding:8px}.model-dialog-host .model-tools button{font-size:12px;min-height:32px;padding:6px 12px}.model-dialog-host .model-tools select{width:80px;height:32px;font-size:12px}.model-dialog-host .attitude-values{height:58px;min-height:58px}.model-dialog-host .attitude-values div{font-size:11px;padding:7px 18px}.model-dialog-host .attitude-values b{font-size:16px}.model-dialog-note{margin:0;padding:10px 16px;font-size:10px;color:var(--muted);line-height:1.7;border-top:1px solid var(--line)}.model-failure{position:absolute;left:10%;right:10%;top:48%;font-size:11px;text-align:center;color:var(--muted);z-index:3}body.dark .model-stage{background:radial-gradient(ellipse at 50% 30%,#253f4c,#182e3b 55%,#112432)}body.dark .model-state{background:#25343adf;color:#d3b583;border-color:#6a5f4933}body.dark .model-viewport[data-mode=inspect] .model-state{background:#1b3343e6;border-color:#406674;color:#84cbd3}body.dark .model-state.model-live{background:#244136e6;color:#92d5b8;border-color:#49715833}@media(max-width:750px){.model-bar{top:5px;left:5px;right:5px;gap:3px}.model-bar button{font-size:9px;min-height:23px;padding:3px 4px}.model-modes{padding:1px}.model-state{top:36px;left:6px;font-size:8px;padding:2px 4px}.model-description{font-size:8px;left:6px;bottom:5px}.model-3d .attitude-values{height:42px;min-height:42px}.model-3d .attitude-values div{font-size:8px;padding:4px 5px}.model-3d .attitude-values b{font-size:11px}.model-tools{gap:2px;padding:3px 4px}.model-tools button{font-size:9px;padding:3px 4px;min-height:24px}.model-tools select{font-size:9px;width:48px;height:24px}.model-tools .model-palette{display:none}.model-dialog{width:96vw;max-width:96vw;max-height:94dvh}.model-dialog-head{padding:10px 12px}.model-dialog-host{height:min(67dvh,600px);min-height:260px}.model-dialog-note{font-size:9px;padding:9px 12px}.model-dialog-host .model-tools{gap:5px}.model-dialog-host .model-tools button{padding:5px 8px}.model-dialog-host .model-palette{display:block}.model-dialog-host .attitude-values{height:54px;min-height:54px}}@media(max-width:380px){.model-modes button{font-size:8px;padding:3px}.model-tools button{padding:3px}.model-tools select{width:44px}.model-dialog-host .model-tools button{padding:5px 6px}}
