@layer base, components;
@layer components.hraness-ui.legacy, components.hraness-ui.priority1, components.hraness-ui.priority2, components.hraness-ui.priority3, components.hraness-ui.priority4;

:root {
  color-scheme: light;

  /* Public semantic colors are namespaced so the stylesheet can coexist with
   * application and legacy design-system variables without changing meaning. */
  --ui-background: oklch(0.985 0.004 220);
  --ui-foreground: oklch(0.205 0.018 230);
  --ui-card: oklch(0.998 0.002 220);
  --ui-card-foreground: var(--ui-foreground);
  --ui-popover: oklch(0.998 0.002 220);
  --ui-popover-foreground: var(--ui-foreground);
  --ui-primary: oklch(0.405 0.09 215);
  --ui-primary-foreground: oklch(0.985 0.004 220);
  --ui-secondary: oklch(0.935 0.018 215);
  --ui-secondary-foreground: oklch(0.285 0.04 222);
  --ui-muted: oklch(0.952 0.01 220);
  --ui-muted-foreground: oklch(0.48 0.028 225);
  --ui-accent: oklch(0.915 0.03 205);
  --ui-accent-foreground: oklch(0.255 0.045 220);
  --ui-destructive: oklch(0.57 0.205 27);
  --ui-destructive-foreground: oklch(0.985 0.004 220);
  --ui-border: oklch(0.855 0.02 220);
  --ui-input: oklch(0.64 0.025 220);
  --ui-ring: oklch(0.545 0.115 215);
  --ui-success: oklch(0.49 0.125 155);
  --ui-success-foreground: oklch(0.985 0.004 220);
  --ui-success-soft: oklch(0.93 0.035 155);
  --ui-warning: oklch(0.525 0.125 78);
  --ui-warning-foreground: oklch(0.19 0.025 78);
  --ui-warning-soft: oklch(0.94 0.045 88);
  --ui-info: oklch(0.49 0.12 240);
  --ui-info-foreground: oklch(0.985 0.004 220);
  --ui-info-soft: oklch(0.93 0.035 240);
  --ui-chart-1: oklch(0.57 0.15 35);
  --ui-chart-2: oklch(0.53 0.105 170);
  --ui-chart-3: oklch(0.49 0.1 235);
  --ui-chart-4: oklch(0.65 0.13 90);
  --ui-chart-5: oklch(0.58 0.14 315);

  --ui-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-heading: var(--ui-font-mono);
  --ui-font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --ui-radius: 0.75rem;

  /* Portable scales are intentionally unprefixed so consumer design systems
   * can share them from standards-based CSS. */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --layout-edge-inset: 1.5rem;
  --layout-chrome-inset: 0.5rem;
  --interactive-target-compact: 2.5rem;
  --interactive-target-min: 3rem;
  --control-height: 3.25rem;
  --control-height-primary: 3.5rem;
  --control-height-transport: 4rem;
  --text-caption: 0.75rem;
  --text-label: 0.875rem;
  --text-body: 1rem;
  --text-control: 1rem;
  --text-control-glyph: 1.25rem;
  --text-heading: 1.5rem;
  --text-title: 2rem;
  --text-display: 3.5rem;
  --font-weight-regular: 450;
  --font-weight-medium: 550;
  --font-weight-bold: 700;
  --radius-sharp: 0;
  --radius-sm: max(0rem, calc(var(--ui-radius) - 0.5rem));
  --radius-md: max(0rem, calc(var(--ui-radius) - 0.25rem));
  --radius-lg: var(--ui-radius);
  --radius-round: 999px;
  --control-radius: 1rem;
  --motion-duration-instant: 0ms;
  --motion-duration-fast: 120ms;
  --motion-duration-standard: 180ms;
  --motion-duration-slow: 280ms;
  --motion-distance-rail-enter: 14px;
  --motion-distance-rail-exit: 10px;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --elevation-none: none;
  --elevation-low: 0 1px 2px oklch(0 0 0 / 0.08);
  --elevation-raised: 0 8px 24px -12px oklch(0 0 0 / 0.22);
  --elevation-overlay: 0 18px 48px -18px oklch(0 0 0 / 0.32);
  --z-chrome: 50;
  --z-modal: 2000;
  --z-tooltip: 3000;
  --z-skip-link: 4000;
  --breakpoint-compact: 30rem;
  --breakpoint-medium: 48rem;
  --breakpoint-wide: 75rem;
  --breakpoint-canvas: 90rem;
}

:root[data-theme="dark"],
[data-theme="dark"],
.dark {
  color-scheme: dark;
  --ui-background: oklch(0.15 0.014 230);
  --ui-foreground: oklch(0.955 0.008 220);
  --ui-card: oklch(0.19 0.016 230);
  --ui-card-foreground: var(--ui-foreground);
  --ui-popover: oklch(0.205 0.018 230);
  --ui-popover-foreground: var(--ui-foreground);
  --ui-primary: oklch(0.755 0.105 210);
  --ui-primary-foreground: oklch(0.175 0.02 230);
  --ui-secondary: oklch(0.255 0.022 225);
  --ui-secondary-foreground: oklch(0.94 0.01 220);
  --ui-muted: oklch(0.235 0.018 225);
  --ui-muted-foreground: oklch(0.715 0.025 220);
  --ui-accent: oklch(0.275 0.035 210);
  --ui-accent-foreground: oklch(0.95 0.008 220);
  --ui-destructive: oklch(0.68 0.19 25);
  --ui-destructive-foreground: oklch(0.16 0.025 25);
  --ui-border: oklch(0.32 0.025 225);
  --ui-input: oklch(0.48 0.03 225);
  --ui-ring: oklch(0.72 0.105 210);
  --ui-success: oklch(0.7 0.12 155);
  --ui-success-foreground: oklch(0.16 0.025 155);
  --ui-success-soft: oklch(0.25 0.045 155);
  --ui-warning: oklch(0.78 0.12 82);
  --ui-warning-foreground: oklch(0.19 0.025 78);
  --ui-warning-soft: oklch(0.27 0.045 82);
  --ui-info: oklch(0.72 0.11 240);
  --ui-info-foreground: oklch(0.16 0.025 240);
  --ui-info-soft: oklch(0.25 0.04 240);
  --ui-chart-1: oklch(0.72 0.14 35);
  --ui-chart-2: oklch(0.7 0.11 170);
  --ui-chart-3: oklch(0.7 0.11 235);
  --ui-chart-4: oklch(0.77 0.12 90);
  --ui-chart-5: oklch(0.72 0.13 315);
}

/* Explicit light islands win even when an ancestor carries the legacy dark
 * class. Keep this recipe after the dark recipe. */
:root[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;
  --ui-background: oklch(0.985 0.004 220);
  --ui-foreground: oklch(0.205 0.018 230);
  --ui-card: oklch(0.998 0.002 220);
  --ui-card-foreground: var(--ui-foreground);
  --ui-popover: oklch(0.998 0.002 220);
  --ui-popover-foreground: var(--ui-foreground);
  --ui-primary: oklch(0.405 0.09 215);
  --ui-primary-foreground: oklch(0.985 0.004 220);
  --ui-secondary: oklch(0.935 0.018 215);
  --ui-secondary-foreground: oklch(0.285 0.04 222);
  --ui-muted: oklch(0.952 0.01 220);
  --ui-muted-foreground: oklch(0.48 0.028 225);
  --ui-accent: oklch(0.915 0.03 205);
  --ui-accent-foreground: oklch(0.255 0.045 220);
  --ui-destructive: oklch(0.57 0.205 27);
  --ui-destructive-foreground: oklch(0.985 0.004 220);
  --ui-border: oklch(0.855 0.02 220);
  --ui-input: oklch(0.64 0.025 220);
  --ui-ring: oklch(0.545 0.115 215);
  --ui-success: oklch(0.49 0.125 155);
  --ui-success-foreground: oklch(0.985 0.004 220);
  --ui-success-soft: oklch(0.93 0.035 155);
  --ui-warning: oklch(0.525 0.125 78);
  --ui-warning-foreground: oklch(0.19 0.025 78);
  --ui-warning-soft: oklch(0.94 0.045 88);
  --ui-info: oklch(0.49 0.12 240);
  --ui-info-foreground: oklch(0.985 0.004 220);
  --ui-info-soft: oklch(0.93 0.035 240);
  --ui-chart-1: oklch(0.57 0.15 35);
  --ui-chart-2: oklch(0.53 0.105 170);
  --ui-chart-3: oklch(0.49 0.1 235);
  --ui-chart-4: oklch(0.65 0.13 90);
  --ui-chart-5: oklch(0.58 0.14 315);
}

@media (pointer: coarse) {
  :root {
    --interactive-target-compact: max(2.75rem, var(--interactive-target-min));
  }
}

:root[data-verification-pointer="coarse"] {
  --interactive-target-compact: max(2.75rem, var(--interactive-target-min));
}
@layer base, components;
@layer components.hraness-ui.legacy, components.hraness-ui.priority1, components.hraness-ui.priority2, components.hraness-ui.priority3, components.hraness-ui.priority4;

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

* {
  margin: 0;
}

html,
body {
  min-width: 0;
  min-height: 100%;
  overflow-x: clip;
}

html {
  background: var(--ui-background);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--ui-background);
  color: var(--ui-foreground);
  font-family: var(--ui-font-sans);
  font-size: 16px;
  font-synthesis: none;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

code,
kbd,
pre,
samp {
  font-family: var(--ui-font-mono);
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ui-font-heading);
}

button,
input,
select,
textarea {
  font: inherit;
}

:where(button, select, input[type="button"], input[type="submit"], input[type="reset"]) {
  touch-action: manipulation;
}

button:not(:disabled) {
  cursor: pointer;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

:where(blockquote, dd, dt, figcaption, h1, h2, h3, h4, h5, h6, li, p) {
  overflow-wrap: anywhere;
}

:where(canvas, img, picture, svg, video) {
  max-inline-size: 100%;
}

:focus-visible {
  outline: 2px solid var(--ui-ring);
  outline-offset: 3px;
}

::selection {
  background: color-mix(in oklch, var(--ui-primary) 28%, transparent);
  color: var(--ui-foreground);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

  @media (forced-colors: active) {
    :focus-visible {
      outline-color: Highlight;
    }

    ::selection {
      background: Highlight;
      color: HighlightText;
    }
  }
}
@layer components.hraness-ui.legacy.base {
  /* Placeholder and file-button pseudo-elements remain native CSS seams. */
  .hraness-field__input::placeholder {
    color: var(--ui-muted-foreground);
    opacity: 1;
  }

  .hraness-field__file::file-selector-button {
    min-height: calc(max(var(--hraness-field-height,
      var(--interactive-target-compact)),
      var(--hraness-field-coarse-min, 0px)) - 2px);
    margin-inline-end: var(--space-3);
    padding-inline: var(--space-3);
    border: 0;
    border-inline-end: 1px solid var(--ui-border);
    background: var(--ui-secondary);
    color: var(--ui-secondary-foreground);
    font: inherit;
  }

  :where(.hraness-file-field[data-size="compact"])
    .hraness-field__file::file-selector-button {
    min-height: calc(max(var(--hraness-field-height, 2rem),
      var(--hraness-field-coarse-min, 0px)) - 2px);
  }

  :where(.hraness-file-field[data-size="large"])
    .hraness-field__file::file-selector-button {
    min-height: calc(max(var(--hraness-field-height,
      var(--control-height-primary)),
      var(--hraness-field-coarse-min, 0px)) - 2px);
  }

  @media (pointer: coarse) {
    .hraness-field__file::file-selector-button {
      min-height: calc(var(--interactive-target-min) - 2px);
    }
  }

  /* WebKit scrollbar pseudo-elements cannot be emitted in StyleX's named layers. */
  .hraness-segmented-control::-webkit-scrollbar {
    display: none;
  }

  /* Native progress value and track pseudo-elements remain CSS seams. */
  .hraness-progress__control::-webkit-progress-bar {
    background: var(--ui-muted);
  }

  .hraness-progress__control::-webkit-progress-value {
    border-radius: inherit;
    background: var(--ui-primary);
  }

  .hraness-progress__control::-moz-progress-bar {
    border-radius: inherit;
    background: var(--ui-primary);
  }

  /* Keep the public description variable overridable while each Card root resets its tone. */
  :where(.hraness-card, .hraness-pressable-card) {
    --hraness-card-description: var(--_hraness-card-description);
  }
}

@layer components.hraness-ui.legacy {
:root[data-verification-pointer="coarse"] {
  --hraness-action-coarse-min: var(--interactive-target-min);
  --hraness-collection-coarse-min: var(--interactive-target-min);
  --hraness-field-coarse-min: var(--interactive-target-min);
  --hraness-slider-coarse-min: var(--interactive-target-min);
  --hraness-list-box-coarse-min: var(--interactive-target-min);
  --hraness-menu-coarse-min: var(--interactive-target-min);
  --hraness-dialog-coarse-min: var(--interactive-target-min);
  --hraness-toast-coarse-min: var(--interactive-target-min);
  --hraness-pagination-coarse-min: var(--interactive-target-min);
}

@media (forced-colors: active) {
  /* Forced-colors UAs may remap placeholder text to GrayText, which can fall
   * below 4.5:1 against Canvas. Preserve the muted token in ordinary themes,
   * but use the user's full text color for field hints in this mode. */
  .hraness-field__input::placeholder {
    color: CanvasText;
    opacity: 1;
  }

}
}
@layer base, components;
@layer components.hraness-ui.legacy.base, components.hraness-ui.legacy, components.hraness-ui.priority1, components.hraness-ui.priority2, components.hraness-ui.priority3, components.hraness-ui.priority4, components.hraness-ui.priority5, components.hraness-ui.priority6, components.hraness-ui.priority7;
@layer components.hraness-ui.priority2 {
  .xln7xf2 {
    font: inherit;
  }

  .x1732f5w {
    padding: 0 !important;
  }
}

@layer components.hraness-ui.priority3 {
  .x1y4qj14 {
    background-position: 0 0;
  }

  .x71po09 {
    background-position: calc(100% - 1rem), calc(100% - .75rem);
  }

  .x2dnb2m {
    border-color: color-mix(in oklch,currentColor 35%,transparent);
  }

  .x19ig9on {
    border-color: color-mix(in oklch,var(--ui-destructive) 45%,var(--ui-border));
  }

  .x9bx2s3 {
    border-color: color-mix(in oklch,var(--ui-destructive) 55%,var(--ui-border));
  }

  .xj794q3 {
    border-color: color-mix(in oklch,var(--ui-info) 45%,var(--ui-border));
  }

  .xziflcd {
    border-color: color-mix(in oklch,var(--ui-info) 55%,var(--ui-border));
  }

  .x7q492y {
    border-color: color-mix(in oklch,var(--ui-input) 65%,var(--ui-foreground));
  }

  .x1f9ahtz {
    border-color: color-mix(in oklch,var(--ui-primary) 28%,var(--ui-border));
  }

  .x1a2emv7 {
    border-color: color-mix(in oklch,var(--ui-primary) 35%,var(--ui-border));
  }

  .xot7yk0 {
    border-color: color-mix(in oklch,var(--ui-success) 45%,var(--ui-border));
  }

  .xtbbexc {
    border-color: color-mix(in oklch,var(--ui-success) 55%,var(--ui-border));
  }

  .xfk30nb {
    border-color: color-mix(in oklch,var(--ui-warning) 45%,var(--ui-border));
  }

  .x2zn8v0 {
    border-color: color-mix(in oklch,var(--ui-warning) 55%,var(--ui-border));
  }

  .x11d1vu1 {
    border-color: currentColor !important;
  }

  .x1r7ld26 {
    border-color: currentColor;
  }

  .x9r1u3d {
    border-color: #0000;
  }

  .x2zdn4l {
    border-color: var(--hraness-tag-accent, var(--ui-border));
  }

  .x67vgen {
    border-color: var(--ui-border);
  }

  .xjl0rct {
    border-color: var(--ui-destructive);
  }

  .xse0uuh {
    border-color: var(--ui-foreground);
  }

  .x1xs8ofy {
    border-color: var(--ui-input);
  }

  .xm03egy {
    border-color: var(--ui-primary);
  }

  .x1aygumy {
    border-color: var(--ui-ring);
  }

  .x1pjcqnp {
    border-radius: inherit;
  }

  .xjb54qr {
    border-radius: var(--radius-lg);
  }

  .xhe58dl {
    border-radius: var(--radius-md);
  }

  .x18j2vf1 {
    border-radius: var(--radius-round);
  }

  .x1u5dnfi {
    border-radius: var(--radius-sharp);
  }

  .x1sybd2c {
    border-radius: var(--radius-sm);
  }

  .xbsl7fq {
    border-style: dashed;
  }

  .x1lkz4a {
    border-style: none !important;
  }

  .xng3xce {
    border-style: none;
  }

  .x1y0btm7 {
    border-style: solid;
  }

  .x1toeqfw {
    border-width: 0 !important;
  }

  .xc342km {
    border-width: 0;
  }

  .xmkeg23 {
    border-width: 1px;
  }

  .xdh2fpr {
    border-width: 2px;
  }

  .x3psx0u {
    flex: none;
  }

  .xc8qplx {
    flex: 1 0 auto;
  }

  .xehxkzz {
    flex: 12rem;
  }

  .x12lumcd {
    flex: auto;
  }

  .x1aazh3f {
    font-variant: inherit;
  }

  .x1enigpx {
    gap: .125rem;
  }

  .xm15xud {
    gap: var(--space-1);
  }

  .xmgkybt {
    gap: var(--space-2);
  }

  .x96y02u {
    gap: var(--space-3);
  }

  .x1adtp44 {
    gap: var(--space-4, 1rem);
  }

  .xzci21y {
    gap: var(--space-4);
  }

  .xyesurp {
    gap: var(--space-6);
  }

  .xgkxs2y {
    grid-column: 1;
  }

  .x1ms6mhf {
    grid-row: 1;
  }

  .x10im51j {
    margin-block: 0;
  }

  .x18t8w2r {
    margin-block: clamp(2rem, 6vh, 4rem) clamp(3.5rem, 10vh, 6rem);
  }

  .xrxpjvj {
    margin-inline: 0;
  }

  .xvueqy4 {
    margin-inline: auto;
  }

  .xysyzu8 {
    overflow: auto;
  }

  .x7giv3 {
    overflow: clip;
  }

  .x22f3wc {
    overflow: hidden !important;
  }

  .xb3r6kr {
    overflow: hidden;
  }

  .x1rea2x4 {
    overflow: visible;
  }

  .x1dus959 {
    padding-block: .125rem;
  }

  .x5utbj {
    padding-block: .1875rem;
  }

  .xt970qd {
    padding-block: 0;
  }

  .x1hpxurx {
    padding-block: var(--space-1);
  }

  .x1j5kcci {
    padding-block: var(--space-2);
  }

  .x1dk652i {
    padding-block: var(--space-3);
  }

  .xktq63f {
    padding-block: var(--space-4);
  }

  .x1e1zj16 {
    padding-block: var(--space-6);
  }

  .x6h58t4 {
    padding-block: var(--space-8);
  }

  .x1u5bktz {
    padding-inline: .125rem;
  }

  .x124z5kw {
    padding-inline: .1875rem;
  }

  .xvpgqt4 {
    padding-inline: .625rem;
  }

  .xnjsko4 {
    padding-inline: 0;
  }

  .x60vcjr {
    padding-inline: var(--hraness-quiet-site-gutter, 1.25rem);
  }

  .x1r26wqr {
    padding-inline: var(--space-1);
  }

  .xv2ckdy {
    padding-inline: var(--space-2);
  }

  .x27hgv3 {
    padding-inline: var(--space-3);
  }

  .x13g845m {
    padding-inline: var(--space-4);
  }

  .x1g860ya {
    padding-inline: var(--space-6);
  }

  .x10k7wzd {
    padding-inline: var(--space-8);
  }

  .x1hl2dhg {
    text-decoration: none;
  }

  .x1bvjpef {
    text-decoration: underline;
  }

  .x4dpq5y:focus-within, .xojh9ox:focus-visible {
    border-color: var(--ui-destructive);
  }

  .x1c7m8e0:focus-within, .x1k5f354:focus-visible {
    border-color: var(--ui-ring);
  }

  .x1jzi1v9:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    background-position: .75rem, 1rem;
  }

  .xduu9rl:hover {
    background-position: 0 0;
  }

  .xj91kar:hover {
    border-color: color-mix(in oklch,var(--ui-input) 65%,var(--ui-foreground));
  }

  .x19pv2u9:hover {
    border-color: color-mix(in oklch,var(--ui-primary) 35%,var(--ui-border));
  }

  .xxubsxb:hover {
    border-color: var(--ui-destructive);
  }

  .x1sw2twm:hover {
    border-color: var(--ui-primary);
  }

  @media (forced-colors: active) {
    .xh5fzc.xh5fzc {
      border-color: canvastext;
    }

    .x18dem5r.x18dem5r {
      border-color: highlight;
    }

    .x1604q5y.x1604q5y {
      border-style: solid;
    }

    .x3i8w7j.x3i8w7j {
      border-width: 1px;
    }

    .x36b5vz.x36b5vz:focus-visible, .xz97hxr.xz97hxr:focus-within, .xk5x9zm.xk5x9zm:hover {
      border-color: canvastext;
    }
  }
}

