:root{--bg:#0f0f11;--canvas:#161618;--panel:#1a1a1d;--surface:#222226;--surface-2:#2a2a2f;--border:#2c2c32;--border-strong:#3a3a42;--text:#ececf0;--muted:#8e8e99;--faint:#5f5f6a;--primary:#2f6bff;--primary-hover:#4a7fff;--primary-ink:#ffffff;--primary-soft:rgba(47,107,255,0.16);--danger:#ff6b6b;--warn:#f5b84a;--ok:#3fcf8e;--radius:12px;--font:"Inter",ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--shadow:0 10px 30px rgba(0,0,0,0.45)}.canvas{position:absolute;inset:0;overflow:hidden;cursor:-webkit-grab;cursor:grab;touch-action:none;background-color:var(--canvas);background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 0);background-size:22px 22px}.canvas.is-panning{cursor:-webkit-grabbing;cursor:grabbing}.canvas.is-panning iframe{pointer-events:none}.canvas-world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.frame{position:absolute;top:28px}.frame-head{z-index:5;position:absolute;bottom:100%;left:0;transform-origin:bottom left;display:flex;align-items:center;gap:8px;height:36px;padding:0 2px 6px 4px}.frame-label{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:13px;font-weight:500}.frame.is-selected .frame-label{color:var(--primary-hover)}.frame-actions{display:flex;gap:2px;opacity:0;transition:opacity .12s}.frame-actions:focus-within,.frame.has-menu .frame-actions,.frame.is-inspecting .frame-actions,.frame.is-selected .frame-actions,.frame:hover .frame-actions{opacity:1}.frame-menu{position:absolute;top:100%;right:0;z-index:10;min-width:200px;padding:6px;border-radius:12px;background:#26262b;border:1px solid var(--border-strong);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}.frame-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:14px;text-align:left;cursor:pointer}.frame-menu button:hover{background:var(--surface-2)}.frame-menu button svg{color:var(--muted)}.frame-menu button.is-danger:hover{background:rgba(255,107,107,.12);color:#ffb3b3}.frame-menu button.is-danger:hover svg{color:#ffb3b3}.fa-btn{position:relative;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.fa-btn:hover{color:var(--text);background:var(--surface-2)}.fa-btn.is-on{color:#fff;background:var(--primary)}.fa-btn[data-tip]:hover:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:500;color:var(--text);background:#2a2a2f;border:1px solid var(--border-strong);padding:5px 9px;border-radius:8px;box-shadow:var(--shadow);pointer-events:none;z-index:5}.frame-device{position:relative;border-radius:62px;background:#050506;cursor:default;box-shadow:0 0 0 1px #3b3b42,0 0 0 3px #17171a,0 30px 70px rgba(0,0,0,.55)}.device-screen{position:relative;overflow:hidden;border-radius:50px;background:#fff}.device-screen iframe{display:block;border:0;background:#fff}.device-status{position:absolute;top:0;left:0;right:0;height:54px;pointer-events:none;z-index:2;display:grid;grid-template-columns:1fr 126px 1fr;align-items:center;font-family:-apple-system,SF Pro Text,Inter,system-ui,sans-serif;transition:color .2s}.device-status.on-light{color:#000}.device-status.on-dark{color:#fff}.device-time{justify-self:center;padding-left:14px;padding-top:6px;font-size:17px;font-weight:600;letter-spacing:-.2px}.device-island{justify-self:center;width:126px;height:37px;margin-top:2px;border-radius:20px;background:#000}.device-icons{justify-self:center;display:flex;align-items:center;gap:6px;padding-right:12px;padding-top:6px}.device-home{position:absolute;left:50%;bottom:8px;width:139px;height:5px;margin-left:-69.5px;border-radius:3px;pointer-events:none;z-index:2;transition:background .2s}.device-home.on-light{background:#000}.device-home.on-dark{background:rgba(255,255,255,.85)}.frame-device.is-selected{outline:4px solid var(--primary);outline-offset:6px}.frame.is-inspecting .frame-device{outline:2px solid var(--primary);outline-offset:6px}.frame-hit{position:absolute;inset:0;border:0;border-radius:62px;background:transparent;cursor:pointer}.tool-select .frame-hit:hover{background:rgba(47,107,255,.08);outline:3px solid rgba(47,107,255,.6);outline-offset:6px;z-index:3}.frame-hit{z-index:3}.canvas-status{position:absolute;inset:0;display:grid;place-items:center;padding:24px}.status-box{max-width:460px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--muted);padding:28px;border-radius:16px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow)}.status-box strong{color:var(--text);font-size:15px}.status-box code{font-size:11px;white-space:pre-wrap;color:var(--faint);text-align:left;max-width:100%;max-height:140px;overflow:auto}.canvas-toolbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:2px;padding:5px;border-radius:14px;background:rgba(30,30,34,.94);border:1px solid var(--border-strong);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:default}.tb-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:500}.tb-btn.icon{width:36px;padding:0;justify-content:center}.tb-btn.is-on,.tb-btn:hover:not(:disabled){color:var(--text);background:var(--surface-2)}.tb-sep{width:1px;height:22px;background:var(--border-strong);margin:0 4px}.tb-zoom{min-width:56px;text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-size:13px;padding:6px 8px;border-radius:8px;border:1px solid var(--border-strong)}.canvas-error{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);z-index:20;width:min(760px,calc(100% - 32px));display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#1f1214;border:1px solid rgba(255,107,107,.4);box-shadow:var(--shadow);cursor:default}.canvas-error pre{flex:1 1;font-size:12px;color:#ffb3b3;max-height:120px}.canvas-error pre,.canvas-logs{margin:0;white-space:pre-wrap;overflow:auto}.canvas-logs{position:absolute;left:16px;right:16px;bottom:76px;z-index:19;max-height:45%;padding:12px;background:#09090b;border:1px solid var(--border-strong);border-radius:12px;font-size:11px;color:#b9b9c6;cursor:text}