/* ═══ App shell (#443) ═══
   Every tool is a full-viewport iframe stacked in the same place and only the
   active one is visible. Hidden frames are hidden with visibility, not
   display, so they keep their layout, scroll position and animation frames;
   js/shell/main.mjs also marks them `inert` to keep them out of the tab order.
   Each tool paints its own background, so the shell only covers the gap
   before the first frame loads. The top bar (css/topbar.css) sits above the
   frames and the frames fill whatever height is left (#452). */

html, body { margin: 0; height: 100%; overflow: hidden; background: #0A0E1F; }
body { display: flex; flex-direction: column; }

#shell { position: relative; flex: 1; min-height: 0; }

#shell iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  visibility: hidden;
}

#shell iframe.active { visibility: visible; }