/* ERA central tree: generated cinematic artwork with restrained, stateful motion. */
.era-visual{min-height:570px;background:radial-gradient(ellipse at 50% 55%,#05243a 0,#03101c 37%,#01050b 76%);border-color:#1a5676;box-shadow:inset 0 0 90px #0075b322,0 24px 80px #00101d88}
html[data-theme] .era-visual{height:auto;min-height:570px}
html[data-theme] .era-tree{left:50%;top:50%;width:min(76%,610px);height:112%;mask-image:linear-gradient(transparent,#000 5%,#000 96%,transparent);filter:drop-shadow(0 0 16px #09baff55) drop-shadow(0 18px 25px #028bc533)}
html[data-theme=cinema] .era-workbench>.era-command-grid{height:auto;min-height:570px}
.era-visual:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#20bfff15,transparent 43%),linear-gradient(115deg,transparent 20%,#5ad9ff05 50%,transparent 78%)}
.era-visual-top,.era-visual-bottom{z-index:8}.era-visual-top{left:25px;right:25px;top:22px}.era-visual-bottom{left:25px;right:25px;bottom:19px}
.tree-live-dot{display:inline-block;width:5px;height:5px;margin-left:6px;vertical-align:2px;border-radius:50%;background:#43d5ff;box-shadow:0 0 11px #43d5ff}
.tree-stage{inset:0;overflow:hidden;perspective:1000px;transform-style:preserve-3d;touch-action:pan-y}
.tree-stage:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 82%,#26b9ff17,transparent 32%),linear-gradient(180deg,#02091300 55%,#020813b8)}
.tree-halo{position:absolute;width:min(59%,420px);aspect-ratio:1;left:50%;top:49%;z-index:1;transform:translate(-50%,-50%) translateZ(-50px);border-radius:50%;background:radial-gradient(circle,#21bfff20 0,#0a6ea41a 35%,transparent 69%);box-shadow:0 0 75px #029fe11a,inset 0 0 55px #39caff0c;transition:transform 220ms cubic-bezier(.22,1,.36,1),opacity 220ms ease}
.tree-halo:before,.tree-halo:after{content:"";position:absolute;inset:4%;border:1px solid #41c9ff23;border-radius:50%;transform:rotateX(66deg) rotateZ(-18deg);box-shadow:0 0 20px #13a7ea14}
.tree-halo:after{inset:13%;border-color:#69dcff18;transform:rotateX(72deg) rotateZ(24deg)}
.era-tree{position:absolute;z-index:3;left:50%;top:50%;width:min(76%,610px);height:112%;object-fit:contain;opacity:.98;mix-blend-mode:screen;mask-image:linear-gradient(transparent,#000 5%,#000 96%,transparent);transform:translate3d(-50%,-50%,25px);transform-origin:center;transition:transform 240ms cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 16px #09baff55) drop-shadow(0 18px 25px #028bc533);pointer-events:none;user-select:none}
.tree-ground{position:absolute;left:50%;top:80%;z-index:2;width:min(48%,360px);height:38px;transform:translateX(-50%) rotateX(66deg);border:1px solid #3dcaff38;border-radius:50%;background:radial-gradient(ellipse,#12bfff27,transparent 68%);box-shadow:0 0 40px #04aaff23}
.orbit{z-index:1;width:min(70%,520px);border-color:#20bfff25;transform-style:preserve-3d}
.orbit:after{border-top-color:#64dcffb0;border-right-color:#15a4ec18;box-shadow:0 0 13px #24bfff35}
.orbit-one{width:min(57%,430px);transform:rotateX(68deg) rotateZ(-13deg)}
.orbit-two{width:min(80%,600px);transform:rotateX(70deg) rotateZ(17deg)}
.orbit-three{position:absolute;width:min(67%,500px);aspect-ratio:1;border:1px solid #30a9e919;border-radius:50%;transform:rotateX(58deg) rotateY(18deg) rotateZ(48deg);pointer-events:none}
.orbit-three:after{content:"";position:absolute;left:9%;top:17%;width:7px;height:7px;border-radius:50%;background:#8beaff;box-shadow:0 0 10px 3px #16baffaa,0 0 28px #14aaff88}
.tree-node{position:absolute;z-index:6;display:flex;align-items:center;gap:10px;min-width:176px;padding:10px 13px;text-align:left;color:#c7eaff;background:linear-gradient(135deg,#0b2538eF,#061421eF);border:1px solid #28749a78;border-radius:10px;box-shadow:0 10px 34px #0008,inset 0 1px #b9edff12;backdrop-filter:blur(12px);font:600 9px/1.2 ui-monospace,monospace;letter-spacing:1px;transform:translate3d(0,0,28px);transform-origin:center;transition:transform 180ms cubic-bezier(.22,1,.36,1),border-color 180ms ease,box-shadow 180ms ease,background-color 180ms ease;touch-action:manipulation}
.tree-node:hover,.tree-node:focus-visible{border-color:#65d9ff;box-shadow:0 12px 35px #008bc544,inset 0 1px #b9edff28;background:linear-gradient(135deg,#103753f5,#071a29f5)}
.tree-node:active{transform:translate3d(0,0,28px) scale(.97)}
.tree-node small{display:block;margin-top:5px;color:#5e9bbb;font:7px/1.2 ui-monospace,monospace;letter-spacing:1.15px}
.tree-node-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid #2b82a759;border-radius:8px;color:#60d9ff;background:radial-gradient(circle at 30% 20%,#2bc5ff37,#0a2639);font:17px/1 system-ui;box-shadow:inset 0 0 13px #2bbfff13,0 0 13px #10a7df12}
.node-memory{left:5.5%;top:34%}.node-create{right:5.5%;top:34%}.node-jobs{left:9%;top:69%}.node-gallery{right:9%;top:69%}
.era-visual[data-state=thinking]{box-shadow:inset 0 0 100px #008fe52e,0 24px 80px #00101d88}
.era-visual[data-state=thinking] .tree-halo{background:radial-gradient(circle,#2ecaff2b 0,#0a6ea427 40%,transparent 70%)}
.era-visual[data-state=thinking] .orbit:after{animation-duration:4s}
.era-visual[data-state=listening] .tree-halo{animation:tree-listen 2.2s cubic-bezier(.2,.7,.25,1) infinite}
.era-visual[data-state=listening] .tree-halo:before{border-color:#58d9ff65;box-shadow:0 0 32px #00afff45}
.era-visual[data-state=listening] .orbit-one{border-color:#48d4ff61}
.era-visual[data-state=listening] .orbit-one:after{animation-duration:5s}
.era-visual[data-state=speaking] .tree-halo{transform:translate(-50%,-50%) translateZ(-40px) scale(var(--halo-scale,1));opacity:var(--halo-opacity,.78)}
.era-visual[data-state=speaking] .orbit-three:after{transform:scale(var(--voice-pulse,1));box-shadow:0 0 22px 4px #16baffaa,0 0 40px #14aaff88}
.era-visual[data-state=speaking] .tree-live-dot{box-shadow:0 0 18px #43d5ff}
@keyframes tree-listen{0%,100%{opacity:.72;transform:translate(-50%,-50%) translateZ(-50px) scale(.94)}55%{opacity:1;transform:translate(-50%,-50%) translateZ(-50px) scale(1.08)}}
@media(hover:hover) and (pointer:fine){.tree-node{transition:transform 150ms cubic-bezier(.22,1,.36,1),border-color 150ms ease,box-shadow 150ms ease,background-color 150ms ease}}
@media(max-width:1150px){html[data-theme] .era-visual{min-height:530px}.tree-node{min-width:158px;padding:9px}.node-memory{left:3%}.node-create{right:3%}.node-jobs{left:5%}.node-gallery{right:5%}}
@media(max-width:850px){html[data-theme] .era-visual{min-height:500px}html[data-theme] .era-tree{width:86%;height:94%}.tree-halo{width:61%}.tree-node{min-width:147px;font-size:8px}.node-memory{left:2%;top:31%}.node-create{right:2%;top:31%}.node-jobs{left:3%;top:68%}.node-gallery{right:3%;top:68%}}
@media(max-width:720px){html[data-theme] .era-visual{min-height:450px}.era-visual-top{left:16px;right:16px;top:15px}.era-visual-bottom{left:16px;right:16px;bottom:14px}html[data-theme] .era-tree{width:100%;height:82%;top:48%}.tree-halo{width:77%;top:47%}.tree-ground{top:78%;width:66%}.orbit-one{width:79%}.orbit-two{width:96%}.orbit-three{width:84%}.tree-node{min-width:0;width:42px;height:42px;padding:5px;justify-content:center;border-radius:12px;gap:0}.tree-node>span:last-child{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);width:max-content;padding:5px 7px;border:1px solid #1c536e;border-radius:5px;background:#061421ed;color:#a9ddf5;font-size:7px;text-align:center;opacity:0;pointer-events:none;transition:opacity 120ms ease}.tree-node small{display:none}.tree-node:focus-visible>span:last-child,.tree-node:hover>span:last-child{opacity:1}.tree-node-icon{border:0;background:transparent;box-shadow:none;font-size:20px}.node-memory{left:8%;top:28%}.node-create{right:8%;top:28%}.node-jobs{left:8%;top:67%}.node-gallery{right:8%;top:67%}}
@media(prefers-reduced-motion:reduce){.tree-halo,.orbit:after{animation:none!important}.tree-node,.era-tree,.tree-halo{transition:none!important}}
body.reduced-motion .tree-halo,body.reduced-motion .orbit:after{animation:none!important}
body.reduced-motion .tree-node,body.reduced-motion .era-tree,body.reduced-motion .tree-halo{transition:none!important}
