/* Portal backdrop, lifted from Aria Guardian (owner, 2026-09-27). The layer
   order is Aria's, all under the UI and above the wallpaper fallback
   (#wallpaper-fallback sits at z-index -2): the ambient clip pair, the scrim
   that darkens the edges and the top-left, then the galaxy canvas. Every
   surface's shell is glass so the cosmos shows through everywhere.

   Specificity: the themes (stealth, contrast, accent-black) paint these
   surfaces with `html.theme-x:not(.light-mode) #id` rules and !important,
   so every rule here is prefixed with :root:root:root:root (four class-level
   weights on the same element) and marked !important to win in every theme. */

:root:root:root:root #portal-backdrop-site { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(31, 76, 132, .12), #02040b 58%); }
:root:root:root:root #portal-backdrop-site video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
:root:root:root:root #portal-backdrop-site.is-switching { animation: ariaBgFade .9s ease; }
@keyframes ariaBgFade { from { opacity: 0; } to { opacity: 1; } }
:root:root:root:root #portal-backdrop-scrim {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, rgba(2,4,11,0) 38%, rgba(2,4,11,.55) 100%), linear-gradient(105deg, rgba(2,4,11,.5) 0%, rgba(2,4,11,0) 32%);
}
/* Aria's order: the ambient video (50%) sits behind the galaxy canvas
   (zIndex 0). Both were at -1 here and the video's opaque layer, later in
   the DOM, painted over the galaxy: the flights were never visible. */
:root:root:root:root #cosmos-mount { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity .42s ease; }
/* The galaxy stays behind every panel, LiveLoop included: its stage is a
   transparent window onto the cosmos (owner, 2026-09-27). */
:root:root:root:root #cosmos-mount canvas { display: block; width: 100%; height: 100%; }
/* The old wallpaper scene and video wallpapers painted above these layers;
   the cosmos is the site's background now. */
:root:root:root:root #theme-scene-wallpaper, :root:root:root:root #theme-scene-canvas, :root:root:root:root .wallpaper-option { display: none !important; }
/* The scene layer: AskSary's own wallpaper catalogue, chosen in Appearance.
   It sits at z -1 with the ambient clips, behind the galaxy canvas at z 0, so
   Home's orbit and every flight draw over it (owner, 2026-10-06: "any
   wallpaper from more options overlays the home. the field, galaxy and clips
   are fine"). At z 0 it came after the canvas and covered it. */
:root:root:root:root body.portal-layer-scene #live-wallpaper-container { display: block !important; position: fixed !important; inset: 0 !important; z-index: -1 !important; opacity: 1 !important; pointer-events: none; }
/* At z -1 the site backdrop and its scrim (opaque, later in the page) would
   cover the wallpaper, so with the scene layer on they step down to -2. */
:root:root:root:root body.portal-layer-scene #portal-backdrop-site, :root:root:root:root body.portal-layer-scene #portal-backdrop-scrim { z-index: -2 !important; }
:root:root:root:root body.portal-layer-scene #live-wallpaper-container .wallpaper-option:not(.hidden), :root:root:root:root body.portal-layer-scene #theme-scene-wallpaper:not(.hidden), :root:root:root:root body.portal-layer-scene #theme-scene-canvas:not(.hidden) { display: block !important; }

/* ---- LiveLoop ---- */
:root:root:root:root #liveloop-container { background: transparent !important; }
:root:root:root:root #liveloop-viewport, :root:root:root:root #liveloop-stage { background: transparent !important; }
:root:root:root:root #liveloop-preview-frame { background: transparent !important; }
:root:root:root:root #liveloop-container .liveloop-header { background: rgba(6, 8, 18, .05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root:root:root:root #liveloop-chat.live-chat-panel { background: rgba(6, 8, 18, .05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---- Split-screen Code Lab (canvas) ---- */
:root:root:root:root #code-canvas-container { background: transparent !important; }
:root:root:root:root #code-canvas-container .canvas-header { background: rgba(6, 8, 18, .05) !important; }
/* Two ids: the theme rule for this one names the container too. */
:root:root:root:root #code-canvas-container #canvas-code-area { background: transparent !important; }
:root:root:root:root #code-canvas-container #code-preview-frame { background: transparent !important; }
:root:root:root:root #code-canvas-container .CodeMirror { background: rgba(6, 8, 18, .05) !important; }
:root:root:root:root #code-canvas-container .CodeMirror-gutters { background: rgba(6, 8, 18, .05) !important; border-color: var(--portal-line) !important; }
:root:root:root:root #code-canvas-container .coding-lab-ai { background: rgba(6, 8, 18, .05) !important; }

