@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --space-white:#f4fbff; --space-muted:rgba(220,235,242,.66); --space-line:rgba(224,246,252,.24); --space-cyan:#83e8fa; --space-blue:#a9c8ff; --space-violet:#b89fff; --space-green:#9befc5; }
.spatial-scene { position:fixed; inset:0; z-index:99999; overflow:hidden; isolation:isolate; color:var(--space-white); background:#18313f; font-family:Manrope,system-ui,sans-serif; perspective:1400px; }
.spatial-scene *, .spatial-scene *::before, .spatial-scene *::after { box-sizing:border-box; }
.spatial-scene button, .spatial-scene input, .spatial-scene textarea { font:inherit; }
.spatial-scene button { -webkit-tap-highlight-color:transparent; }
.spatial-scene [hidden] { display:none!important; }

/* The camera owns the backplane. All other layers are deliberately light. */
.spatial-camera { position:absolute; inset:0; overflow:hidden; background:#18313f; }
.spatial-camera video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; filter:saturate(.94) contrast(1.02) brightness(.98); transition:opacity .35s ease; }
.spatial-scene.has-camera .spatial-camera video { opacity:.94; }
.camera-fallback { position:absolute; inset:0; overflow:hidden; background:linear-gradient(118deg,#557984 0%,#365d68 28%,#224655 58%,#1a3042 100%); }
.camera-glow { position:absolute; width:90vw; height:75vw; left:-20vw; top:-16vw; border-radius:50%; background:radial-gradient(circle,rgba(239,250,244,.65),rgba(159,220,218,.18) 42%,transparent 72%); filter:blur(10px); }
.camera-shelf { position:absolute; height:9%; left:-4%; right:-4%; border-radius:12px; background:linear-gradient(180deg,rgba(248,216,174,.65),rgba(106,69,52,.16)); box-shadow:0 18px 38px rgba(20,20,20,.18); transform:rotate(-3deg); }
.camera-shelf.shelf-a { top:24%; }.camera-shelf.shelf-b { top:66%; opacity:.72; transform:rotate(2deg); }
.camera-device { position:absolute; width:54%; height:50%; right:-15%; bottom:8%; border-radius:28px; transform:rotate(-12deg); background:linear-gradient(135deg,rgba(221,234,230,.58),rgba(87,126,133,.15)); box-shadow:-25px 34px 80px rgba(20,20,25,.22); }
.camera-window { position:absolute; width:31%; height:38%; left:11%; top:31%; border:1px solid rgba(226,244,244,.28); border-radius:18px; background:linear-gradient(145deg,rgba(220,241,239,.30),rgba(32,82,94,.18)); transform:rotate(9deg); }
.camera-softness { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(8,19,26,.06),rgba(8,19,26,0) 44%,rgba(8,19,26,.16)),radial-gradient(circle at 50% 42%,transparent 0 38%,rgba(6,15,24,.15) 100%); }
.camera-grid { position:absolute; inset:0; opacity:.055; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:74px 74px; mask-image:linear-gradient(transparent,#000 18%,#000 78%,transparent); }

.spatial-topbar { position:absolute; z-index:50; top:16px; left:20px; right:20px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.spatial-brand, .top-actions, .top-presence { pointer-events:auto; }
.spatial-brand { display:flex; align-items:center; gap:10px; padding:0; border:0; color:var(--space-white); background:transparent; cursor:pointer; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(148,230,255,.7); border-radius:14px; color:#f5fdff; background:rgba(56,112,140,.34); box-shadow:0 8px 30px rgba(37,104,133,.18),inset 0 1px rgba(255,255,255,.2); font-size:18px; }
.brand-name { font-size:13px; font-weight:800; letter-spacing:.19em; }.brand-live { display:flex; align-items:center; gap:6px; color:rgba(239,251,255,.62); font:9px 'DM Mono',monospace; letter-spacing:.11em; }.brand-live i,.top-presence i { width:6px; height:6px; border-radius:50%; background:var(--space-green); box-shadow:0 0 12px var(--space-green); }
.top-presence { display:flex; align-items:center; gap:8px; color:rgba(238,249,252,.7); font:9px 'DM Mono',monospace; letter-spacing:.1em; }.top-divider { width:1px; height:13px; background:rgba(255,255,255,.2); }
.top-actions { display:flex; gap:7px; }.spatial-control,.dock-close,.surface-actions button { display:grid; place-items:center; border:1px solid rgba(225,246,251,.22); color:rgba(243,251,255,.85); background:rgba(7,22,34,.24); box-shadow:inset 0 1px rgba(255,255,255,.1); cursor:pointer; backdrop-filter:blur(10px); }.spatial-control { width:36px; height:36px; border-radius:13px; font-size:16px; }.spatial-control:hover,.dock-close:hover,.surface-actions button:hover { border-color:rgba(143,231,251,.62); background:rgba(144,222,245,.12); }
.room-context { position:absolute; z-index:45; top:65px; left:50%; display:flex; align-items:center; gap:8px; max-width:calc(100vw - 34px); padding:8px 12px; transform:translateX(-50%); border:1px solid rgba(224,246,252,.19); border-radius:99px; color:rgba(236,248,251,.72); background:rgba(7,22,34,.17); font:9px 'DM Mono',monospace; white-space:nowrap; backdrop-filter:blur(9px); }.context-dot,.dock-signal,.callout-dot { width:6px; height:6px; flex:none; border-radius:50%; background:var(--space-cyan); box-shadow:0 0 12px var(--space-cyan); }.room-context button { border:0; padding:0 0 0 4px; color:var(--space-cyan); background:transparent; cursor:pointer; font:inherit; }

.spatial-stage { position:absolute; inset:0; transform-style:preserve-3d; }
.spatial-dock { position:absolute; z-index:22; top:92px; left:50%; width:min(420px,calc(100vw - 32px)); padding:10px 11px 9px; transform:translateX(-50%) translateZ(28px); border:1px solid rgba(230,247,252,.25); border-radius:22px; background:linear-gradient(145deg,rgba(26,57,70,.48),rgba(6,22,35,.28)); box-shadow:0 18px 50px rgba(7,25,37,.2),inset 0 1px rgba(255,255,255,.16); backdrop-filter:blur(12px) saturate(1.1); }
.dock-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:1px 2px 9px; cursor:grab; }.dock-head:active { cursor:grabbing; }.dock-head > div { display:grid; gap:3px; }.dock-eyebrow,.surface-eyebrow { color:rgba(163,224,241,.76); font:8px 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }.dock-head strong { color:rgba(246,253,255,.9); font-size:12px; font-weight:700; }.dock-close { width:26px; height:26px; border-radius:10px; font-size:16px; }
.dock-items { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }.dock-item { display:grid; justify-items:center; gap:3px; min-width:0; padding:7px 3px 6px; border:1px solid transparent; border-radius:12px; color:rgba(224,239,246,.62); background:transparent; cursor:pointer; }.dock-item span { display:grid; place-items:center; width:22px; height:22px; color:var(--space-cyan); font-size:15px; }.dock-item b { overflow:hidden; max-width:100%; font-size:8px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.dock-item:hover,.dock-item.active { color:#fff; border-color:rgba(190,237,247,.2); background:rgba(154,222,239,.13); }.dock-item.active span { text-shadow:0 0 14px var(--space-cyan); }.dock-foot { display:flex; align-items:center; gap:7px; padding:8px 2px 0; color:rgba(211,231,238,.55); font:8px 'DM Mono',monospace; }.dock-signal { width:5px; height:5px; background:var(--space-green); box-shadow:0 0 10px var(--space-green); }.dock-reopen { position:absolute; z-index:30; top:94px; left:50%; display:flex; align-items:center; gap:6px; padding:9px 12px; transform:translateX(-50%); border:1px solid rgba(225,246,251,.24); border-radius:14px; color:var(--space-white); background:rgba(9,27,40,.38); cursor:pointer; font-size:11px; backdrop-filter:blur(12px); }.dock-reopen span { font-size:9px; }

.surface-host { position:absolute; inset:0; z-index:12; transform-style:preserve-3d; }.spatial-surface { position:absolute; top:188px; left:50%; width:min(650px,calc(100vw - 34px)); height:min(468px,calc(100vh - 338px)); min-height:330px; transform:translateX(-50%) translateZ(10px); overflow:auto; border:1px solid rgba(231,248,252,.27); border-radius:27px; background:linear-gradient(145deg,rgba(36,70,83,.45),rgba(8,24,37,.29)); box-shadow:0 24px 70px rgba(5,20,31,.22),0 0 0 1px rgba(255,255,255,.025),inset 0 1px rgba(255,255,255,.18); backdrop-filter:blur(10px) saturate(1.08); transition:box-shadow .2s,opacity .2s; scrollbar-width:thin; scrollbar-color:rgba(157,224,239,.35) transparent; }.spatial-surface.is-dragging { transition:none; box-shadow:0 35px 88px rgba(3,17,27,.42),0 0 0 1px rgba(141,232,250,.25); }.spatial-surface.is-pinned { border-color:rgba(139,233,251,.62); box-shadow:0 24px 78px rgba(5,25,37,.3),0 0 38px rgba(107,224,247,.11),inset 0 1px rgba(255,255,255,.2); }.spatial-surface.is-minimized { height:72px; min-height:72px; resize:none; overflow:hidden; }.spatial-surface.is-minimized .surface-body { display:none; }
.surface-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; min-height:82px; padding:16px 18px 14px; border-bottom:1px solid rgba(226,246,251,.15); cursor:grab; }.surface-head:active { cursor:grabbing; }.surface-head > div:first-child { min-width:0; }.surface-head h1 { margin:5px 0 4px; color:#f7fcff; font-size:21px; line-height:1.08; letter-spacing:-.045em; }.surface-head p { max-width:460px; margin:0; color:rgba(213,232,240,.62); font-size:10px; line-height:1.45; }.surface-actions { display:flex; align-items:center; gap:6px; flex:none; }.surface-actions button { width:27px; height:27px; border-radius:9px; border-color:transparent; background:transparent; font-size:16px; }.surface-live { display:flex; align-items:center; gap:5px; margin-right:1px; color:var(--space-green); font:8px 'DM Mono',monospace; letter-spacing:.1em; }.surface-live i { width:5px; height:5px; border-radius:50%; background:var(--space-green); box-shadow:0 0 10px var(--space-green); }
.surface-body { padding:17px 18px 20px; }.chat-body { min-height:330px; }.chat-log { display:grid; gap:11px; }.chat-welcome { display:flex; gap:11px; align-items:flex-start; max-width:535px; padding:9px 0 8px; }.welcome-orb { display:grid; place-items:center; flex:none; width:34px; height:34px; border:1px solid rgba(142,233,250,.65); border-radius:12px; color:var(--space-cyan); background:rgba(142,233,250,.08); box-shadow:0 0 24px rgba(142,233,250,.08); }.chat-welcome h2 { margin:5px 0 7px; font-size:19px; letter-spacing:-.04em; }.chat-welcome p { max-width:430px; margin:0; color:rgba(215,232,239,.65); font-size:11px; line-height:1.6; }.prompt-rail { display:flex; flex-wrap:wrap; gap:6px; margin:7px 0 14px 45px; }.prompt-rail button { padding:7px 9px; border:1px solid rgba(222,245,251,.16); border-radius:99px; color:rgba(226,242,247,.72); background:rgba(255,255,255,.045); cursor:pointer; font-size:9px; }.prompt-rail button:hover { border-color:rgba(139,232,251,.5); color:#fff; background:rgba(139,232,251,.1); }.chat-message { display:flex; gap:9px; max-width:84%; align-items:flex-start; padding:9px 10px; border:1px solid rgba(222,245,251,.12); border-radius:14px; color:rgba(237,248,251,.9); background:rgba(255,255,255,.055); }.chat-message.user { margin-left:auto; color:#092036; background:linear-gradient(135deg,#c4f2ff,#a8d6ff); border-color:rgba(231,250,255,.45); }.chat-avatar { display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:8px; color:var(--space-cyan); background:rgba(117,222,242,.12); font:8px 'DM Mono',monospace; }.chat-message.user .chat-avatar { color:#092036; background:rgba(255,255,255,.34); }.chat-message p { margin:1px 0 0; font-size:10px; line-height:1.55; white-space:pre-wrap; }
.surface-button { display:inline-flex; align-items:center; justify-content:space-between; gap:12px; min-height:35px; padding:8px 11px; border:1px solid rgba(207,242,250,.28); border-radius:11px; color:#082238; background:linear-gradient(135deg,#c9f4ff,#a9d9ff); box-shadow:0 8px 22px rgba(61,179,215,.12); cursor:pointer; font-size:10px; font-weight:800; }.surface-button b { font-size:14px; }.surface-button.compact { min-height:29px; padding:6px 9px; font-size:9px; }

.lens-body,.research-body,.clerking-body,.notes-body,.creative-body,.image-body { display:grid; gap:14px; }.lens-body { grid-template-columns:1.15fr .85fr; align-items:center; }.lens-viewport { position:relative; min-height:258px; overflow:hidden; border:1px solid rgba(134,231,250,.25); border-radius:18px; background:radial-gradient(circle at 50% 44%,rgba(83,207,225,.22),transparent 44%),linear-gradient(145deg,rgba(37,103,120,.3),rgba(7,25,39,.32)); }.lens-viewport::before { content:""; position:absolute; inset:20% 24%; border:1px solid rgba(139,233,250,.65); border-radius:48% 48% 43% 43%; box-shadow:0 0 40px rgba(110,228,246,.14),inset 0 0 30px rgba(110,228,246,.1); }.lens-viewport::after { content:""; position:absolute; left:50%; top:20%; bottom:20%; border-left:1px dashed rgba(148,232,248,.45); }.scan-corner { position:absolute; width:25px; height:25px; border-color:var(--space-cyan); }.corner-a { left:14px; top:14px; border-top:1px solid;border-left:1px solid; }.corner-b { right:14px; bottom:14px; border-right:1px solid;border-bottom:1px solid; }.lens-crosshair { position:absolute; z-index:1; top:50%; left:50%; color:var(--space-cyan); font-size:30px; transform:translate(-50%,-50%); text-shadow:0 0 22px var(--space-cyan); }.lens-caption { position:absolute; left:15px; bottom:14px; color:rgba(176,232,239,.8); font:8px 'DM Mono',monospace; letter-spacing:.1em; }.lens-side { display:grid; gap:9px; }.lens-side h2,.research-body h2,.clerking-body h2 { margin:0; font-size:17px; letter-spacing:-.035em; }.lens-side p,.research-body p,.clerking-body p { margin:0; color:var(--space-muted); font-size:10px; line-height:1.6; }.surface-note { color:rgba(193,226,232,.6); font:8px 'DM Mono',monospace; line-height:1.4; }.surface-note i,.image-footer i { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--space-green); box-shadow:0 0 8px var(--space-green); }
.lens-capture-confirmation { display:grid; gap:8px; padding:10px; border:1px solid rgba(131,232,250,.3); border-radius:14px; background:rgba(5,26,39,.35); }.lens-capture-confirmation strong { color:#f5fdff; font-size:11px; }.lens-capture-confirmation img { display:block; width:100%; max-height:150px; object-fit:contain; border-radius:9px; background:#071a27; }.lens-capture-confirmation p { margin:0; font-size:9px; }.lens-confirm-actions { display:flex; flex-wrap:wrap; gap:7px; }.lens-confirm-actions .surface-button { flex:1; }.surface-button.secondary { color:rgba(235,249,253,.86); background:rgba(255,255,255,.06); box-shadow:none; }
.research-body { gap:13px; }.research-input { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid rgba(225,246,251,.18); border-radius:12px; background:rgba(255,255,255,.045); }.research-input > span { color:var(--space-violet); font-size:16px; }.research-input input { flex:1; min-width:0; padding:10px 0; border:0; outline:0; color:#f2fbff; background:transparent; font-size:10px; }.research-input button { padding:5px 8px; border:1px solid rgba(221,243,249,.18); border-radius:8px; color:#dff8fd; background:rgba(141,232,251,.08); cursor:pointer; font-size:9px; }.research-status { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid rgba(224,245,251,.13); border-radius:16px; background:rgba(255,255,255,.04); }.agent-orb { width:42px; height:42px; flex:none; border:1px solid rgba(151,231,247,.42); border-radius:50%; background:radial-gradient(circle at 35% 25%,#fff,rgba(128,222,245,.75) 12%,rgba(51,93,140,.55) 45%,rgba(10,27,45,.45) 76%); box-shadow:0 0 30px rgba(111,224,247,.25); animation:orb-breathe 2.8s ease-in-out infinite; }.research-status > div { display:grid; gap:4px; }.research-status strong { font-size:12px; }.research-status small { color:rgba(211,231,238,.55); font-size:9px; }.source-rack { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.source-rack article { display:grid; gap:8px; min-height:110px; padding:12px; border:1px solid rgba(223,245,251,.12); border-radius:14px; background:rgba(255,255,255,.035); }.source-rack span { color:var(--space-violet); font:8px 'DM Mono',monospace; }.source-rack strong { font-size:11px; }.source-rack small { color:rgba(211,231,238,.55); font-size:9px; }.surface-response { min-height:20px; color:rgba(216,236,242,.72); font-size:10px; line-height:1.55; }
.clerking-body { grid-template-columns:auto 1fr; align-items:center; column-gap:13px; }.record-orb { display:grid; place-items:center; width:76px; height:76px; border:1px solid rgba(151,239,197,.42); border-radius:50%; box-shadow:0 0 42px rgba(125,238,184,.12); }.record-orb span { width:20px; height:20px; border-radius:50%; background:var(--space-green); box-shadow:0 0 22px var(--space-green); }.is-recording .record-orb span { animation:orb-breathe 1.1s ease-in-out infinite; }.clerking-body > div:nth-child(2) { display:grid; gap:6px; }.clerking-body .surface-button { grid-column:1 / -1; justify-self:start; }.clerk-fields { display:grid; grid-template-columns:repeat(4,1fr); grid-column:1 / -1; gap:6px; margin-top:8px; }.clerk-fields span { padding:10px 8px; border:1px solid rgba(224,245,251,.12); border-radius:10px; color:rgba(210,232,239,.58); font:8px 'DM Mono',monospace; }
.story-body { display:grid; gap:11px; }
.notes-body textarea { width:100%; min-height:180px; resize:vertical; padding:12px; border:1px solid rgba(225,245,251,.16); border-radius:13px; outline:0; color:#effaff; background:rgba(3,16,27,.26); font:11px/1.6 Manrope,system-ui,sans-serif; }.notes-body textarea:focus { border-color:rgba(137,233,251,.55); }.note-toolbar { display:flex; align-items:center; justify-content:space-between; color:rgba(207,230,237,.5); font:8px 'DM Mono',monospace; }.note-memory { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid rgba(224,245,251,.12); border-radius:14px; background:rgba(255,255,255,.04); }.note-memory strong { display:block; margin-top:4px; font-size:10px; }
.creative-body { gap:12px; }.creative-toolbar,.image-toolbar,.image-footer { display:flex; align-items:center; gap:8px; color:rgba(215,234,240,.58); font:8px 'DM Mono',monospace; }.creative-toolbar > span:nth-child(2) { margin-right:auto; }.creative-toolbar button { padding:6px 8px; border:1px solid rgba(223,244,250,.16); border-radius:8px; color:rgba(232,247,250,.82); background:rgba(255,255,255,.045); cursor:pointer; font-size:8px; }.canva-badge { display:flex; align-items:center; gap:5px; color:#fff!important; font-weight:700; }.canva-badge i { width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#00c4cc,#7d2ae8,#ff7262); }.slide-stage { position:relative; min-height:280px; overflow:hidden; border:1px solid rgba(225,245,251,.16); border-radius:15px; background:linear-gradient(135deg,#202d52,#42306f 52%,#ec7569); }.slide-copy { position:absolute; z-index:2; left:8%; top:14%; display:grid; gap:11px; }.slide-copy > span { color:rgba(255,255,255,.65); font:8px 'DM Mono',monospace; letter-spacing:.1em; }.slide-copy h2 { margin:0; color:#fff; font-size:32px; line-height:.92; letter-spacing:-.07em; }.slide-copy h2 em { color:#8df1ec; font-style:normal; }.slide-copy p { max-width:210px; margin:0; color:rgba(255,255,255,.7); font-size:9px; line-height:1.5; }.slide-copy b { color:rgba(255,255,255,.62); font:8px 'DM Mono',monospace; }.slide-lungs { position:absolute; right:9%; top:18%; width:42%; height:65%; border:1px solid rgba(141,242,241,.45); border-radius:50%; transform:rotate(20deg); box-shadow:0 0 50px rgba(131,233,249,.23),inset 0 0 50px rgba(131,233,249,.12); }.slide-lungs::before,.slide-lungs::after { content:""; position:absolute; top:18%; width:34%; height:62%; border:2px solid #f2a2ca; border-radius:50%; }.slide-lungs::before { left:14%; transform:rotate(-9deg); }.slide-lungs::after { right:14%; transform:rotate(9deg); }.slide-lungs span { position:absolute; left:50%; top:42%; color:#fff; font:8px 'DM Mono',monospace; transform:translate(-50%,-50%) rotate(-20deg); }.agent-cursor { position:absolute; z-index:3; right:19%; bottom:14%; display:flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid rgba(255,255,255,.32); border-radius:8px; color:#fff; background:rgba(5,12,28,.26); box-shadow:0 0 22px rgba(129,236,239,.35); animation:cursor-float 2s ease-in-out infinite; }.agent-cursor small { font-size:8px; }.creative-progress { display:flex; align-items:center; gap:9px; color:rgba(215,234,240,.6); font:8px 'DM Mono',monospace; }.creative-progress i { flex:1; height:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.14); }.creative-progress i b { display:block; width:72%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#8eeaf3,#b79cff); transition:width .3s; }.creative-progress strong { color:#eafcff; font-weight:500; }
.image-body { gap:10px; }.image-toolbar span { margin-left:auto; }.tone { width:15px; height:15px; border:2px solid transparent; border-radius:50%; background:var(--tone); cursor:pointer; }.tone:nth-child(1){--tone:#79e7f4}.tone:nth-child(2){--tone:#b49aff}.tone:nth-child(3){--tone:#ffabb5}.tone:nth-child(4){--tone:#f5d58c}.tone.active { border-color:#fff; box-shadow:0 0 12px var(--tone); }.image-body canvas { width:100%; min-height:235px; border:1px solid rgba(141,233,250,.18); border-radius:14px; touch-action:none; cursor:crosshair; }.image-footer { justify-content:space-between; }.image-footer > span i { margin-right:5px; }

.sphere-orbit-plane { position:absolute; z-index:25; top:40%; left:50%; width:245px; height:112px; transform:translate(-50%,-50%) translateZ(36px) rotate(-12deg); border:1px solid rgba(130,230,247,.22); border-radius:50%; box-shadow:0 0 42px rgba(100,224,244,.08); pointer-events:none; }.sphere-shell { position:absolute; z-index:45; top:40%; left:50%; width:194px; height:222px; transform:translate(-50%,-50%) translateZ(90px) scale(var(--sphere-scale,1)); transform-style:preserve-3d; touch-action:none; cursor:grab; }.sphere-shell:active { cursor:grabbing; }.sphere-aura { position:absolute; inset:10px 5px 49px; border-radius:50%; background:radial-gradient(circle,rgba(117,236,249,.42),rgba(87,165,224,.12) 46%,transparent 72%); filter:blur(22px); animation:aura-breathe 3.5s ease-in-out infinite; }.sphere-shadow { position:absolute; left:28px; right:18px; bottom:23px; height:18px; border-radius:50%; background:radial-gradient(ellipse,rgba(4,12,21,.5),transparent 70%); filter:blur(9px); }.sphere-fallback { position:absolute; left:20px; top:12px; width:154px; height:154px; border:1px solid rgba(204,244,255,.55); border-radius:50%; background:radial-gradient(circle at 32% 24%,#f6ffff 0 2%,#b9eeff 8%,#528ac4 35%,#173657 68%,#081523 100%); box-shadow:0 0 0 1px rgba(186,238,255,.22),0 0 40px rgba(91,205,255,.62),0 27px 70px rgba(0,0,0,.56),inset -21px -27px 35px rgba(1,8,18,.4); transition:opacity .3s; animation:sphere-float 5s ease-in-out infinite; }.sphere-fallback.is-replaced { opacity:.06; }.sphere-core { position:absolute; inset:0; display:grid; place-items:center; color:#edffff; font-size:31px; text-shadow:0 0 26px #b8f5ff; }.sphere-ring { position:absolute; border:1px solid rgba(194,242,255,.65); border-radius:50%; }.ring-a { inset:16px; transform:rotate(42deg) scaleX(.72); }.ring-b { inset:31px; border-color:rgba(190,155,255,.58); transform:rotate(-28deg) scaleY(.66); }.sphere-mount { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }.sphere-mount .mdxs { width:194px!important; height:204px!important; filter:drop-shadow(0 20px 28px rgba(0,0,0,.32)); }.sphere-mount .mdxs-core { pointer-events:auto!important; cursor:pointer!important; }.sphere-state { position:absolute; left:50%; top:186px; transform:translateX(-50%); color:rgba(235,251,255,.75); font:8px 'DM Mono',monospace; letter-spacing:.13em; white-space:nowrap; }.sphere-callout { position:absolute; z-index:44; top:calc(40% + 112px); left:50%; display:flex; align-items:center; gap:7px; max-width:220px; padding:7px 9px; transform:translateX(-50%) translateZ(75px); border:1px solid rgba(224,246,251,.19); border-radius:99px; color:rgba(231,248,251,.68); background:rgba(8,24,37,.26); font:8px 'DM Mono',monospace; white-space:nowrap; backdrop-filter:blur(9px); }.callout-dot { width:5px; height:5px; }
.spatial-scene[data-state="listening"] .sphere-aura,.spatial-scene[data-state="working"] .sphere-aura { background:radial-gradient(circle,rgba(153,239,196,.5),rgba(87,165,224,.14) 46%,transparent 72%); }.spatial-scene[data-state="thinking"] .sphere-aura { animation:aura-pulse 1.1s ease-in-out infinite; }.spatial-scene[data-state="speaking"] .sphere-aura { background:radial-gradient(circle,rgba(255,184,201,.48),rgba(173,121,231,.12) 46%,transparent 72%); }.spatial-scene[data-state="working"] .sphere-fallback { filter:hue-rotate(20deg); }.spatial-scene[data-state="listening"] .sphere-fallback { filter:hue-rotate(72deg) brightness(1.08); }.spatial-scene[data-state="speaking"] .sphere-fallback { filter:hue-rotate(120deg); }

.spatial-composer { position:absolute; z-index:52; left:50%; bottom:18px; display:flex; align-items:center; gap:8px; width:min(560px,calc(100vw - 30px)); height:57px; padding:7px 8px; transform:translateX(-50%) translateZ(110px); border:1px solid rgba(226,247,252,.26); border-radius:20px; background:rgba(6,20,31,.5); box-shadow:0 18px 42px rgba(4,18,29,.25),inset 0 1px rgba(255,255,255,.13); backdrop-filter:blur(13px); }.composer-mic { display:grid; place-items:center; width:36px; height:36px; flex:none; border:1px solid rgba(133,233,250,.45); border-radius:12px; color:var(--space-cyan); background:rgba(112,225,247,.08); cursor:pointer; font-size:16px; }.composer-mic[aria-pressed="true"] { color:#062337; background:var(--space-cyan); box-shadow:0 0 18px rgba(131,232,250,.32); }.spatial-composer input { min-width:0; flex:1; padding:0 3px; border:0; outline:0; color:#f2fbff; background:transparent; font-size:11px; }.spatial-composer input::placeholder { color:rgba(220,237,243,.54); }.composer-send { display:grid; place-items:center; width:38px; height:38px; flex:none; border:0; border-radius:13px; color:#082238; background:linear-gradient(135deg,#c9f4ff,#a9d9ff); cursor:pointer; font-size:20px; }.audio-control { position:absolute; z-index:53; left:50%; bottom:83px; transform:translateX(-50%) translateZ(110px); }.audio-control button { display:flex; align-items:center; gap:8px; min-width:139px; padding:8px 10px; border:1px solid rgba(226,247,252,.22); border-radius:15px; color:rgba(240,250,253,.82); background:rgba(6,20,31,.34); box-shadow:0 10px 28px rgba(4,18,29,.2),inset 0 1px rgba(255,255,255,.1); cursor:pointer; text-align:left; backdrop-filter:blur(12px); }.audio-control button > span:nth-child(2) { display:grid; gap:2px; }.audio-control b { font-size:9px; font-weight:700; }.audio-control small { color:rgba(211,232,239,.52); font:7px 'DM Mono',monospace; }.audio-control em { margin-left:auto; color:rgba(218,239,244,.52); font-style:normal; }.audio-bars { display:flex; align-items:center; gap:2px; height:19px; }.audio-bars i { display:block; width:2px; height:7px; border-radius:4px; background:var(--space-cyan); }.audio-bars i:nth-child(2){height:13px}.audio-bars i:nth-child(3){height:10px}.audio-bars i:nth-child(4){height:16px}.audio-off .audio-bars i { background:rgba(210,231,237,.36); height:7px; }
.spatial-toast { position:absolute; z-index:70; top:142px; left:50%; max-width:calc(100vw - 34px); padding:9px 12px; transform:translateX(-50%) translateY(-8px); border:1px solid rgba(141,232,251,.26); border-radius:12px; color:#e9fbff; background:rgba(5,20,31,.7); box-shadow:0 15px 38px rgba(4,18,29,.25); opacity:0; pointer-events:none; font-size:9px; transition:.22s; backdrop-filter:blur(12px); }.spatial-toast.show { transform:translateX(-50%); opacity:1; }.privacy-sheet { position:absolute; z-index:80; inset:0; display:grid; place-items:center; padding:20px; background:rgba(5,17,26,.32); backdrop-filter:blur(9px); }.privacy-card { position:relative; width:min(380px,100%); padding:24px; border:1px solid rgba(228,247,251,.27); border-radius:21px; background:linear-gradient(145deg,rgba(30,65,79,.86),rgba(7,23,35,.82)); box-shadow:0 30px 90px rgba(2,12,20,.4); }.privacy-card > button { position:absolute; top:12px; right:12px; border:0; color:#dff7fb; background:transparent; cursor:pointer; font-size:20px; }.privacy-card h2 { margin:10px 0; font-size:22px; letter-spacing:-.05em; }.privacy-card p { color:var(--space-muted); font-size:11px; line-height:1.6; }.privacy-card .surface-button { margin-top:8px; }

@keyframes sphere-float { 50% { transform:translateY(-9px) rotate(2deg); } } @keyframes aura-breathe { 50% { transform:scale(1.08); opacity:.78; } } @keyframes aura-pulse { 50% { transform:scale(1.24); opacity:.98; } } @keyframes orb-breathe { 50% { transform:scale(1.15); opacity:.72; } } @keyframes particle-float { 50% { transform:translate(8px,-12px) scale(1.25); opacity:.62; } } @keyframes cursor-float { 50% { transform:translate(-5px,-4px); } }
@media (min-width:901px) { .spatial-surface { top:215px; height:min(480px,calc(100vh - 330px)); }.spatial-dock { top:84px; }.sphere-shell,.sphere-orbit-plane { top:43%; }.sphere-callout { top:calc(43% + 114px); }.spatial-composer { bottom:22px; }.audio-control { left:calc(50% - 330px); bottom:27px; }.room-context { top:60px; } }
@media (max-width:600px) { .brand-live,.top-presence,.room-context button { display:none; }.spatial-topbar { top:12px; left:13px; right:13px; }.brand-mark { width:34px; height:34px; border-radius:12px; }.brand-name { font-size:12px; }.top-actions { gap:5px; }.spatial-control { width:33px; height:33px; border-radius:11px; }.room-context { top:59px; padding:7px 10px; font-size:8px; }.spatial-dock { top:83px; width:calc(100vw - 24px); padding:8px 8px 7px; border-radius:19px; }.dock-head { padding-bottom:7px; }.dock-head strong { font-size:11px; }.dock-eyebrow { font-size:7px; }.dock-items { gap:2px; }.dock-item { padding:6px 2px 5px; border-radius:10px; }.dock-item span { width:20px; height:20px; font-size:14px; }.dock-item b { font-size:7px; }.dock-foot { padding-top:6px; font-size:7px; }.dock-close { width:24px; height:24px; }.dock-reopen { top:86px; }.spatial-surface { top:214px; width:calc(100vw - 24px); height:calc(100vh - 400px); min-height:350px; border-radius:23px; }.surface-head { min-height:72px; padding:13px 14px 11px; }.surface-head h1 { font-size:17px; }.surface-head p { font-size:9px; }.surface-body { padding:13px 14px 18px; }.chat-welcome { padding-top:3px; }.chat-welcome h2 { font-size:17px; }.chat-welcome p { font-size:10px; }.prompt-rail { margin-left:0; }.prompt-rail button { font-size:8px; padding:6px 8px; }.surface-actions .surface-live { display:none; }.lens-body { grid-template-columns:1fr; }.lens-viewport { min-height:180px; }.lens-side { gap:7px; }.source-rack { gap:5px; }.source-rack article { min-height:95px; padding:9px; }.source-rack strong { font-size:9px; }.source-rack small { font-size:8px; }.clerking-body { grid-template-columns:auto 1fr; }.record-orb { width:64px; height:64px; }.clerk-fields { grid-template-columns:repeat(2,1fr); }.slide-stage { min-height:230px; }.slide-copy h2 { font-size:26px; }.image-body canvas { min-height:190px; }.sphere-orbit-plane { top:43%; width:210px; height:96px; }.sphere-shell { top:43%; width:178px; height:204px; transform:translate(-50%,-50%) translateZ(90px) scale(.92); }.sphere-fallback { width:142px; height:142px; left:18px; }.sphere-mount .mdxs { width:178px!important; height:188px!important; }.sphere-state { top:171px; font-size:7px; }.sphere-callout { top:calc(43% + 105px); font-size:7px; }.spatial-composer { bottom:17px; width:calc(100vw - 24px); height:55px; border-radius:18px; }.audio-control { bottom:81px; }.audio-control button { min-width:132px; padding:7px 9px; }.spatial-toast { top:180px; } }

/* Spatial v17: populated Canva previews, semantic image drafts, and a
   synchronized Sphere + supporting-tab explanation surface. */
.slide-deck-preview { min-height:180px; padding:11px; border:1px solid rgba(139,232,251,.22); border-radius:15px; background:linear-gradient(145deg,rgba(119,228,246,.08),rgba(7,23,36,.28)); }
.slide-deck-preview.is-drafting { border-color:rgba(184,159,255,.46); box-shadow:0 0 24px rgba(184,159,255,.09),inset 0 0 22px rgba(184,159,255,.04); }
.slide-deck-preview.is-drafting .deck-slide-card { animation:deck-card-in 1.3s ease-in-out infinite alternate; }
.slide-deck-preview.is-drafting .deck-slide-card:nth-child(2n) { animation-delay:.25s; }
.story-progress { position:absolute; left:0; right:0; bottom:0; display:block; width:25%; height:3px; border-radius:99px; background:linear-gradient(90deg,var(--space-cyan),var(--space-violet)); box-shadow:0 0 14px rgba(131,232,250,.72); transition:width .45s ease; }
.story-depth-readout { display:block; margin-top:8px; color:rgba(205,231,238,.56); font:8px 'DM Mono',monospace; letter-spacing:.03em; }
.story-depth-readout b { color:var(--space-cyan); font-weight:500; }
.story-controls { display:flex; gap:5px; flex:none; }
.story-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding-top:4px; border-top:1px solid rgba(224,246,252,.1); }
.story-toolbar button { padding:6px 8px; border:1px solid rgba(224,246,252,.18); border-radius:8px; color:rgba(235,250,253,.78); background:rgba(255,255,255,.045); cursor:pointer; font:8px 'DM Mono',monospace; }
.story-toolbar button:hover { border-color:rgba(131,232,250,.55); color:#fff; }
.story-toolbar span { margin-left:auto; color:rgba(205,231,238,.48); font:7px 'DM Mono',monospace; }
#drawing-canvas.is-generating { border-color:rgba(184,159,255,.7); box-shadow:0 0 30px rgba(184,159,255,.18),inset 0 0 25px rgba(131,232,250,.08); }
@keyframes deck-card-in { from { transform:translateY(1px); opacity:.72; } to { transform:translateY(-3px); opacity:1; } }
@media (max-width:600px) { .story-toolbar span { width:100%; margin-left:0; }.story-controls { width:100%; }.story-controls .surface-button { flex:1; justify-content:center; } }
.sphere-state { display:none; }

/* Initial Spatial shell: open camera first, with a small dock and the Sphere below it. */
.spatial-scene { background:#3b6570; }
.camera-softness { background:linear-gradient(180deg,rgba(8,19,26,.015),rgba(8,19,26,0) 58%,rgba(8,19,26,.07)),radial-gradient(circle at 50% 42%,transparent 0 48%,rgba(6,15,24,.07) 100%); }
.camera-grid { opacity:.025; }
.spatial-topbar { top:14px; left:18px; right:18px; }
.spatial-brand { opacity:.9; }
.top-presence { opacity:.62; }
.spatial-control { background:rgba(248,253,255,.08); }
.spatial-dock { top:86px; width:min(310px,calc(100vw - 40px)); padding:8px 9px 8px; border-radius:21px; background:linear-gradient(145deg,rgba(229,245,247,.22),rgba(13,35,47,.18)); box-shadow:0 16px 42px rgba(8,29,38,.16),inset 0 1px rgba(255,255,255,.2); backdrop-filter:blur(9px) saturate(1.04); }
.dock-head { padding:0 1px 6px; }
.dock-head > div { display:block; }
.dock-head strong { display:none; }
.dock-eyebrow { font-size:7px; letter-spacing:.18em; }
.dock-close { width:23px; height:23px; border-radius:9px; font-size:14px; }
.dock-items { gap:2px; }
.dock-item { gap:0; padding:6px 2px; border-radius:11px; }
.dock-item span { width:22px; height:22px; font-size:15px; }
.dock-item b { display:none; }
.dock-foot { padding:5px 1px 0; font-size:7px; opacity:.68; }
.dock-reopen { top:88px; padding:8px 10px; border-radius:13px; }
.surface-host { pointer-events:none; }
.spatial-surface { pointer-events:auto; }
.sphere-orbit-plane { top:63%; width:260px; height:118px; transform:translate(-50%,-50%) translateZ(48px) rotate(-12deg); opacity:.78; }
.sphere-shell { top:63%; width:210px; height:238px; transform:translate(-50%,-50%) translateZ(120px) scale(var(--sphere-scale,1)); }
.sphere-fallback { width:166px; height:166px; left:22px; top:12px; box-shadow:0 0 0 1px rgba(186,238,255,.22),0 0 50px rgba(91,205,255,.68),0 35px 76px rgba(0,0,0,.42),inset -21px -27px 35px rgba(1,8,18,.36); }
.sphere-mount .mdxs { width:210px!important; height:220px!important; filter:drop-shadow(0 28px 34px rgba(0,0,0,.3)); }
.sphere-callout { top:calc(63% + 123px); background:rgba(9,31,43,.18); }
.audio-control { left:50%; bottom:17px; transform:translateX(-50%) translateZ(140px); }
.audio-control button { min-width:145px; padding:8px 11px; border-color:rgba(233,250,252,.3); background:rgba(12,38,49,.2); box-shadow:0 12px 32px rgba(4,20,27,.18),inset 0 1px rgba(255,255,255,.16); }
.spatial-composer { display:none!important; }

@media (min-width:901px) {
  .spatial-dock { top:92px; }
  .sphere-orbit-plane { top:64%; }
  .sphere-shell { top:64%; }
  .sphere-callout { top:calc(64% + 123px); }
  .audio-control { left:50%; bottom:22px; }
}
@media (max-width:600px) {
  .spatial-topbar { top:12px; left:13px; right:13px; }
  .spatial-dock { top:80px; width:min(302px,calc(100vw - 34px)); padding:7px 8px; border-radius:19px; }
  .dock-head { padding-bottom:5px; }
  .dock-item { padding:5px 1px; }
  .dock-item span { width:21px; height:21px; }
  .dock-foot { display:none; }
  .dock-reopen { top:82px; }
  .sphere-orbit-plane { top:62%; width:236px; height:104px; }
  .sphere-shell { top:62%; width:200px; height:226px; transform:translate(-50%,-50%) translateZ(120px) scale(.96); }
  .sphere-fallback { width:158px; height:158px; left:21px; }
  .sphere-mount .mdxs { width:200px!important; height:210px!important; }
  .sphere-callout { top:calc(62% + 116px); font-size:7px; }
  .audio-control { bottom:15px; }
  .audio-control button { min-width:138px; padding:7px 10px; }
  .spatial-toast { top:156px; }
}

/* Live Workspace previews stay hidden until the provider proves that the
   session loaded. A blocked iframe therefore never leaves an empty glass
   rectangle behind; the verified API/MCP result and original-app action remain
   visible below it. */
.mdx-live-workspace-preview { display:grid; gap:7px; margin:0 0 12px; padding:10px; border:1px solid rgba(151,231,247,.18); border-radius:14px; background:rgba(4,18,29,.28); }
.mdx-live-workspace-preview img { display:block; width:100%; max-height:220px; object-fit:contain; border-radius:9px; background:rgba(0,0,0,.15); }
.mdx-live-workspace-preview iframe { width:100%; min-height:260px; border:0; border-radius:9px; background:rgba(0,0,0,.15); }
.mdx-live-workspace-preview-status { color:rgba(220,244,249,.72); font-size:10px; }
.mdx-live-workspace-preview-status.is-fallback { color:#ffd5bd; }
.mdx-live-workspace-preview figcaption,.mdx-live-workspace-preview small { color:rgba(211,231,238,.55); font-size:9px; }

.spatial-quick-look-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; margin:8px auto; padding:8px 12px; border:1px solid rgba(168,239,250,.35); border-radius:999px; color:#d9fbff; background:rgba(88,193,218,.14); font:700 10px/1 'DM Mono',monospace; text-decoration:none; }
.spatial-quick-look-link:hover,.spatial-quick-look-link:focus-visible { border-color:#a8effa; background:rgba(88,193,218,.25); outline:0; }

/* Spatial v23: stronger depth, still locked to the upper/lower center lanes.
   Motion changes perspective and bounded parallax only; it never owns layout. */
.spatial-stage { perspective:980px!important; perspective-origin:50% 46%; transform-style:preserve-3d!important; }
.spatial-dock { top:clamp(24px,4.5vh,52px)!important; transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),72px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; box-shadow:0 30px 84px rgba(3,17,28,.34),inset 0 1px rgba(255,255,255,.24)!important; }
.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel { top:clamp(24px,4.5vh,52px)!important; transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),72px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),360px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; filter:drop-shadow(0 42px 66px rgba(0,0,0,.38))!important; }
.sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),112px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; box-shadow:0 0 64px rgba(100,224,244,.19),0 30px 54px rgba(3,18,28,.28)!important; }
.spatial-scene[data-state="listening"] .sphere-shell,.spatial-scene[data-state="speaking"] .sphere-shell { --sphere-scale:1.025; }
@media (max-width:600px) {
  .spatial-dock,.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel { top:clamp(22px,4vh,42px)!important; }
  .sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),300px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; }
  .sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),96px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
}

/* Spatial motion recovery: keep the earlier AR-like parallax and perspective,
   but reserve a soft centre corridor for both primary objects. The JS motion
   controller supplies spring-smoothed, viewport-aware offsets. */
.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel {
  will-change: transform;
  transition: transform .12s linear, box-shadow .3s ease, width .55s cubic-bezier(.2,.9,.2,1) !important;
}
.spatial-scene.scene-graph-ready .sphere-shell,
.spatial-scene.scene-graph-ready .sphere-orbit-plane {
  will-change: transform;
  transition: transform .12s linear, top .55s cubic-bezier(.2,.9,.2,1) !important;
}
.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel,
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell,
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-orbit-plane {
  backface-visibility: hidden;
}
.spatial-dock[data-panel-state="compact"] .window-tab { transform: translateZ(18px); }
.spatial-dock[data-panel-state="expanded"] .surface-host { min-width: 0; overflow-x: hidden; }
.creative-body, .canva-live-preview, .slide-deck-preview, .deck-slide-strip { min-width: 0; }
.slide-export-bar { position: sticky; bottom: 0; z-index: 5; padding-top: 7px; background: linear-gradient(180deg, transparent, rgba(7,23,36,.92) 28%); }
@media (max-width:600px) {
  .deck-slide-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .deck-slide-card { min-width: 0; }
}

/* Spatial depth pass: preserve a centered base while allowing bounded sensor
   offsets to create parallax. The dock stays behind the Sphere, and the
   optional proximity scale is deliberately small enough to feel stable. */
.spatial-scene { perspective:1600px; transform-style:preserve-3d; --spatial-depth-scale:1; --spatial-sphere-depth-scale:1; }
.spatial-stage { perspective:1400px; transform-style:preserve-3d; }
.spatial-dock { transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),40px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; transform-origin:50% 50% 0; }
.spatial-dock[data-panel-state="expanded"] { box-shadow:0 44px 90px rgba(0,0,0,.34),0 10px 28px rgba(67,214,235,.12),inset 0 1px rgba(255,255,255,.16)!important; }
.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; transform-origin:50% 50% 0; }
.sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),88px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
.sphere-aura { transform:translateZ(20px) scale(1.06); }
.sphere-shadow { transform:translateZ(-26px) scaleX(1.08); }
.surface-host { transform-style:preserve-3d; }
.spatial-surface { box-shadow:0 26px 54px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.12)!important; }

/* A single accessible toggle, lifted into the mobile browser safe area. */
.audio-control { left:auto!important; right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; transform:translateZ(300px)!important; }
.audio-control .voice-toggle { display:grid!important; place-items:center!important; width:58px!important; min-width:58px!important; height:58px!important; min-height:58px!important; padding:0!important; border-radius:50%!important; }
.audio-control .voice-icon { display:grid!important; place-items:center!important; width:34px!important; height:34px!important; }
.audio-control .voice-copy { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (min-width:901px) { .audio-control { right:24px!important; bottom:34px!important; } }
@media (max-width:600px) { .audio-control { right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; } }

/* Spatial v21: larger front-layer Sphere and a true compact island. These
   final overrides intentionally sit at EOF so older experimental cascades
   cannot re-expand the panel or shrink the main presence. */
.spatial-dock[data-panel-state="compact"] { width:min(250px,calc(100vw - 28px))!important; height:54px!important; border-radius:99px!important; }
.spatial-dock[data-panel-state="compact"] .surface-host,.spatial-dock[data-panel-state="medium"] .surface-host { display:none!important; }
.spatial-dock[data-panel-state="medium"] { width:min(350px,calc(100vw - 28px))!important; border-radius:28px!important; }
.spatial-dock[data-panel-state="expanded"] { width:min(620px,calc(100vw - 28px))!important; border-radius:26px!important; }
.spatial-dock[data-panel-state="expanded"] .surface-host { display:block!important; }
.spatial-dock[data-panel-state="expanded"] .spatial-surface { transform:translateZ(-28px)!important; }
.spatial-dock[data-panel-state="expanded"] .surface-head { transform:translateZ(10px)!important; }
.spatial-dock[data-panel-state="expanded"] .window-chrome { transform:translateZ(24px)!important; }
.spatial-scene[data-panel-state="compact"] .sphere-shell { top:61%!important; }
.spatial-scene[data-panel-state="medium"] .sphere-shell { top:69%!important; }
.sphere-shell { --sphere-scale:1.38!important; width:334px!important; height:372px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(var(--sphere-scale,1))!important; filter:drop-shadow(0 38px 52px rgba(0,0,0,.3))!important; }
.sphere-fallback { width:292px!important; height:292px!important; left:21px!important; top:12px!important; box-shadow:0 0 0 1px rgba(186,238,255,.32),0 0 76px rgba(91,205,255,.78),0 52px 108px rgba(0,0,0,.54),inset -32px -38px 52px rgba(1,8,18,.46)!important; }
.sphere-mount .mdxs { width:334px!important; height:350px!important; filter:drop-shadow(0 38px 48px rgba(0,0,0,.48))!important; }
.sphere-aura { inset:-12px -4px 56px!important; filter:blur(38px)!important; }
.sphere-shadow { left:32px!important; right:25px!important; bottom:20px!important; height:30px!important; filter:blur(16px)!important; }
.sphere-state { top:322px!important; }
.sphere-orbit-plane { width:374px!important; height:170px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),88px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y))!important; }
.sphere-shell,.sphere-orbit-plane { will-change:transform; }
.chat-message p .is-speaking { color:#f4fdff; text-shadow:0 0 14px rgba(121,231,244,.35); }
.audio-control { z-index:260!important; }
.audio-control .voice-toggle { min-width:138px!important; min-height:43px!important; border-radius:99px!important; }
.canva-live-preview { display:grid; gap:5px; padding:8px; border:1px solid rgba(139,232,251,.2); border-radius:14px; background:linear-gradient(145deg,rgba(119,228,246,.08),rgba(7,23,36,.34)); }
.canva-live-preview > p { margin:0; color:rgba(211,236,242,.55); font:7px 'DM Mono',monospace; }
.canva-canvas-stage { position:relative; min-height:86px; overflow:hidden; border-radius:10px; background:linear-gradient(135deg,rgba(85,178,210,.2),rgba(14,33,49,.62)); box-shadow:inset 0 1px rgba(255,255,255,.13); }
.canva-canvas-stage::before { content:"LIVE CANVA CREATION"; position:absolute; top:10px; left:12px; color:rgba(230,250,253,.45); font:7px 'DM Mono',monospace; letter-spacing:.12em; }
.canva-cursor { position:absolute; top:var(--cursor-y,42%); left:var(--cursor-x,46%); width:12px; height:17px; opacity:0; border:1px solid #f7ffff; background:#8beafa; clip-path:polygon(0 0,100% 66%,59% 69%,77% 100%,61% 100%,44% 72%,17% 94%); filter:drop-shadow(0 0 9px rgba(121,231,244,.9)); transition:left .7s cubic-bezier(.22,1,.3,1),top .7s cubic-bezier(.22,1,.3,1),opacity .25s ease; }
.canva-cursor.is-active { opacity:1; animation:canva-cursor-pulse 1.4s ease-in-out infinite; }
.canva-cursor-label { position:absolute; right:12px; bottom:10px; color:rgba(235,251,255,.78); font:7px 'DM Mono',monospace; }
@keyframes canva-cursor-pulse { 50% { filter:drop-shadow(0 0 15px rgba(180,154,255,.95)); transform:scale(1.08); } }
@media (max-width:600px) {
  .spatial-dock[data-panel-state="compact"] { width:min(250px,calc(100vw - 24px))!important; }
  .spatial-dock[data-panel-state="expanded"] { width:calc(100vw - 28px)!important; }
  .sphere-shell { --sphere-scale:1.42!important; width:300px!important; height:334px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(var(--sphere-scale,.94))!important; }
  .sphere-fallback { width:258px!important; height:258px!important; left:21px!important; }
  .sphere-mount .mdxs { width:300px!important; height:314px!important; }
  .sphere-state { top:286px!important; }
  .sphere-orbit-plane { width:326px!important; height:150px!important; }
  .spatial-scene[data-panel-state="compact"] .sphere-shell { top:61%!important; }
  .spatial-scene[data-panel-state="medium"] .sphere-shell { top:68%!important; }
}

/* Spatial v23 final cascade: stronger parallax/depth with safe center lanes. */
.spatial-stage { perspective:980px!important; perspective-origin:50% 46%; transform-style:preserve-3d!important; }
.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel { top:clamp(24px,4.5vh,52px)!important; transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),72px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; box-shadow:0 30px 84px rgba(3,17,28,.34),inset 0 1px rgba(255,255,255,.24)!important; }
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell,.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),360px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; filter:drop-shadow(0 42px 66px rgba(0,0,0,.38))!important; }
.sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),112px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; box-shadow:0 0 64px rgba(100,224,244,.19),0 30px 54px rgba(3,18,28,.28)!important; }
.spatial-scene[data-state="listening"] .sphere-shell,.spatial-scene[data-state="speaking"] .sphere-shell { --sphere-scale:1.025; }
@media (max-width:600px) {
  .spatial-stage { perspective:820px!important; }
  .spatial-scene.scene-graph-ready .spatial-dock.spatial-panel { top:clamp(22px,4vh,42px)!important; }
  .spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell,.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),300px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; }
  .sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),96px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
}

/* Spatial v23 final cascade: stronger parallax/depth with safe center lanes. */
.spatial-stage { perspective:980px!important; perspective-origin:50% 46%; transform-style:preserve-3d!important; }
.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel { top:clamp(24px,4.5vh,52px)!important; transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),72px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; box-shadow:0 30px 84px rgba(3,17,28,.34),inset 0 1px rgba(255,255,255,.24)!important; }
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell,.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),360px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; filter:drop-shadow(0 42px 66px rgba(0,0,0,.38))!important; }
.sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),112px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; box-shadow:0 0 64px rgba(100,224,244,.19),0 30px 54px rgba(3,18,28,.28)!important; }
.spatial-scene[data-state="listening"] .sphere-shell,.spatial-scene[data-state="speaking"] .sphere-shell { --sphere-scale:1.025; }
@media (max-width:600px) {
  .spatial-stage { perspective:820px!important; }
  .spatial-scene.scene-graph-ready .spatial-dock.spatial-panel { top:clamp(22px,4vh,42px)!important; }
  .spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell,.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),300px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; }
  .sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),96px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
}

/* End-of-file motion guard: JS supplies spring-smoothed, viewport-safe
   parallax offsets so both objects remain recoverable after a large tilt. */
.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel,
.spatial-scene.scene-graph-ready .sphere-shell,
.spatial-scene.scene-graph-ready .sphere-orbit-plane { will-change: transform; backface-visibility: hidden; transition: transform .12s linear !important; }
.spatial-dock[data-panel-state="compact"] .window-tab { transform: translateZ(18px); }
.spatial-dock[data-panel-state="expanded"] .surface-host { min-width: 0; overflow-x: hidden; }
.creative-body, .canva-live-preview, .slide-deck-preview, .deck-slide-strip { min-width: 0; }
.slide-export-bar { position: sticky; bottom: 0; z-index: 5; padding-top: 7px; background: linear-gradient(180deg, transparent, rgba(7,23,36,.92) 28%); }
@media (max-width:600px) {
  .deck-slide-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .deck-slide-card { min-width: 0; }
}

/* Spatial motion recovery: retain visible AR-like parallax while reserving a
   soft centre corridor. Motion values are spring-smoothed and viewport-safe. */
.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel,
.spatial-scene.scene-graph-ready .sphere-shell,
.spatial-scene.scene-graph-ready .sphere-orbit-plane { will-change: transform; backface-visibility: hidden; transition: transform .12s linear, box-shadow .3s ease !important; }
.spatial-dock[data-panel-state="compact"] .window-tab { transform: translateZ(18px); }
.spatial-dock[data-panel-state="expanded"] .surface-host { min-width: 0; overflow-x: hidden; }
.creative-body, .canva-live-preview, .slide-deck-preview, .deck-slide-strip { min-width: 0; }
.slide-export-bar { position: sticky; bottom: 0; z-index: 5; padding-top: 7px; background: linear-gradient(180deg, transparent, rgba(7,23,36,.92) 28%); }
@media (max-width:600px) {
  .deck-slide-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .deck-slide-card { min-width: 0; }
}
/* terminal-spatial-cascade-anchor */

/* Final spatial depth and mobile safe-area contract. Keep this terminal so
   the centered composition wins over legacy visual variants above it. */
.spatial-scene { perspective:1600px; transform-style:preserve-3d; --spatial-depth-scale:1; --spatial-sphere-depth-scale:1; }
.spatial-stage { perspective:1400px; transform-style:preserve-3d; }
.spatial-dock { transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),40px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; transform-origin:50% 50% 0; }
.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; transform-origin:50% 50% 0; }
.sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),88px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; transform-origin:50% 50% 0; }
.audio-control { left:auto!important; right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; transform:translateZ(300px)!important; }
.audio-control .voice-toggle { display:grid!important; place-items:center!important; width:58px!important; min-width:58px!important; height:58px!important; min-height:58px!important; padding:0!important; border-radius:50%!important; }
.audio-control .voice-icon { display:grid!important; place-items:center!important; width:34px!important; height:34px!important; }
.audio-control .voice-copy { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (min-width:901px) { .audio-control { right:24px!important; bottom:34px!important; } }
@media (max-width:600px) {
  .audio-control { right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; }
  .sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; }
}

