/* /create surround: the editor sits in the sky, clouds drift behind all of it. Site chrome, not editor
   styles, so it lives outside css/editor.css. The editor pane reads the custom properties below through
   inheritance. Step 43: no frame. The canvas paints its own dark grid fill (editor.js render), so the canvas
   is the one dark surface; everything around it is sky. Tune the look here. */
.ed-shell {
  --ed-sky: #bfe0f1;        /* surround fill */
  --ed-gap: 24px;           /* sky between the pane and the window edge */
  --ed-tb-room: 76px;       /* sky band under the canvas that holds the bottom toolbar */
  --ed-glass: rgba(255, 255, 255, 0.5);   /* light backing for text that sits over cloud */
  --ed-glass-ink: #1d2a5a;  /* text on that backing */
  background: var(--ed-sky);
}
/* cloud layer: decoration only, behind #editor-root (z-index 21), never takes input */
.ed-sky { position: fixed; top: 0; right: 0; bottom: 0; left: var(--side); z-index: 0; overflow: hidden; pointer-events: none; }
.ed-sky .cloud { position: absolute; left: 0; will-change: transform; animation: drift linear infinite; }
.ed-sky .cloud svg { width: 100%; overflow: visible; }
.ed-sky .doodle { position: absolute; opacity: .5; }
@media (max-width: 820px) {
  .ed-shell { --ed-gap: 8px; }
  .ed-sky { left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ed-sky .cloud { animation: none; transform: translateX(20vw); } }