@layer components.hraness-ui.priority4 {
  .xc26acl {
    align-content: center;
  }

  .x1pha0wt {
    align-items: baseline;
  }

  .x6s0dn4 {
    align-items: center;
  }

  .xpqajaz {
    align-items: end;
  }

  .x1cy8zhl {
    align-items: flex-start;
  }

  .x7a106z {
    align-items: start;
  }

  .x1qjc9v5 {
    align-items: stretch;
  }

  .xamitd3 {
    align-self: center;
  }

  .x1y8v6su {
    align-self: start;
  }

  .xkh2ocl {
    align-self: stretch;
  }

  .x12epk6h {
    animation-composition: replace;
  }

  .x1uzojwf {
    animation-delay: 0s;
  }

  .x1s0aqod {
    animation-direction: normal;
  }

  .xof6966 {
    animation-duration: .7s;
  }

  .x1gm38ng {
    animation-duration: 1.25s;
  }

  .x1sbju2s {
    animation-duration: 1.4s;
  }

  .x1u9099l {
    animation-duration: var(--motion-duration-fast);
  }

  .xk0v9jz {
    animation-duration: var(--motion-duration-standard);
  }

  .x1ir97tl {
    animation-fill-mode: none;
  }

  .x1v7wizp {
    animation-iteration-count: 1;
  }

  .xa4qsjk {
    animation-iteration-count: infinite;
  }

  .xpcr379 {
    animation-name: x14k4uad-B;
  }

  .xmqj9yv {
    animation-name: x17ibfk4-B;
  }

  .xp11wl8 {
    animation-name: x1ez0eqx-B;
  }

  .xsuiv4y {
    animation-name: x1mi9bte-B;
  }

  .xnjvcao {
    animation-name: x1uh2x5g-B;
  }

  .xnkut1w {
    animation-name: xaiwn2n-B;
  }

  .xee4ywd {
    animation-name: xazk77x-B;
  }

  .x1idon5y {
    animation-name: xoai65e-B;
  }

  .x1j4p4jw {
    animation-name: xw2c1lr-B;
  }

  .xoj058f {
    animation-play-state: running;
  }

  .xymwk3t {
    animation-range-end: normal;
  }

  .x10si4xm {
    animation-range-start: normal;
  }

  .xyuw9oy {
    animation-timeline: auto;
  }

  .x4hg4is {
    animation-timing-function: ease-in-out;
  }

  .x1esw782 {
    animation-timing-function: linear;
  }

  .xb8h89d {
    animation-timing-function: var(--motion-easing-emphasized);
  }

  .x1om7lm2 {
    animation-timing-function: var(--motion-easing-standard);
  }

  .xjyslct {
    appearance: none;
  }

  .x1fdtg7e {
    background-attachment: scroll;
  }

  .x1u7o2vf {
    background-clip: border-box;
  }

  .x1rluqol {
    background-color: #0000008c;
    background-color: lab(0% 0 0 / .55);
  }

  .xh690g3 {
    background-color: color-mix(in oklch,var(--ui-destructive) 12%,var(--ui-card));
  }

  .xptldvt {
    background-color: color-mix(in oklch,var(--ui-destructive) 12%,var(--ui-popover));
  }

  .x15id337 {
    background-color: color-mix(in oklch,var(--ui-destructive) 9%,var(--ui-card));
  }

  .xhk71r8 {
    background-color: color-mix(in oklch,var(--ui-primary) 88%,var(--ui-background));
  }

  .xgdu39w {
    background-color: color-mix(in oklch,var(--ui-secondary) 82%,var(--ui-foreground));
  }

  .xjbqb8w {
    background-color: #0000;
  }

  .xhjy6h9 {
    background-color: var(--hraness-field-surface, var(--ui-background));
  }

  .xopakvp {
    background-color: var(--hraness-field-surface, var(--ui-card));
  }

  .x3uzaca {
    background-color: var(--hraness-field-surface, var(--ui-muted));
  }

  .xj6r5nx {
    background-color: var(--ui-accent);
  }

  .xy79xod {
    background-color: var(--ui-background);
  }

  .xvchgeb {
    background-color: var(--ui-border);
  }

  .x15fjbwc {
    background-color: var(--ui-card);
  }

  .x1y1ug {
    background-color: var(--ui-destructive);
  }

  .x1xl9hbl {
    background-color: var(--ui-foreground);
  }

  .x1a3v2hg {
    background-color: var(--ui-info-soft);
  }

  .x1efuugo {
    background-color: var(--ui-info);
  }

  .x1wka170 {
    background-color: var(--ui-muted-foreground);
  }

  .xukhggj {
    background-color: var(--ui-muted);
  }

  .xwrrvqk {
    background-color: var(--ui-popover);
  }

  .x731cg7 {
    background-color: var(--ui-primary-foreground);
  }

  .xl4bxm8 {
    background-color: var(--ui-primary);
  }

  .x1eixhg {
    background-color: var(--ui-secondary);
  }

  .xp0myqf {
    background-color: var(--ui-success-soft);
  }

  .xbzxsob {
    background-color: var(--ui-success);
  }

  .x1tfl3ef {
    background-color: var(--ui-warning-soft);
  }

  .x107vin7 {
    background-color: var(--ui-warning);
  }

  .xj3ykqi {
    background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
  }

  .x5iel4p {
    background-image: linear-gradient(90deg,var(--ui-muted) 0%,color-mix(in oklch,var(--ui-muted) 72%,var(--ui-foreground)) 50%,var(--ui-muted) 100%);
  }

  .x18o3ruo {
    background-image: none;
  }

  .x12koezg {
    background-origin: padding-box;
  }

  .xiy17q3 {
    background-repeat: no-repeat;
  }

  .x182nak8 {
    background-repeat: repeat;
  }

  .x5j7g1h {
    background-size: .25rem .25rem, .25rem .25rem;
  }

  .xakli9p {
    background-size: 200% 100%;
  }

  .x103pssi {
    background-size: auto;
  }

  .xf1zbdu {
    border-block-end-color: var(--ui-border);
  }

  .xn5uptl {
    border-block-end-style: solid;
  }

  .x1ae7zus {
    border-block-end-width: 1px;
  }

  .xhjnd2s {
    border-block-end-width: 2px;
  }

  .xp4mk2w {
    border-block-start-color: var(--ui-border);
  }

  .x3so8kt {
    border-block-start-style: solid;
  }

  .x1b1eqt9 {
    border-block-start-width: 1px;
  }

  .x1mwwwfo {
    border-collapse: collapse;
  }

  .x1jkkyqx {
    border-image-outset: 0 !important;
  }

  .x1e53mt7 {
    border-image-outset: 0;
  }

  .x1m9pfrh {
    border-image-repeat: stretch !important;
  }

  .xgkqhyc {
    border-image-repeat: stretch;
  }

  .xmn6ne6 {
    border-image-slice: 100% !important;
  }

  .x1jleocg {
    border-image-slice: 100%;
  }

  .xfq58d {
    border-image-source: none !important;
  }

  .x18sabzy {
    border-image-source: none;
  }

  .x1rjp9do {
    border-image-width: 1 !important;
  }

  .x1pjjote {
    border-image-width: 1;
  }

  .xhh0qdk {
    border-inline-end-color: color-mix(in oklch,currentColor 25%,transparent);
  }

  .x18b5jzi {
    border-inline-end-style: solid;
  }

  .x8tukpd {
    border-inline-end-width: .125em;
  }

  .xfcwke7 {
    border-inline-start-color: color-mix(in oklch,currentColor 25%,transparent);
  }

  .x1t7ytsu {
    border-inline-start-style: solid;
  }

  .x7eegyw {
    border-inline-start-width: .125em;
  }

  .x1w8mlat {
    box-shadow: 0 0 0 3px color-mix(in oklch,var(--ui-ring) 24%,transparent);
  }

  .xt1z1uy {
    box-shadow: 0 0 0 4px color-mix(in oklch,var(--ui-ring) 24%,transparent);
  }

  .x1omwtip {
    box-shadow: inset 0 0 0 2px var(--ui-ring);
  }

  .x1n2qkce {
    box-shadow: var(--elevation-low);
  }

  .x13akli3 {
    box-shadow: var(--elevation-overlay);
  }

  .x1i4z4pc {
    box-shadow: var(--elevation-raised);
  }

  .x9f619 {
    box-sizing: border-box;
  }

  .x1me6c3g {
    clip: rect(0,0,0,0) !important;
  }

  .x1heor9g {
    color: inherit;
  }

  .x1gz3zd9 {
    color: var(--hraness-card-description);
  }

  .x1luk2ys {
    color: var(--ui-accent-foreground);
  }

  .xiqspym {
    color: var(--ui-background);
  }

  .x1ucbm5y {
    color: var(--ui-card-foreground);
  }

  .x1r6c6zr {
    color: var(--ui-destructive-foreground);
  }

  .xqn9d39 {
    color: var(--ui-destructive);
  }

  .x1win4le {
    color: var(--ui-foreground);
  }

  .x3e56ue {
    color: var(--ui-info);
  }

  .xh5oz3n {
    color: var(--ui-muted-foreground);
  }

  .xkwpxw7 {
    color: var(--ui-popover-foreground);
  }

  .x1nqtexi {
    color: var(--ui-primary-foreground);
  }

  .x1ueta6y {
    color: var(--ui-primary);
  }

  .xw694iq {
    color: var(--ui-secondary-foreground);
  }

  .x12z5c4t {
    color: var(--ui-success);
  }

  .xdl8uah {
    color: var(--ui-warning);
  }

  .xt0e3qv {
    cursor: default;
  }

  .x1jm3nie {
    cursor: grab;
  }

  .xi9pz9s {
    cursor: grabbing;
  }

  .xmper1u {
    cursor: inherit;
  }

  .x1h6gzvc {
    cursor: not-allowed;
  }

  .x1ypdohk {
    cursor: pointer;
  }

  .x1lliihq {
    display: block;
  }

  .x78zum5 {
    display: flex;
  }

  .xrvj5dj {
    display: grid;
  }

  .x1rg5ohu {
    display: inline-block;
  }

  .x3nfvp2 {
    display: inline-flex;
  }

  .xwz0xwf {
    display: inline-grid;
  }

  .x1s85apg {
    display: none;
  }

  .xbh8q5q {
    fill: none;
  }

  .xcvxrpj {
    fill: var(--ui-card);
  }

  .xdl72j9 {
    flex-basis: auto;
  }

  .xdt5ytf {
    flex-direction: column;
  }

  .x1c4vz4f {
    flex-grow: 0;
  }

  .x2lah0s {
    flex-shrink: 0;
  }

  .xozqiw3 {
    flex-wrap: nowrap;
  }

  .x1a02dak {
    flex-wrap: wrap;
  }

  .xjb2p0i {
    font-family: inherit;
  }

  .x1jygkft {
    font-family: var(--ui-font-mono);
  }

  .xboafo0 {
    font-size: .75rem;
  }

  .xngnso2 {
    font-size: 1.5rem;
  }

  .x1ofzeug {
    font-size: clamp(var(--text-title),5vw,var(--text-display));
  }

  .x1qlqyl8 {
    font-size: inherit;
  }

  .x1n56hm7 {
    font-size: var(--text-body);
  }

  .xaasd0c {
    font-size: var(--text-caption);
  }

  .x1rfgtre {
    font-size: var(--text-heading);
  }

  .x1ur3rz7 {
    font-size: var(--text-label);
  }

  .x1lvm9qv {
    font-size: var(--text-title);
  }

  .x1xh6y1q {
    font-stretch: inherit;
  }

  .x1t35e8 {
    font-style: inherit;
  }

  .xss6m8b {
    font-variant-numeric: tabular-nums;
  }

  .x1pd3egz {
    font-weight: inherit;
  }

  .x1lvx875 {
    font-weight: var(--font-weight-bold);
  }

  .x1e4wzip {
    font-weight: var(--font-weight-medium);
  }

  .x1n6d40o {
    font-weight: var(--font-weight-regular);
  }

  .x1kzknox {
    forced-color-adjust: none;
  }

  .xx9t13c {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .x1rkzygb {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .x1lc61k0 {
    grid-template-columns: max(var(--hraness-field-height, 2rem),var(--hraness-field-coarse-min, 0px)) minmax(3rem,1fr) max(var(--hraness-field-height, 2rem),var(--hraness-field-coarse-min, 0px));
  }

  .x114fpg1 {
    grid-template-columns: max(var(--hraness-field-height, var(--control-height-primary)),var(--hraness-field-coarse-min, 0px)) minmax(3rem,1fr) max(var(--hraness-field-height, var(--control-height-primary)),var(--hraness-field-coarse-min, 0px));
  }

  .x1gj2g9h {
    grid-template-columns: max(var(--hraness-field-height, var(--interactive-target-compact)),var(--hraness-field-coarse-min, 0px)) minmax(3rem,1fr) max(var(--hraness-field-height, var(--interactive-target-compact)),var(--hraness-field-coarse-min, 0px));
  }

  .xju1xpo {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .x1mkdm3x {
    grid-template-columns: minmax(0, 1fr);
  }

  .xxq7klm {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .xiuoait {
    inline-size: 100%;
  }

  .xtovscr {
    inset-block-end: max(var(--space-4),env(safe-area-inset-bottom));
  }

  .xu5r6vy {
    inset-block-start: var(--space-3);
  }

  .x1mtgq1v {
    inset-inline-end: max(var(--space-4),env(safe-area-inset-right));
  }

  .x1uxcgzz {
    inset-inline-end: var(--space-3);
  }

  .x1cpllo3 {
    inset-inline-start: var(--space-3);
  }

  .xl56j7k {
    justify-content: center;
  }

  .x13a6bvl {
    justify-content: flex-end;
  }

  .x1nhvcw1 {
    justify-content: flex-start;
  }

  .x1qughib {
    justify-content: space-between;
  }

  .x1o2pa38 {
    justify-items: center;
  }

  .x7v7x1q {
    justify-self: center;
  }

  .xo2cfqc {
    letter-spacing: -.04em;
  }

  .x9pfba7 {
    letter-spacing: .08em;
  }

  .x14ju556 {
    line-height: 0;
  }

  .x1u7k74 {
    line-height: 1.2;
  }

  .x132q4wb {
    line-height: 1.25;
  }

  .xwn7fz2 {
    line-height: 1.3;
  }

  .x1xfvgam {
    line-height: 1.35;
  }

  .x37zpob {
    line-height: 1.4;
  }

  .x1evy7pa {
    line-height: 1.5;
  }

  .x1dbl2gt {
    line-height: 1.6;
  }

  .xo5v014 {
    line-height: 1;
  }

  .x15bjb6t {
    line-height: inherit;
  }

  .xnbnhf8 {
    list-style-image: none;
  }

  .x43c9pm {
    list-style-position: outside;
  }

  .x3ct3a4 {
    list-style-type: none;
  }

  .xa8254d {
    max-inline-size: var(--hraness-quiet-site-measure, 34rem);
  }

  .xl3ova5 {
    min-block-size: 1.5rem;
  }

  .xesnm00 {
    min-inline-size: 0;
  }

  .xt66bws {
    min-inline-size: 1.5rem;
  }

  .xl1xv1r {
    object-fit: cover;
  }

  .xbyyjgo {
    opacity: .5;
  }

  .x197sbye {
    opacity: .6;
  }

  .x1uy6g52 {
    opacity: .62;
  }

  .x14ytart {
    outline-color: currentColor;
  }

  .xk8u384 {
    outline-color: var(--ui-ring);
  }

  .x2ssjo2 {
    outline-offset: -2px;
  }

  .x1hl8ikr {
    outline-offset: 2px;
  }

  .x1ewu8gn {
    outline-offset: 3px;
  }

  .x2wh2y9 {
    outline-offset: 4px;
  }

  .x1t137rt {
    outline-style: none;
  }

  .xaatb59 {
    outline-style: solid;
  }

  .x1k57tk5 {
    outline-width: 0;
  }

  .x1de99jn {
    outline-width: 2px;
  }

  .x13lr2xm {
    outline-width: medium;
  }

  .xj0a0fe {
    overflow-wrap: anywhere;
  }

  .x183qbbg {
    padding-inline-end: 2.5rem;
  }

  .x1qx48my {
    padding-inline-end: var(--interactive-target-compact);
  }

  .x1c1uobl {
    padding-inline-start: 0;
  }

  .x8bp2w5 {
    padding-inline-start: var(--space-3);
  }

  .x67bb7w {
    pointer-events: auto;
  }

  .x47corl {
    pointer-events: none;
  }

  .xj8z8mm {
    position: absolute !important;
  }

  .x10l6tqk {
    position: absolute;
  }

  .xixxii4 {
    position: fixed;
  }

  .x1n2onr6 {
    position: relative;
  }

  .xtt52l0 {
    resize: none;
  }

  .x288g5 {
    resize: vertical;
  }

  .x1rohswg {
    scrollbar-width: none;
  }

  .x1owpc8m {
    stroke-linecap: round;
  }

  .xhr4kjn {
    stroke-width: 1.5px;
  }

  .x1ip4yf {
    stroke-width: 2.5px;
  }

  .xqjr0vm {
    stroke-width: 3px;
  }

  .x186d6vw {
    stroke: var(--ui-border);
  }

  .xvjuoyv {
    stroke: var(--ui-foreground);
  }

  .xtryda8 {
    stroke: var(--ui-muted);
  }

  .x176whfx {
    stroke: var(--ui-primary);
  }

  .x118tb2h {
    text-align: center !important;
  }

  .x2b8uid {
    text-align: center;
  }

  .xp4054r {
    text-align: end;
  }

  .x1yc453h {
    text-align: start;
  }

  .xyi4chj {
    text-decoration-thickness: 1px;
  }

  .xewurvo {
    text-decoration-thickness: 2px;
  }

  .xlyipyv {
    text-overflow: ellipsis;
  }

  .xtvhhri {
    text-transform: uppercase;
  }

  .x1ohr1zr {
    text-underline-offset: .2em;
  }

  .x1w2vvpw {
    text-wrap: balance;
  }

  .x1fzhlzt {
    text-wrap: pretty;
  }

  .x5ve5x3 {
    touch-action: none;
  }

  .x1bblx7b {
    touch-action: pan-x;
  }

  .x1g0ag68 {
    transform-origin: center;
  }

  .x19jd1h0 {
    transform: rotate(180deg);
  }

  .x1iffjtl {
    transform: rotate(90deg);
  }

  .x10tizke {
    transform: translateX(1rem);
  }

  .xavs3du {
    transform: translateY(1px);
  }

  .xvf0mkp {
    transform: translateY(calc(-100% - var(--space-6)));
  }

  .xjdmepg {
    transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
  }

  .x1545fc0 {
    transition-delay: 0s, 0s, 0s, 0s;
  }

  .xfnwuwk {
    transition-delay: 0s, 0s, 0s;
  }

  .x7hzv9z {
    transition-duration: var(--motion-duration-fast),var(--motion-duration-fast),var(--motion-duration-fast),var(--motion-duration-fast),var(--motion-duration-fast),var(--motion-duration-fast);
  }

  .x1mkw6vw {
    transition-duration: var(--motion-duration-fast),var(--motion-duration-fast),var(--motion-duration-fast),var(--motion-duration-fast);
  }

  .x1glaneq {
    transition-duration: var(--motion-duration-fast),var(--motion-duration-fast),var(--motion-duration-fast);
  }

  .xbygejy {
    transition-duration: var(--motion-duration-fast),var(--motion-duration-fast);
  }

  .xhln2ea {
    transition-duration: var(--motion-duration-fast),var(--motion-duration-standard);
  }

  .xcgntbv {
    transition-duration: var(--motion-duration-fast);
  }

  .x1krpk68 {
    transition-duration: var(--motion-duration-standard);
  }

  .x98sya7 {
    transition-property: background-color, border-color, box-shadow, color, opacity, transform;
  }

  .xts7igz {
    transition-property: background-color, border-color;
  }

  .x1990d1s {
    transition-property: background-color, box-shadow, color, opacity;
  }

  .x1koyr57 {
    transition-property: background-color, box-shadow, color;
  }

  .xuo13n2 {
    transition-property: background-color, transform;
  }

  .x9vp5wv {
    transition-property: border-color, box-shadow, transform;
  }

  .x11xpdln {
    transition-property: transform;
  }

  .xledgg0 {
    transition-timing-function: var(--motion-easing-emphasized);
  }

  .x12p6mv2 {
    transition-timing-function: var(--motion-easing-standard),var(--motion-easing-emphasized);
  }

  .x1c3j2pk {
    transition-timing-function: var(--motion-easing-standard),var(--motion-easing-standard),var(--motion-easing-standard),var(--motion-easing-standard),var(--motion-easing-standard),var(--motion-easing-standard);
  }

  .xa4bj78 {
    transition-timing-function: var(--motion-easing-standard),var(--motion-easing-standard),var(--motion-easing-standard),var(--motion-easing-standard);
  }

  .x1s9akh9 {
    transition-timing-function: var(--motion-easing-standard),var(--motion-easing-standard),var(--motion-easing-standard);
  }

  .xp5m7cn {
    transition-timing-function: var(--motion-easing-standard),var(--motion-easing-standard);
  }

  .x1iashqr {
    transition-timing-function: var(--motion-easing-standard);
  }

  .x87ps6o {
    -webkit-user-select: none;
    user-select: none;
  }

  .xxymvpz {
    vertical-align: middle;
  }

  .x16dsc37 {
    vertical-align: top;
  }

  .xlshs6z {
    visibility: hidden;
  }

  .x7z1v8h {
    white-space: nowrap !important;
  }

  .xuxw1ft {
    white-space: nowrap;
  }

  .x1vjfegm {
    z-index: 1;
  }

  .xhtitgo {
    z-index: 2;
  }

  .x1s89ezu {
    z-index: var(--z-modal);
  }

  .x1visetc {
    z-index: var(--z-skip-link);
  }

  .x1788d21 {
    z-index: var(--z-tooltip);
  }

  .x1a2nijv:focus-visible, .xyy9g8t:focus-within {
    box-shadow: 0 0 0 3px color-mix(in oklch,var(--ui-ring) 24%,transparent);
  }

  .x1t7rt7m:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in oklch,var(--ui-ring) 24%,transparent);
  }

  .xbcn71i:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ui-ring);
  }

  .x1gph7r7:focus-visible, .x1xjm2v2:focus-within {
    outline-color: var(--ui-ring);
  }

  .x1bqaal:focus-visible {
    outline-offset: -2px;
  }

  .x1fanpfn:focus-within, .x7s97pk:focus-visible {
    outline-offset: 2px;
  }

  .xj3ae5l:focus-visible {
    outline-offset: 3px;
  }

  .x12ijfkc:focus-visible {
    outline-offset: 4px;
  }

  .x14xc8xn:focus-within, .x9v5kkp:focus-visible {
    outline-style: solid;
  }

  .x16gxa91:focus-within, .x784prv:focus-visible {
    outline-width: 2px;
  }

  .x104nlkd:has(input:focus-visible) {
    outline-color: var(--ui-ring);
  }

  .x12ilkhz:has(input:focus-visible) {
    outline-offset: 2px;
  }

  .x1elebxb:has(input:focus-visible) {
    outline-offset: 3px;
  }

  .x1ae5oaz:has(input:focus-visible) {
    outline-style: solid;
  }

  .x1yuyh71:has(input:focus-visible) {
    outline-width: 2px;
  }

  .xm3qh6q:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    animation-direction: reverse;
  }

  .xioiqq0:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    transform: translateX(-1rem);
  }

  .x1s07b3s:disabled {
    cursor: not-allowed;
  }

  .xijokvz:disabled {
    opacity: .5;
  }

  .xgildtf:hover {
    background-attachment: scroll;
  }

  .xb3gsto:hover {
    background-clip: border-box;
  }

  .x153d940:hover {
    background-color: color-mix(in oklch,var(--ui-primary) 88%,var(--ui-background));
  }

  .xy5vzv3:hover {
    background-color: color-mix(in oklch,var(--ui-secondary) 82%,var(--ui-foreground));
  }

  .x3ykuo0:hover {
    background-color: var(--ui-accent);
  }

  .x1dzmml9:hover {
    background-color: var(--ui-destructive);
  }

  .xjdw8nj:hover {
    background-color: var(--ui-muted);
  }

  .x10p6z4x:hover {
    background-color: var(--ui-primary);
  }

  .xn3cpwa:hover {
    background-image: none;
  }

  .xzsr2ly:hover {
    background-origin: padding-box;
  }

  .x1ddkqqy:hover {
    background-repeat: repeat;
  }

  .x1vgyi1t:hover {
    background-size: auto;
  }

  .x16sc2ix:hover {
    box-shadow: var(--elevation-raised);
  }

  .x1ef2mcv:hover {
    color: var(--ui-accent-foreground);
  }

  .x139ty3h:hover {
    color: var(--ui-destructive-foreground);
  }

  .xu0kh1y:hover {
    color: var(--ui-foreground);
  }

  .xxcvxgg:hover {
    color: var(--ui-primary-foreground);
  }

  .x1yybpqo:hover {
    color: var(--ui-secondary-foreground);
  }

  .x1itt8ug:hover {
    text-decoration-thickness: 2px;
  }

  .xmm0wnq:focus {
    background-color: var(--ui-accent);
  }

  .x19zaomo:focus {
    background-image: none;
  }

  .xxnxhmz:focus {
    color: var(--ui-accent-foreground);
  }

  .x1wfrlr2:focus {
    transform: translateY(0);
  }

  .xymg228:active {
    transform: translateY(1px);
  }

  @media (width <= 40rem) {
    .x1mlfcyh.x1mlfcyh {
      align-items: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .xmzkp9f.xmzkp9f {
      animation-composition: replace;
    }

    .x1qvbe4r.x1qvbe4r {
      animation-delay: 0s;
    }

    .xpk7f7d.xpk7f7d {
      animation-direction: normal;
    }

    .x958gol.x958gol {
      animation-duration: 0s;
    }

    .x15inb9f.x15inb9f {
      animation-fill-mode: none;
    }

    .xd81xr2.xd81xr2 {
      animation-iteration-count: 1;
    }

    .x1ynp8h1.x1ynp8h1 {
      animation-name: none;
    }

    .x6qw1r7.x6qw1r7 {
      animation-play-state: running;
    }

    .x1pixhli.x1pixhli {
      animation-range-end: normal;
    }

    .x1gfwfhs.x1gfwfhs {
      animation-range-start: normal;
    }

    .xa806cr.xa806cr {
      animation-timeline: auto;
    }

    .xw3qwi6.xw3qwi6 {
      animation-timing-function: ease;
    }
  }

  @media (forced-colors: active) {
    .xr2fqy5.xr2fqy5 {
      appearance: auto;
    }

    .xpf60yz.xpf60yz {
      background-color: buttonface;
    }

    .x1mi3ld3.x1mi3ld3 {
      background-color: canvas;
    }

    .x1mjqi9u.x1mjqi9u {
      background-color: canvastext;
    }

    .x170n6oi.x170n6oi {
      background-color: highlight;
    }

    .x1qu9owy.x1qu9owy {
      background-color: highlighttext;
    }

    .xaxwvs9.xaxwvs9 {
      background-image: none;
    }

    .x3lgspj.x3lgspj {
      background-size: auto;
    }

    .xdnqiaj.xdnqiaj {
      border-image-outset: 0;
    }

    .x1mjg4os.x1mjg4os {
      border-image-repeat: stretch;
    }

    .x1luk9ee.x1luk9ee {
      border-image-slice: 100%;
    }

    .x1cjzfx6.x1cjzfx6 {
      border-image-source: none;
    }

    .xotrrsn.xotrrsn {
      border-image-width: 1;
    }

    .x1bk1lk1.x1bk1lk1 {
      border-inline-end-color: canvastext;
    }

    .xn828t1.xn828t1 {
      border-inline-end-style: solid;
    }

    .x1rmpjmf.x1rmpjmf {
      border-inline-end-width: 1px;
    }

    .x11apkjs.x11apkjs {
      border-inline-start-color: canvastext;
    }

    .xvxnyyj.xvxnyyj {
      border-inline-start-style: solid;
    }

    .xzyy8p7.xzyy8p7 {
      border-inline-start-width: 1px;
    }

    .x15rzyfa.x15rzyfa {
      box-shadow: none;
    }

    .xsrz6cx.xsrz6cx {
      color: buttontext;
    }

    .xiskxvl.xiskxvl {
      color: highlight;
    }

    .x1wdx1ck.x1wdx1ck {
      fill: canvas;
    }

    .x9xrxzh.x9xrxzh {
      forced-color-adjust: auto;
    }

    .xm958hk.xm958hk {
      forced-color-adjust: none;
    }
  }

  @media (width <= 40rem) {
    .x1m1kh9h.x1m1kh9h {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (pointer: coarse) {
    .x1yp402.x1yp402 {
      grid-template-columns: var(--interactive-target-min) minmax(3rem,1fr) var(--interactive-target-min);
    }
  }

  @media (width <= 40rem) {
    .x14gmj1b.x14gmj1b {
      inset-inline-end: max(var(--space-3),env(safe-area-inset-left));
    }

    .x9n3pu8.x9n3pu8 {
      inset-inline-start: max(var(--space-3),env(safe-area-inset-left));
    }

    .x13eskkf.x13eskkf {
      justify-content: center;
    }
  }

  @media (forced-colors: active) {
    .xyd5c8n.xyd5c8n {
      outline-color: highlight;
    }

    .xoy0osh.xoy0osh {
      stroke: canvastext;
    }

    .xonpnua.xonpnua {
      stroke: graytext;
    }

    .xg95lcm.xg95lcm {
      stroke: highlight;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .xk4dzbi.xk4dzbi {
      transition-duration: 0s;
    }

    .xsfowg2.xsfowg2 {
      transition-property: none;
    }
  }

  @media (forced-colors: active) {
    .x18h8etl.x18h8etl:focus-within, .x1ofnqge.x1ofnqge:focus-visible {
      box-shadow: none;
    }

    .xfjoems.xfjoems:focus-within, .xy1gt46.xy1gt46:focus-visible {
      outline-color: highlight;
    }

    .x7nf4t2.x7nf4t2:has(input:focus-visible) {
      outline-color: highlight;
    }

    .x15blstl.x15blstl:hover {
      background-color: buttonface;
    }

    .x1pys6gs.x1pys6gs:hover {
      color: buttontext;
    }
  }
}

@layer components.hraness-ui.priority5 {
  .x1dtpm5y {
    border-bottom-color: color-mix(in oklch,currentColor 25%,transparent);
  }

  .x6fhnnc {
    border-bottom-color: var(--ui-border);
  }

  .x1q0q8m5 {
    border-bottom-style: solid;
  }

  .x1bdjow1 {
    border-bottom-width: .125em;
  }

  .xso031l {
    border-bottom-width: 1px;
  }

  .x1b4hy2t {
    border-top-color: currentColor;
  }

  .x11dzxig {
    border-top-color: var(--ui-border);
  }

  .x13fuv20 {
    border-top-style: solid;
  }

  .x19adufw {
    border-top-width: .125em;
  }

  .x178xt8z {
    border-top-width: 1px;
  }

  .x1ey2m1c {
    bottom: 0;
  }

  .x164u9eo {
    height: .5rem;
  }

  .x1qa65zt {
    height: .625rem;
  }

  .xmll18r {
    height: 1.25rem;
  }

  .xam5rvr {
    height: 1.5rem;
  }

  .x5yr21d {
    height: 100%;
  }

  .x1dr59a3 {
    height: 100vh;
  }

  .x1roirhx {
    height: 10rem;
  }

  .xlzyvqe {
    height: 1em;
  }

  .x1b109bh {
    height: 1px !important;
  }

  .xjm9jq1 {
    height: 1px;
  }

  .x1l36t39 {
    height: 1rem;
  }

  .xwaiz5r {
    height: 2.5rem;
  }

  .xettwda {
    height: 2rem;
  }

  .xu15cu9 {
    height: 3.5rem;
  }

  .x1pizb70 {
    height: 3rem;
  }

  .x17frcva {
    height: 6rem;
  }

  .xt7dq6l {
    height: auto;
  }

  .x1q5yyfj {
    height: max(1.25rem,var(--hraness-slider-coarse-min, 0px));
  }

  .xu96u03 {
    left: 0;
  }

  .x1nrll8i {
    left: 50%;
  }

  .xat24cr {
    margin-bottom: 0;
  }

  .x17z7szv {
    margin-bottom: var(--space-1);
  }

  .xj3b58b {
    margin-left: 0;
  }

  .x1yf7rl7 {
    margin-right: 0;
  }

  .xdj266r {
    margin-top: 0;
  }

  .x1qxdtre {
    margin-top: var(--space-1);
  }

  .xzvpv3f {
    margin-top: var(--space-2);
  }

  .x1g15ey4 {
    max-height: calc(100dvh - 2rem);
  }

  .x8di0vd {
    max-height: min(24rem,var(--visual-viewport-height, 70vh));
  }

  .x11bjrsb {
    max-height: min(42rem, 100dvh - 2rem);
  }

  .x7ab17h {
    max-height: none;
  }

  .x193iq5w {
    max-width: 100%;
  }

  .x9h9p8b {
    max-width: 20rem;
  }

  .xc0i79g {
    max-width: 36rem;
  }

  .x1vpbbxe {
    max-width: 48rem;
  }

  .x1glul6l {
    max-width: min(24rem, 100vw - 2rem);
  }

  .x1c4vidq {
    max-width: min(28rem, 100vw - 2rem);
  }

  .x1x1rfll {
    max-width: none;
  }

  .x2lwn1j {
    min-height: 0;
  }

  .x1rqwxy8 {
    min-height: 1.5rem;
  }

  .x1k5hnt4 {
    min-height: 1.875rem;
  }

  .x1us19tq {
    min-height: 100%;
  }

  .x1b3lxvz {
    min-height: 12rem;
  }

  .x1xaadd7 {
    min-height: 1em;
  }

  .x1aewpuf {
    min-height: 1rem;
  }

  .xe8gcm {
    min-height: 3rem;
  }

  .xdmy4d6 {
    min-height: 7.5rem;
  }

  .x1n7nj54 {
    min-height: calc(max(var(--hraness-field-height, 2rem),var(--hraness-field-coarse-min, 0px)) - .5rem);
  }

  .x1l5qzlo {
    min-height: calc(max(var(--hraness-field-height, 2rem),var(--hraness-field-coarse-min, 0px)) - 2px);
  }

  .x1djsrkw {
    min-height: calc(max(var(--hraness-field-height, var(--control-height-primary)),var(--hraness-field-coarse-min, 0px)) - .5rem);
  }

  .x17gzt8q {
    min-height: calc(max(var(--hraness-field-height, var(--control-height-primary)),var(--hraness-field-coarse-min, 0px)) - 2px);
  }

  .x1kbo7g0 {
    min-height: calc(max(var(--hraness-field-height, var(--interactive-target-compact)),var(--hraness-field-coarse-min, 0px)) - .5rem);
  }

  .x17ouxu {
    min-height: calc(max(var(--hraness-field-height, var(--interactive-target-compact)),var(--hraness-field-coarse-min, 0px)) - 2px);
  }

  .x1esom5j {
    min-height: max(2rem,var(--hraness-action-coarse-min, 0px));
  }

  .x1lnodwb {
    min-height: max(2rem,var(--hraness-collection-coarse-min, 0px));
  }

  .x1yv999w {
    min-height: max(var(--control-height-primary),var(--hraness-action-coarse-min, 0px));
  }

  .xg5uit5 {
    min-height: max(var(--control-height-primary),var(--hraness-collection-coarse-min, 0px));
  }

  .x1qtqqm4 {
    min-height: max(var(--control-height-transport),var(--hraness-action-coarse-min, 0px));
  }

  .xel52y2 {
    min-height: max(var(--hraness-field-height, 2rem),var(--hraness-field-coarse-min, 0px));
  }

  .xapzl0h {
    min-height: max(var(--hraness-field-height, var(--control-height-primary)),var(--hraness-field-coarse-min, 0px));
  }

  .xa5u4au {
    min-height: max(var(--hraness-field-height, var(--interactive-target-compact)),var(--hraness-field-coarse-min, 0px));
  }

  .x1y2l6e2 {
    min-height: max(var(--interactive-target-compact),var(--hraness-action-coarse-min, 0px));
  }

  .x1dqze38 {
    min-height: max(var(--interactive-target-compact),var(--hraness-collection-coarse-min, 0px));
  }

  .x1131nnu {
    min-height: max(var(--interactive-target-compact),var(--hraness-dialog-coarse-min, 0px));
  }

  .x11sl19t {
    min-height: max(var(--interactive-target-compact),var(--hraness-field-coarse-min, 0px));
  }

  .x1l0kjw5 {
    min-height: max(var(--interactive-target-compact),var(--hraness-list-box-coarse-min, 0px));
  }

  .x189nhaf {
    min-height: max(var(--interactive-target-compact),var(--hraness-menu-coarse-min, 0px));
  }

  .x1ndaqa1 {
    min-height: max(var(--interactive-target-compact),var(--hraness-pagination-coarse-min, 0px));
  }

  .x1ujsvf4 {
    min-height: max(var(--interactive-target-compact),var(--hraness-toast-coarse-min, 0px));
  }

  .x1djw8xr {
    min-height: max(var(--interactive-target-min),var(--hraness-collection-coarse-min, 0px));
  }

  .x1ig0bsw {
    min-height: var(--interactive-target-compact);
  }

  .x1pjshk2 {
    min-height: var(--interactive-target-min);
  }

  .xeuugli {
    min-width: 0;
  }

  .x1vi9356 {
    min-width: 1.5rem;
  }

  .x12kinc7 {
    min-width: 12rem;
  }

  .x1k8l6nd {
    min-width: 3rem;
  }

  .x1u7vzey {
    min-width: calc(max(var(--hraness-field-height, 2rem),var(--hraness-field-coarse-min, 0px)) - .5rem);
  }

  .x14qgve5 {
    min-width: calc(max(var(--hraness-field-height, var(--control-height-primary)),var(--hraness-field-coarse-min, 0px)) - .5rem);
  }

  .xdx86wr {
    min-width: calc(max(var(--hraness-field-height, var(--interactive-target-compact)),var(--hraness-field-coarse-min, 0px)) - .5rem);
  }

  .xsy7027 {
    min-width: max(2rem,var(--hraness-action-coarse-min, 0px));
  }

  .xla0ybc {
    min-width: max(var(--control-height-primary),var(--hraness-action-coarse-min, 0px));
  }

  .x1nulscw {
    min-width: max(var(--control-height-transport),var(--hraness-action-coarse-min, 0px));
  }

  .xrmaxj9 {
    min-width: max(var(--interactive-target-compact),var(--hraness-action-coarse-min, 0px));
  }

  .xoxaf3i {
    min-width: min(12rem, 100vw - 2rem);
  }

  .xxrnt4g {
    min-width: var(--hraness-action-coarse-min);
  }

  .x2jroms {
    min-width: var(--hraness-collection-coarse-min);
  }

  .x1hr7sbn {
    min-width: var(--interactive-target-compact);
  }

  .xw2csxc {
    overflow-x: auto;
  }

  .x6ikm8r {
    overflow-x: hidden;
  }

  .x1plvlek {
    overflow-x: visible;
  }

  .x1odjw0f {
    overflow-y: auto;
  }

  .x10wlt62 {
    overflow-y: hidden;
  }

  .x7p5m3t {
    overscroll-behavior-x: contain;
  }

  .x1e4zzel {
    overscroll-behavior-y: contain;
  }

  .x18d9i69 {
    padding-bottom: 0;
  }

  .xgk38rq {
    padding-bottom: max(var(--space-5, 1.25rem),env(safe-area-inset-bottom));
  }

  .xw080dc {
    padding-bottom: var(--space-1);
  }

  .x19a4mjr {
    padding-bottom: var(--space-2);
  }

  .xq148l {
    padding-bottom: var(--space-4);
  }

  .xlt5wix {
    padding-bottom: var(--space-6);
  }

  .x1uhho1l {
    padding-left: 0;
  }

  .x16vvl9m {
    padding-left: max(var(--hraness-quiet-site-gutter, 1.25rem),env(safe-area-inset-left));
  }

  .x1t11mm0 {
    padding-left: var(--space-1);
  }

  .x1cb00rx {
    padding-left: var(--space-3);
  }

  .x7xe1zy {
    padding-left: var(--space-4);
  }

  .x16tdjq0 {
    padding-left: var(--space-6);
  }

  .x1xpa7k {
    padding-right: 0;
  }

  .x1dr8qzh {
    padding-right: max(var(--hraness-quiet-site-gutter, 1.25rem),env(safe-area-inset-right));
  }

  .x7ruhhf {
    padding-right: var(--space-1);
  }

  .x1uvjf4i {
    padding-right: var(--space-3);
  }

  .x1rszif4 {
    padding-right: var(--space-4);
  }

  .x1z06fhp {
    padding-right: var(--space-6);
  }

  .xexx8yu {
    padding-top: 0;
  }

  .x15koebe {
    padding-top: var(--space-1);
  }

  .x1mg8snn {
    padding-top: var(--space-2);
  }

  .xvaac52 {
    padding-top: var(--space-4);
  }

  .x1b284x9 {
    padding-top: var(--space-5, 1.25rem);
  }

  .xb5peal {
    padding-top: var(--space-6);
  }

  .x3m8u43 {
    right: 0;
  }

  .x13vifvy {
    top: 0;
  }

  .xwa60dl {
    top: 50%;
  }

  .x1jjc1wv {
    width: .5rem;
  }

  .x1e7hgle {
    width: .625rem;
  }

  .xwqq7k2 {
    width: 1.25rem;
  }

  .xp8d6y2 {
    width: 1.5rem;
  }

  .xh8yej3 {
    width: 100%;
  }

  .x15vhz18 {
    width: 1em;
  }

  .x1r97y75 {
    width: 1px !important;
  }

  .x1i1rx1s {
    width: 1px;
  }

  .xcdlrvm {
    width: 1rem;
  }

  .xvm51jw {
    width: 2.5rem;
  }

  .xs5h3dt {
    width: 2rem;
  }

  .x154i66o {
    width: 3.5rem;
  }

  .x188tqju {
    width: 3rem;
  }

  .xw63694 {
    width: 40% !important;
  }

  .x14atkfc {
    width: auto;
  }

  .xeq5yr9 {
    width: fit-content;
  }

  .xatpk5v {
    width: max(1.25rem,var(--hraness-slider-coarse-min, 0px));
  }

  .x16ka8ky {
    width: max(2rem,var(--hraness-action-coarse-min, 0px));
  }

  .x147td01 {
    width: max(var(--control-height-primary),var(--hraness-action-coarse-min, 0px));
  }

  .x1jcgwm8 {
    width: max(var(--control-height-transport),var(--hraness-action-coarse-min, 0px));
  }

  .xmy4bs3 {
    width: max(var(--interactive-target-compact),var(--hraness-action-coarse-min, 0px));
  }

  .x3d859g {
    width: min(24rem, 100%);
  }

  .x43d60k {
    width: min(26rem, 100vw - 2rem);
  }

  .x19ndz4l {
    width: min(32rem, 100%);
  }

  .x13jwj08 {
    width: min(48rem, 100%);
  }

  .x1c7fcki {
    width: var(--interactive-target-compact);
  }

  .xlvufjm {
    width: var(--trigger-width);
  }

  @supports (height: 100svh) {
    .x5yh38q.x5yh38q {
      height: 100svh;
    }

    @supports (height: 100dvh) {
      .x1uqklc0.x1uqklc0.x1uqklc0 {
        height: 100dvh;
      }
    }
  }

  @media (forced-colors: active) {
    .x1odqkhc.x1odqkhc {
      border-bottom-color: canvastext;
    }

    .x1b45ly2.x1b45ly2 {
      border-bottom-style: solid;
    }

    .xhv30r1.xhv30r1 {
      border-bottom-width: 1px;
    }

    .xfdlk4p.xfdlk4p {
      border-top-color: canvastext;
    }

    .x1ew3qar.x1ew3qar {
      border-top-style: solid;
    }

    .x1v8ni4k.x1v8ni4k {
      border-top-width: 1px;
    }
  }

  @media (pointer: coarse) {
    .x15ypskr.x15ypskr {
      height: max(3rem,var(--interactive-target-min));
    }

    .xar2k7g.xar2k7g {
      height: var(--interactive-target-min);
    }

    .x1d35wjx.x1d35wjx {
      min-height: calc(var(--interactive-target-min) - .5rem);
    }

    .x19mvy8m.x19mvy8m {
      min-height: calc(var(--interactive-target-min) - 2px);
    }

    .x1u09ppm.x1u09ppm {
      min-height: max(3rem,var(--interactive-target-min));
    }

    .xdnzybn.xdnzybn {
      min-height: max(var(--control-height-primary),var(--interactive-target-min));
    }

    .xsbdxvp.xsbdxvp {
      min-height: var(--control-height-primary);
    }

    .xm7x4q.xm7x4q {
      min-height: var(--control-height-transport);
    }

    .x1tutk9t.x1tutk9t {
      min-height: var(--interactive-target-min, 3rem);
    }

    .x1ai14st.x1ai14st {
      min-height: var(--interactive-target-min);
    }

    .x1t849ub.x1t849ub {
      min-width: calc(var(--interactive-target-min) - .5rem);
    }

    .xlpzvxd.xlpzvxd {
      min-width: max(3rem,var(--interactive-target-min));
    }

    .x1mo9qwv.x1mo9qwv {
      min-width: var(--control-height-primary);
    }

    .xp3bzmk.xp3bzmk {
      min-width: var(--control-height-transport);
    }

    .x927kn3.x927kn3 {
      min-width: var(--interactive-target-min);
    }
  }

  @media (width <= 40rem) {
    .x1l091rc.x1l091rc {
      width: auto;
    }
  }

  @media (pointer: coarse) {
    .xtscap9.xtscap9 {
      width: max(3rem,var(--interactive-target-min));
    }

    .x1pcftg7.x1pcftg7 {
      width: var(--control-height-primary);
    }

    .xyvhytc.xyvhytc {
      width: var(--control-height-transport);
    }

    .x1a3rwz5.x1a3rwz5 {
      width: var(--interactive-target-min);
    }
  }
}

@layer components.hraness-ui.priority6 {
  .x1eppz4x:before {
    flex: none;
  }
}

@layer components.hraness-ui.priority7 {
  .xkwyxoe:before {
    color: var(--ui-muted-foreground);
  }

  .x1wrotz2:before {
    content: "/";
  }
}

@keyframes xazk77x-B {
  to {
    background-position: -200% 0;
  }
}

@keyframes x1mi9bte-B {
  to {
    opacity: 0;
  }
}

@keyframes xw2c1lr-B {
  from {
    opacity: 0;
  }
}

@keyframes x14k4uad-B {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
}

@keyframes x17ibfk4-B {
  to {
    opacity: 0;
    transform: translateX(1rem);
  }
}

@keyframes xoai65e-B {
  to {
    opacity: 0;
    transform: translateY(-.125rem) scale(.99);
  }
}

@keyframes x1ez0eqx-B {
  from {
    opacity: 0;
    transform: translateY(-.25rem) scale(.98);
  }
}

@keyframes x1uh2x5g-B {
  to {
    transform: rotate(1turn);
  }
}

@keyframes xaiwn2n-B {
  from {
    transform: translateX(-125%);
  }

  to {
    transform: translateX(250%);
  }
}

/* Nebula Sans is the default proportional face. The official, unmodified
 * WOFF2 cuts and their SIL Open Font License ship with this package. */
@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/nebula-sans/NebulaSans-Light.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: italic;
  font-weight: 300;
  src: url("./fonts/nebula-sans/NebulaSans-LightItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/nebula-sans/NebulaSans-Book.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/nebula-sans/NebulaSans-BookItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/nebula-sans/NebulaSans-Medium.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: italic;
  font-weight: 500;
  src: url("./fonts/nebula-sans/NebulaSans-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/nebula-sans/NebulaSans-Semibold.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: italic;
  font-weight: 600;
  src: url("./fonts/nebula-sans/NebulaSans-SemiboldItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/nebula-sans/NebulaSans-Bold.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/nebula-sans/NebulaSans-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/nebula-sans/NebulaSans-Black.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Nebula Sans";
  font-style: italic;
  font-weight: 900;
  src: url("./fonts/nebula-sans/NebulaSans-BlackItalic.woff2") format("woff2");
}

/* Optional open-source display face for deliberate monospace treatments. */
@font-face {
  font-display: swap;
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  src: url("./fonts/geist-mono/GeistMono[wght].woff2") format("woff2");
}

@layer components.hraness-design-kit.legacy {

/**
 * Product-marketing grammar
 *
 * An opt-in narrative grammar for technical product sites. One typeface, one
 * measured type scale, sentence-case labels, hairline chrome, soft radii, and
 * one accent per product. Roles: site header, hero with optional product
 * frame, pillars, install, ordered flow, fact and stat strips, narrative
 * section, primitives, interfaces, trust boundary, quotes, pricing, native
 * questions, maker, closing call to action, and an in-flow site footer.
 *
 * Products bind the `--hraness-marketing-*` custom properties on the marketing
 * root (`.hraness-marketing-page`) or on any role element. Every role reads
 * the same properties, so a site sets its accent once.
 */

:where(
  .hraness-marketing-page,
  .hraness-marketing-header,
  .hraness-marketing-footer,
  .hraness-marketing-hero,
  .hraness-marketing-pillars,
  .hraness-marketing-install,
  .hraness-marketing-section,
  .hraness-marketing-primitives,
  .hraness-marketing-stats,
  .hraness-marketing-interfaces,
  .hraness-marketing-trust,
  .hraness-marketing-quotes,
  .hraness-marketing-pricing,
  .hraness-marketing-questions,
  .hraness-marketing-maker,
  .hraness-marketing-cta,
  .hraness-marketing-proof-frame
) {
  --hraness-marketing-ink: var(--foreground, CanvasText);
  --hraness-marketing-muted: var(--muted, GrayText);
  --hraness-marketing-background: var(--background, Canvas);
  --hraness-marketing-surface: var(--surface, Canvas);
  --hraness-marketing-line: color-mix(in oklch, var(--hraness-marketing-ink) 12%, transparent);
  --hraness-marketing-line-strong: color-mix(in oklch, var(--hraness-marketing-ink) 22%, transparent);
  --hraness-marketing-inverse: var(--inverse, CanvasText);
  --hraness-marketing-inverse-ink: var(--inverse-foreground, Canvas);
  --hraness-marketing-accent: var(--hraness-site-accent, oklch(0.55 0.21 262));
  --hraness-marketing-accent-ink: var(--hraness-site-accent-ink, white);
  --hraness-marketing-accent-soft: color-mix(in oklch, var(--hraness-marketing-accent) 10%, transparent);
  --hraness-marketing-text-font: var(--font-text, ui-sans-serif, system-ui, sans-serif);
  --hraness-marketing-heading-font: var(--font-heading, var(--hraness-marketing-text-font));
  --hraness-marketing-mono-font: var(--font-mono, ui-monospace, monospace);
  --hraness-marketing-measure: 72rem;
  --hraness-marketing-copy-measure: 40rem;
  --hraness-marketing-prose-measure: 62ch;
  --hraness-marketing-gutter: clamp(1.25rem, 4vw, 3rem);
  --hraness-marketing-radius: 0.625rem;
  --hraness-marketing-frame-radius: 0.875rem;
  --hraness-marketing-rule: 1px solid var(--hraness-marketing-line);
  --hraness-marketing-shadow:
    0 1px 2px oklch(0 0 0 / 0.06),
    0 24px 48px -24px oklch(0 0 0 / 0.28);
  --hraness-marketing-section-space: clamp(4rem, 9vw, 7.5rem);
  --hraness-marketing-heading-weight: 500;
  --hraness-marketing-heading-tracking: -0.022em;
  --hraness-marketing-action-height: 2.75rem;
  --hraness-foil-1: light-dark(oklch(0.89 0.065 337), oklch(0.56 0.16 340));
  --hraness-foil-2: light-dark(oklch(0.875 0.05 277), oklch(0.52 0.15 285));
  --hraness-foil-3: light-dark(oklch(0.92 0.05 170), oklch(0.66 0.14 175));
  --hraness-foil-4: light-dark(oklch(0.95 0.045 96), oklch(0.72 0.13 100));
  --hraness-foil-5: light-dark(oklch(0.9 0.05 55), oklch(0.55 0.15 45));
  --hraness-foil-6: light-dark(oklch(0.875 0.06 305), oklch(0.62 0.16 305));
  --hraness-foil-halo-alpha: 0.3;
  color: var(--hraness-marketing-ink);
  font-family: var(--hraness-marketing-text-font);
}

.hraness-marketing-page {
  background: var(--hraness-marketing-background);
  color: var(--hraness-marketing-ink);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.hraness-marketing-page :where(p, li, dd) {
  text-wrap: pretty;
}

.hraness-marketing-page :where(a) {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.hraness-marketing-page :where(code, kbd, pre) {
  font-family: var(--hraness-marketing-mono-font);
}

.hraness-marketing-page :where(pre) {
  max-inline-size: 100%;
  margin: 0;
  padding: 1rem 1.15rem;
  overflow: auto;
  border-radius: var(--hraness-marketing-radius);
  background: var(--hraness-marketing-surface);
  color: var(--hraness-marketing-ink);
  font-size: 0.85rem;
  line-height: 1.6;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.hraness-marketing-page :where(:not(pre) > code) {
  padding: 0.08em 0.38em;
  border-radius: 0.3em;
  background: color-mix(in oklch, var(--hraness-marketing-ink) 7%, transparent);
  font-size: 0.9em;
}

/* Labels: sentence case in the text face. Monospace stays with code. */
:where(
  .hraness-marketing-hero__eyebrow,
  .hraness-marketing-hero__name,
  .hraness-marketing-proof__kicker,
  .hraness-marketing-install__eyebrow,
  .hraness-marketing-facts dt,
  .hraness-marketing-stats dt,
  .hraness-marketing-section__label,
  .hraness-marketing-primitives__label,
  .hraness-marketing-interfaces__label,
  .hraness-marketing-trust__label,
  .hraness-marketing-quotes__label,
  .hraness-marketing-pricing__label,
  .hraness-marketing-questions__label,
  .hraness-marketing-maker__label,
  .hraness-marketing-cta__eyebrow
) {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-family: var(--hraness-marketing-text-font);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.hraness-marketing-section__label[data-size="body"] {
  font-size: 1rem;
}

/* Shared heading recipe. */
:where(
  .hraness-marketing-hero__heading,
  .hraness-marketing-proof__heading,
  .hraness-marketing-install__heading,
  .hraness-marketing-section__heading,
  .hraness-marketing-primitives__heading,
  .hraness-marketing-interfaces__heading,
  .hraness-marketing-trust__heading,
  .hraness-marketing-quotes__heading,
  .hraness-marketing-pricing__heading,
  .hraness-marketing-questions__heading,
  .hraness-marketing-maker__heading,
  .hraness-marketing-cta__heading
) {
  margin: 0;
  color: var(--hraness-marketing-ink);
  font-family: var(--hraness-marketing-heading-font);
  font-weight: var(--hraness-marketing-heading-weight);
  letter-spacing: var(--hraness-marketing-h2-tracking, -0.012em);
  line-height: var(--hraness-marketing-h2-leading, 1.15);
  text-wrap: balance;
}

:where(
  .hraness-marketing-section__heading,
  .hraness-marketing-primitives__heading,
  .hraness-marketing-interfaces__heading,
  .hraness-marketing-trust__heading,
  .hraness-marketing-quotes__heading,
  .hraness-marketing-pricing__heading,
  .hraness-marketing-questions__heading,
  .hraness-marketing-maker__heading
) {
  font-size: var(--hraness-paper-section-heading-size, clamp(1.75rem, 3vw, 2.5rem));
}

/* Lead and summary paragraphs under a heading. */
:where(
  .hraness-marketing-hero__summary,
  .hraness-marketing-hero__example,
  .hraness-marketing-section__summary,
  .hraness-marketing-primitives__header > p:last-child,
  .hraness-marketing-interfaces__header > p:last-child,
  .hraness-marketing-trust__header > p:last-child,
  .hraness-marketing-quotes__header > p:last-child,
  .hraness-marketing-pricing__header > p:last-child,
  .hraness-marketing-questions__header > p:last-child,
  .hraness-marketing-cta__summary
) {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-family: var(--hraness-marketing-text-font);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* Container rhythm shared by every full-width role. */
:where(
  .hraness-marketing-hero,
  .hraness-marketing-pillars,
  .hraness-marketing-install,
  .hraness-marketing-section,
  .hraness-marketing-primitives,
  .hraness-marketing-stats,
  .hraness-marketing-interfaces,
  .hraness-marketing-trust,
  .hraness-marketing-quotes,
  .hraness-marketing-pricing,
  .hraness-marketing-questions,
  .hraness-marketing-maker,
  .hraness-marketing-cta
) {
  inline-size: min(100%, var(--hraness-marketing-measure));
  min-inline-size: 0;
  margin-inline: auto;
}

.hraness-marketing-page > :where(
  .hraness-marketing-hero,
  .hraness-marketing-pillars,
  .hraness-marketing-install,
  .hraness-marketing-section,
  .hraness-marketing-primitives,
  .hraness-marketing-stats,
  .hraness-marketing-interfaces,
  .hraness-marketing-trust,
  .hraness-marketing-quotes,
  .hraness-marketing-pricing,
  .hraness-marketing-questions,
  .hraness-marketing-maker,
  .hraness-marketing-cta
) {
  padding-inline: var(--hraness-marketing-gutter);
}

/* Actions */

.hraness-marketing-hero__actions,
.hraness-marketing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.hraness-marketing-action {
  display: inline-flex;
  min-block-size: var(--hraness-marketing-action-height);
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--hraness-marketing-line-strong);
  border-radius: var(--hraness-marketing-radius);
  background: var(--hraness-marketing-surface);
  color: var(--hraness-marketing-ink);
  font-family: var(--hraness-marketing-text-font);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.hraness-marketing-action:hover {
  background: color-mix(in oklch, var(--hraness-marketing-ink) 6%, var(--hraness-marketing-surface));
  text-decoration: none;
}

.hraness-marketing-action:focus-visible {
  outline: 2px solid var(--hraness-marketing-accent);
  outline-offset: 2px;
}

.hraness-marketing-action[data-emphasis="primary"] {
  --hraness-foil-surface: var(--hraness-marketing-accent);
  color: var(--hraness-marketing-accent-ink);
}

.hraness-marketing-action[data-emphasis="primary"]:hover {
  --hraness-foil-surface: color-mix(in oklch, var(--hraness-marketing-accent) 84%, black);
}

/* Site header */

.hraness-marketing-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  border-block-end: var(--hraness-marketing-rule);
}

/* marketing-header-paint:start */
/* Keep the browser aliases in separate feature queries: CSS optimizers can
 * collapse adjacent aliases to the prefixed property and lose Chromium blur. */
.hraness-marketing-header {
  --hraness-marketing-header-background: var(--hraness-marketing-background);
  --hraness-marketing-header-backdrop: none;
  background: var(--hraness-marketing-header-background);
}

@supports (-webkit-backdrop-filter: blur(1px)) {
  .hraness-marketing-header {
    --hraness-marketing-header-background: color-mix(in oklch, var(--hraness-marketing-background) 82%, transparent);
    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: var(--hraness-marketing-header-backdrop);
  }
}

@supports (backdrop-filter: blur(1px)) {
  .hraness-marketing-header {
    --hraness-marketing-header-background: color-mix(in oklch, var(--hraness-marketing-background) 82%, transparent);
    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
    backdrop-filter: var(--hraness-marketing-header-backdrop);
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .hraness-marketing-header {
    --hraness-marketing-header-background: var(--hraness-marketing-background);
    --hraness-marketing-header-backdrop: none;
  }
}
/* marketing-header-paint:end */

.hraness-marketing-header__inner {
  display: flex;
  inline-size: min(100%, var(--hraness-marketing-measure));
  min-block-size: var(--hraness-marketing-header-height, 2.75rem);
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-inline: auto;
  padding-inline: var(--hraness-marketing-gutter);
}

.hraness-marketing-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--hraness-marketing-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.hraness-marketing-header__brand :where(img, svg) {
  block-size: 1.25rem;
  inline-size: auto;
}

.hraness-marketing-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 1.15rem;
  margin-inline-start: auto;
}

.hraness-marketing-header__nav a {
  color: var(--hraness-marketing-muted);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.hraness-marketing-header__nav a:hover,
.hraness-marketing-header__nav a[aria-current="page"] {
  color: var(--hraness-marketing-ink);
}

.hraness-marketing-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hraness-marketing-header .hraness-marketing-action {
  min-block-size: var(--hraness-marketing-header-action-height, 2rem);
  padding-block: 0.3rem;
  padding-inline: 0.8rem;
  font-size: 0.85rem;
}

/* Site footer */

.hraness-marketing-footer {
  border-block-start: var(--hraness-marketing-rule);
  color: var(--hraness-marketing-muted);
  font-size: 0.92rem;
}

.hraness-marketing-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  inline-size: min(100%, var(--hraness-marketing-measure));
  margin-inline: auto;
  padding-block: var(--hraness-marketing-footer-space, 2rem 4rem);
  padding-inline: var(--hraness-marketing-gutter);
}

.hraness-marketing-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--hraness-marketing-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.hraness-marketing-footer__brand :where(img, svg) {
  block-size: 1.25rem;
  inline-size: auto;
}

.hraness-marketing-footer__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hraness-marketing-footer__inner > :where(p) {
  margin: 0;
  max-inline-size: 48ch;
}

.hraness-marketing-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 1.15rem;
  margin-inline-start: auto;
}

.hraness-marketing-footer__nav a {
  color: var(--hraness-marketing-muted);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.hraness-marketing-footer__nav a:hover,
.hraness-marketing-footer__nav a[aria-current="page"] {
  color: var(--hraness-marketing-ink);
}

/* Shared foil contract
 *
 * One pointer-tracked metallic chrome recipe shared by brand wordmarks,
 * primary calls to action, and the shared site footer. Elements opt in with
 * the hraness-foil / hraness-foil-text hooks; the marketing header brand and
 * primary actions carry the treatment by default. attachFoil() from
 * @hraness/design-kit/browser eases the three bounded inputs
 * --hraness-foil-x, --hraness-foil-y, and --hraness-foil-angle on [data-foil]
 * descendants while --hraness-foil-glow stays CSS-owned. The spectrum lives in
 * --hraness-foil-1 through --hraness-foil-6 so a site rethemes every foil
 * surface from one marketing root; dark roots read the deeper palette where
 * the pointer sheen stands out.
 */

.hraness-foil,
.hraness-marketing-action[data-emphasis="primary"] {
  --hraness-foil-glow: 0;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  background-color: var(--hraness-foil-surface, var(--surface, var(--background, Canvas)));
  background-image:
    linear-gradient(var(--hraness-foil-surface, var(--surface, var(--background, Canvas))), var(--hraness-foil-surface, var(--surface, var(--background, Canvas)))),
    radial-gradient(circle at var(--hraness-foil-x, 50%) var(--hraness-foil-y, 50%), color-mix(in srgb, white calc(64% + var(--hraness-foil-glow, 0) * 28%), transparent) 0%, transparent 46%),
    conic-gradient(from var(--hraness-foil-angle, 135deg),
      var(--hraness-foil-1, light-dark(oklch(0.89 0.065 337), oklch(0.56 0.16 340))),
      var(--hraness-foil-2, light-dark(oklch(0.875 0.05 277), oklch(0.52 0.15 285))),
      var(--hraness-foil-3, light-dark(oklch(0.92 0.05 170), oklch(0.66 0.14 175))),
      var(--hraness-foil-4, light-dark(oklch(0.95 0.045 96), oklch(0.72 0.13 100))),
      var(--hraness-foil-5, light-dark(oklch(0.9 0.05 55), oklch(0.55 0.15 45))),
      var(--hraness-foil-6, light-dark(oklch(0.875 0.06 305), oklch(0.62 0.16 305))),
      var(--hraness-foil-1, light-dark(oklch(0.89 0.065 337), oklch(0.56 0.16 340))));
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box;
  box-shadow: 0 0 0.375rem hsl(var(--hraness-foil-angle, 135deg) 55% 75% / var(--hraness-foil-halo-alpha, 0.3));
}

.hraness-foil-text,
.hraness-marketing-header__brand {
  --hraness-foil-glow: 0;
  background-image:
    radial-gradient(circle at var(--hraness-foil-x, 50%) var(--hraness-foil-y, 50%), color-mix(in srgb, white calc(48% + var(--hraness-foil-glow, 0) * 32%), transparent) 0%, transparent 56%),
    conic-gradient(from var(--hraness-foil-angle, 135deg),
      color-mix(in oklch, var(--hraness-foil-1, light-dark(oklch(0.89 0.065 337), oklch(0.56 0.16 340))) 70%, var(--hraness-foil-text-base, var(--foreground, CanvasText))),
      color-mix(in oklch, var(--hraness-foil-2, light-dark(oklch(0.875 0.05 277), oklch(0.52 0.15 285))) 70%, var(--hraness-foil-text-base, var(--foreground, CanvasText))),
      color-mix(in oklch, var(--hraness-foil-3, light-dark(oklch(0.92 0.05 170), oklch(0.66 0.14 175))) 70%, var(--hraness-foil-text-base, var(--foreground, CanvasText))),
      color-mix(in oklch, var(--hraness-foil-4, light-dark(oklch(0.95 0.045 96), oklch(0.72 0.13 100))) 70%, var(--hraness-foil-text-base, var(--foreground, CanvasText))),
      color-mix(in oklch, var(--hraness-foil-5, light-dark(oklch(0.9 0.05 55), oklch(0.55 0.15 45))) 70%, var(--hraness-foil-text-base, var(--foreground, CanvasText))),
      color-mix(in oklch, var(--hraness-foil-6, light-dark(oklch(0.875 0.06 305), oklch(0.62 0.16 305))) 70%, var(--hraness-foil-text-base, var(--foreground, CanvasText))),
      color-mix(in oklch, var(--hraness-foil-1, light-dark(oklch(0.89 0.065 337), oklch(0.56 0.16 340))) 70%, var(--hraness-foil-text-base, var(--foreground, CanvasText))));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.3rem hsl(var(--hraness-foil-angle, 135deg) 55% 75% / var(--hraness-foil-halo-alpha, 0.3)));
}

@media (hover: hover) {
  .hraness-foil:hover:not(:disabled),
  .hraness-foil-text:hover,
  .hraness-marketing-header__brand:hover,
  .hraness-marketing-action[data-emphasis="primary"]:hover:not(:disabled) {
    --hraness-foil-glow: 1;
  }
}

:where([data-theme="dark"], .dark):where(
  .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-footer,
    .hraness-marketing-hero,
  .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
  .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
  .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
  .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta,
  .hraness-marketing-proof-frame
),
:where([data-theme="dark"], .dark) :where(
  .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-footer,
    .hraness-marketing-hero,
  .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
  .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
  .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
  .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta,
  .hraness-marketing-proof-frame
) {
  --hraness-foil-1: oklch(0.56 0.16 340);
  --hraness-foil-2: oklch(0.52 0.15 285);
  --hraness-foil-3: oklch(0.66 0.14 175);
  --hraness-foil-4: oklch(0.72 0.13 100);
  --hraness-foil-5: oklch(0.55 0.15 45);
  --hraness-foil-6: oklch(0.62 0.16 305);
  --hraness-foil-halo-alpha: 0.45;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"]):not(.light)) :where(
    .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-footer,
    .hraness-marketing-hero,
    .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
    .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
    .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
    .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta,
    .hraness-marketing-proof-frame
  ) {
    --hraness-foil-1: oklch(0.56 0.16 340);
    --hraness-foil-2: oklch(0.52 0.15 285);
    --hraness-foil-3: oklch(0.66 0.14 175);
    --hraness-foil-4: oklch(0.72 0.13 100);
    --hraness-foil-5: oklch(0.55 0.15 45);
    --hraness-foil-6: oklch(0.62 0.16 305);
    --hraness-foil-halo-alpha: 0.45;
  }
}

/* Hero */

.hraness-marketing-hero {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: var(--hraness-marketing-hero-space, clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem));
}

.hraness-marketing-hero__copy {
  display: grid;
  min-inline-size: 0;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.hraness-marketing-hero[data-align="start"] .hraness-marketing-hero__copy {
  justify-items: start;
  text-align: start;
}

.hraness-marketing-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid color-mix(in oklch, var(--hraness-marketing-accent) 32%, transparent);
  border-radius: 999px;
  background: var(--hraness-marketing-accent-soft);
  color: var(--hraness-marketing-muted);
}

.hraness-marketing-hero__name {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hraness-marketing-hero__heading {
  max-inline-size: 18ch;
  font-size: var(--hraness-paper-heading-size, clamp(2.5rem, 5vw, 4.25rem));
  letter-spacing: var(--hraness-marketing-heading-tracking);
  line-height: var(--hraness-marketing-h1-leading, 1.05);
}

.hraness-marketing-hero__summary {
  max-inline-size: var(--hraness-marketing-copy-measure);
  font-size: var(--hraness-paper-summary-size, clamp(1.125rem, 1.6vw, 1.3rem));
  line-height: var(--hraness-marketing-summary-leading, 1.45);
}

.hraness-marketing-hero__example {
  max-inline-size: var(--hraness-marketing-example-measure, var(--hraness-marketing-copy-measure));
  margin-block-start: -0.35rem;
  color: var(--hraness-marketing-ink);
  font-size: 1.05rem;
}

.hraness-marketing-hero__actions {
  justify-content: center;
  margin-block-start: 0.5rem;
}

.hraness-marketing-hero[data-align="start"] .hraness-marketing-hero__actions {
  justify-content: flex-start;
}

.hraness-marketing-hero__boundary {
  max-inline-size: var(--hraness-marketing-copy-measure);
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.hraness-marketing-hero__frame {
  min-inline-size: 0;
}

/* Accent band: the hero paints edge to edge in the product accent. */
.hraness-marketing-hero[data-tone="accent"] {
  --hraness-marketing-ink: var(--hraness-marketing-accent-ink);
  --hraness-marketing-muted: color-mix(in oklch, var(--hraness-marketing-accent-ink) 78%, transparent);
  --hraness-marketing-line: color-mix(in oklch, var(--hraness-marketing-accent-ink) 22%, transparent);
  --hraness-marketing-line-strong: color-mix(in oklch, var(--hraness-marketing-accent-ink) 40%, transparent);
  --hraness-marketing-surface: color-mix(in oklch, var(--hraness-marketing-accent-ink) 12%, transparent);
  background:
    linear-gradient(color-mix(in oklch, var(--hraness-marketing-accent-ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--hraness-marketing-accent-ink) 7%, transparent) 1px, transparent 1px),
    var(--hraness-marketing-accent);
  background-size: 3.5rem 3.5rem, 3.5rem 3.5rem, auto;
  box-shadow: 0 0 0 100vmax var(--hraness-marketing-accent);
  clip-path: inset(0 -100vmax);
  color: var(--hraness-marketing-accent-ink);
}

.hraness-marketing-hero[data-tone="accent"] .hraness-marketing-hero__eyebrow {
  border-color: color-mix(in oklch, var(--hraness-marketing-accent-ink) 40%, transparent);
  background: color-mix(in oklch, var(--hraness-marketing-accent-ink) 14%, transparent);
  color: var(--hraness-marketing-accent-ink);
}

.hraness-marketing-hero[data-tone="accent"] .hraness-marketing-action[data-emphasis="primary"] {
  --hraness-foil-surface: var(--hraness-marketing-accent-ink);
  color: var(--hraness-marketing-accent);
}

.hraness-marketing-hero[data-tone="accent"] .hraness-marketing-action[data-emphasis="primary"]:hover {
  --hraness-foil-surface: color-mix(in oklch, var(--hraness-marketing-accent-ink) 90%, var(--hraness-marketing-accent));
}

.hraness-marketing-hero[data-tone="accent"] .hraness-marketing-action[data-emphasis="secondary"] {
  border-color: var(--hraness-marketing-line-strong);
  background: transparent;
  color: var(--hraness-marketing-accent-ink);
}

/* Legacy proof aside: now a light card beneath the copy. */
.hraness-marketing-proof {
  display: grid;
  min-inline-size: 0;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--hraness-marketing-rule);
  border-radius: var(--hraness-marketing-frame-radius);
  background: var(--hraness-marketing-surface);
  box-shadow: var(--hraness-marketing-shadow);
}

.hraness-marketing-proof__kicker {
  margin: 0;
}

.hraness-marketing-proof__heading {
  max-inline-size: 24ch;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

/* Ordered flow */

.hraness-marketing-flow {
  display: grid;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hraness-marketing-flow__step {
  display: grid;
  min-inline-size: 0;
  margin: 0;
  padding-block: 1rem;
  border-block-start: var(--hraness-marketing-rule);
  gap: 0.85rem;
  grid-template-columns: 2.25rem minmax(0, 1fr);
}

.hraness-marketing-flow__step:first-child {
  border-block-start: 0;
}

.hraness-marketing-flow__number {
  padding-block-start: 0.2rem;
  color: var(--hraness-marketing-accent);
  font-family: var(--hraness-marketing-mono-font);
  font-size: 0.75rem;
  font-weight: 500;
}

.hraness-marketing-flow__body {
  display: grid;
  min-inline-size: 0;
  gap: 0.4rem;
}

.hraness-marketing-flow__label,
.hraness-marketing-flow__code,
.hraness-marketing-flow__detail {
  display: block;
}

.hraness-marketing-flow__label {
  font-size: 0.95rem;
  font-weight: 600;
}

.hraness-marketing-flow__code {
  inline-size: fit-content;
  max-inline-size: 100%;
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
  background: color-mix(in oklch, var(--hraness-marketing-ink) 7%, transparent);
  color: inherit;
  font-family: var(--hraness-marketing-mono-font);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.hraness-marketing-flow__detail {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Facts and stats */

.hraness-marketing-facts,
.hraness-marketing-stats__list {
  display: grid;
  margin: 0;
  border-block: var(--hraness-marketing-rule);
  grid-template-columns: repeat(var(--hraness-marketing-fact-columns, 4), minmax(0, 1fr));
}

.hraness-marketing-facts > div,
.hraness-marketing-stats__list > div {
  min-inline-size: 0;
  padding: 1.25rem clamp(0.8rem, 2vw, 1.5rem);
}

.hraness-marketing-facts > div + div,
.hraness-marketing-stats__list > div + div {
  border-inline-start: var(--hraness-marketing-rule);
}

.hraness-marketing-facts dt,
.hraness-marketing-stats dt {
  margin-block-end: 0.4rem;
}

.hraness-marketing-facts dd,
.hraness-marketing-stats dd {
  margin: 0;
}

.hraness-marketing-facts :where(strong, span),
.hraness-marketing-stats :where(strong, span) {
  display: block;
}

.hraness-marketing-facts strong {
  font-size: 1.05rem;
  font-weight: 600;
}

.hraness-marketing-stats strong {
  font-family: var(--hraness-marketing-heading-font);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hraness-marketing-facts span,
.hraness-marketing-stats span {
  margin-block-start: 0.3rem;
  color: var(--hraness-marketing-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.hraness-marketing-stats {
  display: grid;
  gap: 0.75rem;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.hraness-marketing-stats__source {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 0.85rem;
}

/* Pillars */

.hraness-marketing-pillars {
  display: grid;
  margin-block: 0;
  padding-block: 0;
  border-block: var(--hraness-marketing-rule);
  grid-template-columns: repeat(var(--hraness-marketing-pillar-columns, 3), minmax(0, 1fr));
}

.hraness-marketing-pillars > div {
  display: grid;
  min-inline-size: 0;
  align-content: start;
  gap: 0.45rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
}

.hraness-marketing-pillars > div + div {
  border-inline-start: var(--hraness-marketing-rule);
}

.hraness-marketing-pillars dt {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hraness-marketing-pillars dd {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Product frame */

.hraness-marketing-proof-frame {
  min-inline-size: 0;
  margin: 0;
  overflow: clip;
  border: var(--hraness-marketing-rule);
  border-radius: var(--hraness-marketing-frame-radius);
  background: var(--hraness-marketing-surface);
  box-shadow: var(--hraness-marketing-shadow);
}

.hraness-marketing-proof-frame__chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  background-image: var(--hraness-marketing-frame-chrome, none);
  box-shadow: inset 0 1px 0 #ffffff1f;
  border-block-end: var(--hraness-marketing-rule);
  color: var(--hraness-marketing-muted);
  font-size: 0.78rem;
}

.hraness-marketing-proof-frame__lights {
  display: inline-flex;
  gap: 0.35rem;
}

.hraness-marketing-proof-frame__lights span {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--hraness-marketing-ink) 18%, transparent);
}

.hraness-marketing-proof-frame__title {
  flex: 1 1 auto;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hraness-marketing-proof-frame__content {
  min-inline-size: 0;
  overflow: auto;
}

.hraness-marketing-proof-frame__content > :where(img, video) {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.hraness-marketing-proof-frame__content > :where(pre) {
  border-radius: 0;
}

.hraness-marketing-proof-frame__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.75rem 0.95rem;
  border-block-start: var(--hraness-marketing-rule);
  color: var(--hraness-marketing-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.hraness-marketing-proof-frame__caption small {
  font-size: 0.78rem;
}

/* Install */

.hraness-marketing-install {
  display: grid;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: var(--hraness-marketing-rule);
  border-radius: var(--hraness-marketing-frame-radius);
  background: var(--hraness-marketing-surface);
  gap: clamp(1.25rem, 4vw, 3rem);
  grid-template-columns: minmax(12rem, 0.6fr) minmax(0, 1.4fr);
  scroll-margin-block-start: 5rem;
}

.hraness-marketing-page > .hraness-marketing-install {
  inline-size: min(100% - 2 * var(--hraness-marketing-gutter), var(--hraness-marketing-measure));
  padding-inline: clamp(1.5rem, 4vw, 2.5rem);
}

.hraness-marketing-install__heading-group {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.hraness-marketing-install__heading {
  max-inline-size: 14ch;
  font-size: var(--hraness-marketing-h2-size, clamp(1.5rem, 2.6vw, 2rem));
}

.hraness-marketing-install__commands,
.hraness-marketing-section__body {
  min-inline-size: 0;
}

.hraness-marketing-install__commands {
  display: grid;
  gap: 0.75rem;
}

/* Narrative section */

.hraness-marketing-section,
.hraness-marketing-primitives,
.hraness-marketing-interfaces,
.hraness-marketing-trust,
.hraness-marketing-quotes,
.hraness-marketing-pricing,
.hraness-marketing-questions,
.hraness-marketing-maker {
  padding-block: var(--hraness-marketing-section-space);
  border-block-start: var(--hraness-marketing-rule);
  scroll-margin-block-start: 4rem;
}

.hraness-marketing-section,
.hraness-marketing-interfaces,
.hraness-marketing-trust,
.hraness-marketing-questions {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hraness-marketing-section__heading-group,
.hraness-marketing-primitives__header,
.hraness-marketing-interfaces__header,
.hraness-marketing-trust__header,
.hraness-marketing-quotes__header,
.hraness-marketing-pricing__header,
.hraness-marketing-questions__header,
.hraness-marketing-maker__header {
  display: grid;
  max-inline-size: var(--hraness-marketing-copy-measure);
  gap: 0.75rem;
}

.hraness-marketing-section__body {
  display: grid;
  gap: 1rem;
}

.hraness-marketing-section__body > :where(p) {
  max-inline-size: var(--hraness-marketing-prose-measure);
  margin: 0;
}

.hraness-marketing-section__body > :first-child {
  margin-block-start: 0;
}

.hraness-marketing-section__body > :last-child {
  margin-block-end: 0;
}

.hraness-marketing-section[data-layout="split"],
.hraness-marketing-section[data-layout="split-reverse"] {
  align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.hraness-marketing-section[data-layout="split-reverse"] > .hraness-marketing-section__heading-group {
  order: 2;
}

.hraness-marketing-section[data-layout="split"] > .hraness-marketing-section__heading-group,
.hraness-marketing-section[data-layout="split-reverse"] > .hraness-marketing-section__heading-group {
  max-inline-size: none;
}

/* Primitives: numbered building blocks */

.hraness-marketing-primitives {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hraness-marketing-primitives__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.hraness-marketing-primitive {
  display: grid;
  min-inline-size: 0;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: var(--hraness-marketing-rule);
  border-radius: var(--hraness-marketing-frame-radius);
  background: var(--hraness-marketing-surface);
}

.hraness-marketing-primitive__number {
  color: var(--hraness-marketing-accent);
  font-family: var(--hraness-marketing-mono-font);
  font-size: 0.78rem;
  font-weight: 500;
}

.hraness-marketing-primitive__heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hraness-marketing-primitive p {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.hraness-marketing-primitive > :where(pre, figure) {
  margin-block-start: 0.5rem;
}

/* Interfaces and trust: cards */

.hraness-marketing-interface-grid,
.hraness-marketing-trust-grid {
  display: grid;
  margin: 0;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.hraness-marketing-interface,
.hraness-marketing-trust-item {
  display: grid;
  min-inline-size: 0;
  align-content: start;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: var(--hraness-marketing-rule);
  border-radius: var(--hraness-marketing-frame-radius);
  background: var(--hraness-marketing-surface);
}

.hraness-marketing-interface :where(.hraness-marketing-interface__heading, p),
.hraness-marketing-trust-item :where(dt, dd) {
  margin: 0;
}

.hraness-marketing-interface__heading,
.hraness-marketing-trust-item dt {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hraness-marketing-interface p,
.hraness-marketing-trust-item dd {
  color: var(--hraness-marketing-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.hraness-marketing-interface pre {
  margin-block-start: 0.5rem;
}

/* Quotes */

.hraness-marketing-quotes {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hraness-marketing-quote-grid {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.hraness-marketing-quote {
  display: grid;
  min-inline-size: 0;
  align-content: space-between;
  gap: 1.25rem;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: var(--hraness-marketing-rule);
  border-radius: var(--hraness-marketing-frame-radius);
  background: var(--hraness-marketing-surface);
}

.hraness-marketing-quote blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.hraness-marketing-quote blockquote p {
  margin: 0;
}

.hraness-marketing-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  color: var(--hraness-marketing-muted);
  font-size: 0.88rem;
}

.hraness-marketing-quote figcaption strong {
  color: var(--hraness-marketing-ink);
  font-weight: 600;
}

.hraness-marketing-quote figcaption a {
  color: inherit;
  text-decoration: none;
}

.hraness-marketing-quote figcaption a:hover {
  text-decoration: underline;
}

/* Pricing */

.hraness-marketing-pricing {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hraness-marketing-plan-grid {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.hraness-marketing-plan {
  display: grid;
  min-inline-size: 0;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: var(--hraness-marketing-rule);
  border-radius: var(--hraness-marketing-frame-radius);
  background: var(--hraness-marketing-surface);
}

.hraness-marketing-plan[data-emphasis="primary"] {
  border-color: color-mix(in oklch, var(--hraness-marketing-accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--hraness-marketing-accent) 35%, transparent);
}

.hraness-marketing-plan__name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.hraness-marketing-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
}

.hraness-marketing-plan__price strong {
  font-family: var(--hraness-marketing-heading-font);
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hraness-marketing-plan__price span {
  color: var(--hraness-marketing-muted);
  font-size: 0.95rem;
}

.hraness-marketing-plan__summary {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 0.95rem;
}

.hraness-marketing-plan__features {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.hraness-marketing-plan__features li {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1rem minmax(0, 1fr);
}

.hraness-marketing-plan__features li::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  margin-block-start: 0.2rem;
  border-radius: 999px;
  background:
    linear-gradient(var(--hraness-marketing-accent), var(--hraness-marketing-accent)) center / 0.4rem 0.4rem no-repeat,
    var(--hraness-marketing-accent-soft);
}

.hraness-marketing-plan__note {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 0.85rem;
}

.hraness-marketing-plan .hraness-marketing-action {
  justify-self: start;
}

/* Questions */

.hraness-marketing-question-list {
  display: grid;
}

.hraness-marketing-question {
  border-block-start: var(--hraness-marketing-rule);
}

.hraness-marketing-question:last-child {
  border-block-end: var(--hraness-marketing-rule);
}

.hraness-marketing-question summary {
  display: flex;
  min-block-size: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  color: var(--hraness-marketing-ink);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 500;
  list-style: none;
}

.hraness-marketing-question summary::-webkit-details-marker {
  display: none;
}

.hraness-marketing-question summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--hraness-marketing-muted);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.hraness-marketing-question[open] summary::after {
  transform: rotate(45deg);
}

.hraness-marketing-question summary:focus-visible {
  outline: 2px solid var(--hraness-marketing-accent);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.hraness-marketing-question__answer {
  max-inline-size: var(--hraness-marketing-prose-measure);
  padding-block: 0 1.5rem;
  color: var(--hraness-marketing-muted);
  line-height: 1.6;
}

.hraness-marketing-question__answer > :first-child {
  margin-block-start: 0;
}

.hraness-marketing-question__answer > :last-child {
  margin-block-end: 0;
}

/* Maker */

.hraness-marketing-maker {
  display: grid;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.hraness-marketing-maker__portrait {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hraness-marketing-accent-soft);
}

.hraness-marketing-maker__portrait :where(img, svg) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hraness-marketing-maker__body {
  display: grid;
  min-inline-size: 0;
  gap: 1rem;
}

.hraness-marketing-maker__body > p {
  max-inline-size: var(--hraness-marketing-prose-measure);
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.hraness-marketing-maker__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Closing call to action */

.hraness-marketing-cta {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  padding-block: var(--hraness-marketing-section-space);
  border-block-start: var(--hraness-marketing-rule);
  text-align: center;
}

.hraness-marketing-cta__heading {
  max-inline-size: 20ch;
  font-size: var(--hraness-paper-section-heading-size, clamp(2rem, 4vw, 3.25rem));
  letter-spacing: var(--hraness-marketing-h2-tracking, var(--hraness-marketing-heading-tracking));
  line-height: var(--hraness-marketing-h2-leading, 1.08);
}

.hraness-marketing-cta__summary {
  max-inline-size: var(--hraness-marketing-copy-measure);
}

.hraness-marketing-cta__actions {
  justify-content: center;
  margin-block-start: 0.5rem;
}

.hraness-marketing-cta__footnote {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 0.9rem;
}

.hraness-marketing-cta[data-tone="accent"] {
  --hraness-marketing-ink: var(--hraness-marketing-accent-ink);
  --hraness-marketing-muted: color-mix(in oklch, var(--hraness-marketing-accent-ink) 78%, transparent);
  --hraness-marketing-line-strong: color-mix(in oklch, var(--hraness-marketing-accent-ink) 40%, transparent);
  --hraness-marketing-surface: transparent;
  border-block-start: 0;
  background: var(--hraness-marketing-accent);
  box-shadow: 0 0 0 100vmax var(--hraness-marketing-accent);
  clip-path: inset(0 -100vmax);
  color: var(--hraness-marketing-accent-ink);
}

.hraness-marketing-cta[data-tone="accent"] .hraness-marketing-action[data-emphasis="primary"] {
  --hraness-foil-surface: var(--hraness-marketing-accent-ink);
  color: var(--hraness-marketing-accent);
}

.hraness-marketing-cta[data-tone="accent"] .hraness-marketing-action[data-emphasis="secondary"] {
  background: transparent;
  color: var(--hraness-marketing-accent-ink);
}

/* Responsive */

@media (max-width: 48rem) {
  .hraness-marketing-header__inner {
    flex-wrap: wrap;
    padding-block: 0.6rem;
  }

  .hraness-marketing-header__nav {
    order: 3;
    inline-size: 100%;
    gap: 0.15rem 1rem;
  }

  .hraness-marketing-hero__heading {
    max-inline-size: 14ch;
  }

  .hraness-marketing-install,
  .hraness-marketing-section[data-layout="split"],
  .hraness-marketing-section[data-layout="split-reverse"],
  .hraness-marketing-maker {
    grid-template-columns: minmax(0, 1fr);
  }

  .hraness-marketing-section[data-layout="split-reverse"] > .hraness-marketing-section__heading-group {
    order: 0;
  }

  .hraness-marketing-facts,
  .hraness-marketing-stats__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hraness-marketing-facts > div:nth-child(odd),
  .hraness-marketing-stats__list > div:nth-child(odd) {
    border-inline-start: 0;
  }

  .hraness-marketing-facts > div:nth-child(n + 3),
  .hraness-marketing-stats__list > div:nth-child(n + 3) {
    border-block-start: var(--hraness-marketing-rule);
  }

  .hraness-marketing-pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .hraness-marketing-pillars > div + div {
    border-inline-start: 0;
    border-block-start: var(--hraness-marketing-rule);
  }

  .hraness-marketing-install__heading {
    max-inline-size: none;
  }
}

@media (pointer: coarse) {
  .hraness-marketing-action,
  .hraness-marketing-question summary {
    min-block-size: 3rem;
  }
}

@media (forced-colors: active) {
  .hraness-marketing-header,
  .hraness-marketing-hero[data-tone="accent"],
  .hraness-marketing-cta[data-tone="accent"],
  .hraness-marketing-proof,
  .hraness-marketing-proof-frame,
  .hraness-marketing-install,
  .hraness-marketing-primitive,
  .hraness-marketing-interface,
  .hraness-marketing-trust-item,
  .hraness-marketing-quote,
  .hraness-marketing-plan {
    border: 1px solid CanvasText;
    background: Canvas;
    box-shadow: none;
    color: CanvasText;
  }

  .hraness-marketing-action,
  .hraness-marketing-hero__eyebrow {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .hraness-marketing-action[data-emphasis="primary"],
  .hraness-foil {
    border-color: ButtonText;
    background-image: none;
    box-shadow: none;
  }

  .hraness-marketing-action[data-emphasis="primary"] {
    background: CanvasText;
    color: Canvas;
  }

  .hraness-marketing-hero[data-tone="accent"] .hraness-marketing-action[data-emphasis="primary"],
  .hraness-marketing-cta[data-tone="accent"] .hraness-marketing-action[data-emphasis="primary"] {
    background: var(--hraness-marketing-accent-ink);
    color: var(--hraness-marketing-accent);
  }

  .hraness-foil {
    background-color: Canvas;
    color: CanvasText;
  }

  .hraness-foil-text,
  .hraness-marketing-header__brand {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    filter: none;
  }
}

}

@layer base, components;
@layer components.hraness-site-footer.legacy, components.hraness-site-footer.priority1, components.hraness-site-footer.priority2, components.hraness-site-footer.priority3, components.hraness-site-footer.priority4, components.hraness-site-footer.priority5;
@layer components.hraness-site-footer.priority2 {
  .x1pmbb8p {
    grid-area: brand;
  }

  .xxwd7sb {
    grid-area: label;
  }

  .xt33hwp {
    grid-area: links;
  }

  .x1qaspin {
    grid-area: mailing;
  }

  .x2ga2k1 {
    grid-area: support;
  }

  .xkdpibf {
    margin: -1px;
  }

  .x1ghz6dp {
    margin: 0;
  }

  .x1717udv {
    padding: 0;
  }
}

@layer components.hraness-site-footer.priority3 {
  .x1y4qj14 {
    background-position: 0 0;
  }

  .x1eror2x {
    background-position: 100%;
  }

  .x1r7ld26 {
    border-color: currentColor;
  }

  .x9r1u3d {
    border-color: #0000;
  }

  .x11ngh50 {
    border-color: var(--hraness-site-footer-line);
  }

  .x6i6fhv {
    border-radius: .375rem;
  }

  .x116uinm {
    border-radius: .5rem;
  }

  .x1e6avla {
    border-radius: 999px;
  }

  .xng3xce {
    border-style: none;
  }

  .x1y0btm7 {
    border-style: solid;
  }

  .xc342km {
    border-width: 0;
  }

  .xmkeg23 {
    border-width: 1px;
  }

  .xdh2fpr {
    border-width: 2px;
  }

  .x1aazh3f {
    font-variant: inherit;
  }

  .x1enigpx {
    gap: .125rem;
  }

  .x182hbjg {
    grid-template-areas: "brand links";
  }

  .x1m6ayzh {
    grid-template-areas: "brand mailing links";
  }

  .x1y8t5ps {
    grid-template-areas: "brand mailing support links";
  }

  .x7p9kbz {
    grid-template-areas: "brand support links";
  }

  .xrbltni {
    grid-template-areas: "label";
  }

  .x17y0mx6 {
    inset-inline: 0;
  }

  .x82nc2q {
    margin-inline: .35rem;
  }

  .xb3r6kr {
    overflow: hidden;
  }

  .x1267ecw {
    padding-block: .35rem;
  }

  .x18g2hj5 {
    padding-block: .5rem;
  }

  .x13eudtd {
    padding-block: .625rem;
  }

  .x97vtpp {
    padding-inline: .5rem;
  }

  .xvpgqt4 {
    padding-inline: .625rem;
  }

  .x1ryrjj2 {
    padding-inline: .75rem;
  }

  .x1hl2dhg {
    text-decoration: none;
  }

  .x1xggt0h.x1xggt0h:where(.x1gmlqhs[open] *) {
    border-color: var(--hraness-site-footer-line);
  }

  @media (forced-colors: active) {
    .x1ylmb6m.x1ylmb6m {
      border-color: buttontext;
    }
  }

  @media (width >= 47.5rem) {
    .x196kgno.x196kgno {
      grid-template-areas: "brand . consent links";
    }

    .x12d2mci.x12d2mci {
      grid-template-areas: "brand mailing . consent links";
    }

    .x11qbbop.x11qbbop {
      grid-template-areas: "brand mailing support . consent links";
    }

    .xa4jtz2.xa4jtz2 {
      grid-template-areas: "brand support . consent links";
    }
  }

  @supports selector(::details-content) {
    @media (width >= 47.5rem) {
      .x1pdywdg.x1pdywdg.x1pdywdg {
        border-width: 0;
      }

      .xv2k6yj.xv2k6yj.xv2k6yj {
        padding-block: 0;
      }

      .xyo0no0.xyo0no0.xyo0no0 {
        padding-inline: 0;
      }
    }
  }

  @media (hover: hover) {
    .xwt2121.xwt2121:hover {
      background-position: 0 0;
    }

    .x4ohgrr.x4ohgrr:hover {
      text-decoration: underline;
    }
  }
}

@layer components.hraness-site-footer.priority4 {
  .x1urst0s {
    -webkit-text-fill-color: currentColor;
  }

  .xc26acl {
    align-content: center;
  }

  .x6s0dn4 {
    align-items: center;
  }

  .xamitd3 {
    align-self: center;
  }

  .x1c74tu6 {
    animation-duration: 2s;
  }

  .xa4qsjk {
    animation-iteration-count: infinite;
  }

  .x1esw782 {
    animation-timing-function: linear;
  }

  .x1fdtg7e {
    background-attachment: scroll;
  }

  .x1u7o2vf {
    background-clip: border-box;
  }

  .x188zq58 {
    background-clip: padding-box, border-box, border-box;
  }

  .x1ta4xzc {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .xjbqb8w {
    background-color: #0000;
  }

  .x1ujht2g {
    background-color: var(--hraness-site-footer-action-background);
  }

  .x1hhhz6w {
    background-color: var(--hraness-site-footer-background);
  }

  .xo5clpu {
    background-color: var(--hraness-site-footer-field-background);
  }

  .x1bvqrnj {
    background-color: var(--hraness-site-footer-holo-surface, var(--hraness-foil-surface, var(--hraness-site-footer-background)));
  }

  .xc1emh9 {
    background-image: linear-gradient(var(--hraness-site-footer-holo-surface, var(--hraness-foil-surface, var(--hraness-site-footer-background))),var(--hraness-site-footer-holo-surface, var(--hraness-foil-surface, var(--hraness-site-footer-background)))),radial-gradient(circle at var(--hraness-foil-x, 50%) var(--hraness-foil-y, 50%),color-mix(in srgb,white calc(64% + var(--hraness-foil-glow, 0) * 28%),transparent) 0%,transparent 46%),conic-gradient(from var(--hraness-foil-angle, 135deg),var(--_hraness-foil-1),var(--_hraness-foil-2),var(--_hraness-foil-3),var(--_hraness-foil-4),var(--_hraness-foil-5),var(--_hraness-foil-6),var(--_hraness-foil-1));
  }

  .x18o3ruo {
    background-image: none;
  }

  .x1gqfdwy {
    background-origin: border-box;
  }

  .x12koezg {
    background-origin: padding-box;
  }

  .xiy17q3 {
    background-repeat: no-repeat;
  }

  .x182nak8 {
    background-repeat: repeat;
  }

  .x1cwfr1t {
    background-size: auto;
  }

  .x18g1bdp {
    background-size: calc(200% + var(--hraness-site-footer-shimmer-spread) * 2) 100%;
  }

  .x1wugil3 {
    block-size: 1.375rem;
  }

  .xuxy95z {
    block-size: 100%;
  }

  .xpoyz9m {
    block-size: 1px;
  }

  .x38bysi {
    block-size: 1rem;
  }

  .xzlj3eo {
    block-size: auto;
  }

  .xlashs9 {
    block-size: var(--hraness-site-footer-control-block-size);
  }

  .x1dmgvpn {
    block-size: var(--hraness-site-footer-form-block-size);
  }

  .x1bxml6c {
    block-size: var(--hraness-site-footer-social-target);
  }

  .x1gz0dqr {
    border-block-start-color: #0000;
  }

  .x3so8kt {
    border-block-start-style: solid;
  }

  .x1b1eqt9 {
    border-block-start-width: 1px;
  }

  .x5g0mfp {
    border-end-end-radius: .375rem;
  }

  .x16uus16 {
    border-end-end-radius: 0;
  }

  .xxahmv3 {
    border-end-start-radius: .375rem;
  }

  .xbiv7yw {
    border-end-start-radius: 0;
  }

  .x1e53mt7 {
    border-image-outset: 0;
  }

  .xgkqhyc {
    border-image-repeat: stretch;
  }

  .x1jleocg {
    border-image-slice: 100%;
  }

  .x18sabzy {
    border-image-source: none;
  }

  .x1pjjote {
    border-image-width: 1;
  }

  .xjp8vmc {
    border-start-end-radius: .375rem;
  }

  .x1ga7v0g {
    border-start-end-radius: 0;
  }

  .x1olvaoz {
    border-start-start-radius: .375rem;
  }

  .x15mokao {
    border-start-start-radius: 0;
  }

  .xa67z0c {
    box-shadow: 0 0 .375rem hsl(var(--hraness-foil-angle, 135deg) 55% 75% / var(--_hraness-foil-halo));
  }

  .x9f619 {
    box-sizing: border-box;
  }

  .x1hyvwdk {
    clip-path: inset(50%);
  }

  .xeh89do {
    clip: rect(0 0 0 0);
  }

  .x1heor9g {
    color: inherit;
  }

  .xaazplj {
    color: var(--hraness-site-footer-action-foreground);
  }

  .x1g4142m {
    color: var(--hraness-site-footer-foreground);
  }

  .xj5idha {
    color: var(--hraness-site-footer-muted);
  }

  .x1d3i0y6 {
    column-gap: .375rem;
  }

  .x1n78d84 {
    column-gap: clamp(.5rem, 2vw, 1rem);
  }

  .x12e8u3k {
    container-name: hraness-footer;
  }

  .xgc5ccc {
    container-name: hraness-socials;
  }

  .x12h1iku {
    container-type: inline-size;
  }

  .x1ypdohk {
    cursor: pointer;
  }

  .x1lliihq {
    display: block;
  }

  .x78zum5 {
    display: flex;
  }

  .xrvj5dj {
    display: grid;
  }

  .x3nfvp2 {
    display: inline-flex;
  }

  .xwz0xwf {
    display: inline-grid;
  }

  .xt0psk2 {
    display: inline;
  }

  .x1s85apg {
    display: none;
  }

  .xdl72j9 {
    flex-basis: auto;
  }

  .x4hbtdw {
    flex-basis: var(--hraness-site-footer-social-target);
  }

  .x1c4vz4f {
    flex-grow: 0;
  }

  .x1iyjqo2 {
    flex-grow: 1;
  }

  .x2lah0s {
    flex-shrink: 0;
  }

  .xs83m0k {
    flex-shrink: 1;
  }

  .xjb2p0i {
    font-family: inherit;
  }

  .xprmc4t {
    font-family: var(--font-sans, ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  }

  .x10rt0pk {
    font-feature-settings: inherit;
  }

  .xvmqkbn {
    font-kerning: inherit;
  }

  .x1rcybi7 {
    font-language-override: inherit;
  }

  .x61gc8y {
    font-optical-sizing: inherit;
  }

  .xd4aj15 {
    font-size-adjust: inherit;
  }

  .xboafo0 {
    font-size: .75rem;
  }

  .x1dcheo9 {
    font-size: .8125rem;
  }

  .xkpwil5 {
    font-size: .875rem;
  }

  .x1qlqyl8 {
    font-size: inherit;
  }

  .x1xh6y1q {
    font-stretch: inherit;
  }

  .x1t35e8 {
    font-style: inherit;
  }

  .xkyhvkk {
    font-variation-settings: inherit;
  }

  .xk50ysn {
    font-weight: 500;
  }

  .xh88oxj {
    font-weight: 550;
  }

  .x19s9jnd {
    font-weight: 650;
  }

  .x1pd3egz {
    font-weight: inherit;
  }

  .xx1abn8 {
    grid-column-end: -1;
  }

  .xcrlgei {
    grid-column-start: 1;
  }

  .x170cel8 {
    grid-template-columns: auto auto minmax(var(--hraness-site-footer-social-target),1fr);
  }

  .x1rkzygb {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .x186f4cn {
    grid-template-columns: auto minmax(0,max-content) auto minmax(var(--hraness-site-footer-social-target),1fr);
  }

  .xo69rmz {
    grid-template-columns: auto minmax(0,max-content) minmax(var(--hraness-site-footer-social-target),1fr);
  }

  .x42z6zh {
    grid-template-rows: var(--hraness-site-footer-content-block-size);
  }

  .xv7uhgh {
    grid-template-rows: var(--hraness-site-footer-control-block-size);
  }

  .xif76xs {
    inline-size: 1.375rem;
  }

  .xiuoait {
    inline-size: 100%;
  }

  .xi8173g {
    inline-size: 1px;
  }

  .x1milg1j {
    inline-size: 1rem;
  }

  .x6n8wx1 {
    inline-size: fit-content;
  }

  .xgybh9h {
    inline-size: min(100%, 18rem);
  }

  .x146urod {
    inline-size: min(18rem, 100vw - 2rem);
  }

  .xzm6ek {
    inline-size: min(20rem, 100vw - 2rem);
  }

  .x175cv4s {
    inline-size: var(--hraness-site-footer-social-target);
  }

  .xuufnwz {
    inset-block-end: 0;
  }

  .xr04doy {
    inset-block-end: calc(100% + .375rem);
  }

  .x1smivkc {
    inset-block-end: calc(100% + .5rem);
  }

  .x1byf6of {
    inset-block-end: calc(100% + .75rem);
  }

  .x3ppr4w {
    inset-block-end: calc(100% + var(--hraness-site-footer-mailing-overlay-offset) + var(--hraness-site-footer-row-gap));
  }

  .xtijo5x {
    inset-inline-end: 0;
  }

  .x1fmyei2 {
    inset-inline-end: 1rem;
  }

  .xe89of6 {
    inset-inline-start: 1rem;
  }

  .xl56j7k {
    justify-content: center;
  }

  .x13a6bvl {
    justify-content: flex-end;
  }

  .x1o2pa38 {
    justify-items: center;
  }

  .x1qab1bc {
    justify-self: end;
  }

  .x130jcwj {
    letter-spacing: -.018em;
  }

  .x1i21sxh {
    letter-spacing: normal;
  }

  .x132q4wb {
    line-height: 1.25;
  }

  .xfrs9s4 {
    line-height: 1.45;
  }

  .xo5v014 {
    line-height: 1;
  }

  .x15bjb6t {
    line-height: inherit;
  }

  .xnbnhf8 {
    list-style-image: none;
  }

  .x43c9pm {
    list-style-position: outside;
  }

  .x3ct3a4 {
    list-style-type: none;
  }

  .xe9ewy2 {
    margin-inline-start: -2px;
  }

  .x1lziwak {
    margin-inline-start: 0;
  }

  .xvc5jky {
    margin-inline-start: auto;
  }

  .xgyk9h7 {
    max-inline-size: 100%;
  }

  .xmk4v7v {
    max-inline-size: 12rem;
  }

  .x1j2h1tb {
    max-inline-size: 55%;
  }

  .x1ljtl1n {
    max-inline-size: calc(100vw - 2rem);
  }

  .x1tec7hu {
    max-inline-size: none;
  }

  .x159srwy {
    min-block-size: 0;
  }

  .x5vl0wm {
    min-block-size: var(--hraness-site-footer-bar-block-size);
  }

  .xeuuy2l {
    min-block-size: var(--hraness-site-footer-control-block-size);
  }

  .x3c45ou {
    min-block-size: var(--hraness-site-footer-status-block-size);
  }

  .xesnm00 {
    min-inline-size: 0;
  }

  .xart1r9 {
    min-inline-size: var(--hraness-site-footer-control-block-size);
  }

  .xg01cxk {
    opacity: 0;
  }

  .x1hc1fzr {
    opacity: 1;
  }

  .xj0a0fe {
    overflow-wrap: anywhere;
  }

  .xpcvst1 {
    padding-block-end: calc(var(--hraness-site-footer-padding-block) + env(safe-area-inset-bottom, 0px));
  }

  .x1bhgv95 {
    padding-block-start: var(--hraness-site-footer-padding-block);
  }

  .xs8f16d {
    padding-inline-end: max(clamp(1rem,4vw,2rem),env(safe-area-inset-right));
  }

  .x1i0wikq {
    padding-inline-start: max(clamp(1rem,4vw,2rem),env(safe-area-inset-left));
  }

  .x47corl {
    pointer-events: none;
  }

  .x10l6tqk {
    position: absolute;
  }

  .xixxii4 {
    position: fixed;
  }

  .x1n2onr6 {
    position: relative;
  }

  .x1uhb9sk {
    position: static;
  }

  .x1lfezxm {
    row-gap: var(--hraness-site-footer-row-gap);
  }

  .x2b8uid {
    text-align: center;
  }

  .xlyipyv {
    text-overflow: ellipsis;
  }

  .xlshs6z {
    visibility: hidden;
  }

  .xnpuxes {
    visibility: visible;
  }

  .xeaf4i8 {
    white-space: normal;
  }

  .xuxw1ft {
    white-space: nowrap;
  }

  .xhtitgo {
    z-index: 2;
  }

  .xzkaem6 {
    z-index: 3;
  }

  .xf5e64p {
    z-index: 40;
  }

  .xwi9c3o.xwi9c3o:where(.x1gmlqhs[open] *) {
    background-image: none;
  }

  .xeygwf3.xeygwf3:where(.x1gmlqhs[open] *) {
    box-shadow: none;
  }

  .x1rhhl84.x1rhhl84:where(.x1gmlqhs[open] *) {
    color: var(--hraness-site-footer-muted);
  }

  .xxuwnm0:focus-visible {
    outline-color: var(--hraness-site-footer-focus);
  }

  .xhfxdjs:focus-visible {
    outline-offset: -3px;
  }

  .xj3ae5l:focus-visible {
    outline-offset: 3px;
  }

  .x9v5kkp:focus-visible {
    outline-style: solid;
  }

  .x784prv:focus-visible {
    outline-width: 2px;
  }

  .x12yxz85.x12yxz85:where(.x1gmlqhs[open] *) {
    visibility: hidden;
  }

  .x16dnoq8.x16dnoq8:where(.x1gmlqhs[open] *) {
    visibility: visible;
  }

  .xjb0foi:disabled {
    cursor: wait;
  }

  .xo3u330:disabled {
    opacity: .62;
  }

  @media (forced-colors: active) {
    .x1g58opa.x1g58opa {
      -webkit-text-fill-color: currentColor;
    }
  }

  @media (prefers-reduced-motion: no-preference) and (not (forced-colors: active)) {
    .x1wouot0.x1wouot0 {
      -webkit-text-fill-color: transparent;
    }
  }

  @media (forced-colors: active) {
    .xal2be3.xal2be3 {
      animation-name: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) and (not (forced-colors: active)) {
    .x1n2piig.x1n2piig {
      animation-name: x3k0bqv-B;
    }
  }

  @media (forced-colors: active) {
    .x1tt9vl1.x1tt9vl1 {
      background-color: buttontext;
    }

    .x9yvj25.x9yvj25 {
      background-color: canvas;
    }
  }

  @media (prefers-reduced-motion: no-preference) and (not (forced-colors: active)) {
    .x1hhrnal.x1hhrnal {
      background-image: linear-gradient(110deg,currentColor calc(50% - var(--hraness-site-footer-shimmer-spread)),color-mix(in srgb,currentColor 20%,transparent) 50%,currentColor calc(50% + var(--hraness-site-footer-shimmer-spread)));
    }
  }

  @media (forced-colors: active) {
    .xhobzj1.xhobzj1 {
      background-image: none;
    }

    .x1np48w9.x1np48w9 {
      border-block-start-color: buttontext;
    }

    .xwaqzdf.xwaqzdf {
      box-shadow: none;
    }

    .x1q5838n.x1q5838n {
      color: buttonface;
    }
  }

  @media (width >= 47.5rem) {
    .x7odbza.x7odbza {
      font-size: .8125rem;
    }
  }

  @media (width <= 47.499rem), (pointer: coarse) {
    .xgbju11.xgbju11 {
      font-size: max(1rem, 16px);
    }
  }

  @media (width >= 47.5rem) {
    .xr0yb7.xr0yb7 {
      grid-column-end: consent;
    }

    .xax01ff.xax01ff {
      grid-column-start: consent;
    }

    .x1qh7fzj.x1qh7fzj {
      grid-row-end: consent;
    }

    .x1i433cm.x1i433cm {
      grid-row-start: consent;
    }

    .x1yi829s.x1yi829s {
      grid-template-columns: auto auto minmax(0,1fr) auto minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .x1qs5i8y.x1qs5i8y {
      grid-template-columns: auto minmax(0,1fr) auto minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .xzi2blw.xzi2blw {
      grid-template-columns: auto minmax(0,max-content) auto minmax(0,1fr) auto minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .x1t3gk10.x1t3gk10 {
      grid-template-columns: auto minmax(0,max-content) minmax(0,1fr) auto minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .xjnp55e.xjnp55e {
      grid-template-columns: auto minmax(10rem,18rem) auto minmax(0,1fr) auto minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .xjgecxr.xjgecxr {
      grid-template-columns: auto minmax(10rem,18rem) minmax(0,1fr) auto minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .x1cd001l.x1cd001l {
      inset-block-end: auto;
    }

    .x12aoker.x12aoker {
      inset-block-end: calc(100% + var(--hraness-site-footer-padding-block) + .375rem);
    }

    .x1vbotui.x1vbotui {
      inset-inline-start: 0;
    }

    .x3jboi5.x3jboi5 {
      max-inline-size: 20rem;
    }

    .x1nmvtcz.x1nmvtcz {
      position: relative;
    }

    .x18obxus.x18obxus {
      position: static;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .x7ctuma.x7ctuma {
      transition-delay: 0s;
    }

    .x1ntgrh1.x1ntgrh1 {
      transition-duration: .12s;
    }

    .x17shmjf.x17shmjf {
      transition-duration: .2s;
    }

    .x105zyf9.x105zyf9 {
      transition-property: color, background-color, opacity;
    }

    .x1xje8t6.x1xje8t6 {
      transition-property: opacity, visibility;
    }

    .x2nlg2u.x2nlg2u {
      transition-timing-function: ease-out;
    }

    .xma2t0n.xma2t0n {
      transition-timing-function: ease;
    }
  }

  @supports selector(::details-content) {
    @media (width >= 47.5rem) {
      .xpbngvy.xpbngvy.xpbngvy {
        display: block;
      }

      .xb0i1br.xb0i1br.xb0i1br {
        display: none;
      }

      .x9uf5pp.x9uf5pp.x9uf5pp {
        inline-size: 100%;
      }

      .xe6w1w2.xe6w1w2.xe6w1w2 {
        position: static;
      }
    }
  }

  @media (scripting: enabled) {
    .xtekp7u.xtekp7u.xtekp7u:where(.x12mkk0b[data-experiment="arming"] *) {
      opacity: 0;
    }
  }

  @media (forced-colors: active) {
    .xz4eswf.xz4eswf:focus-visible {
      outline-color: highlight;
    }
  }

  @media (scripting: enabled) {
    .x3vhtta.x3vhtta.x3vhtta:where(.x12mkk0b[data-experiment="arming"] *) {
      visibility: hidden;
    }
  }

  @media (hover: hover) {
    .xlkrsup.xlkrsup:hover {
      background-attachment: scroll;
    }

    .x156efcn.x156efcn:hover {
      background-clip: border-box;
    }

    .x1voprv7.x1voprv7:hover {
      background-color: color-mix(in srgb,currentColor 9%,transparent);
    }

    .x8o3jvd.x8o3jvd:hover {
      background-image: none;
    }

    .xsq4hlx.xsq4hlx:hover {
      background-origin: padding-box;
    }

    .x1x226zn.x1x226zn:hover {
      background-repeat: repeat;
    }

    .x1f6hyc3.x1f6hyc3:hover {
      background-size: auto;
    }

    .xxeg0yr.xxeg0yr:hover {
      color: var(--hraness-site-footer-foreground);
    }
  }

  @media (pointer: coarse) {
    @container hraness-socials (width >= 136px) {
      .x101cbvv.x101cbvv.x101cbvv {
        display: block;
      }
    }

    @container hraness-socials (width >= 182px) {
      .xwl02xf.xwl02xf.xwl02xf {
        display: block;
      }
    }

    @container hraness-socials (width >= 90px) {
      .x6w72mi.x6w72mi.x6w72mi {
        display: block;
      }
    }
  }

  @media (pointer: fine) and (not (pointer: coarse)), (pointer: none) and (not (pointer: coarse)) {
    @container hraness-socials (width >= 3.625rem) {
      .xhzsqoz.xhzsqoz.xhzsqoz {
        display: block;
      }
    }

    @container hraness-socials (width >= 5.5rem) {
      .x18g50z5.x18g50z5.x18g50z5 {
        display: block;
      }
    }

    @container hraness-socials (width >= 7.375rem) {
      .xir82yx.xir82yx.xir82yx {
        display: block;
      }
    }
  }
}

@layer components.hraness-site-footer.priority5 {
  .xook0zr::placeholder {
    color: var(--hraness-site-footer-muted);
  }

  .x1i5lizr::-webkit-details-marker {
    display: none;
  }

  .x7xwk5j::placeholder {
    opacity: 1;
  }

  @supports selector(::details-content) {
    @media (width >= 47.5rem) {
      .x1xyn927.x1xyn927.x1xyn927::details-content {
        content-visibility: visible;
      }
    }
  }
}

@keyframes x3k0bqv-B {
  from {
    background-position: 100%;
  }

  to {
    background-position: 0;
  }
}

.x35j2r9 {
  --_hraness-foil-1: var(--hraness-foil-1, #f8cbeb);
}

@supports (color: lab(0% 0 0)) {
  .x35j2r9 {
    --_hraness-foil-1: var(--hraness-foil-1, lab(86.3403% 20.1464 -9.38262));
  }
}

.xmntjkq {
  --_hraness-foil-2: var(--hraness-foil-2, #cdd4f7);
}

@supports (color: lab(0% 0 0)) {
  .xmntjkq {
    --_hraness-foil-2: var(--hraness-foil-2, lab(85.1108% 3.0382 -18.4466));
  }
}

.x1xbl91z {
  --_hraness-foil-3: var(--hraness-foil-3, #c5f0df);
}

@supports (color: lab(0% 0 0)) {
  .x1xbl91z {
    --_hraness-foil-3: var(--hraness-foil-3, lab(91.3827% -16.8932 3.15534));
  }
}

.x47qxf1 {
  --_hraness-foil-4: var(--hraness-foil-4, #f7efcd);
}

@supports (color: lab(0% 0 0)) {
  .x47qxf1 {
    --_hraness-foil-4: var(--hraness-foil-4, lab(94.4608% -1.19552 17.4542));
  }
}

.x13hwd88 {
  --_hraness-foil-5: var(--hraness-foil-5, #f9d6bf);
}

@supports (color: lab(0% 0 0)) {
  .x13hwd88 {
    --_hraness-foil-5: var(--hraness-foil-5, lab(88.2259% 10.1507 16.1255));
  }
}

.xx7v8hi {
  --_hraness-foil-6: var(--hraness-foil-6, #dfcdf6);
}

@supports (color: lab(0% 0 0)) {
  .xx7v8hi {
    --_hraness-foil-6: var(--hraness-foil-6, lab(84.7576% 12.3398 -18.2155));
  }
}

.x1ciovt3 {
  --_hraness-foil-halo: var(--hraness-foil-halo-alpha, .3);
}

.x136ldfs {
  --hraness-foil-glow: 0;
}

.x3l4yik {
  --hraness-site-footer-action-background: var(--lightningcss-light, #166534) var(--lightningcss-dark, #86efac);
}

.x18vkaze {
  --hraness-site-footer-action-background: var(--lightningcss-light, #1e40af) var(--lightningcss-dark, #93c5fd);
}

.x1mq49gw {
  --hraness-site-footer-action-background: var(--lightningcss-light, #9a3412) var(--lightningcss-dark, #fdba74);
}

.xdg0xw2 {
  --hraness-site-footer-action-background: var(--plain-foreground, var(--foreground, CanvasText));
}

.x1izjwho {
  --hraness-site-footer-action-foreground: var(--lightningcss-light, #fff) var(--lightningcss-dark, #052e16);
}

.x1e6emja {
  --hraness-site-footer-action-foreground: var(--lightningcss-light, #fff) var(--lightningcss-dark, #172554);
}

.x1lf6uaq {
  --hraness-site-footer-action-foreground: var(--lightningcss-light, #fff) var(--lightningcss-dark, #431407);
}

.x1munjs5 {
  --hraness-site-footer-action-foreground: var(--plain-background, var(--background, Canvas));
}

.x8c10za {
  --hraness-site-footer-background: var(--plain-background, var(--background, Canvas));
}

.xe0js8b {
  --hraness-site-footer-bar-block-size: calc(var(--hraness-site-footer-content-block-size) + var(--hraness-site-footer-padding-block) + var(--hraness-site-footer-padding-block) + env(safe-area-inset-bottom, 0px) + 1px);
}

.x1o9lycj {
  --hraness-site-footer-content-block-size: max(var(--hraness-site-footer-social-target),var(--hraness-site-footer-form-block-size));
}

.x1ghcxmq {
  --hraness-site-footer-content-block-size: var(--hraness-site-footer-control-block-size);
}

.x1xgbxbt {
  --hraness-site-footer-control-block-size: max(var(--hraness-site-footer-social-target),1.75rem);
}

.xsctza4 {
  --hraness-site-footer-field-background: color-mix(in srgb,var(--hraness-site-footer-foreground) 4%,var(--hraness-site-footer-background));
}

.x14z8vex {
  --hraness-site-footer-focus: var(--plain-link, var(--focus, Highlight));
}

.x1ktp55a {
  --hraness-site-footer-foreground: var(--plain-foreground, var(--foreground, currentColor));
}

.xys6ka6 {
  --hraness-site-footer-form-block-size: var(--hraness-site-footer-control-block-size);
}

.x1m0uuso {
  --hraness-site-footer-holo-surface: var(--hraness-site-footer-field-background);
}

.x96ybla {
  --hraness-site-footer-line: var(--plain-line, var(--line, color-mix(in srgb,currentColor 18%,transparent)));
}

.xma658k {
  --hraness-site-footer-mailing-overlay-clearance: 0rem;
}

.x1sphz0r {
  --hraness-site-footer-mailing-overlay-clearance: calc(var(--hraness-site-footer-control-block-size) + var(--hraness-site-footer-row-gap));
}

.x1h47zgc {
  --hraness-site-footer-mailing-overlay-offset: calc(var(--hraness-site-footer-mailing-overlay-clearance) + var(--hraness-site-footer-padding-block) + 1px);
}

.x8d9m59 {
  --hraness-site-footer-muted: var(--plain-muted, var(--muted, color-mix(in srgb,currentColor 68%,transparent)));
}

.x19y8ktx {
  --hraness-site-footer-padding-block: clamp(.25rem,.8vw,.375rem);
}

.x1d4g2j8 {
  --hraness-site-footer-row-gap: .25rem;
}

.x94vt28 {
  --hraness-site-footer-shimmer-spread: calc(3ch + 40px);
}

.xtq98z5 {
  --hraness-site-footer-social-target: 1.75rem;
}

.x3luoqq {
  --hraness-site-footer-socials-inline-size: calc(4 * var(--hraness-site-footer-social-target) + max(.375rem,6px));
}

.x4sry57 {
  --hraness-site-footer-status-block-size: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  .x1dscx4y.x1dscx4y {
    --_hraness-foil-1: var(--hraness-foil-1, #af4791);
  }

  @supports (color: lab(0% 0 0)) {
    .x1dscx4y.x1dscx4y {
      --_hraness-foil-1: var(--hraness-foil-1, lab(46.6723% 49.1867 -19.8203));
    }
  }

  .x14xjb22.x14xjb22 {
    --_hraness-foil-2: var(--hraness-foil-2, #6358ba);
  }

  @supports (color: lab(0% 0 0)) {
    .x14xjb22.x14xjb22 {
      --_hraness-foil-2: var(--hraness-foil-2, lab(42.2458% 24.6027 -51.6587));
    }
  }

  .x1iiaa4z.x1iiaa4z {
    --_hraness-foil-3: var(--hraness-foil-3, #00ac8e);
  }

  @supports (color: lab(0% 0 0)) {
    .x1iiaa4z.x1iiaa4z {
      --_hraness-foil-3: var(--hraness-foil-3, lab(62.3695% -49.66 4.27207));
    }
  }

  .x1n6b76k.x1n6b76k {
    --_hraness-foil-4: var(--hraness-foil-4, #b8a636);
  }

  @supports (color: lab(0% 0 0)) {
    .x1n6b76k.x1n6b76k {
      --_hraness-foil-4: var(--hraness-foil-4, lab(68.1263% -2.49678 57.2653));
    }
  }

  .x1z0t8xj.x1z0t8xj {
    --_hraness-foil-5: var(--hraness-foil-5, #b64e10);
  }

  @supports (color: lab(0% 0 0)) {
    .x1z0t8xj.x1z0t8xj {
      --_hraness-foil-5: var(--hraness-foil-5, lab(46.7122% 40.9626 52.6576));
    }
  }

  .x1bbyikp.x1bbyikp {
    --_hraness-foil-6: var(--hraness-foil-6, #9d69d2);
  }

  @supports (color: lab(0% 0 0)) {
    .x1bbyikp.x1bbyikp {
      --_hraness-foil-6: var(--hraness-foil-6, lab(53.5209% 36.7413 -47.0617));
    }
  }

  .x11yejcl.x11yejcl {
    --_hraness-foil-halo: var(--hraness-foil-halo-alpha, .45);
  }
}

@media (pointer: coarse) {
  .x9cmhvv.x9cmhvv {
    --hraness-site-footer-control-block-size: max(var(--hraness-site-footer-social-target),2.25rem);
  }

  .x1w6jg7m.x1w6jg7m {
    --hraness-site-footer-social-target: 44px;
  }
}

@media (hover: hover) {
  .x1a9zcsi.x1a9zcsi:hover:not(:disabled) {
    --hraness-foil-glow: 1;
  }
}

/* @hraness/design-kit paper-theme.css, portable contract 1.
 * Generated by scripts/generate-paper-theme.ts from src/palettes.ts.
 * Opt in with data-hraness-theme="paper". Import after existing theme rules.
 * No imports, asset requests, resets, layout recipes, or runtime dependencies.
 * Appearance uses inherited color-scheme; set data-theme on the boundary for
 * an explicit island. A root without a mode follows the operating system.
 * A non-paper data-palette on the boundary retains its selected colors.
 * Requires CSS light-dark() (Chrome 123+, Firefox 120+, Safari 17.5+).
 */

[data-hraness-theme="paper"] {
  --font-text: "Nebula Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-text);
  --font-sans: var(--font-text);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --ui-font-sans: var(--font-text);
  --ui-font-heading: var(--font-heading);
  --ui-font-mono: var(--font-mono);
  --text-body: 1rem;
  --text-caption: .75rem;
  --text-label: .875rem;
  --font-weight-regular: 400;
  --font-weight-medium: 550;
  --font-weight-bold: 700;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: .875rem;
  --ui-radius: .875rem;
  --control-radius: .625rem;
  --hraness-paper-heading-size: clamp(1.75rem, 3vw, 2.375rem);
  --hraness-paper-section-heading-size: clamp(1.25rem, 2.2vw, 1.75rem);
  --hraness-paper-summary-size: 1rem;
  --hraness-paper-heading-leading: 1.15;
  --hraness-paper-heading-tracking: -.035em;
  --hraness-marketing-measure: 80rem;
  --hraness-marketing-copy-measure: 40rem;
  --hraness-marketing-prose-measure: 68ch;
  --hraness-marketing-gutter: clamp(1.25rem, 4vw, 3rem);
  --hraness-marketing-radius: .625rem;
  --hraness-marketing-frame-radius: .875rem;
  --hraness-marketing-heading-weight: 550;
  --hraness-marketing-heading-tracking: -.025em;
  --hraness-marketing-section-space: clamp(3rem, 7vw, 6rem);
  --hraness-marketing-action-height: 2.75rem;
  font-family: var(--font-text);
}

/* Existing marketing roles declare defaults directly, so inherit this
 * opt-in rhythm at each role boundary without replacing component recipes. */
[data-hraness-theme="paper"] :where(.hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero, .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta, .hraness-marketing-proof-frame) {
  --hraness-marketing-measure: inherit;
  --hraness-marketing-copy-measure: inherit;
  --hraness-marketing-prose-measure: inherit;
  --hraness-marketing-gutter: inherit;
  --hraness-marketing-radius: inherit;
  --hraness-marketing-frame-radius: inherit;
  --hraness-marketing-heading-weight: inherit;
  --hraness-marketing-heading-tracking: inherit;
  --hraness-marketing-section-space: inherit;
  --hraness-marketing-action-height: inherit;
}

:root[data-hraness-theme="paper"]:where(:not([data-theme]):not(.dark), [data-theme="system"]) { color-scheme: light dark; }
[data-hraness-theme="paper"]:where([data-theme="dark"], .dark:not([data-theme="light"])) { color-scheme: dark; }
[data-hraness-theme="paper"][data-theme="light"] { color-scheme: light; }

/* Opted-in shared headers retain their layout and receive the shared paint
 * contract, including snapshots used with older component releases. */
@layer components.hraness-design-kit.legacy {
/* Keep the browser aliases in separate feature queries: CSS optimizers can
 * collapse adjacent aliases to the prefixed property and lose Chromium blur. */
:where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
  --hraness-marketing-header-background: var(--hraness-marketing-background);
  --hraness-marketing-header-backdrop: none;
  background: var(--hraness-marketing-header-background);
}

@supports (-webkit-backdrop-filter: blur(1px)) {
  :where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
    --hraness-marketing-header-background: color-mix(in oklch, var(--hraness-marketing-background) 82%, transparent);
    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: var(--hraness-marketing-header-backdrop);
  }
}

@supports (backdrop-filter: blur(1px)) {
  :where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
    --hraness-marketing-header-background: color-mix(in oklch, var(--hraness-marketing-background) 82%, transparent);
    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
    backdrop-filter: var(--hraness-marketing-header-backdrop);
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  :where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
    --hraness-marketing-header-background: var(--hraness-marketing-background);
    --hraness-marketing-header-backdrop: none;
  }
}
}

:root[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]),
[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]) {
  --background: light-dark(#f8f7f4, #12100f);
  --foreground: light-dark(#1c1917, #f5f2ed);
  --muted: light-dark(#6c665f, #aaa29a);
  --faint: light-dark(#6c665f, #aaa29a);
  --grid: light-dark(#dfdcd6, #302b27);
  --line: light-dark(#b9b3ab, #514a44);
  --control-border: light-dark(#8a8177, #827a72);
  --surface: light-dark(#fffefa, #1d1a18);
  --surface-raised: light-dark(#fffefa, #211d1a);
  --surface-hover: light-dark(#ebe8e3, #292522);
  --card: light-dark(#fffefa, #1d1a18);
  --card-foreground: light-dark(#1c1917, #f5f2ed);
  --popover: light-dark(#fffefa, #211d1a);
  --popover-foreground: light-dark(#1c1917, #f5f2ed);
  --primary: light-dark(#1e5ae1, #8fb0ff);
  --primary-foreground: light-dark(#f8f7f4, #12100f);
  --primary-soft: light-dark(#dee5f3, #21232c);
  --secondary: light-dark(#ebe8e3, #292522);
  --secondary-foreground: light-dark(#1c1917, #f5f2ed);
  --accent: light-dark(#dee5f3, #21232c);
  --accent-foreground: light-dark(#1c1917, #f5f2ed);
  --focus: light-dark(#1e5ae1, #8fb0ff);
  --scrim: light-dark(#00000070, #000000b8);
  --disabled: light-dark(#fffefa, #211d1a);
  --disabled-foreground: light-dark(#6c665f, #aaa29a);
  --inverse: light-dark(#1c1917, #f5f2ed);
  --inverse-foreground: light-dark(#f8f7f4, #12100f);
  --danger: light-dark(#b23c34, #ef8c82);
  --danger-foreground: light-dark(#f8f7f4, #12100f);
  --danger-soft: light-dark(#f0e1dd, #2d1f1d);
  --warning: light-dark(#975600, #efae55);
  --warning-foreground: light-dark(#f8f7f4, #12100f);
  --warning-soft: light-dark(#eee5d7, #2d2317);
  --success: light-dark(#227445, #5fc98b);
  --success-foreground: light-dark(#f8f7f4, #12100f);
  --success-soft: light-dark(#dfe9e0, #1b261e);
  --info: light-dark(#1e5ae1, #8fb0ff);
  --info-foreground: light-dark(#f8f7f4, #12100f);
  --info-soft: light-dark(#dee5f3, #21232c);
  --chart1: light-dark(#a24a64, #db91aa);
  --chart2: light-dark(#227445, #5fc98b);
  --chart3: light-dark(#1e5ae1, #8fb0ff);
  --chart4: light-dark(#975600, #efae55);
  --chart5: light-dark(#7858a3, #b7a0dc);
  --ui-background: var(--background);
  --ui-foreground: var(--foreground);
  --ui-card: var(--card);
  --ui-card-foreground: var(--card-foreground);
  --ui-popover: var(--popover);
  --ui-popover-foreground: var(--popover-foreground);
  --ui-primary: var(--primary);
  --ui-primary-foreground: var(--primary-foreground);
  --ui-secondary: var(--secondary);
  --ui-secondary-foreground: var(--secondary-foreground);
  --ui-muted: var(--secondary);
  --ui-muted-foreground: var(--muted);
  --ui-accent: var(--accent);
  --ui-accent-foreground: var(--accent-foreground);
  --ui-destructive: var(--danger);
  --ui-destructive-foreground: var(--danger-foreground);
  --ui-destructive-soft: var(--danger-soft);
  --ui-border: var(--line);
  --ui-input: var(--control-border);
  --ui-ring: var(--focus);
  --ui-success: var(--success);
  --ui-success-foreground: var(--success-foreground);
  --ui-success-soft: var(--success-soft);
  --ui-warning: var(--warning);
  --ui-warning-foreground: var(--warning-foreground);
  --ui-warning-soft: var(--warning-soft);
  --ui-info: var(--info);
  --ui-info-foreground: var(--info-foreground);
  --ui-info-soft: var(--info-soft);
  --ui-chart-1: var(--chart1);
  --ui-chart-2: var(--chart2);
  --ui-chart-3: var(--chart3);
  --ui-chart-4: var(--chart4);
  --ui-chart-5: var(--chart5);
  --hraness-site-accent: var(--primary);
  --hraness-site-accent-ink: var(--primary-foreground);
  --plain-background: var(--background);
  --plain-foreground: var(--foreground);
  --plain-muted: var(--muted);
  --plain-line: var(--grid);
  --plain-surface: var(--secondary);
  --plain-link: var(--primary);
  --plain-syntax-keyword: var(--warning);
  --plain-syntax-string: var(--success);
  --plain-syntax-number: var(--danger);
  --plain-syntax-name: var(--info);
  --elevation-low: 0 1px 2px light-dark(rgb(33 25 18 / 8%), rgb(0 0 0 / 24%));
  --elevation-raised: 0 8px 24px -12px light-dark(rgb(33 25 18 / 22%), rgb(0 0 0 / 48%));
  --elevation-overlay: 0 18px 54px light-dark(rgb(33 25 18 / 20%), rgb(0 0 0 / 58%));
}

@media (forced-colors: active) {
  :root[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]),
[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]) {
    --background: Canvas;
    --foreground: CanvasText;
    --muted: CanvasText;
    --faint: CanvasText;
    --surface: Canvas;
    --surface-raised: Canvas;
    --surface-hover: Canvas;
    --card: Canvas;
    --card-foreground: CanvasText;
    --popover: Canvas;
    --popover-foreground: CanvasText;
    --secondary: Canvas;
    --secondary-foreground: CanvasText;
    --grid: CanvasText;
    --line: CanvasText;
    --control-border: ButtonText;
    --primary: Highlight;
    --primary-foreground: HighlightText;
    --plain-link: LinkText;
    --accent: Highlight;
    --accent-foreground: HighlightText;
    --focus: Highlight;
    --inverse: CanvasText;
    --inverse-foreground: Canvas;
    --disabled: Canvas;
    --disabled-foreground: GrayText;
    --elevation-low: none;
    --elevation-raised: none;
    --elevation-overlay: none;
  }
}

:root:not([data-hraness-theme="paper"]) {
  color-scheme: light dark;
  --background: #f5f3ed;
  --surface: #fbfaf6;
  --surface-raised: #ffffff;
  --foreground: #1a1916;
  --muted: #625e56;
  --line: rgb(26 25 22 / 12%);
  --line-strong: rgb(26 25 22 / 24%);
  --accent: #9a5d16;
  --accent-ink: #ffffff;
  --accent-bright: #d99a4a;
  --accent-soft: #f1e3cd;
  --focus: #9a5d16;
  --code-background: #14171a;
  --code-foreground: #f3f0e8;
  --code-muted: #a9a79f;
  --dark-background: #0e1113;
  --dark-surface: #15191c;
  --dark-foreground: #f0ede4;
  --dark-muted: #a8a69f;
  --dark-line: #2c3134;
  --font-sans: "Nebula Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-text: var(--font-sans);
  --font-heading: var(--font-sans);
  --primary: var(--accent);
  --inverse: var(--code-background);
  --inverse-foreground: var(--code-foreground);
  --hraness-site-accent: var(--accent);
  --hraness-site-accent-ink: var(--accent-ink);
  --hraness-site-footer-measure: 72rem;
  --page-inline: clamp(1.25rem, 4vw, 3rem);
  --section-block: clamp(4rem, 9vw, 7.5rem);
  --radius-sm: 0.625rem;
  --radius-md: 0.75rem;
  --radius-lg: 0.875rem;
  --shadow-low: 0 1px 2px rgb(0 0 0 / 6%), 0 24px 48px -24px rgb(0 0 0 / 28%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-hraness-theme="paper"]) {
    --background: #0e1113;
    --surface: #14181b;
    --surface-raised: #1a1f23;
    --foreground: #f0ede4;
    --muted: #a8a69f;
    --line: rgb(240 237 228 / 14%);
    --line-strong: rgb(240 237 228 / 26%);
    --accent: #e6ad63;
    --accent-ink: #1a1206;
    --accent-bright: #f0be78;
    --accent-soft: #2b2117;
    --focus: #e6ad63;
    --code-background: #090b0d;
    --shadow-low: 0 1px 2px rgb(0 0 0 / 30%), 0 24px 48px -24px rgb(0 0 0 / 60%);
  }
}

/* The shared paper palette owns ordinary pages. Fixed terminal and preview
 * colors remain product-owned, independent of the document appearance. */
:root[data-hraness-theme="paper"] {
  --ghostget-action: var(--primary);
  --accent-ink: var(--primary-foreground);
  --accent-soft: var(--accent);
  --accent-bright: #d99a4a;
  --line-strong: var(--control-border);
  --code-background: #14171a;
  --code-foreground: #f3f0e8;
  --code-muted: #a9a79f;
  --dark-background: #0e1113;
  --dark-surface: #15191c;
  --dark-foreground: #f0ede4;
  --dark-muted: #a8a69f;
  --dark-line: #2c3134;
  --hraness-site-footer-measure: 80rem;
  --page-inline: var(--hraness-marketing-gutter);
  --section-block: var(--hraness-marketing-section-space);
  --shadow-low: var(--elevation-low);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--background);
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  margin: 0;
  min-width: 20rem;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, p, dd, dt, li, summary, code) {
  overflow-wrap: anywhere;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: var(--ghostget-action, var(--accent));
}

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 0.16rem solid var(--focus);
  outline-offset: 0.22rem;
}

code,
pre {
  font-family: var(--font-mono);
}

code:not(pre code):not(.hraness-marketing-flow__code) {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  border-radius: 0.25rem;
  font-size: 0.88em;
  padding: 0.08em 0.3em;
}

.skip-link {
  background: var(--foreground);
  border-radius: 0 0 var(--radius-sm) 0;
  color: var(--background);
  font-size: 0.88rem;
  font-weight: 750;
  left: 0;
  padding: 0.7rem 1rem;
  position: fixed;
  top: 0;
  transform: translateY(-140%);
  transition: transform 150ms ease;
  z-index: 100;
}

.skip-link:focus {
  transform: translateY(0);
}

.topbar {
  align-items: center;
  backdrop-filter: blur(18px) saturate(120%);
  background: rgb(14 17 19 / 88%);
  border-bottom: 1px solid rgb(245 242 233 / 14%);
  color: var(--dark-foreground);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: 4rem;
  padding: max(0.75rem, env(safe-area-inset-top)) max(var(--page-inline), env(safe-area-inset-right)) 0.75rem max(var(--page-inline), env(safe-area-inset-left));
  position: sticky;
  top: 0;
  z-index: 30;
}

.wordmark {
  align-items: center;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 850;
  gap: 0.4rem;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.wordmark img {
  block-size: 1.25rem;
  inline-size: auto;
}

.topbar nav {
  align-items: center;
  display: flex;
  gap: clamp(0.9rem, 3vw, 1.75rem);
}

.topbar nav a {
  color: var(--dark-muted);
  font-size: 0.82rem;
  font-weight: 680;
  text-decoration: none;
}

.topbar nav a:hover {
  color: var(--dark-foreground);
}

.hero {
  align-items: center;
  background:
    radial-gradient(circle at 82% 34%, rgb(241 167 45 / 13%), transparent 29rem),
    linear-gradient(145deg, #111518 0%, #0b0e10 72%);
  border-bottom: 1px solid var(--dark-line);
  color: var(--dark-foreground);
  display: grid;
  isolation: isolate;
  min-height: min(84svh, 58rem);
  overflow: hidden;
  padding: clamp(4.5rem, 10vw, 9rem) var(--page-inline);
  position: relative;
}

.hero::before {
  background-image:
    linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent, black 60%, black);
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

.hero-field {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.hero-field::before,
.hero-field::after {
  border: 1px solid rgb(241 167 45 / 28%);
  content: "";
  position: absolute;
  right: clamp(-16rem, -7vw, -4rem);
  transform: rotate(18deg);
}

.hero-field::before {
  border-radius: 26% 74% 42% 58%;
  height: min(74vw, 46rem);
  top: -5%;
  width: min(52vw, 38rem);
}

.hero-field::after {
  border-color: rgb(151 159 169 / 20%);
  border-radius: 64% 36% 68% 32%;
  height: min(62vw, 38rem);
  right: clamp(-9rem, 5vw, 6rem);
  top: 10%;
  width: min(42vw, 30rem);
}

.hero-orbit {
  border: 1px solid rgb(241 167 45 / 24%);
  border-radius: 50%;
  position: absolute;
}

.hero-orbit::before,
.hero-orbit::after {
  background: var(--accent-bright);
  border-radius: 50%;
  box-shadow: 0 0 1.5rem rgb(241 167 45 / 75%);
  content: "";
  height: 0.45rem;
  position: absolute;
  width: 0.45rem;
}

.hero-orbit-a {
  height: 24rem;
  right: 5%;
  top: 16%;
  width: 24rem;
}

.hero-orbit-a::before {
  left: 8%;
  top: 22%;
}

.hero-orbit-a::after {
  bottom: 7%;
  right: 23%;
}

.hero-orbit-b {
  bottom: -5rem;
  height: 34rem;
  right: 15%;
  width: 34rem;
}

.hero-orbit-b::before {
  right: 7%;
  top: 28%;
}

.hero-orbit-b::after {
  left: 1%;
  top: 46%;
}

.hero-glyph {
  filter: grayscale(1) contrast(0.8) sepia(0.45);
  font-size: min(31vw, 24rem);
  line-height: 1;
  opacity: 0.1;
  position: absolute;
  right: clamp(-4rem, 3vw, 7rem);
  top: 50%;
  transform: translateY(-48%) rotate(-11deg);
  user-select: none;
}

.hero-glyph img {
  display: block;
  height: min(31vw, 24rem);
  width: min(31vw, 24rem);
}

.hero-content {
  margin-inline: auto;
  max-width: 100rem;
  width: 100%;
}

.eyebrow,
.command-label,
.prompt-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.45;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: var(--dark-muted);
  max-width: 34rem;
}

.hero h1 {
  font-size: min(clamp(4rem, 14vw, 10rem), 15cqi);
  font-weight: 850;
  letter-spacing: -0.085em;
  line-height: 0.82;
  margin: clamp(1.2rem, 3vw, 2.5rem) 0 0;
  text-wrap: balance;
}

.hero h1 span {
  color: var(--accent-bright);
}

.hero-statement {
  color: var(--dark-foreground);
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 1.08;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  max-width: 42rem;
  text-wrap: balance;
}

.hero-explainer {
  color: var(--dark-muted);
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  letter-spacing: -0.02em;
  line-height: 1.58;
  margin: 0.9rem 0 0;
  max-width: 49rem;
  text-wrap: pretty;
}

.skill-install {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 47rem;
}

.skill-install-label {
  color: var(--dark-muted);
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.45;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.skill-install-control {
  align-items: center;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(245 242 233 / 24%);
  border-radius: var(--radius-md);
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 18%);
  display: flex;
  min-height: 3.75rem;
  overflow: hidden;
  padding-left: 1rem;
}

.skill-install-prompt {
  color: var(--accent-bright);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 750;
  margin-right: 0.65rem;
}

.skill-install-command {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--dark-foreground);
  cursor: text;
  display: flex;
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.4vw, 0.9rem);
  line-height: 1.5;
  min-height: 3.65rem;
  min-width: 0;
  overflow-x: auto;
  padding: 0;
  user-select: all;
  white-space: nowrap;
  width: 100%;
}

.skill-install-command:focus-visible {
  outline-offset: -0.22rem;
}

.skill-install-copy {
  align-items: center;
  align-self: stretch;
  background: rgb(255 255 255 / 8%);
  border: 0;
  border-left: 1px solid rgb(245 242 233 / 18%);
  color: var(--dark-foreground);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 760;
  gap: 0.45rem;
  justify-content: center;
  min-width: 6rem;
  padding: 0.7rem 1rem;
  transition: background-color 150ms ease, color 150ms ease;
}

.skill-install-copy[hidden] {
  display: none;
}

.skill-install-copy:hover {
  background: rgb(255 255 255 / 14%);
}

.skill-install-copy:disabled {
  cursor: wait;
  opacity: 0.78;
}

.skill-install-copy[data-copy-state="copied"] {
  background: var(--accent-bright);
  color: #18130b;
}

.skill-install-copy svg {
  fill: none;
  height: 1rem;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  width: 1rem;
}

.skill-install-note {
  color: var(--dark-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0.65rem 0 0;
}

.action-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem;
}

.hero .action-row {
  margin-top: 2.2rem;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 760;
  justify-content: center;
  min-height: 3rem;
  padding: 0.72rem 1.15rem;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--foreground);
  color: var(--background);
}

.hero .button-primary,
.section-dark .button-primary {
  background: var(--accent-bright);
  color: #18130b;
}

.button-secondary {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--foreground);
}

.hero .button-secondary,
.hero .button-quiet,
.section-dark .button-secondary,
.section-dark .button-quiet {
  background: rgb(255 255 255 / 5%);
  border-color: rgb(245 242 233 / 24%);
  color: var(--dark-foreground);
}

.button-quiet {
  background: transparent;
  border-color: transparent;
}

.proof-list {
  color: var(--dark-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.74rem;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}

.proof-list li {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.proof-list li::before {
  background: var(--accent-bright);
  border-radius: 50%;
  content: "";
  height: 0.34rem;
  width: 0.34rem;
}

.content {
  margin-inline: auto;
  max-width: 100rem;
}

.section {
  border-bottom: 1px solid var(--line);
  padding: var(--section-block) var(--page-inline);
}

.section-dark {
  background: var(--dark-background);
  border-bottom-color: var(--dark-line);
  color: var(--dark-foreground);
  margin-inline: calc((100vw - min(100vw, 100rem)) / -2);
  padding-inline: max(var(--page-inline), calc((100vw - 100rem) / 2 + var(--page-inline)));
}

.section-heading {
  max-width: 46rem;
}

.section-heading-wide {
  max-width: 61rem;
}

.section-heading h2,
.final-section h2,
.route-state h1 {
  font-size: clamp(2.15rem, 5.4vw, 4.9rem);
  font-weight: 820;
  letter-spacing: -0.068em;
  line-height: 0.96;
  margin: 0;
  text-wrap: balance;
}

.section-heading > p:last-child {
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.68;
  margin: 1.3rem 0 0;
  text-wrap: pretty;
}

.section-dark .eyebrow,
.section-dark .section-heading > p:last-child,
.section-dark .flow p,
.section-dark .flow-index {
  color: var(--dark-muted);
}

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

.card {
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--surface-raised) 94%, transparent), color-mix(in srgb, var(--accent-soft) 30%, var(--surface)));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-height: 14rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.card-index {
  color: var(--ghostget-action, var(--accent));
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.card h3,
.principle-grid h3,
.flow h3 {
  font-size: 1rem;
  font-weight: 780;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0;
}

.card p,
.principle-grid p,
.flow p {
  color: var(--muted);
  line-height: 1.62;
  margin: 1rem 0 0;
}

.provider-directory {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

.provider-card {
  --provider-accent: var(--ghostget-action, var(--accent));
  background: color-mix(in srgb, var(--surface-raised) 92%, var(--provider-accent));
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--provider-accent));
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  min-height: 11.5rem;
  min-width: 0;
  padding: 1.15rem;
}

.provider-card-featured {
  grid-column: span 2;
  min-height: 14rem;
}

.provider-accent-blue { --provider-accent: #4f86d9; }
.provider-accent-coral { --provider-accent: #d86a4b; }
.provider-accent-gold { --provider-accent: #d49a2b; }
.provider-accent-green { --provider-accent: #36a56b; }
.provider-accent-ink { --provider-accent: #67717b; }
.provider-accent-violet { --provider-accent: #8b70cb; }

.provider-card-heading {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-start;
}

.provider-mark {
  align-items: center;
  background: color-mix(in srgb, var(--provider-accent) 16%, var(--surface-raised));
  border: 1px solid color-mix(in srgb, var(--provider-accent) 48%, var(--line));
  border-radius: 0.75rem;
  color: color-mix(in srgb, var(--provider-accent) 78%, var(--foreground));
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.provider-icon {
  fill: none;
  height: 1.35rem;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
  width: 1.35rem;
}

.provider-adapter-count {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.provider-card h3 {
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  letter-spacing: -0.035em;
  margin: 1.3rem 0 0;
}

.provider-card h3 a {
  color: var(--foreground);
  text-decoration-color: color-mix(in srgb, var(--provider-accent) 55%, transparent);
  text-underline-offset: 0.22em;
}

.provider-card p {
  line-height: 1.48;
  margin: 0.52rem 0 0;
}

.provider-card .provider-state {
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.provider-transport {
  color: var(--muted);
  font-size: 0.72rem;
}

.provider-feature-copy {
  color: var(--muted);
  font-size: 0.86rem;
  max-width: 35rem;
}

.provider-channel-grid,
.provider-action-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
}

.provider-channel-grid article,
.provider-action-grid article {
  border-top: 1px solid var(--line);
  padding: 1.25rem 1.5rem 0 0;
}

.provider-channel-grid h3,
.provider-action-grid h3 {
  font-size: 0.86rem;
  margin: 0;
}

.provider-channel-grid p,
.provider-action-grid p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.58;
  margin: 0.7rem 0 0;
}

.provider-status-note {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 1.5rem 0 0;
  max-width: 62rem;
}

.provider-actions,
.guide-actions {
  margin-top: 1.5rem;
}

.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: clamp(3rem, 7vw, 6rem) 0 0;
  padding: 0;
}

.flow li {
  border-top: 1px solid var(--dark-line);
  min-width: 0;
  padding: 1.25rem 1.25rem 0 0;
  position: relative;
}

.flow li::before {
  background: var(--accent-bright);
  border: 4px solid var(--dark-background);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--dark-line), 0 0 1rem rgb(241 167 45 / 40%);
  content: "";
  height: 0.8rem;
  position: absolute;
  top: -0.42rem;
  width: 0.8rem;
}

.flow-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  margin-bottom: 1.75rem;
}

.start-section,
.technical-section {
  display: grid;
  gap: clamp(2.5rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 0.82fr) minmax(27rem, 1.18fr);
}

.command-stack {
  align-self: start;
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.command-panel,
.prompt-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.command-panel {
  box-shadow: var(--shadow-low);
  overflow: hidden;
}

.command-label {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0.85rem 1rem;
}

.command-panel pre {
  margin: 0;
  overflow-x: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.command-panel code {
  font-size: clamp(0.73rem, 1.25vw, 0.9rem);
  line-height: 1.9;
  white-space: pre;
}

.prompt-card {
  padding: 1.25rem 1.5rem;
}

.prompt-card p {
  line-height: 1.58;
  margin: 0;
}

.prompt-card .prompt-label {
  margin-bottom: 0.45rem;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(3rem, 7vw, 6rem);
}

.principle-grid article {
  border-left: 1px solid var(--line);
  padding: 1rem clamp(1.25rem, 3vw, 2.5rem);
}

.principle-grid article:nth-child(3n + 1) {
  padding-left: 0;
}

.invariants {
  margin: 0;
}

.invariants > div {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(8rem, 0.34fr) minmax(0, 1fr);
  padding: 1.3rem 0;
}

.invariants dt {
  font-size: 0.82rem;
  font-weight: 780;
}

.invariants dd {
  color: var(--muted);
  line-height: 1.58;
  margin: 0;
}

.table-scroll {
  margin-top: clamp(3rem, 7vw, 6rem);
  overflow-x: auto;
}

.table-scroll table {
  border-collapse: collapse;
  min-width: 48rem;
  width: 100%;
}

.table-scroll :where(th, td) {
  border-top: 1px solid var(--line);
  line-height: 1.52;
  padding: 1.2rem 1.25rem 1.2rem 0;
  text-align: left;
  vertical-align: top;
}

.table-scroll thead th {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.table-scroll tbody th {
  font-size: 0.9rem;
  width: 18%;
}

.table-scroll td {
  color: var(--muted);
  width: 41%;
}

.faq-list {
  display: grid;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  max-width: 64rem;
}

.faq-list details {
  border-top: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: clamp(1rem, 2vw, 1.18rem);
  font-weight: 730;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  min-height: 4.25rem;
  padding: 1rem 0;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  color: var(--ghostget-action, var(--accent));
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  color: var(--muted);
  line-height: 1.68;
  margin: 0;
  max-width: 50rem;
  padding: 0 3rem 1.5rem 0;
}

.final-section {
  align-items: end;
  border-bottom: 0;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}

.site-disclosure {
  align-items: center;
  background: var(--dark-background);
  color: var(--dark-muted);
  display: flex;
  font-size: 0.78rem;
  gap: 1.5rem;
  justify-content: space-between;
  min-height: 6rem;
  padding: 1.5rem max(var(--page-inline), env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(var(--page-inline), env(safe-area-inset-left));
}

.site-disclosure p {
  margin: 0;
}

.privacy-note {
  line-height: 1.5;
  max-width: 48rem;
}

.site-disclosure a {
  color: var(--dark-foreground);
}

.guide-main {
  margin-inline: auto;
  max-width: 100rem;
  padding: 0 var(--page-inline) var(--section-block);
}

.breadcrumbs {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
  padding: 1.25rem 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li + li::before {
  color: var(--line);
  content: "/";
  margin-right: 0.55rem;
}

.guide-article {
  margin-inline: auto;
  max-width: 72rem;
}

.guide-hero {
  padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.5rem, 8vw, 6rem);
}

.guide-hero h1 {
  font-size: clamp(2.8rem, 7vw, 6.6rem);
  font-weight: 840;
  letter-spacing: -0.075em;
  line-height: 0.94;
  margin: 0;
  max-width: 64rem;
  text-wrap: balance;
}

.answer-lede {
  color: var(--foreground);
  font-size: clamp(1.16rem, 2.2vw, 1.55rem);
  letter-spacing: -0.025em;
  line-height: 1.55;
  margin: 2rem 0 0;
  max-width: 61rem;
  text-wrap: pretty;
}

.review-note {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
  margin: 1.5rem 0 0;
  max-width: 52rem;
}

.guide-article > section {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.guide-article > section > :not(.table-scroll, .command-panel) {
  max-width: 54rem;
}

.guide-article h2,
.guide-callout h2 {
  font-size: clamp(1.8rem, 4.2vw, 3.5rem);
  font-weight: 810;
  letter-spacing: -0.06em;
  line-height: 1;
  margin: 0 0 1.6rem;
  text-wrap: balance;
}

.guide-article section > p,
.guide-callout p,
.guide-list,
.guide-steps {
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.72;
}

.guide-article section > p {
  margin: 1.1rem 0 0;
}

.guide-article .command-panel {
  margin: 1.75rem 0;
}

.demo-media {
  margin: 2rem 0 0;
  max-width: 72rem;
}

.demo-media video {
  background: var(--dark-background);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-low);
  display: block;
  height: auto;
  width: 100%;
}

.demo-media figcaption {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.58;
  margin-top: 0.85rem;
  max-width: 54rem;
}

.demo-transcript {
  border-block: 1px solid var(--line);
  margin-top: 1.75rem;
  max-width: 72rem;
}

.demo-transcript summary {
  cursor: pointer;
  font-weight: 720;
  padding: 1rem 0;
}

.demo-transcript .command-panel {
  margin-top: 0;
}

.guide-list,
.guide-steps {
  display: grid;
  gap: 0.85rem;
  margin-block: 1.5rem;
  padding-left: 1.35rem;
}

.guide-callout {
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--surface-raised) 94%, transparent), color-mix(in srgb, var(--accent-soft) 38%, var(--surface)));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-top: clamp(2rem, 6vw, 5rem);
  padding: clamp(1.75rem, 5vw, 3.5rem);
}

.guide-callout p {
  margin: 0;
  max-width: 52rem;
}

.editorial-cluster .card,
.guide-cluster .card {
  min-height: 0;
}

.editorial-cluster .card h3 a,
.guide-cluster .card h3 a {
  text-decoration-color: color-mix(in srgb, var(--ghostget-action, var(--accent)) 45%, transparent);
}

.provider-directory-guide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
}

.provider-attestation-groups {
  margin-top: 2.5rem;
}

.provider-attestation-group {
  border-top: 1px solid var(--line);
  padding: 2.25rem 0;
  scroll-margin-top: 6rem;
}

.provider-attestation-group > h3 {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  letter-spacing: -0.045em;
  margin: 0;
}

.provider-attestation-group > p {
  color: var(--muted);
  margin: 0.55rem 0 1rem;
}

.provider-adapter {
  border-top: 1px solid var(--line);
}

.provider-adapter:last-child {
  border-bottom: 1px solid var(--line);
}

.provider-adapter summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  line-height: 1.5;
  list-style: none;
  padding: 1rem 0;
}

.provider-adapter summary::-webkit-details-marker {
  display: none;
}

.provider-adapter summary::after {
  color: var(--ghostget-action, var(--accent));
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.1rem;
}

.provider-adapter[open] summary::after {
  content: "−";
}

.provider-adapter summary span:last-child {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  margin-left: auto;
}

.provider-adapter .table-scroll {
  margin: 0 0 1.25rem;
}

.provider-table table {
  min-width: 88rem;
}

.provider-table tbody th {
  width: 16%;
}

.provider-table td:nth-child(2),
.provider-table td:nth-child(3) {
  width: 10%;
}

.provider-table td:nth-child(4) {
  width: 8%;
}

.provider-table td:nth-child(5) {
  width: 12%;
}

.provider-table td:nth-child(6) {
  width: 44%;
}

.version-table table {
  min-width: 58rem;
}

.artifact-table table {
  min-width: 58rem;
  table-layout: fixed;
}

.artifact-table th:nth-child(1),
.artifact-table td:nth-child(1) {
  width: 16%;
}

.artifact-table th:nth-child(2),
.artifact-table td:nth-child(2) {
  width: 18%;
}

.artifact-table th:nth-child(3),
.artifact-table td:nth-child(3),
.artifact-table th:nth-child(4),
.artifact-table td:nth-child(4) {
  width: 33%;
}

.artifact-table code {
  overflow-wrap: anywhere;
}

.security-levels {
  margin: 1.75rem 0;
  max-width: 50rem;
}

.route-state {
  align-content: center;
  display: grid;
  min-height: 100svh;
  padding: var(--section-block) var(--page-inline);
}

.route-state > * {
  max-width: 50rem;
}

.route-state > p:not(.eyebrow, .visually-hidden) {
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.65;
  margin: 1.5rem 0 1.25rem;
}

.route-state .recovery-links {
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 2rem;
  padding-left: 1.2rem;
}

.route-state .recovery-links a {
  color: var(--foreground);
}

.route-state .button {
  justify-self: start;
}

.route-state > .privacy-note {
  font-size: 0.78rem;
  margin: 1.25rem 0 0;
  max-width: 40rem;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.preview-body {
  background: var(--dark-background);
  color: var(--dark-foreground);
  min-width: 0;
}

.preview-shell {
  min-height: 100svh;
  padding: clamp(0.75rem, 3vw, 1.5rem);
}

.preview-card {
  background:
    radial-gradient(circle at 82% 22%, rgb(241 167 45 / 18%), transparent 24rem),
    linear-gradient(145deg, #151a1d, #0b0e10 78%);
  border: 1px solid var(--dark-line);
  border-radius: clamp(0.8rem, 2.5vw, 1.4rem);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 28%);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  min-height: calc(100svh - clamp(1.5rem, 6vw, 3rem));
  overflow: hidden;
  padding: clamp(1.25rem, 5vw, 3rem);
  position: relative;
}

.preview-card::before {
  background-image:
    linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
  background-size: clamp(2.25rem, 7vw, 3.5rem) clamp(2.25rem, 7vw, 3.5rem);
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent, black 45%, black);
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}

.preview-field {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.preview-orbit {
  border: 1px solid rgb(241 167 45 / 27%);
  border-radius: 50%;
  position: absolute;
  right: -14%;
  top: -22%;
}

.preview-orbit-a {
  aspect-ratio: 1;
  width: min(70vw, 26rem);
}

.preview-orbit-b {
  aspect-ratio: 1;
  border-color: rgb(151 159 169 / 22%);
  right: 4%;
  top: 10%;
  width: min(48vw, 18rem);
}

.preview-wordmark {
  align-items: center;
  display: flex;
  font-size: 0.78rem;
  font-weight: 850;
  gap: 0.65rem;
  letter-spacing: 0.16em;
  margin: 0;
}

.preview-wordmark img {
  height: 1.7rem;
  width: 1.7rem;
}

.preview-copy {
  margin: auto 0;
  max-width: 42rem;
  padding: clamp(2rem, 9vh, 6rem) 0;
}

.preview-eyebrow {
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 1.8vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.preview-copy h1 {
  font-size: clamp(2rem, 7vw, 4.75rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 0;
  max-width: 12ch;
}

.preview-copy > p:last-child {
  color: var(--dark-muted);
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
  line-height: 1.55;
  margin: 1.3rem 0 0;
  max-width: 38rem;
}

.preview-flow {
  border-top: 1px solid var(--dark-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
}

.editorial-figure {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.editorial-figure img {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.editorial-figure figcaption {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  font-size: 0.76rem;
  gap: 0.5rem 1.25rem;
  justify-content: space-between;
  line-height: 1.45;
  margin-top: 0.65rem;
}

.editorial-figure figcaption small {
  color: inherit;
  flex: 0 0 auto;
  font-size: 0.68rem;
}

.editorial-cluster .editorial-card {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.editorial-card > a {
  display: block;
  height: 100%;
  text-decoration: none;
}

.editorial-card img {
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--line);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.editorial-card-copy {
  color: var(--muted);
  display: block;
  line-height: 1.55;
  padding: 1.15rem 1.25rem 1.35rem;
}

.editorial-card h3 {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 0.65rem;
}

.editorial-card-description {
  margin: 0;
}

.editorial-card a:hover h3 {
  color: var(--ghostget-action, var(--accent));
}

.preview-flow li {
  color: var(--dark-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.67rem, 1.8vw, 0.78rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.preview-flow li + li {
  border-left: 1px solid var(--dark-line);
  padding-left: clamp(0.75rem, 3vw, 1.5rem);
}

.preview-flow span {
  color: var(--accent-bright);
  margin-right: 0.35rem;
}

@media (max-width: 62rem) {
  .hero-glyph {
    opacity: 0.065;
    right: -6rem;
  }

  .flow {
    grid-template-columns: 1fr;
  }

  .flow li {
    border-left: 1px solid var(--dark-line);
    border-top: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding: 0 0 2rem 1.5rem;
  }

  .flow li::before {
    left: -0.42rem;
    top: 0;
  }

  .flow-index {
    margin: 0;
  }

  .start-section,
  .technical-section {
    grid-template-columns: 1fr;
  }

  .provider-directory,
  .provider-directory-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 45rem) {
  .topbar:not(.guide-topbar) nav a {
    display: none;
  }

  .topbar:not(.guide-topbar) nav a:nth-child(2),
  .topbar:not(.guide-topbar) nav a:last-child {
    display: block;
  }

  .guide-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-topbar nav {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    width: 100%;
  }

  .guide-topbar nav a,
  .guide-topbar nav a:not(:last-child) {
    display: block;
    flex: 0 0 auto;
  }

  .hero {
    min-height: 0;
  }

  .hero::before {
    mask-image: linear-gradient(180deg, black, transparent);
  }

  .hero-field {
    opacity: 0.72;
  }

  .card-grid,
  .principle-grid,
  .provider-directory,
  .provider-directory-guide,
  .provider-channel-grid,
  .provider-action-grid {
    grid-template-columns: 1fr;
  }

  .provider-card-featured {
    grid-column: auto;
  }

  .provider-card {
    min-height: 0;
  }

  .provider-adapter summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .provider-adapter summary span:last-child {
    margin-left: 0;
    width: calc(100% - 2rem);
  }

  .card {
    min-height: 0;
  }

  .card-index {
    margin-bottom: 2rem;
  }

  .principle-grid article,
  .principle-grid article:nth-child(3n + 1) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 1.5rem 0;
  }

  .invariants > div {
    gap: 0.5rem;
    grid-template-columns: 1fr;
  }

  .final-section,
  .site-disclosure {
    align-items: stretch;
    flex-direction: column;
  }

  .site-disclosure {
    justify-content: center;
  }
}

@media (max-width: 32.5rem) {
  .skill-install-control {
    align-items: stretch;
    flex-wrap: wrap;
    padding-left: 0;
  }

  .skill-install-prompt {
    align-self: center;
    margin-left: 1rem;
  }

  .skill-install-command {
    width: calc(100% - 3rem);
  }

  .skill-install-copy {
    border-left: 0;
    border-top: 1px solid rgb(245 242 233 / 18%);
    min-height: 3rem;
    width: 100%;
  }

  .action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .action-row .button {
    width: 100%;
  }

  .proof-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .preview-shell {
    padding: 0;
  }

  .preview-card {
    border: 0;
    border-radius: 0;
    min-height: 100svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .hero,
  .preview-card,
  .section-dark,
  .site-disclosure,
  .topbar {
    background: Canvas;
    color: CanvasText;
  }

  .card,
  .command-panel,
  .prompt-card,
  .provider-card,
  .provider-mark,
  .skill-install-control,
  .skill-install-copy {
    background: Canvas;
  }

  .hero-field,
  .hero::before,
  .hero-glyph {
    display: none;
  }

  .preview-field,
  .preview-card::before {
    display: none;
  }

  .button {
    border-color: ButtonBorder;
  }
}


/* Ghostget binds the shared Hraness product-marketing grammar:
 * one text face, paper surfaces, hairline chrome, and soft radii. The rules
 * below restyle the shared page chrome and then bind the homepage roles. Site
 * CSS sits outside the design-kit cascade layers, so link color stays scoped
 * to prose surfaces and never reaches marketing actions or navigation. */

body {
  font-size: 1rem;
  line-height: 1.55;
}

/* Site header. The homepage uses the marketing header; guides keep .topbar
 * with the same treatment so the family reads as one site. */
.topbar {
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  background: color-mix(in srgb, var(--background) 82%, transparent);
  border-bottom: 1px solid var(--line);
  color: var(--foreground);
  gap: 0.75rem 1.5rem;
  min-height: 3.5rem;
  padding: 0.6rem max(var(--page-inline), env(safe-area-inset-right)) 0.6rem max(var(--page-inline), env(safe-area-inset-left));
  position: sticky;
  z-index: 40;
}

.topbar nav {
  flex-wrap: wrap;
  gap: 0.15rem 1.35rem;
}

.topbar nav a {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
}

.topbar nav a:hover,
.topbar nav a[aria-current="page"] {
  color: var(--foreground);
}

.wordmark {
  align-items: center;
  color: var(--foreground);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  gap: 0.45rem;
  letter-spacing: -0.01em;
}

/* The wordmark icon matches the marketing contract's 1.25rem line height. */
.wordmark img {
  block-size: 1.25rem;
  display: inline-block;
  inline-size: auto;
}

/* Labels: sentence case in the text face. Monospace stays with code. */
.eyebrow,
.prompt-label,
.skill-install-label,
.command-label {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.section-heading .eyebrow,
.guide-hero .eyebrow,
.route-state .eyebrow {
  margin: 0 0 0.75rem;
}

/* Headings: one measured scale at weight 500. */
.hero h1,
.guide-hero h1,
.section-heading h2,
.guide-article > section > h2,
.guide-callout h2,
.final-section h2,
.route-state h1,
.preview-copy h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.05;
  text-wrap: balance;
}

.guide-hero h1,
.route-state h1 {
  font-size: var(--hraness-paper-heading-size);
  margin: 0 0 1.25rem;
  max-width: 22ch;
}

.section-heading h2,
.guide-article > section > h2,
.guide-callout h2,
.final-section h2 {
  font-size: var(--hraness-paper-section-heading-size);
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.section-heading > p:last-child,
.guide-article section > p,
.guide-callout p,
.answer-lede {
  color: var(--muted);
}

.section-heading > p:last-child {
  font-size: 1.125rem;
  line-height: 1.5;
  margin: 0;
}

.answer-lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  letter-spacing: 0;
  line-height: 1.5;
  margin: 1.25rem 0 0;
}

.review-note {
  margin-top: 1rem;
}

.guide-article section > p,
.guide-callout p,
.guide-list,
.guide-steps {
  font-size: 1rem;
  line-height: 1.6;
}

.provider-attestation-group > h3 {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.editorial-card h3 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

/* Actions */
.button {
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
}

.button:hover {
  transform: none;
}

.button-primary {
  background: var(--ghostget-action, var(--accent));
  border-color: var(--ghostget-action, var(--accent));
  color: var(--accent-ink);
}

.button-primary:hover {
  background: color-mix(in srgb, var(--ghostget-action, var(--accent)) 86%, black);
  border-color: color-mix(in srgb, var(--ghostget-action, var(--accent)) 86%, black);
}

.button-secondary,
.button-quiet {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--foreground);
}

.button-secondary:hover,
.button-quiet:hover {
  background: color-mix(in srgb, var(--foreground) 6%, var(--surface));
}

/* Agent Skill install control */
.skill-install {
  margin: 0;
  max-width: none;
}

.skill-install-label {
  margin-bottom: 0.5rem;
}

.skill-install-control {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
  min-height: 3.25rem;
}

.skill-install-prompt {
  color: var(--ghostget-action, var(--accent));
  font-weight: 600;
}

.skill-install-control .skill-install-command {
  background: transparent;
  border-radius: 0;
  color: var(--foreground);
  font-size: 0.85rem;
  min-height: 3.15rem;
  padding: 0;
}

.skill-install-copy {
  background: transparent;
  border-left-color: var(--line);
  border-radius: 0;
  color: var(--foreground);
  font-size: 0.85rem;
  font-weight: 500;
}

.skill-install-copy:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.skill-install-copy[data-copy-state="copied"] {
  background: var(--ghostget-action, var(--accent));
  color: var(--accent-ink);
}

.skill-install-note {
  color: var(--muted);
  font-size: 0.88rem;
}

.content,
.guide-main {
  margin: 0 auto;
  max-width: 80rem;
  padding-inline: var(--page-inline);
}

.section {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  padding: var(--section-block) 0;
}

.content > .section:first-child {
  border-top: 0;
}

.section-heading,
.section-heading-wide {
  max-width: 40rem;
}

/* Cards */
.card-grid {
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  min-height: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.card h3 a {
  color: var(--foreground);
  text-decoration-color: var(--line-strong);
}

.card h3 a:hover {
  text-decoration-color: var(--ghostget-action, var(--accent));
}

.card p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0.6rem 0 0;
}

.editorial-cluster .editorial-card {
  padding: 0;
}

.editorial-card img {
  border-bottom: 1px solid var(--line);
}

.editorial-card-copy {
  padding: 1.1rem 1.25rem 1.3rem;
}

.editorial-card a:hover h3 {
  color: var(--ghostget-action, var(--accent));
}

/* Provider directory: compact cards with name, count, and access method. */
.provider-directory {
  border: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2rem, 5vw, 3rem);
}

.provider-card,
.provider-card-featured {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  min-height: 0;
  padding: 1.1rem 1.15rem 1.2rem;
}

.provider-card-featured {
  grid-column: span 2;
}

.provider-card-heading {
  gap: 0.65rem;
}

.provider-mark {
  background: color-mix(in srgb, var(--provider-accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--provider-accent) 32%, var(--line));
  border-radius: 0.5rem;
  color: color-mix(in srgb, var(--provider-accent) 80%, var(--foreground));
  display: inline-flex;
  flex: 0 0 auto;
  height: 2rem;
  width: 2rem;
}

.provider-icon {
  height: 1.05rem;
  width: 1.05rem;
}

.provider-card h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.provider-card h3 a {
  color: var(--foreground);
  text-decoration: none;
}

.provider-card h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ghostget-action, var(--accent));
}

.provider-card .provider-state {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.85rem;
}

.provider-card .provider-state strong {
  font-weight: 500;
}

.provider-capabilities {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 0.3rem;
}

.provider-transport {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0;
  margin-top: auto;
  padding-top: 0.85rem;
  text-transform: none;
}

.provider-adapter-count {
  display: none;
}

.provider-feature-copy {
  color: var(--muted);
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-top: 0.6rem;
  max-width: 36rem;
}

.provider-status-note {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 1.25rem 0 0;
  padding: 0;
}

.provider-actions,
.guide-actions {
  margin-top: 1.25rem;
}

.provider-directory-guide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Command panels */
.command-panel,
.prompt-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.command-label {
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
}

.command-label span:last-child {
  font-family: var(--font-mono);
}

.command-panel pre {
  background: var(--code-background);
  color: var(--code-foreground);
  margin: 0;
  padding: 1.1rem 1.25rem;
}

.command-panel code {
  font-size: 0.82rem;
  line-height: 1.7;
}

.prompt-card {
  padding: 1.1rem 1.25rem;
}

.prompt-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.prompt-card .prompt-label {
  margin-bottom: 0.4rem;
}

/* Tables, callouts, and guide chrome */
.table-scroll {
  margin-top: clamp(2rem, 5vw, 3rem);
}

.table-scroll thead th {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.table-scroll tbody th {
  font-weight: 600;
}

.table-scroll td {
  font-size: 0.95rem;
}

.guide-callout,
.review-note,
.invariants > div,
.faq-list details {
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}

.guide-callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.guide-callout p {
  margin: 0;
  max-width: 52rem;
}

.invariants dt {
  font-size: 0.95rem;
  font-weight: 600;
}

.guide-main {
  padding-block: clamp(2rem, 5vw, 4rem) var(--section-block);
}

.breadcrumbs {
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 58rem;
}

.guide-article {
  max-width: 58rem;
}

.guide-hero {
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.guide-article > section {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.guide-article > section > :not(.table-scroll, .command-panel) {
  max-width: none;
}

.demo-transcript summary {
  font-weight: 600;
}

.provider-attestation-groups {
  border-bottom: 1px solid var(--line);
}

.provider-attestation-group {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0 2rem;
}

.provider-attestation-group > p {
  color: var(--muted);
  margin: 0.4rem 0 1.25rem;
}

.provider-operation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.provider-operation-list li {
  align-items: start;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.32fr);
  padding: 0.9rem 0;
}

.provider-operation-list li > span:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.provider-operation-list strong {
  font-weight: 600;
}

.provider-operation-list code {
  background: transparent;
  color: var(--muted);
  padding: 0;
}

.provider-operation-list li > span:last-child {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

.site-disclosure {
  background: var(--background);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  padding-inline: var(--page-inline);
}

.site-disclosure a {
  color: var(--foreground);
}

/* Inert social preview keeps its dark card; only the type changes. */
.preview-body,
.preview-card {
  background: var(--dark-background);
  color: var(--dark-foreground);
}

.preview-card {
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.preview-card::before,
.preview-field {
  display: none;
}

.preview-wordmark {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.preview-copy h1 {
  color: var(--dark-foreground);
  font-size: clamp(3rem, 7vw, 6.4rem);
  line-height: 0.98;
}

.preview-flow {
  background: transparent;
  border-color: var(--dark-line);
  border-radius: var(--radius-sm);
}

/* Server-rendered public discovery links from @hraness/ui. */
.ghostget-ask-ai {
  width: min(calc(100% - 2 * var(--page-inline)), 72rem);
  margin: 2.5rem auto 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.ghostget-ask-ai [data-slot="ask-ai-about-this-label"] {
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.ghostget-ask-ai,
.ghostget-ask-ai [data-slot="ask-ai-about-this-links"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ghostget-ask-ai [data-slot="ask-ai-about-this-link"] {
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.875rem;
  padding: 0 0.625rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  color: inherit;
  gap: 0.25rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.ghostget-ask-ai [data-slot="ask-ai-about-this-link"]:hover {
  background-color: transparent;
  border-color: currentColor;
  color: var(--foreground);
}

.ghostget-ask-ai [data-slot="ask-ai-about-this-link"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ghostget-ask-ai [data-slot="ask-ai-about-this-icon"] {
  display: block;
  flex: 0 0 auto;
}

@media (pointer: coarse) {
  .ghostget-ask-ai [data-slot="ask-ai-about-this-link"] {
    min-height: 3rem;
  }
}

/* Homepage: the shared marketing grammar bound to Ghostget content. */
.hraness-marketing-page {
  --hraness-marketing-inverse: var(--code-background);
  --hraness-marketing-inverse-ink: var(--code-foreground);
  padding-block-end: clamp(2rem, 6vw, 4rem);
}

/* The editorial snapshot owns type; Lantern owns material paint. */
[data-hraness-marketing-preset] .hraness-marketing-page {
  --hraness-marketing-background: transparent;
  --hraness-marketing-heading-font: var(--hraness-marketing-display-font);
  --hraness-marketing-heading-weight: var(--hraness-marketing-display-weight);
  --hraness-marketing-ink: var(--hraness-material-ink);
  --hraness-marketing-muted: var(--hraness-material-muted);
}

.hraness-marketing-header .wordmark {
  display: inline-flex;
  align-items: center;
}

.hraness-marketing-header__nav a span,
.hraness-marketing-maker__links a span {
  font-size: 0.85em;
}

.ghostget-product-hero {
  grid-column: 1 / -1;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: var(--hraness-marketing-hero-space, 3.5rem 4rem);
}

.ghostget-product-hero .hraness-marketing-hero__heading {
  max-inline-size: 18ch;
  font-size: var(--hraness-paper-heading-size);
}

.ghostget-product-hero .hraness-marketing-hero__copy {
  gap: 1.1rem;
}

.ghostget-product-hero .hero-explainer {
  color: var(--hraness-material-muted, var(--muted));
}

.ghostget-product-hero .hraness-marketing-hero__frame {
  min-inline-size: 0;
  margin-block-start: 0;
}

@media (min-width: 62rem) {
  .ghostget-product-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.hraness-marketing-header :where(a, button) {
  min-block-size: 2.75rem;
}

.hraness-marketing-header__nav a {
  display: inline-flex;
  align-items: center;
}

.hraness-marketing-action[data-emphasis="primary"] {
  color: var(--accent-ink);
}

.hraness-marketing-page ::selection {
  background-color: var(--hraness-material-warm-plane);
  color: var(--hraness-material-ink);
}

.proof-transcript {
  background: var(--code-background);
  border-radius: 0;
  color: var(--code-foreground);
  font-size: 0.84rem;
  line-height: 1.65;
  margin: 0;
  overflow-x: auto;
  padding: 1.15rem 1.35rem;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.proof-transcript code {
  font-size: inherit;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.proof-transcript__prompt {
  color: var(--accent-bright);
}

.proof-transcript__meta {
  color: var(--code-muted);
}

.hraness-marketing-proof-frame__caption code {
  font-size: 0.9em;
}

.hraness-marketing-pillars {
  --hraness-marketing-pillar-columns: 3;
}

.start-section.hraness-marketing-install {
  margin-block: var(--section-block) 0;
}

.install-summary {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0.25rem 0 0;
}

.start-section .skill-install {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.25rem;
}

.command-stack {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

/* The provider heading carries only its id, so it takes the grammar's recipe here. */
.hraness-marketing-section__heading-group > h2 {
  color: var(--hraness-material-ink, var(--foreground));
  font-family: var(--hraness-marketing-display-font, var(--font-sans));
  font-size: var(--hraness-paper-section-heading-size);
  font-weight: var(--hraness-marketing-display-weight, 500);
  letter-spacing: var(--hraness-marketing-h2-tracking, -0.012em);
  line-height: var(--hraness-marketing-h2-leading, 1.15);
  margin: 0;
  text-wrap: balance;
}

.hraness-marketing-section__body > .provider-directory,
.hraness-marketing-section__body > .table-scroll {
  margin-top: 0;
}

.hraness-marketing-interface pre {
  background: var(--code-background);
  border: 0;
  color: var(--code-foreground);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  padding: 0.9rem 1rem;
  white-space: pre-wrap;
}

.hraness-marketing-question__answer p {
  margin: 0 0 0.75rem;
}

.hraness-marketing-question__answer p:last-child {
  margin-bottom: 0;
}

/* Link color is scoped to prose surfaces; actions and navigation inherit. */
:where(.install-summary, .skill-install-note, .provider-status-note, .hraness-marketing-question__answer, .hraness-marketing-maker__links, .hraness-marketing-proof-frame__caption, .hraness-marketing-section__body > p) a {
  color: var(--ghostget-action, var(--accent));
}

.home-reading {
  inline-size: min(100%, 72rem);
  margin-inline: auto;
  padding-inline: var(--page-inline);
}

@media (max-width: 62rem) {
  .provider-directory,
  .provider-directory-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  /* Keep the five homepage links together without shrinking their hit targets. */
  [data-hraness-marketing-preset="editorial"] .hraness-marketing-header__nav {
    gap: 0.25rem;
  }

  [data-hraness-marketing-preset="editorial"] .hraness-marketing-header__nav a {
    font-size: 0.875rem;
  }

  [data-hraness-marketing-preset="editorial"] .hraness-marketing-page > section[id] {
    scroll-margin-block-start: 8.75rem;
  }

  .start-section.hraness-marketing-install {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 23rem) {
  /* Below 368px, allow natural navigation wrapping and clear its extra row. */
  [data-hraness-marketing-preset="editorial"] .hraness-marketing-page > section[id] {
    scroll-margin-block-start: 11.5rem;
  }
}

@media (max-width: 45rem) {
  .topbar {
    align-items: center;
    flex-wrap: wrap;
  }

  .topbar nav {
    gap: 0.15rem 1rem;
  }

  .provider-directory,
  .provider-directory-guide {
    grid-template-columns: 1fr;
  }

  .provider-card-featured {
    grid-column: auto;
  }

  .provider-operation-list li {
    grid-template-columns: 1fr;
  }

  .provider-operation-list li > span:last-child {
    text-align: left;
  }

  .editorial-figure figcaption {
    display: block;
  }

  .editorial-figure figcaption small {
    display: block;
    margin-top: 0.25rem;
  }
}

@media (max-width: 32.5rem) {
  .skill-install-copy {
    border-top-color: var(--line);
  }
}

@media (forced-colors: active) {
  .provider-card,
  .card,
  .command-panel,
  .prompt-card,
  .guide-callout,
  .topbar,
  .site-disclosure {
    background: Canvas;
    border-color: CanvasText;
    color: CanvasText;
  }
}

[data-hraness-theme="paper"] .hraness-marketing-hero__heading {
  font-weight: var(--hraness-marketing-heading-weight);
  line-height: var(--hraness-marketing-h1-leading, var(--hraness-paper-heading-leading));
  letter-spacing: var(--hraness-marketing-h1-tracking, var(--hraness-paper-heading-tracking));
}
[data-hraness-theme="paper"] .hraness-marketing-page h2 {
  font-size: var(--hraness-paper-section-heading-size);
  font-weight: var(--hraness-marketing-display-weight, 500);
  line-height: var(--hraness-marketing-h2-leading, 1.2);
  letter-spacing: var(--hraness-marketing-h2-tracking, -.025em);
}
[data-hraness-theme="paper"] .hraness-marketing-hero__summary {
  font-size: var(--hraness-paper-summary-size);
  line-height: 1.6;
}
[data-hraness-theme="paper"] .hraness-marketing-proof-frame {
  --hraness-marketing-inverse: var(--code-background);
  --hraness-marketing-inverse-ink: var(--code-foreground);
  box-shadow: none;
}

/* Bind existing native surfaces to the shared material without changing their
 * layout, control semantics, inert preview documents or fixed transcript ink. */
[data-hraness-material="lantern"] .hraness-marketing-header.hraness-material-chrome {
  background-color: var(--hraness-material-chrome-paint);
  border-block-end-color: var(--hraness-material-seam);
  -webkit-backdrop-filter: var(--hraness-material-chrome-blur);
  backdrop-filter: var(--hraness-material-chrome-blur);
}

[data-hraness-material="lantern"] :is(.provider-card, .card, .prompt-card, .control-frame) {
  background-color: var(--hraness-material-plane);
  border-color: var(--hraness-material-seam);
  color: var(--hraness-material-ink);
}

[data-hraness-material="lantern"] .hraness-material-disclosure[open] > summary {
  background-color: var(--hraness-material-warm-plane);
  color: var(--hraness-material-ink);
}

@media (forced-colors: active) {
  [data-hraness-material="lantern"] .hraness-material-disclosure[open] > summary {
    background-color: Highlight;
    color: HighlightText;
  }
}

/* Decorative topic icons (agent-generated line art, public/icons/). */
.ghostget-topic-icon { display: block; width: 88px; height: 88px; margin: 0 0 18px; }
.hraness-marketing-pillars .ghostget-topic-icon { margin: 0 0 14px; }

/* Opt-in marketing contract 1. Asset URLs stay relative in packages and snapshots. */
@font-face {
  font-family: "Instrument Serif";
  src: url("./fonts/instrument-serif/instrument-serif-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@layer components.hraness-design-kit.legacy {
  :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
    --hraness-marketing-display-font: "Instrument Serif", Georgia, serif;
    --hraness-marketing-h1-size: clamp(2.75rem, 5.1vw, 4rem);
    --hraness-marketing-h1-leading: 1.06;
    --hraness-marketing-h1-tracking: -.025em;
    --hraness-marketing-h2-size: clamp(2.4rem, 4vw, 3.25rem);
    --hraness-marketing-h2-leading: 1.08;
    --hraness-marketing-h2-tracking: -.02em;
    --hraness-marketing-display-weight: 400;
    --hraness-marketing-content-measure: 70rem;
    --hraness-marketing-header-measure: 76rem;
    --hraness-marketing-header-height: 4.5rem;
    --hraness-marketing-gutter: 2rem;
    --hraness-marketing-hero-space: 3.5rem 4rem;
    --hraness-marketing-story-space: 5rem;
    --hraness-marketing-summary-leading: 1.6;
    --hraness-marketing-header-action-height: 2.625rem;
    --hraness-marketing-field-ink: light-dark(#242a2f, #eceee9);
    --hraness-marketing-field-muted: light-dark(#515d68, #c2c9ce);
    --hraness-marketing-link: light-dark(#345474, #c2d3e4);
    --hraness-marketing-field-gradient: linear-gradient(180deg, light-dark(#f0efea, #292b28) 0%, light-dark(#dce1df, #343b3d) 34%, light-dark(#c9d3dd, #424e65) 70%, light-dark(#e3e7e8, #2f3843) 100%);
    --hraness-marketing-field-images: url("./marketing-assets/grain.svg"), url("./marketing-assets/cells.svg"), var(--hraness-marketing-field-gradient);
    --hraness-marketing-field-size: 64px 64px, 48rem 48rem, 100% 100%;
    --hraness-material-wall-grain: url("./marketing-assets/grain.svg");
    --hraness-material-wall-cells: url("./marketing-assets/cells.svg");
    --hraness-material-wall-cell-size: calc(var(--hraness-material-module, 6rem) * 8);
    --hraness-marketing-terminal-background: light-dark(#f3f2ee, #20211f);
    --hraness-marketing-terminal-ink: light-dark(#262923, #e8eae5);
    --hraness-marketing-terminal-muted: light-dark(#596052, #bfc6b6);
    --hraness-marketing-terminal-command: light-dark(#36543d, #c4d9b9);
    --hraness-marketing-terminal-chrome: linear-gradient(light-dark(#f8f7f3, #393b36), light-dark(#e7e6e0, #292b27));
    --hraness-marketing-terminal-shadow: inset 0 1px 0 light-dark(#ffffffb3, #ffffff1f), 0 2px 4px #00000014, 0 18px 40px -12px #00000040, 0 44px 80px -30px #00000052;
  }

  [data-hraness-marketing-preset="minimal"] {
    --hraness-marketing-display-font: var(--font-text, "Nebula Sans", ui-sans-serif, system-ui, sans-serif);
    --hraness-marketing-display-weight: 500;
    --hraness-marketing-h1-size: clamp(1.75rem, 3vw, 2.375rem);
    --hraness-marketing-h1-leading: 1.15;
    --hraness-marketing-h1-tracking: -.035em;
    --hraness-marketing-h2-size: clamp(1.25rem, 2.2vw, 1.75rem);
    --hraness-marketing-h2-leading: 1.15;
    --hraness-marketing-h2-tracking: -.02em;
    --hraness-marketing-header-height: 2.8125rem;
    --hraness-marketing-hero-space: 2rem 3rem;
    --hraness-marketing-story-space: 3rem;
    --hraness-marketing-field-images: none;
  }

  /* Role-local bindings override the legacy role defaults as well as serving
     compiled recipes. Application headings outside these hooks stay untouched. */
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]),
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(
    .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero,
    .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
    .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
    .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
    .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta,
    .hraness-marketing-proof-frame
  ) {
    --hraness-marketing-heading-font: var(--hraness-marketing-display-font);
    --hraness-marketing-heading-weight: var(--hraness-marketing-display-weight);
    --hraness-marketing-heading-tracking: var(--hraness-marketing-h1-tracking);
    --hraness-paper-heading-size: var(--hraness-marketing-h1-size);
    --hraness-paper-section-heading-size: var(--hraness-marketing-h2-size);
    --hraness-paper-summary-size: 1.0625rem;
    --hraness-marketing-measure: var(--hraness-marketing-content-measure);
    --hraness-marketing-copy-measure: 48ch;
    --hraness-marketing-radius: .5rem;
    --hraness-marketing-frame-radius: .875rem;
    --hraness-marketing-section-space: var(--hraness-marketing-story-space);
    --hraness-marketing-action-height: 2.625rem;
    --hraness-marketing-line: color-mix(in oklch, var(--hraness-marketing-ink) 7%, transparent);
    --hraness-marketing-shadow: var(--hraness-marketing-terminal-shadow);
    --hraness-marketing-frame-chrome: var(--hraness-marketing-terminal-chrome);
  }

  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(
    .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero,
    .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
    .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
    .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
    .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta,
    .hraness-marketing-proof-frame
  ):not([data-hraness-marketing-preset]) {
    --hraness-marketing-gutter: inherit;
  }

  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-header {
    --hraness-marketing-measure: var(--hraness-marketing-header-measure);
  }
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-header__inner {
    min-block-size: var(--hraness-marketing-header-height);
  }
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-hero {
    padding-block: var(--hraness-marketing-hero-space);
  }
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-hero__heading {
    font-family: var(--hraness-marketing-display-font);
    font-size: var(--hraness-marketing-h1-size);
    font-weight: var(--hraness-marketing-display-weight);
    letter-spacing: var(--hraness-marketing-h1-tracking);
    line-height: var(--hraness-marketing-h1-leading);
  }
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-section__heading, .hraness-marketing-install__heading, .hraness-marketing-primitives__heading, .hraness-marketing-interfaces__heading, .hraness-marketing-trust__heading, .hraness-marketing-quotes__heading, .hraness-marketing-pricing__heading, .hraness-marketing-questions__heading, .hraness-marketing-maker__heading, .hraness-marketing-cta__heading) {
    font-family: var(--hraness-marketing-display-font);
    font-size: var(--hraness-marketing-h2-size);
    font-weight: var(--hraness-marketing-display-weight);
    line-height: var(--hraness-marketing-h2-leading);
    letter-spacing: var(--hraness-marketing-h2-tracking);
  }
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-hero__summary {
    line-height: var(--hraness-marketing-summary-leading, 1.6);
  }

  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-action {
    min-block-size: var(--hraness-marketing-action-height);
    border-radius: var(--hraness-marketing-radius);
  }
  @media (pointer: coarse) {
    :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
      --hraness-marketing-header-action-height: 3rem;
    }
    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-action {
      min-block-size: 3rem;
    }
  }

  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field > :where(.hraness-marketing-hero, .hraness-marketing-section, .hraness-marketing-pillars, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta) {
    padding-inline: var(--hraness-marketing-gutter);
  }

  /* This is a background on a flow container, never an overlay on content. */
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]).hraness-marketing-field,
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field {
    background-image: var(--hraness-marketing-field-images);
    background-position: 0 0, center top, 0 0;
    background-size: var(--hraness-marketing-field-size);
    color: var(--hraness-marketing-field-ink);
    position: relative;
  }
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]).hraness-marketing-field:not([data-tone="accent"]),
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field:where(.hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero, .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta, .hraness-marketing-proof-frame):not([data-tone="accent"]),
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field :where(.hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero, .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta, .hraness-marketing-proof-frame):not([data-tone="accent"]) {
    --hraness-marketing-ink: var(--hraness-marketing-field-ink);
    --hraness-marketing-muted: var(--hraness-marketing-field-muted);
  }
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-brand-mark {
    object-fit: contain;
    flex: 0 0 auto;
    filter: none;
    mask-image: none;
    background-image: none;
  }

  /* Legacy releases require string labels. Empty labels may omit the slot;
     nonempty product facts remain visible and are never hidden by a preset. */
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-hero__name, .hraness-marketing-hero__eyebrow, .hraness-marketing-section__label, .hraness-marketing-install__eyebrow, .hraness-marketing-questions__label, .hraness-marketing-primitives__label, .hraness-marketing-interfaces__label, .hraness-marketing-trust__label, .hraness-marketing-quotes__label, .hraness-marketing-pricing__label, .hraness-marketing-maker__label):empty {
    display: none;
  }

  /* Paint-only hook: no header position, dimensions, or navigation layout. */
  .hraness-marketing-header-surface,
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]):where(.hraness-marketing-header, .hraness-marketing-header-surface),
    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-header, .hraness-marketing-header-surface) {
    --hraness-marketing-header-background: var(--background, Canvas);
    --hraness-marketing-header-backdrop: none;
    background-color: var(--hraness-marketing-header-background);
  }
  @supports (-webkit-backdrop-filter: blur(1px)) {
    .hraness-marketing-header-surface,
    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]):where(.hraness-marketing-header, .hraness-marketing-header-surface),
    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-header, .hraness-marketing-header-surface) {
      --hraness-marketing-header-background: color-mix(in oklch, var(--background, Canvas) 82%, transparent);
      --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
      -webkit-backdrop-filter: var(--hraness-marketing-header-backdrop);
    }
  }
  @supports (backdrop-filter: blur(1px)) {
    .hraness-marketing-header-surface,
    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]):where(.hraness-marketing-header, .hraness-marketing-header-surface),
    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-header, .hraness-marketing-header-surface) {
      --hraness-marketing-header-background: color-mix(in oklch, var(--background, Canvas) 82%, transparent);
      --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
      backdrop-filter: var(--hraness-marketing-header-backdrop);
    }
  }
  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    .hraness-marketing-header-surface,
    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]):where(.hraness-marketing-header, .hraness-marketing-header-surface),
    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) :where(.hraness-marketing-header, .hraness-marketing-header-surface) {
      --hraness-marketing-header-background: var(--background, Canvas);
      --hraness-marketing-header-backdrop: none;
    }
  }
  @media (max-width: 760px) {
    :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
      --hraness-marketing-gutter: 1.25rem;
      --hraness-marketing-hero-space: 2.75rem 4.5rem;
      --hraness-marketing-story-space: 3.5rem;
      --hraness-marketing-field-size: 64px 64px, 36rem 36rem, 100% 100%;
      --hraness-material-module: 4.5rem;
    }
    [data-hraness-marketing-preset="minimal"] {
      --hraness-marketing-hero-space: 2rem 3rem;
      --hraness-marketing-story-space: 3rem;
    }
  }
  @media (forced-colors: active) {
    :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
      --hraness-marketing-field-images: none;
      --hraness-marketing-field-ink: CanvasText;
      --hraness-marketing-field-muted: CanvasText;
      --hraness-marketing-link: LinkText;
    }
    :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]).hraness-marketing-field,
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-field {
      background: Canvas;
    }
  }
}


/* Lantern is an opt-in material, independent of palette and typography.
 * All paint is deterministic CSS. No texture is placed over meaningful content. */
@layer base {
  [data-hraness-material="lantern"] {
    --hraness-material-module: 6rem;
    --hraness-material-warm: #d49a54;
    --hraness-material-cool: #8d9fc5;
    --hraness-material-plane: var(--surface, var(--ui-background, Canvas));
    --hraness-material-ink: var(--foreground, var(--ui-foreground, CanvasText));
    --hraness-material-muted: var(--muted, var(--ui-muted-foreground, CanvasText));
    --hraness-material-seam: color-mix(in oklch, var(--hraness-material-ink) 7%, var(--hraness-material-plane));
    --hraness-material-edge: color-mix(in oklch, white 18%, transparent);
    --hraness-material-shade: color-mix(in oklch, black 14%, transparent);
    --hraness-material-warm-plane: color-mix(in oklch, var(--hraness-material-warm) 12%, var(--hraness-material-plane));
    --hraness-material-inset: inset 2px 3px 6px color-mix(in oklch, black 9%, transparent), inset -1px -1px 2px color-mix(in oklch, white 12%, transparent);
    --hraness-material-lift: inset 0 1px 0 var(--hraness-material-edge), -3px -3px 10px color-mix(in oklch, white 4%, transparent), 2px 4px 8px color-mix(in oklch, black 7%, transparent), 8px 18px 40px color-mix(in oklch, black 9%, transparent);
    --hraness-material-focus: var(--focus, var(--ui-ring, Highlight));
    --hraness-material-duration: 160ms;
  }
}

@layer components.hraness-design-kit.legacy {
  /* A quiet, opaque reading plane. The seam belongs to the surface perimeter. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-pane) {
    background-color: var(--hraness-material-plane);
    border: 1px solid var(--hraness-material-seam);
    border-radius: var(--radius-lg, 0.75rem);
    color: var(--hraness-material-ink);
    min-inline-size: 0;
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-pane[data-depth="raised"]) {
    box-shadow: var(--hraness-material-lift);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-pane[data-depth="inset"]) {
    background-color: color-mix(in oklch, var(--background, Canvas) 70%, var(--hraness-material-plane));
    box-shadow: var(--hraness-material-inset);
  }

  /* A translucent enclosure, only where content actually passes behind it.
   * Resolve these tokens on the chrome itself for nested palette islands. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
    --hraness-material-chrome-paint: var(--surface, var(--ui-background, Canvas));
    --hraness-material-chrome-blur: none;
    background-color: var(--hraness-material-chrome-paint);
    border-block-end: 1px solid var(--hraness-material-seam);
    box-shadow: inset 0 1px 0 var(--hraness-material-edge), 0 4px 12px color-mix(in oklch, black 4%, transparent);
  }
  /* Bind the compiled TopBar's public paint seam at its own surface boundary. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome.hraness-design-top-bar[data-surface="glass"]) {
    --hraness-design-top-bar-background: var(--hraness-material-chrome-paint);
    --hraness-design-top-bar-backdrop: var(--hraness-material-chrome-blur);
  }
  @supports (-webkit-backdrop-filter: blur(1px)) {
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
      --hraness-material-chrome-paint: color-mix(in oklch, var(--surface, var(--ui-background, Canvas)) 90%, transparent);
      --hraness-material-chrome-blur: blur(20px) saturate(1.1);
      -webkit-backdrop-filter: var(--hraness-material-chrome-blur);
    }
  }
  @supports (backdrop-filter: blur(1px)) {
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
      --hraness-material-chrome-paint: color-mix(in oklch, var(--surface, var(--ui-background, Canvas)) 90%, transparent);
      --hraness-material-chrome-blur: blur(20px) saturate(1.1);
      backdrop-filter: var(--hraness-material-chrome-blur);
    }
  }

  /* Glazing uses shaded faces rather than drawn seams, with a warm band
   * of transmitted light. Its edges suggest a rounded enclosure without
   * distorting the document, blurring text, or masking brand artwork. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-wall) {
    background-color: var(--background, var(--ui-background, Canvas));
    background-image:
      var(--hraness-material-wall-grain, none),
      var(--hraness-material-wall-cells, linear-gradient(145deg, color-mix(in oklch, white 5%, transparent), transparent 48%, color-mix(in oklch, black 7%, transparent))),
      radial-gradient(ellipse at 60% 110%, color-mix(in oklch, var(--hraness-material-warm) 22%, transparent), transparent 68%),
      linear-gradient(110deg, color-mix(in oklch, var(--hraness-material-cool) 14%, transparent), transparent 38%, color-mix(in oklch, white 4%, transparent) 65%, transparent);
    background-size: 64px 64px, var(--hraness-material-wall-cell-size, var(--hraness-material-module)) var(--hraness-material-wall-cell-size, var(--hraness-material-module)), 100% 100%, 100% 100%;
    background-position: 0 0, center top, center top, center top;
    color: var(--hraness-material-ink);
  }

  /* A terminal remains a readable document. Source lines scroll intact;
   * only its enclosure catches light. Syntax spans inherit semantic colors. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-terminal) {
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--hraness-material-seam);
    border-radius: .875rem;
    background: var(--hraness-material-plane);
    color: var(--hraness-material-ink);
    box-shadow: var(--hraness-material-lift);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-terminal__bar) {
    padding: .8rem 1.25rem;
    background: linear-gradient(to bottom, color-mix(in oklch, white 5%, var(--hraness-material-plane)), var(--hraness-material-plane));
    box-shadow: inset 0 1px 0 var(--hraness-material-edge), 0 1px 3px color-mix(in oklch, black 8%, transparent);
    color: var(--hraness-material-muted);
    font: .8125rem/1.5 var(--font-mono, ui-monospace, monospace);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-code) {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    padding: 1.25rem;
    overflow: auto;
    background: var(--hraness-material-plane);
    color: var(--hraness-material-ink);
    font: .875rem/1.75 var(--font-mono, ui-monospace, monospace);
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    tab-size: 2;
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-code) code {
    background: none;
    padding: 0;
    font: inherit;
    white-space: inherit;
    overflow-wrap: inherit;
    word-break: inherit;
  }

  /* Plain HTML control adapters. Compiled UI primitives use the public
   * lanternControlStyles recipes through their documented controlXstyle seam.
   * Edge paint uses background images, leaving focus shadows and outlines alone. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-control) {
    background-image: linear-gradient(to bottom, var(--hraness-material-edge), transparent 2px);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-input) {
    background-image: linear-gradient(to bottom, var(--hraness-material-shade), transparent 4px);
    caret-color: var(--hraness-material-focus);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-choice[aria-pressed="true"], .hraness-material-choice[aria-selected="true"], .hraness-material-choice[data-selected]) {
    background-color: var(--hraness-material-warm-plane);
    color: var(--hraness-material-ink);
    background-image: linear-gradient(to top, var(--hraness-material-warm), var(--hraness-material-warm) 2px, transparent 2px);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-control:disabled, .hraness-material-control[aria-disabled="true"], .hraness-material-control[data-disabled], .hraness-material-input:disabled) {
    background-image: none;
  }

  /* A collection is a readable sequence, never a requirement to fill a grid.
   * Products own grouping, columns and the meaning of each row. */
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-rows) {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-rows > * + *) {
    border-block-start: 1px solid var(--hraness-material-seam);
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-disclosure > summary) {
    cursor: pointer;
    min-block-size: 2.75rem;
    padding-block: 0.75rem;
  }
  :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-disclosure > summary:focus-visible) {
    outline: 2px solid var(--hraness-material-focus);
    outline-offset: 3px;
  }
  [data-hraness-material="lantern"] ::selection {
    background-color: var(--hraness-material-warm-plane);
    color: var(--hraness-material-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-hraness-material="lantern"] { --hraness-material-duration: 0ms; }
  }
  @media (prefers-reduced-transparency: reduce) {
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-chrome) {
      --hraness-material-chrome-paint: var(--surface, var(--ui-background, Canvas));
      --hraness-material-chrome-blur: none;
    }
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-wall) { background-image: none; }
  }
  @media (forced-colors: active) {
    [data-hraness-material="lantern"] {
      --hraness-material-plane: Canvas;
      --hraness-material-ink: CanvasText;
      --hraness-material-muted: CanvasText;
      --hraness-material-seam: CanvasText;
      --hraness-material-focus: Highlight;
      --hraness-material-warm-plane: Canvas;
      --hraness-material-warm: Highlight;
      --hraness-material-edge: transparent;
      --hraness-material-inset: none;
      --hraness-material-lift: none;
    }
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-wall, .hraness-material-chrome, .hraness-material-pane, .hraness-material-terminal, .hraness-material-terminal__bar, .hraness-material-code) {
      --hraness-material-chrome-paint: Canvas;
      --hraness-material-chrome-blur: none;
      background-color: Canvas;
      background-image: none;
      box-shadow: none;
    }
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-control, .hraness-material-input, .hraness-material-choice) { background-image: none; }
    :where([data-hraness-material="lantern"], [data-hraness-material="lantern"] *):is(.hraness-material-choice[aria-pressed="true"], .hraness-material-choice[aria-selected="true"], .hraness-material-choice[data-selected]) {
      background-color: Highlight;
      color: HighlightText;
      background-image: none;
    }
  }
}