/* Page frame + the layers the scenes live in. Everything visual comes from the vendored JUWEL layer
   (vendor/tokens.css, vendor/jb.css, vendor/porcelain.css, linked first). Colours here are tokens only,
   with one exception: the sky (see below). */
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: var(--jb-type-body); color: var(--jb-ink); background: var(--jb-paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; }

/* WORLD ART, not product UI: the soft lilac field JUWEL's world is painted in. Kept as one block because the 3D
   monitor screen is painted to match it (world3d.js) and the dive hands off to it without a seam. It drifts
   slowly; Pause motion stops it (film.css). The only raw colours in the page chrome live here. */
.sky { position: fixed; inset: -10%; background:
    radial-gradient(60% 55% at 18% 22%, #b9a2f2 0%, transparent 70%),
    radial-gradient(55% 50% at 78% 18%, #a9b8f4 0%, transparent 70%),
    radial-gradient(60% 60% at 25% 85%, #f2b6d4 0%, transparent 70%),
    radial-gradient(55% 55% at 88% 88%, #f6dcb0 0%, transparent 72%),
    linear-gradient(160deg, #c4b0f2, #ecc2dc 60%, #f3d9bf);
  animation: sky-drift 26s ease-in-out infinite alternate; }
@keyframes sky-drift { to { transform: translate3d(2%, -1.5%, 0) scale(1.04); } }

/* the characters' layers */
svg#agents { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; pointer-events: none; }
svg#agents .agent { pointer-events: auto; }
.bubble-text { font-family: var(--jb-font-ui); font-weight: var(--jb-w-extrabold); font-size: 17px; letter-spacing: .005em; }
canvas#p4d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }