/* FastUI runtime stylesheet: system colors, Swift-laid-out boxes and controls.
   Geometry comes from Swift frames; these rules only paint. */
:root {
  --fastui-red: #FF3B30; --fastui-orange: #FF9500; --fastui-yellow: #FFCC00; --fastui-green: #34C759;
  --fastui-mint: #00C7BE; --fastui-teal: #30B0C7; --fastui-cyan: #32ADE6; --fastui-blue: #007AFF;
  --fastui-indigo: #5856D6; --fastui-purple: #AF52DE; --fastui-pink: #FF2D55; --fastui-brown: #A2845E; --fastui-gray: #8E8E93;
  --fastui-primary: #000000; --fastui-secondary: rgba(60,60,67,.6); --fastui-accent: #007AFF;
  --fastui-label-0: #000000; --fastui-label-1: rgba(60,60,67,.6); --fastui-label-2: rgba(60,60,67,.3); --fastui-label-3: rgba(60,60,67,.18);
  --fastui-separator: rgba(60,60,67,.29); --fastui-background: #FFFFFF; --fastui-secondary-background: #F2F2F7;
  --fastui-fill: rgba(120,120,128,.2); --fastui-fill-strong: rgba(120,120,128,.32); --fastui-control-background: #FFFFFF;
  --fastui-material-ultrathin: rgba(255,255,255,.35); --fastui-material-thin: rgba(255,255,255,.5); --fastui-material-regular: rgba(255,255,255,.7);
  --fastui-material-thick: rgba(255,255,255,.82); --fastui-material-ultrathick: rgba(255,255,255,.92); --fastui-material-bar: rgba(249,249,249,.85);
}
@media (prefers-color-scheme: dark) { :root:not([data-color-scheme=light]) {
  --fastui-red: #FF453A; --fastui-orange: #FF9F0A; --fastui-yellow: #FFD60A; --fastui-green: #30D158; --fastui-mint: #63E6E2;
  --fastui-teal: #40C8E0; --fastui-cyan: #64D2FF; --fastui-blue: #0A84FF; --fastui-indigo: #5E5CE6; --fastui-purple: #BF5AF2;
  --fastui-pink: #FF375F; --fastui-brown: #AC8E68; --fastui-gray: #8E8E93; --fastui-primary: #FFFFFF; --fastui-secondary: rgba(235,235,245,.6);
  --fastui-accent: #0A84FF; --fastui-label-0: #FFFFFF; --fastui-label-1: rgba(235,235,245,.6); --fastui-label-2: rgba(235,235,245,.3);
  --fastui-label-3: rgba(235,235,245,.16); --fastui-separator: rgba(84,84,88,.6); --fastui-background: #000000; --fastui-secondary-background: #1C1C1E;
  --fastui-fill: rgba(120,120,128,.36); --fastui-fill-strong: rgba(120,120,128,.5); --fastui-control-background: rgba(255,255,255,.25);
  --fastui-material-ultrathin: rgba(30,30,30,.35); --fastui-material-thin: rgba(30,30,30,.5); --fastui-material-regular: rgba(30,30,30,.7);
  --fastui-material-thick: rgba(30,30,30,.82); --fastui-material-ultrathick: rgba(30,30,30,.92); --fastui-material-bar: rgba(30,30,30,.85);
} }
/* FastUI Math (derived from STIX Two Math, SIL OFL 1.1): glyphs for Math views, addressed at U+F0000 + glyph id.
   Only downloaded when a page shows math. */
