@botiverse/raft-ui 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,3 +1,93 @@
+## [0.25.0](https://github.com/botiverse/raft-design/compare/v0.24.0...v0.25.0) (2026-10-23)
+
+### Design System
+
+- **Themes: a frame, never a new palette**: a person can pick a theme for themselves, and it follows their account to every server. Raft Yellow, the foundation itself, stays the default; beside it are Boring Gray and nine avatar-series themes (Bots, Critters, Space, Desk, Food, Quest, Weather, Plants, Spooky). A theme may recolor only the frame (rail, web top bar, phone top bar), the sidebar and, in dark mode, the canvas, cards and popups, tinted to its hue. The pink primary button, unread and @ counts, status lights, warnings and errors look the same in every theme. Every theme has a light and a dark version. An avatar-series theme can draw its series' pixel sprites on the empty parts of the frame, and the person can turn them off. Boring Gray is the one theme that also changes the brand: where you are is a gray fill with ink type, not yellow. It applies to AppRail and SidebarItem. ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: the frame is on every screen but nobody reads it, so it can carry a person's choice of look; keeping every meaning fixed means someone who switches themes doesn't have to learn the product again. In dark mode the surfaces take the theme's hue because a neutral black panel inside a colored frame looked pasted on.
+  - Affects: Navigation and States: "where you are is always yellow" now has one exception, Boring Gray, where `brand` and its washes are neutral grays and `brand-edge` is transparent. Sprites go only on the web top bar right of the search field (from 1024px) and on the desktop rail under its items, never where they could be taken for a control, an avatar or a status, and never behind text.
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#principles
+- **The first frame is the settled one**: draw the first frame the way it will stay. Read what decides a layout (a remembered width, a collapsed section, a view mode, the viewport, the pointer, the platform) before the first paint, not in an effect after mount. Measure and decide in a layout effect, not in the next animation frame. While data reloads, keep a part's presence and size, such as counts and the controls that depend on them, at their last values until the new answer arrives. A placeholder, such as the fallback of a lazily loaded panel, takes the size and place of what it stands for. ([#748](https://github.com/botiverse/raft-design/pull/748))
+  - Why: a frame drawn from a "not known yet" default and corrected a moment later is a flash: a row grows and shrinks back, a panel snaps to another width, and controls move under the pointer.
+  - Affects: a rule for products; nothing in raft-ui changes. Feedback's skeleton rule now points to it.
+  - Docs: https://raft-design.botiverse.build/patterns/responsive/#the-first-frame-is-the-settled-one
+- **A row with a fill: one line height, no mark taller than the line**: in a row whose items share the first baseline, such as a task row, every text takes the main text's line height, and a taller hit area hangs into the padding instead of making the row taller. A row that centers its items (`items-center`), as every raft-ui list row does, needs neither. ([#750](https://github.com/botiverse/raft-design/pull/750))
+  - Why: a smaller text has a shorter line box, so a Space Mono group sat 3px lower than the title and a mark centered in it sat 1.5px below the row's center; a 32px button made the row taller and the text sat 2.5px above the center of the hover fill.
+  - Affects: give the row `leading-(--text-callout--line-height)` (and set it on sizes that set their own); `text-mono-meta` and `text-caption` 18px → 22px line on such a row.
+  - Docs: https://raft-design.botiverse.build/foundations/alignment/#text-of-different-sizes-on-one-line
+- **Grab handles have round ends**: round is now for switches, radios and grab handles: the bar at a bottom sheet's top edge and the bar in a gap between side cards. It applies to Drawer. ([#747](https://github.com/botiverse/raft-design/pull/747))
+  - Why: every platform draws a grab handle with round ends (the iOS sheet grabber, Material's drag handle), and square ends on a 4px bar read as a cut edge, not something to take hold of.
+  - Affects: `rounded-full`: switches and radios only → switches, radios and grab handles. A bottom sheet's grab handle is a 36 × 4px bar in `line-seam`.
+  - Docs: https://raft-design.botiverse.build/foundations/shape/#principles
+- **The gap handle's bar follows the pointer**: on hover, the 56 × 4px bar in a gap between side cards is centered on the pointer along the gap, kept half a bar inside each end, with round ends; while dragging it stays where the drag started, and with keyboard focus it sits in the middle. Where two gaps cross, the crossing gap's bar lights at the pointer and the other at its end against the corner. `ResizableHandle` still draws only the seam handle; products draw the gap handle themselves. ([#746](https://github.com/botiverse/raft-design/pull/746))
+  - Why: a gap has no line, so the bar is the only thing that shows where the hand is, and a bar fixed in the middle of a long edge looked unrelated to the pointer.
+  - Affects: hover bar: middle of the gap, `rounded-[1px]` → at the pointer, `rounded-full`. Touch has no hover, so there the bar stays in the middle.
+  - Docs: https://raft-design.botiverse.build/components/resizable/#the-gap-handle
+- **An app link shows its host wherever a touch can open it**: a chip for a link that an app previews shows the link's host after its title (`MessageReferenceSuffix`) on any device with touch input, including a laptop with a touch screen. Write the full host, dropping only a leading `www.`, never shortened to the registered domain, and an internationalized host in its ASCII form (`xn--…`). The title truncates first; if the host alone still doesn't fit, it loses its start, never its end. It applies to MessageItem and MessageReference. ([#749](https://github.com/botiverse/raft-design/pull/749), [#753](https://github.com/botiverse/raft-design/pull/753), [#755](https://github.com/botiverse/raft-design/pull/755))
+  - Why: the title is the app's own words and may say anything, and a tap opens the link without the hover card that shows where it goes on a desktop. A link someone can open without seeing where it goes is a safety problem, and the end of a host (`…review.attacker.example`) is the part that says where.
+  - Affects: suffix `hidden any-pointer-coarse:inline` (any touch input, not only the main pointer). A host that overflows is truncated at its start: `dir="ltr"` and `unicode-bidi: isolate` inside a right-to-left box, so the ellipsis lands at the start.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#app-links
+- **An app link is a plain link until Raft knows an app previews it**: before a message's previews are first read, an app's link is an ordinary link. Once someone allows an app's previews and Raft reads them again, each of that app's links is `MessageReferencePending capped` until its preview arrives. It applies to MessageItem. ([#753](https://github.com/botiverse/raft-design/pull/753))
+  - Why: until the previews are read, the client can't tell an app's link from any other.
+  - Affects: pending chip shown while any preview loads → only for links of an app whose previews are allowed, after they are read again.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#app-links
+- **Read receipts on a mention: on a touch screen the check alone says it**: there is no hover card on a touch screen, and tapping a mention opens the agent's profile, so the check is the whole answer there: no mark means not read yet. Don't add a long press or a popup only for this line. It applies to MessageItem. ([#745](https://github.com/botiverse/raft-design/pull/745))
+  - Why: a gesture for one line of text is more to learn than it tells.
+  - Affects: a rule for products; the check's own word ("Read") still reaches a screen reader.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#read-receipts-on-a-mention
+- **The message menu: its order written down**: the menu opens with the message's full date and time as a label that can't be chosen, then the 7 quick reactions and a `smile-plus` button that opens every emoji, then the actions in three sections by what they do to the message: keep going on it (Reply in Thread, Follow or Unfollow Thread, the task action), take it elsewhere (Copy Link, Copy Markdown, Forward, Select Message), and just for me (Save or Remove from Saved, Translate). A section with nothing in it is left out with its separator. It applies to DropdownMenu, ContextMenu and MessageReactionQuickRow. ([#751](https://github.com/botiverse/raft-design/pull/751))
+  - Why: the order lived only in the compositions; it is now a rule, grouped by what each action does to the message.
+  - Affects: 8 buttons of 36px make the menu 316px wide, wider than its 240px minimum; the actions take the same width.
+  - Docs: https://raft-design.botiverse.build/components/dropdown-menu/#the-message-menu
+
+### Added
+
+- **Themes**: a new export, `@botiverse/raft-ui/themes.css`, with Boring Gray (`boring`) and the nine avatar-series themes (`bots`, `critters`, `space`, `desk`, `food`, `quest`, `weather`, `plants`, `spooky`), each with a light and a dark version. Import it after `foundation.css` and put `data-theme="<id>"` on the element that carries the mode class (`.light` / `.dark`); without `data-theme` the app is Raft Yellow. Put `data-theme-decor="off"` on the same element to turn the sprites off and keep the colors. A top bar you draw yourself takes the new `frame-decor-top` utility for its sprites; `frame-decor-rail` is the rail's, which AppRail already draws. ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: see Themes: a frame, never a new palette, above.
+  - Affects: a theme overrides only `layer-frame`, `layer-frame-active`, `foreground-on-frame` (and `-muted`, `-active`), `fill-frame-medium`, `line-frame-active` and `layer-sidebar`; in dark mode also `layer-canvas`, `layer-card` and `layer-popover`; Boring Gray also `brand`, `brand-soft`, `brand-strong`, `brand-glow`, `brand-edge` and `selection`. `frame-decor-top` paints `--frame-decor-top` 72px from the right end, from 1024px wide only; both are `none` without a decorated theme. Themes are generated from `themes.json` (`vp run @botiverse/raft-ui#build:themes`).
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#using-themes
+- **`brand-edge`** Tailwind color: `--color-brand-edge` maps the existing `--brand-edge` token (`border-brand-edge`, `ring-brand-edge`). ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: the edge of a selected navigation item has to follow the theme: ink by default, transparent in Boring Gray.
+  - Affects: `var(--brand-edge)`, which is `var(--sticker-ink)` in the foundation and `transparent` in Boring Gray.
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#what-a-theme-may-change
+
+### Changed
+
+- **SidebarItem**: the active item's border takes `brand-edge` instead of `sticker-ink`, so in Boring Gray the selected row is a plain gray fill. It renders the same in Raft Yellow and the avatar-series themes. ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: see Themes: a frame, never a new palette, above.
+  - Affects: `data-active:border-sticker-ink` → `data-active:border-brand-edge`.
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#the-themes
+- **AppRail**: the nav draws the theme's rail sprites as its last flex item, an `::after` pushed to the bottom under the items, up to 48 × 112px, which shrinks when the rail has less room so it never sits behind an item. Without a decorated theme it is empty. ([#754](https://github.com/botiverse/raft-design/pull/754))
+  - Why: see Themes: a frame, never a new palette, above.
+  - Affects: nav gains `after:mt-auto after:h-28 after:min-h-0 after:w-12 after:shrink after:content-[''] after:frame-decor-rail`. A nav `::after` of your own would replace it.
+  - Docs: https://raft-design.botiverse.build/foundations/themes/#decorations
+- **Drawer**: a bottom or top sheet's grab handle has round ends. ([#747](https://github.com/botiverse/raft-design/pull/747))
+  - Why: see Grab handles have round ends, above.
+  - Affects: handle `before:rounded-[1px]` → `before:rounded-full`.
+  - Docs: https://raft-design.botiverse.build/components/drawer/#rules
+- **MessageIcon**, **ChatIcon** and **ThreadIcon**: their lines are drawn at Lucide's weight. ([#751](https://github.com/botiverse/raft-design/pull/751))
+  - Why: at 1 they drew 0.89px at 16px, thinner than every Lucide icon beside them in a menu or a toolbar.
+  - Affects: `strokeWidth` 1 → 1.5 on the 18px grid (1.33px at 16px, as Lucide's 2 on its 24px grid).
+  - Docs: https://raft-design.botiverse.build/components/icons/#anatomy
+- **ThreadIcon**: both bubbles are outlined; the back one stops a stroke's width short of the front one on both sides, and both stay inside the 18px box with their stroke. ([#752](https://github.com/botiverse/raft-design/pull/752))
+  - Why: every icon in Raft is a line drawing at one weight, and a filled bubble read heavier than the Lucide icons beside it.
+  - Affects: front bubble `fill="currentColor"` → outline; the paths are redrawn, so the icon's shape changes slightly.
+  - Docs: https://raft-design.botiverse.build/components/icons/#anatomy
+
+### Fixed
+
+- **MessageReactionQuickRow**: the quick reactions line up with the menu's items: the first drawing starts 10px in, where the items' icons do. ([#751](https://github.com/botiverse/raft-design/pull/751))
+  - Why: with no side padding the reactions stood 3px left of the icons below them, so the column the eye follows down the menu stepped out at the top.
+  - Affects: `p-0` → `px-0.75 py-0` (3px at each side).
+  - Docs: https://raft-design.botiverse.build/components/dropdown-menu/#the-message-menu
+- **Banner** `size="sm"`: with a × (and no action button), the banner keeps the same room above and below as with a button, so the ×'s 32px hover fill stays 4px inside the banner's edges. ([#677](https://github.com/botiverse/raft-design/pull/677))
+  - Why: the room was kept only for an action button, so the ×'s hover fill reached the banner's edge.
+  - Affects: padding above and below with a × only: 8px → (32px − one line) / 2 + 4px, 9px on a desktop and 10px on a phone.
+  - Docs: https://raft-design.botiverse.build/components/banner/#sizes
+- **VirtualList**: scrolling up near the end of a list no longer snaps back, and on iOS the rows stay painted when older rows land at the top while the finger is still down. `onContentResize` is no longer called for rows above the view that the list measures and scrolls away exactly as you scroll up, since nothing in view moves and neither does the distance to the end. ([#683](https://github.com/botiverse/raft-design/pull/683))
+  - Why: a chat that follows the end from `onContentResize` and still counted the person as at the bottom scrolled back to the end, taking back the scroll that had mounted those rows; and when rows above the view shrank near the end, the browser's clamp and the list's own compensation both moved the view, so the rows in view jumped down. On iOS, at the top with the finger down, the pending compensation wasn't applied as a transform, so the rows were drawn below the view and a newly loaded older page showed blank.
+  - Affects: `onContentResize` still runs when content in view or below it changes, and when a pending scroll is replayed. The clamp is subtracted from the scroll compensation instead of being applied twice.
+  - Docs: https://raft-design.botiverse.build/components/virtual-list/#following-the-end
+
 ## [0.24.0](https://github.com/botiverse/raft-design/compare/v0.23.1...v0.24.0) (2026-10-23)
 
 ### Design System

package/dist/{inbox-item-BtxMxgoB.mjs → inbox-item-nHjMl3SO.mjs}

@@ -4508,7 +4508,7 @@ const messageReaction = tv$1({ slots: {
 	],
 	quickRow: [
 		"flex shrink-0 items-center",
-		"justify-between gap-0.5 bg-layer-popover p-0",
+		"justify-between gap-0.5 bg-layer-popover px-0.75 py-0",
 		"[&>[role=menuitem]]:size-9 [&>[role=menuitem]]:p-0 *:[[role=menuitem]]:justify-center"
 	],
 	quickButton: [

package/dist/index.d.mts

@@ -4287,7 +4287,9 @@ interface VirtualListProps<T> extends VirtualListNativeProps {
   ref?: never;
   /**
    * Called when the content's height changes: a row resizes or mounts measured, the spacer's
-   * height changes, or the `footer` / `empty` element resizes (to follow the end of a chat).
+   * height changes, or the `footer` / `empty` element resizes (to follow the end of a chat). Not
+   * called for a change the list scrolls away exactly (rows above the view measured as it scrolls
+   * up): it moves nothing in view, nor the distance from the view to the end.
    */
   onContentResize?: (() => void) | undefined;
   /**

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageMultiSelect, $n as PopoverTitle, $r as ListRowTitle, $t as MessageItemAvatarSlot, A as MessageQuotedPreview, Ai as DialogSheetReset, Ar as PanelBody, At as MessageItemReadReceipt, B as MessageQuotedPreviewLoading, Bi as ThemeStateContext, Br as ScrollAreaThumb, Bt as MessageItemMeta, Ci as DialogSurface, Cn as PreviewCardHeader, Cr as DropdownMenuShortcut, Ct as MessageReactionTooltipMeta, D as MessageListHistoryLimited, Di as panelToggleAction, Dn as PreviewCardSeparator, Dr as Kbd, Dt as MessageReactionTooltipSeparator, E as MessageListEndFade, Ei as PanelAction, En as PreviewCardPortal, Er as DropdownMenuTrigger, Et as MessageReactionTooltipNames, F as MessageQuotedPreviewAuthorMeta, Fr as PanelSection, G as MessageEmbed, Gi as headEdgePull, Gr as ListRow, Gt as MessageItemTime, H as MessageQuotedPreviewThread, Hi as stackedActions, Hr as Checkbox, Ht as MessageItemSenderBadges, I as MessageQuotedPreviewAuthorName, Ii as useParentOverlayKind, Ir as ScrollArea, J as MessageEmbedHeader, Jn as PopoverDescription, Jr as ListRowChevron, Jt as MessageItemContent, K as MessageEmbedContent, Ki as headEdges, Kn as PopoverClose, Kr as ListRowBody, Kt as MessageItemAttachments, L as MessageQuotedPreviewChannel, Li as withOverlayLayer, Lr as ScrollAreaContent, M as MessageQuotedPreviewAttachments, Mi as buttonVariants, Mr as PanelHeaderRoot, Mt as MessageItemToolbar, N as MessageQuotedPreviewAuthor, Ni as Spinner, Nr as PanelScrollContent, Nt as MessageItemToolbarButton, O as MessageListNotice, Oi as TextLink, On as PreviewCardTitle, Or as KbdGroup, Ot as MessageItemBadge, Pi as defaultNativeButton, Pr as PanelScrollViewport, Q as MessageTextSelectionToolbarSeparator, Qn as PopoverSeparator, Qr as ListRowMeta, Qt as MessageItemSearchMatch, R as MessageQuotedPreviewContent, Ri as useThemeScopeProps, Rr as ScrollAreaCorner, Rt as MessageItemHeader, Sr as DropdownMenuSeparator, St as MessageReactionTooltipContent, T as MessageListDateDivider, Ti as DialogTrigger, Tn as PreviewCardPopup, Tr as DropdownMenuSubmenuTrigger, Tt as MessageReactionTooltipNameText, U as MessageQuotedPreviewTimestamp, Ui as useStackedActions, Un as PopoverArrow, Ur as CheckboxIndicator, Ut as MessageItemSenderButton, V as MessageQuotedPreviewText, Vi as tv, Vn as Popover, Vr as ScrollAreaViewport, Vt as MessageItemSender, W as MessageQuotedPreviewUnavailable, Wi as controlIconInset, Wn as PopoverBackdrop, Wr as PRESENCE_COLOR, Wt as MessageItemSenderGroup, X as MessageTextSelectionToolbar, Xn as PopoverPopup, Xr as ListRowGroup, Xt as MessageItemEmbedded, Y as messageEmbed, Yn as PopoverHeader, Yr as ListRowDescription, Yt as MessageItemEdited, Z as MessageTextSelectionToolbarButton, Zn as PopoverPortal, Zr as ListRowIcon, Zt as MessageItemFooter, _ as InboxItemTrailing, _n as PreviewCardArrow, _r as DropdownMenuPopup, _t as MessageReactionGlyph, a as InboxItemContext, ai as TooltipProvider, an as AvatarBadge, ar as MobileNavLabel, at as MessageReferenceIndicator, b as Skeleton, bi as DialogOverlay, bn as PreviewCardDescription, br as DropdownMenuRadioItem, bt as MessageReactionQuickButton, c as InboxItemLeading, cn as AvatarGroupCount, cr as DropdownMenuCheckboxItem, d as InboxItemMetadata, di as Dialog, dr as DropdownMenuFooter, dt as MessageReferenceUnavailable, ei as ListRowTop, en as MessageItemContinuationTime, er as PopoverTrigger, et as MessageMultiSelectCheckbox, f as InboxItemSelection, fi as DialogBody, fr as DropdownMenuItem, ft as inlineChip, g as InboxItemTitle, gi as DialogFooter, gt as MessageReactionErrorIndicator, h as InboxItemTimestamp, hi as DialogDescription, hn as PreviewCard, hr as DropdownMenuLabel, ht as MessageReactionCount, i as InboxItemContent, ii as TooltipPortal, in as Avatar, ir as MobileNavItem, j as MessageQuotedPreviewAttachment, ji as Button, jr as PanelFooter, jt as MessageItemSavedIndicator, k as MessageList, ki as textLinkVariants, kn as PreviewCardTrigger, kr as Panel, kt as MessageItemBadgeSeparator, l as InboxItemMarks, ln as AvatarImage, lr as DropdownMenuCheckboxItemIndicator, lt as MessageReferenceSuffix, m as InboxItemSubtitle, mi as DialogContent, mr as DropdownMenuItemLabel, mt as MessageReactionChip, n as InboxItemActions, ni as Tooltip, nn as MessageItem, nr as useHoldThenMoveTouchSensor, nt as MessageMultiSelectToolbarActions, o as InboxItemHeading, oi as TooltipTrigger, on as AvatarFallback, or as MobileNavRoot, ot as MessageReferenceLabel, p as InboxItemSender, pi as DialogClose, pr as DropdownMenuItemCount, pt as MessageReactionAddButton, q as MessageEmbedFooter, qi as decisionWidth, qn as PopoverContent, qr as ListRowBottom, qt as MessageItemBody, r as InboxItemBody, ri as TooltipContent, rn as searchHit, rr as useMouseOnlyPointerSensor, rt as MessageReferenceChip, s as InboxItemHoverTarget, si as Badge, sn as AvatarGroup, sr as DropdownMenu, st as MessageReferencePending, t as InboxItem, ti as ListRowValue, tn as MessageItemGutter, tr as PopoverViewport, tt as MessageMultiSelectToolbar, u as InboxItemMessage, ui as useMobileViewport, un as useOverflowTitle, ur as DropdownMenuContent, ut as MessageReferenceText, v as InboxItemTrigger, vi as DialogHeader, vr as DropdownMenuPortal, vt as MessageReactionPickerContent, wi as DialogTitle, wr as DropdownMenuSubmenu, wt as MessageReactionTooltipName, xi as DialogPortal, xr as DropdownMenuRadioItemIndicator, xt as MessageReactionQuickRow, yi as DialogNav, yn as PreviewCardContent, yr as DropdownMenuRadioGroup, yt as MessageReactionPickerStatic, z as MessageQuotedPreviewHeader, zi as useTheme, zr as ScrollAreaScrollbar, zt as MessageItemInlineStatus } from "./inbox-item-BtxMxgoB.mjs";
+import { $ as MessageMultiSelect, $n as PopoverTitle, $r as ListRowTitle, $t as MessageItemAvatarSlot, A as MessageQuotedPreview, Ai as DialogSheetReset, Ar as PanelBody, At as MessageItemReadReceipt, B as MessageQuotedPreviewLoading, Bi as ThemeStateContext, Br as ScrollAreaThumb, Bt as MessageItemMeta, Ci as DialogSurface, Cn as PreviewCardHeader, Cr as DropdownMenuShortcut, Ct as MessageReactionTooltipMeta, D as MessageListHistoryLimited, Di as panelToggleAction, Dn as PreviewCardSeparator, Dr as Kbd, Dt as MessageReactionTooltipSeparator, E as MessageListEndFade, Ei as PanelAction, En as PreviewCardPortal, Er as DropdownMenuTrigger, Et as MessageReactionTooltipNames, F as MessageQuotedPreviewAuthorMeta, Fr as PanelSection, G as MessageEmbed, Gi as headEdgePull, Gr as ListRow, Gt as MessageItemTime, H as MessageQuotedPreviewThread, Hi as stackedActions, Hr as Checkbox, Ht as MessageItemSenderBadges, I as MessageQuotedPreviewAuthorName, Ii as useParentOverlayKind, Ir as ScrollArea, J as MessageEmbedHeader, Jn as PopoverDescription, Jr as ListRowChevron, Jt as MessageItemContent, K as MessageEmbedContent, Ki as headEdges, Kn as PopoverClose, Kr as ListRowBody, Kt as MessageItemAttachments, L as MessageQuotedPreviewChannel, Li as withOverlayLayer, Lr as ScrollAreaContent, M as MessageQuotedPreviewAttachments, Mi as buttonVariants, Mr as PanelHeaderRoot, Mt as MessageItemToolbar, N as MessageQuotedPreviewAuthor, Ni as Spinner, Nr as PanelScrollContent, Nt as MessageItemToolbarButton, O as MessageListNotice, Oi as TextLink, On as PreviewCardTitle, Or as KbdGroup, Ot as MessageItemBadge, Pi as defaultNativeButton, Pr as PanelScrollViewport, Q as MessageTextSelectionToolbarSeparator, Qn as PopoverSeparator, Qr as ListRowMeta, Qt as MessageItemSearchMatch, R as MessageQuotedPreviewContent, Ri as useThemeScopeProps, Rr as ScrollAreaCorner, Rt as MessageItemHeader, Sr as DropdownMenuSeparator, St as MessageReactionTooltipContent, T as MessageListDateDivider, Ti as DialogTrigger, Tn as PreviewCardPopup, Tr as DropdownMenuSubmenuTrigger, Tt as MessageReactionTooltipNameText, U as MessageQuotedPreviewTimestamp, Ui as useStackedActions, Un as PopoverArrow, Ur as CheckboxIndicator, Ut as MessageItemSenderButton, V as MessageQuotedPreviewText, Vi as tv, Vn as Popover, Vr as ScrollAreaViewport, Vt as MessageItemSender, W as MessageQuotedPreviewUnavailable, Wi as controlIconInset, Wn as PopoverBackdrop, Wr as PRESENCE_COLOR, Wt as MessageItemSenderGroup, X as MessageTextSelectionToolbar, Xn as PopoverPopup, Xr as ListRowGroup, Xt as MessageItemEmbedded, Y as messageEmbed, Yn as PopoverHeader, Yr as ListRowDescription, Yt as MessageItemEdited, Z as MessageTextSelectionToolbarButton, Zn as PopoverPortal, Zr as ListRowIcon, Zt as MessageItemFooter, _ as InboxItemTrailing, _n as PreviewCardArrow, _r as DropdownMenuPopup, _t as MessageReactionGlyph, a as InboxItemContext, ai as TooltipProvider, an as AvatarBadge, ar as MobileNavLabel, at as MessageReferenceIndicator, b as Skeleton, bi as DialogOverlay, bn as PreviewCardDescription, br as DropdownMenuRadioItem, bt as MessageReactionQuickButton, c as InboxItemLeading, cn as AvatarGroupCount, cr as DropdownMenuCheckboxItem, d as InboxItemMetadata, di as Dialog, dr as DropdownMenuFooter, dt as MessageReferenceUnavailable, ei as ListRowTop, en as MessageItemContinuationTime, er as PopoverTrigger, et as MessageMultiSelectCheckbox, f as InboxItemSelection, fi as DialogBody, fr as DropdownMenuItem, ft as inlineChip, g as InboxItemTitle, gi as DialogFooter, gt as MessageReactionErrorIndicator, h as InboxItemTimestamp, hi as DialogDescription, hn as PreviewCard, hr as DropdownMenuLabel, ht as MessageReactionCount, i as InboxItemContent, ii as TooltipPortal, in as Avatar, ir as MobileNavItem, j as MessageQuotedPreviewAttachment, ji as Button, jr as PanelFooter, jt as MessageItemSavedIndicator, k as MessageList, ki as textLinkVariants, kn as PreviewCardTrigger, kr as Panel, kt as MessageItemBadgeSeparator, l as InboxItemMarks, ln as AvatarImage, lr as DropdownMenuCheckboxItemIndicator, lt as MessageReferenceSuffix, m as InboxItemSubtitle, mi as DialogContent, mr as DropdownMenuItemLabel, mt as MessageReactionChip, n as InboxItemActions, ni as Tooltip, nn as MessageItem, nr as useHoldThenMoveTouchSensor, nt as MessageMultiSelectToolbarActions, o as InboxItemHeading, oi as TooltipTrigger, on as AvatarFallback, or as MobileNavRoot, ot as MessageReferenceLabel, p as InboxItemSender, pi as DialogClose, pr as DropdownMenuItemCount, pt as MessageReactionAddButton, q as MessageEmbedFooter, qi as decisionWidth, qn as PopoverContent, qr as ListRowBottom, qt as MessageItemBody, r as InboxItemBody, ri as TooltipContent, rn as searchHit, rr as useMouseOnlyPointerSensor, rt as MessageReferenceChip, s as InboxItemHoverTarget, si as Badge, sn as AvatarGroup, sr as DropdownMenu, st as MessageReferencePending, t as InboxItem, ti as ListRowValue, tn as MessageItemGutter, tr as PopoverViewport, tt as MessageMultiSelectToolbar, u as InboxItemMessage, ui as useMobileViewport, un as useOverflowTitle, ur as DropdownMenuContent, ut as MessageReferenceText, v as InboxItemTrigger, vi as DialogHeader, vr as DropdownMenuPortal, vt as MessageReactionPickerContent, wi as DialogTitle, wr as DropdownMenuSubmenu, wt as MessageReactionTooltipName, xi as DialogPortal, xr as DropdownMenuRadioItemIndicator, xt as MessageReactionQuickRow, yi as DialogNav, yn as PreviewCardContent, yr as DropdownMenuRadioGroup, yt as MessageReactionPickerStatic, z as MessageQuotedPreviewHeader, zi as useTheme, zr as ScrollAreaScrollbar, zt as MessageItemInlineStatus } from "./inbox-item-nHjMl3SO.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, Copy, FileText, Image, Info, TriangleAlert, Upload, X, Zap } from "lucide-react";
 import { Children, cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -336,7 +336,7 @@ const drawer = tv({
 		swipeHandle: [
 			"relative z-10 shrink-0 cursor-grab select-none active:cursor-grabbing",
 			"before:absolute before:content-['']",
-			"before:rounded-[1px] before:bg-line-seam"
+			"before:rounded-full before:bg-line-seam"
 		],
 		close: ["shrink-0"],
 		closeIcon: ["size-control-icon"],
@@ -1049,7 +1049,8 @@ const appRail = tv({ slots: {
 	nav: [
 		"flex w-full flex-1 flex-col items-center py-2",
 		"gap-1.5 pt-2.5 pb-2 first:pt-2",
-		"[@media(max-height:600px)]:pt-1.5 [@media(max-height:600px)]:first:pt-1.5"
+		"[@media(max-height:600px)]:pt-1.5 [@media(max-height:600px)]:first:pt-1.5",
+		"after:mt-auto after:h-28 after:min-h-0 after:w-12 after:shrink after:content-[''] after:frame-decor-rail"
 	],
 	footer: ["flex w-full shrink-0 flex-col items-center justify-center", "h-auto gap-1.5 pb-2 [@media(max-height:600px)]:pb-1.5"],
 	item: [
@@ -1666,7 +1667,7 @@ const sidebarItemRecipe = tv({
 			"max-md:h-auto max-md:min-h-11 max-md:py-[8.5px]",
 			"font-sans text-subhead font-medium text-foreground",
 			"max-md:text-body max-md:font-semibold",
-			"data-active:border-sticker-ink data-active:bg-brand data-active:font-bold data-active:text-sticker-ink data-active:ring-[1.5px] data-active:ring-sticker-edge",
+			"data-active:border-brand-edge data-active:bg-brand data-active:font-bold data-active:text-sticker-ink data-active:ring-[1.5px] data-active:ring-sticker-edge",
 			"not-data-active:data-[tone=muted]:text-foreground-muted not-data-active:data-[tone=away]:text-foreground-hint",
 			"outline-none"
 		],
@@ -1764,7 +1765,7 @@ function MessageIcon(props) {
 		stroke: "currentColor",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		strokeWidth: 1,
+		strokeWidth: 1.5,
 		...props,
 		children: /* @__PURE__ */ jsx("path", { d: "M14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L9.5 13.25H14.25C15.35 13.25 16.25 12.35 16.25 11.25V4.25C16.25 3.15 15.35 2.25 14.25 2.25Z" })
 	});
@@ -1781,7 +1782,7 @@ function ChatIcon(props) {
 		stroke: "currentColor",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		strokeWidth: 1,
+		strokeWidth: 1.5,
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("path", { d: "M14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L9.5 13.25H14.25C15.35 13.25 16.25 12.35 16.25 11.25V4.25C16.25 3.15 15.35 2.25 14.25 2.25Z" }),
@@ -1846,13 +1847,9 @@ function ThreadIcon(props) {
 		stroke: "currentColor",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		strokeWidth: 1,
+		strokeWidth: 1.5,
 		...props,
-		children: [/* @__PURE__ */ jsx("path", { d: "M16.25 5V4.25C16.25 3.15 15.35 2.25 14.25 2.25H3.75C2.65 2.25 1.75 3.15 1.75 4.25V11.25C1.75 12.35 2.65 13.25 3.75 13.25H5.75V16.25L7.5 14.85" }), /* @__PURE__ */ jsx("path", {
-			d: "M8.75 5.5H15.5C16.6 5.5 17.5 6.4 17.5 7.5V12.25C17.5 13.35 16.6 14.25 15.5 14.25H14V16.75L10.75 14.25H8.75C7.65 14.25 6.75 13.35 6.75 12.25V7.5C6.75 6.4 7.65 5.5 8.75 5.5Z",
-			fill: "currentColor",
-			stroke: "none"
-		})]
+		children: [/* @__PURE__ */ jsx("path", { d: "M3.5 11.5L1.75 13.25V4.25A2 2 0 0 1 3.75 2.25H11.25" }), /* @__PURE__ */ jsx("path", { d: "M8.25 5H14.5C15.6 5 16.5 5.9 16.5 7V11.75C16.5 12.85 15.6 13.75 14.5 13.75H13V16.25L9.75 13.75H8.25C7.15 13.75 6.25 12.85 6.25 11.75V7C6.25 5.9 7.15 5 8.25 5Z" })]
 	});
 }
 //#endregion
@@ -9491,7 +9488,7 @@ const banner = tv({
 	defaultVariants: { size: "md" },
 	compoundVariants: [{
 		size: "sm",
-		class: { root: "has-[>[data-slot=banner-action]]:py-[calc((--spacing(8)-1lh)/2+--spacing(1))]" }
+		class: { root: "has-[>[data-slot=banner-action],>[data-banner-close]]:py-[calc((--spacing(8)-1lh)/2+--spacing(1))]" }
 	}]
 });
 /**
@@ -13542,8 +13539,8 @@ function useIosMomentumCompensation({ enabled, listElRef, itemsElRef, syncViewpo
 		clampCompensation();
 		const listEl = listElRef.current;
 		if (listEl) {
-			if (listEl.scrollTop <= 0) {
-				if (touchEndedRef.current) flushCompensation("scrollToTop");
+			if (listEl.scrollTop <= 0 && touchEndedRef.current) {
+				flushCompensation("scrollToTop");
 				return true;
 			}
 			if (iosCompYRef.current > 0) {
@@ -14665,22 +14662,37 @@ function VirtualList(props) {
 			clearItemResizeQueue();
 			return;
 		}
+		const scrollTopBefore = listElBefore == null ? 0 : listElBefore.scrollTop;
+		const effectiveTopBefore = scrollTopBefore + compensationYRef.current;
 		applyLayoutStyles(startIndex);
-		onContentResize?.();
 		const listEl = listElRef.current;
+		let contentMoved = true;
 		if (listEl != null) {
-			if (pendingScrollTaskRef.current?.type === void 0) {
+			const pendingTask = pendingScrollTaskRef.current;
+			if (pendingTask?.type === void 0) {
 				const compensates = (index, key) => key !== void 0 && isFirstOfKey.get(key) === true && prependIndexes.includes(index) || index < viewTopIndex;
 				let compensation = 0;
+				let uncompensated = false;
 				for (const { index, key, delta } of resizes) if (compensates(index, key)) compensation += delta;
+				else if (delta !== 0) uncompensated = true;
 				const firstItem = items[0];
 				if (leadingMarginDelta !== 0 && (viewTop > 0 || compensates(0, firstItem === void 0 ? void 0 : getKey(firstItem)))) compensation += leadingMarginDelta;
-				if (compensation !== 0 && !addCompensation(compensation)) listEl.scrollBy(0, compensation);
-			} else replayPendingScrollTask();
+				else if (leadingMarginDelta !== 0) uncompensated = true;
+				if (compensation !== 0) {
+					const remaining = compensation - (listEl.scrollTop - scrollTopBefore);
+					if (remaining !== 0 && !addCompensation(remaining)) listEl.scrollBy(0, remaining);
+				}
+				const effectiveTop = listEl.scrollTop + compensationYRef.current;
+				contentMoved = uncompensated || Math.abs(effectiveTop - (effectiveTopBefore + compensation)) >= 1;
+			} else {
+				onContentResize?.();
+				replayPendingScrollTask();
+			}
 			const viewport = viewportRef.current;
 			viewport.scrollTop = listEl.scrollTop;
 			viewport.scrollLeft = listEl.scrollLeft;
-		}
+			if (pendingTask?.type === void 0 && contentMoved) onContentResize?.();
+		} else if (contentMoved) onContentResize?.();
 		clearItemResizeQueue();
 		updateRange("batchItemResize", false, null);
 	});

package/dist/styles.css

@@ -212,6 +212,7 @@
   --color-ink-40: var(--ink-40);
 
   --color-brand: var(--brand-400);
+  --color-brand-edge: var(--brand-edge);
   --color-brand-50: var(--brand-50);
   --color-brand-100: var(--brand-100);
   --color-brand-200: var(--brand-200);
@@ -679,6 +680,28 @@ textarea:-webkit-autofill:disabled {
    sticker overlay-sticker-medium, on the frame overlay-frame-medium.
    Use the bg-fill-* colours instead on a transparent control whose fill fades
    in with transition-colors. */
+/* Theme decorations on the frame (themes.css): the theme's sprites on the top
+   bar's right and above the rail's foot; none without a decorated theme. */
+/* The top bar's strip (190px) sits 72px from its right end, clear of the
+   right-hand controls; only from 1024px, where the centered search field
+   (at most min(32vw, 420px)) leaves it room. */
+@utility frame-decor-top {
+  background-repeat: no-repeat;
+  background-position: right 72px center;
+  @media (width >= 1024px) {
+    background-image: var(--frame-decor-top, none);
+  }
+}
+
+/* The rail's strip (48×112), for the nav's last flex item: laid out after
+   the items, so it never sits behind one, and clipped from the top when the
+   rail has less room than the strip. */
+@utility frame-decor-rail {
+  background-image: var(--frame-decor-rail, none);
+  background-repeat: no-repeat;
+  background-position: center bottom;
+}
+
 @utility overlay-subtle {
   background-image: linear-gradient(var(--fill-subtle), var(--fill-subtle));
 }

package/dist/themes.css

@@ -0,0 +1,474 @@
+/* Generated from themes.json by scripts/build-themes.mjs. Do not edit this
+   file; edit themes.json and run `vp run @botiverse/raft-ui#build:themes`.
+
+   Themes (design/foundations/themes.md): import after foundation.css and put
+   data-theme="<id>" on the element with the mode class. Without data-theme
+   the app is Raft Yellow, the foundation itself. */
+
+/* The frame decorations components draw (AppRail; the app's top bar via
+   frame-decor-top). none unless the theme has decor and it is on. */
+:root,
+.light,
+.dark {
+  --frame-decor-top: var(--theme-decor-top, none);
+  --frame-decor-rail: var(--theme-decor-rail, none);
+}
+
+:is(:root, .light, .dark)[data-theme-decor="off"] {
+  --frame-decor-top: none;
+  --frame-decor-rail: none;
+}
+
+/* Boring Gray */
+.light[data-theme="boring"],
+:root:not(.light):not(.dark)[data-theme="boring"] {
+  --layer-frame: oklch(0.975 0 0);
+  --layer-sidebar: oklch(0.975 0 0);
+  --layer-frame-active: oklch(0.92 0 0);
+  --foreground-on-frame: oklch(0.2 0 0);
+  --foreground-on-frame-active: oklch(0.2 0 0);
+  --foreground-on-frame-muted: oklch(0.45 0 0);
+  --fill-frame-medium: oklch(0 0 0 / 0.06);
+  --line-frame-active: transparent;
+  --brand-400: oklch(0.925 0 0);
+  --brand-soft: oklch(0.95 0 0);
+  --brand-strong: oklch(0.35 0 0);
+  --brand-glow: oklch(0.925 0 0);
+  --brand-edge: transparent;
+  --selection: oklch(0.9 0 0);
+}
+
+.dark[data-theme="boring"] {
+  --layer-frame: oklch(0.19 0 0);
+  --layer-sidebar: oklch(0.19 0 0);
+  --layer-canvas: oklch(0.235 0 0);
+  --layer-card: oklch(0.26 0 0);
+  --layer-popover: oklch(0.28 0 0);
+  --layer-frame-active: oklch(0.32 0 0);
+  --foreground-on-frame: oklch(0.93 0 0);
+  --foreground-on-frame-active: oklch(0.96 0 0);
+  --foreground-on-frame-muted: oklch(0.7 0 0);
+  --fill-frame-medium: oklch(1 0 0 / 0.07);
+  --line-frame-active: transparent;
+  --brand-400: oklch(0.86 0 0);
+  --brand-soft: oklch(1 0 0 / 0.12);
+  --brand-strong: oklch(0.86 0 0);
+  --brand-glow: oklch(0.86 0 0);
+  --brand-edge: transparent;
+  --selection: oklch(1 0 0 / 0.2);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="boring"] {
+    --layer-frame: oklch(0.19 0 0);
+    --layer-sidebar: oklch(0.19 0 0);
+    --layer-canvas: oklch(0.235 0 0);
+    --layer-card: oklch(0.26 0 0);
+    --layer-popover: oklch(0.28 0 0);
+    --layer-frame-active: oklch(0.32 0 0);
+    --foreground-on-frame: oklch(0.93 0 0);
+    --foreground-on-frame-active: oklch(0.96 0 0);
+    --foreground-on-frame-muted: oklch(0.7 0 0);
+    --fill-frame-medium: oklch(1 0 0 / 0.07);
+    --line-frame-active: transparent;
+    --brand-400: oklch(0.86 0 0);
+    --brand-soft: oklch(1 0 0 / 0.12);
+    --brand-strong: oklch(0.86 0 0);
+    --brand-glow: oklch(0.86 0 0);
+    --brand-edge: transparent;
+    --selection: oklch(1 0 0 / 0.2);
+  }
+}
+
+/* Bots */
+:is(:root, .light, .dark)[data-theme="bots"] {
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M1 0h6v1h-6zM0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h8v1h-8zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6zM1 6h2v1h-2zM5 6h2v1h-2zM1 7h2v1h-2zM5 7h2v1h-2z'/%3E%3Cpath fill='%2327ccf3' d='M1 1h1v1h-1zM6 1h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 1h2v1h-2zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M1 0h6v1h-6zM0 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6zM1 7h2v1h-2zM5 7h2v1h-2z'/%3E%3Cpath fill='%23576574' d='M1 1h6v1h-6zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h1v1h-1zM3 3h2v1h-2zM6 3h1v1h-1zM1 4h6v1h-6zM1 5h2v1h-2zM5 5h2v1h-2z'/%3E%3Cpath fill='%2327ccf3' d='M2 2h1v1h-1zM5 2h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 5h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h3v1h-3zM5 0h3v1h-3zM1 1h1v1h-1zM6 1h1v1h-1zM1 2h6v1h-6zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6z'/%3E%3Cpath fill='%23f8a16f' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23f97264' d='M3 0h2v1h-2z'/%3E%3Cpath fill='%23141111' d='M3 1h2v1h-2zM1 2h6v1h-6zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM3 6h2v1h-2zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6zM1 6h2v1h-2zM5 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M1 0h1v1h-1zM6 0h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM0 2h8v1h-8zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM3 5h2v1h-2zM7 5h1v1h-1zM0 6h8v1h-8zM1 7h1v1h-1zM6 7h1v1h-1z'/%3E%3Cpath fill='%2327ccf3' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h2v1h-2zM5 5h2v1h-2z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M1 1h6v1h-6zM1 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M2 2h4v1h-4zM3 3h2v1h-2zM2 4h4v1h-4zM2 5h1v1h-1zM5 5h1v1h-1zM2 6h4v1h-4z'/%3E%3Cpath fill='%23576574' d='M0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1z'/%3E%3Cpath fill='%2327ccf3' d='M2 3h1v1h-1zM5 3h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M1 0h6v1h-6zM0 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6zM1 7h2v1h-2zM5 7h2v1h-2z'/%3E%3Cpath fill='%23576574' d='M1 1h6v1h-6zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h1v1h-1zM3 3h2v1h-2zM6 3h1v1h-1zM1 4h6v1h-6zM1 5h2v1h-2zM5 5h2v1h-2z'/%3E%3Cpath fill='%2327ccf3' d='M2 2h1v1h-1zM5 2h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 5h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M1 0h6v1h-6zM0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h8v1h-8zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6zM1 6h2v1h-2zM5 6h2v1h-2zM1 7h2v1h-2zM5 7h2v1h-2z'/%3E%3Cpath fill='%2327ccf3' d='M1 1h1v1h-1zM6 1h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 1h2v1h-2zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h8v1h-8zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM3 6h2v1h-2zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23fe7da8' d='M1 1h1v1h-1zM6 1h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6zM1 6h2v1h-2zM5 6h2v1h-2z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.light[data-theme="bots"],
+:root:not(.light):not(.dark)[data-theme="bots"] {
+  --layer-frame: oklch(0.82 0.04 240);
+  --foreground-on-frame: var(--sticker-ink);
+  --foreground-on-frame-muted: color-mix(in oklch, var(--sticker-ink) 62%, var(--layer-frame));
+  --foreground-on-frame-active: var(--sticker-ink);
+  --layer-frame-active: oklch(1 0 0);
+  --fill-frame-medium: oklch(0.1813 0.005 17.62 / 0.1);
+  --layer-sidebar: oklch(0.985 0.012 240);
+}
+
+.dark[data-theme="bots"] {
+  --layer-frame: oklch(0.31 0.04 240);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-canvas: oklch(0.235 0.02 240);
+  --layer-sidebar: oklch(0.205 0.022 240);
+  --layer-card: oklch(0.265 0.02 240);
+  --layer-popover: oklch(0.29 0.02 240);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="bots"] {
+    --layer-frame: oklch(0.31 0.04 240);
+    --foreground-on-frame: oklch(0.96 0.01 90);
+    --foreground-on-frame-muted: oklch(0.80 0.02 90);
+    --layer-frame-active: var(--brand-400);
+    --fill-frame-medium: oklch(1 0 0 / 0.1);
+    --layer-canvas: oklch(0.235 0.02 240);
+    --layer-sidebar: oklch(0.205 0.022 240);
+    --layer-card: oklch(0.265 0.02 240);
+    --layer-popover: oklch(0.29 0.02 240);
+  }
+}
+
+/* Critters */
+:is(:root, .light, .dark)[data-theme="critters"] {
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h1v1h-1zM7 0h1v1h-1zM0 1h2v1h-2zM6 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM2 5h4v1h-4zM3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M0 0h1v1h-1zM2 0h1v1h-1zM5 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h4v1h-4zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23ffffff' d='M1 0h1v1h-1zM6 0h1v1h-1zM1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h2v1h-2zM5 5h2v1h-2zM2 6h4v1h-4z'/%3E%3Cpath fill='%23fe7da8' d='M1 1h1v1h-1zM6 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM3 5h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM3 2h2v1h-2zM7 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%23f8a16f' d='M1 1h1v1h-1zM6 1h1v1h-1zM1 2h2v1h-2zM5 2h2v1h-2zM1 3h1v1h-1zM3 3h2v1h-2zM6 3h1v1h-1zM2 4h4v1h-4z'/%3E%3Cpath fill='%23ffffff' d='M1 4h1v1h-1zM6 4h1v1h-1zM2 5h4v1h-4zM3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h6v1h-6zM0 2h2v1h-2zM6 2h2v1h-2zM0 3h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h2v1h-2zM6 5h2v1h-2zM1 6h1v1h-1zM6 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M2 2h4v1h-4zM1 3h1v1h-1zM3 3h2v1h-2zM6 3h1v1h-1zM1 4h2v1h-2zM5 4h2v1h-2zM2 5h4v1h-4zM2 6h4v1h-4z'/%3E%3Cpath fill='%23f8a16f' d='M3 4h2v1h-2zM2 7h1v1h-1zM5 7h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM0 1h2v1h-2zM6 1h2v1h-2zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M2 1h4v1h-4zM2 2h4v1h-4zM3 3h2v1h-2zM2 4h4v1h-4zM2 5h1v1h-1zM5 5h1v1h-1zM3 6h2v1h-2z'/%3E%3Cpath fill='%23b07a4e' d='M1 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h2v1h-2zM6 0h2v1h-2zM0 1h1v1h-1zM2 1h4v1h-4zM7 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23b07a4e' d='M1 1h1v1h-1zM6 1h1v1h-1zM3 2h2v1h-2zM3 3h2v1h-2zM1 4h2v1h-2zM5 4h2v1h-2zM1 5h6v1h-6zM2 6h4v1h-4z'/%3E%3Cpath fill='%23ffffff' d='M1 2h2v1h-2zM5 2h2v1h-2zM1 3h1v1h-1zM6 3h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M3 4h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M1 0h2v1h-2zM5 0h2v1h-2zM0 1h1v1h-1zM3 1h2v1h-2zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h4v1h-4zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23ffffff' d='M1 1h2v1h-2zM5 1h2v1h-2zM1 2h1v1h-1zM6 2h1v1h-1z'/%3E%3Cpath fill='%23a9d877' d='M3 2h2v1h-2zM1 3h6v1h-6zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h6v1h-6zM2 6h4v1h-4z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h2v1h-2zM6 0h2v1h-2zM0 1h1v1h-1zM2 1h4v1h-4zM7 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM3 5h2v1h-2zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23b07a4e' d='M1 1h1v1h-1zM6 1h1v1h-1zM1 2h6v1h-6zM1 3h1v1h-1zM3 3h2v1h-2zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3Cpath fill='%23ffffff' d='M2 4h4v1h-4zM2 5h1v1h-1zM5 5h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h1v1h-1zM7 0h1v1h-1zM0 1h2v1h-2zM6 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM2 5h4v1h-4zM3 6h2v1h-2z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.light[data-theme="critters"],
+:root:not(.light):not(.dark)[data-theme="critters"] {
+  --layer-frame: oklch(0.87 0.07 60);
+  --foreground-on-frame: var(--sticker-ink);
+  --foreground-on-frame-muted: color-mix(in oklch, var(--sticker-ink) 62%, var(--layer-frame));
+  --foreground-on-frame-active: var(--sticker-ink);
+  --layer-frame-active: oklch(1 0 0);
+  --fill-frame-medium: oklch(0.1813 0.005 17.62 / 0.1);
+  --layer-sidebar: oklch(0.985 0.012 60);
+}
+
+.dark[data-theme="critters"] {
+  --layer-frame: oklch(0.31 0.045 60);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-canvas: oklch(0.235 0.02 60);
+  --layer-sidebar: oklch(0.205 0.022 60);
+  --layer-card: oklch(0.265 0.02 60);
+  --layer-popover: oklch(0.29 0.02 60);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="critters"] {
+    --layer-frame: oklch(0.31 0.045 60);
+    --foreground-on-frame: oklch(0.96 0.01 90);
+    --foreground-on-frame-muted: oklch(0.80 0.02 90);
+    --layer-frame-active: var(--brand-400);
+    --fill-frame-medium: oklch(1 0 0 / 0.1);
+    --layer-canvas: oklch(0.235 0.02 60);
+    --layer-sidebar: oklch(0.205 0.022 60);
+    --layer-card: oklch(0.265 0.02 60);
+    --layer-popover: oklch(0.29 0.02 60);
+  }
+}
+
+/* Space */
+:is(:root, .light, .dark)[data-theme="space"] {
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M2 1h4v1h-4zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h2v1h-2zM6 4h2v1h-2zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3Cpath fill='%23f8a16f' d='M2 2h2v1h-2zM5 2h1v1h-1zM2 4h4v1h-4zM2 5h4v1h-4z'/%3E%3Cpath fill='%23ffffff' d='M4 2h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M1 3h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M2 1h4v1h-4zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h8v1h-8zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h6v1h-6z'/%3E%3Cpath fill='%2327ccf3' d='M2 2h1v1h-1zM4 2h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M3 2h1v1h-1zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M2 4h1v1h-1zM5 4h1v1h-1zM2 6h4v1h-4zM1 7h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h3v1h-3zM1 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM4 5h2v1h-2zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23ffd440' d='M2 1h2v1h-2zM6 1h1v1h-1zM1 2h2v1h-2zM1 3h2v1h-2zM1 4h2v1h-2zM1 5h3v1h-3zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h2v1h-2zM5 5h2v1h-2zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23f97264' d='M3 1h2v1h-2zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 2h2v1h-2zM3 4h2v1h-2zM3 5h2v1h-2zM3 6h2v1h-2z'/%3E%3Cpath fill='%2327ccf3' d='M3 3h2v1h-2z'/%3E%3Cpath fill='%23f8a16f' d='M3 7h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM2 2h4v1h-4zM7 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h4v1h-4zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6zM0 7h1v1h-1zM7 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 1h4v1h-4zM1 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h6v1h-6zM1 7h2v1h-2zM5 7h2v1h-2z'/%3E%3Cpath fill='%2327ccf3' d='M3 3h2v1h-2z'/%3E%3Cpath fill='%23f97264' d='M3 7h2v1h-2z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.light[data-theme="space"],
+:root:not(.light):not(.dark)[data-theme="space"] {
+  --layer-frame: oklch(0.30 0.10 293);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-sidebar: oklch(0.985 0.012 293);
+}
+
+.dark[data-theme="space"] {
+  --layer-frame: oklch(0.29 0.085 293);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-canvas: oklch(0.235 0.035 293);
+  --layer-sidebar: oklch(0.205 0.039 293);
+  --layer-card: oklch(0.265 0.035 293);
+  --layer-popover: oklch(0.29 0.035 293);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="space"] {
+    --layer-frame: oklch(0.29 0.085 293);
+    --foreground-on-frame: oklch(0.96 0.01 90);
+    --foreground-on-frame-muted: oklch(0.80 0.02 90);
+    --layer-frame-active: var(--brand-400);
+    --fill-frame-medium: oklch(1 0 0 / 0.1);
+    --layer-canvas: oklch(0.235 0.035 293);
+    --layer-sidebar: oklch(0.205 0.039 293);
+    --layer-card: oklch(0.265 0.035 293);
+    --layer-popover: oklch(0.29 0.035 293);
+  }
+}
+
+/* Desk */
+:is(:root, .light, .dark)[data-theme="desk"] {
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M5 0h2v1h-2zM4 1h1v1h-1zM7 1h1v1h-1zM3 2h1v1h-1zM6 2h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM1 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM0 7h2v1h-2z'/%3E%3Cpath fill='%23fe7da8' d='M5 1h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M4 2h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M3 3h2v1h-2zM2 4h2v1h-2z'/%3E%3Cpath fill='%23b07a4e' d='M1 5h2v1h-2zM1 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1zM2 6h4v1h-4zM2 7h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M2 1h4v1h-4zM1 2h1v1h-1zM3 2h4v1h-4zM1 3h6v1h-6zM2 4h4v1h-4zM3 5h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M2 2h1v1h-1z'/%3E%3Cpath fill='%23576574' d='M3 7h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h7v1h-7zM0 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM3 5h3v1h-3zM7 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM0 7h8v1h-8z'/%3E%3Cpath fill='%23576574' d='M1 1h1v1h-1zM6 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM1 3h6v1h-6zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 1h2v1h-2zM5 1h1v1h-1zM2 2h2v1h-2zM5 2h1v1h-1zM2 4h4v1h-4zM2 5h1v1h-1zM2 6h4v1h-4z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M1 0h4v1h-4zM0 1h1v1h-1zM5 1h1v1h-1zM0 2h1v1h-1zM5 2h1v1h-1zM0 3h1v1h-1zM5 3h1v1h-1zM1 4h5v1h-5zM4 5h1v1h-1zM6 5h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M1 1h1v1h-1z'/%3E%3Cpath fill='%2327ccf3' d='M2 1h3v1h-3zM1 2h4v1h-4zM1 3h4v1h-4z'/%3E%3Cpath fill='%23b07a4e' d='M5 5h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M0 1h8v1h-8zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h8v1h-8zM0 4h1v1h-1zM2 4h6v1h-6zM0 5h2v1h-2zM3 5h5v1h-5zM0 6h1v1h-1zM2 6h2v1h-2zM6 6h2v1h-2zM0 7h8v1h-8z'/%3E%3Cpath fill='%23f97264' d='M1 2h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M2 2h1v1h-1z'/%3E%3Cpath fill='%23a9d877' d='M3 2h1v1h-1zM1 4h1v1h-1zM2 5h1v1h-1zM1 6h1v1h-1zM4 6h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M4 2h3v1h-3z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M6 0h2v1h-2zM4 1h2v1h-2zM7 1h1v1h-1zM2 2h2v1h-2zM7 2h1v1h-1zM0 3h2v1h-2zM6 3h2v1h-2zM1 4h2v1h-2zM5 4h1v1h-1zM7 4h1v1h-1zM3 5h3v1h-3zM7 5h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M6 1h1v1h-1zM4 2h3v1h-3zM2 3h4v1h-4zM3 4h2v1h-2zM6 4h1v1h-1zM6 5h1v1h-1zM5 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h8v1h-8zM3 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M3 1h2v1h-2zM2 2h4v1h-4zM2 3h4v1h-4zM2 4h4v1h-4zM1 5h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM0 1h3v1h-3zM5 1h3v1h-3zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM3 3h3v1h-3zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM3 5h3v1h-3zM7 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM0 7h8v1h-8z'/%3E%3Cpath fill='%23576574' d='M3 1h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M1 2h6v1h-6zM2 3h1v1h-1zM6 3h1v1h-1zM1 4h6v1h-6zM2 5h1v1h-1zM6 5h1v1h-1zM1 6h6v1h-6z'/%3E%3Cpath fill='%23a9d877' d='M1 3h1v1h-1zM1 5h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h7v1h-7zM0 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM4 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM3 5h3v1h-3zM7 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM0 7h8v1h-8z'/%3E%3Cpath fill='%23576574' d='M1 1h1v1h-1zM6 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM1 3h6v1h-6zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 1h2v1h-2zM5 1h1v1h-1zM2 2h2v1h-2zM5 2h1v1h-1zM2 4h4v1h-4zM2 5h1v1h-1zM2 6h4v1h-4z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.light[data-theme="desk"],
+:root:not(.light):not(.dark)[data-theme="desk"] {
+  --layer-frame: oklch(0.83 0.06 75);
+  --foreground-on-frame: var(--sticker-ink);
+  --foreground-on-frame-muted: color-mix(in oklch, var(--sticker-ink) 62%, var(--layer-frame));
+  --foreground-on-frame-active: var(--sticker-ink);
+  --layer-frame-active: oklch(1 0 0);
+  --fill-frame-medium: oklch(0.1813 0.005 17.62 / 0.1);
+  --layer-sidebar: oklch(0.985 0.012 75);
+}
+
+.dark[data-theme="desk"] {
+  --layer-frame: oklch(0.31 0.04 75);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-canvas: oklch(0.235 0.02 75);
+  --layer-sidebar: oklch(0.205 0.022 75);
+  --layer-card: oklch(0.265 0.02 75);
+  --layer-popover: oklch(0.29 0.02 75);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="desk"] {
+    --layer-frame: oklch(0.31 0.04 75);
+    --foreground-on-frame: oklch(0.96 0.01 90);
+    --foreground-on-frame-muted: oklch(0.80 0.02 90);
+    --layer-frame-active: var(--brand-400);
+    --fill-frame-medium: oklch(1 0 0 / 0.1);
+    --layer-canvas: oklch(0.235 0.02 75);
+    --layer-sidebar: oklch(0.205 0.022 75);
+    --layer-card: oklch(0.265 0.02 75);
+    --layer-popover: oklch(0.29 0.02 75);
+  }
+}
+
+/* Food */
+:is(:root, .light, .dark)[data-theme="food"] {
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM3 3h2v1h-2zM7 3h1v1h-1zM0 4h1v1h-1zM3 4h2v1h-2zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23fe7da8' d='M2 1h1v1h-1zM4 1h2v1h-2zM1 2h4v1h-4zM6 2h1v1h-1zM1 3h1v1h-1zM5 3h2v1h-2zM1 4h2v1h-2zM5 4h1v1h-1zM2 5h5v1h-5zM2 6h2v1h-2zM5 6h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M3 1h1v1h-1zM6 4h1v1h-1z'/%3E%3Cpath fill='%2327ccf3' d='M5 2h1v1h-1zM1 5h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 3h1v1h-1zM4 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM1 1h2v1h-2zM5 1h2v1h-2zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%23a9d877' d='M3 1h2v1h-2zM2 2h4v1h-4z'/%3E%3Cpath fill='%23f97264' d='M1 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM3 3h2v1h-2zM6 3h1v1h-1zM1 4h6v1h-6zM3 5h2v1h-2zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h1v1h-1zM5 3h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h8v1h-8zM0 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%23b07a4e' d='M1 1h6v1h-6z'/%3E%3Cpath fill='%23ffd440' d='M1 2h2v1h-2zM4 2h3v1h-3zM3 3h2v1h-2zM2 4h4v1h-4zM4 5h1v1h-1zM3 6h2v1h-2z'/%3E%3Cpath fill='%23f97264' d='M3 2h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM3 5h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h8v1h-8zM1 5h1v1h-1zM3 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%23fe7da8' d='M2 1h2v1h-2zM5 1h1v1h-1zM1 2h6v1h-6zM1 3h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M4 1h1v1h-1z'/%3E%3Cpath fill='%23b07a4e' d='M2 5h1v1h-1zM4 5h2v1h-2zM3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM2 5h4v1h-4zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h4v1h-4zM7 6h1v1h-1zM0 7h8v1h-8z'/%3E%3Cpath fill='%23ffffff' d='M3 1h2v1h-2zM3 2h2v1h-2zM2 3h4v1h-4zM2 4h4v1h-4zM1 5h1v1h-1zM6 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h8v1h-8zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h2v1h-2zM1 6h1v1h-1zM3 6h1v1h-1zM5 6h2v1h-2zM2 7h4v1h-4z'/%3E%3Cpath fill='%23f97264' d='M3 1h2v1h-2z'/%3E%3Cpath fill='%23fe7da8' d='M2 2h4v1h-4zM1 3h2v1h-2zM4 3h3v1h-3z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3Cpath fill='%23b07a4e' d='M2 5h1v1h-1zM4 5h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM6 5h2v1h-2zM1 6h1v1h-1zM3 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23b07a4e' d='M2 1h4v1h-4zM1 2h1v1h-1zM3 2h4v1h-4zM1 3h4v1h-4zM6 3h1v1h-1zM1 4h2v1h-2zM4 4h3v1h-3zM1 5h5v1h-5zM2 6h1v1h-1zM4 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M2 1h3v1h-3zM1 2h1v1h-1zM5 2h2v1h-2zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM7 5h1v1h-1zM2 6h5v1h-5z'/%3E%3Cpath fill='%23ffffff' d='M2 2h3v1h-3zM1 3h2v1h-2zM5 3h2v1h-2zM1 4h2v1h-2zM5 4h2v1h-2zM2 5h5v1h-5z'/%3E%3Cpath fill='%23ffd440' d='M3 3h2v1h-2zM3 4h1v1h-1z'/%3E%3Cpath fill='%23f8a16f' d='M4 4h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM3 3h2v1h-2zM7 3h1v1h-1zM0 4h1v1h-1zM3 4h2v1h-2zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23fe7da8' d='M2 1h1v1h-1zM4 1h2v1h-2zM1 2h4v1h-4zM6 2h1v1h-1zM1 3h1v1h-1zM5 3h2v1h-2zM1 4h2v1h-2zM5 4h1v1h-1zM2 5h5v1h-5zM2 6h2v1h-2zM5 6h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M3 1h1v1h-1zM6 4h1v1h-1z'/%3E%3Cpath fill='%2327ccf3' d='M5 2h1v1h-1zM1 5h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 3h1v1h-1zM4 6h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.light[data-theme="food"],
+:root:not(.light):not(.dark)[data-theme="food"] {
+  --layer-frame: oklch(0.88 0.065 355);
+  --foreground-on-frame: var(--sticker-ink);
+  --foreground-on-frame-muted: color-mix(in oklch, var(--sticker-ink) 62%, var(--layer-frame));
+  --foreground-on-frame-active: var(--sticker-ink);
+  --layer-frame-active: oklch(1 0 0);
+  --fill-frame-medium: oklch(0.1813 0.005 17.62 / 0.1);
+  --layer-sidebar: oklch(0.985 0.012 355);
+}
+
+.dark[data-theme="food"] {
+  --layer-frame: oklch(0.31 0.055 355);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-canvas: oklch(0.235 0.025 355);
+  --layer-sidebar: oklch(0.205 0.028 355);
+  --layer-card: oklch(0.265 0.025 355);
+  --layer-popover: oklch(0.29 0.025 355);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="food"] {
+    --layer-frame: oklch(0.31 0.055 355);
+    --foreground-on-frame: oklch(0.96 0.01 90);
+    --foreground-on-frame-muted: oklch(0.80 0.02 90);
+    --layer-frame-active: var(--brand-400);
+    --fill-frame-medium: oklch(1 0 0 / 0.1);
+    --layer-canvas: oklch(0.235 0.025 355);
+    --layer-sidebar: oklch(0.205 0.028 355);
+    --layer-card: oklch(0.265 0.025 355);
+    --layer-popover: oklch(0.29 0.025 355);
+  }
+}
+
+/* Quest */
+:is(:root, .light, .dark)[data-theme="quest"] {
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM1 3h2v1h-2zM5 3h2v1h-2zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h2v1h-2zM5 5h2v1h-2zM2 6h1v1h-1zM5 6h1v1h-1zM2 7h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 1h1v1h-1zM3 2h1v1h-1zM3 3h1v1h-1z'/%3E%3Cpath fill='%2327ccf3' d='M4 1h1v1h-1zM4 2h1v1h-1zM4 3h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M1 4h6v1h-6zM3 7h2v1h-2z'/%3E%3Cpath fill='%23b07a4e' d='M3 5h2v1h-2zM3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M1 1h1v1h-1zM3 1h2v1h-2zM6 1h1v1h-1zM1 2h6v1h-6zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM0 5h8v1h-8zM0 6h1v1h-1zM7 6h1v1h-1zM0 7h8v1h-8z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM2 4h4v1h-4zM1 6h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h8v1h-8zM0 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%2327ccf3' d='M1 1h2v1h-2zM5 1h2v1h-2zM1 2h2v1h-2zM5 2h2v1h-2zM1 4h2v1h-2zM5 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M3 1h2v1h-2zM3 2h2v1h-2zM1 3h6v1h-6zM3 4h2v1h-2zM3 5h2v1h-2zM3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM2 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23b07a4e' d='M3 1h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M3 2h2v1h-2zM2 3h4v1h-4zM1 5h1v1h-1zM4 6h1v1h-1z'/%3E%3Cpath fill='%23a9d877' d='M1 4h6v1h-6zM2 5h5v1h-5zM1 6h3v1h-3zM5 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M1 1h3v1h-3zM0 2h1v1h-1zM4 2h4v1h-4zM0 3h1v1h-1zM2 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM7 4h1v1h-1zM1 5h3v1h-3zM5 5h3v1h-3z'/%3E%3Cpath fill='%23ffd440' d='M1 2h3v1h-3zM1 3h1v1h-1zM3 3h4v1h-4zM1 4h3v1h-3zM5 4h2v1h-2z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%2327ccf3' d='M3 1h2v1h-2zM2 2h1v1h-1zM4 2h2v1h-2zM1 3h1v1h-1zM3 3h4v1h-4zM1 4h6v1h-6zM2 5h4v1h-4zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M3 2h1v1h-1zM2 3h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M1 1h6v1h-6zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h3v1h-3zM5 3h3v1h-3zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM0 7h8v1h-8z'/%3E%3Cpath fill='%23b07a4e' d='M1 2h6v1h-6zM1 4h2v1h-2zM5 4h2v1h-2zM1 5h6v1h-6zM1 6h6v1h-6z'/%3E%3Cpath fill='%23ffd440' d='M3 3h2v1h-2zM3 4h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M1 1h2v1h-2zM5 1h2v1h-2zM0 2h1v1h-1zM3 2h2v1h-2zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%23f97264' d='M1 2h2v1h-2zM5 2h2v1h-2zM1 3h6v1h-6zM1 4h6v1h-6zM2 5h4v1h-4zM3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM1 3h2v1h-2zM5 3h2v1h-2zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h2v1h-2zM5 5h2v1h-2zM2 6h1v1h-1zM5 6h1v1h-1zM2 7h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M3 1h1v1h-1zM3 2h1v1h-1zM3 3h1v1h-1z'/%3E%3Cpath fill='%2327ccf3' d='M4 1h1v1h-1zM4 2h1v1h-1zM4 3h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M1 4h6v1h-6zM3 7h2v1h-2z'/%3E%3Cpath fill='%23b07a4e' d='M3 5h2v1h-2zM3 6h2v1h-2z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.light[data-theme="quest"],
+:root:not(.light):not(.dark)[data-theme="quest"] {
+  --layer-frame: oklch(0.40 0.12 25);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-sidebar: oklch(0.985 0.012 25);
+}
+
+.dark[data-theme="quest"] {
+  --layer-frame: oklch(0.31 0.08 25);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-canvas: oklch(0.235 0.03 25);
+  --layer-sidebar: oklch(0.205 0.033 25);
+  --layer-card: oklch(0.265 0.03 25);
+  --layer-popover: oklch(0.29 0.03 25);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="quest"] {
+    --layer-frame: oklch(0.31 0.08 25);
+    --foreground-on-frame: oklch(0.96 0.01 90);
+    --foreground-on-frame-muted: oklch(0.80 0.02 90);
+    --layer-frame-active: var(--brand-400);
+    --fill-frame-medium: oklch(1 0 0 / 0.1);
+    --layer-canvas: oklch(0.235 0.03 25);
+    --layer-sidebar: oklch(0.205 0.033 25);
+    --layer-card: oklch(0.265 0.03 25);
+    --layer-popover: oklch(0.29 0.03 25);
+  }
+}
+
+/* Weather */
+:is(:root, .light, .dark)[data-theme="weather"] {
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M2 1h2v1h-2zM1 2h1v1h-1zM4 2h2v1h-2zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M2 2h2v1h-2zM1 3h5v1h-5zM1 4h6v1h-6zM1 5h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M1 0h1v1h-1zM3 0h2v1h-2zM6 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM1 7h1v1h-1zM3 7h2v1h-2zM6 7h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M3 1h2v1h-2zM2 2h4v1h-4zM1 3h6v1h-6zM1 4h6v1h-6zM2 5h4v1h-4zM3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M2 1h4v1h-4zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM3 4h2v1h-2zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h3v1h-3zM5 6h3v1h-3z'/%3E%3Cpath fill='%23f97264' d='M2 2h4v1h-4zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM2 4h1v1h-1zM5 4h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M2 1h2v1h-2zM1 2h1v1h-1zM4 2h2v1h-2zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M2 2h2v1h-2zM1 3h5v1h-5zM1 4h6v1h-6zM1 5h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM1 1h2v1h-2zM5 1h2v1h-2zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h8v1h-8zM4 4h1v1h-1zM4 5h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM3 7h1v1h-1z'/%3E%3Cpath fill='%23f97264' d='M3 1h2v1h-2zM1 2h2v1h-2zM4 2h3v1h-3z'/%3E%3Cpath fill='%23ffffff' d='M3 2h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h4v1h-4zM2 1h1v1h-1zM7 1h1v1h-1zM1 2h3v1h-3zM7 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM5 4h3v1h-3zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6z'/%3E%3Cpath fill='%23ffd440' d='M3 1h4v1h-4zM4 2h3v1h-3zM5 3h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M1 3h3v1h-3zM1 4h4v1h-4zM1 5h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M2 1h2v1h-2zM1 2h1v1h-1zM4 2h2v1h-2zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M2 2h2v1h-2zM1 3h5v1h-5zM1 4h6v1h-6zM1 5h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h2v1h-2zM1 1h1v1h-1zM4 1h2v1h-2zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM1 4h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M2 1h2v1h-2zM1 2h5v1h-5zM1 3h6v1h-6z'/%3E%3Cpath fill='%2327ccf3' d='M1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM2 1h4v1h-4zM0 2h8v1h-8zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h2v1h-2zM4 5h3v1h-3z'/%3E%3Cpath fill='%23f8a16f' d='M3 5h1v1h-1z'/%3E%3Cpath fill='%23f97264' d='M1 6h6v1h-6z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.light[data-theme="weather"],
+:root:not(.light):not(.dark)[data-theme="weather"] {
+  --layer-frame: oklch(0.86 0.085 222);
+  --foreground-on-frame: var(--sticker-ink);
+  --foreground-on-frame-muted: color-mix(in oklch, var(--sticker-ink) 62%, var(--layer-frame));
+  --foreground-on-frame-active: var(--sticker-ink);
+  --layer-frame-active: oklch(1 0 0);
+  --fill-frame-medium: oklch(0.1813 0.005 17.62 / 0.1);
+  --layer-sidebar: oklch(0.985 0.012 222);
+}
+
+.dark[data-theme="weather"] {
+  --layer-frame: oklch(0.30 0.055 245);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-canvas: oklch(0.235 0.03 245);
+  --layer-sidebar: oklch(0.205 0.033 245);
+  --layer-card: oklch(0.265 0.03 245);
+  --layer-popover: oklch(0.29 0.03 245);
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M2 0h3v1h-3zM1 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM4 5h2v1h-2zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23ffd440' d='M2 1h2v1h-2zM6 1h1v1h-1zM1 2h2v1h-2zM1 3h2v1h-2zM1 4h2v1h-2zM1 5h3v1h-3zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M2 1h2v1h-2zM1 2h1v1h-1zM4 2h2v1h-2zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M2 2h2v1h-2zM1 3h5v1h-5zM1 4h6v1h-6zM1 5h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h4v1h-4zM2 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM4 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM1 4h2v1h-2zM5 4h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM1 6h1v1h-1zM3 6h1v1h-1zM1 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M3 1h2v1h-2zM2 2h2v1h-2zM1 3h5v1h-5zM3 4h2v1h-2zM3 5h1v1h-1zM2 6h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h3v1h-3zM1 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM4 5h2v1h-2zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23ffd440' d='M2 1h2v1h-2zM6 1h1v1h-1zM1 2h2v1h-2zM1 3h2v1h-2zM1 4h2v1h-2zM1 5h3v1h-3zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h2v1h-2zM1 1h1v1h-1zM4 1h2v1h-2zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM1 4h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M2 1h2v1h-2zM1 2h5v1h-5zM1 3h6v1h-6z'/%3E%3Cpath fill='%2327ccf3' d='M1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM2 1h4v1h-4zM0 2h8v1h-8zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h2v1h-2zM4 5h3v1h-3z'/%3E%3Cpath fill='%23f8a16f' d='M3 5h1v1h-1z'/%3E%3Cpath fill='%23f97264' d='M1 6h6v1h-6z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="weather"] {
+    --layer-frame: oklch(0.30 0.055 245);
+    --foreground-on-frame: oklch(0.96 0.01 90);
+    --foreground-on-frame-muted: oklch(0.80 0.02 90);
+    --layer-frame-active: var(--brand-400);
+    --fill-frame-medium: oklch(1 0 0 / 0.1);
+    --layer-canvas: oklch(0.235 0.03 245);
+    --layer-sidebar: oklch(0.205 0.033 245);
+    --layer-card: oklch(0.265 0.03 245);
+    --layer-popover: oklch(0.29 0.03 245);
+    --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M2 0h3v1h-3zM1 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM4 5h2v1h-2zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23ffd440' d='M2 1h2v1h-2zM6 1h1v1h-1zM1 2h2v1h-2zM1 3h2v1h-2zM1 4h2v1h-2zM1 5h3v1h-3zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M2 1h2v1h-2zM1 2h1v1h-1zM4 2h2v1h-2zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM1 6h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M2 2h2v1h-2zM1 3h5v1h-5zM1 4h6v1h-6zM1 5h6v1h-6z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h4v1h-4zM2 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM4 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM1 4h2v1h-2zM5 4h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM1 6h1v1h-1zM3 6h1v1h-1zM1 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M3 1h2v1h-2zM2 2h2v1h-2zM1 3h5v1h-5zM3 4h2v1h-2zM3 5h1v1h-1zM2 6h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+    --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h3v1h-3zM1 1h1v1h-1zM4 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM4 5h2v1h-2zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23ffd440' d='M2 1h2v1h-2zM6 1h1v1h-1zM1 2h2v1h-2zM1 3h2v1h-2zM1 4h2v1h-2zM1 5h3v1h-3zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h8v1h-8zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h2v1h-2zM6 7h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M2 3h4v1h-4zM3 4h2v1h-2zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h2v1h-2zM1 1h1v1h-1zM4 1h2v1h-2zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM1 4h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M2 1h2v1h-2zM1 2h5v1h-5zM1 3h6v1h-6z'/%3E%3Cpath fill='%2327ccf3' d='M1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM2 1h4v1h-4zM0 2h8v1h-8zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h2v1h-2zM4 5h3v1h-3z'/%3E%3Cpath fill='%23f8a16f' d='M3 5h1v1h-1z'/%3E%3Cpath fill='%23f97264' d='M1 6h6v1h-6z'/%3E%3C/g%3E%3C/svg%3E");
+  }
+}
+
+/* Plants */
+:is(:root, .light, .dark)[data-theme="plants"] {
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h2v1h-2zM5 5h2v1h-2zM2 6h1v1h-1zM5 6h1v1h-1zM3 7h2v1h-2z'/%3E%3Cpath fill='%239dcaaa' d='M3 1h2v1h-2zM2 2h4v1h-4zM1 3h6v1h-6zM1 4h6v1h-6zM3 5h2v1h-2z'/%3E%3Cpath fill='%23f8a16f' d='M3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M1 0h1v1h-1zM3 0h2v1h-2zM6 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23fe7da8' d='M1 1h1v1h-1zM3 1h2v1h-2zM6 1h1v1h-1zM1 2h6v1h-6zM2 3h4v1h-4z'/%3E%3Cpath fill='%23a9d877' d='M3 4h2v1h-2zM1 5h1v1h-1zM3 5h2v1h-2zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h3v1h-3zM5 6h3v1h-3zM3 7h2v1h-2z'/%3E%3Cpath fill='%239dcaaa' d='M3 1h2v1h-2zM2 2h4v1h-4zM3 3h2v1h-2zM2 4h4v1h-4zM1 5h6v1h-6z'/%3E%3Cpath fill='%23b07a4e' d='M3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M1 0h1v1h-1zM3 0h2v1h-2zM6 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM1 7h1v1h-1zM3 7h2v1h-2zM6 7h1v1h-1z'/%3E%3Cpath fill='%23ffd440' d='M1 1h1v1h-1zM3 1h2v1h-2zM6 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM2 5h1v1h-1zM5 5h1v1h-1zM1 6h1v1h-1zM3 6h2v1h-2zM6 6h1v1h-1z'/%3E%3Cpath fill='%23b07a4e' d='M3 2h2v1h-2zM2 3h4v1h-4zM2 4h4v1h-4zM3 5h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h2v1h-2zM1 2h2v1h-2zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM5 4h2v1h-2zM1 5h2v1h-2zM5 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23a9d877' d='M3 1h2v1h-2zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h1v1h-1zM3 3h4v1h-4zM1 4h4v1h-4zM3 5h2v1h-2z'/%3E%3Cpath fill='%23f8a16f' d='M2 6h4v1h-4z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M5 0h3v1h-3zM3 1h2v1h-2zM7 1h1v1h-1zM2 2h1v1h-1zM7 2h1v1h-1zM1 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM1 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM1 6h4v1h-4zM0 7h1v1h-1z'/%3E%3Cpath fill='%23f8a16f' d='M5 1h2v1h-2zM3 2h4v1h-4zM2 3h3v1h-3zM6 3h1v1h-1zM2 4h2v1h-2zM5 4h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM2 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h3v1h-3zM5 6h3v1h-3zM3 7h2v1h-2z'/%3E%3Cpath fill='%239dcaaa' d='M3 1h2v1h-2zM2 2h4v1h-4zM3 3h2v1h-2zM2 4h4v1h-4zM1 5h6v1h-6z'/%3E%3Cpath fill='%23b07a4e' d='M3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM1 4h6v1h-6zM2 5h1v1h-1zM5 5h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23f97264' d='M2 1h1v1h-1zM5 1h1v1h-1zM1 2h2v1h-2zM5 2h2v1h-2zM1 3h6v1h-6z'/%3E%3Cpath fill='%23ffffff' d='M3 1h2v1h-2zM3 2h2v1h-2zM3 5h2v1h-2zM3 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M0 0h2v1h-2zM6 0h2v1h-2zM0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM3 2h2v1h-2zM7 2h1v1h-1zM1 3h2v1h-2zM5 3h2v1h-2zM2 4h1v1h-1zM5 4h1v1h-1zM1 5h6v1h-6zM1 6h1v1h-1zM6 6h1v1h-1zM2 7h4v1h-4z'/%3E%3Cpath fill='%23a9d877' d='M1 1h1v1h-1zM6 1h1v1h-1zM1 2h2v1h-2zM5 2h2v1h-2zM3 3h2v1h-2zM3 4h2v1h-2z'/%3E%3Cpath fill='%23f8a16f' d='M2 6h4v1h-4z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.light[data-theme="plants"],
+:root:not(.light):not(.dark)[data-theme="plants"] {
+  --layer-frame: oklch(0.80 0.075 158);
+  --foreground-on-frame: var(--sticker-ink);
+  --foreground-on-frame-muted: color-mix(in oklch, var(--sticker-ink) 62%, var(--layer-frame));
+  --foreground-on-frame-active: var(--sticker-ink);
+  --layer-frame-active: oklch(1 0 0);
+  --fill-frame-medium: oklch(0.1813 0.005 17.62 / 0.1);
+  --layer-sidebar: oklch(0.985 0.012 158);
+}
+
+.dark[data-theme="plants"] {
+  --layer-frame: oklch(0.30 0.05 158);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-canvas: oklch(0.235 0.025 158);
+  --layer-sidebar: oklch(0.205 0.028 158);
+  --layer-card: oklch(0.265 0.025 158);
+  --layer-popover: oklch(0.29 0.025 158);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="plants"] {
+    --layer-frame: oklch(0.30 0.05 158);
+    --foreground-on-frame: oklch(0.96 0.01 90);
+    --foreground-on-frame-muted: oklch(0.80 0.02 90);
+    --layer-frame-active: var(--brand-400);
+    --fill-frame-medium: oklch(1 0 0 / 0.1);
+    --layer-canvas: oklch(0.235 0.025 158);
+    --layer-sidebar: oklch(0.205 0.028 158);
+    --layer-card: oklch(0.265 0.025 158);
+    --layer-popover: oklch(0.29 0.025 158);
+  }
+}
+
+/* Spooky */
+:is(:root, .light, .dark)[data-theme="spooky"] {
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h1v1h-1zM5 1h1v1h-1zM1 2h6v1h-6zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h4v1h-4zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23a9d877' d='M4 1h1v1h-1z'/%3E%3Cpath fill='%23f8a16f' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM3 5h2v1h-2zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 1h4v1h-4zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h6v1h-6zM1 4h6v1h-6zM1 5h2v1h-2zM5 5h2v1h-2zM1 6h1v1h-1zM3 6h2v1h-2zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h8v1h-8zM0 3h2v1h-2zM3 3h2v1h-2zM6 3h2v1h-2zM0 4h8v1h-8zM0 5h1v1h-1zM2 5h4v1h-4zM7 5h1v1h-1zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M2 3h1v1h-1zM5 3h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M1 0h6v1h-6zM0 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h2v1h-2zM2 6h4v1h-4zM3 7h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M1 1h6v1h-6zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h6v1h-6zM2 4h4v1h-4zM2 5h1v1h-1zM4 5h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h1v1h-1zM5 1h1v1h-1zM1 2h6v1h-6zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h4v1h-4zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23a9d877' d='M4 1h1v1h-1z'/%3E%3Cpath fill='%23f8a16f' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h8v1h-8zM0 3h2v1h-2zM3 3h2v1h-2zM6 3h2v1h-2zM0 4h8v1h-8zM0 5h1v1h-1zM2 5h4v1h-4zM7 5h1v1h-1zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M2 3h1v1h-1zM5 3h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM3 5h2v1h-2zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 1h4v1h-4zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h6v1h-6zM1 4h6v1h-6zM1 5h2v1h-2zM5 5h2v1h-2zM1 6h1v1h-1zM3 6h2v1h-2zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h1v1h-1zM2 2h4v1h-4zM7 2h1v1h-1zM1 3h6v1h-6zM0 4h2v1h-2zM3 4h2v1h-2zM6 4h2v1h-2zM1 5h6v1h-6zM0 6h1v1h-1zM2 6h4v1h-4zM7 6h1v1h-1zM0 7h1v1h-1zM7 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 4h1v1h-1zM5 4h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h1v1h-1zM5 1h1v1h-1zM1 2h6v1h-6zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h4v1h-4zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23a9d877' d='M4 1h1v1h-1z'/%3E%3Cpath fill='%23f8a16f' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.light[data-theme="spooky"],
+:root:not(.light):not(.dark)[data-theme="spooky"] {
+  --layer-frame: oklch(0.77 0.14 52);
+  --foreground-on-frame: var(--sticker-ink);
+  --foreground-on-frame-muted: color-mix(in oklch, var(--sticker-ink) 62%, var(--layer-frame));
+  --foreground-on-frame-active: var(--sticker-ink);
+  --layer-frame-active: oklch(1 0 0);
+  --fill-frame-medium: oklch(0.1813 0.005 17.62 / 0.1);
+  --layer-sidebar: oklch(0.985 0.012 52);
+}
+
+.dark[data-theme="spooky"] {
+  --layer-frame: oklch(0.27 0.06 300);
+  --foreground-on-frame: oklch(0.96 0.01 90);
+  --foreground-on-frame-muted: oklch(0.80 0.02 90);
+  --layer-frame-active: var(--brand-400);
+  --fill-frame-medium: oklch(1 0 0 / 0.1);
+  --layer-canvas: oklch(0.235 0.03 300);
+  --layer-sidebar: oklch(0.205 0.033 300);
+  --layer-card: oklch(0.265 0.03 300);
+  --layer-popover: oklch(0.29 0.03 300);
+  --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM3 5h2v1h-2zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 1h4v1h-4zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h6v1h-6zM1 4h6v1h-6zM1 5h2v1h-2zM5 5h2v1h-2zM1 6h1v1h-1zM3 6h2v1h-2zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M2 1h4v1h-4zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM3 3h2v1h-2zM7 3h1v1h-1zM0 4h1v1h-1zM3 4h2v1h-2zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3Cpath fill='%23ffffff' d='M2 2h4v1h-4zM1 3h2v1h-2zM5 3h2v1h-2zM1 4h2v1h-2zM5 4h2v1h-2zM2 5h4v1h-4z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h8v1h-8zM0 3h2v1h-2zM3 3h2v1h-2zM6 3h2v1h-2zM0 4h8v1h-8zM0 5h1v1h-1zM2 5h4v1h-4zM7 5h1v1h-1zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M2 3h1v1h-1zM5 3h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM2 2h1v1h-1zM4 2h2v1h-2zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM0 6h1v1h-1zM5 6h1v1h-1zM1 7h4v1h-4z'/%3E%3Cpath fill='%23f97264' d='M3 1h1v1h-1zM3 2h1v1h-1zM3 3h3v1h-3zM4 4h2v1h-2zM5 5h1v1h-1z'/%3E%3Cpath fill='%23f8a16f' d='M2 3h1v1h-1zM2 4h2v1h-2zM2 5h3v1h-3zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M1 5h1v1h-1zM1 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h1v1h-1zM5 1h1v1h-1zM1 2h6v1h-6zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h4v1h-4zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23a9d877' d='M4 1h1v1h-1z'/%3E%3Cpath fill='%23f8a16f' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+  --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h8v1h-8zM0 3h2v1h-2zM3 3h2v1h-2zM6 3h2v1h-2zM0 4h8v1h-8zM0 5h1v1h-1zM2 5h4v1h-4zM7 5h1v1h-1zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M2 3h1v1h-1zM5 3h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM2 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM0 7h8v1h-8z'/%3E%3Cpath fill='%23576574' d='M4 1h1v1h-1zM3 2h2v1h-2zM4 3h2v1h-2zM2 4h4v1h-4zM2 5h3v1h-3zM1 6h6v1h-6z'/%3E%3Cpath fill='%23ffd440' d='M3 3h1v1h-1zM5 5h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h1v1h-1zM2 2h4v1h-4zM7 2h1v1h-1zM1 3h6v1h-6zM0 4h2v1h-2zM3 4h2v1h-2zM6 4h2v1h-2zM1 5h6v1h-6zM0 6h1v1h-1zM2 6h4v1h-4zM7 6h1v1h-1zM0 7h1v1h-1zM7 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 4h1v1h-1zM5 4h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M1 0h6v1h-6zM0 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h2v1h-2zM2 6h4v1h-4zM3 7h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M1 1h6v1h-6zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h6v1h-6zM2 4h4v1h-4zM2 5h1v1h-1zM4 5h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark)[data-theme="spooky"] {
+    --layer-frame: oklch(0.27 0.06 300);
+    --foreground-on-frame: oklch(0.96 0.01 90);
+    --foreground-on-frame-muted: oklch(0.80 0.02 90);
+    --layer-frame-active: var(--brand-400);
+    --fill-frame-medium: oklch(1 0 0 / 0.1);
+    --layer-canvas: oklch(0.235 0.03 300);
+    --layer-sidebar: oklch(0.205 0.033 300);
+    --layer-card: oklch(0.265 0.03 300);
+    --layer-popover: oklch(0.29 0.03 300);
+    --theme-decor-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='48' shape-rendering='crispEdges'%3E%3Cg transform='translate(0 12) scale(3)'%3E%3Cpath fill='%23141111' d='M2 0h4v1h-4zM1 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM3 5h2v1h-2zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 1h4v1h-4zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h6v1h-6zM1 4h6v1h-6zM1 5h2v1h-2zM5 5h2v1h-2zM1 6h1v1h-1zM3 6h2v1h-2zM6 6h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(38 4) scale(2)'%3E%3Cpath fill='%23141111' d='M2 1h4v1h-4zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM3 3h2v1h-2zM7 3h1v1h-1zM0 4h1v1h-1zM3 4h2v1h-2zM7 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h4v1h-4z'/%3E%3Cpath fill='%23ffffff' d='M2 2h4v1h-4zM1 3h2v1h-2zM5 3h2v1h-2zM1 4h2v1h-2zM5 4h2v1h-2zM2 5h4v1h-4z'/%3E%3C/g%3E%3Cg transform='translate(80 14) scale(3)'%3E%3Cpath fill='%23141111' d='M0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h8v1h-8zM0 3h2v1h-2zM3 3h2v1h-2zM6 3h2v1h-2zM0 4h8v1h-8zM0 5h1v1h-1zM2 5h4v1h-4zM7 5h1v1h-1zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M2 3h1v1h-1zM5 3h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(118 6) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM2 2h1v1h-1zM4 2h2v1h-2zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM0 6h1v1h-1zM5 6h1v1h-1zM1 7h4v1h-4z'/%3E%3Cpath fill='%23f97264' d='M3 1h1v1h-1zM3 2h1v1h-1zM3 3h3v1h-3zM4 4h2v1h-2zM5 5h1v1h-1z'/%3E%3Cpath fill='%23f8a16f' d='M2 3h1v1h-1zM2 4h2v1h-2zM2 5h3v1h-3zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffd440' d='M1 5h1v1h-1zM1 6h2v1h-2z'/%3E%3C/g%3E%3Cg transform='translate(160 12) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h1v1h-1zM5 1h1v1h-1zM1 2h6v1h-6zM0 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM2 6h4v1h-4zM7 6h1v1h-1zM1 7h6v1h-6z'/%3E%3Cpath fill='%23a9d877' d='M4 1h1v1h-1z'/%3E%3Cpath fill='%23f8a16f' d='M1 3h6v1h-6zM1 4h1v1h-1zM3 4h2v1h-2zM6 4h1v1h-1zM1 5h6v1h-6zM1 6h1v1h-1zM6 6h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+    --theme-decor-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='112' shape-rendering='crispEdges'%3E%3Cg transform='translate(12 0) scale(3)'%3E%3Cpath fill='%23141111' d='M0 1h1v1h-1zM2 1h1v1h-1zM5 1h1v1h-1zM7 1h1v1h-1zM0 2h8v1h-8zM0 3h2v1h-2zM3 3h2v1h-2zM6 3h2v1h-2zM0 4h8v1h-8zM0 5h1v1h-1zM2 5h4v1h-4zM7 5h1v1h-1zM3 6h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M2 3h1v1h-1zM5 3h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(2)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h1v1h-1zM5 1h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM2 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM0 6h1v1h-1zM7 6h1v1h-1zM0 7h8v1h-8z'/%3E%3Cpath fill='%23576574' d='M4 1h1v1h-1zM3 2h2v1h-2zM4 3h2v1h-2zM2 4h4v1h-4zM2 5h3v1h-3zM1 6h6v1h-6z'/%3E%3Cpath fill='%23ffd440' d='M3 3h1v1h-1zM5 5h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(24 52) scale(3)'%3E%3Cpath fill='%23141111' d='M3 0h2v1h-2zM3 1h2v1h-2zM0 2h1v1h-1zM2 2h4v1h-4zM7 2h1v1h-1zM1 3h6v1h-6zM0 4h2v1h-2zM3 4h2v1h-2zM6 4h2v1h-2zM1 5h6v1h-6zM0 6h1v1h-1zM2 6h4v1h-4zM7 6h1v1h-1zM0 7h1v1h-1zM7 7h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 4h1v1h-1zM5 4h1v1h-1z'/%3E%3C/g%3E%3Cg transform='translate(4 86) scale(3)'%3E%3Cpath fill='%23141111' d='M1 0h6v1h-6zM0 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h2v1h-2zM2 6h4v1h-4zM3 7h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M1 1h6v1h-6zM1 2h1v1h-1zM3 2h2v1h-2zM6 2h1v1h-1zM1 3h6v1h-6zM2 4h4v1h-4zM2 5h1v1h-1zM4 5h1v1h-1z'/%3E%3C/g%3E%3C/svg%3E");
+  }
+}

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { $r as ListRowTitle, An as MobileNavServerItem, Bn as MobileNavServerPopoverRowLabel, C as MessageListJumpPillDismiss, Fi as OverlayLayerProvider, Fn as MobileNavServerPopoverGroup, Ft as MessageItemDelegatedBy, Gn as PopoverBody, Gr as ListRow, Hn as PopoverActions, Ii as useParentOverlayKind, In as MobileNavServerPopoverList, It as MessageItemDelegatedByButton, Kr as ListRowBody, Ln as MobileNavServerPopoverRow, Lt as MessageItemDelegatedByName, Mn as MobileNavServerPopoverContent, Nn as MobileNavServerPopoverDestination, Oi as TextLink, P as MessageQuotedPreviewAuthorDelegatedBy, Pi as defaultNativeButton, Pn as MobileNavServerPopoverDestinations, Pt as MessageItemDelegatedAvatar, Qr as ListRowMeta, Ri as useThemeScopeProps, Rn as MobileNavServerPopoverRowBody, S as MessageListJumpPill, Si as DialogSheetBack, Sn as PreviewCardFooter, Ti as DialogTrigger, Vi as tv, Yr as ListRowDescription, _ as InboxItemTrailing, _i as DialogFooterNote, a as InboxItemContext, b as Skeleton, c as InboxItemLeading, ci as DialogCommit, ct as MessageReferenceReadMark, di as Dialog, dn as measureContent, ei as ListRowTop, fn as measureElement, g as InboxItemTitle, gn as PreviewCardActions, gr as DropdownMenuLinkItem, h as InboxItemTimestamp, i as InboxItemContent, it as MessageReferenceIcon, ji as Button$1, jn as MobileNavServerPopover, li as DialogSheetContent, mi as DialogContent, mn as readNow, ni as Tooltip, nr as useHoldThenMoveTouchSensor, o as InboxItemHeading, oi as TooltipTrigger, pi as DialogClose, pn as observeTruncation, qr as ListRowBottom, r as InboxItemBody, ri as TooltipContent, t as InboxItem, un as useOverflowTitle, vn as PreviewCardBody, w as MessageListJumpPillGroup, wi as DialogTitle, wn as PreviewCardMeta, x as MessageListJumpControls, xn as PreviewCardEyebrow, y as inboxItem, zi as useTheme, zn as MobileNavServerPopoverRowDescription } from "./inbox-item-BtxMxgoB.mjs";
+import { $r as ListRowTitle, An as MobileNavServerItem, Bn as MobileNavServerPopoverRowLabel, C as MessageListJumpPillDismiss, Fi as OverlayLayerProvider, Fn as MobileNavServerPopoverGroup, Ft as MessageItemDelegatedBy, Gn as PopoverBody, Gr as ListRow, Hn as PopoverActions, Ii as useParentOverlayKind, In as MobileNavServerPopoverList, It as MessageItemDelegatedByButton, Kr as ListRowBody, Ln as MobileNavServerPopoverRow, Lt as MessageItemDelegatedByName, Mn as MobileNavServerPopoverContent, Nn as MobileNavServerPopoverDestination, Oi as TextLink, P as MessageQuotedPreviewAuthorDelegatedBy, Pi as defaultNativeButton, Pn as MobileNavServerPopoverDestinations, Pt as MessageItemDelegatedAvatar, Qr as ListRowMeta, Ri as useThemeScopeProps, Rn as MobileNavServerPopoverRowBody, S as MessageListJumpPill, Si as DialogSheetBack, Sn as PreviewCardFooter, Ti as DialogTrigger, Vi as tv, Yr as ListRowDescription, _ as InboxItemTrailing, _i as DialogFooterNote, a as InboxItemContext, b as Skeleton, c as InboxItemLeading, ci as DialogCommit, ct as MessageReferenceReadMark, di as Dialog, dn as measureContent, ei as ListRowTop, fn as measureElement, g as InboxItemTitle, gn as PreviewCardActions, gr as DropdownMenuLinkItem, h as InboxItemTimestamp, i as InboxItemContent, it as MessageReferenceIcon, ji as Button$1, jn as MobileNavServerPopover, li as DialogSheetContent, mi as DialogContent, mn as readNow, ni as Tooltip, nr as useHoldThenMoveTouchSensor, o as InboxItemHeading, oi as TooltipTrigger, pi as DialogClose, pn as observeTruncation, qr as ListRowBottom, r as InboxItemBody, ri as TooltipContent, t as InboxItem, un as useOverflowTitle, vn as PreviewCardBody, w as MessageListJumpPillGroup, wi as DialogTitle, wn as PreviewCardMeta, x as MessageListJumpControls, xn as PreviewCardEyebrow, y as inboxItem, zi as useTheme, zn as MobileNavServerPopoverRowDescription } from "./inbox-item-nHjMl3SO.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
 import { createContext, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",
@@ -43,7 +43,8 @@
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json",
     "./foundation.css": "./dist/foundation.css",
-    "./tokens.json": "./dist/tokens.json"
+    "./tokens.json": "./dist/tokens.json",
+    "./themes.css": "./dist/themes.css"
   },
   "publishConfig": {
     "access": "public"
@@ -94,6 +95,7 @@
   },
   "scripts": {
     "bench:virtual-list": "node bench/virtual-list/run.mjs",
+    "build:themes": "node scripts/build-themes.mjs",
     "build:tokens": "node scripts/build-tokens.mjs",
     "build": "vp pack",
     "check": "vp check",