.workspace-atmosphere{position:fixed;inset:32px 0 0;z-index:0;pointer-events:none;overflow:hidden;--pointer-x:60%;--pointer-y:35%}
.workspace-atmosphere-glow{position:absolute;inset:-10%;background:radial-gradient(ellipse at var(--pointer-x) var(--pointer-y),#39c5b611,transparent 48%),radial-gradient(ellipse at 25% 70%,#607ca50b,transparent 40%);transition:background-position 1s;animation:workspace-breathe 18s ease-in-out infinite alternate}
.workspace-atmosphere svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;transform:translate(var(--parallax-x,0px),var(--parallax-y,0px));transition:transform 1.4s ease-out;animation:workspace-lines 24s ease-in-out infinite alternate}
.workspace-page>.workspace,.workspace-page>.topbar,.workspace-page>.client-titlebar{position:relative;z-index:1}
.workspace-page.light .workspace-atmosphere{opacity:.6}
@keyframes workspace-breathe{from{opacity:.55;transform:translate(-1%,-1%) scale(1)}to{opacity:1;transform:translate(1%,1%) scale(1.05)}}
@keyframes workspace-lines{from{opacity:.25;margin-top:-12px}to{opacity:.55;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.workspace-atmosphere svg,.workspace-atmosphere-glow{animation:none;transition:none}}

.app>.topbar,.app>.topbar{z-index:40}

/* Blue/teal atmosphere with a localized pointer light. */
.workspace-atmosphere-glow{inset:0;background:radial-gradient(ellipse 100vw 100vh at var(--pointer-x) var(--pointer-y),#42cdbb24 0%,#238e9e16 42%,#176b8608 72%,transparent 100%),radial-gradient(ellipse at 18% 30%,#1268a024,transparent 58%),radial-gradient(ellipse at 76% 68%,#087d702b,transparent 58%);animation:workspace-breathe 18s ease-in-out infinite alternate}
.workspace-atmosphere svg{filter:drop-shadow(0 0 5px #24baca38)}
@keyframes workspace-lines{from{opacity:.55;margin-top:-12px}to{opacity:.85;margin-top:12px}}
/* Floating navigation aligns with the history project's outer width. */
.app>.topbar{width:calc(100% - 160px);max-width:1480px;margin:0 auto;padding:0 22px;background:color-mix(in srgb,var(--popup) 35%,transparent);border:1px solid color-mix(in srgb,var(--text) 15%,transparent);border-radius:0;box-shadow:0 10px 32px #0003,0 1px 0 #ffffff08 inset;backdrop-filter:blur(6px)}
.app>.topbar>.topbar-inner{width:100%;max-width:none}
.workspace-page.light .workspace-atmosphere{opacity:.65}
@media(max-width:760px){.app>.topbar{width:calc(100% - 40px);margin-top:0;padding:0 14px}.app>.topbar>.topbar-inner{width:100%}}

/* Shared atmosphere and translucent surfaces on all primary pages. */
.app>.workspace,.app>.plugin-download-page,.app>.billing-page,.app>.course-page{position:relative;z-index:1}
.app{--page-glass-fill:color-mix(in srgb,var(--popup) 35%,transparent)}
.app>.topbar{background:var(--page-glass-fill)}
.app .plugin-download-page .plugin-download-card,
.app .billing-page :is(.redeem-panel,.account-panel,.referral-panel,.billing-plan,.billing-payment-note){background:var(--page-glass-fill);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.app.light .workspace-atmosphere{opacity:.65}

/* Large brand outline replaces the decorative wave lines. */
.workspace-atmosphere{--outline-color:#39c5b6}
.workspace-atmosphere .workspace-logo-outline{inset:auto;left:50%;top:50%;width:min(62vw,96vh);height:min(62vw,96vh);opacity:1;filter:none;transform:translate(calc(-50% + var(--parallax-x,0px)),calc(-50% + var(--parallax-y,0px)));animation:none;overflow:visible}
.workspace-logo-outline path{fill:none;stroke:var(--outline-color);stroke-width:1;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.workspace-logo-base{opacity:.11;animation:workspace-logo-reveal 16s ease-in-out infinite alternate}
.workspace-logo-flow{opacity:.18;stroke-dasharray:110 890;animation:workspace-logo-flow 32s linear infinite,workspace-logo-reveal 16s ease-in-out infinite alternate}
@keyframes workspace-logo-flow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes workspace-logo-reveal{0%{opacity:.035}45%{opacity:.12}100%{opacity:.07}}
.app.light .workspace-atmosphere{--outline-color:#bdd9f2;opacity:1}
.app.light .workspace-atmosphere-glow{background:radial-gradient(ellipse 100vw 100vh at var(--pointer-x) var(--pointer-y),#d9eafa55 0%,#e5f0fb30 45%,transparent 100%),radial-gradient(ellipse at 18% 30%,#e7f2fc55,transparent 58%),radial-gradient(ellipse at 76% 68%,#e5f1fc55,transparent 58%)}
.app.light .workspace-logo-base{animation:workspace-logo-light-reveal 16s ease-in-out infinite alternate}
.app.light .workspace-logo-flow{animation:workspace-logo-flow 32s linear infinite,workspace-logo-light-reveal 16s ease-in-out infinite alternate}
@keyframes workspace-logo-light-reveal{0%{opacity:.13}45%{opacity:.3}100%{opacity:.19}}
@media(prefers-reduced-motion:reduce){.workspace-logo-base,.workspace-logo-flow,.app.light .workspace-logo-base,.app.light .workspace-logo-flow{animation:none}.workspace-logo-base{opacity:.09}.workspace-logo-flow{opacity:.05}.app.light .workspace-logo-base{opacity:.23}}

/* Pointer and brand share an exact center; scale around that center. */
.workspace-atmosphere .workspace-logo-outline{left:var(--pointer-x);top:var(--pointer-y);transform:translate(-50%,-50%);transition:none;animation:workspace-logo-scale 22s ease-in-out infinite alternate;transform-origin:center}
@keyframes workspace-logo-scale{from{transform:translate(-50%,-50%) scale(.5)}to{transform:translate(-50%,-50%) scale(1)}}
.workspace-atmosphere-glow{animation:workspace-centered-glow 18s ease-in-out infinite alternate;background:radial-gradient(ellipse 100vw 100vh at var(--pointer-x) var(--pointer-y),#39c5b62a 0%,#238e9e1b 30%,#176b860b 65%,transparent 100%)}
.app.light .workspace-atmosphere-glow{background:radial-gradient(ellipse 100vw 100vh at var(--pointer-x) var(--pointer-y),#d5e9fb66 0%,#e0eefb44 30%,#edf5fd22 65%,transparent 100%)}
@keyframes workspace-centered-glow{from{opacity:.7}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.workspace-atmosphere .workspace-logo-outline,.workspace-atmosphere-glow{animation:none}}

/* Light theme: all logo and surrounding gradient tones remain pale blue. */
.app.light .workspace-atmosphere{--outline-color:#c3dff7}
.app.light .workspace-atmosphere-glow{background:radial-gradient(ellipse 100vw 100vh at var(--pointer-x) var(--pointer-y),#d8eafb66 0%,#e3effb44 30%,#eef6fd22 65%,transparent 100%)}