@font-face { font-family: "FastUI Math"; src: url("/fastui-math.woff2?v=e190e9f1dd2a") format("woff2"); font-display: block; }
/* macOS body text (13 pt) unless a view sets a font. */
[data-fastui-root] { position: relative; color: var(--fastui-primary); font: 13px/normal system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Views are fx-* custom elements named after their SwiftUI view. Purely structural
   views have no element; fx-group is a structural view that still paints or
   carries an identifier, so it stays out of layout. */
fx-group { display: contents; }
fx-view, fx-vstack, fx-hstack, fx-zstack, fx-padding, fx-frame, fx-decoration, fx-spacer, fx-divider, fx-rectangle, fx-scroll-view,
fx-layout, fx-modifier, fx-effect, fx-shape, fx-canvas, fx-geometry-reader, fx-web-flow, fx-presentation, fx-toggle { display: block; }
fx-image { display: inline-block; }
fx-zstack > * { grid-area: 1 / 1; }

/* Swift-owned layout: every view is a box placed by its frame (translate, width,
   height), except inside .webFlow(), where CSS lays out the subtree. */
[data-layout=swift] :is(fx-view, fx-vstack, fx-hstack, fx-zstack, fx-padding, fx-frame, fx-decoration, fx-spacer, fx-divider, fx-rectangle,
  fx-scroll-view, fx-layout, fx-modifier, fx-effect, fx-shape, fx-canvas, fx-image, fx-geometry-reader, fx-web-flow, fx-presentation, fx-text,
  fx-button, fx-toggle, fx-text-field, fx-switch, fx-checkbox, fx-slider, fx-picker, fx-date-picker, fx-color-picker, fx-progress-view):not(fx-web-flow *) {
  position: absolute; left: 0; top: 0; box-sizing: border-box; margin: 0; min-width: 0; min-height: 0; }
[data-layout=swift] fx-text:not(fx-web-flow *) { line-height: normal; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-layout=swift] fx-button:not(fx-web-flow *) { display: block; }
[data-layout=swift] fx-scroll-view:not(fx-web-flow *) { overscroll-behavior: contain; }

/* Buttons and tap gestures. */
fx-button { display: inline-flex; box-sizing: border-box; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
fx-button:active:not(:state(disabled)) { filter: brightness(.9); }
fx-button:state(disabled) { opacity: .45; cursor: default; }
:where(#root, [data-fastui-root]) [role=button] { cursor: pointer; -webkit-user-select: none; user-select: none; }
fx-button:focus-visible, :where(#root, [data-fastui-root]) [role=button]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fastui-accent) 55%, transparent); outline-offset: 2px; border-radius: 8px; }

/* CSS-flow Divider (Swift-laid-out dividers are painted by their frame). */
[data-fastui-root]:not([data-layout=swift]) fx-divider, fx-web-flow fx-divider { align-self: stretch; min-width: 1px; min-height: 1px; background: var(--fastui-separator); }

/* Layers created by the DOM host. */
/* Qualified with the attribute so it outranks the [data-fastui-root] rule above. */
/* Presentations are in the top layer: modal <dialog>s spanning the viewport and
   manual popovers spanning the root (whose position the host keeps in
   --fx-root-x/y). Swift paints the dimming and lays out the content, so the
   browser's dialog and popover chrome is reset. */
fx-overlay[data-fastui-root] { display: contents; }
fx-overlay > dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: inherit; overflow: visible; --fx-root-x: 0px; --fx-root-y: 0px; }
fx-overlay > dialog::backdrop { background: transparent; }
fx-overlay[data-fastui-root] fx-presentation[popover] { position: fixed; inset: auto; left: var(--fx-root-x, 0px); top: var(--fx-root-y, 0px);
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
fx-ghosts { display: block; position: fixed; inset: 0; z-index: 10; pointer-events: none; }
fx-ghosts[popover] { margin: 0; padding: 0; border: 0; width: auto; height: auto; background: transparent; overflow: visible; }
fx-probe { position: absolute; left: -100000px; top: 0; visibility: hidden; contain: layout style; pointer-events: none; }

/* Startup indicator: any #boot element (the page's "Loading…") becomes a spinner with a download bar until the
   Swift engine starts; app.js sets --fx-boot-progress (0…1) from the Wasm download. It fades in after 250 ms, so a
   fast (cached) start shows nothing. A startup failure (.failed) shows the boot element's text instead. */
#boot { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-content: center; justify-items: center; gap: 16px;
  margin: 0; padding: 0; font-size: 0; color: transparent; pointer-events: none; animation: fx-boot-in .3s ease .25s both; }
#boot::before { content: ""; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%;
  border: 2.5px solid rgba(127,127,127,.22); border-top-color: var(--fastui-accent, #007AFF); animation: fx-boot-spin .8s linear infinite; }
#boot::after { content: ""; width: 160px; height: 4px; border-radius: 2px; background:
  linear-gradient(var(--fastui-accent, #007AFF), var(--fastui-accent, #007AFF)) 0 0 / calc(var(--fx-boot-progress, 0) * 100%) 100% no-repeat,
  rgba(127,127,127,.18); transition: background-size .15s linear; }
#boot.indeterminate::after { display: none; }
#boot.failed { position: static; display: block; padding: 24px; font: 14px/1.4 -apple-system, system-ui, sans-serif; color: var(--fastui-primary, #000);
  pointer-events: auto; animation: none; }
#boot.failed::before, #boot.failed::after { display: none; }
@keyframes fx-boot-in { from { opacity: 0; } }
@keyframes fx-boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #boot::before { animation-duration: 2.4s; } }