\n```\n\n`autoHeight` · `longPress` · `resizable`\n\n## PWA safe-area insets\n\nWhen a stuic app is installed and launched standalone (iOS Home Screen, Android/desktop PWA), the web view fills the entire screen, so edge-anchored chrome can render under the status bar / notch / home indicator. stuic ships an **opt-in** safe-area layer that is **inert in a normal browser tab** (`env()` → `0`) and only engages under `@media (display-mode: standalone), (display-mode: fullscreen)`.\n\n> The insets are only non-zero when your app sets `` (your responsibility) **and** the device has an inset.\n\n**Component props (opt-in):**\n\n- `Header` — `safeArea` offsets the top app bar below the top + side insets. See the [Header README](src/lib/components/Header/README.md). Set it only on the **top** app bar, never on in-page / detail / drawer-internal headers.\n\n**Automatic:**\n\n- `Notifications` — the toast stack always keeps clear of the insets in standalone (you never want a toast under the home indicator).\n- `Modal` — when full-bleed (below the `md` breakpoint, where it fills the screen), its content is padded by the insets so header / content / footer clear the system UI. Centered desktop modals are untouched.\n- `AssetsPreview` — the lightbox image stays edge-to-edge, but the overlay controls (close, prev/next, dots, filename) are offset so they clear the insets.\n\nAll three are no-ops in a browser tab and need no prop.\n\n**Utility classes** — offset any edge-anchored element without writing your own `env()` rule. They are active in standalone only:\n\n```html\n…\n\n\n```\n\n> ⚠️ These **set** the padding on their axis (they replace, not add). Apply them only to an element that doesn't already pad that side. To **add** inset on top of existing padding, compose the variables below instead.\n\n**CSS variables** — composable insets (`0px` everywhere, real device insets in standalone):\n\n```css\n.my-bottom-bar {\n\t/* keep my own 1rem and add the home-indicator inset on top */\n\tpadding-bottom: calc(1rem + var(--stuic-safe-area-bottom));\n}\n/* also: --stuic-safe-area-top / --stuic-safe-area-left / --stuic-safe-area-right */\n```\n\n**Pick ONE layer.** Don't pad the same edge twice in a nesting chain. E.g. a nav `Drawer` whose content is its own stuic `Header`: put `safeArea` on the inner `Header`, not also on the drawer panel/wrapper.\n\n**Not covered:** remaining fixed/edge-anchored components (e.g. `Float`, or a bare `ModalDialog` used directly) do not auto-handle insets — apply a `stuic-safe-area-*` class or the variables to their content as needed.\n\n## Ratio-locked frame (letterbox)\n\nLock a box to an aspect ratio, size it to whichever axis binds first, centre it, and let the leftover space become letterboxing — a phone-proportioned column on a desktop, a portrait game board, a 16:9 scene nested under a header. The whole idea is one line:\n\n```\nwidth = min(available-width, available-height × ratio) /* aspect-ratio supplies the height */\n```\n\nThat formula (plus two guards nobody remembers) is all stuic ships, because it is the only part Tailwind cannot express. The letterbox parent itself is plain utilities: `grid`, `overflow-hidden`, `fixed inset-0`, `bg-*`, and — where you need them — `contain-layout contain-paint`, `overflow-y-auto`, `@container-size`.\n\n**Classes:**\n\n- `.stuic-frame` — the ratio-locked box. Sized against the viewport (`100vw` / `100dvh`), centred with `margin: auto`, `overflow: hidden`.\n- `.stuic-frame-cq` — the same box sized in container-query units, for a frame nested inside a layout rather than anchored to the window. Combine with `.stuic-frame`. **Requires** an ancestor with `container-type: size` (Tailwind `@container-size`); `inline-size` is not enough — `cqh` then falls through to the next container, or silently to the viewport, and you get a ratio-correct but wrongly-scaled frame that tracks the window as you resize.\n- `.stuic-frame-col` — re-align a viewport-space element (a top-layer `