/* ---- AskSary Studio ---- */
:root:root:root:root #asksary-studio {
  --ast-bg: rgba(6, 8, 18, .05); --ast-surface: rgba(10, 14, 28, .05); --ast-surface-2: rgba(14, 18, 34, .05);
  --ast-field: rgba(18, 24, 44, .05); --ast-hover: rgba(26, 32, 56, .05);
  background: rgba(6, 8, 18, .05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 0 0 100vmax rgba(1, 2, 10, .03), 0 34px 90px rgba(0, 0, 0, .5) !important;
}
:root:root:root:root #asksary-studio .ast-stage-wrap { background: rgba(0, 0, 0, .05) !important; }
:root:root:root:root #asksary-studio .ast-panel, :root:root:root:root #asksary-studio .ast-top, :root:root:root:root #asksary-studio .ast-transport,
:root:root:root:root #asksary-studio .ast-drive, :root:root:root:root #asksary-studio .ast-inspector, :root:root:root:root #asksary-studio .ast-timeline,
:root:root:root:root #asksary-studio .ast-toolbar, :root:root:root:root #asksary-studio .ast-header { background: rgba(6, 8, 18, .05) !important; }

/* ---- Project Lab ---- */
:root:root:root:root #code-lab-overlay.cl-overlay { background: rgba(1, 2, 10, .03) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root:root:root:root #code-lab-overlay .cl-shell { background: rgba(6, 8, 18, .05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root:root:root:root #code-lab-overlay .cl-sidebar { background: rgba(4, 6, 14, .05) !important; }
:root:root:root:root #code-lab-overlay .cl-ai { background: rgba(6, 8, 18, .05) !important; }
:root:root:root:root #code-lab-overlay .cl-header { background: rgba(6, 8, 18, .05) !important; }
:root:root:root:root #code-lab-overlay .cl-main, :root:root:root:root #code-lab-overlay #cl-editor-host,
:root:root:root:root #code-lab-overlay .cl-welcome, :root:root:root:root #code-lab-overlay .cl-empty { background: transparent !important; }
:root:root:root:root #code-lab-overlay .CodeMirror { background: rgba(6, 8, 18, .05) !important; }
:root:root:root:root #code-lab-overlay .CodeMirror-gutters { background: rgba(6, 8, 18, .05) !important; border-color: var(--portal-line) !important; }
:root:root:root:root #code-lab-overlay .cl-ai-output, :root:root:root:root #code-lab-overlay .cl-project-chat { background: rgba(4, 6, 14, .05) !important; }
:root:root:root:root #code-lab-overlay .cl-live-build { background: rgba(6, 8, 18, .05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---- Gallery ---- */
:root:root:root:root #visual-lib-overlay { background: rgba(1, 2, 10, .03) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root:root:root:root #visual-lib-overlay .visual-modal { background: rgba(6, 8, 18, .05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* The gallery's stealth rule names the overlay id inside :is(); doubling the
   id here (same element) outranks it. */
:root:root:root:root #visual-lib-overlay#visual-lib-overlay .visual-header, :root:root:root:root #visual-lib-overlay#visual-lib-overlay .visual-tabs { background: rgba(6, 8, 18, .05) !important; }
:root:root:root:root #visual-lib-overlay#visual-lib-overlay .gallery-sidebar { background: rgba(4, 6, 14, .05) !important; }
:root:root:root:root #visual-lib-overlay .gallery-workspace, :root:root:root:root #visual-lib-overlay #visual-lib-grid, :root:root:root:root #visual-lib-overlay .gallery-content { background: transparent !important; }

