- Shipped
- September 5, 2026 at 6:05 PM UTC
- Author
- Kamo
- Commit
- 4a6ad5b
Every route now renders inside .kamo-pane: a card inset 15px from the browser edge with a 14px radius, a soft shadow, and overflow:hidden, so a page's own content is clipped to the rounded rectangle. The pane also carries a translateZ(0), which is what makes it the containing block for `position: fixed` descendants — without it the Powered-by pill and the Capcha backdrop anchor to the viewport and escape the clip entirely, which is exactly the case the clipping was asked for. The "Welcome Back!" ribbon is three layers around that pane, ordered within .kamo-shell: the darker tails behind it, the pane, then the red band in front. The band is rotated 45 degrees clockwise about the top-right corner diagonal and clipped by a box anchored 8px outside that corner, so it overhangs the top and right edges by exactly 8px, cut flush with the gap. The flush cut is not a shortcut, it is the only way to hit 8px. A band with square ends perpendicular to itself cannot overhang an edge by less than its own thickness over root two — 24px at a readable 34px band, far more than a 15px gap has room for. Cutting the ends parallel to the edges they cross decouples the overhang from the band's thickness, and gives both edges the same 8px. The tails start a band's width out from the corner so their near ends finish underneath it, run along each edge through the gap, and are then swallowed by the pane. Only --ribbon-over of each tail's thickness ever clears the pane, so the swallowtail notch is cut inside that strip; anything deeper never shows. Every dimension is a custom property on :root, and the whole assembly scales down under 640px. Every route sized itself to the viewport, and so overflowed the new pane by 30px. Each root now fills the pane instead — 100% in place of --app-dvh, 100dvh, 100vh and min-h-screen — and the safe-area padding moves up to the stage, which is where the inset is now applied. The stage falls back to 100dvh for the routes that do not measure visualViewport into --app-dvh themselves. Verified in a browser at 1440x900 and 390x844: the pane measures 15px from every edge, the clip box sits 8px outside the corner, both tails land where the geometry predicts, and the Powered-by pill is contained 16px inside the pane rather than the viewport.