/* Final spatial depth and mobile safe-area rules. */
.spatial-scene { perspective:1600px; transform-style:preserve-3d; --spatial-depth-scale:1; --spatial-sphere-depth-scale:1; }
.spatial-stage { perspective:1400px; transform-style:preserve-3d; }
.spatial-dock { transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),40px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; transform-origin:50% 50% 0; }
.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; transform-origin:50% 50% 0; }
.sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),88px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
.audio-control { left:auto!important; right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; transform:translateZ(300px)!important; }
.audio-control .voice-toggle { display:grid!important; place-items:center!important; width:58px!important; min-width:58px!important; height:58px!important; min-height:58px!important; padding:0!important; border-radius:50%!important; }
.audio-control .voice-icon { display:grid!important; place-items:center!important; width:34px!important; height:34px!important; }
.audio-control .voice-copy { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (min-width:901px) { .audio-control { right:24px!important; bottom:34px!important; } }
@media (max-width:600px) { .audio-control { right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; } .sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; } }

/* Final spatial depth and safe-area cascade. */
.spatial-scene { perspective:1600px; transform-style:preserve-3d; --spatial-depth-scale:1; --spatial-sphere-depth-scale:1; }
.spatial-stage { perspective:1400px; transform-style:preserve-3d; }
.spatial-dock { transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),40px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; transform-origin:50% 50% 0; }
.spatial-dock[data-panel-state="expanded"] { box-shadow:0 44px 90px rgba(0,0,0,.34),0 10px 28px rgba(67,214,235,.12),inset 0 1px rgba(255,255,255,.16)!important; }
.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; transform-origin:50% 50% 0; }
.sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),88px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
.sphere-aura { transform:translateZ(20px) scale(1.06); }
.sphere-shadow { transform:translateZ(-26px) scaleX(1.08); }
.surface-host { transform-style:preserve-3d; }
.audio-control { left:auto!important; right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; transform:translateZ(300px)!important; }
.audio-control .voice-toggle { display:grid!important; place-items:center!important; width:58px!important; min-width:58px!important; height:58px!important; min-height:58px!important; padding:0!important; border-radius:50%!important; }
.audio-control .voice-icon { display:grid!important; place-items:center!important; width:34px!important; height:34px!important; }
.audio-control .voice-copy { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (min-width:901px) { .audio-control { right:24px!important; bottom:34px!important; } }
@media (max-width:600px) {
  .audio-control { right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; }
  .sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; }
}