/* ---- Video editor ---- */
:root:root:root:root #asksary-video-editor { background: rgba(6, 8, 18, .05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---- Solid mode: the same shells, opaque (body.portal-solid) ---- */
/* ---- LiveLoop (solid) ---- */
:root:root:root:root body.portal-solid #liveloop-container { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #liveloop-viewport, :root:root:root:root body.portal-solid #liveloop-stage { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #liveloop-preview-frame { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #liveloop-container .liveloop-header { background: var(--ps-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root:root:root:root body.portal-solid #liveloop-chat.live-chat-panel { background: var(--ps-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---- Split-screen Code Lab (canvas) (solid) ---- */
:root:root:root:root body.portal-solid #code-canvas-container { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #code-canvas-container .canvas-header { background: var(--ps-bg) !important; }
/* (solid) Two ids: the theme rule for this one names the container too. */
:root:root:root:root body.portal-solid #code-canvas-container #canvas-code-area { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #code-canvas-container #code-preview-frame { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #code-canvas-container .CodeMirror { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #code-canvas-container .CodeMirror-gutters { background: var(--ps-bg) !important; border-color: rgb(99, 245, 255) !important; }
:root:root:root:root body.portal-solid #code-canvas-container .coding-lab-ai { background: var(--ps-bg) !important; }

/* ---- AskSary Studio (solid) ---- */
:root:root:root:root body.portal-solid #asksary-studio {
  --ast-bg: rgb(6, 8, 18); --ast-surface: rgb(10, 14, 28); --ast-surface-2: rgb(14, 18, 34);
  --ast-field: rgb(18, 24, 44); --ast-hover: rgb(26, 32, 56);
  background: rgb(6, 8, 18) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 0 0 100vmax rgb(1, 2, 10), 0 34px 90px rgb(0, 0, 0) !important;
}
:root:root:root:root body.portal-solid #asksary-studio .ast-stage-wrap { background: var(--ps-stage) !important; }
:root:root:root:root body.portal-solid #asksary-studio .ast-panel, :root:root:root:root body.portal-solid #asksary-studio .ast-top, :root:root:root:root body.portal-solid #asksary-studio .ast-transport,
:root:root:root:root body.portal-solid #asksary-studio .ast-drive, :root:root:root:root body.portal-solid #asksary-studio .ast-inspector, :root:root:root:root body.portal-solid #asksary-studio .ast-timeline,
:root:root:root:root body.portal-solid #asksary-studio .ast-toolbar, :root:root:root:root body.portal-solid #asksary-studio .ast-header { background: var(--ps-bg) !important; }

/* ---- Project Lab (solid) ---- */
:root:root:root:root body.portal-solid #code-lab-overlay.cl-overlay { background: var(--ps-deep) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root:root:root:root body.portal-solid #code-lab-overlay .cl-shell { background: var(--ps-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root:root:root:root body.portal-solid #code-lab-overlay .cl-sidebar { background: var(--ps-side) !important; }
:root:root:root:root body.portal-solid #code-lab-overlay .cl-ai { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #code-lab-overlay .cl-header { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #code-lab-overlay .cl-main, :root:root:root:root body.portal-solid #code-lab-overlay #cl-editor-host,
:root:root:root:root body.portal-solid #code-lab-overlay .cl-welcome, :root:root:root:root body.portal-solid #code-lab-overlay .cl-empty { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #code-lab-overlay .CodeMirror { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #code-lab-overlay .CodeMirror-gutters { background: var(--ps-bg) !important; border-color: rgb(99, 245, 255) !important; }
:root:root:root:root body.portal-solid #code-lab-overlay .cl-ai-output, :root:root:root:root body.portal-solid #code-lab-overlay .cl-project-chat { background: var(--ps-side) !important; }
:root:root:root:root body.portal-solid #code-lab-overlay .cl-live-build { background: var(--ps-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---- Gallery (solid) ---- */
:root:root:root:root body.portal-solid #visual-lib-overlay { background: var(--ps-deep) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root:root:root:root body.portal-solid #visual-lib-overlay .visual-modal { background: var(--ps-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* (solid) The gallery's stealth rule names the overlay id inside :is(); doubling the
   id here (same element) outranks it. */
:root:root:root:root body.portal-solid #visual-lib-overlay#visual-lib-overlay .visual-header, :root:root:root:root body.portal-solid #visual-lib-overlay#visual-lib-overlay .visual-tabs { background: var(--ps-bg) !important; }
:root:root:root:root body.portal-solid #visual-lib-overlay#visual-lib-overlay .gallery-sidebar { background: var(--ps-side) !important; }
:root:root:root:root body.portal-solid #visual-lib-overlay .gallery-workspace, :root:root:root:root body.portal-solid #visual-lib-overlay #visual-lib-grid, :root:root:root:root body.portal-solid #visual-lib-overlay .gallery-content { background: var(--ps-bg) !important; }

/* StudioLab, Light panels: the solid values above are dark; in light mode they
   were painting navy buttons under dark text (owner, 2026-09-28). */
:root:root:root:root.light-mode body.portal-solid #asksary-studio {
  --ast-bg: #f6f7f9; --ast-surface: #ffffff; --ast-surface-2: #f3f4f7; --ast-field: #ffffff; --ast-hover: #e9ebf0;
  background: #f6f7f9 !important; box-shadow: 0 0 0 100vmax #eef0f4, 0 34px 90px rgba(15, 23, 42, .12) !important;
}
/* ---- Video editor (solid) ---- */
:root:root:root:root body.portal-solid #asksary-video-editor { background: var(--ps-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Light mode keeps the cosmos but lifts the glass. */
:root:root:root:root.light-mode #asksary-studio { --ast-bg: rgba(255, 255, 255, .7); --ast-surface: rgba(255, 255, 255, .74); --ast-surface-2: rgba(246, 246, 250, .74); background: rgba(255, 255, 255, .6) !important; }
:root:root:root:root.light-mode #code-lab-overlay .cl-shell, :root:root:root:root.light-mode #visual-lib-overlay .visual-modal, :root:root:root:root.light-mode #asksary-video-editor { background: rgba(255, 255, 255, .68) !important; }

@media (prefers-reduced-motion: reduce) { :root:root:root:root #portal-backdrop-site video { display: none; } }

/* Wallpaper layers (owner, 2026-09-27): clips, galaxy and field are each
   on or off; with none on the background is plain black. The galaxy is
   still drawn while navigating (the orbit and the flight need it). */
:root:root:root:root #portal-backdrop-site video { display: none !important; }
:root:root:root:root body.portal-layer-clips #portal-backdrop-site video { display: block !important; }
:root:root:root:root #portal-backdrop-site { background: #000; }
:root:root:root:root body.portal-layer-clips #portal-backdrop-site, :root:root:root:root body.portal-layer-galaxy #portal-backdrop-site { background: radial-gradient(circle at 50% 45%, rgba(31, 76, 132, .12), #02040b 58%); }
:root:root:root:root #portal-backdrop-scrim { display: none; }
:root:root:root:root body.portal-layer-clips #portal-backdrop-scrim { display: block; }
:root:root:root:root #cosmos-mount { opacity: 0; }
:root:root:root:root body.portal-layer-galaxy #cosmos-mount, :root:root:root:root body[data-cosmos-state="panel_select"]:not(.portal-docked) #cosmos-mount, :root:root:root:root body[data-cosmos-state="navigating"] #cosmos-mount { opacity: 1; }
:root:root:root:root #portal-field { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
:root:root:root:root body.portal-layer-field #portal-field { display: block; }
/* Vault runs its own field (owner, 2026-10-01): while it is on screen the global one rests and is hidden, not left on its last frame. */
:root:root:root:root body.portal-field-vault #portal-field { visibility: hidden; }
:root:root:root:root body.portal-layer-field #liveloop-field-bg { opacity: .55; }
/* None: LiveLoop's stage field and build overlay are off with the rest. */
:root:root:root:root body.portal-layer-none #liveloop-field-bg, :root:root:root:root body.portal-layer-none #liveloop-field-overlay { display: none !important; }