@property --amb-elevation{syntax:"<number>";inherits:true;initial-value:0}:root{--amb-light-x:-1;--amb-light-y:-1;--amb-key-light-intensity:.9;--amb-fill-light-intensity:.7;--amb-light-hue:234;--amb-light-saturation:15%;--amb-light-distance:0px;--amb-chamfer:0;--amb-fillet:0;--amb-thickness:0;--amb-elevation:0;--amb-chamfer-width:1;--amb-fillet-width:1;--amb-highlight-color:coral;--amb-lume-hue:17;--amb-mat-specular:0;--amb-mat-roughness:1;--amb-mat-opacity:1;--amb-lume:color-mix(in oklab, hsl(var(--amb-lume-hue) 100% 74%) calc(clamp(0, (.5 - var(--amb-key-light-intensity)) / .2, 1) * 100%), hsl(var(--amb-light-hue) var(--amb-light-saturation) calc((1 - sign(var(--amb-key-light-intensity) - .5)) * 50% + 25%)));--amb-label:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc((1 - var(--amb-key-light-intensity)) * 60% + 20%))}.amb-chamfer{--amb-chamfer:1}.amb-chamfer-2{--amb-chamfer:1;--amb-chamfer-width:2}.amb-chamfer-minus-1{--amb-chamfer:1;--amb-chamfer-width:-1}.amb-fillet{--amb-fillet:1}.amb-fillet-2{--amb-fillet:1;--amb-fillet-width:2}.amb-fillet-minus-1{--amb-fillet:1;--amb-fillet-width:-1}.amb-elevation-0{--amb-elevation:0}.amb-elevation-1{--amb-elevation:1}.amb-elevation-2{--amb-elevation:2}.amb-elevation-3{--amb-elevation:3}.ambient{box-shadow:hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)))) calc(var(--amb-light-x) * var(--amb-elevation) * -8px) calc(var(--amb-light-y) * var(--amb-elevation) * -8px) calc(var(--amb-elevation) * 8px) calc(var(--amb-elevation) * -4px), inset calc(var(--amb-light-x) * var(--amb-chamfer-width) * -1px) calc(var(--amb-light-y) * var(--amb-chamfer-width) * -1px) 0px 0px hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-chamfer) * var(--amb-key-light-intensity))), inset calc(var(--amb-light-x) * var(--amb-chamfer-width) * 1px) calc(var(--amb-light-y) * var(--amb-chamfer-width) * 1px) 0px 0px hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc(var(--amb-chamfer) * calc(var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)))), inset calc(var(--amb-light-x) * var(--amb-fillet-width) * -2px) calc(var(--amb-light-y) * var(--amb-fillet-width) * -2px) 2px 0px hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-fillet) * var(--amb-key-light-intensity))), inset calc(var(--amb-light-x) * var(--amb-fillet-width) * 2px) calc(var(--amb-light-y) * var(--amb-fillet-width) * 2px) 2px 0px hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc(var(--amb-fillet) * calc(var(--amb-key-light-intensity) - var(--amb-fill-light-intensity))))}.amb-surface{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 100%))}.amb-surface-darker{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 30%))}.amb-mat-shiny{--amb-mat-specular:1;--amb-mat-roughness:0;--amb-mat-opacity:1;--_shiny-angle:calc(atan2(var(--amb-light-y), var(--amb-light-x)) + 270deg);--_spec-peak:var(--amb-key-light-intensity);--_ly-up:max(0, calc(var(--amb-light-y) * -1));--_ly-down:max(0, var(--amb-light-y));--_env-top-l:calc(70% * var(--_ly-up) + 5% * var(--_ly-down));--_env-bot-l:calc(5% * var(--_ly-up) + 70% * var(--_ly-down));--_env-top-a:calc(var(--_ly-up) * var(--amb-key-light-intensity) + var(--_ly-down) * (1 - var(--amb-fill-light-intensity)));--_env-bot-a:calc(var(--_ly-up) * (1 - var(--amb-fill-light-intensity)) + var(--_ly-down) * var(--amb-key-light-intensity));background-image: linear-gradient(var(--_shiny-angle), hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / var(--_spec-peak)) 0%, hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--_spec-peak) * .08)) 8%, hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 13%, hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 100%),  linear-gradient(to bottom, hsl(var(--amb-light-hue) var(--amb-light-saturation) 50% / 0) 0%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_env-top-l) / var(--_env-top-a)) 50%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_env-bot-l) / var(--_env-bot-a)) 50%, hsl(var(--amb-light-hue) var(--amb-light-saturation) 50% / 0) 100%);background-blend-mode:screen, overlay;filter:brightness(1.04)contrast(1.01)}.amb-mat-glass{--amb-mat-specular:.05;--amb-mat-roughness:.9;--amb-mat-opacity:0;--_shiny-angle:calc(atan2(var(--amb-light-y), var(--amb-light-x)) + 270deg);--_spec-peak:var(--amb-key-light-intensity);background-image:linear-gradient(var(--_shiny-angle), hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--_spec-peak) * .12)) 0%, hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--_spec-peak) * .06)) 40%, hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 75%, hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 100%);background-blend-mode:screen;--_glass-lightness:calc(var(--amb-key-light-intensity) * 100%);--_glass-alpha:calc(.05 + var(--amb-key-light-intensity) * .1);--_glass-blur:calc(8px + var(--amb-key-light-intensity) * 8px);background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_glass-lightness) / var(--_glass-alpha));-webkit-backdrop-filter:blur(var(--_glass-blur)) saturate(160%);border:1px solid hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(.1 + var(--amb-key-light-intensity) * .15))}.amb-surface-concave{--_concave-y:clamp(-1, var(--amb-light-y), 1);--_concave-contrast:calc(max(0, var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * 20%);--_concave-top:calc(var(--amb-key-light-intensity) * (100% + (var(--_concave-y) * var(--_concave-contrast))));--_concave-mid-top:calc(var(--amb-key-light-intensity) * (100% + (var(--_concave-y) * var(--_concave-contrast) * .45)));--_concave-mid-bottom:calc(var(--amb-key-light-intensity) * (100% - (var(--_concave-y) * var(--_concave-contrast) * .45)));--_concave-bottom:calc(var(--amb-key-light-intensity) * (100% - (var(--_concave-y) * var(--_concave-contrast))));background:linear-gradient(hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_concave-top)) 0%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_concave-mid-top)) 35%, hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 100%)) 50%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_concave-mid-bottom)) 65%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_concave-bottom)) 100%)}.amb-surface-concave-h{--_concave-h-x:clamp(-1, var(--amb-light-x), 1);--_concave-h-contrast:calc(max(0, var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * 20%);--_concave-h-left:calc(var(--amb-key-light-intensity) * (100% + (var(--_concave-h-x) * var(--_concave-h-contrast))));--_concave-h-mid-left:calc(var(--amb-key-light-intensity) * (100% + (var(--_concave-h-x) * var(--_concave-h-contrast) * .45)));--_concave-h-mid-right:calc(var(--amb-key-light-intensity) * (100% - (var(--_concave-h-x) * var(--_concave-h-contrast) * .45)));--_concave-h-right:calc(var(--amb-key-light-intensity) * (100% - (var(--_concave-h-x) * var(--_concave-h-contrast))));background:linear-gradient(to right, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_concave-h-left)) 0%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_concave-h-mid-left)) 35%, hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 100%)) 50%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_concave-h-mid-right)) 65%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_concave-h-right)) 100%)}.amb-surface-convex{--_convex-y:clamp(-1, var(--amb-light-y), 1);--_convex-contrast:calc(max(0, var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * 20%);--_convex-top:calc(var(--amb-key-light-intensity) * (100% - (var(--_convex-y) * var(--_convex-contrast))));--_convex-mid-top:calc(var(--amb-key-light-intensity) * (100% - (var(--_convex-y) * var(--_convex-contrast) * .45)));--_convex-mid-bottom:calc(var(--amb-key-light-intensity) * (100% + (var(--_convex-y) * var(--_convex-contrast) * .45)));--_convex-bottom:calc(var(--amb-key-light-intensity) * (100% + (var(--_convex-y) * var(--_convex-contrast))));background:linear-gradient(hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_convex-top)) 0%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_convex-mid-top)) 35%, hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 100%)) 50%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_convex-mid-bottom)) 65%, hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_convex-bottom)) 100%)}.amb-light-tl{--amb-light-x:-1;--amb-light-y:-1}.amb-light-tr{--amb-light-x:1;--amb-light-y:-1}.amb-light-bl{--amb-light-x:-1;--amb-light-y:1}.amb-light-br{--amb-light-x:1;--amb-light-y:1}.amb-light-top{--amb-light-x:0;--amb-light-y:-1}.amb-light-bottom{--amb-light-x:0;--amb-light-y:1}.amb-light-left{--amb-light-x:-1;--amb-light-y:0}.amb-light-right{--amb-light-x:1;--amb-light-y:0}.amb-emit-red{--amb-emit-color:#ef4444}.amb-emit-green{--amb-emit-color:#4ade80}.amb-emit-amber{--amb-emit-color:#f59e0b}.amb-emit-cyan{--amb-emit-color:#22d3d3}.amb-emit-blue{--amb-emit-color:#3b82f6}.amb-emit-white{--amb-emit-color:#fff}.amb-rounded{border-radius:4px}.amb-rounded-md{border-radius:8px}.amb-rounded-lg{border-radius:12px}.amb-rounded-xl{border-radius:16px}.amb-rounded-full{border-radius:9999px}.amb-glow{box-shadow:0 0 4px var(--amb-lume)}@keyframes amb-bounce-elevation{0%,to{--amb-elevation:0}15%{--amb-elevation:3}30%{--amb-elevation:0}42%{--amb-elevation:2}54%{--amb-elevation:0}64%{--amb-elevation:1}74%{--amb-elevation:0}}.amb-bounce{animation:2s ease-in-out infinite amb-bounce-elevation}/* geologica-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Geologica Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/geologica-cyrillic-ext-wght-normal-C8B9Chlh.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geologica-cyrillic-wght-normal */
@font-face {
  font-family: 'Geologica Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/geologica-cyrillic-wght-normal-DbeVG3Ps.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geologica-greek-wght-normal */
@font-face {
  font-family: 'Geologica Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/geologica-greek-wght-normal-DPM5d9ub.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* geologica-vietnamese-wght-normal */
@font-face {
  font-family: 'Geologica Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/geologica-vietnamese-wght-normal-DcI17N1q.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geologica-latin-ext-wght-normal */
@font-face {
  font-family: 'Geologica Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/geologica-latin-ext-wght-normal-DZyYlgcm.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geologica-latin-wght-normal */
@font-face {
  font-family: 'Geologica Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/geologica-latin-wght-normal-BBL8hQxZ.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Default design tokens - can be overridden by TokenProvider */
:root {
  --color-primary: #0066cc;
  --color-primary-hover: #0052a3;
  --color-secondary: #6c757d;
  --color-accent: #ff6b35;
  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-hover: #e9ecef;
  --color-text: #212529;
  --color-text-inverse: #ffffff;
  --color-muted: #6c757d;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-border: #dee2e6;
  --radius: 6px;

  /* Derived alias tokens referenced by some Progeny primitives (chatbox,
     file explorer). Kept in sync with TokenProvider.deriveAliasVars so the
     static default theme matches generated-app themes. */
  --color-surface-alt: #e9ecef;
  --color-text-muted: #6c757d;
  --color-primary-subtle: color-mix(in srgb, #0066cc 16%, transparent);
  --color-primary-subtle-hover: color-mix(in srgb, #0066cc 28%, transparent);

  /* Progeny brand font. The "Variable" suffix targets the variable-font
     family name shipped by @fontsource-variable/geologica - it falls back
     to system-ui if the file ever fails to load. */
  --font-family: 'Geologica Variable', Geologica, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Modus web components ship a `*, ::before, ::after { font-family:
     var(--modus-wc-font-family), sans-serif }` rule that wins over a plain
     `body { font-family }` declaration. Reassigning the Modus token here
     funnels the brand font through Modus's own themability hook so every
     Modus widget (buttons, alerts, loaders, etc.) renders in Geologica. */
  --modus-wc-font-family: 'Geologica Variable', Geologica, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Project-local font stacks. Components should reference --pg-font-*
     instead of hard-coding strings like 'Consolas, Monaco, monospace' or
     bare 'monospace' (browser-default monospace is usually Courier on
     macOS and Consolas on Windows -- inconsistent with what Modus
     specifies in its theme).
     - --pg-font-sans mirrors --font-family / --modus-wc-font-family so
       there is exactly one place to change the brand font.
     - --pg-font-mono mirrors the monospace stack Modus 1.5 uses
       internally for code-bearing components (verified in
       node_modules/@trimble-oss/moduswebcomponents/.../css-content.js).
       ui-monospace gets us SF Mono on macOS and Cascadia Code on
       Windows 11 without having to ship the font; the rest is a
       safety net for older systems. */
  --pg-font-sans: 'Geologica Variable', Geologica, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pg-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* === Progeny chrome tokens ===
     Single source of truth for every colour that paints the Progeny shell
     (landing page, editor header, dialogs, lock overlays, chips...). Components
     should always reference these tokens via var(--pg-...) rather than hard-coding
     hex values, so the brand palette stays consistent and a future dark mode is
     just a :root.dark { ... } override away. */

  /* Brand */
  --pg-primary: rgb(0, 95, 158);
  --pg-primary-hover: #004e83;
  --pg-primary-fg: #ffffff;

  /* Secondary (segmented toggle pill, secondary buttons) */
  --pg-secondary: #4b5563;
  --pg-secondary-hover: #374151;
  --pg-secondary-fg: #ffffff;

  /* Surface & text — aliased to Modus base-* tokens with hex fallbacks.
     Centralising the alias here means every `var(--pg-*)` call site
     automatically rides the Modus palette without having to touch
     hundreds of components. The fallback colour matches what the page
     used to paint pre-Modus, so even if `data-theme` is removed from
     <html> the visual stays stable. */
  --pg-bg: var(--modus-wc-color-base-100, #f3f4f6);
  --pg-surface: var(--modus-wc-color-base-page, #ffffff);
  --pg-surface-hover: color-mix(in srgb, var(--modus-wc-color-base-200, #e9eaf0) 60%, transparent);
  --pg-text: var(--modus-wc-color-base-content, #1a1a1a);
  --pg-text-muted: var(--modus-wc-color-base-content-low-contrast, #414141);
  --pg-text-subtle: #888888;

  /* Borders */
  --pg-border: var(--modus-wc-color-base-200, #e5e7eb);
  --pg-border-strong: #9ca3af;
  --pg-divider: var(--modus-wc-color-base-300, #e0e0e0);

  /* Spacing — aliased to Modus spacing tokens with px fallbacks.
     Modus's own scale (2/4/8/12/16/24/32 px at 16px root) covers ~90%
     of the editor's gap/padding/margin values. Components reference
     `var(--pg-space-*)` instead of raw px so a single Modus theme swap
     updates the whole editor's rhythm. The 6/10/14/20px half-steps are
     project-local conventions used 5+ times that don't have a direct
     Modus equivalent. */
  --pg-space-2xs: var(--modus-wc-spacing-2xs, 2px);
  --pg-space-xs: var(--modus-wc-spacing-xs, 4px);
  --pg-space-sm: var(--modus-wc-spacing-sm, 8px);
  --pg-space-md: var(--modus-wc-spacing-md, 12px);
  --pg-space-lg: var(--modus-wc-spacing-lg, 16px);
  --pg-space-xl: var(--modus-wc-spacing-xl, 24px);
  --pg-space-2xl: var(--modus-wc-spacing-2xl, 32px);
  --pg-space-6: 6px;
  --pg-space-10: 10px;
  --pg-space-14: 14px;
  --pg-space-20: 20px;

  /* Border radius — aliased to Modus tokens with px fallbacks. Modus's
     scale: sm=2 / md=4 / lg=8 / xl=12 / 2xl=16 / rounded=999. Most of
     the editor's chrome lives at md or lg (chips, buttons, cards). */
  --pg-radius-sm: var(--modus-wc-border-radius-sm, 2px);
  --pg-radius-md: var(--modus-wc-border-radius-md, 4px);
  --pg-radius-lg: var(--modus-wc-border-radius-lg, 8px);
  --pg-radius-xl: var(--modus-wc-border-radius-xl, 12px);
  --pg-radius-2xl: var(--modus-wc-border-radius-2xl, 16px);
  --pg-radius-rounded: var(--modus-wc-border-radius-rounded, 999px);
  --pg-radius-6: 6px;
  --pg-radius-10: 10px;

  /* Soft status (chips, banners - pastel) */
  --pg-success-soft-bg: #e8f5e9;
  --pg-success-soft-fg: #2e7d32;
  --pg-success-soft-border: #a5d6a7;
  --pg-info-soft-bg: #e3f2fd;
  --pg-info-soft-fg: #1565c0;
  --pg-info-soft-border: #90caf9;
  --pg-warning-soft-bg: #ffe1b2;
  --pg-warning-soft-fg: #a86200;
  --pg-warning-soft-border: #ffd9a8;
  --pg-danger-soft-bg: #fdecea;
  --pg-danger-soft-fg: #9b2c2c;
  --pg-danger-soft-border: #f5b5b1;
  --pg-stable-soft-bg: #ede7f6;
  --pg-stable-soft-fg: #4527a0;
  --pg-stable-soft-border: #b39ddb;
  --pg-neutral-soft-bg: #f3f4f6;
  --pg-neutral-soft-fg: #4b5563;
  --pg-neutral-soft-border: #d1d5db;

  /* Filled status (lock states, primary destructive actions) */
  --pg-success-filled-bg: #2e7d5b;
  --pg-success-filled-fg: #ffffff;
  --pg-success-filled-hover: #246244;
  --pg-danger-filled-bg: #90323d;
  --pg-danger-filled-fg: #ffffff;
  --pg-danger-filled-hover: #6f2630;
  --pg-info-filled-bg: rgb(0, 99, 163);
  --pg-info-filled-fg: #ffffff;
  --pg-info-filled-hover: rgb(0, 79, 130);
  --pg-neutral-filled-bg: #6c757d;
  --pg-neutral-filled-fg: #ffffff;
  --pg-neutral-filled-hover: #576068;

  /* Overlay / elevation */
  --pg-scrim: rgba(0, 0, 0, 0.45);
  --pg-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.06);
  --pg-shadow-elev: 0 8px 24px rgba(0, 0, 0, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Failsafe override of Modus's `*, ::before, ::after { font-family:
   var(--modus-wc-font-family), sans-serif }` rule. We use the same
   universal selector so specificity is equal (0,0,0); since this stylesheet
   is imported LAST in demo/main.tsx, it wins by cascade order. The first
   line of defense is reassigning --modus-wc-font-family in :root above,
   which makes Modus's own rule resolve to Geologica - this is the safety
   net for any case where the Modus stylesheet is bundled after ours.

   Font smoothing is declared here (not just on `body`) because Modus
   components live in shadow DOM and use Daisy/Modus internal CSS for
   their inner labels. Without this universal rule, those labels render
   with the browser default (Windows ClearType subpixel smoothing), which
   makes Geologica Variable's bolder weights look noticeably "pixelated"
   next to the Progeny shell text. Setting -webkit-font-smoothing here
   inherits across shadow boundaries via the host, so Modus button /
   tab / modal labels render with the same grayscale antialiasing as
   the rest of the page. */
*,
*::before,
*::after {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Progeny is an SPA — every route handles its own scroll internally
   (landing tile grid, apps table, editor panels, live runtime). The
   document itself must never grow a scrollbar: when one transiently
   appears (e.g. during a route AnimatePresence swap, or during the
   first frame of LoadingBadge while a Modus dialog/portal mounts on
   <body>), the viewport content area shrinks by the scrollbar gutter
   and any centered fullscreen content (the loader spinner, modal
   shells) visibly jumps horizontally. Pinning html/body/#root to the
   viewport and clipping their overflow neutralises that without
   breaking any in-route scrolling, which is all flex/min-height-0
   based on inner containers. */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Collapse the Modus divider into a true 1px separator. The default
   divider layout reserves vertical space around its center line, which
   made the navbar look vertically misaligned. */
modus-wc-divider .modus-wc-divider.pg-navbar-divider {
  display: flex !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
}

modus-wc-divider .modus-wc-divider.pg-navbar-divider::before,
modus-wc-divider .modus-wc-divider.pg-navbar-divider::after {
  height: 1px !important;
}

/* Deploy-history table — bound the scroll viewport to the wrapper and
   give the env / commit / image-tag columns a left-aligned look (the
   global appTable.css rule centres every column except the first;
   inside this table the first column is the env chip, so we let the
   global rule stand and only neutralise text wrapping for the
   monospace columns). */
.pg-deploy-history-table modus-wc-table .modus-wc-table tbody td {
  white-space: nowrap;
}

/* Floating presence badge — borderless button is only a click target;
   visual chrome comes from the nested Modus success badge. */
modus-wc-button.pg-presence-badge-btn .modus-wc-btn {
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

modus-wc-button.pg-presence-badge-btn .modus-wc-btn:hover,
modus-wc-button.pg-presence-badge-btn .modus-wc-btn:focus-visible {
  background: transparent;
  box-shadow: none;
}