/* Final spatial depth cascade. */
.spatial-scene { perspective:1600px; transform-style:preserve-3d; --spatial-depth-scale:1; --spatial-sphere-depth-scale:1; }
.spatial-stage { perspective:1400px; transform-style:preserve-3d; }
.spatial-dock { transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),40px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; transform-origin:50% 50% 0; }
.spatial-dock[data-panel-state="expanded"] { box-shadow:0 44px 90px rgba(0,0,0,.34),0 10px 28px rgba(67,214,235,.12),inset 0 1px rgba(255,255,255,.16)!important; }
.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; transform-origin:50% 50% 0; }
.sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),88px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
.sphere-aura { transform:translateZ(20px) scale(1.06); }
.sphere-shadow { transform:translateZ(-26px) scaleX(1.08); }
.surface-host { transform-style:preserve-3d; }
.spatial-surface { box-shadow:0 26px 54px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.12)!important; }
.audio-control { left:auto!important; right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; transform:translateZ(300px)!important; }
.audio-control .voice-toggle { display:grid!important; place-items:center!important; width:58px!important; min-width:58px!important; height:58px!important; min-height:58px!important; padding:0!important; border-radius:50%!important; }
.audio-control .voice-icon { display:grid!important; place-items:center!important; width:34px!important; height:34px!important; }
.audio-control .voice-copy { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (min-width:901px) { .audio-control { right:24px!important; bottom:34px!important; } }
@media (max-width:600px) {
  .audio-control { right:max(14px,env(safe-area-inset-right))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; }
  .sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; }
}

/* Final perspective compensation for the front Sphere. */
.sphere-shell { width:334px!important; height:372px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * 1.38))!important; }
@media (max-width:600px) { .sphere-shell { width:300px!important; height:334px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * 1.42))!important; } }

/* Perspective compensation must be final because the scene graph owns a
   separate transform rule for registered Sphere nodes. */
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { width:334px!important; height:372px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * 1.38))!important; }
@media (max-width:600px) { .spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { width:300px!important; height:334px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * 1.42))!important; } }
.sphere-shell { width:334px!important; height:372px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * 1.38))!important; }
@media (max-width:600px) { .sphere-shell { width:300px!important; height:334px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * 1.42))!important; } }

/* Perspective compresses objects as they move toward the viewer. Compensate
   only with scale, while the stable centred base and bounded parallax remain
   the position controller. */
.sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * 1.38))!important; }
@media (max-width:600px) { .sphere-shell { transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * 1.42))!important; } }

/* Spatial v20: Dynamic Island shell + depth-first composition. The panel has
   one centered home, three visual states, and the Sphere always owns the front
   layer. */
.spatial-scene { --panel-spring:cubic-bezier(.22,1.12,.28,1); --panel-ease:cubic-bezier(.2,.8,.2,1); }
.spatial-dock { top:clamp(30px,5vh,58px)!important; width:min(294px,calc(100vw - 32px))!important; padding:0!important; border-radius:27px!important; transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),42px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y))!important; transition:width .62s var(--panel-spring),border-radius .5s var(--panel-ease),transform .42s var(--panel-ease),box-shadow .42s ease,background .42s ease!important; will-change:transform,width; }
.spatial-dock::before { content:""; position:absolute; z-index:-1; inset:-18px -24px; border-radius:40px; background:radial-gradient(ellipse at 50% 0,rgba(154,237,250,.18),transparent 64%); filter:blur(22px); opacity:.6; pointer-events:none; }
.window-chrome { min-height:54px!important; padding:8px 10px!important; border-bottom-color:rgba(235,250,252,.18)!important; transform:translateZ(18px); transform-style:preserve-3d; }
.window-tab { min-width:126px!important; height:36px!important; border-radius:99px!important; background:rgba(239,252,254,.13)!important; box-shadow:inset 0 1px rgba(255,255,255,.2),0 10px 24px rgba(5,22,31,.18)!important; transition:transform .35s var(--panel-spring),background .25s ease,box-shadow .25s ease!important; }
.window-tab:hover { transform:translateY(-1px) scale(1.015); }
.spatial-dock[data-panel-state="compact"] { width:min(246px,calc(100vw - 32px))!important; border-radius:99px!important; background:linear-gradient(145deg,rgba(229,249,250,.28),rgba(8,27,39,.42))!important; box-shadow:0 18px 48px rgba(4,20,29,.26),inset 0 1px rgba(255,255,255,.26)!important; }
.spatial-dock[data-panel-state="compact"] .window-chrome { min-height:52px!important; border-bottom:0!important; }
.spatial-dock[data-panel-state="compact"] .window-tab { justify-self:center; min-width:132px!important; background:rgba(239,252,254,.18)!important; }
.spatial-dock[data-panel-state="compact"] .window-more,.spatial-dock[data-panel-state="compact"] .window-close { display:none!important; }
.spatial-dock[data-panel-state="compact"] .surface-host,.spatial-dock[data-panel-state="compact"] .window-location,.spatial-dock[data-panel-state="compact"] .window-idle { display:none!important; }
.spatial-dock[data-panel-state="medium"] { width:min(352px,calc(100vw - 32px))!important; border-radius:25px!important; }
.spatial-dock[data-panel-state="medium"] .surface-host { display:none!important; }
.spatial-dock[data-panel-state="medium"] .window-location { display:flex!important; height:27px; margin:0 10px 7px; }
.spatial-dock[data-panel-state="medium"] .window-idle { display:flex!important; padding:0 12px 11px; }
.spatial-dock[data-panel-state="expanded"] { width:min(620px,calc(100vw - 32px))!important; border-radius:25px!important; background:linear-gradient(145deg,rgba(228,248,250,.25),rgba(7,25,37,.42))!important; box-shadow:0 26px 76px rgba(3,19,29,.32),inset 0 1px rgba(255,255,255,.24)!important; }
.spatial-dock[data-panel-state="expanded"] .surface-host { display:block!important; }
.spatial-dock[data-panel-state="expanded"] .window-location { display:flex!important; margin-bottom:8px; }
.spatial-dock[data-panel-state="expanded"] .spatial-surface { height:min(382px,calc(100vh - 360px))!important; min-height:270px!important; transform:translateZ(-14px); border-radius:19px!important; box-shadow:0 20px 54px rgba(3,17,28,.28),inset 0 1px rgba(255,255,255,.16)!important; }
.spatial-dock[data-panel-state="expanded"] .surface-host { transform-style:preserve-3d; }
.spatial-dock[data-panel-state="expanded"] .surface-head { transform:translateZ(6px); }
.spatial-dock[data-panel-state="expanded"] .surface-body { transform:translateZ(1px); }
.spatial-dock[data-panel-state="expanded"] .window-tab { box-shadow:inset 0 1px rgba(255,255,255,.22),0 14px 30px rgba(5,22,31,.24)!important; }
.spatial-scene[data-panel-state="compact"] .sphere-shell { top:59%!important; }
.spatial-scene[data-panel-state="medium"] .sphere-shell { top:68%!important; }
.spatial-scene[data-panel-state="expanded"] .sphere-shell { top:77%!important; }
.sphere-orbit-plane { top:77%!important; width:310px!important; height:142px!important; opacity:.92!important; border-color:rgba(130,230,247,.34)!important; transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),78px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y))!important; box-shadow:0 0 54px rgba(100,224,244,.14),0 26px 46px rgba(3,18,28,.2)!important; }
.sphere-shell { top:77%!important; width:270px!important; height:300px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),210px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(var(--sphere-scale,1))!important; transition:top .7s var(--panel-spring),transform .42s var(--panel-ease)!important; filter:drop-shadow(0 30px 38px rgba(0,0,0,.22)); }
.sphere-fallback { width:218px!important; height:218px!important; left:26px!important; top:12px!important; box-shadow:0 0 0 1px rgba(186,238,255,.28),0 0 64px rgba(91,205,255,.74),0 42px 92px rgba(0,0,0,.5),inset -28px -34px 46px rgba(1,8,18,.42)!important; }
.sphere-mount .mdxs { width:270px!important; height:286px!important; filter:drop-shadow(0 32px 40px rgba(0,0,0,.42))!important; }
.sphere-aura { inset:-4px 2px 55px!important; filter:blur(30px)!important; opacity:.92; }
.sphere-shadow { left:28px!important; right:22px!important; bottom:23px!important; height:26px!important; filter:blur(13px)!important; opacity:.78; }
.sphere-state { top:254px!important; font-size:8px!important; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.spatial-scene[data-panel-state="compact"] .sphere-orbit-plane { top:59%!important; }
.spatial-scene[data-panel-state="medium"] .sphere-orbit-plane { top:68%!important; }
.spatial-scene[data-panel-state="expanded"] .sphere-orbit-plane { top:77%!important; }
.audio-control { bottom:16px!important; transform:translateX(-50%) translateZ(160px)!important; }

.guideline-footer { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:16px; padding-top:10px; border-top:1px solid rgba(224,246,252,.1); color:rgba(218,239,244,.58); font:7px 'DM Mono',monospace; letter-spacing:.01em; }
.guideline-footer button { border:0; padding:0; color:var(--space-cyan); background:transparent; cursor:pointer; font:inherit; font-weight:700; }
.guideline-region-trigger { display:inline-flex; align-items:center; gap:3px; }
.guideline-sources { color:rgba(232,248,251,.78)!important; }
.guideline-region-menu { position:absolute; z-index:90; right:0; bottom:calc(100% + 8px); display:grid; min-width:168px; padding:6px; border:1px solid rgba(230,248,251,.2); border-radius:13px; background:rgba(6,24,36,.92); box-shadow:0 16px 36px rgba(2,14,24,.34); backdrop-filter:blur(20px); }
.guideline-region-menu[hidden],.spatial-citation-list[hidden] { display:none!important; }
.guideline-region-menu button { padding:8px 9px; border-radius:8px; color:rgba(232,248,251,.75); text-align:left; }
.guideline-region-menu button:hover,.guideline-region-menu button[aria-selected="true"] { color:#062333; background:#b9f1fa; }
.spatial-citation-list { display:grid; gap:5px; margin-top:7px; padding:8px 9px; border:1px solid rgba(224,246,252,.1); border-radius:10px; background:rgba(5,20,31,.2); }
.spatial-citation-list a { overflow:hidden; color:rgba(174,238,248,.78); font:7px/1.4 'DM Mono',monospace; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.spatial-citation-list a:hover { color:#fff; }

@media (max-width:600px) {
  .spatial-dock,.spatial-dock[data-panel-state="expanded"] { width:calc(100vw - 28px)!important; }
  .spatial-dock[data-panel-state="compact"] { width:min(246px,calc(100vw - 28px))!important; }
  .spatial-dock[data-panel-state="medium"] { width:min(330px,calc(100vw - 28px))!important; }
  .spatial-dock[data-panel-state="expanded"] .spatial-surface { height:min(348px,calc(100vh - 382px))!important; }
  .sphere-shell { width:238px!important; height:268px!important; }
  .sphere-fallback { width:192px!important; height:192px!important; left:23px!important; }
  .sphere-mount .mdxs { width:238px!important; height:254px!important; }
  .sphere-state { top:226px!important; }
  .sphere-orbit-plane { width:276px!important; height:126px!important; }
  .audio-control { bottom:13px!important; }
  .guideline-footer { margin-top:12px; }
}

@media (prefers-reduced-motion:reduce) {
  .spatial-dock,.sphere-shell,.sphere-orbit-plane,.window-tab { transition:none!important; }
}
.audio-control { transform:translateX(-50%); }

/* Spatial v12: the dock is a single command surface, never a tab bar. */
.spatial-scene { background:#18313f; }
.spatial-dock { top:clamp(30px,5.5vh,68px); width:min(390px,calc(100vw - 28px)); padding:10px 11px 9px; border-radius:22px; background:linear-gradient(145deg,rgba(224,246,249,.22),rgba(7,25,37,.27)); box-shadow:0 18px 52px rgba(5,24,34,.2),inset 0 1px rgba(255,255,255,.22); backdrop-filter:blur(16px) saturate(1.08); }
.dock-head { align-items:center; padding:0 0 9px; }
.dock-brand { display:flex; align-items:center; gap:9px; padding:0; border:0; color:#f5fdff; background:transparent; cursor:pointer; text-align:left; }
.dock-brand .brand-mark { width:31px; height:31px; border-radius:11px; font-size:15px; }
.dock-brand > span:last-child { display:grid; gap:3px; }
.dock-brand b { font-size:12px; letter-spacing:.18em; }
.dock-brand small { display:flex; align-items:center; gap:5px; color:rgba(220,240,245,.6); font:7px 'DM Mono',monospace; letter-spacing:.16em; }
.dock-brand small i,.dock-state i { width:5px; height:5px; border-radius:50%; background:var(--space-green); box-shadow:0 0 10px var(--space-green); }
.dock-actions { display:flex; align-items:center; gap:5px; }
.dock-state { display:flex; align-items:center; gap:5px; margin-right:2px; color:rgba(224,243,247,.6); font:7px 'DM Mono',monospace; letter-spacing:.12em; }
.dock-tool,.dock-close { display:grid; place-items:center; border:1px solid rgba(225,246,251,.18); color:rgba(243,251,255,.76); background:rgba(7,22,34,.17); cursor:pointer; backdrop-filter:blur(10px); }
.dock-tool { width:25px; height:25px; border-radius:9px; font-size:13px; }
.dock-close { width:25px; height:25px; border-radius:9px; font-size:15px; }
.dock-tool:hover,.dock-close:hover { border-color:rgba(143,231,251,.62); background:rgba(144,222,245,.12); }
.dock-command { display:flex; align-items:center; gap:8px; height:42px; padding:5px 6px 5px 10px; border:1px solid rgba(228,249,252,.25); border-radius:15px; background:rgba(4,19,30,.22); box-shadow:inset 0 1px rgba(255,255,255,.09); }
.dock-command > span { color:var(--space-cyan); font-size:15px; }
.dock-command input { min-width:0; flex:1; border:0; outline:0; color:#f5fdff; background:transparent; font-size:11px; }
.dock-command input::placeholder { color:rgba(227,244,248,.55); }
.dock-command button { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:10px; color:#082238; background:linear-gradient(135deg,#c9f4ff,#a9d9ff); cursor:pointer; font-size:17px; }
.dock-foot { align-items:center; padding:8px 2px 0; font-size:7px; }
.dock-route { margin-left:auto; color:rgba(223,244,248,.54); font-size:7px; letter-spacing:.12em; }
.surface-host { pointer-events:none; }
.spatial-surface { pointer-events:auto; top:156px; height:min(470px,calc(100vh - 245px)); }
.sphere-orbit-plane { top:62%; width:270px; height:122px; opacity:.8; }
.sphere-shell { top:62%; }
.sphere-callout { top:calc(62% + 123px); }
.audio-control { bottom:18px; }
.audio-control button { min-width:148px; border-color:rgba(233,250,252,.3); background:rgba(12,38,49,.26); }
.audio-control button::after { content:""; position:absolute; width:calc(12px + (var(--audio-level,0) * 28px)); height:2px; left:50%; bottom:-6px; transform:translateX(-50%); border-radius:99px; background:var(--space-green); box-shadow:0 0 10px var(--space-green); opacity:var(--audio-level,0); transition:width .08s linear,opacity .15s; }
.audio-control button { position:relative; }
.spatial-scene[data-state="listening"] .dock-state i,.spatial-scene[data-state="speaking"] .dock-state i { background:var(--space-cyan); box-shadow:0 0 11px var(--space-cyan); }
.spatial-scene[data-state="thinking"] .dock-state i { background:var(--space-violet); box-shadow:0 0 11px var(--space-violet); }

.external-toolbar,.image-prompt { display:flex; align-items:center; gap:8px; }
.external-toolbar { color:rgba(215,234,240,.62); font:8px 'DM Mono',monospace; }
.external-toolbar > span:nth-child(2) { margin-right:auto; }
.external-toolbar button,.image-prompt button { padding:7px 9px; border:1px solid rgba(223,244,250,.18); border-radius:9px; color:rgba(232,247,250,.86); background:rgba(255,255,255,.05); cursor:pointer; font-size:9px; }
.external-frame { position:relative; min-height:300px; overflow:hidden; border:1px solid rgba(225,245,251,.16); border-radius:16px; background:rgba(4,15,25,.28); }
.external-frame iframe { width:100%; height:300px; border:0; background:#fff; }
.external-frame-fallback { position:absolute; inset:auto 12px 12px; display:grid; gap:4px; padding:10px; border:1px solid rgba(225,245,251,.15); border-radius:12px; color:#eefcff; background:rgba(6,20,31,.72); backdrop-filter:blur(12px); }
.external-frame-fallback strong { font-size:11px; }.external-frame-fallback span { color:rgba(215,234,240,.68); font-size:9px; }.external-frame-fallback button { justify-self:start; margin-top:4px; }
.image-prompt input { min-width:0; flex:1; padding:10px; border:1px solid rgba(225,245,251,.18); border-radius:11px; outline:0; color:#f2fbff; background:rgba(255,255,255,.045); font-size:10px; }
.image-prompt input::placeholder { color:rgba(220,237,243,.52); }
.image-prompt button { color:#082238; background:linear-gradient(135deg,#c9f4ff,#a9d9ff); font-weight:800; }
.image-result { max-height:220px; overflow:hidden; border:1px solid rgba(141,233,250,.18); border-radius:14px; }.image-result img { display:block; width:100%; max-height:220px; object-fit:contain; background:#081725; }
.web-body { display:grid; gap:11px; }.web-summary { color:rgba(216,236,242,.76); font-size:10px; line-height:1.5; }.web-sources { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }.web-source { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; padding:9px; border:1px solid rgba(223,245,251,.12); border-radius:12px; color:#effbfe; background:rgba(255,255,255,.04); cursor:pointer; text-align:left; }.web-source:hover,.web-source.active { border-color:rgba(139,232,251,.52); background:rgba(139,232,251,.1); }.web-source span { grid-row:span 2; color:var(--space-cyan); font:8px 'DM Mono',monospace; }.web-source strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.web-source small { color:rgba(211,231,238,.56); font:8px 'DM Mono',monospace; }.web-frame { position:relative; min-height:180px; overflow:hidden; border:1px solid rgba(225,245,251,.14); border-radius:14px; background:rgba(4,15,25,.26); }.web-frame iframe { width:100%; height:180px; border:0; background:#fff; }

@media (min-width:901px) { .spatial-dock { top:clamp(34px,5vh,64px); }.spatial-surface { top:145px; }.sphere-orbit-plane,.sphere-shell { top:63%; }.sphere-callout { top:calc(63% + 123px); }.audio-control { bottom:20px; } }
@media (max-width:600px) { .spatial-dock { top:27px; width:calc(100vw - 24px); padding:8px 9px; }.dock-brand .brand-mark { width:29px; height:29px; }.dock-brand b { font-size:11px; }.dock-state { display:none; }.dock-command { height:40px; }.spatial-surface { top:142px; width:calc(100vw - 24px); height:calc(100vh - 240px); min-height:360px; }.sphere-orbit-plane,.sphere-shell { top:61%; }.sphere-callout { top:calc(61% + 116px); }.audio-control { bottom:14px; }.audio-control button { min-width:138px; }.web-sources { grid-template-columns:1fr; }.external-frame,.external-frame iframe { min-height:270px; height:270px; } }

/* Spatial v13: MedDex is a browser-like window, not a chat composer. */
.spatial-topbar,.room-context { display:none; }
.spatial-dock { top:clamp(30px,5vh,64px); width:min(382px,calc(100vw - 28px)); padding:0; overflow:hidden; border-radius:20px; border-color:rgba(232,248,251,.32); background:linear-gradient(145deg,rgba(225,245,247,.24),rgba(8,26,38,.34)); box-shadow:0 20px 62px rgba(3,19,28,.24),inset 0 1px rgba(255,255,255,.24); backdrop-filter:blur(20px) saturate(1.13); }
.window-chrome { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; min-height:54px; padding:8px 9px; border-bottom:1px solid rgba(235,250,252,.15); background:linear-gradient(180deg,rgba(245,253,254,.1),rgba(255,255,255,.025)); }
.window-nav,.window-actions { display:flex; align-items:center; gap:4px; }
.window-control { display:grid; place-items:center; width:27px; height:27px; padding:0; border:1px solid rgba(228,247,251,.16); border-radius:9px; color:rgba(242,251,253,.78); background:rgba(6,22,33,.17); cursor:pointer; font:20px/1 Arial,sans-serif; backdrop-filter:blur(10px); }
.window-control:hover { border-color:rgba(143,231,251,.62); color:#fff; background:rgba(144,222,245,.12); }
.window-control svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.window-tab { justify-self:center; display:flex; align-items:center; gap:8px; min-width:116px; height:35px; padding:0 13px; border:1px solid rgba(239,252,254,.25); border-radius:12px; color:#f6fdff; background:rgba(239,252,254,.13); box-shadow:inset 0 1px rgba(255,255,255,.16),0 7px 18px rgba(5,22,31,.12); cursor:pointer; }
.window-tab:hover { background:rgba(239,252,254,.2); }
.tab-glyph { display:grid; place-items:center; width:18px; height:18px; color:var(--space-cyan); font-size:13px; text-shadow:0 0 14px var(--space-cyan); }
.tab-title { overflow:hidden; font-size:11px; font-weight:750; letter-spacing:.01em; text-overflow:ellipsis; white-space:nowrap; }
.tab-live { display:grid; place-items:center; margin-left:auto; }
.tab-live i { width:5px; height:5px; border-radius:50%; background:var(--space-green); box-shadow:0 0 10px var(--space-green); }
.window-actions .dock-state { display:none; }
.window-close { font-size:15px; }
.window-location { display:flex; align-items:center; gap:7px; height:28px; margin:9px 10px 8px; padding:0 10px; overflow:hidden; border:1px solid rgba(233,249,252,.16); border-radius:10px; color:rgba(232,247,250,.7); background:rgba(5,21,32,.2); font:8px 'DM Mono',monospace; letter-spacing:.02em; }
.location-lock { color:var(--space-cyan); font-size:13px; }
.location-route { margin-left:auto; color:rgba(225,245,249,.45); font-size:7px; letter-spacing:.13em; }
.window-idle { display:flex; align-items:center; gap:7px; padding:0 12px 11px; color:rgba(212,234,240,.58); font:7px 'DM Mono',monospace; }
.window-idle .dock-signal { width:5px; height:5px; background:var(--space-green); box-shadow:0 0 10px var(--space-green); }
.spatial-dock:not(.has-surface) .surface-host { display:none; }
.spatial-dock.has-surface { width:min(690px,calc(100vw - 28px)); }
.spatial-dock.has-surface .window-tab { background:rgba(239,252,254,.18); }
.spatial-dock.has-surface .window-location { margin-bottom:9px; }
.spatial-dock.has-surface .window-idle { display:none; }
.spatial-dock.has-surface .surface-host { position:relative; inset:auto; z-index:auto; display:block; width:auto; height:auto; padding:0 10px 10px; transform:none; pointer-events:auto; }
.spatial-dock.has-surface .spatial-surface { position:relative; top:auto; left:auto; width:100%; height:min(400px,calc(100vh - 370px)); min-height:285px; margin:0; transform:none; border-radius:17px; box-shadow:0 16px 42px rgba(3,17,28,.22),inset 0 1px rgba(255,255,255,.16); }
.spatial-dock.has-surface .surface-head { cursor:grab; }
.spatial-dock.has-surface .surface-body { overflow:auto; }
.spatial-scene:has(.spatial-dock.has-surface) .sphere-shell { top:79%; transform:translate(-50%,-50%) translateZ(120px) scale(.84); }
.spatial-scene:has(.spatial-dock.has-surface) .sphere-orbit-plane { top:79%; transform:translate(-50%,-50%) translateZ(48px) rotate(-12deg) scale(.86); }
.spatial-scene:has(.spatial-dock.has-surface) .sphere-callout { display:none; }
.audio-control { bottom:18px; }

@media (min-width:901px) {
  .spatial-dock { top:clamp(34px,5vh,64px); }
  .spatial-dock.has-surface .spatial-surface { height:min(430px,calc(100vh - 360px)); }
  .spatial-scene:has(.spatial-dock.has-surface) .sphere-shell { top:80%; }
  .spatial-scene:has(.spatial-dock.has-surface) .sphere-orbit-plane { top:80%; }
}
@media (max-width:600px) {
  .spatial-dock { top:27px; width:calc(100vw - 24px); border-radius:18px; }
  .window-chrome { min-height:49px; gap:6px; padding:7px; }
  .window-control { width:25px; height:25px; border-radius:8px; }
  .window-tab { min-width:102px; height:32px; padding:0 10px; }
  .tab-title { font-size:10px; }
  .window-location { margin:8px 8px 7px; }
  .window-idle { padding:0 10px 9px; }
  .spatial-dock.has-surface { width:calc(100vw - 24px); }
  .spatial-dock.has-surface .surface-host { padding:0 7px 7px; }
  .spatial-dock.has-surface .spatial-surface { height:min(370px,calc(100vh - 390px)); min-height:270px; border-radius:15px; }
  .spatial-scene:has(.spatial-dock.has-surface) .sphere-shell { top:76%; transform:translate(-50%,-50%) translateZ(120px) scale(.78); }
  .spatial-scene:has(.spatial-dock.has-surface) .sphere-orbit-plane { top:76%; transform:translate(-50%,-50%) translateZ(48px) rotate(-12deg) scale(.78); }
}

/* Spatial v14: compact single tab and an explicit premium voice toggle. */
.spatial-dock:not(.has-surface) { width:min(294px,calc(100vw - 24px)); }
.window-chrome { min-height:50px; padding:7px 8px; }
.window-tab { min-width:108px; height:33px; padding:0 11px; }
.window-location { height:26px; margin:7px 9px 8px; }
.window-idle { display:none; }
.audio-control { bottom:16px; }
.voice-toggle { display:grid!important; grid-template-columns:32px 1fr auto; align-items:center; gap:9px; width:154px; min-width:0!important; height:52px; padding:6px 8px!important; border:1px solid rgba(235,251,254,.3)!important; border-radius:18px!important; color:#f4fcff!important; background:linear-gradient(145deg,rgba(239,253,255,.19),rgba(5,23,34,.45))!important; box-shadow:0 16px 38px rgba(3,18,28,.27),inset 0 1px rgba(255,255,255,.21)!important; backdrop-filter:blur(18px) saturate(1.15); }
.voice-toggle::after { display:none!important; }
.voice-toggle:hover { border-color:rgba(144,232,250,.72)!important; }
.voice-icon { display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(218,242,247,.2); border-radius:11px; color:rgba(229,243,247,.68); background:rgba(7,26,38,.34); font-size:14px; transition:.2s; }
.voice-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.voice-copy { display:grid; gap:3px; min-width:0; text-align:left; }
.voice-copy b { color:#f5fdff; font-size:10px; font-weight:800; letter-spacing:.01em; }
.voice-copy small { overflow:hidden; color:rgba(214,236,242,.58); font:7px 'DM Mono',monospace; text-overflow:ellipsis; white-space:nowrap; }
.voice-pill { display:grid; place-items:center; min-width:34px; height:20px; padding:0 6px; border:1px solid rgba(218,240,245,.2); border-radius:99px; color:rgba(223,239,243,.55); background:rgba(7,25,37,.24); font:7px 'DM Mono',monospace; letter-spacing:.1em; }
.voice-toggle.is-on { border-color:rgba(130,239,199,.5)!important; background:linear-gradient(145deg,rgba(141,235,202,.2),rgba(5,29,37,.48))!important; }
.voice-toggle.is-on .voice-icon { color:#072b35; border-color:rgba(160,246,214,.68); background:linear-gradient(145deg,#baf7df,#78e7c1); box-shadow:0 0 22px rgba(117,238,195,.3); }
.voice-toggle.is-on .voice-pill { border-color:rgba(145,240,201,.52); color:#b6f7d8; background:rgba(91,218,173,.14); }
.spatial-scene[data-state="thinking"] .voice-icon { color:#d1bbff; border-color:rgba(190,159,255,.58); }
.spatial-scene[data-state="speaking"] .voice-icon { color:#ffd5df; border-color:rgba(255,171,193,.62); box-shadow:0 0 20px rgba(255,155,185,.22); }

@media (max-width:600px) {
  .spatial-dock:not(.has-surface) { width:min(286px,calc(100vw - 24px)); }
  .window-chrome { gap:5px; padding:6px; }
  .window-tab { min-width:104px; }
  .voice-toggle { width:150px; height:50px; border-radius:17px!important; }
}

/* Spatial v15: a direct Sphere teaching mode and a separate exit lifecycle. */
.spatial-dock:not(.has-surface) { width:min(320px,calc(100vw - 24px)); }
.exit-spatial { position:absolute; z-index:56; left:16px; bottom:18px; display:flex; align-items:center; gap:7px; height:38px; padding:0 11px 0 8px; border:1px solid rgba(235,251,254,.22); border-radius:13px; color:rgba(239,250,253,.72); background:rgba(6,21,32,.28); box-shadow:0 12px 28px rgba(3,18,28,.2),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(16px) saturate(1.1); cursor:pointer; font:8px 'DM Mono',monospace; letter-spacing:.05em; }
.exit-spatial span { display:grid; place-items:center; width:21px; height:21px; border:1px solid rgba(240,250,253,.22); border-radius:7px; color:rgba(244,252,254,.86); font:15px/1 Arial,sans-serif; }
.exit-spatial b { font-weight:700; }
.exit-spatial:hover { color:#fff; border-color:rgba(255,180,190,.56); background:rgba(73,29,42,.38); }
@keyframes sphere-story-in { from { opacity:0; transform:translateX(-50%) translateZ(145px) translateY(10px) scale(.98); } to { opacity:1; transform:translateX(-50%) translateZ(145px) translateY(0) scale(1); } }

@media (max-width:600px) {
  .spatial-dock:not(.has-surface) { width:min(304px,calc(100vw - 24px)); }
  .exit-spatial { left:12px; bottom:14px; height:36px; padding-right:9px; }
  .exit-spatial b { font-size:7px; }
  .audio-control { left:62%; bottom:14px; }
}

/* Spatial v16: visible execution feedback and populated slide previews. */
.creative-progress,.image-progress,.web-progress { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 10px 15px; border:1px solid rgba(226,247,251,.13); border-radius:13px; background:rgba(4,18,29,.2); }
.creative-progress strong,.image-progress strong,.web-progress strong { display:block; color:#f2fcff; font-size:10px; }
.creative-progress small,.image-progress small,.web-progress small { display:block; margin-top:3px; overflow:hidden; color:rgba(211,232,239,.58); font:7px 'DM Mono',monospace; text-overflow:ellipsis; white-space:nowrap; }
.progress-orb { display:block; width:24px; height:24px; border:1px solid rgba(129,232,249,.42); border-radius:50%; background:radial-gradient(circle at 35% 30%,#d9fbff,rgba(112,228,247,.16) 35%,rgba(112,228,247,.02) 70%); box-shadow:0 0 18px rgba(112,228,247,.24); }
.is-working .progress-orb { animation:progress-orbit 1.15s linear infinite; }
.progress-track { position:absolute; left:10px; right:10px; bottom:6px; height:2px; overflow:hidden; border-radius:99px; background:rgba(213,239,245,.12); }
.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#74e4f2,#b49aff); box-shadow:0 0 9px rgba(116,228,242,.62); transition:width .28s ease; }
.image-percent,.deck-count { color:var(--space-cyan); font:8px 'DM Mono',monospace; }
.image-body { gap:10px; }
.image-progress .progress-orb { border-color:rgba(180,154,255,.48); }
#drawing-canvas.is-generating { animation:canvas-throb 1.15s ease-in-out infinite; }
.deck-slide-preview { display:grid; gap:9px; }
.deck-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.deck-preview-head h2 { margin:4px 0 3px; color:#f1fcff; font-size:15px; letter-spacing:-.03em; }
.deck-preview-head p { margin:0; color:var(--space-muted); font-size:9px; }
.deck-slide-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; overflow:visible; padding:2px 1px 5px; }
.deck-slide-card { flex:0 0 170px; min-height:142px; padding:9px; overflow:hidden; border:1px solid rgba(137,230,249,.2); border-radius:12px; background:linear-gradient(145deg,rgba(112,224,245,.13),rgba(9,28,42,.48)); scroll-snap-align:start; }
.deck-slide-card > span { color:var(--space-cyan); font:8px 'DM Mono',monospace; }
.deck-slide-card h3 { margin:6px 0 6px; overflow:hidden; color:#f4fdff; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.deck-slide-card ul { display:grid; gap:4px; margin:0; padding:0 0 0 12px; color:rgba(213,235,241,.66); font-size:8px; line-height:1.35; }
.slide-export-bar { display:flex; flex-wrap:wrap; gap:6px; }
.slide-export-bar button { padding:7px 9px; border:1px solid rgba(139,232,251,.22); border-radius:9px; color:#dffaff; background:rgba(117,228,246,.08); cursor:pointer; font-size:8px; }
.slide-export-bar button:first-child { color:#082238; background:linear-gradient(135deg,#c9f4ff,#a9d9ff); font-weight:800; }
.web-progress .progress-orb { border-color:rgba(121,231,196,.44); }
.web-loading-row { display:grid; grid-template-columns:24px 1fr; gap:8px; align-items:center; min-height:49px; padding:8px; border:1px solid rgba(223,245,251,.1); border-radius:11px; background:linear-gradient(90deg,rgba(230,249,252,.09),rgba(230,249,252,.025),rgba(230,249,252,.09)); background-size:240% 100%; animation:skeleton-shimmer 1.2s linear infinite; }
.web-loading-row > i { width:20px; height:20px; border:1px solid rgba(126,229,247,.35); border-radius:7px; }
.web-loading-row b,.web-loading-row small { display:block; color:rgba(233,249,252,.7); font-size:8px; }
.web-loading-row small { margin-top:3px; color:rgba(211,232,239,.42); font:7px 'DM Mono',monospace; }
@keyframes progress-orbit { to { transform:rotate(360deg); filter:hue-rotate(35deg); } }
@keyframes canvas-throb { 50% { filter:brightness(1.3) saturate(1.25); box-shadow:0 0 0 2px rgba(116,228,242,.2),0 0 24px rgba(116,228,242,.2); } }
@keyframes skeleton-shimmer { to { background-position:-240% 0; } }

@media (max-width:600px) {
  .creative-progress,.image-progress,.web-progress { padding:8px 9px 14px; }
  .deck-slide-card { flex-basis:158px; min-height:136px; }
  .slide-export-bar button { flex:1 1 auto; }
  .external-frame,.external-frame iframe { min-height:150px; height:150px; }
}

/* Spatial v17 final cascade: populated Canva previews, semantic image drafts,
   and the synchronized Sphere + supporting-tab explanation surface. */
.slide-deck-preview { min-height:180px; padding:11px; border:1px solid rgba(139,232,251,.22); border-radius:15px; background:linear-gradient(145deg,rgba(119,228,246,.08),rgba(7,23,36,.28)); }
.slide-deck-preview.is-drafting { border-color:rgba(184,159,255,.46); box-shadow:0 0 24px rgba(184,159,255,.09),inset 0 0 22px rgba(184,159,255,.04); }
.slide-deck-preview.is-drafting .deck-slide-card { animation:deck-card-in 1.3s ease-in-out infinite alternate; }
.slide-deck-preview.is-drafting .deck-slide-card:nth-child(2n) { animation-delay:.25s; }
.story-progress { position:absolute; left:0; right:0; bottom:0; display:block; width:25%; height:3px; border-radius:99px; background:linear-gradient(90deg,var(--space-cyan),var(--space-violet)); box-shadow:0 0 14px rgba(131,232,250,.72); transition:width .45s ease; }
.story-depth-readout { display:block; margin-top:8px; color:rgba(205,231,238,.56); font:8px 'DM Mono',monospace; letter-spacing:.03em; }
.story-depth-readout b { color:var(--space-cyan); font-weight:500; }
.story-controls { display:flex; gap:5px; flex:none; }
.story-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding-top:4px; border-top:1px solid rgba(224,246,252,.1); }
.story-toolbar button { padding:6px 8px; border:1px solid rgba(224,246,252,.18); border-radius:8px; color:rgba(235,250,253,.78); background:rgba(255,255,255,.045); cursor:pointer; font:8px 'DM Mono',monospace; }
.story-toolbar button:hover { border-color:rgba(131,232,250,.55); color:#fff; }
.story-toolbar span { margin-left:auto; color:rgba(205,231,238,.48); font:7px 'DM Mono',monospace; }
#drawing-canvas.is-generating { border-color:rgba(184,159,255,.7); box-shadow:0 0 30px rgba(184,159,255,.18),inset 0 0 25px rgba(131,232,250,.08); }
@keyframes deck-card-in { from { transform:translateY(1px); opacity:.72; } to { transform:translateY(-3px); opacity:1; } }
@media (max-width:600px) { .story-toolbar span { width:100%; margin-left:0; }.story-controls { width:100%; }.story-controls .surface-button { flex:1; justify-content:center; } }
.mdx-spatial-tools { position:absolute; z-index:52; top:90px; right:18px; width:min(390px,calc(100vw - 36px)); max-height:54vh; overflow:auto; padding:12px; border:1px solid rgba(227,247,250,.24); border-radius:18px; color:#effcff; background:linear-gradient(145deg,rgba(231,250,252,.16),rgba(4,20,31,.82)); box-shadow:0 18px 50px rgba(2,14,24,.34),inset 0 1px rgba(255,255,255,.16); backdrop-filter:blur(20px); }
.mdx-spatial-tools-inline { position:relative; inset:auto; z-index:1; width:auto; max-height:none; margin-top:12px; overflow:visible; }
.spatial-dock.has-surface .surface-body { overflow:visible; overscroll-behavior:auto; -webkit-overflow-scrolling:auto; }
.mdx-spatial-tools-inline .mdx-spatial-result-image { display:block; width:100%; max-height:230px; object-fit:contain; border:1px solid rgba(141,233,250,.18); border-radius:10px; background:#081725; }
@media (max-width:600px) { .mdx-spatial-tools-inline { margin-top:10px; padding:10px; }.mdx-spatial-tools-inline .mdx-spatial-result-card { padding:9px; }.mdx-spatial-tools-inline .mdx-spatial-result-image { max-height:180px; } }
.mdx-spatial-tools[hidden] { display:none; }

/* Spatial v18: one premium window, four essential controls. Secondary actions
   are intentionally contextual so the scene reads as a workspace rather than
   a control panel. */
.window-nav,.window-actions { display:flex; align-items:center; gap:5px; }
.window-move { min-width:42px; }
.window-more { letter-spacing:.08em; }
.spatial-context-menu { position:absolute; z-index:80; top:50px; right:9px; display:grid; min-width:148px; padding:6px; border:1px solid rgba(231,249,252,.22); border-radius:13px; background:rgba(7,24,36,.88); box-shadow:0 14px 36px rgba(2,14,24,.3); backdrop-filter:blur(20px); }
.spatial-context-menu[hidden] { display:none; }
.spatial-context-menu button { padding:8px 10px; border:0; border-radius:8px; color:rgba(234,249,252,.82); background:transparent; text-align:left; cursor:pointer; font:8px 'DM Mono',monospace; }
.spatial-context-menu button:hover,.spatial-context-menu button:focus-visible { color:#071d2b; background:#b9f1fa; outline:0; }
.spatial-dock.is-moving .window-chrome,.spatial-dock.is-moving .surface-head { cursor:grabbing; }
.spatial-dock.is-minimized .surface-host,.spatial-dock.is-minimized .window-location,.spatial-dock.is-minimized .window-idle { display:none!important; }
.spatial-dock.is-minimized { width:min(320px,calc(100vw - 28px)); }
.spatial-surface.is-expanded { min-height:440px; }
.sphere-callout { display:none; }
.audio-control { z-index:70; }
@media (max-width:600px) { .window-move { min-width:37px; padding-inline:6px; }.window-actions .dock-state { display:none; }.spatial-context-menu { top:46px; right:7px; }.spatial-surface.is-expanded { min-height:390px; } }
.mdx-spatial-tools-head { display:flex; justify-content:space-between; gap:10px; }.mdx-spatial-tools-kicker,.mdx-spatial-result-kicker { color:rgba(147,236,250,.72); font:8px 'DM Mono',monospace; letter-spacing:.12em; }.mdx-spatial-tools-head strong { display:block; margin-top:4px; font-size:14px; }.mdx-spatial-tools-status { color:#aaf3d2; font:8px 'DM Mono',monospace; }.mdx-spatial-tool-tabs { display:flex; gap:6px; margin:11px 0 9px; overflow:auto; }.mdx-spatial-tool-tabs button { flex:none; padding:6px 9px; border:1px solid rgba(225,246,250,.17); border-radius:9px; color:rgba(232,249,252,.72); background:rgba(255,255,255,.05); cursor:pointer; font:8px 'DM Mono',monospace; }.mdx-spatial-tool-tabs button.is-active { color:#062333; border-color:#a3ecf8; background:#a3ecf8; }.mdx-spatial-result-card { display:grid; gap:8px; padding:11px; border:1px solid rgba(222,246,250,.14); border-radius:13px; background:rgba(4,17,28,.42); }.mdx-spatial-result-card h3 { margin:0; font-size:15px; }.mdx-spatial-result-card p { margin:0; color:rgba(225,243,247,.78); font-size:11px; line-height:1.48; }.mdx-spatial-result-card small,.mdx-spatial-event span,.mdx-spatial-file span { color:rgba(205,231,237,.58); font:9px/1.45 'DM Mono',monospace; }.mdx-spatial-result-link { color:#a7eff9; font-size:10px; text-decoration:none; }.mdx-spatial-event,.mdx-spatial-file { display:grid; gap:3px; padding:8px 0; border-top:1px solid rgba(224,245,249,.1); }.mdx-spatial-event:first-of-type,.mdx-spatial-file:first-of-type { border-top:0; }.mdx-spatial-event strong,.mdx-spatial-file strong { font-size:11px; }.mdx-spatial-file p,.mdx-spatial-content { max-height:130px; overflow:auto; white-space:pre-wrap; }.mdx-spatial-result-card audio { width:100%; height:34px; }

/* Spatial v19: stable centred workspace. The glass/depth treatment remains,
   while motion, placement affordances and object chrome stay out of the way. */
.window-nav,.spatial-motion-toggle,.spatial-placement-hint,.spatial-object-controls,.scene-resize-handle,.spatial-scene-control { display:none!important; }
.window-chrome { grid-template-columns:1fr auto; }
.window-tab { justify-self:start; }
.spatial-panel.is-world-offscreen,.spatial-object.is-world-offscreen { opacity:1; pointer-events:auto; }
.spatial-panel.is-dragging,.spatial-object.is-dragging { cursor:default; }

/* Spatial stable shell: one camera-centred workspace, with bounded depth-only
   motion. Orientation never changes the layout coordinates, so sensor noise
   cannot walk the UI off-screen. */
.spatial-scene { --spatial-motion-x:0px; --spatial-motion-y:0px; --spatial-motion-tilt-x:0deg; --spatial-motion-tilt-y:0deg; --spatial-sphere-motion-x:0px; --spatial-sphere-motion-y:0px; --spatial-sphere-tilt-x:0deg; --spatial-sphere-tilt-y:0deg; }
.spatial-dock { top:clamp(28px,5vh,56px)!important; left:50%; transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),40px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)); transition:transform .28s ease-out; }
.spatial-dock.has-surface { width:min(680px,calc(100vw - 56px)); }
.window-location,.window-idle { display:none!important; }
.spatial-dock.has-surface .surface-host { padding:0 10px 10px; }
.spatial-dock.has-surface .spatial-surface { height:min(430px,calc(100vh - 360px)); }
.spatial-panel.is-world-offscreen,.spatial-object.is-world-offscreen { opacity:1!important; visibility:visible!important; }
.spatial-motion-toggle,.spatial-placement-hint,.spatial-object-controls,.scene-resize-handle,.spatial-scene-control,[data-scene-action="place-panel"],[data-scene-action="place-sphere"],[data-scene-action="move-panel"],[data-scene-action="move-sphere"],[data-scene-action="recenter-panel"],[data-scene-action="recenter-sphere"] { display:none!important; }
.sphere-shell { top:80%!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),120px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(var(--sphere-scale,1)); transition:transform .32s ease-out; }
.sphere-orbit-plane { top:80%!important; transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),48px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)); transition:transform .34s ease-out; }
.voice-pill { display:none!important; }
.audio-control { bottom:16px!important; }

/* The scene graph stylesheet intentionally gives registered nodes strong
   defaults. These scoped overrides keep the single web workspace in the safe
   camera-centred composition while leaving the native anchoring seam intact. */
.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel { top:clamp(28px,5vh,56px)!important; left:50%!important; width:min(680px,calc(100vw - 56px))!important; transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),40px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { top:80%!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; }
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-orbit-plane { top:80%!important; transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),88px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }

@media (max-width:600px) {
  .spatial-dock { width:calc(100vw - 24px); }
  .spatial-dock.has-surface { width:calc(100vw - 56px); }
  .spatial-scene.scene-graph-ready .spatial-dock.spatial-panel,.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel.has-surface { width:calc(100vw - 56px)!important; }
  .spatial-dock.has-surface .surface-host { padding:0 7px 7px; }
  .spatial-dock.has-surface .spatial-surface { height:min(370px,calc(100vh - 390px)); min-height:270px; }
  .sphere-shell { top:75%!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),110px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(var(--sphere-scale,.88)); }
  .sphere-orbit-plane { top:75%!important; transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),42px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)); }
  .spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { top:75%!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.88) * var(--spatial-sphere-depth-scale,1)))!important; }
  .spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-orbit-plane { top:75%!important; transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),88px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
  .audio-control { bottom:14px!important; }
}

/* Spatial v22 final cascade. */
.spatial-dock[data-panel-state="compact"] { width:min(250px,calc(100vw - 28px))!important; height:54px!important; border-radius:99px!important; }
.spatial-dock[data-panel-state="compact"] .surface-host,.spatial-dock[data-panel-state="medium"] .surface-host { display:none!important; }
.spatial-dock[data-panel-state="medium"] { width:min(350px,calc(100vw - 28px))!important; border-radius:28px!important; }
.spatial-dock[data-panel-state="expanded"] { width:min(620px,calc(100vw - 28px))!important; border-radius:26px!important; }
.spatial-dock[data-panel-state="expanded"] .surface-host { display:block!important; }
.spatial-dock[data-panel-state="expanded"] .spatial-surface { transform:translateZ(-28px)!important; }
.spatial-dock[data-panel-state="expanded"] .surface-head { transform:translateZ(10px)!important; }
.spatial-dock[data-panel-state="expanded"] .window-chrome { transform:translateZ(24px)!important; }
.spatial-scene[data-panel-state="compact"] .sphere-shell { top:61%!important; }
.spatial-scene[data-panel-state="medium"] .sphere-shell { top:69%!important; }
.sphere-shell { width:334px!important; height:372px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),250px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; filter:drop-shadow(0 38px 52px rgba(0,0,0,.3))!important; }
.sphere-fallback { width:292px!important; height:292px!important; left:21px!important; top:12px!important; }
.sphere-mount .mdxs { width:334px!important; height:350px!important; filter:drop-shadow(0 38px 48px rgba(0,0,0,.48))!important; }
.sphere-aura { inset:-12px -4px 56px!important; filter:blur(38px)!important; }
.sphere-shadow { left:32px!important; right:25px!important; bottom:20px!important; height:30px!important; filter:blur(16px)!important; }
.sphere-state { top:322px!important; }
.sphere-orbit-plane { width:374px!important; height:170px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),88px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
.chat-message p .is-speaking { color:#f4fdff; text-shadow:0 0 14px rgba(121,231,244,.35); }
.audio-control { z-index:260!important; left:auto!important; right:max(20px,calc(env(safe-area-inset-right) + 6px))!important; bottom:calc(94px + env(safe-area-inset-bottom))!important; transform:translateZ(80px)!important; }
.audio-control .voice-toggle { display:grid!important; place-items:center!important; width:58px!important; min-width:58px!important; height:58px!important; min-height:58px!important; padding:0!important; border-radius:50%!important; }
.audio-control .voice-icon { display:grid!important; place-items:center!important; width:34px!important; height:34px!important; }
.audio-control .voice-copy { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.canva-live-preview { display:grid; gap:5px; padding:8px; border:1px solid rgba(139,232,251,.2); border-radius:14px; background:linear-gradient(145deg,rgba(119,228,246,.08),rgba(7,23,36,.34)); }
.canva-live-preview > p { margin:0; color:rgba(211,236,242,.55); font:7px 'DM Mono',monospace; }
.canva-canvas-stage { position:relative; min-height:86px; overflow:hidden; border-radius:10px; background:linear-gradient(135deg,rgba(85,178,210,.2),rgba(14,33,49,.62)); box-shadow:inset 0 1px rgba(255,255,255,.13); }
.canva-canvas-stage::before { content:"LIVE CANVA CREATION"; position:absolute; top:10px; left:12px; color:rgba(230,250,253,.45); font:7px 'DM Mono',monospace; letter-spacing:.12em; }
.canva-cursor { position:absolute; top:var(--cursor-y,42%); left:var(--cursor-x,46%); width:12px; height:17px; opacity:0; border:1px solid #f7ffff; background:#8beafa; clip-path:polygon(0 0,100% 66%,59% 69%,77% 100%,61% 100%,44% 72%,17% 94%); filter:drop-shadow(0 0 9px rgba(121,231,244,.9)); transition:left .7s cubic-bezier(.22,1,.3,1),top .7s cubic-bezier(.22,1,.3,1),opacity .25s ease; }
.canva-cursor.is-active { opacity:1; animation:canva-cursor-pulse 1.4s ease-in-out infinite; }
.canva-cursor-label { position:absolute; right:12px; bottom:10px; color:rgba(235,251,255,.78); font:7px 'DM Mono',monospace; }
@keyframes canva-cursor-pulse { 50% { filter:drop-shadow(0 0 15px rgba(180,154,255,.95)); transform:scale(1.08); } }
@media (max-width:600px) {
  .spatial-dock[data-panel-state="compact"] { width:min(250px,calc(100vw - 24px))!important; }
  .spatial-dock[data-panel-state="expanded"] { width:calc(100vw - 28px)!important; }
  .sphere-shell { width:300px!important; height:334px!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),220px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; }
  .sphere-fallback { width:258px!important; height:258px!important; left:21px!important; }
  .sphere-mount .mdxs { width:300px!important; height:314px!important; }
  .sphere-state { top:286px!important; }
  .sphere-orbit-plane { width:326px!important; height:150px!important; }
  .spatial-scene[data-panel-state="compact"] .sphere-shell { top:61%!important; }
  .spatial-scene[data-panel-state="medium"] .sphere-shell { top:68%!important; }
}

/* Spatial v23 absolute final cascade: strong, bounded center-anchored depth. */
.spatial-stage { perspective:980px!important; perspective-origin:50% 46%; transform-style:preserve-3d!important; }
.spatial-scene.scene-graph-ready .spatial-dock.spatial-panel { top:clamp(34px,5vh,64px)!important; transform:translateX(-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),42px) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
.spatial-scene.scene-graph-ready .sphere-shell { top:clamp(420px,68vh,700px)!important; }
.spatial-scene.scene-graph-ready .sphere-shell { top:clamp(420px,68dvh,700px)!important; }
.spatial-scene.scene-graph-ready .sphere-shell { top:var(--spatial-sphere-top,clamp(420px,68dvh,700px))!important; }
.spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { top:clamp(420px,68vh,700px)!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),360px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,1) * var(--spatial-sphere-depth-scale,1)))!important; filter:drop-shadow(0 42px 66px rgba(0,0,0,.38))!important; }
.spatial-scene.scene-graph-ready .sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),112px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
.spatial-scene[data-state="listening"] .sphere-shell,.spatial-scene[data-state="speaking"] .sphere-shell { --sphere-scale:1.025; }
@media (max-width:600px) {
  .spatial-stage { perspective:820px!important; }
  .spatial-scene.scene-graph-ready .spatial-dock.spatial-panel { top:clamp(30px,4.5vh,52px)!important; }
  .spatial-scene.scene-graph-ready .sphere-shell { top:clamp(400px,68vh,610px)!important; }
  .spatial-scene.scene-graph-ready .sphere-shell { top:clamp(400px,68dvh,610px)!important; }
  .spatial-scene.scene-graph-ready .sphere-shell { top:var(--spatial-sphere-top,clamp(400px,68dvh,610px))!important; }
  .spatial-scene.scene-graph-ready:has(.spatial-dock.has-surface) .sphere-shell { top:clamp(400px,68vh,610px)!important; transform:translate(-50%,-50%) translate3d(var(--spatial-sphere-motion-x),var(--spatial-sphere-motion-y),300px) rotateX(var(--spatial-sphere-tilt-x)) rotateY(var(--spatial-sphere-tilt-y)) scale(calc(var(--sphere-scale,.94) * var(--spatial-sphere-depth-scale,1)))!important; }
  .spatial-scene.scene-graph-ready .sphere-orbit-plane { transform:translate(-50%,-50%) translate3d(var(--spatial-motion-x),var(--spatial-motion-y),96px) rotate(-12deg) rotateX(var(--spatial-motion-tilt-x)) rotateY(var(--spatial-motion-tilt-y)) scale(var(--spatial-depth-scale,1))!important; }
}

/* Independent tool panels preserve the conversation and previously generated work. */
.spatial-tool-window{position:fixed;z-index:1000;inset:8vh 5vw 18vh;max-width:960px;margin:auto;background:#101f2d;color:#f2f8fc;border:1px solid #69889a;border-radius:22px;box-shadow:0 24px 90px #0008;overflow:auto;pointer-events:auto}
.spatial-tool-header{display:flex;gap:12px;align-items:center;padding:14px 20px;position:sticky;top:0;background:#101f2d;z-index:2}.spatial-tool-header strong{flex:1}.spatial-tool-header button,.spatial-tool-tabs button,.spatial-slide-viewer button{border:1px solid #658398;border-radius:10px;background:#19344a;color:white;padding:8px 14px;cursor:pointer}
.spatial-tool-window .spatial-surface{display:block;position:relative;opacity:1;transform:none;max-height:none}.spatial-tool-window .surface-body{max-height:none}.spatial-tool-window.is-minimized{bottom:auto}.spatial-tool-window.is-minimized .spatial-surface{display:none}.spatial-tool-window[hidden]{display:none}
.spatial-tool-tabs{position:fixed;bottom:90px;left:5vw;right:5vw;z-index:1001;display:flex;gap:8px;overflow-x:auto;pointer-events:auto}
.spatial-slide-viewer{margin:14px 0;width:100%;min-width:0}.spatial-slide-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;touch-action:pan-x pan-y;overscroll-behavior-x:contain}.spatial-deck-slide{flex:0 0 100%;box-sizing:border-box;scroll-snap-align:start;min-height:280px;padding:26px;background:linear-gradient(130deg,#eaf3f6,#fff);color:#153348;border-radius:16px}.spatial-deck-slide h2{font-size:24px}.spatial-deck-slide li{margin:12px 0;line-height:1.5}.spatial-slide-viewer nav{display:flex;justify-content:space-between;align-items:center;margin:12px 0}.spatial-source-original{display:block;color:#9ee8ff;padding:12px}.spatial-tool-window .web-frame{min-height:360px}
@media(max-width:600px){.spatial-tool-window{inset:6vh 10px 22vh}.spatial-deck-slide{padding:18px}.spatial-tool-tabs{bottom:120px}}

.spatial-tool-window > .spatial-tool-header{position:sticky!important;inset:0 auto auto 0!important;transform:none!important;width:100%!important;box-sizing:border-box;display:flex!important;min-height:56px;flex-shrink:0}.spatial-tool-header strong{display:block!important;color:#f2f8fc!important;font-size:16px!important}.spatial-tool-window > .spatial-surface{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;transform:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}.spatial-tool-window .creative-body{display:grid;grid-template-columns:minmax(0,1fr)}.spatial-tool-window .creative-progress strong,.spatial-tool-window .creative-progress small{display:block}.spatial-tool-window #canva-open-action{color:#9ee8ff}.spatial-tool-window .web-preview iframe{width:100%;min-height:320px}

.spatial-tool-tabs{z-index:1003}