@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-sans);
  --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;
  --leading-body: 1.6;
  --leading-label: 1.5;
  --leading-heading: 1.2;
  --leading-display: 1.08;
  --tracking-heading: -0.025em;
  --tracking-display: -0.04em;
  --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;
  --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);
}

/* Opacity-only mixes use sRGB so low-chroma roles retain their source hue.
 * Recompute derived roles at every theme boundary. Custom-property references
 * otherwise resolve on the ancestor and retain its palette in a nested theme. */
:root,
[data-theme],
[data-palette],
.dark {
  --ui-surface-edge: color-mix(in srgb, var(--ui-border) 28%, transparent);
  --ui-surface-light: color-mix(in oklch, var(--ui-card) 94%, white);
  --ui-surface-shade: color-mix(in oklch, var(--ui-background) 55%, black);
  --ui-divider: color-mix(in srgb, var(--ui-border) 55%, transparent);
  --elevation-low: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-light) 72%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--ui-surface-shade) 20%, transparent), 0 4px 10px -6px color-mix(in srgb, var(--ui-surface-shade) 22%, transparent);
  --elevation-raised: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-light) 72%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--ui-surface-shade) 18%, transparent), 0 14px 28px -16px color-mix(in srgb, var(--ui-surface-shade) 30%, transparent);
  --elevation-overlay: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-light) 80%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--ui-surface-shade) 24%, transparent), 0 24px 64px -20px color-mix(in srgb, var(--ui-surface-shade) 38%, transparent);
  --elevation-inset: inset 0 2px 4px -2px color-mix(in srgb, var(--ui-surface-shade) 24%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ui-surface-light) 44%, transparent);
}

@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));
}

/* Decorative depth yields to explicit boundaries when more contrast is needed. */
@media (prefers-contrast: more) {
  :root,
  [data-theme],
  [data-palette],
  .dark {
    --ui-surface-edge: var(--ui-border);
    --ui-divider: var(--ui-border);
  }
}

@media (forced-colors: active) {
  :root,
  [data-theme],
  [data-palette],
  .dark {
    --ui-surface-edge: CanvasText;
    --ui-divider: CanvasText;
    --elevation-low: none;
    --elevation-raised: none;
    --elevation-overlay: none;
    --elevation-inset: none;
  }
}
@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: var(--text-body);
  line-height: var(--leading-body);
  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);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

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 srgb, 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);
  }

  .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));
  }

  .x1icxh44 {
    border-color: color-mix(in oklch,var(--ui-primary) 14%,var(--ui-surface-edge));
  }

  .xeg9rf5 {
    border-color: color-mix(in oklch,var(--ui-primary) 24%,var(--ui-surface-edge));
  }

  .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));
  }

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

  .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);
  }

  .xzfhy1j {
    border-color: var(--ui-surface-edge);
  }

  .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);
  }

  .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));
  }

  .x15t57y0:hover {
    border-color: color-mix(in oklch,var(--ui-primary) 24%,var(--ui-surface-edge));
  }

  .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;
  }

  .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));
  }

  .x1vcc7zd {
    background-color: color-mix(in oklch,var(--ui-muted) 45%,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));
  }

  .xxxkwf1 {
    background-color: #0000008c;
  }

  .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;
  }

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

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

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

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

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

  .x1rgiwas {
    border-block-start-color: var(--ui-surface-edge);
  }

  .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;
  }

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

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

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

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

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

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

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

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

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

  .xnn6phw {
    box-shadow: var(--elevation-inset);
  }

  .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;
  }

  .x19v85br {
    cursor: progress;
  }

  .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;
  }

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

  .xfui5fx {
    letter-spacing: var(--tracking-display);
  }

  .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;
  }

  .xo5v014 {
    line-height: 1;
  }

  .x15bjb6t {
    line-height: inherit;
  }

  .x19leq4e {
    line-height: var(--leading-body);
  }

  .x1oc5cu1 {
    line-height: var(--leading-display);
  }

  .x1db8ko7 {
    line-height: var(--leading-heading);
  }

  .x1ndthzm {
    line-height: var(--leading-label);
  }

  .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;
  }

  .x1hc1fzr {
    opacity: 1;
  }

  .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);
  }

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

  .x1w5n15d:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb,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;
    }

    .x17p5eq6.x17p5eq6 {
      border-block-end-color: canvastext;
    }

    .xl2up3y.xl2up3y {
      border-block-start-color: canvastext;
    }

    .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 {
  .x1vb8vg5 {
    border-bottom-color: color-mix(in srgb,currentColor 25%,transparent);
  }

  .x1ghr4ba {
    border-bottom-color: var(--ui-surface-edge);
  }

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

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

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

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

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

  .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");
}

/* Shared semantic rhythm. The reading scale (sizes, spacing) is consumed by
 * `.hraness-prose` and the plain-publication article grammar. Site headings
 * outside those grammars read the same per-level tokens: a heading at level N
 * takes `--hraness-type-hN-size`, `--hraness-type-hN-font`, and
 * `--hraness-type-hN-weight` instead of a site-local size and face.
 *
 * Legibility rule: the display face (often a condensed serif such as
 * Instrument Serif) is only used at `--hraness-type-display-min` (1.75rem) or
 * larger. h1 and h2 are display headings and never scale below that floor;
 * h3 and h4 use the text face, so a small heading is never set in the display
 * face. */
@layer base {
  :root {
    /* Shared studio category accents. Text names retain the foreground role. */
    --hraness-studio-rose: light-dark(#b03a5b, #f39cb5);
    --hraness-studio-indigo: light-dark(#4a4fbf, #a9adff);
    --hraness-studio-amber: light-dark(#9a5a00, #f0b659);
    --hraness-studio-emerald: light-dark(#1d7a55, #71d2a6);

    --hraness-type-reading-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
    --hraness-type-reading-leading: 1.7;
    --hraness-type-reading-measure: 70ch;
    --hraness-type-caption-size: .9375rem;
    --hraness-type-code-size: .9rem;
    --hraness-type-heading-leading: 1.2;
    --hraness-type-display-min: 1.75rem;
    --hraness-type-h1-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
    --hraness-type-h2-size: clamp(1.75rem, 1.45rem + .9vw, 2.125rem);
    --hraness-type-h3-size: clamp(1.25rem, 1.15rem + .4vw, 1.4375rem);
    --hraness-type-h4-size: 1.0625rem;
    /* The display face, for h1 and h2 only. */
    --hraness-type-heading-font: var(--hraness-marketing-display-font, var(--font-heading, var(--font-text, inherit)));
    --hraness-type-heading-weight: var(--hraness-marketing-display-weight, 600);
    /* The text face, for h3 and below. */
    --hraness-type-subheading-font: var(--font-text, inherit);
    --hraness-type-subheading-weight: 650;
    --hraness-type-h1-font: var(--hraness-type-heading-font);
    --hraness-type-h1-weight: var(--hraness-type-heading-weight);
    --hraness-type-h2-font: var(--hraness-type-heading-font);
    --hraness-type-h2-weight: var(--hraness-type-heading-weight);
    --hraness-type-h3-font: var(--hraness-type-subheading-font);
    --hraness-type-h3-weight: var(--hraness-type-subheading-weight);
    --hraness-type-h4-font: var(--hraness-type-subheading-font);
    --hraness-type-h4-weight: var(--hraness-type-subheading-weight);
    --hraness-type-section-space: clamp(2.75rem, 2rem + 2vw, 4rem);
    --hraness-type-subsection-space: 2rem;
  }

  /* Custom properties resolve where they are declared, so a face token set
   * on :root would keep :root's face inside a scope that changes the display
   * or text face (the marketing preset, the Paper theme, the serif reading
   * face). Re-derive the face and weight tokens in those scopes. */
  :where([data-hraness-marketing-preset], [data-hraness-theme], [data-hraness-reading-face]) {
    --hraness-type-heading-font: var(--hraness-marketing-display-font, var(--font-heading, var(--font-text, inherit)));
    --hraness-type-heading-weight: var(--hraness-marketing-display-weight, 600);
    --hraness-type-subheading-font: var(--font-text, inherit);
    --hraness-type-h1-font: var(--hraness-type-heading-font);
    --hraness-type-h1-weight: var(--hraness-type-heading-weight);
    --hraness-type-h2-font: var(--hraness-type-heading-font);
    --hraness-type-h2-weight: var(--hraness-type-heading-weight);
    --hraness-type-h3-font: var(--hraness-type-subheading-font);
    --hraness-type-h3-weight: var(--hraness-type-subheading-weight);
    --hraness-type-h4-font: var(--hraness-type-subheading-font);
    --hraness-type-h4-weight: var(--hraness-type-subheading-weight);
  }
}

.hraness-design-text-chrome {
  background: var(--chrome-text-gradient);
  background-clip: text;
  color: var(--chrome-deep);
  text-shadow: var(--chrome-text-shadow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hraness-design-text-chrome {
    background: none;
    color: var(--chrome-deep);
    -webkit-text-fill-color: currentColor;
  }
}

@media (forced-colors: active) {
  .hraness-design-text-chrome {
    background: none;
    color: CanvasText;
    text-shadow: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Prose and secondary text actions share a quiet, persistent link affordance. */
.hraness-text-link,
.hraness-prose :where(a:not([role="button"], [data-emphasis], [data-foil])),
:is(.plain-publication__article-body, .plain-publication__sources, .plain-publication__provenance, .hraness-marketing-comparison__note) :where(a:not([role="button"], [data-emphasis], [data-foil])),
.plain-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-foil]) {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (forced-colors: none) {
  .hraness-text-link:is(:hover, :focus-visible),
  .hraness-prose :where(a:not([role="button"], [data-emphasis], [data-foil])):is(:hover, :focus-visible),
  :is(.plain-publication__article-body, .plain-publication__sources, .plain-publication__provenance, .hraness-marketing-comparison__note) :where(a:not([role="button"], [data-emphasis], [data-foil])):is(:hover, :focus-visible),
  .plain-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-foil]):is(:hover, :focus-visible) {
    text-decoration-color: currentColor;
  }
}

@media (forced-colors: active) {
  .hraness-text-link,
  .hraness-prose :where(a:not([role="button"], [data-emphasis], [data-foil])),
  :is(.plain-publication__article-body, .plain-publication__sources, .plain-publication__provenance, .hraness-marketing-comparison__note) :where(a:not([role="button"], [data-emphasis], [data-foil])),
  .plain-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-foil]) {
    text-decoration-color: LinkText;
  }
}

.syntax-code {
  --syntax-comment: var(--muted, currentColor);
  --syntax-keyword: var(--warning, var(--accent, currentColor));
  --syntax-string: var(--success, var(--accent, currentColor));
  --syntax-number: var(--danger, var(--accent, currentColor));
  --syntax-name: var(--info, var(--accent, currentColor));
  --syntax-sign: var(--muted, currentColor);
  --sh-class: var(--syntax-name);
  --sh-comment: var(--syntax-comment);
  --sh-entity: var(--syntax-number);
  --sh-identifier: var(--foreground, currentColor);
  --sh-jsxliterals: var(--syntax-string);
  --sh-keyword: var(--syntax-keyword);
  --sh-property: var(--syntax-name);
  --sh-sign: var(--syntax-sign);
  --sh-space: currentColor;
  --sh-string: var(--syntax-string);
  text-shadow: none;
}

/* Class-only Sugar High output uses the same palette roles as its default
 * inline output. Keep specificity below the forced-color rule below. */
.syntax-code :where(.sh__token--class) { color: var(--sh-class); }
.syntax-code :where(.sh__token--comment) { color: var(--sh-comment); }
.syntax-code :where(.sh__token--entity) { color: var(--sh-entity); }
.syntax-code :where(.sh__token--identifier) { color: var(--sh-identifier); }
.syntax-code :where(.sh__token--jsxliterals) { color: var(--sh-jsxliterals); }
.syntax-code :where(.sh__token--keyword) { color: var(--sh-keyword); }
.syntax-code :where(.sh__token--property) { color: var(--sh-property); }
.syntax-code :where(.sh__token--sign) { color: var(--sh-sign); }
.syntax-code :where(.sh__token--space) { color: var(--sh-space); }
.syntax-code :where(.sh__token--string) { color: var(--sh-string); }

.syntax-token--comment {
  color: var(--syntax-comment);
  font-style: italic;
}

.syntax-token--keyword,
.syntax-token--marker {
  color: var(--syntax-keyword);
}

.syntax-token--string,
.syntax-token--inline {
  color: var(--syntax-string);
}

.syntax-token--command,
.syntax-token--function,
.syntax-token--heading,
.syntax-token--property,
.syntax-token--type,
.syntax-token--variable {
  color: var(--syntax-name);
}

.syntax-token--number {
  color: var(--syntax-number);
}

.syntax-token--flag,
.syntax-token--operator {
  color: var(--syntax-sign);
}

.syntax-token--command,
.syntax-token--heading {
  font-weight: var(--font-weight-bold, 700);
}

@media (forced-colors: active) {
  .syntax-code,
  .syntax-code span {
    color: CanvasText;
    forced-color-adjust: auto;
  }
}
/** Viewport-height document layout. Nested application and gallery roots opt in. */
:where(.hraness-site-shell, body.plain-site, body.hraness-marketing-page) {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100svh;
  min-block-size: 100dvh;
}

:where(.hraness-site-shell, body.plain-site, body.hraness-marketing-page) > * {
  flex-shrink: 0;
}

:where(.hraness-site-shell, body.plain-site, body.hraness-marketing-page) > :where(main, .hraness-site-shell__content) {
  flex: 1 0 auto;
}

@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, sculpted surfaces, soft radii, and
 * one accent per product. Roles: site header with a published sticky
 * clearance offset, hero with optional product frame, pillars, install,
 * ordered flow, fact and stat strips, narrative section, primitives,
 * interfaces, trust boundary, equal-height card rows with contained art
 * wells, 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-related,
  .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 srgb, var(--hraness-marketing-ink) 10%, transparent);
  --hraness-marketing-line-strong: color-mix(in srgb, 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, var(--primary, oklch(0.55 0.21 262)));
  --hraness-marketing-accent-ink: var(--hraness-site-accent-ink, var(--primary-foreground, white));
  --hraness-marketing-accent-soft: color-mix(in srgb, 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: 54ch;
  --hraness-marketing-prose-measure: 62ch;
  --hraness-marketing-gutter: clamp(1.25rem, 4vw, 3rem);
  --hraness-marketing-radius: 0.75rem;
  --hraness-marketing-frame-radius: 1.125rem;
  --hraness-marketing-rule: 1px solid var(--hraness-marketing-line);
  --hraness-marketing-surface-rule: 1px solid transparent;
  --hraness-marketing-chrome-rule: 1px solid var(--hraness-marketing-line);
  --hraness-marketing-surface-shadow: 0 0 0 1px var(--hraness-marketing-line);
  --hraness-marketing-chrome-shadow: none;
  --hraness-marketing-shadow: 0 0 0 1px var(--hraness-marketing-line);
  --hraness-marketing-section-space: clamp(4rem, 9vw, 7.5rem);
  --hraness-marketing-heading-weight: 550;
  --hraness-marketing-heading-tracking: -0.03em;
  --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-edge: light-dark(black, white);
  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(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]),
.hraness-marketing-maker__links a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.hraness-marketing-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]):is(:hover, :focus-visible),
.hraness-marketing-maker__links a:is(:hover, :focus-visible) {
  text-decoration-color: currentColor;
}

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

.hraness-marketing-page :where(pre) {
  max-inline-size: 100%;
  margin-block: 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 srgb, 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-related__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-related__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,
  .hraness-marketing-related__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-related__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-related,
  .hraness-marketing-cta,
  .hraness-marketing-proof-frame,
  .hraness-marketing-data-table,
  .hraness-marketing-code
) {
  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-related,
  .hraness-marketing-cta,
  .hraness-marketing-data-table
) {
  padding-inline: var(--hraness-marketing-gutter);
}

/* Direct children outside the grammar still honor the measure, gutter, and
   block rhythm: a product-owned block cannot escape the column or touch the
   viewport edge. */
.hraness-marketing-page > :where(
  :not([data-hraness-marketing], script, style, link, meta, template)
) {
  inline-size: min(100%, var(--hraness-marketing-measure));
  min-inline-size: 0;
  margin-block: clamp(2rem, 5vw, 3.5rem);
  margin-inline: auto;
  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 {
  --hraness-sticky-offset: calc(var(--hraness-marketing-header-height, 2.75rem) + 1px);
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  border-block-end: var(--hraness-marketing-chrome-rule);
  box-shadow: var(--hraness-marketing-chrome-shadow);
}

/* 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 srgb, 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 srgb, 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;
}

/* Sticky clearance: the header publishes --hraness-sticky-offset so the main
 * landmark, hash targets, and the next sticky sibling clear its border box.
 * The token height is the fallback; syncStickyOffset replaces it with the
 * measured height when the header wraps. */
html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([data-position="static"])),
.hraness-marketing-page:has(> :is(.hraness-marketing-header, .hraness-marketing-header-surface):not([data-position="static"])) {
  --hraness-sticky-offset: calc(var(--hraness-marketing-header-height, 2.75rem) + 1px);
}

html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([data-position="static"])) {
  scroll-padding-block-start: var(--hraness-sticky-offset);
}

.hraness-marketing-main,
.hraness-marketing-header + :is(main, .hraness-marketing-main) {
  scroll-margin-block-start: var(--hraness-sticky-offset);
}

.hraness-marketing-main[data-hraness-clearance="pad"],
.hraness-marketing-header[data-position="fixed"] + :is(main, .hraness-marketing-main) {
  padding-block-start: var(--hraness-sticky-offset);
}

.hraness-sticky-below-chrome,
[data-hraness-sticky] {
  position: sticky;
  inset-block-start: var(--hraness-sticky-offset);
  z-index: 30;
}

/* 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);
}

/* Network footer composition
 *
 * A marketing footer directly followed by the shared network footer
 * (`.hraness-site-footer` from `@hraness/site-footer`) reads as one band
 * instead of two stacked bars: the product row's bottom space collapses to a
 * compact gap, and the network footer's content inherits the marketing
 * measure and gutter through its documented `--hraness-site-footer-measure`
 * seam so both registers share one column at every width. The band keeps two
 * edges: this landmark's top rule above the product row and the network
 * footer's own hairline above the organization row.
 */
.hraness-marketing-footer:has(+ .hraness-site-footer) {
  --hraness-marketing-footer-space: 2rem 1.25rem;
}

.hraness-marketing-footer + .hraness-site-footer {
  --hraness-site-footer-measure: calc(min(100%, var(--hraness-marketing-measure, 72rem)) - 2 * var(--hraness-marketing-gutter, clamp(1.25rem, 4vw, 3rem)));
}

/* 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,
 * footer lockups carrying a transparent brandMark, and primary actions carry
 * the treatment by default. attachFoil() from @hraness/design-kit/browser
 * eases the two bounded inputs --hraness-foil-x and --hraness-foil-y on
 * [data-foil] descendants between 8% and 92% around the resting center over
 * roughly 85ms; the artwork and glyphs stay fixed while the radial light
 * fields move, and --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.
 *
 * The metallic image belongs to wordmarks and marks. Bordered foil surfaces
 * keep a flat fill under one theme-aware monochrome edge -- black on light
 * and white on dark through --hraness-foil-edge -- instead of the spectrum.
 */

.hraness-foil,
.hraness-marketing-action[data-emphasis="primary"] {
  --hraness-foil-glow: 0;
  border-width: 2px;
  border-style: solid;
  border-color: var(--hraness-foil-edge, light-dark(black, white));
  background-color: var(--hraness-foil-surface, var(--surface, var(--background, Canvas)));
  box-shadow: 0 1px 4px color-mix(in srgb, var(--foreground, CanvasText) 12%, transparent);
}

.hraness-foil-text,
.hraness-marketing-header__brand,
.hraness-marketing-footer__brand[data-foil] {
  --hraness-foil-glow: 0;
  background-image: var(--hraness-foil-image,
      radial-gradient(ellipse 24% 85% at var(--hraness-foil-x, 50%) var(--hraness-foil-y, 50%), color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 80%, var(--background, Canvas)) 0%, transparent 68%),
      radial-gradient(ellipse 65% 160% at calc(100% - var(--hraness-foil-x, 50%)) calc(100% - var(--hraness-foil-y, 50%)), color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 98%, var(--background, Canvas)) 0%, transparent 72%),
      linear-gradient(115deg, color-mix(in srgb, var(--hraness-foil-1, light-dark(oklch(0.89 0.065 337), oklch(0.56 0.16 340))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-2, light-dark(oklch(0.875 0.05 277), oklch(0.52 0.15 285))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-3, light-dark(oklch(0.92 0.05 170), oklch(0.66 0.14 175))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-4, light-dark(oklch(0.95 0.045 96), oklch(0.72 0.13 100))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-5, light-dark(oklch(0.9 0.05 55), oklch(0.55 0.15 45))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-6, light-dark(oklch(0.875 0.06 305), oklch(0.62 0.16 305))) var(--hraness-foil-reflection, 14%), transparent)),
      linear-gradient(115deg, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 90%, var(--background, Canvas)) 0%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 100%, var(--background, Canvas)) 24%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 86%, var(--background, Canvas)) 39%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 100%, var(--background, Canvas)) 56%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 84%, var(--background, Canvas)) 82%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 100%, var(--background, Canvas)) 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: none;
}


/* The original image remains underneath as the no-mask/CSP/forced-color fallback.
 * Only its exact alpha silhouette receives the shared metallic paint. */
.hraness-foil-mark { display: inline-flex; position: relative; flex-shrink: 0; color: var(--foreground, CanvasText); line-height: 0; vertical-align: middle; inline-size: var(--hraness-foil-size, 1.5rem); block-size: var(--hraness-foil-size, 1.5rem); }
.hraness-foil-mark__image { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.hraness-foil-mark__paint { --_hraness-foil-mark-display: none; display: var(--_hraness-foil-mark-display); position: absolute; inset: 0; pointer-events: none; mask-image: var(--hraness-foil-mask, linear-gradient(transparent, transparent)); mask-mode: alpha; mask-repeat: no-repeat; mask-position: center; mask-size: contain; background-image: var(--hraness-foil-image,
      radial-gradient(ellipse 24% 85% at var(--hraness-foil-x, 50%) var(--hraness-foil-y, 50%), color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 80%, var(--background, Canvas)) 0%, transparent 68%),
      radial-gradient(ellipse 65% 160% at calc(100% - var(--hraness-foil-x, 50%)) calc(100% - var(--hraness-foil-y, 50%)), color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 98%, var(--background, Canvas)) 0%, transparent 72%),
      linear-gradient(115deg, color-mix(in srgb, var(--hraness-foil-1, light-dark(oklch(0.89 0.065 337), oklch(0.56 0.16 340))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-2, light-dark(oklch(0.875 0.05 277), oklch(0.52 0.15 285))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-3, light-dark(oklch(0.92 0.05 170), oklch(0.66 0.14 175))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-4, light-dark(oklch(0.95 0.045 96), oklch(0.72 0.13 100))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-5, light-dark(oklch(0.9 0.05 55), oklch(0.55 0.15 45))) var(--hraness-foil-reflection, 14%), transparent), color-mix(in srgb, var(--hraness-foil-6, light-dark(oklch(0.875 0.06 305), oklch(0.62 0.16 305))) var(--hraness-foil-reflection, 14%), transparent)),
      linear-gradient(115deg, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 90%, var(--background, Canvas)) 0%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 100%, var(--background, Canvas)) 24%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 86%, var(--background, Canvas)) 39%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 100%, var(--background, Canvas)) 56%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 84%, var(--background, Canvas)) 82%, color-mix(in oklch, var(--hraness-foil-text-base, var(--foreground, CanvasText)) 100%, var(--background, Canvas)) 100%)); }
@supports (mask-image: linear-gradient(black, black)) {
  .hraness-foil-mark__paint { --_hraness-foil-mark-display: block; }
}
@media (forced-colors: active) {
  .hraness-foil,
  .hraness-marketing-action[data-emphasis="primary"] {
    background-image: none;
    background-color: Canvas;
    border-color: ButtonText;
    box-shadow: none;
    color: CanvasText;
  }
  .hraness-foil-text,
  .hraness-marketing-header__brand,
  .hraness-marketing-footer__brand[data-foil] {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .hraness-foil-mark__paint { --_hraness-foil-mark-display: none; }
}

@media (hover: hover) {
  .hraness-foil:hover:not(:disabled),
  .hraness-foil-text:hover,
  .hraness-marketing-header__brand:hover,
  .hraness-marketing-footer__brand[data-foil]: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-related,
  .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-related,
  .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-edge: white;
}

@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-related,
    .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-edge: white;
    }
}

/* Hero */

.hraness-marketing-hero {
  position: relative;
  isolation: isolate;
  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[data-layout="split"] {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 64rem) {
  .hraness-marketing-hero[data-layout="split"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }
}

/* Hero backdrops are retired. Hand-authored markup that still ships the old
 * backdrop hooks paints nothing and takes no space. */
.hraness-marketing-hero-backdrop {
  display: none;
}

.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;
}

/* A plain category label, not a badge. */
.hraness-marketing-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  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.6);
}

.hraness-marketing-hero__install { inline-size: min(100%, 44rem); min-inline-size: 0; margin-block-start: 0.75rem; text-align: start; }

.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 srgb, var(--hraness-marketing-accent-ink) 78%, transparent);
  --hraness-marketing-line: color-mix(in srgb, var(--hraness-marketing-accent-ink) 22%, transparent);
  --hraness-marketing-line-strong: color-mix(in srgb, var(--hraness-marketing-accent-ink) 40%, transparent);
  --hraness-marketing-surface: color-mix(in srgb, var(--hraness-marketing-accent-ink) 12%, transparent);
  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-hero[data-tone="accent"] .hraness-marketing-hero__eyebrow {
  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-surface-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: var(--hraness-marketing-h3-size, clamp(1.75rem, 1.35rem + 1.6vw, 2.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 srgb, 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);
}

/* Notice: one status or alert line that sits on the content edge of the
   page column, never a full-bleed band. */
.hraness-marketing-notice {
  box-sizing: border-box;
  inline-size: calc(min(100%, var(--hraness-marketing-measure)) - 2 * var(--hraness-marketing-gutter));
  min-inline-size: 0;
  margin-block: clamp(1rem, 3vw, 1.5rem);
  margin-inline: auto;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border-inline-start: 3px solid var(--hraness-marketing-line-strong);
  color: var(--hraness-marketing-ink);
  font-family: var(--hraness-marketing-text-font);
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.hraness-marketing-notice[data-tone="success"] {
  border-inline-start-color: var(--hraness-marketing-accent);
}

.hraness-marketing-notice[data-tone="error"] {
  border-inline-start-color: var(--danger, var(--hraness-marketing-accent));
}

.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;
}

.hraness-marketing-pillars[data-presentation="benefits"] { border-block: 0; gap: 2.75rem 3rem; }
.hraness-marketing-pillars[data-presentation="benefits"] > div { border: 0; padding: 0; gap: 0.75rem; }
.hraness-marketing-pillars__icon { display: block; inline-size: 1.5rem; block-size: 1.5rem; margin-block-end: 1.1rem; color: var(--primary); }
.hraness-marketing-pillars__icon > svg { inline-size: 100%; block-size: 100%; }

/* Product frame */

.hraness-marketing-proof-frame {
  min-inline-size: 0;
  margin-block: 0;
  overflow: clip;
  border: var(--hraness-marketing-surface-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: var(--hraness-marketing-chrome-shadow);
  border-block-end: var(--hraness-marketing-chrome-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 srgb, 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[data-chrome="terminal"] .hraness-marketing-proof-frame__title {
  font-family: var(--hraness-marketing-mono-font);
}

.hraness-marketing-proof-frame__address {
  flex: 0 1 32rem;
  min-inline-size: 0;
  margin-inline: auto;
  padding: 0.3rem 0.85rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hraness-marketing-ink) 6%, transparent);
  color: var(--hraness-marketing-muted);
  font-family: var(--hraness-marketing-mono-font);
  font-size: 0.74rem;
  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;
}

/* Evidence blocks */

.hraness-marketing-data-table {
  min-inline-size: 0;
  margin-block: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.hraness-marketing-data-table__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-block-end: 0.75rem;
}

.hraness-marketing-data-table__title {
  color: var(--hraness-marketing-ink);
  font-weight: var(--hraness-marketing-heading-weight);
  letter-spacing: -0.01em;
}

.hraness-marketing-data-table__meta {
  color: var(--hraness-marketing-muted);
  font-size: 0.82rem;
}

.hraness-marketing-data-table__scroll {
  max-inline-size: 100%;
  overflow-x: auto;
  border-block: var(--hraness-marketing-rule);
}

.hraness-marketing-data-table__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.hraness-marketing-data-table__table :where(th, td) {
  padding: 0.55rem 0.9rem;
  text-align: start;
  vertical-align: baseline;
}

.hraness-marketing-data-table__table thead :where(th) {
  color: var(--hraness-marketing-muted);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.hraness-marketing-data-table__table tbody :where(th) {
  color: var(--hraness-marketing-ink);
  font-weight: 500;
  text-align: start;
}

.hraness-marketing-data-table__table tbody :where(th, td) {
  border-block-start: var(--hraness-marketing-rule);
}

.hraness-marketing-data-table__table :where([data-numeric]) {
  text-align: end;
  white-space: nowrap;
}

.hraness-marketing-data-table__table :where(td[data-tone="positive"]) {
  color: var(--success, var(--hraness-marketing-accent));
}

.hraness-marketing-data-table__table :where(td[data-tone="negative"]) {
  color: var(--danger, var(--hraness-marketing-muted));
}

.hraness-marketing-data-table__note {
  margin: 0;
  margin-block-start: 0.8rem;
  max-inline-size: var(--hraness-marketing-prose-measure);
  color: var(--hraness-marketing-muted);
  font-size: 0.95rem;
}

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

/* 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: calc(var(--hraness-sticky-offset, 2.75rem) + 0.75rem);
}

.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,
.hraness-marketing-related {
  padding-block: var(--hraness-marketing-section-space);
  border-block-start: var(--hraness-marketing-rule);
  scroll-margin-block-start: calc(var(--hraness-sticky-offset, 2.75rem) + 0.75rem);
}

/* A framed component already draws its own boundary; a ruled section directly
   after it would stack a redundant separator on the card edge. */
:is(
  .hraness-marketing-install,
  .hraness-marketing-proof,
  .hraness-marketing-proof-frame
) + :is(
  .hraness-marketing-section,
  .hraness-marketing-primitives,
  .hraness-marketing-interfaces,
  .hraness-marketing-trust,
  .hraness-marketing-quotes,
  .hraness-marketing-pricing,
  .hraness-marketing-questions,
  .hraness-marketing-maker,
  .hraness-marketing-related,
  .hraness-marketing-cta
) {
  border-block-start: 0;
}

.hraness-marketing-section,
.hraness-marketing-interfaces,
.hraness-marketing-trust,
.hraness-marketing-questions,
.hraness-marketing-related {
  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,
.hraness-marketing-related__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;
}

/* Studio products use the portfolio category rule and compact mark rows. */

.hraness-marketing-related__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 2.5rem 3.5rem;
  align-items: start;
}

.hraness-marketing-related__group {
  --hraness-marketing-related-tone: var(--hraness-marketing-ink);
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
  border-block-start: 2px solid var(--hraness-marketing-related-tone);
  padding-block-start: 1rem;
}

@media (forced-colors: active) {
  .hraness-marketing-related__group {
    --hraness-marketing-related-tone: CanvasText;
  }
}

.hraness-marketing-related__group-header {
  display: grid;
  max-inline-size: var(--hraness-marketing-copy-measure);
  gap: 0.5rem;
}

.hraness-marketing-related__group-heading {
  margin: 0;
  color: var(--hraness-marketing-ink);
  font-family: var(--hraness-marketing-text-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-wrap: balance;
  font-size: 1.125rem;
}

.hraness-marketing-related__group-summary {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-family: var(--hraness-marketing-text-font);
  font-size: 1rem;
  line-height: 1.5;
}

.hraness-marketing-related__list {
  --hraness-marketing-grid-columns: initial;
  --_hraness-marketing-grid-track: max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 0.5rem) / var(--hraness-marketing-grid-columns)));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 100%)), 1fr));
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

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

.hraness-marketing-related__card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  min-inline-size: 0;
  min-block-size: 2.75rem;
  gap: 0.85rem;
  padding: 0.55rem 0.5rem;
  margin-inline: 0;
  border: 0;
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--hraness-marketing-ink);
  text-decoration: none;
  box-shadow: none;
}

.hraness-marketing-related__card:hover {
  background-color: color-mix(in srgb, var(--hraness-marketing-related-tone, var(--hraness-marketing-ink)) 6%, transparent);
}

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

.hraness-marketing-related__card-mark {
  --hraness-foil-text-base: var(--hraness-marketing-related-tone, var(--hraness-marketing-ink));
  color: var(--hraness-marketing-related-tone, var(--hraness-marketing-ink));
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin-block-start: 0.1rem;
}

.hraness-marketing-related__card-text {
  display: grid;
  gap: 0.05rem;
  min-inline-size: 0;
}

.hraness-marketing-related__card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6rem;
}

.hraness-marketing-related__card-name {
  margin: 0;
  color: var(--hraness-marketing-ink);
  font-family: var(--hraness-marketing-text-font);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.hraness-marketing-related__card-domain {
  color: var(--hraness-marketing-muted);
  font-family: var(--hraness-marketing-text-font);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.hraness-marketing-related__card-role {
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-family: var(--hraness-marketing-text-font);
  font-size: 0.9375rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.hraness-marketing-related__group[data-tone="rose"] {
  --hraness-marketing-related-tone: var(--hraness-studio-rose);
}

.hraness-marketing-related__group[data-tone="indigo"] {
  --hraness-marketing-related-tone: var(--hraness-studio-indigo);
}

.hraness-marketing-related__group[data-tone="amber"] {
  --hraness-marketing-related-tone: var(--hraness-studio-amber);
}

.hraness-marketing-related__group[data-tone="emerald"] {
  --hraness-marketing-related-tone: var(--hraness-studio-emerald);
}

@media (forced-colors: active) {
  .hraness-marketing-related__group[data-tone] { --hraness-marketing-related-tone: CanvasText; }
}

/* Primitives: numbered building blocks */

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

.hraness-marketing-primitives__list {
  --hraness-marketing-grid-columns: initial;
  /* Without an explicit column cap, the track falls back to its natural minimum. */
  --_hraness-marketing-grid-track: max(18rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)));
  display: grid;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 18rem)), 1fr));
}

.hraness-marketing-primitives__list > * {
  min-block-size: 100%;
  align-self: stretch;
}

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

.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 {
  --hraness-marketing-grid-columns: initial;
  --_hraness-marketing-grid-track: max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)));
  display: grid;
  align-items: stretch;
  margin: 0;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr));
}

.hraness-marketing-interface-grid > *,
.hraness-marketing-trust-grid > * {
  min-block-size: 100%;
  align-self: stretch;
}

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

.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;
}

/* Equal-height product card rows. Direct children stretch to the tallest
 * item. Meta occupies a reserved two-line block so one long blurb does not
 * stagger the row. Titles wrap without clamping. Each card is a containing
 * block. The art well clips overflow and contains backgrounds so a logo
 * surface cannot paint through the gutter as one bar. */
.hraness-marketing-card-row {
  --hraness-marketing-grid-columns: initial;
  --_hraness-marketing-grid-track: max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)));
  display: grid;
  align-items: stretch;
  margin: 0;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr));
}

.hraness-marketing-card-row > * {
  min-block-size: 100%;
  align-self: stretch;
}

.hraness-marketing-card {
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  min-block-size: 100%;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: var(--hraness-marketing-surface-rule);
  border-radius: var(--hraness-marketing-frame-radius);
  background: var(--hraness-marketing-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--hraness-marketing-surface-shadow);
}

.hraness-marketing-card[data-layout="icon"] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem;
}

.hraness-marketing-card[data-layout="icon"]:focus-visible {
  outline: 2px solid var(--hraness-marketing-ink);
  outline-offset: 3px;
}

.hraness-marketing-card__icon {
  display: flex;
  flex: 0 0 3.5rem;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  min-inline-size: 0;
  pointer-events: none;
}

.hraness-marketing-card__icon > :is(img, svg) {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.hraness-marketing-card__copy {
  display: grid;
  flex: 1 1 10rem;
  align-content: center;
  min-inline-size: 0;
  gap: 0.35rem;
}

.hraness-marketing-card[data-layout="icon"] .hraness-marketing-card__meta {
  overflow: visible;
  min-block-size: 0;
  max-block-size: none;
  overflow-wrap: anywhere;
}

.hraness-marketing-card__art {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  contain: paint;
  overflow: hidden;
  min-inline-size: 0;
  max-inline-size: 100%;
  inline-size: 100%;
  min-block-size: 2.75rem;
  border-radius: var(--hraness-marketing-radius);
  background-color: color-mix(in oklch, var(--hraness-marketing-ink) 8%, var(--hraness-marketing-surface));
  background-clip: border-box;
  background-origin: padding-box;
  background-attachment: scroll;
}

.hraness-marketing-card__art > :is(img, svg, canvas, video) {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

.hraness-marketing-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.hraness-marketing-card__meta {
  overflow: hidden;
  min-block-size: calc(var(--hraness-marketing-card-meta-lines, 2) * 1.45em);
  max-block-size: calc(var(--hraness-marketing-card-meta-lines, 2) * 1.45em);
  margin: 0;
  color: var(--hraness-marketing-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.hraness-marketing-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
  gap: 0.35rem;
}

/* Quotes */

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

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

.hraness-marketing-quote-grid > * {
  min-block-size: 100%;
  align-self: stretch;
}

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

.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-line: underline;
}

/* Pricing */

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

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

.hraness-marketing-plan-grid > * {
  min-block-size: 100%;
  align-self: stretch;
}

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

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

.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 srgb, var(--hraness-marketing-accent-ink) 78%, transparent);
  --hraness-marketing-line-strong: color-mix(in srgb, 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) {
  /* Phones: brand, primary action, and appearance menu share the first row;
   * navigation takes a second full-bleed row that scrolls sideways without a
   * visible scrollbar. Every control keeps a 44px target. */
  .hraness-marketing-header__inner {
    flex-wrap: wrap;
    gap: 0 1rem;
    padding-block: 0.25rem 0;
  }

  .hraness-marketing-header__brand {
    min-block-size: 2.75rem;
    min-inline-size: 0;
  }

  .hraness-marketing-header__actions {
    margin-inline-start: auto;
  }

  .hraness-marketing-header .hraness-marketing-action {
    min-block-size: max(2.75rem, var(--hraness-marketing-header-action-height, 2rem));
  }

  .hraness-marketing-header__nav {
    order: 3;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
    flex-wrap: nowrap;
    gap: 0 1.25rem;
    margin-inline-start: calc(-1 * var(--hraness-marketing-gutter));
    margin-inline-end: calc(-1 * var(--hraness-marketing-gutter));
    padding-block: 0.25rem;
    padding-inline: var(--hraness-marketing-gutter);
    overflow-x: auto;
    scrollbar-width: none;
    /* The scrolling row never widens the header's intrinsic size. */
    contain: inline-size;
  }

  .hraness-marketing-header__nav a {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    min-block-size: 2.75rem;
    white-space: nowrap;
  }

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

  .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-plan[data-emphasis="primary"] {
    border-color: CanvasText;
    box-shadow: none;
  }
  .hraness-marketing-proof-frame__chrome {
    border-block-end: 1px solid CanvasText;
    box-shadow: none;
  }
  .hraness-marketing-proof-frame__address {
    outline: 1px solid CanvasText;
    background: Canvas;
  }
  .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-card,
  .hraness-marketing-card__art,
  .hraness-marketing-quote,
  .hraness-marketing-plan {
    border: 1px solid CanvasText;
    background: Canvas;
    box-shadow: none;
    color: CanvasText;
  }

  .hraness-marketing-data-table__scroll,
  .hraness-marketing-data-table__table tbody :where(th, td) {
    border-color: CanvasText;
  }

  .hraness-marketing-data-table__table thead :where(th),
  .hraness-marketing-data-table__table :where([data-tone]),
  .hraness-marketing-data-table__meta,
  .hraness-marketing-data-table__note {
    color: CanvasText;
  }

  .hraness-marketing-hero__eyebrow {
    color: CanvasText;
  }

  .hraness-foil {
    border-color: ButtonText;
    background-image: none;
    box-shadow: none;
  }

  .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;
  }
}

/* Supplemental proof belongs below both columns of a split hero. */
.hraness-marketing-hero[data-layout="split"] > :where(.hraness-marketing-proof, .hraness-marketing-facts) {
  grid-column: 1 / -1;
}

/* Keep all meaningful hero content above the inert decorative backdrop. */
.hraness-marketing-hero > :where(.hraness-marketing-hero__copy, .hraness-marketing-hero__frame, .hraness-marketing-proof, .hraness-marketing-facts) {
  position: relative;
  z-index: 1;
}

}

/* Marketing action forced-colors compatibility: keep this final block self-contained. */
@media (forced-colors: active) {
  .hraness-marketing-action,
  .hraness-marketing-action[data-emphasis="primary"],
  .hraness-marketing-hero[data-tone="accent"] .hraness-marketing-action,
  .hraness-marketing-cta[data-tone="accent"] .hraness-marketing-action {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
}

/**
 * Plain site theme
 *
 * An opt-in document grammar for personal sites, open-source project pages,
 * and quiet documentation. Color appearance remains owned by `data-theme`;
 * this layer owns measure, typography, spacing, links, and minimal chrome.
 */

:root:has(> body.plain-site) {
  background: #ffffff;
  overflow-x: clip;
  scrollbar-gutter: stable;
}

.plain-site {
  --plain-link-target-min: 0px;
  --plain-shell-measure: 34rem;
  --plain-shell-gutter: 1.25rem;
  --plain-background: #ffffff;
  --plain-foreground: #171717;
  --plain-link: #2457a6;
  --plain-line: #d8d8d8;
  --plain-muted: #666666;
  --plain-surface: #f4f4f4;
  --plain-syntax-keyword: #785f28;
  --plain-syntax-string: #2d6a42;
  --plain-syntax-number: #9f3631;
  --plain-syntax-name: #0d61ac;

  background: var(--plain-background);
  color: var(--plain-foreground);
  font-family: var(--font-text, var(--ui-font-sans, ui-sans-serif, system-ui, sans-serif));
  font-size: 1rem;
  line-height: var(--hraness-type-reading-leading, 1.7);
  margin: 0;
  overflow-x: clip;
}

:root[data-theme="dark"]:has(> body.plain-site) {
  background: #151515;
}

:root[data-theme="dark"] .plain-site,
.plain-site[data-theme="dark"] {
  --plain-background: #151515;
  --plain-foreground: #f2f2f2;
  --plain-link: #8ab4ed;
  --plain-line: #484848;
  --plain-muted: #b6b6b6;
  --plain-surface: #222222;
  --plain-syntax-keyword: #c9ad74;
  --plain-syntax-string: #76b38e;
  --plain-syntax-number: #e18982;
  --plain-syntax-name: #6aa9ed;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):has(> body.plain-site) {
    background: #151515;
  }

  :root:not([data-theme]) > .plain-site {
    --plain-background: #151515;
    --plain-foreground: #f2f2f2;
    --plain-link: #8ab4ed;
    --plain-line: #484848;
    --plain-muted: #b6b6b6;
    --plain-surface: #222222;
    --plain-syntax-keyword: #c9ad74;
    --plain-syntax-string: #76b38e;
    --plain-syntax-number: #e18982;
    --plain-syntax-name: #6aa9ed;
  }
}

/* An explicit palette supplies the same semantic colors as application surfaces.
 * Match the neutral dark and no-script root fallback specificity so this later
 * bridge owns the aliases. Resolve them on each plain surface so nested palette
 * boundaries retain their own colors, including forced-color system roles. */
:root[data-palette]:has(> body.plain-site) {
  background: var(--background, Canvas);
}
[data-palette][data-palette] .plain-site,
.plain-site[data-palette][data-palette] {
  --plain-background: var(--background, Canvas);
  --plain-foreground: var(--foreground, CanvasText);
  --plain-link: var(--primary, LinkText);
  --plain-line: color-mix(in oklch, var(--foreground, CanvasText) 14%, var(--background, Canvas));
  --plain-muted: var(--muted, CanvasText);
  --plain-surface: var(--surface, Canvas);
  --plain-syntax-keyword: var(--warning, CanvasText);
  --plain-syntax-string: var(--success, CanvasText);
  --plain-syntax-number: var(--danger, CanvasText);
  --plain-syntax-name: var(--info, CanvasText);
}

.plain-site .syntax-code {
  --syntax-comment: var(--plain-muted);
  --syntax-keyword: var(--plain-syntax-keyword);
  --syntax-string: var(--plain-syntax-string);
  --syntax-number: var(--plain-syntax-number);
  --syntax-name: var(--plain-syntax-name);
  --syntax-sign: var(--plain-muted);
}

.plain-site *,
.plain-site *::before,
.plain-site *::after {
  box-sizing: border-box;
}

:where(.plain-header a, .plain-page a, .plain-footer a) {
  color: var(--plain-link);
  overflow-wrap: anywhere;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

:where(
  .plain-header a:is(:hover, :focus-visible),
  .plain-page a:is(:hover, :focus-visible),
  .plain-footer a:is(:hover, :focus-visible)
) {
  text-decoration: underline;
}

.plain-site :where(
  .plain-header a:focus-visible,
  .plain-page a:focus-visible,
  .plain-footer a:focus-visible
) {
  border-radius: 1px;
  outline: 1px dotted currentColor;
  outline-offset: 3px;
}

.plain-site :where(
  .plain-header a:focus:not(:focus-visible),
  .plain-page a:focus:not(:focus-visible),
  .plain-footer a:focus:not(:focus-visible)
) {
  outline: none;
}

.plain-site ::selection {
  background: color-mix(in srgb, var(--plain-link) 20%, transparent);
  color: var(--plain-foreground);
}

.plain-page {
  inline-size: 100%;
  margin: clamp(3.5rem, 12vh, 7rem) auto;
  max-width: var(--plain-shell-measure);
  padding-inline: var(--plain-shell-gutter);
}

.plain-header {
  border: 0;
  inline-size: 100%;
  padding: 0;
}

.plain-header__inner {
  --plain-header-block-padding: 1.15rem;

  align-items: center;
  border-bottom: 1px solid var(--plain-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  inline-size: 100%;
  justify-content: space-between;
  margin-inline: auto;
  max-width: var(--plain-shell-measure);
  padding-top: max(
    var(--plain-header-block-padding),
    env(safe-area-inset-top)
  );
  padding-right: max(var(--plain-shell-gutter), env(safe-area-inset-right));
  padding-bottom: var(--plain-header-block-padding);
  padding-left: max(var(--plain-shell-gutter), env(safe-area-inset-left));
}

.plain-wordmark {
  align-items: center;
  color: var(--plain-foreground);
  display: inline-flex;
  flex: 1 1 auto;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0;
  min-block-size: var(--plain-link-target-min);
  min-inline-size: var(--plain-link-target-min);
  overflow-wrap: anywhere;
  text-decoration: none;
  text-transform: none;
}

.plain-nav,
.plain-footer__links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
}

.plain-nav {
  flex: 0 1 auto;
  justify-content: flex-end;
  margin-inline-start: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.plain-nav a,
.plain-footer__links a {
  align-items: center;
  color: var(--plain-muted);
  display: inline-flex;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  min-block-size: var(--plain-link-target-min);
  min-inline-size: var(--plain-link-target-min);
  padding: 0;
  text-transform: none;
}

.plain-page :where(h1, h2, h3, p, ul, ol, pre, figure) {
  font-size: inherit;
}

.plain-page :where(h1, h2, h3) {
  font-family: var(--font-heading, var(--font-text, ui-sans-serif, system-ui, sans-serif));
  line-height: var(--hraness-type-heading-leading, 1.2);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.plain-page h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 1rem;
}

.plain-page > p,
.plain-muted {
  color: var(--plain-muted);
}

.plain-page > p {
  margin: 0;
  text-wrap: pretty;
}

.plain-page section {
  margin-top: 2rem;
}

.plain-page h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
}

.plain-page section > p {
  margin: 0;
}

.plain-page section > p + p {
  margin-top: 1rem;
}

.plain-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plain-links li {
  margin: 0.1rem 0;
}

.plain-links a {
  display: inline-block;
  min-height: 1.5rem;
  min-width: 1.5rem;
}

.plain-code {
  color: var(--plain-foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--hraness-type-code-size, .9rem);
  line-height: 1.55;
  margin: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-wrap: normal;
  padding-block: 0.75rem;
  tab-size: 2;
  white-space: pre;
}

.plain-code code {
  font: inherit;
}

.plain-footer {
  --background: var(--plain-background);
  --foreground: var(--plain-foreground);
  --focus: var(--plain-link);
  --line: var(--plain-line);
  --muted: var(--plain-muted);
  --secondary: var(--plain-surface);
  --secondary-foreground: var(--plain-foreground);
  --surface: var(--plain-background);
  --surface-raised: var(--plain-surface);

  align-items: center;
  border-top: 1px solid var(--plain-line);
  color: var(--plain-muted);
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 1rem;
  inline-size: 100%;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--plain-shell-measure);
  overflow: clip;
  padding-top: 1.25rem;
  padding-right: max(var(--plain-shell-gutter), env(safe-area-inset-right));
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  padding-left: max(var(--plain-shell-gutter), env(safe-area-inset-left));
}

.plain-site main:has(> .design-gallery[data-design-gallery-nested="true"]) {
  padding-inline: max(var(--plain-shell-gutter), var(--space-6));
}

.plain-footer p {
  margin: 0;
}

.plain-footer :where(a) {
  align-items: center;
  color: inherit;
  display: inline-flex;
  min-block-size: var(--plain-link-target-min);
  min-inline-size: var(--plain-link-target-min);
}

@media (max-width: 42rem) {
  .plain-header__inner {
    --plain-header-block-padding: 0.65rem;

    gap: 0.35rem 0.75rem;
  }

  .plain-wordmark {
    flex-basis: min(11rem, 100%);
  }
}

@media (pointer: coarse) {
  .plain-site {
    --plain-link-target-min: var(--interactive-target-min, 48px);
  }
}

:root[data-verification-pointer="coarse"] .plain-site {
  --plain-link-target-min: var(--interactive-target-min, 48px);
}

@media (max-width: 420px) {
  .plain-site {
    --plain-shell-gutter: 1rem;
  }

  .plain-page {
    margin-block: 2.5rem;
  }
}

@media (forced-colors: active) {
  .plain-header__inner {
    border-bottom: 1px solid CanvasText;
  }

  .plain-footer {
    border-top: 1px solid CanvasText;
  }
}

/**
 * Plain publication theme
 *
 * An opt-in extension of the plain-site document grammar for sourced indexes,
 * long-form articles, evidence tables, citations, and related reading. Product
 * identity stays in copy and optional root modifier classes; this stylesheet
 * owns the shared publication structure and reading rhythm.
 */
.plain-site.plain-publication {
  --plain-shell-measure: 43rem;

  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  flex-direction: column;
  background: var(--plain-background);
  color: var(--plain-foreground);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
}

.plain-site.plain-publication > main {
  flex: 1 0 auto;
}

:where(.plain-site.plain-publication a:not(.hraness-design-skip-link)) {
  color: var(--plain-link);
  overflow-wrap: anywhere;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

:where(
  .plain-site.plain-publication
    a:not(.hraness-design-skip-link):is(:hover, :focus-visible)
) {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

:where(.plain-site.plain-publication a:not(.hraness-design-skip-link):focus-visible) {
  border-radius: 1px;
  outline: 1px dotted currentColor;
  outline-offset: 3px;
}

:where(
  .plain-site.plain-publication
    a:not(.hraness-design-skip-link):focus:not(:focus-visible)
) {
  outline: none;
}

.plain-site.plain-publication .plain-publication__shell {
  width: 100%;
  max-width: var(--plain-shell-measure);
  margin-inline: auto;
  padding-right: max(var(--plain-shell-gutter), env(safe-area-inset-right));
  padding-left: max(var(--plain-shell-gutter), env(safe-area-inset-left));
}

.plain-site.plain-publication .plain-publication__index-content {
  margin-block: clamp(2.5rem, 8vh, 5rem);
}

.plain-site.plain-publication .plain-publication__hero {
  padding: 0 0 2.25rem;
}

.plain-site.plain-publication .plain-publication__eyebrow,
.plain-site.plain-publication .plain-publication__entry-label,
.plain-site.plain-publication .plain-publication__entry-meta,
.plain-site.plain-publication .plain-publication__article-meta {
  margin: 0;
  color: var(--plain-muted);
  font: inherit;
  font-size: var(--hraness-type-caption-size, .9375rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: inherit;
  text-transform: none;
}

.plain-site.plain-publication .plain-publication__hero h1,
.plain-site.plain-publication .plain-publication__article-header h1 {
  max-width: none;
  margin: 0.4rem 0 0.8rem;
  color: var(--plain-foreground);
  font-family: var(--hraness-type-heading-font, var(--font-heading));
  font-size: var(--hraness-type-h1-size, clamp(2.25rem, 1.8rem + 1.6vw, 3rem));
  font-weight: var(--hraness-type-heading-weight, 700);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.plain-site.plain-publication .plain-publication__hero > p:not(.plain-publication__eyebrow),
.plain-site.plain-publication .plain-publication__article-dek {
  max-width: none;
  margin: 0;
  color: var(--plain-muted);
  font-size: 1rem;
  line-height: inherit;
}

.plain-site.plain-publication .plain-publication__primary-link {
  display: inline-block;
  min-height: 0;
  margin-top: 1rem;
  padding: 0;
  background: transparent;
  color: var(--plain-link);
  font: inherit;
  font-weight: 400;
}

.plain-site.plain-publication .plain-publication__primary-link:is(:hover, :focus-visible) {
  background: transparent;
}

.plain-site.plain-publication .plain-publication__primary-link + p {
  margin-top: 0.5rem;
}

.plain-site.plain-publication .plain-publication__list,
.plain-site.plain-publication .plain-publication__method,
.plain-site.plain-publication .plain-publication__related {
  padding-block: 2rem;
  border-top: 1px solid var(--plain-line);
}

.plain-site.plain-publication .plain-publication__section-heading {
  display: block;
  margin: 0 0 0.85rem;
}

.plain-site.plain-publication .plain-publication__section-heading h2,
.plain-site.plain-publication .plain-publication__method > h2,
.plain-site.plain-publication .plain-publication__cta h2,
.plain-site.plain-publication .plain-publication__sources h2 {
  margin: 0;
  color: var(--plain-foreground);
  /* Section labels: the shared h3 text-face scale, never a small display face. */
  font-family: var(--hraness-type-h3-font, var(--font-text, inherit));
  font-size: var(--hraness-type-h3-size, clamp(1.25rem, 1.15rem + .4vw, 1.4375rem));
  font-weight: var(--hraness-type-h3-weight, 650);
  letter-spacing: 0;
  line-height: inherit;
}

.plain-site.plain-publication .plain-publication__section-heading p,
.plain-site.plain-publication .plain-publication__section-heading > a {
  margin: 0.2rem 0 0;
  color: var(--plain-muted);
  font: inherit;
  font-size: var(--hraness-type-caption-size, .9375rem);
}

.plain-site.plain-publication .plain-publication__article-list {
  border-bottom: 1px solid var(--plain-line);
}

.plain-site.plain-publication .plain-publication__entry {
  display: block;
  padding: 1.15rem 0;
  border-top: 1px solid var(--plain-line);
}

.plain-site.plain-publication .plain-publication__entry h3 {
  max-width: none;
  margin: 0.15rem 0 0;
  color: var(--plain-foreground);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

@media (pointer: coarse) {
  .plain-site.plain-publication :is(
    .plain-publication__entry h3 a,
    .plain-publication__primary-link,
    .plain-publication__related-grid > a
  ) {
    align-items: center;
    display: flex;
    min-block-size: var(--interactive-target-min, 48px);
    min-inline-size: var(--interactive-target-min, 48px);
  }
}

:root[data-verification-pointer="coarse"]
  .plain-site.plain-publication
  :is(
    .plain-publication__entry h3 a,
    .plain-publication__primary-link,
    .plain-publication__related-grid > a
  ) {
  align-items: center;
  display: flex;
  min-block-size: var(--interactive-target-min, 48px);
  min-inline-size: var(--interactive-target-min, 48px);
}

.plain-site.plain-publication .plain-publication__entry h3 + p {
  max-width: none;
  margin: 0.45rem 0 0;
  color: var(--plain-muted);
  font-size: 0.95rem;
  line-height: inherit;
}

.plain-site.plain-publication .plain-publication__entry-meta {
  margin-top: 0.45rem;
}

.plain-site.plain-publication .plain-publication__method > h2 {
  margin: 0.2rem 0 0.8rem;
}

.plain-site.plain-publication .plain-publication__method-grid {
  display: block;
  border: 0;
  background: transparent;
}

.plain-site.plain-publication .plain-publication__method-grid > div {
  padding: 0;
  background: transparent;
}

.plain-site.plain-publication .plain-publication__method-grid > div + div {
  margin-top: 1rem;
}

.plain-site.plain-publication .plain-publication__method-grid h3 {
  margin: 0;
  color: var(--plain-foreground);
  font: inherit;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.plain-site.plain-publication .plain-publication__method-grid p,
.plain-site.plain-publication .plain-publication__disclosure {
  margin: 0.15rem 0 0;
  color: var(--plain-muted);
  font-size: 0.95rem;
  line-height: inherit;
}

.plain-site.plain-publication .plain-publication__disclosure {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--plain-line);
}

.plain-site.plain-publication .plain-publication__article-header {
  padding-block: clamp(2.5rem, 8vh, 4.5rem) 1.75rem;
}

.plain-site.plain-publication .plain-publication__breadcrumbs {
  margin-bottom: 1.5rem;
  font: inherit;
}

.plain-site.plain-publication .plain-publication__breadcrumbs ol {
  color: var(--plain-muted);
  font: inherit;
  font-size: var(--hraness-type-caption-size, .9375rem);
}

.plain-site.plain-publication .plain-publication__breadcrumbs li:last-child {
  max-width: min(30rem, 55vw);
  min-width: 0;
}

.plain-site.plain-publication .plain-publication__breadcrumbs [aria-current="page"] {
  display: block;
  overflow: hidden;
  color: var(--plain-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plain-site.plain-publication .plain-publication__article-dek {
  margin-top: 0.8rem;
}

.plain-site.plain-publication .plain-publication__article-meta {
  margin-top: 0.8rem;
}

.plain-site.plain-publication .plain-publication__article-layout {
  display: block;
  padding-block: 1.5rem 3.5rem;
  border-top: 1px solid var(--plain-line);
}

.plain-site.plain-publication .plain-publication__toc {
  position: static;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--plain-line);
  color: var(--plain-muted);
  font: inherit;
  font-size: var(--hraness-type-caption-size, .9375rem);
}

.plain-site.plain-publication .plain-publication__toc p {
  margin: 0 0 0.35rem;
  color: var(--plain-foreground);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.plain-site.plain-publication .plain-publication__toc ol {
  display: block;
  margin: 0;
  padding-left: 1.25rem;
}

.plain-site.plain-publication .plain-publication__toc li + li {
  margin-top: 0.2rem;
}

.plain-site.plain-publication .plain-publication__article-body {
  color: var(--plain-foreground);
  font-size: var(--hraness-type-reading-size, clamp(1rem, .95rem + .25vw, 1.0625rem));
  line-height: var(--hraness-type-reading-leading, 1.7);
  max-inline-size: var(--hraness-type-reading-measure, 70ch);
}

.plain-site.plain-publication .plain-publication__article-body > :first-child {
  margin-top: 0;
}

.plain-site.plain-publication .plain-publication__article-body h2,
.plain-site.plain-publication .plain-publication__article-body h3 {
  color: var(--plain-foreground);
  font-family: var(--hraness-type-h2-font, var(--hraness-type-heading-font, var(--font-heading, inherit)));
  font-weight: var(--hraness-type-h2-weight, var(--hraness-type-heading-weight, 700));
  letter-spacing: 0;
  scroll-margin-block-start: calc(var(--hraness-sticky-offset, 0px) + 1.5rem);
  text-wrap: pretty;
}

.plain-site.plain-publication .plain-publication__article-body h2 {
  margin: var(--hraness-type-section-space, 3rem) 0 0.6rem;
  font-size: var(--hraness-type-h2-size, clamp(1.75rem, 1.45rem + .9vw, 2.125rem));
  line-height: 1.16;
  letter-spacing: -0.018em;
}

.plain-site.plain-publication .plain-publication__article-body h3 {
  margin: var(--hraness-type-subsection-space, 2rem) 0 0.45rem;
  font-family: var(--hraness-type-h3-font, var(--font-text, inherit));
  font-size: var(--hraness-type-h3-size, clamp(1.25rem, 1.15rem + .4vw, 1.4375rem));
  font-weight: var(--hraness-type-h3-weight, 650);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.plain-site.plain-publication .plain-publication__article-body :is(h4, h5, h6) {
  margin: 1.6rem 0 0.4rem;
  color: var(--plain-foreground);
  font-family: var(--hraness-type-h4-font, var(--font-text, inherit));
  font-size: var(--hraness-type-h4-size, 1.0625rem);
  font-weight: var(--hraness-type-h4-weight, 650);
  line-height: 1.4;
  scroll-margin-block-start: calc(var(--hraness-sticky-offset, 0px) + 1.5rem);
}

.plain-site.plain-publication .plain-publication__article-body :is(h1, h2, h3, h4) + :is(h2, h3, h4) {
  margin-block-start: 0.75rem;
}

.plain-site.plain-publication .plain-publication__article-body p {
  margin: 0 0 1.15rem;
  text-wrap: pretty;
}

.plain-site.plain-publication .plain-publication__article-body pre {
  max-inline-size: 100%;
  overflow-x: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--hraness-type-code-size, .9rem);
  line-height: 1.65;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
}

.plain-site.plain-publication .plain-publication__article-body :not(pre) > code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .9em;
  overflow-wrap: anywhere;
}

.plain-site.plain-publication .plain-publication__article-body strong,
.plain-site.plain-publication .plain-publication__article-body em {
  color: inherit;
}

.plain-site.plain-publication .plain-publication__article-body ul,
.plain-site.plain-publication .plain-publication__article-body ol {
  display: block;
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
}

.plain-site.plain-publication .plain-publication__article-body li + li {
  margin-top: 0.35rem;
}

.plain-site.plain-publication .plain-publication__article-body li::marker {
  color: var(--plain-muted);
  font: inherit;
}

.plain-site.plain-publication .plain-publication__callout {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--plain-line);
  background: var(--plain-surface);
}

.plain-site.plain-publication .plain-publication__callout > strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--plain-foreground);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.plain-site.plain-publication .plain-publication__callout p {
  margin: 0;
}

.plain-site.plain-publication .plain-publication__table-scroll {
  max-width: 100%;
  margin: 1.5rem 0;
  overflow-x: auto;
  border-block: 1px solid var(--plain-line);
}

.plain-site.plain-publication .plain-publication__table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  color: var(--plain-foreground);
  font-size: .9375rem;
  line-height: 1.5;
}

.plain-site.plain-publication .plain-publication__table caption {
  padding: 0.75rem 0;
  color: var(--plain-foreground);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.plain-site.plain-publication .plain-publication__table th,
.plain-site.plain-publication .plain-publication__table td {
  padding: 0.65rem;
  border-top: 1px solid var(--plain-line);
  text-align: left;
  vertical-align: top;
}

.plain-site.plain-publication .plain-publication__table th {
  color: var(--plain-muted);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.plain-site.plain-publication .plain-publication__table tbody th {
  color: var(--plain-foreground);
}

.plain-site.plain-publication .plain-publication__cta {
  margin-top: 2.5rem;
  padding: 1.5rem 0;
  border-block: 1px solid var(--plain-line);
  background: transparent;
}

.plain-site.plain-publication .plain-publication__cta h2 {
  margin-top: 0.2rem;
}

.plain-site.plain-publication .plain-publication__cta > p:not(.plain-publication__eyebrow) {
  max-width: none;
  margin: 0.4rem 0 0;
  color: var(--plain-muted);
  font-size: 0.95rem;
  line-height: inherit;
}

.plain-site.plain-publication .plain-publication__sources {
  margin-top: 2.5rem;
  padding-top: 0;
  border-top: 0;
}

.plain-site.plain-publication .plain-publication__sources ol {
  display: block;
  margin: 0.75rem 0 0;
  padding-left: 1.35rem;
  color: var(--plain-muted);
  font: inherit;
  font-size: var(--hraness-type-caption-size, .9375rem);
}

.plain-site.plain-publication .plain-publication__sources li + li {
  margin-top: 0.75rem;
}

.plain-site.plain-publication .plain-publication__sources a,
.plain-site.plain-publication .plain-publication__sources span {
  display: block;
  font: inherit;
  line-height: inherit;
}

.plain-site.plain-publication .plain-publication__sources span {
  margin-top: 0.15rem;
  color: var(--plain-muted);
}

.plain-site.plain-publication .plain-publication__related-grid {
  display: block;
  border-bottom: 1px solid var(--plain-line);
  background: transparent;
}

/* One row per related product, as on the hraness.com project index: mark,
 * name, and one-line description at reading size. */
.plain-site.plain-publication .plain-publication__related-grid > a {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--plain-line);
  background: transparent;
}

.plain-site.plain-publication .plain-publication__related-grid > a:hover {
  background: transparent;
}

.plain-site.plain-publication .plain-publication__related-mark {
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  object-fit: contain;
}

.plain-site.plain-publication .plain-publication__related-text {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;
}

.plain-site.plain-publication .plain-publication__related-text > span,
.plain-site.plain-publication .plain-publication__related-text > strong {
  display: block;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-transform: none;
}

.plain-site.plain-publication .plain-publication__related-text > strong {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.plain-site.plain-publication .plain-publication__related-text > span {
  color: var(--plain-muted);
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 42rem) {
  .plain-site.plain-publication {
    --plain-shell-gutter: 1rem;
  }

  .plain-site.plain-publication .plain-publication__breadcrumbs li:last-child {
    max-width: 12rem;
  }
}

@media (forced-colors: active) {
  .plain-site.plain-publication :where(
    .plain-publication__list,
    .plain-publication__method,
    .plain-publication__related,
    .plain-publication__article-layout,
    .plain-publication__toc,
    .plain-publication__table-scroll,
    .plain-publication__table th,
    .plain-publication__table td,
    .plain-publication__cta,
    .plain-publication__article-list,
    .plain-publication__entry,
    .plain-publication__related-grid,
    .plain-publication__related-grid > a
  ) {
    border-color: CanvasText;
  }

  .plain-site.plain-publication .plain-publication__callout {
    border-left-color: CanvasText;
    background: Canvas;
  }
}

/* Article layer
 *
 * MarketingArticle, ArticleIndex, and the static renderArticleHtml and
 * renderArticleIndexHtml functions emit a `plain-publication--embedded`
 * root. It carries the publication grammar into any host page: on its own it
 * follows the host's semantic color roles and inherits the host's text face;
 * nested in a plain page it keeps that page's resolved plain colors. Long-form
 * prose keeps a 68ch measure, with the contents list beside the body on wide
 * screens and above it on phones.
 */
.plain-site.plain-publication.plain-publication--embedded {
  --plain-background: transparent;
  --plain-foreground: var(--foreground, CanvasText);
  --plain-link: var(--primary, LinkText);
  --plain-line: color-mix(in srgb, var(--foreground, CanvasText) 14%, transparent);
  --plain-muted: var(--muted, GrayText);
  --plain-surface: color-mix(in srgb, var(--foreground, CanvasText) 5%, transparent);
  --plain-syntax-keyword: var(--warning, CanvasText);
  --plain-syntax-string: var(--success, CanvasText);
  --plain-syntax-number: var(--danger, CanvasText);
  --plain-syntax-name: var(--info, CanvasText);
  --plain-article-measure: 68ch;
  --plain-article-aside: 14rem;
  --plain-article-column-gap: 3rem;

  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  min-height: 0;
  max-inline-size: calc(var(--plain-article-measure) + 2 * var(--plain-shell-gutter));
  margin-inline: auto;
  padding-right: max(var(--plain-shell-gutter), env(safe-area-inset-right));
  padding-left: max(var(--plain-shell-gutter), env(safe-area-inset-left));
  font-family: inherit;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
}

.plain-site .plain-site.plain-publication.plain-publication--embedded {
  --plain-background: inherit;
  --plain-foreground: inherit;
  --plain-link: inherit;
  --plain-line: inherit;
  --plain-muted: inherit;
  --plain-surface: inherit;
  --plain-syntax-keyword: inherit;
  --plain-syntax-string: inherit;
  --plain-syntax-number: inherit;
  --plain-syntax-name: inherit;
}

.plain-site.plain-publication.plain-publication--embedded :is(
  .plain-publication__article-header,
  .plain-publication__article-footer
) {
  max-inline-size: var(--plain-article-measure);
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-meta {
  display: block;
  margin-top: 1rem;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__byline a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__provenance {
  margin: 0.5rem 0 0;
  color: var(--plain-muted);
  font-size: var(--hraness-type-caption-size, .9375rem);
  line-height: 1.5;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body {
  font-size: inherit;
  max-inline-size: var(--plain-article-measure);
  overflow-wrap: break-word;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (forced-colors: none) {
  .plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a:is(:hover, :focus-visible) {
    text-decoration-color: currentColor;
  }
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body pre {
  margin: 1.5rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--plain-line);
  border-radius: 0.5rem;
  background: var(--plain-surface);
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body :not(pre) > code {
  padding: 0.1em 0.3em;
  border-radius: 0.25em;
  background: var(--plain-surface);
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body blockquote {
  margin: 1.5rem 0;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--plain-line);
  color: var(--plain-muted);
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body blockquote > :last-child {
  margin-bottom: 0;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure {
  margin: 2rem 0;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body img,
.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body video {
  max-inline-size: 100%;
  block-size: auto;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body > :is(img, video),
.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure > :is(img, video, svg) {
  display: block;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure > :is(img, video) {
  border-radius: 0.5rem;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figcaption {
  margin-top: 0.6rem;
  color: var(--plain-muted);
  font-size: var(--hraness-type-caption-size, .9375rem);
  line-height: 1.5;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table, .hraness-marketing-comparison__table) {
  inline-size: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: var(--hraness-type-caption-size, .9375rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table, .hraness-marketing-comparison__table) :is(th, td) {
  padding: 0.55rem 0.65rem 0.55rem 0;
  border-top: 1px solid var(--plain-line);
  overflow-wrap: break-word;
  text-align: start;
  vertical-align: top;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body table:not(.plain-publication__table, .hraness-marketing-comparison__table) thead th {
  border-top: 0;
  color: var(--plain-muted);
  font-weight: 700;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure:has(> table) {
  max-inline-size: 100%;
  overflow-x: auto;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__table {
  font-variant-numeric: tabular-nums;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--plain-line);
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__callout {
  border-radius: 0 0.375rem 0.375rem 0;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__callout[data-tone="limit"] {
  border-left-color: var(--plain-muted);
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__callout[data-tone="warning"] {
  border-left-color: var(--warning, CanvasText);
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__callout > p + p {
  margin-top: 0.6rem;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-footer {
  padding-bottom: 3.5rem;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-layout {
  padding-bottom: 2rem;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body figure > table {
  margin: 0;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__sources span span {
  display: inline;
  margin: 0;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__related-products {
  margin-top: 2.5rem;
}

.plain-site.plain-publication.plain-publication--embedded.plain-publication__list {
  padding-block: 2rem;
  border-top: 0;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__entry-title {
  max-width: none;
  margin: 0.15rem 0 0;
  color: var(--plain-foreground);
  font-family: var(--font-heading, inherit);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-wrap: pretty;
}

.plain-site.plain-publication.plain-publication--embedded .plain-publication__entry-dek {
  max-width: none;
  margin: 0.45rem 0 0;
  color: var(--plain-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (pointer: coarse) {
  .plain-site.plain-publication.plain-publication--embedded .plain-publication__entry-title a {
    align-items: center;
    display: flex;
    min-block-size: var(--interactive-target-min, 48px);
  }
}

:root[data-verification-pointer="coarse"]
  .plain-site.plain-publication.plain-publication--embedded
  .plain-publication__entry-title a {
  align-items: center;
  display: flex;
  min-block-size: var(--interactive-target-min, 48px);
}

@media (min-width: 64rem) {
  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] {
    max-inline-size: calc(
      var(--plain-article-measure) + var(--plain-article-aside) + var(--plain-article-column-gap) + 2 * var(--plain-shell-gutter)
    );
  }

  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] .plain-publication__article-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--plain-article-measure)) var(--plain-article-aside);
    align-items: start;
    column-gap: var(--plain-article-column-gap);
  }

  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] .plain-publication__toc {
    position: sticky;
    top: calc(var(--hraness-sticky-offset, 0px) + 1.5rem);
    grid-column: 2;
    grid-row: 1;
    max-block-size: calc(100vh - var(--hraness-sticky-offset, 0px) - 3rem);
    margin-bottom: 0;
    padding: 0 0 0 1rem;
    overflow-y: auto;
    border-bottom: 0;
    border-left: 1px solid var(--plain-line);
  }

  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] .plain-publication__toc ol {
    padding-left: 0;
    list-style: none;
  }

  .plain-site.plain-publication.plain-publication--embedded[data-toc="aside"] .plain-publication__article-body {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (forced-colors: active) {
  .plain-site.plain-publication.plain-publication--embedded :where(
    .plain-publication__toc,
    .plain-publication__callout,
    .plain-publication__article-body pre,
    .plain-publication__article-body blockquote,
    .plain-publication__article-body hr,
    .plain-publication__article-body th,
    .plain-publication__article-body td
  ) {
    border-color: CanvasText;
  }

  .plain-site.plain-publication.plain-publication--embedded .plain-publication__callout[data-tone] {
    border-left-color: CanvasText;
    background: Canvas;
  }

  .plain-site.plain-publication.plain-publication--embedded .plain-publication__byline a,
  .plain-site.plain-publication.plain-publication--embedded .plain-publication__article-body a {
    text-decoration-color: LinkText;
  }
}

/* Figures, recordings, charts, comparisons, launch beats, and the social kit */

.plain-site.plain-publication .plain-publication__figure {
  margin: 2rem 0;
}

.plain-site.plain-publication .plain-publication__figure-body > :is(img, video, svg) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 0.5rem;
}

.plain-site.plain-publication .plain-publication__figure-caption,
.plain-site.plain-publication .plain-publication__figure-note {
  margin-top: 0.6rem;
  color: var(--plain-muted);
  font-size: var(--hraness-type-caption-size, .9375rem);
  line-height: 1.5;
}

.plain-site.plain-publication .plain-publication__figure-label {
  color: var(--plain-foreground);
  font-weight: 700;
}

.plain-site.plain-publication .plain-publication__figure-credit {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85em;
}

@media (min-width: 64rem) {
  .plain-site.plain-publication .plain-publication__figure[data-width="wide"] {
    margin-inline: min(-4rem, calc((var(--plain-article-measure, 43rem) - 100cqi) / 2));
  }
}

.plain-site.plain-publication .plain-publication__video video {
  aspect-ratio: auto;
  background: var(--plain-surface, transparent);
}

.plain-site.plain-publication .plain-publication__data-table .plain-publication__table,
.plain-site.plain-publication .plain-publication__bar-chart .plain-publication__bars {
  margin-block: 0;
}

.plain-site.plain-publication .plain-publication__table-scroll:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 3px;
}

.plain-site.plain-publication .plain-publication__table :is(th, td)[data-numeric] {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.plain-site.plain-publication .plain-publication__bars {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0.25rem 0;
}

.plain-site.plain-publication .plain-publication__bar {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.plain-site.plain-publication .plain-publication__bar dt {
  overflow-wrap: anywhere;
  font-size: .9375rem;
  line-height: 1.35;
}

.plain-site.plain-publication .plain-publication__bar dd {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  min-inline-size: 0;
}

.plain-site.plain-publication .plain-publication__bar-track {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 0.7rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--plain-surface);
}

.plain-site.plain-publication .plain-publication__bar-fill {
  display: block;
  inline-size: var(--plain-bar, 0%);
  block-size: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--plain-foreground) 38%, transparent);
}

.plain-site.plain-publication .plain-publication__bar[data-highlight] .plain-publication__bar-fill {
  background: var(--plain-link);
}

.plain-site.plain-publication .plain-publication__bar-value {
  flex: none;
  min-inline-size: 3.5rem;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

@media (max-width: 30rem) {
  .plain-site.plain-publication .plain-publication__bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

.plain-site.plain-publication .plain-publication__comparison :is(th, td)[data-highlight] {
  background: color-mix(in srgb, var(--plain-link) 7%, transparent);
}

.plain-site.plain-publication .plain-publication__comparison thead th[data-highlight] {
  color: var(--plain-foreground);
}

.plain-site.plain-publication .plain-publication__comparison-value {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.plain-site.plain-publication .plain-publication__comparison-value[data-value="yes"] .plain-publication__comparison-glyph {
  color: var(--plain-link);
}

.plain-site.plain-publication .plain-publication__comparison-value[data-value="no"] {
  color: var(--plain-muted);
}

.plain-site.plain-publication .plain-publication__comparison-glyph {
  flex: none;
}

.plain-site.plain-publication .plain-publication__comparison-note {
  display: block;
  margin-top: 0.15rem;
  color: var(--plain-muted);
  font-size: 0.85em;
  font-weight: 400;
}

.plain-site.plain-publication .plain-publication__beats {
  margin-block: 2rem;
}

.plain-site.plain-publication .plain-publication__beat {
  scroll-margin-top: calc(var(--hraness-sticky-offset, 0px) + 1.5rem);
}

.plain-site.plain-publication .plain-publication__beat + .plain-publication__beat {
  margin-top: 3rem;
}

.plain-site.plain-publication .plain-publication__beat-detail {
  margin-top: -0.75rem;
  font-size: .9375rem;
}

.plain-site.plain-publication .plain-publication__social-kit {
  margin: 2.5rem 0;
  border-block: 1px solid var(--plain-line);
}

.plain-site.plain-publication .plain-publication__social-kit > summary {
  padding: 0.9rem 0;
  cursor: pointer;
  font-weight: 700;
}

.plain-site.plain-publication .plain-publication__social-kit-list {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.plain-site.plain-publication .plain-publication__social-kit-item {
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  background: var(--plain-surface);
}

.plain-site.plain-publication .plain-publication__social-kit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.plain-site.plain-publication .plain-publication__social-kit-label {
  flex: 1 1 auto;
  font-weight: 700;
}

.plain-site.plain-publication .plain-publication__social-kit-count {
  color: var(--plain-muted);
  font-variant-numeric: tabular-nums;
}

.plain-site.plain-publication .plain-publication__social-kit-item[data-over] .plain-publication__social-kit-count {
  color: var(--danger, CanvasText);
  font-weight: 700;
}

.plain-site.plain-publication .plain-publication__social-kit-copy {
  min-block-size: 2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--plain-line);
  border-radius: 999px;
  background: var(--plain-background);
  color: var(--plain-foreground);
  cursor: pointer;
  font: inherit;
}

.plain-site.plain-publication .plain-publication__social-kit-copy:focus-visible {
  outline: 2px solid var(--plain-link);
  outline-offset: 2px;
}

.plain-site.plain-publication .plain-publication__social-kit-text {
  margin: 0.6rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.plain-site.plain-publication .plain-publication__social-kit-facts {
  padding-bottom: 1rem;
  font-size: .9375rem;
}

.plain-site.plain-publication .plain-publication__visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (pointer: coarse) {
  .plain-site.plain-publication .plain-publication__social-kit-copy {
    min-block-size: var(--interactive-target-min, 48px);
  }
}

@media (forced-colors: active) {
  .plain-site.plain-publication :where(.plain-publication__bar-track, .plain-publication__social-kit-item, .plain-publication__social-kit-copy) {
    border: 1px solid CanvasText;
  }

  .plain-site.plain-publication .plain-publication__bar-fill {
    background: CanvasText;
  }

  .plain-site.plain-publication .plain-publication__bar[data-highlight] .plain-publication__bar-fill {
    background: Highlight;
  }

  .plain-site.plain-publication .plain-publication__comparison :is(th, td)[data-highlight] {
    background: Canvas;
  }
}

/**
 * Status pages
 *
 * One composition for the 404 page and recoverable error pages, shared by the
 * React `StatusPage` and the static `renderStatusPageHtml` markup. The glyph is
 * real text; `attachStatusPage` draws it as a dot field on a canvas and marks
 * the root `data-hraness-status-field="live"` only after the canvas paints.
 * Sites retheme through --hraness-status-ink, -muted, -accent, -line, -radius,
 * and -glyph-font; everything else follows the palette tokens.
 */
@layer components.hraness-design-kit.legacy {
  .hraness-status-page {
    --_hraness-status-ink: var(--hraness-status-ink, var(--foreground, CanvasText));
    --_hraness-status-muted: var(--hraness-status-muted, var(--muted, GrayText));
    --_hraness-status-accent: var(--hraness-status-accent, var(--hraness-site-accent, var(--primary, var(--accent, LinkText))));
    --_hraness-status-line: var(--hraness-status-line, color-mix(in srgb, var(--_hraness-status-ink) 14%, transparent));
    --_hraness-status-radius: var(--hraness-status-radius, var(--hraness-marketing-radius, 0.75rem));

    display: grid;
    min-block-size: min(84svh, 52rem);
    box-sizing: border-box;
    place-items: center;
    padding-block: clamp(2.5rem, 7vw, 5rem);
    padding-inline: max(1rem, var(--layout-edge-inset, 1rem));
    overflow-x: clip;
    color: var(--_hraness-status-ink);
    font-family: var(--font-text, inherit);
    outline: none;
  }

  .hraness-status-page__inner {
    display: flex;
    inline-size: min(100%, 42rem);
    min-inline-size: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hraness-status-page__code {
    position: relative;
    display: grid;
    inline-size: 100%;
    place-items: center;
    margin-block-end: clamp(0.75rem, 2.5vw, 1.5rem);
    user-select: none;
    -webkit-user-select: none;
  }

  .hraness-status-page__glyph {
    padding-block: 0.06em;
    color: color-mix(in srgb, var(--_hraness-status-ink) 82%, transparent);
    font-family: var(--hraness-status-glyph-font, var(--hraness-type-heading-font, var(--font-heading, inherit)));
    font-size: clamp(7rem, 30vw, 13.5rem);
    font-variant-numeric: lining-nums;
    font-weight: var(--hraness-type-heading-weight, 600);
    letter-spacing: -0.02em;
    line-height: 1;
  }

  /* The canvas reads its accent from `color`. */
  .hraness-status-page__field {
    position: absolute;
    inset: -2.5rem -1.5rem;
    display: block;
    inline-size: calc(100% + 3rem);
    block-size: calc(100% + 5rem);
    color: var(--_hraness-status-accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease-out;
  }

  .hraness-status-page[data-hraness-status-field="live"] .hraness-status-page__glyph {
    visibility: hidden;
  }

  .hraness-status-page[data-hraness-status-field="live"] .hraness-status-page__field {
    opacity: 1;
  }

  .hraness-status-page__title {
    max-inline-size: 22ch;
    margin: 0;
    color: var(--_hraness-status-ink);
    font-family: var(--hraness-type-heading-font, var(--font-heading, inherit));
    font-size: clamp(1.75rem, 4.2vw, 2.4rem);
    font-weight: var(--hraness-type-heading-weight, 600);
    letter-spacing: -0.012em;
    line-height: 1.15;
    text-wrap: balance;
  }

  .hraness-status-page__summary {
    max-inline-size: 34rem;
    margin: 0.65rem 0 0;
    color: var(--_hraness-status-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
    text-wrap: pretty;
  }

  .hraness-status-page__hint {
    margin: 0.85rem 0 0;
    color: var(--_hraness-status-ink);
    font-size: 1rem;
    line-height: 1.5;
  }

  .hraness-status-page__hint-link {
    color: var(--_hraness-status-accent);
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .hraness-status-page__hint[hidden],
  .hraness-status-page__back[hidden] {
    display: none;
  }

  .hraness-status-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-block-start: 1.6rem;
  }

  /* Zero specificity, so the shared foil treatment wins wherever it loads. */
  :where(.hraness-status-page__action) {
    display: inline-flex;
    min-block-size: 2.75rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.3rem;
    border: 1px solid var(--_hraness-status-line);
    border-radius: var(--_hraness-status-radius);
    background: transparent;
    color: var(--_hraness-status-ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.975rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
  }

  :where(.hraness-status-page__action[data-emphasis="primary"]) {
    border: 2px solid var(--_hraness-status-accent);
    background: var(--surface, var(--background, Canvas));
    box-shadow: 0 1px 4px color-mix(in srgb, var(--_hraness-status-ink) 12%, transparent);
  }

  .hraness-status-page__back {
    color: var(--_hraness-status-muted);
    font-size: 0.95rem;
    text-decoration-line: underline;
    text-decoration-color: var(--_hraness-status-line);
    text-underline-offset: 0.25em;
  }

  .hraness-status-page__back:hover {
    color: var(--_hraness-status-ink);
  }

  .hraness-status-page__next {
    inline-size: 100%;
    margin-block-start: clamp(2.75rem, 7vw, 4rem);
  }

  .hraness-status-page__next-heading {
    margin: 0 0 0.85rem;
    color: var(--_hraness-status-muted);
    font-family: var(--font-text, inherit);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
  }

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

  .hraness-status-page__next-link {
    display: flex;
    block-size: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--_hraness-status-line);
    border-radius: var(--_hraness-status-radius);
    background: color-mix(in srgb, var(--surface, var(--background, Canvas)) 70%, transparent);
    color: var(--_hraness-status-ink);
    text-align: start;
    text-decoration: none;
    transition: border-color 160ms ease-out, transform 160ms ease-out;
  }

  .hraness-status-page__next-link:hover {
    border-color: color-mix(in srgb, var(--_hraness-status-accent) 55%, var(--_hraness-status-line));
    transform: translateY(-1px);
  }

  .hraness-status-page__next-label {
    font-size: 0.975rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .hraness-status-page__next-description {
    color: var(--_hraness-status-muted);
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .hraness-status-page__agent {
    margin: 2rem 0 0;
    color: var(--_hraness-status-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .hraness-status-page__agent a {
    color: inherit;
    text-underline-offset: 0.2em;
  }

  .hraness-status-page a:focus-visible,
  .hraness-status-page button:focus-visible {
    outline: 2px solid var(--_hraness-status-accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .hraness-status-page__field,
    .hraness-status-page__next-link {
      transition: none;
    }

    .hraness-status-page__next-link:hover {
      transform: none;
    }
  }

  @media (forced-colors: active) {
    .hraness-status-page__field {
      display: none;
    }

    .hraness-status-page[data-hraness-status-field="live"] .hraness-status-page__glyph {
      visibility: visible;
    }

    .hraness-status-page__glyph {
      color: CanvasText;
    }

    :where(.hraness-status-page__action),
    .hraness-status-page__next-link {
      border-color: ButtonText;
    }
  }
}

/* Raw HTML counterpart to MarketingMarquee and renderMarketingMarqueeHtml.
 * The static layout is the default: a wrapped list with hidden duplicates.
 * Motion is added only on screens whose readers allow it, so reduced motion,
 * print, and unsupported media all keep every name readable in place. */
@layer components.hraness-design-kit.legacy {
.hraness-marketing-marquee {
  --_hraness-marquee-ink: var(--hraness-marketing-ink, var(--foreground, CanvasText));
  --_hraness-marquee-muted: var(--hraness-marketing-muted, var(--muted, GrayText));
  --_hraness-marquee-line: var(--hraness-marketing-line, color-mix(in srgb, var(--_hraness-marquee-ink) 12%, transparent));
  --_hraness-marquee-line-strong: var(--hraness-marketing-line-strong, color-mix(in srgb, var(--_hraness-marquee-ink) 22%, transparent));
  --_hraness-marquee-gap: clamp(1.75rem, 3vw, 2.5rem);
  --_hraness-marquee-fade: clamp(1.5rem, 6vw, 4.5rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "header header" "viewport control";
  align-items: center;
  gap: 1rem 0.75rem;
  box-sizing: border-box;
  inline-size: min(100%, var(--hraness-marketing-measure, 72rem));
  min-inline-size: 0;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  padding-inline: var(--hraness-marketing-gutter, clamp(1.25rem, 4vw, 3rem));
  color: var(--_hraness-marquee-muted);
  font-family: var(--hraness-marketing-text-font, var(--font-text, inherit));
}

.hraness-marketing-marquee__header {
  grid-area: header;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  min-inline-size: 0;
}

.hraness-marketing-marquee[data-align="center"] .hraness-marketing-marquee__header {
  justify-content: center;
  text-align: center;
}

.hraness-marketing-marquee__label {
  margin: 0;
  color: var(--_hraness-marquee-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
}

.hraness-marketing-marquee__count {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.hraness-marketing-marquee__action {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.5rem;
  color: var(--_hraness-marquee-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.hraness-marketing-marquee__action:hover {
  color: var(--_hraness-marquee-ink);
}

.hraness-marketing-marquee__viewport {
  grid-area: viewport;
  min-inline-size: 0;
}

.hraness-marketing-marquee__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem var(--_hraness-marquee-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hraness-marketing-marquee[data-align="center"] .hraness-marketing-marquee__list {
  justify-content: center;
}

.hraness-marketing-marquee__list[aria-hidden="true"] {
  display: none;
}

.hraness-marketing-marquee__item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  color: var(--_hraness-marquee-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.hraness-marketing-marquee__mark {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: currentColor;
}

.hraness-marketing-marquee__monogram {
  display: inline-grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 1.5px solid currentColor;
  border-radius: 0.3125rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.hraness-marketing-marquee__sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.hraness-marketing-marquee__toggle,
.hraness-marketing-marquee__control {
  display: none;
}

.hraness-marketing-marquee__control-text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hraness-marketing-marquee__control-icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.hraness-marketing-marquee__control-icon[data-icon="play"],
.hraness-marketing-marquee__toggle:checked ~ .hraness-marketing-marquee__control .hraness-marketing-marquee__control-icon[data-icon="pause"] {
  display: none;
}

.hraness-marketing-marquee__toggle:checked ~ .hraness-marketing-marquee__control .hraness-marketing-marquee__control-icon[data-icon="play"] {
  display: block;
}

/* About 3.75 seconds per item, so long and short lists move at a similar pace. */
.hraness-marketing-marquee__list:has(> :nth-child(8)) { --_hraness-marquee-duration: 30s; }
.hraness-marketing-marquee__list:has(> :nth-child(10)) { --_hraness-marquee-duration: 38s; }
.hraness-marketing-marquee__list:has(> :nth-child(12)) { --_hraness-marquee-duration: 45s; }
.hraness-marketing-marquee__list:has(> :nth-child(14)) { --_hraness-marquee-duration: 53s; }
.hraness-marketing-marquee__list:has(> :nth-child(16)) { --_hraness-marquee-duration: 60s; }
.hraness-marketing-marquee__list:has(> :nth-child(18)) { --_hraness-marquee-duration: 68s; }
.hraness-marketing-marquee__list:has(> :nth-child(20)) { --_hraness-marquee-duration: 75s; }
.hraness-marketing-marquee__list:has(> :nth-child(24)) { --_hraness-marquee-duration: 90s; }
.hraness-marketing-marquee__list:has(> :nth-child(28)) { --_hraness-marquee-duration: 105s; }
.hraness-marketing-marquee__list:has(> :nth-child(32)) { --_hraness-marquee-duration: 120s; }
.hraness-marketing-marquee__list:has(> :nth-child(40)) { --_hraness-marquee-duration: 150s; }
.hraness-marketing-marquee__list:has(> :nth-child(48)) { --_hraness-marquee-duration: 180s; }
.hraness-marketing-marquee__list:has(> :nth-child(56)) { --_hraness-marquee-duration: 210s; }

@media screen and (prefers-reduced-motion: no-preference) {
.hraness-marketing-marquee__viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 var(--_hraness-marquee-fade), #000 calc(100% - var(--_hraness-marquee-fade)), transparent);
}

.hraness-marketing-marquee__track {
  display: flex;
  inline-size: max-content;
}

.hraness-marketing-marquee__list,
.hraness-marketing-marquee__list[aria-hidden="true"] {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  padding-inline-end: var(--_hraness-marquee-gap);
  animation: hraness-marketing-marquee var(--hraness-marketing-marquee-duration, var(--_hraness-marquee-duration, 26s)) linear infinite;
  will-change: transform;
}

.hraness-marketing-marquee[data-align="center"] .hraness-marketing-marquee__list {
  justify-content: flex-start;
}

:is([dir="rtl"] .hraness-marketing-marquee__list, .hraness-marketing-marquee__list:dir(rtl)) {
  animation-name: hraness-marketing-marquee-rtl;
}

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

.hraness-marketing-marquee__control {
  grid-area: control;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--_hraness-marquee-line);
  border-radius: 999px;
  color: var(--_hraness-marquee-muted);
  cursor: pointer;
}

.hraness-marketing-marquee__control:hover {
  border-color: var(--_hraness-marquee-line-strong);
  color: var(--_hraness-marquee-ink);
}

.hraness-marketing-marquee__toggle:focus-visible ~ .hraness-marketing-marquee__control {
  outline: 2px solid var(--hraness-marketing-accent, var(--focus, Highlight));
  outline-offset: 2px;
}

.hraness-marketing-marquee__toggle:checked ~ .hraness-marketing-marquee__viewport .hraness-marketing-marquee__list {
  animation-play-state: paused;
}
}

@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
.hraness-marketing-marquee__viewport:hover .hraness-marketing-marquee__list {
  animation-play-state: paused;
}
}

@media (pointer: coarse) {
.hraness-marketing-marquee__action {
  min-block-size: 2.75rem;
}
}

@media (forced-colors: active) {
.hraness-marketing-marquee__viewport {
  mask-image: none;
}

.hraness-marketing-marquee__control {
  border-color: ButtonBorder;
  color: ButtonText;
}
}

@keyframes hraness-marketing-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes hraness-marketing-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
}

/**
 * Code-built mockups
 *
 * The one stylesheet for `@hraness/design-kit/mockups` and `./mockups/client`.
 * It is self-contained: every token it reads from the design kit has a literal
 * fallback, it loads no fonts or images, and every selector sits under an
 * `hkm-` class, so a film build can inline this file alone.
 *
 * Theming: colors use light-dark() and follow the inherited color-scheme.
 * `data-hkm-theme="light|dark"` pins one mockup. Products retheme through
 * the --hkm-accent / --hkm-accent-foreground pair, --hkm-font, --hkm-mono,
 * and --hkm-serif. Custom accent fills must supply their readable foreground;
 * filled controls and their details always consume the pair together.
 *
 * Motion: nothing animates on first paint. Transitions turn on under
 * `[data-hkm-animated]`, which the client shells set after the first user
 * change and a film may set itself. Looping motion (typing dots, caret,
 * hotspot) runs only with prefers-reduced-motion: no-preference.
 */
@layer components.hraness-design-kit.legacy {
  /* ---------------------------------------------------------------- */
  /* Palette and root                                                 */
  /* ---------------------------------------------------------------- */

  :where(.hkm-root, .hkm-showcase) {
    --hkm-accent: var(--hraness-site-accent, var(--primary, #2f6fed));
    --hkm-accent-foreground: var(--hraness-site-accent-ink, var(--primary-foreground, #ffffff));
    --hkm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --hkm-mono: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);
    --hkm-serif: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
    --hkm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --hkm-spring: linear(0, 0.057, 0.188, 0.344, 0.498, 0.635, 0.749, 0.837, 0.903, 0.949, 0.98, 0.999, 1.009, 1.014, 1.015, 1.014, 1.012, 1.01, 1.008, 1.005, 1.004, 1.002, 1.001, 1.001, 1);

    --hkm-bg: light-dark(#ffffff, #151619);
    --hkm-fg: light-dark(#15171a, #eceef1);
    --hkm-muted: light-dark(#5e6570, #9ba2ac);
    --hkm-faint: light-dark(#8a9099, #6f757e);
    --hkm-line: light-dark(#e7e9ec, #2a2d33);
    --hkm-surface: light-dark(#f4f5f7, #0e0f11);
    --hkm-card: light-dark(#ffffff, #1b1c20);
    --hkm-field: light-dark(#eff1f4, #24262b);
    --hkm-chrome: light-dark(#eeeef0, #232428);
    --hkm-chrome-ink: light-dark(#5a5c62, #a7a9af);
    --hkm-address: light-dark(#ffffff, #313238);
    --hkm-frame-line: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
    --hkm-ok: light-dark(#1a7f45, #4cc38a);
    --hkm-warn: light-dark(#9a6200, #f0b54a);
    --hkm-error: light-dark(#c2352b, #ff7b72);
    --hkm-shadow:
      0 0 0 0.5px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.5)),
      0 1px 2px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3)),
      0 18px 40px -14px light-dark(rgb(15 20 30 / 0.22), rgb(0 0 0 / 0.6));
  }

  :where(.hkm-root, .hkm-showcase)[data-hkm-theme="light"] {
    color-scheme: light;
  }

  :where(.hkm-root, .hkm-showcase)[data-hkm-theme="dark"] {
    color-scheme: dark;
  }

  .hkm-root {
    container: hkm / inline-size;
    display: block;
    position: relative;
    min-inline-size: 0;
    max-inline-size: 100%;
    color: var(--hkm-fg);
    font: 400 15px/1.4 var(--hkm-font);
    letter-spacing: 0;
    text-align: start;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    user-select: none;
    -webkit-user-select: none;
  }

  .hkm-root *,
  .hkm-root *::before,
  .hkm-root *::after {
    box-sizing: border-box;
  }

  .hkm-root :where(p, ol, ul, li, figure, blockquote) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hkm-root :where(b) {
    font-weight: 650;
  }

  .hkm-root .hkm-muted {
    color: var(--hkm-muted);
  }

  .hkm-root .hkm-unit {
    position: relative;
  }

  .hkm-root .hkm-glyph {
    display: block;
    flex: none;
  }

  /* Brand marks are app-icon tiles: the vendor glyph in readable ink on the
   * vendor color. The glyph variant follows the surrounding text instead. */
  .hkm-root .hkm-brand-mark {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: var(--hkm-mark-size, 32px);
    block-size: var(--hkm-mark-size, 32px);
    border-radius: calc(var(--hkm-mark-size, 32px) * 0.26);
    background: var(--hkm-mark-accent, var(--hkm-field));
    color: var(--hkm-mark-ink, var(--hkm-muted));
    box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.1));
    font: 650 calc(var(--hkm-mark-size, 32px) * 0.36)/1 var(--hkm-font);
    letter-spacing: 0.01em;
  }

  .hkm-root .hkm-brand-mark svg {
    display: block;
    inline-size: 56%;
    block-size: 56%;
  }

  .hkm-root .hkm-brand-mark[data-hkm-variant="glyph"] {
    background: none;
    box-shadow: none;
    color: inherit;
  }

  .hkm-root .hkm-brand-mark[data-hkm-variant="glyph"] svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .hkm-root .hkm-avatar {
    display: inline-grid;
    flex: none;
    place-items: center;
    overflow: hidden;
    color: #ffffff;
    font-family: var(--hkm-font);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
    box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.08);
  }

  .hkm-root .hkm-photo {
    display: block;
    inline-size: 100%;
    border-radius: 12px;
    box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.08);
  }

  .hkm-root .hkm-card {
    border: 1px solid var(--hkm-line);
    border-radius: 10px;
    background: var(--hkm-card);
  }

  .hkm-root .hkm-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    block-size: 34px;
    padding-inline: 12px;
    border-radius: 999px;
    background: var(--hkm-field);
    color: var(--hkm-muted);
    font-size: 13px;
    white-space: nowrap;
  }

  /* ---------------------------------------------------------------- */
  /* Window chrome                                                    */
  /* ---------------------------------------------------------------- */

  .hkm-root .hkm-window {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--hkm-bg);
    box-shadow: 0 0 0 1px var(--hkm-frame-line), var(--hkm-shadow);
  }

  .hkm-root .hkm-lights {
    display: flex;
    flex: none;
    gap: 7px;
  }

  .hkm-root .hkm-lights i {
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.16);
  }

  .hkm-root .hkm-lights i:nth-child(2) {
    background: #febc2e;
  }

  .hkm-root .hkm-lights i:nth-child(3) {
    background: #28c840;
  }

  .hkm-root .hkm-browser-bar,
  .hkm-root .hkm-title-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    block-size: 44px;
    padding-inline: 14px 12px;
    border-block-end: 1px solid var(--hkm-frame-line);
    background: var(--hkm-chrome);
    color: var(--hkm-chrome-ink);
    font: 400 13px/1 var(--hkm-font);
  }

  .hkm-root .hkm-title-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    block-size: 38px;
  }

  .hkm-root .hkm-title {
    overflow: hidden;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hkm-root .hkm-browser-nav {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    opacity: 0.72;
  }

  .hkm-root .hkm-address {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-inline-size: 0;
    max-inline-size: 520px;
    block-size: 28px;
    margin-inline: auto;
    padding-inline: 12px;
    border-radius: 8px;
    background: var(--hkm-address);
    box-shadow: 0 0 0 0.5px var(--hkm-frame-line);
    white-space: nowrap;
  }

  .hkm-root .hkm-address > .hkm-glyph {
    opacity: 0.6;
  }

  .hkm-root .hkm-address-host {
    color: var(--hkm-fg);
  }

  .hkm-root .hkm-address-host,
  .hkm-root .hkm-address-path {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hkm-root .hkm-address-path {
    min-inline-size: 0;
  }

  .hkm-root .hkm-browser-tools {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-inline-size: 60px;
  }

  .hkm-root .hkm-page {
    position: relative;
    overflow: hidden;
    max-block-size: var(--hkm-page-height, none);
    background: var(--hkm-bg);
    color: var(--hkm-fg);
  }

  /* A page window onto a longer page; the fade says it keeps going. */
  .hkm-root .hkm-page[data-hkm-fade]::after,
  .hkm-root .hkm-scroll-fade::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    block-size: var(--hkm-fade-height, 56px);
    background: linear-gradient(to bottom, transparent, var(--hkm-fade-to, var(--hkm-bg)));
    pointer-events: none;
  }

  .hkm-root .hkm-scroll-fade {
    position: relative;
    overflow: hidden;
    max-block-size: var(--hkm-scroll-height);
  }

  @container hkm (max-width: 560px) {
    .hkm-root .hkm-window {
      border-radius: 10px;
    }

    .hkm-root .hkm-browser-bar {
      gap: 8px;
      block-size: 38px;
      padding-inline: 10px 8px;
      font-size: 12px;
    }

    .hkm-root .hkm-browser-nav,
    .hkm-root .hkm-address-path {
      display: none;
    }

    .hkm-root .hkm-lights {
      gap: 5px;
    }

    .hkm-root .hkm-lights i {
      inline-size: 10px;
      block-size: 10px;
    }

    .hkm-root .hkm-browser-tools {
      min-inline-size: 0;
    }
  }

  /* ---------------------------------------------------------------- */
  /* Terminal                                                         */
  /* ---------------------------------------------------------------- */

  .hkm-root.hkm-terminal,
  .hkm-root.hkm-agent[data-hkm-kind="agent"] {
    --hkm-bg: light-dark(#fbfbfc, #111214);
    --hkm-chrome: light-dark(#ececef, #1d1e22);
  }

  .hkm-root .hkm-terminal-body {
    padding: 16px 18px 18px;
    font: 400 13.5px/1.6 var(--hkm-mono);
    font-variant-ligatures: none;
  }

  .hkm-root .hkm-terminal-body[data-hkm-density="presentation"] {
    font-size: var(--hkm-terminal-presentation-size, 1rem);
    line-height: 1.5;
  }

  .hkm-root .hkm-terminal-body[data-hkm-density="presentation"] .hkm-terminal-line {
    min-block-size: 1.5em;
  }

  .hkm-root .hkm-terminal-lines {
    display: grid;
    gap: 1px;
  }

  .hkm-root .hkm-terminal-line {
    display: flex;
    gap: 1ch;
    min-block-size: 1.6em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .hkm-root .hkm-terminal-line[data-hkm-line="input"] {
    color: var(--hkm-fg);
    font-weight: 500;
  }

  .hkm-root .hkm-terminal-line[data-hkm-line="output"] {
    color: light-dark(#3b4048, #c3c7cd);
  }

  .hkm-root .hkm-terminal-line[data-hkm-line="comment"] {
    color: var(--hkm-faint);
    font-style: italic;
  }

  .hkm-root .hkm-terminal-line[data-hkm-tone="ok"] {
    color: var(--hkm-ok);
  }

  .hkm-root .hkm-terminal-line[data-hkm-tone="warn"] {
    color: var(--hkm-warn);
  }

  .hkm-root .hkm-terminal-line[data-hkm-tone="error"] {
    color: var(--hkm-error);
  }

  .hkm-root .hkm-terminal-line[data-hkm-tone="muted"] {
    color: var(--hkm-muted);
  }

  .hkm-root .hkm-terminal-prompt {
    flex: none;
    color: var(--hkm-accent);
    font-weight: 600;
  }

  .hkm-root .hkm-terminal-line[data-hkm-line="comment"] .hkm-terminal-prompt {
    color: inherit;
    font-weight: inherit;
  }

  .hkm-root .hkm-caret {
    display: inline-block;
    inline-size: 0.6em;
    block-size: 1.15em;
    align-self: center;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.75;
  }

  /* ---------------------------------------------------------------- */
  /* Desktop app window                                               */
  /* ---------------------------------------------------------------- */

  .hkm-root.hkm-app-window .hkm-window {
    display: grid;
    grid-template-columns: 1fr;
    min-block-size: 280px;
  }

  .hkm-root.hkm-app-window .hkm-window[data-hkm-sidebar] {
    grid-template-columns: minmax(150px, 30%) 1fr;
  }

  .hkm-root .hkm-app-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 13px 10px 14px;
    border-inline-end: 1px solid var(--hkm-frame-line);
    background: light-dark(rgb(238 238 241 / 0.92), rgb(34 35 39 / 0.92));
    color: var(--hkm-chrome-ink);
    font-size: 13px;
  }

  .hkm-root .hkm-app-sidebar > .hkm-lights {
    padding-inline: 4px;
  }

  .hkm-root .hkm-app-sidebar-body {
    display: grid;
    gap: 2px;
  }

  .hkm-root .hkm-app-main {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .hkm-root .hkm-app-bar {
    background: var(--hkm-bg);
  }

  .hkm-root .hkm-app-tools {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  .hkm-root .hkm-app-content {
    flex: 1;
    min-block-size: 0;
    padding: 18px;
  }

  @container hkm (max-width: 480px) {
    .hkm-root.hkm-app-window .hkm-window[data-hkm-sidebar] {
      grid-template-columns: 1fr;
    }

    .hkm-root .hkm-app-sidebar {
      display: none;
    }

    .hkm-root.hkm-app-window .hkm-app-bar > span:first-child::before {
      content: "";
    }
  }

  /* ---------------------------------------------------------------- */
  /* Menu bar popover                                                 */
  /* ---------------------------------------------------------------- */

  .hkm-root.hkm-menubar {
    padding-block-end: 12px;
    border-radius: 12px;
    background:
      radial-gradient(120% 140% at 80% -20%, light-dark(#c9d6ee, #28324a), transparent 60%),
      linear-gradient(180deg, light-dark(#dfe5ef, #1a1d24), light-dark(#eef1f5, #121418));
  }

  .hkm-root .hkm-menubar {
    display: flex;
    align-items: center;
    gap: 16px;
    block-size: 28px;
    padding-inline: 14px;
    border-radius: 12px 12px 0 0;
    background: light-dark(rgb(255 255 255 / 0.55), rgb(20 21 24 / 0.6));
    color: var(--hkm-fg);
    font-size: 13px;
    font-weight: 500;
  }

  .hkm-root .hkm-menubar-spacer {
    flex: 1;
  }

  .hkm-root .hkm-menubar-item {
    display: grid;
    place-items: center;
    min-inline-size: 26px;
    block-size: 22px;
    padding-inline: 5px;
    border-radius: 5px;
  }

  .hkm-root .hkm-menubar-item[data-hkm-open] {
    background: light-dark(rgb(0 0 0 / 0.12), rgb(255 255 255 / 0.18));
  }

  .hkm-root .hkm-menubar-dot {
    inline-size: 12px;
    block-size: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
  }

  .hkm-root .hkm-menubar-clock {
    font-variant-numeric: tabular-nums;
  }

  .hkm-root .hkm-popover {
    inline-size: min(320px, calc(100% - 24px));
    margin-block-start: 6px;
    margin-inline: auto 12px;
    padding: 6px;
    border-radius: 12px;
    background: light-dark(rgb(246 246 248 / 0.97), rgb(40 41 46 / 0.97));
    box-shadow: 0 0 0 0.5px var(--hkm-frame-line), var(--hkm-shadow);
    font-size: 13px;
  }

  .hkm-root .hkm-popover-title {
    padding: 6px 10px 8px;
    color: var(--hkm-muted);
    font-size: 12px;
    font-weight: 600;
  }

  .hkm-root .hkm-popover-list {
    display: grid;
    gap: 1px;
  }

  .hkm-root .hkm-popover-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
  }

  .hkm-root .hkm-popover-item[data-hkm-selected] {
    background: var(--hkm-accent);
    color: var(--hkm-accent-foreground);
  }

  .hkm-root .hkm-popover-dot {
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    margin-block-start: 5px;
    border-radius: 50%;
    background: var(--hkm-faint);
  }

  .hkm-root .hkm-popover-item[data-hkm-tone="ok"] .hkm-popover-dot {
    background: var(--hkm-ok);
  }

  .hkm-root .hkm-popover-item[data-hkm-tone="warn"] .hkm-popover-dot {
    background: var(--hkm-warn);
  }

  .hkm-root .hkm-popover-item[data-hkm-tone="error"] .hkm-popover-dot {
    background: var(--hkm-error);
  }

  .hkm-root .hkm-popover-item[data-hkm-selected] .hkm-popover-dot {
    background: currentColor;
  }

  .hkm-root .hkm-popover-text {
    display: grid;
    gap: 1px;
    min-inline-size: 0;
  }

  .hkm-root .hkm-popover-label {
    font-weight: 500;
  }

  .hkm-root .hkm-popover-detail {
    color: var(--hkm-muted);
    font-size: 12px;
  }

  .hkm-root .hkm-popover-item[data-hkm-selected] .hkm-popover-detail {
    color: inherit;
  }

  .hkm-root .hkm-popover-footer {
    margin-block-start: 5px;
    padding: 8px 10px 5px;
    border-block-start: 1px solid var(--hkm-frame-line);
    color: var(--hkm-muted);
    font-size: 12px;
  }

  /* ---------------------------------------------------------------- */
  /* Phone                                                            */
  /* ---------------------------------------------------------------- */

  /* Every phone length is in device points through --pt, so the phone scales with its root. */
  .hkm-root:has(> .hkm-device) {
    inline-size: min(100%, var(--hkm-phone-width, 380px));
    margin-inline: auto;
    --hkm-screen: light-dark(#ffffff, #000000);
    --hkm-edge: light-dark(#c9cbcf, #3a3b3e);
    --hkm-edge-hi: light-dark(#eef0f2, #6b6d72);
    --hkm-edge-lo: light-dark(#9a9ca1, #232426);
  }

  .hkm-root .hkm-device {
    --pt: calc(100cqw / 412);
    position: relative;
    inline-size: 100%;
    aspect-ratio: 412 / var(--hkm-phone-height, 866);
    padding: calc(2.5 * var(--pt));
    border-radius: calc(57 * var(--pt));
    background: linear-gradient(135deg, var(--hkm-edge-hi) 0%, var(--hkm-edge) 18%, var(--hkm-edge-lo) 50%, var(--hkm-edge) 82%, var(--hkm-edge-hi) 100%);
    box-shadow:
      inset 0 0 0 calc(0.6 * var(--pt)) rgb(255 255 255 / 0.55),
      inset 0 0 calc(1.5 * var(--pt)) calc(0.8 * var(--pt)) rgb(0 0 0 / 0.18),
      0 calc(1 * var(--pt)) calc(1 * var(--pt)) rgb(0 0 0 / 0.12),
      0 40px 80px -30px rgb(0 0 0 / 0.35),
      0 18px 36px -24px rgb(0 0 0 / 0.25);
  }

  .hkm-root .hkm-device-button {
    position: absolute;
    inline-size: calc(3.2 * var(--pt));
    border-radius: calc(1.5 * var(--pt));
    background: linear-gradient(90deg, var(--hkm-edge-lo), var(--hkm-edge-hi) 55%, var(--hkm-edge));
    box-shadow: inset 0 0 0 calc(0.4 * var(--pt)) rgb(0 0 0 / 0.12);
  }

  .hkm-root .hkm-device-button[data-hkm-button="action"] {
    inset-block-start: calc(122 * var(--pt));
    inset-inline-start: calc(-2.6 * var(--pt));
    block-size: calc(32 * var(--pt));
  }

  .hkm-root .hkm-device-button[data-hkm-button="volume-up"] {
    inset-block-start: calc(184 * var(--pt));
    inset-inline-start: calc(-2.6 * var(--pt));
    block-size: calc(62 * var(--pt));
  }

  .hkm-root .hkm-device-button[data-hkm-button="volume-down"] {
    inset-block-start: calc(260 * var(--pt));
    inset-inline-start: calc(-2.6 * var(--pt));
    block-size: calc(62 * var(--pt));
  }

  .hkm-root .hkm-device-button[data-hkm-button="power"] {
    inset-block-start: calc(214 * var(--pt));
    inset-inline-end: calc(-2.6 * var(--pt));
    block-size: calc(100 * var(--pt));
  }

  .hkm-root .hkm-bezel {
    position: relative;
    block-size: 100%;
    padding: calc(8.5 * var(--pt));
    border-radius: calc(54.5 * var(--pt));
    background: #050506;
    box-shadow: inset 0 0 0 calc(0.8 * var(--pt)) #2a2a2d, inset 0 0 0 calc(1.6 * var(--pt)) #0b0b0c;
  }

  .hkm-root .hkm-screen {
    position: relative;
    isolation: isolate;
    block-size: 100%;
    overflow: hidden;
    border-radius: calc(46 * var(--pt));
    background: var(--hkm-screen);
    color: var(--hkm-fg);
  }

  .hkm-root .hkm-screen-content {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  /* The generic phone body clears the status bar and home indicator. */
  .hkm-root .hkm-phone-body {
    block-size: 100%;
    overflow: hidden;
    padding: calc(58 * var(--pt)) calc(20 * var(--pt)) calc(34 * var(--pt));
  }

  .hkm-root .hkm-status-bar {
    position: absolute;
    z-index: 4;
    inset: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr calc(126 * var(--pt)) 1fr;
    align-items: center;
    block-size: calc(54 * var(--pt));
    padding-block-start: calc(3 * var(--pt));
    color: var(--hkm-fg);
  }

  .hkm-root .hkm-status-time {
    justify-self: center;
    padding-inline-start: calc(10 * var(--pt));
    font-size: calc(17 * var(--pt));
    font-weight: 600;
    letter-spacing: calc(-0.4 * var(--pt));
    font-variant-numeric: tabular-nums;
  }

  .hkm-root .hkm-status-glyphs {
    display: flex;
    grid-column: 3;
    justify-self: center;
    align-items: center;
    gap: calc(6 * var(--pt));
    padding-inline-end: calc(4 * var(--pt));
    fill: currentColor;
  }

  .hkm-root .hkm-status-cell {
    inline-size: calc(19 * var(--pt));
    block-size: calc(12 * var(--pt));
  }

  .hkm-root .hkm-status-wifi {
    inline-size: calc(17 * var(--pt));
    block-size: calc(12.3 * var(--pt));
  }

  .hkm-root .hkm-status-battery {
    inline-size: calc(27.4 * var(--pt));
    block-size: calc(13 * var(--pt));
  }

  .hkm-root .hkm-island {
    position: absolute;
    z-index: 5;
    inset-block-start: calc(11 * var(--pt));
    inset-inline-start: 50%;
    inline-size: calc(126 * var(--pt));
    block-size: calc(37 * var(--pt));
    translate: -50% 0;
    border-radius: calc(19 * var(--pt));
    background: #000000;
    box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) rgb(255 255 255 / 0.04);
  }

  .hkm-root .hkm-island::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(26 * var(--pt));
    inline-size: calc(10 * var(--pt));
    block-size: calc(10 * var(--pt));
    translate: 0 -50%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #1b2233 0 30%, #0a0c12 60%);
  }

  .hkm-root .hkm-home-indicator {
    position: absolute;
    z-index: 6;
    inset-block-end: calc(8 * var(--pt));
    inset-inline-start: 50%;
    inline-size: calc(139 * var(--pt));
    block-size: calc(5 * var(--pt));
    translate: -50% 0;
    border-radius: calc(3 * var(--pt));
    background: var(--hkm-fg);
  }

  /* ---------------------------------------------------------------- */
  /* Chat thread                                                      */
  /* ---------------------------------------------------------------- */

  .hkm-root .hkm-chat {
    --hkm-in-bg: light-dark(#e9e9eb, #262629);
    --hkm-in-fg: light-dark(#000000, #ffffff);
    --hkm-out-bg: #0a84ff;
    --hkm-out-fg: #ffffff;
    --hkm-meta: light-dark(#8e8e93, #8d8d93);
    --hkm-tint: light-dark(#007aff, #0a84ff);
    --hkm-nav-bg: light-dark(rgb(249 249 249 / 0.985), rgb(22 22 24 / 0.985));
    --hkm-hairline: light-dark(rgb(60 60 67 / 0.29), rgb(84 84 88 / 0.65));
    --hkm-nav-h: calc(124 * var(--pt));
    --hkm-composer-h: calc(86 * var(--pt));
    position: absolute;
    inset: 0;
    background: var(--hkm-screen, var(--hkm-bg));
    color: var(--hkm-in-fg);
    font-family: var(--hkm-font);
  }

  .hkm-root .hkm-chat[data-hkm-via] {
    --hkm-nav-h: calc(138 * var(--pt));
  }

  .hkm-root .hkm-chat[data-hkm-chat="chat"] {
    --hkm-in-bg: light-dark(#ffffff, #202c33);
    --hkm-in-fg: light-dark(#111b21, #e9edef);
    --hkm-out-bg: light-dark(#d9fdd3, #005c4b);
    --hkm-out-fg: light-dark(#111b21, #e9edef);
    --hkm-meta: light-dark(#667781, #8696a0);
    --hkm-tint: light-dark(#008069, #00a884);
    --hkm-nav-bg: light-dark(#f0f2f5, #202c33);
    --hkm-nav-h: calc(110 * var(--pt));
    background:
      radial-gradient(circle at 20% 30%, light-dark(rgb(0 0 0 / 0.025), rgb(255 255 255 / 0.02)) 0 calc(2 * var(--pt)), transparent calc(2.5 * var(--pt))) 0 0 / calc(28 * var(--pt)) calc(28 * var(--pt)),
      light-dark(#efeae2, #0b141a);
  }

  .hkm-root .hkm-chat-bare {
    --pt: calc(100cqw / 390);
    position: relative;
    overflow: hidden;
    aspect-ratio: 390 / 640;
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--hkm-frame-line), var(--hkm-shadow);
  }

  .hkm-root .hkm-chat-bare .hkm-chat {
    --hkm-nav-h: calc(72 * var(--pt));
  }

  .hkm-root .hkm-chat-thread {
    position: absolute;
    inset: 0 0 var(--hkm-composer-h);
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    justify-content: safe flex-end;
    overflow: hidden;
    padding-block: calc(var(--hkm-nav-h) + 10 * var(--pt)) calc(8 * var(--pt));
  }

  .hkm-root .hkm-chat-inner {
    display: flex;
    flex-direction: column;
  }

  .hkm-root .hkm-chat-divider {
    margin-block: calc(14 * var(--pt)) calc(4 * var(--pt));
    color: var(--hkm-meta);
    font-size: calc(11.5 * var(--pt));
    line-height: calc(14 * var(--pt));
    text-align: center;
  }

  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-chat-divider {
    justify-self: center;
    inline-size: fit-content;
    margin-inline: auto;
    padding: calc(5 * var(--pt)) calc(10 * var(--pt));
    border-radius: calc(8 * var(--pt));
    background: var(--hkm-in-bg);
    box-shadow: 0 calc(1 * var(--pt)) calc(0.5 * var(--pt)) rgb(11 20 26 / 0.13);
  }

  .hkm-root .hkm-chat-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-start: calc(2 * var(--pt));
    padding-inline: calc(16 * var(--pt));
  }

  .hkm-root .hkm-chat-row[data-hkm-first] {
    margin-block-start: calc(10 * var(--pt));
  }

  .hkm-root .hkm-chat-divider + .hkm-chat-row {
    margin-block-start: calc(4 * var(--pt));
  }

  .hkm-root .hkm-chat-row[data-hkm-side="out"] {
    align-items: flex-end;
  }

  .hkm-root .hkm-bubble {
    --hkm-bubble-bg: var(--hkm-in-bg);
    --hkm-bubble-fg: var(--hkm-in-fg);
    position: relative;
    max-inline-size: calc(264 * var(--pt));
    padding: calc(7 * var(--pt)) calc(13 * var(--pt)) calc(7.5 * var(--pt));
    border-radius: calc(18.5 * var(--pt));
    background: var(--hkm-bubble-bg);
    color: var(--hkm-bubble-fg);
    font-size: calc(17 * var(--pt));
    line-height: calc(22 * var(--pt));
    letter-spacing: calc(-0.43 * var(--pt));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .hkm-root .hkm-chat-row[data-hkm-side="out"] .hkm-bubble {
    --hkm-bubble-bg: var(--hkm-out-bg);
    --hkm-bubble-fg: var(--hkm-out-fg);
  }

  .hkm-root .hkm-bubble[data-hkm-emoji] {
    padding: 0 calc(2 * var(--pt));
    background: none;
    font-size: calc(48 * var(--pt));
    line-height: calc(56 * var(--pt));
    letter-spacing: 0;
  }

  .hkm-root .hkm-bubble-tail {
    position: absolute;
    inset-block-end: calc(-0.5 * var(--pt));
    inset-inline-end: calc(-7 * var(--pt));
    inline-size: calc(23 * var(--pt));
    block-size: calc(18 * var(--pt));
    overflow: visible;
    fill: var(--hkm-bubble-bg);
  }

  .hkm-root .hkm-chat-row[data-hkm-side="in"] .hkm-bubble-tail {
    inset-inline: calc(-7 * var(--pt)) auto;
    scale: -1 1;
  }

  /* The chat variant: squarer bubbles with a small hook at the top of the first in a run. */
  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-bubble {
    max-inline-size: calc(290 * var(--pt));
    padding: calc(6 * var(--pt)) calc(9 * var(--pt)) calc(7 * var(--pt));
    border-radius: calc(8 * var(--pt));
    font-size: calc(15.5 * var(--pt));
    line-height: calc(20.5 * var(--pt));
    letter-spacing: 0;
    box-shadow: 0 calc(1 * var(--pt)) calc(0.5 * var(--pt)) rgb(11 20 26 / 0.13);
  }

  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-chat-row {
    padding-inline: calc(14 * var(--pt));
  }

  .hkm-root .hkm-bubble[data-hkm-tail="top"] {
    border-start-start-radius: 0;
  }

  .hkm-root .hkm-chat-row[data-hkm-side="out"] .hkm-bubble[data-hkm-tail="top"] {
    border-start-start-radius: calc(8 * var(--pt));
    border-start-end-radius: 0;
  }

  .hkm-root .hkm-bubble[data-hkm-tail="top"]::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(-8 * var(--pt));
    inline-size: calc(8 * var(--pt));
    block-size: calc(13 * var(--pt));
    background: var(--hkm-bubble-bg);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
  }

  .hkm-root .hkm-chat-row[data-hkm-side="out"] .hkm-bubble[data-hkm-tail="top"]::before {
    inset-inline: auto calc(-8 * var(--pt));
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .hkm-root .hkm-chat-label {
    margin-block-start: calc(3 * var(--pt));
    padding-inline: calc(4 * var(--pt));
    color: var(--hkm-meta);
    font-size: calc(11 * var(--pt));
    line-height: calc(13 * var(--pt));
  }

  .hkm-root .hkm-chat-receipt {
    margin-block-start: calc(2.5 * var(--pt));
    padding-inline-end: calc(19 * var(--pt));
    color: var(--hkm-meta);
    font-size: calc(11 * var(--pt));
    font-weight: 500;
    line-height: calc(13 * var(--pt));
    text-align: end;
  }

  .hkm-root .hkm-typing {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(4.5 * var(--pt, 1px));
    inline-size: calc(56 * var(--pt, 1px));
    block-size: calc(36 * var(--pt, 1px));
    margin-inline-start: calc(4 * var(--pt, 1px));
    margin-block-end: calc(3 * var(--pt, 1px));
    border-radius: calc(18 * var(--pt, 1px));
    background: var(--hkm-in-bg, var(--hkm-field));
  }

  .hkm-root .hkm-typing i {
    inline-size: calc(8 * var(--pt, 1px));
    block-size: calc(8 * var(--pt, 1px));
    border-radius: 50%;
    background: var(--hkm-meta, var(--hkm-muted));
    opacity: 0.4;
  }

  .hkm-root .hkm-typing::before,
  .hkm-root .hkm-typing::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
  }

  .hkm-root .hkm-typing::before {
    inset-block-end: calc(-1.5 * var(--pt, 1px));
    inset-inline-start: calc(-1 * var(--pt, 1px));
    inline-size: calc(12 * var(--pt, 1px));
    block-size: calc(12 * var(--pt, 1px));
  }

  .hkm-root .hkm-typing::after {
    inset-block-end: calc(-6.5 * var(--pt, 1px));
    inset-inline-start: calc(-5.5 * var(--pt, 1px));
    inline-size: calc(6 * var(--pt, 1px));
    block-size: calc(6 * var(--pt, 1px));
  }

  .hkm-root .hkm-chat-nav {
    position: absolute;
    z-index: 3;
    inset: 0 0 auto;
    display: grid;
    grid-template-columns: calc(56 * var(--pt)) 1fr calc(56 * var(--pt));
    align-items: start;
    block-size: var(--hkm-nav-h);
    padding-block-start: calc(54 * var(--pt));
    background: var(--hkm-nav-bg);
    box-shadow: 0 calc(0.5 * var(--pt)) 0 var(--hkm-hairline);
    color: var(--hkm-tint);
  }

  .hkm-root .hkm-chat-bare .hkm-chat-nav {
    padding-block-start: calc(12 * var(--pt));
  }

  .hkm-root .hkm-chat-back,
  .hkm-root .hkm-chat-call {
    display: grid;
    place-items: center;
    margin-block-start: calc(12 * var(--pt));
  }

  .hkm-root .hkm-chat-back .hkm-glyph,
  .hkm-root .hkm-chat-call .hkm-glyph {
    inline-size: calc(24 * var(--pt));
    block-size: calc(24 * var(--pt));
  }

  .hkm-root .hkm-chat-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-inline-size: 0;
    padding-block-start: calc(2 * var(--pt));
    color: var(--hkm-in-fg);
  }

  .hkm-root .hkm-chat-contact .hkm-avatar {
    inline-size: calc(46 * var(--pt)) !important;
    block-size: calc(46 * var(--pt)) !important;
    font-size: calc(19 * var(--pt)) !important;
  }

  .hkm-root .hkm-chat-name {
    margin-block-start: calc(4 * var(--pt));
    overflow: hidden;
    max-inline-size: 100%;
    font-size: calc(11.5 * var(--pt));
    line-height: calc(14 * var(--pt));
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hkm-root .hkm-chat-via {
    margin-block-start: calc(1 * var(--pt));
    color: var(--hkm-meta);
    font-size: calc(10 * var(--pt));
    line-height: calc(12 * var(--pt));
  }

  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-chat-nav {
    grid-template-columns: calc(40 * var(--pt)) 1fr calc(52 * var(--pt));
    align-items: center;
    box-shadow: none;
  }

  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-chat-back,
  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-chat-call {
    margin-block-start: 0;
  }

  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-chat-contact {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: calc(10 * var(--pt));
    justify-items: start;
    padding: 0;
  }

  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-chat-contact .hkm-avatar {
    grid-row: span 2;
    inline-size: calc(38 * var(--pt)) !important;
    block-size: calc(38 * var(--pt)) !important;
    font-size: calc(15 * var(--pt)) !important;
  }

  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-chat-name {
    margin: 0;
    font-size: calc(16 * var(--pt));
    font-weight: 600;
    line-height: calc(20 * var(--pt));
  }

  .hkm-root .hkm-chat-composer {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    display: flex;
    align-items: flex-start;
    gap: calc(10 * var(--pt));
    block-size: var(--hkm-composer-h);
    padding: calc(8 * var(--pt)) calc(14 * var(--pt)) 0;
  }

  .hkm-root .hkm-chat-plus {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: calc(36 * var(--pt));
    block-size: calc(36 * var(--pt));
    border-radius: 50%;
    background: light-dark(#e9e9eb, #2c2c2e);
    color: light-dark(#7c7c80, #a1a1a6);
  }

  .hkm-root .hkm-chat-plus .hkm-glyph {
    inline-size: calc(18 * var(--pt));
    block-size: calc(18 * var(--pt));
  }

  .hkm-root .hkm-chat-field {
    display: flex;
    flex: 1;
    align-items: center;
    block-size: calc(36 * var(--pt));
    padding-inline: calc(14 * var(--pt));
    border: calc(1 * var(--pt)) solid light-dark(#c7c7cc, #3a3a3c);
    border-radius: calc(18 * var(--pt));
    background: var(--hkm-screen, var(--hkm-bg));
    color: light-dark(#a6a6aa, #5b5b5f);
    font-size: calc(17 * var(--pt));
  }

  .hkm-root .hkm-chat[data-hkm-chat="chat"] .hkm-chat-field {
    border: 0;
    background: var(--hkm-in-bg);
    color: var(--hkm-meta);
  }

  /* ---------------------------------------------------------------- */
  /* Social feed                                                      */
  /* ---------------------------------------------------------------- */

  .hkm-root .hkm-social {
    display: grid;
    grid-template-columns: 200px minmax(0, 600px) minmax(0, 300px);
    justify-content: center;
    min-block-size: 100%;
  }

  .hkm-root .hkm-social-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
  }

  .hkm-root .hkm-social-mark {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    margin-block-end: 4px;
  }

  .hkm-root .hkm-rail-item {
    display: flex;
    align-items: center;
    gap: 16px;
    inline-size: fit-content;
    padding: 10px 14px 10px 10px;
    border-radius: 999px;
    font-size: 17px;
  }

  .hkm-root .hkm-rail-item[data-hkm-active] {
    font-weight: 650;
  }

  .hkm-root .hkm-rail-cta {
    display: grid;
    place-items: center;
    block-size: 46px;
    margin-block: 12px;
    border-radius: 999px;
    background: var(--hkm-fg);
    color: var(--hkm-bg);
    font-weight: 650;
  }

  .hkm-root .hkm-rail-cta-glyph {
    display: none;
  }

  .hkm-root .hkm-rail-me {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-start: auto;
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
  }

  .hkm-root .hkm-social-main {
    min-inline-size: 0;
    border-inline: 1px solid var(--hkm-line);
  }

  .hkm-root .hkm-social-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-block-end: 1px solid var(--hkm-line);
    color: var(--hkm-muted);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
  }

  .hkm-root .hkm-social-tabs span {
    padding-block: 15px;
  }

  .hkm-root .hkm-social-tabs [data-hkm-active] {
    color: var(--hkm-fg);
    font-weight: 650;
    box-shadow: inset 0 -4px 0 -0px transparent;
    background: linear-gradient(var(--hkm-accent), var(--hkm-accent)) bottom center / 56px 4px no-repeat;
  }

  .hkm-root .hkm-social-compose {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-block-end: 1px solid var(--hkm-line);
  }

  .hkm-root .hkm-social-compose-field {
    flex: 1;
    color: var(--hkm-muted);
    font-size: 18px;
  }

  .hkm-root .hkm-social-compose-button {
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--hkm-fg);
    color: var(--hkm-bg);
    font-size: 14px;
    font-weight: 650;
    opacity: 0.5;
  }

  .hkm-root .hkm-feed {
    display: grid;
  }

  .hkm-root .hkm-post {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 16px;
    border-block-end: 1px solid var(--hkm-line);
  }

  .hkm-root .hkm-post-body {
    display: grid;
    gap: 4px;
    min-inline-size: 0;
  }

  .hkm-root .hkm-post-head {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-inline-size: 0;
    white-space: nowrap;
  }

  .hkm-root .hkm-post-head > .hkm-muted {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hkm-root .hkm-post-more {
    align-self: center;
    margin-inline-start: auto;
  }

  .hkm-root .hkm-post-text {
    display: grid;
    gap: 10px;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .hkm-root .hkm-post-photo {
    margin-block-start: 8px;
    border-radius: 16px;
  }

  .hkm-root .hkm-post-actions {
    display: flex;
    justify-content: space-between;
    max-inline-size: 440px;
    margin-block-start: 6px;
    font-size: 13px;
  }

  .hkm-root .hkm-post-actions span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
  }

  .hkm-root .hkm-post-actions-end {
    gap: 12px;
  }

  .hkm-root .hkm-social-aside {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 10px 16px;
  }

  .hkm-root .hkm-aside-card {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .hkm-root .hkm-aside-title {
    font-size: 18px;
    font-weight: 750;
  }

  .hkm-root .hkm-aside-line {
    font-size: 14px;
    font-weight: 600;
  }

  @container hkm (max-width: 1080px) {
    .hkm-root .hkm-social {
      grid-template-columns: 72px minmax(0, 600px) minmax(0, 260px);
    }

    .hkm-root .hkm-social-rail {
      align-items: center;
      padding-inline: 8px;
    }

    .hkm-root .hkm-social-rail .hkm-rail-label {
      display: none;
    }

    .hkm-root .hkm-rail-item {
      padding: 10px;
    }

    .hkm-root .hkm-rail-cta {
      inline-size: 46px;
    }

    .hkm-root .hkm-rail-cta-glyph {
      display: block;
    }

    .hkm-root .hkm-rail-me {
      padding: 8px 0;
    }
  }

  @container hkm (max-width: 900px) {
    .hkm-root .hkm-social {
      grid-template-columns: 72px minmax(0, 1fr);
    }

    .hkm-root .hkm-social-aside {
      display: none;
    }

    .hkm-root .hkm-social-main {
      border-inline-end: 0;
    }
  }

  @container hkm (max-width: 560px) {
    .hkm-root .hkm-social {
      grid-template-columns: minmax(0, 1fr);
    }

    .hkm-root .hkm-social-rail {
      display: none;
    }

    .hkm-root .hkm-social-main {
      border-inline: 0;
    }

    .hkm-root .hkm-social-compose {
      display: none;
    }

    .hkm-root .hkm-post {
      padding-inline: 12px;
    }
  }

  /* ---------------------------------------------------------------- */
  /* Work feed                                                        */
  /* ---------------------------------------------------------------- */

  .hkm-root.hkm-work {
    --hkm-surface: light-dark(#f4f2ee, #000000);
    --hkm-card: light-dark(#ffffff, #1b1f23);
    --hkm-fade-to: var(--hkm-surface);
  }

  .hkm-root.hkm-work .hkm-page {
    background: var(--hkm-surface);
  }

  .hkm-root .hkm-work-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    block-size: 52px;
    padding-inline: 24px;
    border-block-end: 1px solid var(--hkm-line);
    background: var(--hkm-card);
  }

  .hkm-root .hkm-work-mark {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 7px;
    background: var(--hkm-accent);
    color: var(--hkm-accent-foreground);
  }

  .hkm-root .hkm-work-top .hkm-search-field {
    inline-size: min(280px, 40%);
    border-radius: 6px;
  }

  .hkm-root .hkm-work-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-inline-start: auto;
    color: var(--hkm-muted);
  }

  .hkm-root .hkm-work-nav [data-hkm-active] {
    color: var(--hkm-fg);
  }

  .hkm-root .hkm-work {
    display: grid;
    grid-template-columns: 220px minmax(0, 560px) 300px;
    justify-content: center;
    align-items: start;
    gap: 22px;
    padding: 22px 20px;
  }

  .hkm-root .hkm-work-profile {
    display: grid;
    justify-items: center;
    overflow: hidden;
    padding-block-end: 16px;
    text-align: center;
  }

  .hkm-root .hkm-work-cover {
    justify-self: stretch;
    block-size: 56px;
    background: linear-gradient(120deg, light-dark(#c8d5e8, #2b3a52), light-dark(#e9dccb, #4a3b2b));
  }

  .hkm-root .hkm-work-profile .hkm-avatar {
    margin-block: -28px 8px;
    box-shadow: 0 0 0 2px var(--hkm-card);
  }

  .hkm-root .hkm-work-profile .hkm-muted {
    padding-inline: 12px;
    font-size: 12px;
  }

  .hkm-root .hkm-work-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-inline-size: 0;
  }

  .hkm-root .hkm-work-compose {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
  }

  .hkm-root .hkm-work-compose .hkm-social-compose-field {
    display: flex;
    align-items: center;
    block-size: 46px;
    padding-inline: 16px;
    border: 1px solid var(--hkm-line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
  }

  .hkm-root .hkm-work-post {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-block: 14px 4px;
  }

  .hkm-root .hkm-work-post > :not(.hkm-work-photo) {
    margin-inline: 16px;
  }

  .hkm-root .hkm-work-post-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .hkm-root .hkm-work-who {
    display: grid;
    flex: 1;
    min-inline-size: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  .hkm-root .hkm-work-who b {
    font-size: 14px;
  }

  .hkm-root .hkm-work-follow {
    color: var(--hkm-accent);
    font-size: 14px;
    font-weight: 650;
  }

  .hkm-root .hkm-work-post .hkm-post-text {
    font-size: 14px;
    line-height: 1.45;
  }

  .hkm-root .hkm-work-photo {
    border-radius: 0;
  }

  .hkm-root .hkm-work-counts {
    display: flex;
    justify-content: space-between;
    padding-block-end: 8px;
    border-block-end: 1px solid var(--hkm-line);
    font-size: 12px;
  }

  .hkm-root .hkm-work-actions {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    font-weight: 600;
  }

  .hkm-root .hkm-work-actions span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
  }

  .hkm-root .hkm-work-comment {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-block-end: 12px;
  }

  .hkm-root .hkm-work-comment-box {
    display: grid;
    flex: 1;
    gap: 2px;
    min-inline-size: 0;
    padding: 8px 12px 10px;
    border-radius: 0 10px 10px;
    background: var(--hkm-field);
    font-size: 13px;
  }

  .hkm-root .hkm-work-comment-box > .hkm-muted {
    font-size: 12px;
  }

  .hkm-root .hkm-work-comment-box p {
    margin-block-start: 4px;
  }

  .hkm-root .hkm-work-right .hkm-aside-card {
    border-radius: 10px;
  }

  .hkm-root .hkm-work-right .hkm-aside-title {
    font-size: 15px;
  }

  @container hkm (max-width: 1100px) {
    .hkm-root .hkm-work {
      grid-template-columns: 200px minmax(0, 560px);
    }

    .hkm-root .hkm-work-right {
      display: none;
    }
  }

  @container hkm (max-width: 780px) {
    .hkm-root .hkm-work {
      grid-template-columns: minmax(0, 1fr);
      padding: 12px 0;
    }

    .hkm-root .hkm-work-left,
    .hkm-root .hkm-work-top .hkm-search-field {
      display: none;
    }

    .hkm-root .hkm-work-main > .hkm-card {
      border-inline: 0;
      border-radius: 0;
    }

    .hkm-root .hkm-work-top {
      padding-inline: 12px;
    }

    .hkm-root .hkm-work-nav {
      gap: 18px;
    }
  }

  @container hkm (max-width: 440px) {
    .hkm-root .hkm-work-post > :not(.hkm-work-photo) {
      margin-inline: 12px;
    }

    .hkm-root .hkm-work-actions {
      justify-content: space-between;
      font-size: 13px;
    }

    .hkm-root .hkm-work-actions span {
      gap: 4px;
      padding-inline: 2px;
    }

    .hkm-root .hkm-work-nav {
      gap: 14px;
    }
  }

  /* ---------------------------------------------------------------- */
  /* Inbox                                                            */
  /* ---------------------------------------------------------------- */

  .hkm-root.hkm-inbox {
    --hkm-surface: light-dark(#f6f8fc, #111214);
    --hkm-fade-to: var(--hkm-surface);
  }

  .hkm-root.hkm-inbox .hkm-page {
    background: var(--hkm-surface);
  }

  .hkm-root .hkm-inbox {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    min-block-size: 100%;
  }

  .hkm-root .hkm-inbox[data-hkm-open] {
    grid-template-columns: 200px minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .hkm-root .hkm-inbox-folders {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 10px 10px 8px;
  }

  .hkm-root .hkm-inbox-compose {
    display: flex;
    align-items: center;
    gap: 12px;
    inline-size: fit-content;
    margin-block-end: 12px;
    padding: 16px 22px 16px 18px;
    border-radius: 16px;
    background: light-dark(#c2e7ff, #36434f);
    font-size: 14px;
    font-weight: 600;
  }

  .hkm-root .hkm-inbox-folders .hkm-rail-item {
    inline-size: 100%;
    gap: 14px;
    padding: 7px 12px 7px 14px;
    font-size: 14px;
  }

  .hkm-root .hkm-inbox-folders .hkm-rail-item[data-hkm-active] {
    background: light-dark(#d3e3fd, #2b3847);
  }

  .hkm-root .hkm-inbox-count {
    margin-inline-start: auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .hkm-root .hkm-inbox-list {
    min-inline-size: 0;
    margin: 0 10px 10px 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--hkm-card);
  }

  .hkm-root .hkm-inbox-toolbar {
    display: flex;
    padding: 10px 12px;
    border-block-end: 1px solid var(--hkm-line);
  }

  .hkm-root .hkm-inbox-toolbar .hkm-search-field {
    flex: 1;
    max-inline-size: 520px;
  }

  .hkm-root .hkm-inbox-rows {
    display: grid;
  }

  .hkm-root .hkm-inbox-row {
    display: grid;
    grid-template-columns: 20px minmax(90px, 160px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 16px 9px 12px;
    border-block-end: 1px solid var(--hkm-line);
    color: var(--hkm-muted);
    font-size: 14px;
    white-space: nowrap;
  }

  .hkm-root .hkm-inbox-row[data-hkm-unread] {
    color: var(--hkm-fg);
    font-weight: 650;
  }

  .hkm-root .hkm-inbox-row:not([data-hkm-unread]) {
    background: light-dark(#f2f6fc, #17181b);
  }

  .hkm-root .hkm-inbox-row[data-hkm-selected] {
    background: light-dark(#c2dbff, #283444);
  }

  .hkm-root .hkm-inbox-star {
    color: var(--hkm-faint);
  }

  .hkm-root .hkm-inbox-star[data-hkm-on] {
    color: #f4b400;
  }

  .hkm-root .hkm-inbox-from,
  .hkm-root .hkm-inbox-line {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hkm-root .hkm-inbox-subject {
    color: var(--hkm-fg);
  }

  .hkm-root .hkm-inbox-line .hkm-muted {
    font-weight: 400;
  }

  .hkm-root .hkm-inbox-time {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .hkm-root .hkm-inbox-reader {
    min-inline-size: 0;
    margin: 0 10px 10px 0;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--hkm-card);
  }

  .hkm-root .hkm-inbox-message {
    display: grid;
    gap: 16px;
  }

  .hkm-root .hkm-inbox-message-subject {
    font-size: 21px;
    font-weight: 450;
    line-height: 1.3;
  }

  .hkm-root .hkm-inbox-message-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
  }

  .hkm-root .hkm-inbox-message-who {
    display: grid;
    flex: 1;
    min-inline-size: 0;
  }

  .hkm-root .hkm-inbox-message-body {
    display: grid;
    gap: 12px;
    font-size: 14px;
    line-height: 1.55;
  }

  @container hkm (max-width: 900px) {
    .hkm-root .hkm-inbox[data-hkm-open] {
      grid-template-columns: minmax(0, 1fr);
    }

    .hkm-root .hkm-inbox[data-hkm-open] .hkm-inbox-folders,
    .hkm-root .hkm-inbox[data-hkm-open] .hkm-inbox-list {
      display: none;
    }

    .hkm-root .hkm-inbox[data-hkm-open] .hkm-inbox-reader {
      margin: 0;
      border-radius: 0;
    }
  }

  @container hkm (max-width: 640px) {
    .hkm-root .hkm-inbox {
      grid-template-columns: minmax(0, 1fr);
    }

    .hkm-root .hkm-inbox-folders {
      display: none;
    }

    .hkm-root .hkm-inbox-list {
      margin: 0;
      border-radius: 0;
    }

    .hkm-root .hkm-inbox-row {
      grid-template-columns: 18px minmax(0, 1fr) auto;
      grid-template-areas: "star from time" "star line line";
      row-gap: 2px;
      white-space: nowrap;
    }

    .hkm-root .hkm-inbox-star {
      grid-area: star;
      align-self: start;
    }

    .hkm-root .hkm-inbox-from {
      grid-area: from;
    }

    .hkm-root .hkm-inbox-line {
      grid-area: line;
    }

    .hkm-root .hkm-inbox-time {
      grid-area: time;
    }
  }

  /* ---------------------------------------------------------------- */
  /* Article                                                          */
  /* ---------------------------------------------------------------- */

  .hkm-root .hkm-article {
    min-block-size: 100%;
    background: var(--hkm-bg);
  }

  .hkm-root .hkm-article-masthead {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-block-end: 1px solid var(--hkm-line);
  }

  .hkm-root .hkm-article-site {
    font: 700 22px/1 var(--hkm-serif);
    letter-spacing: -0.01em;
    text-align: center;
  }

  .hkm-root .hkm-article-body {
    display: grid;
    gap: 14px;
    max-inline-size: 640px;
    margin-inline: auto;
    padding: 28px 24px 40px;
  }

  .hkm-root .hkm-article-kicker {
    color: var(--hkm-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hkm-root .hkm-article-title {
    font: 700 clamp(24px, 5cqi, 34px)/1.15 var(--hkm-serif);
    letter-spacing: -0.012em;
    text-wrap: balance;
  }

  .hkm-root .hkm-article-dek {
    color: var(--hkm-muted);
    font: 400 18px/1.4 var(--hkm-serif);
  }

  .hkm-root .hkm-article-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding-block: 6px 4px;
    font-size: 13px;
  }

  .hkm-root .hkm-article-photo {
    border-radius: 4px;
  }

  .hkm-root .hkm-article-text {
    display: grid;
    gap: 16px;
    font: 400 17px/1.6 var(--hkm-serif);
  }

  .hkm-root .hkm-article-comments {
    display: grid;
    gap: 14px;
    margin-block-start: 12px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--hkm-line);
  }

  .hkm-root .hkm-article-comments-title {
    font-size: 15px;
    font-weight: 700;
  }

  .hkm-root .hkm-article-comment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
  }

  .hkm-root .hkm-article-comment-body {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  @container hkm (max-width: 560px) {
    .hkm-root .hkm-article-body {
      padding: 20px 16px 32px;
    }

    .hkm-root .hkm-article-text {
      font-size: 16px;
    }
  }

  /* ---------------------------------------------------------------- */
  /* Coding agent                                                     */
  /* ---------------------------------------------------------------- */

  .hkm-root .hkm-agent-body {
    padding: 16px 18px 20px;
  }

  .hkm-root .hkm-window[data-hkm-agent="generic-cli"] .hkm-agent-body {
    font: 400 13.5px/1.55 var(--hkm-mono);
  }

  .hkm-root .hkm-agent-turns {
    display: grid;
    gap: 12px;
  }

  .hkm-root .hkm-agent-turn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-wrap: anywhere;
  }

  .hkm-root .hkm-agent-marker {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 18px;
    block-size: 1.55em;
    color: var(--hkm-accent);
    font-weight: 700;
  }

  .hkm-root .hkm-agent-turn[data-hkm-role="user"] {
    color: var(--hkm-fg);
    font-weight: 500;
  }

  .hkm-root .hkm-agent-turn[data-hkm-role="user"] .hkm-agent-marker {
    color: var(--hkm-muted);
  }

  .hkm-root .hkm-agent-text {
    white-space: pre-wrap;
  }

  .hkm-root .hkm-agent-tool {
    display: grid;
    flex: 1;
    min-inline-size: 0;
    margin-inline-start: 28px;
    overflow: hidden;
    border: 1px solid var(--hkm-line);
    border-radius: 8px;
    font-size: 0.93em;
  }

  .hkm-root .hkm-agent-tool-name {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-block-end: 1px solid var(--hkm-line);
    background: var(--hkm-field);
    font-weight: 600;
  }

  .hkm-root .hkm-agent-status {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--hkm-faint);
  }

  .hkm-root .hkm-agent-turn[data-hkm-tone="ok"] .hkm-agent-status {
    background: var(--hkm-ok);
  }

  .hkm-root .hkm-agent-turn[data-hkm-tone="warn"] .hkm-agent-status {
    background: var(--hkm-warn);
  }

  .hkm-root .hkm-agent-turn[data-hkm-tone="error"] .hkm-agent-status {
    background: var(--hkm-error);
  }

  .hkm-root .hkm-agent-turn[data-hkm-tone="running"] .hkm-agent-status {
    background: var(--hkm-accent);
  }

  .hkm-root .hkm-agent-tool-output {
    padding: 8px 10px;
    color: var(--hkm-muted);
    font-family: var(--hkm-mono);
    white-space: pre-wrap;
  }

  .hkm-root .hkm-window[data-hkm-agent="generic-chat"] .hkm-agent-turn[data-hkm-role="user"] {
    justify-content: flex-end;
  }

  .hkm-root .hkm-window[data-hkm-agent="generic-chat"] .hkm-agent-turn[data-hkm-role="user"] .hkm-agent-marker {
    display: none;
  }

  .hkm-root .hkm-window[data-hkm-agent="generic-chat"] .hkm-agent-turn[data-hkm-role="user"] .hkm-agent-text {
    max-inline-size: 80%;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--hkm-field);
  }

  .hkm-root .hkm-agent-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 14px 14px;
    padding: 8px 8px 8px 14px;
    border: 1px solid var(--hkm-line);
    border-radius: 14px;
    color: var(--hkm-muted);
    font-size: 14px;
  }

  .hkm-root .hkm-agent-composer-field {
    flex: 1;
  }

  .hkm-root .hkm-agent-composer-send {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 8px;
    background: var(--hkm-fg);
    color: var(--hkm-bg);
  }

  /* ---------------------------------------------------------------- */
  /* Hotspot                                                          */
  /* ---------------------------------------------------------------- */

  .hkm-root .hkm-hotspot {
    position: absolute;
    z-index: 8;
    inline-size: 0;
    block-size: 0;
    pointer-events: none;
  }

  .hkm-root .hkm-hotspot-ring {
    position: absolute;
    inset: -11px;
    border: 2px solid var(--hkm-accent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--hkm-accent) 18%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hkm-accent) 14%, transparent);
  }

  .hkm-root .hkm-hotspot-label {
    position: absolute;
    inset-block-start: -13px;
    inset-inline-start: 20px;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--hkm-fg);
    color: var(--hkm-bg);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: var(--hkm-shadow);
  }

  .hkm-root .hkm-hotspot[data-hkm-side="start"] .hkm-hotspot-label {
    inset-inline: auto 20px;
  }

  /* ---------------------------------------------------------------- */
  /* Showcase shells (client)                                         */
  /* ---------------------------------------------------------------- */

  .hkm-showcase {
    --hkm-sc-bg: var(--background, light-dark(#fafafa, #141518));
    --hkm-sc-field: var(--surface-raised, light-dark(#ffffff, #1e1f23));
    --hkm-sc-fg: var(--foreground, light-dark(#15171a, #eceef1));
    --hkm-sc-muted: var(--muted, var(--muted-foreground, light-dark(#5e6570, #9ba2ac)));
    --hkm-sc-line: var(--line, light-dark(#e3e5e8, #2c2e34));
    --hkm-sc-radius: var(--radius-lg, 14px);

    container: hkm-showcase / inline-size;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    color: var(--hkm-sc-fg);
    font: 400 14px/1.45 var(--font-text, system-ui, -apple-system, "Segoe UI", sans-serif);
  }

  .hkm-showcase *,
  .hkm-showcase *::before,
  .hkm-showcase *::after {
    box-sizing: border-box;
  }

  .hkm-showcase .hkm-showcase-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--hkm-sc-line);
    border-radius: var(--hkm-sc-radius);
    background: var(--hkm-sc-bg);
  }

  .hkm-showcase .hkm-tabs {
    display: flex;
    gap: 4px;
    margin: -4px -6px 0;
    padding: 4px 6px 10px;
    overflow-x: auto;
    border-block-end: 1px solid var(--hkm-sc-line);
    scrollbar-width: none;
  }

  .hkm-showcase .hkm-tab,
  .hkm-showcase .hkm-segmented button,
  .hkm-showcase .hkm-step-button {
    appearance: none;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .hkm-showcase .hkm-tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-block-size: 32px;
    padding: 6px 13px;
    border-radius: 999px;
    color: var(--hkm-sc-muted);
    font-weight: 500;
  }

  .hkm-showcase .hkm-tab:hover {
    color: var(--hkm-sc-fg);
  }

  .hkm-showcase .hkm-tab[aria-selected="true"] {
    background: var(--hkm-sc-fg);
    color: var(--hkm-sc-bg);
  }

  .hkm-showcase .hkm-step-number {
    flex: none;
    color: var(--hkm-sc-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }

  .hkm-showcase .hkm-showcase-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
  }

  .hkm-showcase .hkm-showcase-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .hkm-showcase .hkm-showcase-label {
    white-space: nowrap;
  }

  .hkm-showcase .hkm-segmented {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--hkm-sc-line);
    border-radius: 9px;
    background: var(--hkm-sc-field);
  }

  .hkm-showcase .hkm-segmented button {
    min-block-size: 30px;
    padding: 5px 12px;
    font-size: 13px;
  }

  .hkm-showcase .hkm-segmented button + button {
    border-inline-start: 1px solid var(--hkm-sc-line);
  }

  .hkm-showcase .hkm-segmented button[aria-pressed="true"] {
    background: var(--hkm-accent);
    color: var(--hkm-accent-foreground);
  }

  /* Disabled segments keep a readable muted label instead of fading the whole button. */
  .hkm-showcase .hkm-segmented button:disabled {
    color: var(--hkm-sc-muted);
    cursor: default;
  }

  .hkm-showcase .hkm-segmented button[aria-pressed="true"]:disabled {
    background: var(--hkm-sc-line);
    color: var(--hkm-sc-fg);
  }

  .hkm-showcase .hkm-tab:focus-visible,
  .hkm-showcase .hkm-step-button:focus-visible {
    outline: 2px solid var(--hkm-accent);
    outline-offset: 2px;
  }

  /* An inset ring plus a field-colored gap, so focus shows on the filled accent segment too. */
  .hkm-showcase .hkm-segmented button:focus-visible {
    outline: 2px solid var(--hkm-sc-fg);
    outline-offset: -4px;
    box-shadow: inset 0 0 0 2px var(--hkm-sc-field);
  }

  .hkm-showcase .hkm-segmented button[aria-pressed="true"]:focus-visible {
    outline-color: var(--hkm-accent-foreground);
  }

  .hkm-showcase .hkm-showcase-hints {
    display: grid;
    min-inline-size: 0;
  }

  .hkm-showcase .hkm-showcase-hints > .hkm-showcase-hint {
    grid-area: 1 / 1;
  }

  .hkm-showcase .hkm-showcase-hint[data-hkm-reserving] {
    visibility: hidden;
    pointer-events: none;
  }

  .hkm-showcase .hkm-showcase-hint {
    min-block-size: 2.9em;
    margin: 0;
    color: var(--hkm-sc-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .hkm-showcase .hkm-showcase-stage {
    position: relative;
    min-inline-size: 0;
  }

  .hkm-showcase .hkm-fit {
    min-inline-size: 0;
    overflow: hidden;
    overflow: clip;
    overflow-clip-margin: 48px;
  }

  .hkm-fit {
    min-inline-size: 0;
  }

  .hkm-fit-inner {
    transform-origin: 0 0;
  }

  .hkm-showcase .hkm-step-nav {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .hkm-showcase .hkm-step-nav .hkm-showcase-status {
    flex: 1;
    text-align: center;
  }

  .hkm-showcase .hkm-step-button {
    min-block-size: 34px;
    padding: 6px 16px;
    border: 1px solid var(--hkm-sc-line);
    border-radius: 999px;
    background: var(--hkm-sc-field);
    font-weight: 500;
  }

  .hkm-showcase .hkm-step-button[data-hkm-primary] {
    border-color: transparent;
    background: var(--hkm-sc-fg);
    color: var(--hkm-sc-bg);
  }

  .hkm-showcase .hkm-step-button:disabled {
    background: var(--hkm-sc-field);
    color: var(--hkm-sc-muted);
    cursor: default;
  }

  .hkm-showcase .hkm-showcase-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    color: var(--hkm-sc-muted);
    font-size: 13px;
  }

  .hkm-showcase .hkm-showcase-status {
    color: var(--hkm-sc-fg);
  }

  @container hkm-showcase (max-width: 520px) {
    .hkm-showcase .hkm-showcase-controls {
      padding: 12px;
    }

    .hkm-showcase .hkm-showcase-row {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      inline-size: 100%;
    }

    .hkm-showcase .hkm-segmented {
      display: flex;
    }

    .hkm-showcase .hkm-segmented button {
      flex: 1 1 0;
      min-inline-size: 0;
      padding-inline: 4px;
      text-align: center;
    }

    .hkm-showcase .hkm-step-nav .hkm-showcase-status {
      font-size: 13px;
    }
  }

  /* Mode selectors retain a shared edge with their preview panel. */
  .hkm-showcase:is(.hkm-steps, .hkm-modes) { gap: 0; }
  .hkm-showcase.hkm-steps .hkm-showcase-controls { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .hkm-showcase .hkm-folder-tabs { gap: 6px; margin: 0; padding: 0; border: 0; position: relative; z-index: 1; }
  .hkm-showcase .hkm-folder-tabs .hkm-tab { min-block-size: 48px; padding: 12px 18px; border: 1px solid var(--hkm-sc-line); border-block-end: 0; border-radius: 12px 12px 0 0; background: var(--hkm-sc-field); color: var(--hkm-sc-muted); }
  .hkm-showcase .hkm-folder-tabs .hkm-tab[aria-selected="true"] { background: var(--hkm-sc-bg); color: var(--hkm-sc-fg); }
  .hkm-showcase .hkm-folder-tabs .hkm-tab:hover { color: var(--hkm-sc-fg); }
  .hkm-showcase.hkm-steps .hkm-step-stage { display: grid; min-inline-size: 0; border: 1px solid var(--hkm-sc-line); border-radius: var(--hkm-step-radius, 12px); background: var(--hkm-sc-bg); overflow: clip; }
  .hkm-showcase.hkm-modes .hkm-mode-panel { border: 1px solid var(--hkm-sc-line); border-radius: 12px; background: var(--hkm-sc-bg); overflow: clip; }
  .hkm-showcase.hkm-modes .hkm-folder-tabs + .hkm-mode-panel { border-start-start-radius: 0; margin-block-start: -1px; }
  .hkm-showcase.hkm-modes .hkm-showcase-controls { border: 0; border-block-end: 1px solid var(--hkm-sc-line); border-radius: 0; }
  .hkm-mode-stage { display: grid; min-inline-size: 0; }
  .hkm-mode-surface { grid-area: 1 / 1; min-inline-size: 0; align-self: start; }
  .hkm-mode-surface[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
  .hkm-showcase.hkm-modes .hkm-mode-surface > .hkm-fit > .hkm-fit-inner > .hkm-root,
  .hkm-showcase.hkm-modes .hkm-mode-surface > .hkm-fit > .hkm-fit-inner > .hkm-root > .hkm-window,
  .hkm-showcase.hkm-steps .hkm-step-panel > .hkm-fit > .hkm-fit-inner > .hkm-root,
  .hkm-showcase.hkm-steps .hkm-step-panel > .hkm-fit > .hkm-fit-inner > .hkm-root > .hkm-window { border: 0; border-radius: 0; box-shadow: none; }
  .hkm-step-panel { grid-area: 1 / 1; min-inline-size: 0; align-self: start; }
  .hkm-step-panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
  /* Browser and app titles use the same chrome geometry inside a sequence. */
  .hkm-showcase .hkm-root :is(.hkm-title-bar, .hkm-browser-bar) { block-size: 44px; font-size: 13px; }
  /* Fill uses the tallest complete slide as its natural height. It does not
   * scale text or ask fitted font sizes to determine the stage height. */
  .hkm-showcase[data-hkm-fit="fill"] [data-hkm-measuring] [data-hkm-fill-frame] > .hkm-window > .hkm-page { max-block-size: none; }

  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) {
    block-size: var(--hkm-showcase-fill-height, auto);
  }

  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) > :is(.hkm-step-panel, .hkm-mode-surface) {
    align-self: stretch;
    min-block-size: 0;
  }

  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) > :is(.hkm-step-panel, .hkm-mode-surface) > .hkm-fit,
  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) > :is(.hkm-step-panel, .hkm-mode-surface) > .hkm-fit > .hkm-fit-inner,
  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) :is([data-hkm-fill-frame], [data-hkm-fill-frame] > .hkm-window) {
    block-size: 100%;
    min-block-size: 0;
  }

  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) [data-hkm-fill-frame] > .hkm-window:has(> .hkm-page) {
    display: flex;
    flex-direction: column;
  }

  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) [data-hkm-fill-frame] > .hkm-window > .hkm-page {
    flex: 1 1 auto;
    block-size: auto;
    min-block-size: 0;
    max-block-size: none;
  }

  .hkm-showcase[data-hkm-fit="fill"] :is(.hkm-step-stage, .hkm-mode-stage):not([data-hkm-measuring]) [data-hkm-fill-frame] > .hkm-window > :is(.hkm-title-bar, .hkm-browser-bar) {
    flex: none;
  }

  /* A walkthrough is one tabbed selector: the steps and the preview share an
   * edge. Compact layouts attach a tab strip to the preview's top edge between
   * Back and Next. Wide layouts stack the steps on its start edge, flush with
   * a square corner, and put Back and Next under them. The selected tab takes
   * the window-chrome color so it reads as part of the frame below it. */
  .hkm-showcase.hkm-steps {
    --hkm-step-radius: 12px;
    --hkm-step-tab-radius: 10px;
    --hkm-step-tab-selected: var(--hkm-chrome);
    --hkm-step-tab-hover: color-mix(in srgb, var(--hkm-chrome) 55%, transparent);
    font-size: 1rem;
    line-height: 1.5;
  }
  .hkm-showcase .hkm-step-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "controls" "stage" "descriptions"; align-items: start; min-inline-size: 0; }
  .hkm-showcase.hkm-steps .hkm-step-controls { grid-area: controls; position: relative; z-index: 1; min-inline-size: 0; margin-block-end: -1px; }
  .hkm-showcase.hkm-steps .hkm-step-stage { grid-area: stage; }
  .hkm-showcase.hkm-steps .hkm-step-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "back tabs next"; align-items: end; gap: 6px; min-inline-size: 0; padding: 0; }
  .hkm-showcase.hkm-steps .hkm-step-button { display: inline-grid; place-items: center; inline-size: 44px; min-inline-size: 44px; min-block-size: 44px; margin-block-end: 1px; padding: 0; border: 0; border-radius: var(--hkm-step-tab-radius); background: transparent; color: var(--hkm-sc-fg); }
  .hkm-showcase.hkm-steps .hkm-step-button:first-child { grid-area: back; }
  .hkm-showcase.hkm-steps .hkm-step-button:last-child { grid-area: next; }
  .hkm-showcase.hkm-steps .hkm-step-button:hover:enabled { background: var(--hkm-step-tab-hover); }
  .hkm-showcase.hkm-steps .hkm-step-button:disabled { background: transparent; color: var(--hkm-sc-muted); cursor: default; }
  .hkm-showcase .hkm-step-count { display: none; grid-area: count; color: var(--hkm-sc-muted); font: 500 0.8125rem/1 var(--hkm-mono); font-variant-numeric: tabular-nums; text-align: center; }
  .hkm-showcase.hkm-steps .hkm-step-tabs { grid-area: tabs; display: flex; gap: 2px; min-inline-size: 0; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; border: 0; scrollbar-width: none; }
  .hkm-showcase.hkm-steps .hkm-step-tabs::-webkit-scrollbar { display: none; }
  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 10px; min-inline-size: 44px; min-block-size: 44px; padding: 10px 16px; border: 1px solid transparent; border-block-end: 0; border-radius: var(--hkm-step-tab-radius) var(--hkm-step-tab-radius) 0 0; background: transparent; color: var(--hkm-sc-muted); font-size: 0.9375rem; line-height: 1.4; font-weight: 550; text-align: start; white-space: nowrap; }
  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab:hover { background: var(--hkm-step-tab-hover); color: var(--hkm-sc-fg); }
  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab[aria-selected="true"] { border-color: var(--hkm-sc-line); background: var(--hkm-step-tab-selected); color: var(--hkm-sc-fg); }
  /* A preview pinned to its own theme lends that theme to the selected tab,
   * so a dark window on a light page still reads as one frame. */
  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme="dark"]) .hkm-step-tabs .hkm-tab[aria-selected="true"] { color-scheme: dark; }
  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme="light"]) .hkm-step-tabs .hkm-tab[aria-selected="true"] { color-scheme: light; }
  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme]) .hkm-step-tabs .hkm-tab[aria-selected="true"] { color: var(--hkm-fg); }
  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme]) .hkm-step-tabs .hkm-tab[aria-selected="true"] :is(.hkm-step-number, .hkm-step-label) { color: var(--hkm-fg); }
  .hkm-showcase.hkm-steps:has(.hkm-step-panel[aria-hidden="false"] .hkm-root[data-hkm-theme]) .hkm-step-tabs .hkm-tab[aria-selected="true"] .hkm-step-hint { color: var(--hkm-muted); }
  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab:focus-visible { outline-offset: -3px; }
  .hkm-showcase.hkm-steps .hkm-step-number { color: var(--hkm-sc-muted); font: 500 0.8125rem/1.4 var(--hkm-mono); }
  .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"] .hkm-step-number { color: var(--hkm-sc-fg); }
  .hkm-showcase .hkm-step-copy { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
  .hkm-showcase .hkm-step-label { overflow: hidden; font: inherit; text-overflow: ellipsis; }
  .hkm-showcase .hkm-step-hint { display: none; color: var(--hkm-sc-muted); font-size: 0.875rem; line-height: 1.45; font-weight: 400; }
  .hkm-showcase .hkm-step-descriptions { grid-area: descriptions; display: grid; padding: 12px 4px 0; }
  .hkm-showcase .hkm-step-description { grid-area: 1 / 1; margin: 0; color: var(--hkm-sc-muted); font-size: 0.875rem; line-height: 1.5; }
  .hkm-showcase .hkm-step-description:not([data-hkm-active]) { visibility: hidden; }
  .hkm-showcase .hkm-step-panel:focus-visible { outline: 2px solid var(--hkm-accent); outline-offset: -4px; }
  /* A strip too narrow for every label keeps the selected label and shows
   * numbers for the rest; each label stays the tab's accessible name. */
  .hkm-showcase.hkm-steps .hkm-step-tabs[data-hkm-compact] .hkm-tab:not([aria-selected="true"]) { flex: none; justify-content: center; padding-inline: 12px; }
  .hkm-showcase.hkm-steps .hkm-step-tabs[data-hkm-compact] .hkm-tab:not([aria-selected="true"]) .hkm-step-copy { display: none; }
  @container hkm-showcase (max-width: 519px) {
    .hkm-showcase.hkm-steps .hkm-step-nav { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 4px; }
    .hkm-showcase.hkm-steps .hkm-step-button { inline-size: 40px; min-inline-size: 40px; }
    .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab { gap: 8px; padding-inline: 12px; font-size: 0.875rem; }
  }
  @container hkm-showcase (min-width: 720px) {
    .hkm-showcase .hkm-step-layout { grid-template-columns: minmax(200px, 0.72fr) minmax(0, 1.6fr); grid-template-areas: "controls stage"; align-items: stretch; }
    .hkm-showcase.hkm-steps .hkm-step-controls { margin-block-end: 0; margin-inline-end: -1px; }
    .hkm-showcase.hkm-steps .hkm-step-stage { align-self: stretch; border-start-start-radius: 0; }
    .hkm-showcase.hkm-steps .hkm-step-nav { grid-template-areas: "tabs tabs tabs" "back count next"; align-items: center; row-gap: 14px; column-gap: 6px; }
    .hkm-showcase.hkm-steps .hkm-step-button { margin: 0; }
    .hkm-showcase .hkm-step-count { display: block; }
    .hkm-showcase.hkm-steps .hkm-step-tabs { flex-direction: column; gap: 2px; overflow: visible; }
    .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab { display: grid; flex: none; grid-template-columns: 2.5ch minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px 16px; border: 1px solid transparent; border-inline-end: 0; border-radius: var(--hkm-step-tab-radius) 0 0 var(--hkm-step-tab-radius); white-space: normal; }
    .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab[aria-selected="true"] { border-color: var(--hkm-sc-line); }
    .hkm-showcase.hkm-steps .hkm-step-number { padding-block-start: 0.1rem; }
    .hkm-showcase .hkm-step-label { overflow: visible; }
    .hkm-showcase .hkm-step-hint { display: block; }
    .hkm-showcase .hkm-step-descriptions { display: none; }
  }
  .hkm-showcase.hkm-steps .hkm-step-announcement { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hkm-showcase:is(.hkm-steps, .hkm-modes) .hkm-showcase-caption { margin-block-start: 1rem; }

  /* ---------------------------------------------------------------- */
  /* Motion                                                           */
  /* ---------------------------------------------------------------- */

  @media (prefers-reduced-motion: no-preference) {
    .hkm-showcase .hkm-tab,
    .hkm-showcase .hkm-segmented button,
    .hkm-showcase .hkm-step-button {
      transition: background-color 160ms ease, color 160ms ease;
    }

    /* Transitions exist only after the first user change, so the first paint never animates. */
    [data-hkm-animated] .hkm-root :where(.hkm-unit, .hkm-bubble, .hkm-chat-row, .hkm-popover-item, .hkm-terminal-line, .hkm-agent-turn, [data-hkm-transition]) {
      transition:
        background-color 220ms var(--hkm-ease),
        border-color 220ms var(--hkm-ease),
        box-shadow 220ms var(--hkm-ease),
        color 220ms var(--hkm-ease),
        filter 260ms var(--hkm-ease),
        opacity 220ms var(--hkm-ease),
        transform 320ms var(--hkm-spring);
    }

    [data-hkm-animated] .hkm-root .hkm-chat-row:last-child {
      animation: hkm-bubble-in 360ms var(--hkm-spring) both;
    }

    .hkm-root .hkm-typing i {
      animation: hkm-typing 1.2s ease-in-out infinite;
    }

    .hkm-root .hkm-typing i:nth-child(2) {
      animation-delay: 0.15s;
    }

    .hkm-root .hkm-typing i:nth-child(3) {
      animation-delay: 0.3s;
    }

    .hkm-root .hkm-caret {
      animation: hkm-caret 1.1s steps(1, end) infinite;
    }

    .hkm-root .hkm-hotspot-ring {
      animation: hkm-pulse 2.2s var(--hkm-ease) infinite;
    }
  }

  @keyframes hkm-typing {
    0%, 60%, 100% {
      opacity: 0.35;
      transform: translateY(0);
    }

    30% {
      opacity: 0.9;
      transform: translateY(-15%);
    }
  }

  @keyframes hkm-caret {
    50% {
      opacity: 0;
    }
  }

  @keyframes hkm-pulse {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--hkm-accent) 40%, transparent);
    }

    70%, 100% {
      box-shadow: 0 0 0 12px transparent;
    }
  }

  @keyframes hkm-bubble-in {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.96);
    }
  }

  /* ---------------------------------------------------------------- */
  /* Forced colors                                                    */
  /* ---------------------------------------------------------------- */

  @media (forced-colors: active) {
    .hkm-root .hkm-window,
    .hkm-root .hkm-card,
    .hkm-root .hkm-bubble,
    .hkm-root .hkm-popover,
    .hkm-root .hkm-agent-tool,
    .hkm-root .hkm-chat-bare {
      border: 1px solid CanvasText;
    }

    .hkm-root .hkm-page[data-hkm-fade]::after,
    .hkm-root .hkm-scroll-fade::after {
      display: none;
    }

    .hkm-showcase .hkm-tab[aria-selected="true"],
    .hkm-showcase .hkm-segmented button[aria-pressed="true"],
    .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"],
    .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab[aria-selected="true"],
    .hkm-root .hkm-popover-item[data-hkm-selected],
    .hkm-root .hkm-work-mark {
      forced-color-adjust: none;
      background: Highlight;
      color: HighlightText;
    }

    .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"] :is(.hkm-step-number, .hkm-step-hint) {
      color: HighlightText;
    }

    /* Fill stages reserve their authored field for the live preview. Keep the
     * selected tab in the system pair even when that fill rule is authored by
     * a consumer layer with a stronger declaration. */
    .hkm-showcase[data-hkm-fit="fill"].hkm-steps .hkm-tab[aria-selected="true"] {
      forced-color-adjust: none;
      background: Highlight !important;
      color: HighlightText !important;
    }

    .hkm-showcase .hkm-segmented button[aria-pressed="true"]:disabled {
      background: ButtonFace;
      color: GrayText;
    }

    .hkm-showcase .hkm-step-button:disabled {
      color: GrayText;
    }

    .hkm-showcase .hkm-tab:focus-visible,
    .hkm-showcase .hkm-step-button:focus-visible,
    .hkm-showcase .hkm-segmented button:focus-visible {
      outline-color: Highlight;
      box-shadow: none;
    }

    .hkm-showcase .hkm-segmented button[aria-pressed="true"]:focus-visible {
      outline-color: HighlightText;
    }
  }
}

/* Consumer layers and palette variable chains can add stronger declarations
 * after the legacy component layer. Keep the system selection pair as the
 * final forced-colors contract. */
@media (forced-colors: active) {
  .hkm-showcase.hkm-steps .hkm-step-tabs .hkm-tab[aria-selected="true"] {
    forced-color-adjust: none;
    background: Highlight !important;
    color: HighlightText !important;
  }

  .hkm-showcase.hkm-steps .hkm-tab[aria-selected="true"] :is(.hkm-step-number, .hkm-step-hint) {
    color: HighlightText !important;
  }
}

@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, components.hraness-site-footer.priority6, components.hraness-site-footer.priority7, components.hraness-site-footer.priority8;
@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;
  }

  .x10a8y8t {
    inset: 0;
  }

  .xkdpibf {
    margin: -1px;
  }

  .x1ghz6dp {
    margin: 0;
  }

  .x1bpp3o7 {
    margin: auto;
  }

  .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;
  }

  .x3fmiap {
    border-radius: 1rem;
  }

  .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;
  }

  .xvh977a {
    gap: .25rem;
  }

  .x8fetqu {
    gap: 1rem;
  }

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

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

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

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

  .x14deco2 {
    grid-template-areas: "links";
  }

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

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

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

  .x17y0mx6 {
    inset-inline: 0;
  }

  .xb3r6kr {
    overflow: hidden;
  }

  .xish69e {
    overscroll-behavior: contain;
  }

  .x1o5vn8x {
    padding-block: .25rem;
  }

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

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

  .xt970qd {
    padding-block: 0;
  }

  .xrfbana {
    padding-block: clamp(1.25rem, 4vw, 2rem);
  }

  .xllzysa {
    padding-inline: .25rem;
  }

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

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

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

  .x13s4r1c {
    padding-inline: .875rem;
  }

  .xk5lw23 {
    padding-inline: clamp(1.25rem, 4vw, 2rem);
  }

  .x1hl2dhg {
    text-decoration: none;
  }

  .x1m71csk[data-notice="required"] {
    padding-inline: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

  .xc26acl {
    align-content: center;
  }

  .x6s0dn4 {
    align-items: center;
  }

  .x7a106z {
    align-items: start;
  }

  .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;
  }

  .xnerjni {
    background-clip: padding-box, border-box, border-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)));
  }

  .x16jmbxj {
    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(ellipse 28% 100% at var(--hraness-foil-x, 50%) var(--hraness-foil-y, 50%),color-mix(in srgb,white calc(60% + var(--hraness-foil-glow, 0) * 24%),transparent) 0%,transparent 72%),radial-gradient(ellipse 80% 180% at calc(100% - var(--hraness-foil-x, 50%)) calc(100% - var(--hraness-foil-y, 50%)),#ffffff47 0%,transparent 78%),linear-gradient(115deg,color-mix(in oklch,var(--_hraness-foil-1) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-2) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-3) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-4) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-5) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-6) var(--hraness-foil-reflection, 14%),transparent)),linear-gradient(115deg,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 90%,var(--hraness-site-footer-background, Canvas)) 0%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 100%,var(--hraness-site-footer-background, Canvas)) 24%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 86%,var(--hraness-site-footer-background, Canvas)) 39%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 100%,var(--hraness-site-footer-background, Canvas)) 56%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 84%,var(--hraness-site-footer-background, Canvas)) 82%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 100%,var(--hraness-site-footer-background, Canvas)) 100%);
  }

  .x18o3ruo {
    background-image: none;
  }

  .xyowimg {
    background-image: radial-gradient(ellipse 24% 85% at var(--hraness-foil-x, 50%) var(--hraness-foil-y, 50%),color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 80%,var(--hraness-site-footer-background, Canvas)) 0%,transparent 68%),radial-gradient(ellipse 65% 160% at calc(100% - var(--hraness-foil-x, 50%)) calc(100% - var(--hraness-foil-y, 50%)),color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 98%,var(--hraness-site-footer-background, Canvas)) 0%,transparent 72%),linear-gradient(115deg,color-mix(in oklch,var(--_hraness-foil-1) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-2) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-3) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-4) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-5) var(--hraness-foil-reflection, 14%),transparent),color-mix(in oklch,var(--_hraness-foil-6) var(--hraness-foil-reflection, 14%),transparent)),linear-gradient(115deg,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 90%,var(--hraness-site-footer-background, Canvas)) 0%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 100%,var(--hraness-site-footer-background, Canvas)) 24%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 86%,var(--hraness-site-footer-background, Canvas)) 39%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 100%,var(--hraness-site-footer-background, Canvas)) 56%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 84%,var(--hraness-site-footer-background, Canvas)) 82%,color-mix(in oklch,var(--hraness-site-footer-foreground, CanvasText) 100%,var(--hraness-site-footer-background, Canvas)) 100%);
  }

  .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;
  }

  .x18h55qy {
    block-size: 44px;
  }

  .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);
  }

  .x1hdm9tg {
    border-block-start-color: var(--hraness-site-footer-line);
  }

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

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

  .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;
  }

  .xim0ftz {
    box-shadow: 0 .25rem 1rem color-mix(in srgb,var(--hraness-site-footer-foreground, CanvasText) 10%,transparent);
  }

  .x1kyqxw3 {
    box-shadow: 0 1px 4px color-mix(in srgb,var(--hraness-site-footer-foreground, CanvasText) 12%,transparent);
  }

  .x165lju9 {
    box-shadow: 0 1rem 3rem #00000040;
  }

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

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

  .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);
  }

  .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;
  }

  .x1s85apg {
    display: none;
  }

  .xq2h55 {
    display: var(--_hraness-footer-mark-display);
  }

  .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;
  }

  .x1a02dak {
    flex-wrap: wrap;
  }

  .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;
  }

  .x6u19be {
    font-size: .9375rem;
  }

  .xngnso2 {
    font-size: 1.5rem;
  }

  .x1jchvi3 {
    font-size: 1rem;
  }

  .x1qlqyl8 {
    font-size: inherit;
  }

  .xgt9wab {
    font-size: max(1rem, 16px);
  }

  .x1xh6y1q {
    font-stretch: inherit;
  }

  .x1t35e8 {
    font-style: inherit;
  }

  .xkyhvkk {
    font-variation-settings: inherit;
  }

  .xk50ysn {
    font-weight: 500;
  }

  .xh88oxj {
    font-weight: 550;
  }

  .x1s688f {
    font-weight: 600;
  }

  .x19s9jnd {
    font-weight: 650;
  }

  .x1pd3egz {
    font-weight: inherit;
  }

  .xd1cknm {
    grid-auto-rows: minmax(var(--hraness-site-footer-content-block-size),auto);
  }

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

  .x5o1nov {
    grid-template-columns: auto minmax(var(--hraness-site-footer-social-target),1fr);
  }

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

  .x1olarsd {
    grid-template-columns: minmax(0,max-content) minmax(var(--hraness-site-footer-social-target),1fr);
  }

  .xif76xs {
    inline-size: 1.375rem;
  }

  .xiuoait {
    inline-size: 100%;
  }

  .xi8173g {
    inline-size: 1px;
  }

  .x1milg1j {
    inline-size: 1rem;
  }

  .x1nwd19c {
    inline-size: 44px;
  }

  .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);
  }

  .x1y56ywe {
    inline-size: min(28rem, 100vw - 2rem);
  }

  .x175cv4s {
    inline-size: var(--hraness-site-footer-social-target);
  }

  .xr04doy {
    inset-block-end: calc(100% + .375rem);
  }

  .x1smivkc {
    inset-block-end: calc(100% + .5rem);
  }

  .xcc8yhp {
    inset-block-end: calc(var(--_hraness-site-footer-control-rows) * var(--hraness-site-footer-content-block-size) + (var(--_hraness-site-footer-control-rows) - 1) * var(--hraness-site-footer-row-gap) + var(--hraness-site-footer-padding-block) + .75rem + env(safe-area-inset-bottom, 0px));
  }

  .x92d9gd {
    inset-block-start: auto;
  }

  .xtijo5x {
    inset-inline-end: 0;
  }

  .xs1cnaw {
    inset-inline-end: max(.75rem,env(safe-area-inset-right));
  }

  .xe89of6 {
    inset-inline-start: 1rem;
  }

  .xl56j7k {
    justify-content: center;
  }

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

  .x1jfo8e8 {
    justify-content: var(--_hraness-site-footer-links-justify, flex-end);
  }

  .x1qab1bc {
    justify-self: end;
  }

  .x1lqcxt8 {
    justify-self: start;
  }

  .x130jcwj {
    letter-spacing: -.018em;
  }

  .x1i21sxh {
    letter-spacing: normal;
  }

  .x14ju556 {
    line-height: 0;
  }

  .x1u7k74 {
    line-height: 1.2;
  }

  .x132q4wb {
    line-height: 1.25;
  }

  .xfrs9s4 {
    line-height: 1.45;
  }

  .x1evy7pa {
    line-height: 1.5;
  }

  .xo5v014 {
    line-height: 1;
  }

  .x15bjb6t {
    line-height: inherit;
  }

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

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

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

  .x1gixskw {
    margin-block-start: .625rem;
  }

  .x1rjqi9y {
    margin-block-start: 0;
  }

  .x1dpfygs {
    margin-inline-end: -.5rem;
  }

  .x1lziwak {
    margin-inline-start: 0;
  }

  .xjsudho {
    margin-inline-start: var(--_hraness-site-footer-links-offset, 0px);
  }

  .xi9drc3 {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M372 141a116 116 0 1 1-232 0 116 116 0 1 1 232 0Zm-14 0a102 102 0 1 0-204 0 102 102 0 1 0 204 0Zm-8 0a94 94 0 1 1-188 0 94 94 0 1 1 188 0Z\" fill=\"currentColor\" fill-rule=\"evenodd\"></path><path d=\"M211 252c75-8 154 30 204 94 32 40 51 89 59 142H184c20-28 29-57 22-87-9-39-26-71-28-99-2-22 9-39 33-50Z\" fill=\"currentColor\"></path><path d=\"M246 270c-27-20-67-23-100-9-25 11-42 31-46 56l-34 20 38 12c4 25 14 47 31 66 15 13 22 32 18 56l-14 17h116c-20-27-23-50-8-68 6-8 14-14 23-21 23-20 34-50 28-79-5-22-23-40-52-50ZM132 309c9-14 22-22 38-22 13 0 25 7 34 19-10 14-23 22-39 22-14 0-25-6-33-19Z\" fill=\"currentColor\" fill-rule=\"evenodd\"></path><path d=\"M151 410c-2 30-16 57-43 78h197c-19-27-40-49-63-63-28-18-59-23-91-15Z\" fill=\"currentColor\"></path><circle cx=\"166\" cy=\"307\" fill=\"currentColor\" r=\"8\"></circle></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M372 141a116 116 0 1 1-232 0 116 116 0 1 1 232 0Zm-14 0a102 102 0 1 0-204 0 102 102 0 1 0 204 0Zm-8 0a94 94 0 1 1-188 0 94 94 0 1 1 188 0Z\" fill=\"currentColor\" fill-rule=\"evenodd\"></path><path d=\"M211 252c75-8 154 30 204 94 32 40 51 89 59 142H184c20-28 29-57 22-87-9-39-26-71-28-99-2-22 9-39 33-50Z\" fill=\"currentColor\"></path><path d=\"M246 270c-27-20-67-23-100-9-25 11-42 31-46 56l-34 20 38 12c4 25 14 47 31 66 15 13 22 32 18 56l-14 17h116c-20-27-23-50-8-68 6-8 14-14 23-21 23-20 34-50 28-79-5-22-23-40-52-50ZM132 309c9-14 22-22 38-22 13 0 25 7 34 19-10 14-23 22-39 22-14 0-25-6-33-19Z\" fill=\"currentColor\" fill-rule=\"evenodd\"></path><path d=\"M151 410c-2 30-16 57-43 78h197c-19-27-40-49-63-63-28-18-59-23-91-15Z\" fill=\"currentColor\"></path><circle cx=\"166\" cy=\"307\" fill=\"currentColor\" r=\"8\"></circle></svg>");
  }

  .x5e4rk6 {
    -webkit-mask-source-type: alpha;
    mask-mode: alpha;
  }

  .x1rudrqi {
    -webkit-mask-position: center;
    mask-position: center;
  }

  .x16fucec {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .x2k2kcx {
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .x1pzgvly {
    max-block-size: calc(var(--hraness-signup-viewport-height, 100dvh) - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .xu668xk {
    max-block-size: max(5rem,calc(100dvh - var(--_hraness-site-footer-control-rows) * var(--hraness-site-footer-content-block-size) - (var(--_hraness-site-footer-control-rows) - 1) * var(--hraness-site-footer-row-gap) - var(--hraness-site-footer-padding-block) - var(--hraness-site-footer-control-block-size) - 2.5rem - 2px - env(safe-area-inset-bottom, 0px)));
  }

  .xgyk9h7 {
    max-inline-size: 100%;
  }

  .xmk4v7v {
    max-inline-size: 12rem;
  }

  .x15qkubi {
    max-inline-size: calc(100vw - 1.5rem);
  }

  .x1ljtl1n {
    max-inline-size: calc(100vw - 2rem);
  }

  .xlu39c9 {
    max-inline-size: min(100%, 22rem);
  }

  .x1tec7hu {
    max-inline-size: none;
  }

  .x159srwy {
    min-block-size: 0;
  }

  .x1ouqbbl {
    min-block-size: 48px;
  }

  .x5vl0wm {
    min-block-size: var(--hraness-site-footer-bar-block-size);
  }

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

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

  .xart1r9 {
    min-inline-size: var(--hraness-site-footer-control-block-size);
  }

  .xj0a0fe {
    overflow-wrap: anywhere;
  }

  .xpcvst1 {
    padding-block-end: calc(var(--hraness-site-footer-padding-block) + env(safe-area-inset-bottom, 0px));
  }

  .x1qtgzxc {
    padding-block-start: calc(var(--hraness-site-footer-padding-block) + var(--_hraness-site-footer-consent-clearance, 0px));
  }

  .x1dyck8u {
    padding-inline-end: max(clamp(1rem,4vw,2rem),env(safe-area-inset-right),calc((100% - var(--hraness-site-footer-measure, 100%)) / 2));
  }

  .xhvvu7z {
    padding-inline-start: max(clamp(1rem,4vw,2rem),env(safe-area-inset-left),calc((100% - var(--hraness-site-footer-measure, 100%)) / 2));
  }

  .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);
  }

  .x185mbhu {
    scrollbar-gutter: stable;
  }

  .x2b8uid {
    text-align: center;
  }

  .xlyipyv {
    text-overflow: ellipsis;
  }

  .x1w2vvpw {
    text-wrap: balance;
  }

  .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;
  }

  .xvgho8r[hidden] {
    display: none;
  }

  .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;
  }

  .x502hvl:modal {
    inset-block-end: calc(100% - var(--hraness-signup-viewport-top, 0px) - var(--hraness-signup-viewport-height, 100dvh));
  }

  .x1t8win8:modal {
    inset-block-start: var(--hraness-signup-viewport-top, 0px);
  }

  .x3g7vmf:modal {
    position: fixed;
  }

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

  @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;
    }

    .x1od97uc.x1od97uc {
      grid-template-columns: auto auto minmax(0,1fr) minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .x1o8kq85.x1o8kq85 {
      grid-template-columns: auto minmax(0,1fr) minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .xzm20xa.xzm20xa {
      grid-template-columns: auto minmax(0,max-content) auto minmax(0,1fr) minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .x11123my.x11123my {
      grid-template-columns: auto minmax(0,max-content) minmax(0,1fr) minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .xj3lp7q.xj3lp7q {
      grid-template-columns: minmax(0,1fr) minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .xl7e3be.xl7e3be {
      grid-template-columns: minmax(0,max-content) auto minmax(0,1fr) minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .x1q9k5wc.x1q9k5wc {
      grid-template-columns: minmax(0,max-content) minmax(0,1fr) minmax(var(--hraness-site-footer-social-target),var(--hraness-site-footer-socials-inline-size));
    }

    .x12aoker.x12aoker {
      inset-block-end: calc(100% + var(--hraness-site-footer-padding-block) + .375rem);
    }

    .x1vbotui.x1vbotui {
      inset-inline-start: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .x7ctuma.x7ctuma {
      transition-delay: 0s;
    }

    .x1ntgrh1.x1ntgrh1 {
      transition-duration: .12s;
    }

    .x105zyf9.x105zyf9 {
      transition-property: color, background-color, opacity;
    }

    .xma2t0n.xma2t0n {
      transition-timing-function: ease;
    }
  }

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

  @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 {
  .xhbfen4 {
    margin-bottom: .5rem;
  }

  .xat24cr {
    margin-bottom: 0;
  }

  .x1nhhxel {
    margin-bottom: 1.5rem;
  }

  .x1bov10x {
    margin-top: -.5rem;
  }

  .xhj8ucd {
    margin-top: .75rem;
  }

  .xj1urod {
    margin-top: 1rem;
  }

  .x1odjw0f {
    overflow-y: auto;
  }
}

@layer components.hraness-site-footer.priority6 {
  .x16dlxzb[data-consent-placement="flow"]:is([data-consent-state="clear"], [data-consent-state="declined"]) {
    grid-column: 1 / -1;
  }
}

@layer components.hraness-site-footer.priority7 {
  .x17ffzhg[data-consent-placement="flow"]:is([data-consent-state="clear"], [data-consent-state="declined"]) {
    box-shadow: none;
  }

  .xmvc7ab[data-consent-placement="flow"]:is([data-consent-state="clear"], [data-consent-state="declined"]) {
    inset-block-end: auto;
  }

  .x1u21uqd[data-consent-placement="flow"]:is([data-consent-state="clear"], [data-consent-state="declined"]) {
    inset-inline-end: auto;
  }

  .x1htdl82[data-consent-placement="flow"]:is([data-consent-state="clear"], [data-consent-state="declined"]) {
    margin-block-start: .5rem;
  }

  .x949q27[data-consent-placement="flow"]:is([data-consent-state="clear"], [data-consent-state="declined"]) {
    max-inline-size: 100%;
  }

  .x1xp2ccn[data-consent-placement="flow"]:is([data-consent-state="clear"], [data-consent-state="declined"]) {
    position: relative;
  }

  .x1ui8ta9[data-consent-placement="flow"]:is([data-consent-state="clear"], [data-consent-state="declined"]) {
    white-space: normal;
  }
}

@layer components.hraness-site-footer.priority8 {
  .x16vqh2n::backdrop {
    background-color: #0000008c;
  }

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

  .x1i5lizr::-webkit-details-marker {
    display: none;
  }

  .x7xwk5j::placeholder {
    opacity: 1;
  }
}

@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));
  }
}

.x1lhcm7p {
  --_hraness-footer-mark-display: none;
}

.xwk8b0x {
  --_hraness-site-footer-consent-clearance: 0px;
}

.xd04x30 {
  --_hraness-site-footer-control-rows: 1;
}

.xwhig44 {
  --_hraness-site-footer-control-rows: 2;
}

.xh03epf {
  --_hraness-site-footer-control-rows: 3;
}

.x9fpagd {
  --_hraness-site-footer-links-justify: flex-end;
}

.xm2onfb {
  --_hraness-site-footer-links-justify: flex-start;
}

.x10xu2di {
  --_hraness-site-footer-links-offset: 0px;
}

.x11dl3l8 {
  --_hraness-site-footer-links-offset: calc((1rem - var(--hraness-site-footer-social-target)) / 2);
}

.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));
}

.x1baz8l3 {
  --hraness-site-footer-bar-block-size: calc(var(--hraness-site-footer-content-block-size) + var(--_hraness-site-footer-consent-clearance) + 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);
}

.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)));
}

.x1a0dqq5 {
  --hraness-site-footer-padding-block: clamp(.75rem,2vw,1rem);
}

.x18ca4t7 {
  --hraness-site-footer-row-gap: .5rem;
}

.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;
}

@supports ((-webkit-mask-image: linear-gradient(black, black)) or (mask-image: linear-gradient(black, black))) {
  .xr9ynje.xr9ynje {
    --_hraness-footer-mark-display: block;
  }
}

.xvqzllu:has( > .hraness-site-footer__inner > [data-slot="hraness-cookie-consent"][data-consent-state="required"]:not([hidden])) {
  --_hraness-site-footer-consent-clearance: calc(var(--hraness-site-footer-control-block-size) + 1.25rem + 2px);
}

@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));
    }
  }
}

@media (width >= 47.5rem) {
  .xrank7c.xrank7c {
    --_hraness-site-footer-control-rows: 1;
  }

  .xdjmklf.xdjmklf {
    --_hraness-site-footer-links-justify: flex-end;
  }

  .xg6nurf.xg6nurf {
    --_hraness-site-footer-links-offset: 0px;
  }
}

@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;
  }
}

@supports ((-webkit-mask-image: linear-gradient(black, black)) or (mask-image: linear-gradient(black, black))) {
  @media (forced-colors: active) {
    .x1apl0kd.x1apl0kd.x1apl0kd {
      --_hraness-footer-mark-display: none;
    }
  }
}

@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: var(--hraness-type-h2-size, clamp(1.75rem, 1.45rem + .9vw, 2.125rem));
  --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 srgb, 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 srgb, 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);
}

/* Standalone snapshots need their own derived light and shade. A lower-priority
 * layer supplies identical portable depth without overriding installed UI roles. */
@layer base {
:root[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]),
[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]) {
  --ui-surface-light: color-mix(in oklch, var(--card) 94%, white);
  --ui-surface-shade: color-mix(in oklch, var(--background) 55%, black);
  --elevation-low: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-light) 72%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--ui-surface-shade) 20%, transparent), 0 4px 10px -6px color-mix(in srgb, var(--ui-surface-shade) 22%, transparent);
  --elevation-raised: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-light) 72%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--ui-surface-shade) 18%, transparent), 0 14px 28px -16px color-mix(in srgb, var(--ui-surface-shade) 30%, transparent);
  --elevation-overlay: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-light) 80%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--ui-surface-shade) 24%, transparent), 0 24px 64px -20px color-mix(in srgb, var(--ui-surface-shade) 38%, transparent);
  --elevation-inset: inset 0 2px 4px -2px color-mix(in srgb, var(--ui-surface-shade) 24%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ui-surface-light) 44%, transparent);
}
}

@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;
    --elevation-inset: none;
  }
}

/* Generated by scripts/generate-palettes.ts. System-first palette paint without JavaScript. */
:root[data-palette][data-palette="catppuccin"]:not([data-theme]),
[data-palette="catppuccin"]:not([data-theme]) {
  color-scheme: light dark;
  --hraness-palette-background: light-dark(#eff1f5, #1e1e2e);
  --hraness-palette-foreground: light-dark(#3a3c50, #dbe1f7);
  --hraness-palette-muted: light-dark(#545768, #b2b8cf);
  --hraness-palette-faint: light-dark(#545768, #b2b8cf);
  --hraness-palette-grid: light-dark(#dce0e8, #313244);
  --hraness-palette-line: light-dark(#ccd0da, #45475a);
  --hraness-palette-control-border: light-dark(#6e7183, #9296ab);
  --hraness-palette-surface: light-dark(#e6e9ef, #181825);
  --hraness-palette-surface-raised: light-dark(#dce0e8, #313244);
  --hraness-palette-surface-hover: light-dark(#ccd0da, #45475a);
  --hraness-palette-card: light-dark(#e6e9ef, #181825);
  --hraness-palette-card-foreground: light-dark(#3a3c50, #dbe1f7);
  --hraness-palette-popover: light-dark(#dce0e8, #313244);
  --hraness-palette-popover-foreground: light-dark(#3a3c50, #dbe1f7);
  --hraness-palette-primary: light-dark(#1750bf, #92bafa);
  --hraness-palette-primary-foreground: light-dark(#eff1f5, #1e1e2e);
  --hraness-palette-primary-soft: light-dark(#d6e0f5, #2b3046);
  --hraness-palette-secondary: light-dark(#dce0e8, #313244);
  --hraness-palette-secondary-foreground: light-dark(#3a3c50, #dbe1f7);
  --hraness-palette-accent: light-dark(#d6e0f5, #2b3046);
  --hraness-palette-accent-foreground: light-dark(#3a3c50, #dbe1f7);
  --hraness-palette-focus: light-dark(#1750bf, #92bafa);
  --hraness-palette-scrim: light-dark(#00000070, #000000b8);
  --hraness-palette-disabled: light-dark(#dce0e8, #313244);
  --hraness-palette-disabled-foreground: light-dark(#545768, #b2b8cf);
  --hraness-palette-inverse: light-dark(#3a3c50, #dbe1f7);
  --hraness-palette-inverse-foreground: light-dark(#eff1f5, #1e1e2e);
  --hraness-palette-danger: light-dark(#b00d30, #f5a0b8);
  --hraness-palette-danger-foreground: light-dark(#eff1f5, #1e1e2e);
  --hraness-palette-danger-soft: light-dark(#ecd6de, #382b3d);
  --hraness-palette-warning: light-dark(#7b4e10, #f9e2af);
  --hraness-palette-warning-foreground: light-dark(#eff1f5, #1e1e2e);
  --hraness-palette-warning-soft: light-dark(#ede5db, #38363d);
  --hraness-palette-success: light-dark(#28631b, #a6e3a1);
  --hraness-palette-success-foreground: light-dark(#eff1f5, #1e1e2e);
  --hraness-palette-success-soft: light-dark(#dae7dd, #2e363c);
  --hraness-palette-info: light-dark(#0f6065, #89dceb);
  --hraness-palette-info-foreground: light-dark(#eff1f5, #1e1e2e);
  --hraness-palette-info-soft: light-dark(#d5e6ea, #2b3545);
  --hraness-palette-chart1: light-dark(#814170, #f5c2e7);
  --hraness-palette-chart2: light-dark(#28631b, #a6e3a1);
  --hraness-palette-chart3: light-dark(#0f6065, #89dceb);
  --hraness-palette-chart4: light-dark(#7b4e10, #f9e2af);
  --hraness-palette-chart5: light-dark(#712fc6, #cda9f7);
}
:root[data-palette="catppuccin"][data-theme="light"],
[data-palette="catppuccin"][data-theme="light"] {
  color-scheme: light;
  --hraness-palette-background: #eff1f5;
  --hraness-palette-foreground: #3a3c50;
  --hraness-palette-muted: #545768;
  --hraness-palette-faint: #545768;
  --hraness-palette-grid: #dce0e8;
  --hraness-palette-line: #ccd0da;
  --hraness-palette-control-border: #6e7183;
  --hraness-palette-surface: #e6e9ef;
  --hraness-palette-surface-raised: #dce0e8;
  --hraness-palette-surface-hover: #ccd0da;
  --hraness-palette-card: #e6e9ef;
  --hraness-palette-card-foreground: #3a3c50;
  --hraness-palette-popover: #dce0e8;
  --hraness-palette-popover-foreground: #3a3c50;
  --hraness-palette-primary: #1750bf;
  --hraness-palette-primary-foreground: #eff1f5;
  --hraness-palette-primary-soft: #d6e0f5;
  --hraness-palette-secondary: #dce0e8;
  --hraness-palette-secondary-foreground: #3a3c50;
  --hraness-palette-accent: #d6e0f5;
  --hraness-palette-accent-foreground: #3a3c50;
  --hraness-palette-focus: #1750bf;
  --hraness-palette-scrim: #00000070;
  --hraness-palette-disabled: #dce0e8;
  --hraness-palette-disabled-foreground: #545768;
  --hraness-palette-inverse: #3a3c50;
  --hraness-palette-inverse-foreground: #eff1f5;
  --hraness-palette-danger: #b00d30;
  --hraness-palette-danger-foreground: #eff1f5;
  --hraness-palette-danger-soft: #ecd6de;
  --hraness-palette-warning: #7b4e10;
  --hraness-palette-warning-foreground: #eff1f5;
  --hraness-palette-warning-soft: #ede5db;
  --hraness-palette-success: #28631b;
  --hraness-palette-success-foreground: #eff1f5;
  --hraness-palette-success-soft: #dae7dd;
  --hraness-palette-info: #0f6065;
  --hraness-palette-info-foreground: #eff1f5;
  --hraness-palette-info-soft: #d5e6ea;
  --hraness-palette-chart1: #814170;
  --hraness-palette-chart2: #28631b;
  --hraness-palette-chart3: #0f6065;
  --hraness-palette-chart4: #7b4e10;
  --hraness-palette-chart5: #712fc6;
}
:root[data-palette="catppuccin"][data-theme="dark"],
[data-palette="catppuccin"][data-theme="dark"] {
  color-scheme: dark;
  --hraness-palette-background: #1e1e2e;
  --hraness-palette-foreground: #dbe1f7;
  --hraness-palette-muted: #b2b8cf;
  --hraness-palette-faint: #b2b8cf;
  --hraness-palette-grid: #313244;
  --hraness-palette-line: #45475a;
  --hraness-palette-control-border: #9296ab;
  --hraness-palette-surface: #181825;
  --hraness-palette-surface-raised: #313244;
  --hraness-palette-surface-hover: #45475a;
  --hraness-palette-card: #181825;
  --hraness-palette-card-foreground: #dbe1f7;
  --hraness-palette-popover: #313244;
  --hraness-palette-popover-foreground: #dbe1f7;
  --hraness-palette-primary: #92bafa;
  --hraness-palette-primary-foreground: #1e1e2e;
  --hraness-palette-primary-soft: #2b3046;
  --hraness-palette-secondary: #313244;
  --hraness-palette-secondary-foreground: #dbe1f7;
  --hraness-palette-accent: #2b3046;
  --hraness-palette-accent-foreground: #dbe1f7;
  --hraness-palette-focus: #92bafa;
  --hraness-palette-scrim: #000000b8;
  --hraness-palette-disabled: #313244;
  --hraness-palette-disabled-foreground: #b2b8cf;
  --hraness-palette-inverse: #dbe1f7;
  --hraness-palette-inverse-foreground: #1e1e2e;
  --hraness-palette-danger: #f5a0b8;
  --hraness-palette-danger-foreground: #1e1e2e;
  --hraness-palette-danger-soft: #382b3d;
  --hraness-palette-warning: #f9e2af;
  --hraness-palette-warning-foreground: #1e1e2e;
  --hraness-palette-warning-soft: #38363d;
  --hraness-palette-success: #a6e3a1;
  --hraness-palette-success-foreground: #1e1e2e;
  --hraness-palette-success-soft: #2e363c;
  --hraness-palette-info: #89dceb;
  --hraness-palette-info-foreground: #1e1e2e;
  --hraness-palette-info-soft: #2b3545;
  --hraness-palette-chart1: #f5c2e7;
  --hraness-palette-chart2: #a6e3a1;
  --hraness-palette-chart3: #89dceb;
  --hraness-palette-chart4: #f9e2af;
  --hraness-palette-chart5: #cda9f7;
}
:root[data-palette][data-palette="gruvbox"]:not([data-theme]),
[data-palette="gruvbox"]:not([data-theme]) {
  color-scheme: light dark;
  --hraness-palette-background: light-dark(#fbf1c7, #282828);
  --hraness-palette-foreground: light-dark(#393533, #f0e5c7);
  --hraness-palette-muted: light-dark(#584f48, #c7baa3);
  --hraness-palette-faint: light-dark(#584f48, #c7baa3);
  --hraness-palette-grid: light-dark(#ebdbb2, #3c3836);
  --hraness-palette-line: light-dark(#d5c4a1, #504945);
  --hraness-palette-control-border: light-dark(#75685e, #a5988c);
  --hraness-palette-surface: light-dark(#f9f5d7, #1d2021);
  --hraness-palette-surface-raised: light-dark(#ebdbb2, #3c3836);
  --hraness-palette-surface-hover: light-dark(#d5c4a1, #504945);
  --hraness-palette-card: light-dark(#f9f5d7, #1d2021);
  --hraness-palette-card-foreground: light-dark(#393533, #f0e5c7);
  --hraness-palette-popover: light-dark(#ebdbb2, #3c3836);
  --hraness-palette-popover-foreground: light-dark(#393533, #f0e5c7);
  --hraness-palette-primary: light-dark(#065968, #a9c1b8);
  --hraness-palette-primary-foreground: light-dark(#fbf1c7, #282828);
  --hraness-palette-primary-soft: light-dark(#dee0be, #333735);
  --hraness-palette-secondary: light-dark(#ebdbb2, #3c3836);
  --hraness-palette-secondary-foreground: light-dark(#393533, #f0e5c7);
  --hraness-palette-accent: light-dark(#dee0be, #333735);
  --hraness-palette-accent-foreground: light-dark(#393533, #f0e5c7);
  --hraness-palette-focus: light-dark(#065968, #a9c1b8);
  --hraness-palette-scrim: light-dark(#00000070, #000000b8);
  --hraness-palette-disabled: light-dark(#ebdbb2, #3c3836);
  --hraness-palette-disabled-foreground: light-dark(#584f48, #c7baa3);
  --hraness-palette-inverse: light-dark(#393533, #f0e5c7);
  --hraness-palette-inverse-foreground: light-dark(#fbf1c7, #282828);
  --hraness-palette-danger: light-dark(#9d0006, #fda49a);
  --hraness-palette-danger-foreground: light-dark(#fbf1c7, #282828);
  --hraness-palette-danger-soft: light-dark(#f0d4b0, #412c29);
  --hraness-palette-warning: light-dark(#70490c, #fabd2f);
  --hraness-palette-warning-foreground: light-dark(#fbf1c7, #282828);
  --hraness-palette-warning-soft: light-dark(#f3e2b2, #413a29);
  --hraness-palette-success: light-dark(#56520a, #bfc23c);
  --hraness-palette-success-foreground: light-dark(#fbf1c7, #282828);
  --hraness-palette-success-soft: light-dark(#ebe2b1, #393a28);
  --hraness-palette-info: light-dark(#30593f, #9cc88c);
  --hraness-palette-info-foreground: light-dark(#fbf1c7, #282828);
  --hraness-palette-info-soft: light-dark(#e5e3ba, #343a32);
  --hraness-palette-chart1: light-dark(#913002, #fea963);
  --hraness-palette-chart2: light-dark(#56520a, #bfc23c);
  --hraness-palette-chart3: light-dark(#30593f, #9cc88c);
  --hraness-palette-chart4: light-dark(#70490c, #fabd2f);
  --hraness-palette-chart5: light-dark(#7f3865, #e2aebc);
}
:root[data-palette="gruvbox"][data-theme="light"],
[data-palette="gruvbox"][data-theme="light"] {
  color-scheme: light;
  --hraness-palette-background: #fbf1c7;
  --hraness-palette-foreground: #393533;
  --hraness-palette-muted: #584f48;
  --hraness-palette-faint: #584f48;
  --hraness-palette-grid: #ebdbb2;
  --hraness-palette-line: #d5c4a1;
  --hraness-palette-control-border: #75685e;
  --hraness-palette-surface: #f9f5d7;
  --hraness-palette-surface-raised: #ebdbb2;
  --hraness-palette-surface-hover: #d5c4a1;
  --hraness-palette-card: #f9f5d7;
  --hraness-palette-card-foreground: #393533;
  --hraness-palette-popover: #ebdbb2;
  --hraness-palette-popover-foreground: #393533;
  --hraness-palette-primary: #065968;
  --hraness-palette-primary-foreground: #fbf1c7;
  --hraness-palette-primary-soft: #dee0be;
  --hraness-palette-secondary: #ebdbb2;
  --hraness-palette-secondary-foreground: #393533;
  --hraness-palette-accent: #dee0be;
  --hraness-palette-accent-foreground: #393533;
  --hraness-palette-focus: #065968;
  --hraness-palette-scrim: #00000070;
  --hraness-palette-disabled: #ebdbb2;
  --hraness-palette-disabled-foreground: #584f48;
  --hraness-palette-inverse: #393533;
  --hraness-palette-inverse-foreground: #fbf1c7;
  --hraness-palette-danger: #9d0006;
  --hraness-palette-danger-foreground: #fbf1c7;
  --hraness-palette-danger-soft: #f0d4b0;
  --hraness-palette-warning: #70490c;
  --hraness-palette-warning-foreground: #fbf1c7;
  --hraness-palette-warning-soft: #f3e2b2;
  --hraness-palette-success: #56520a;
  --hraness-palette-success-foreground: #fbf1c7;
  --hraness-palette-success-soft: #ebe2b1;
  --hraness-palette-info: #30593f;
  --hraness-palette-info-foreground: #fbf1c7;
  --hraness-palette-info-soft: #e5e3ba;
  --hraness-palette-chart1: #913002;
  --hraness-palette-chart2: #56520a;
  --hraness-palette-chart3: #30593f;
  --hraness-palette-chart4: #70490c;
  --hraness-palette-chart5: #7f3865;
}
:root[data-palette="gruvbox"][data-theme="dark"],
[data-palette="gruvbox"][data-theme="dark"] {
  color-scheme: dark;
  --hraness-palette-background: #282828;
  --hraness-palette-foreground: #f0e5c7;
  --hraness-palette-muted: #c7baa3;
  --hraness-palette-faint: #c7baa3;
  --hraness-palette-grid: #3c3836;
  --hraness-palette-line: #504945;
  --hraness-palette-control-border: #a5988c;
  --hraness-palette-surface: #1d2021;
  --hraness-palette-surface-raised: #3c3836;
  --hraness-palette-surface-hover: #504945;
  --hraness-palette-card: #1d2021;
  --hraness-palette-card-foreground: #f0e5c7;
  --hraness-palette-popover: #3c3836;
  --hraness-palette-popover-foreground: #f0e5c7;
  --hraness-palette-primary: #a9c1b8;
  --hraness-palette-primary-foreground: #282828;
  --hraness-palette-primary-soft: #333735;
  --hraness-palette-secondary: #3c3836;
  --hraness-palette-secondary-foreground: #f0e5c7;
  --hraness-palette-accent: #333735;
  --hraness-palette-accent-foreground: #f0e5c7;
  --hraness-palette-focus: #a9c1b8;
  --hraness-palette-scrim: #000000b8;
  --hraness-palette-disabled: #3c3836;
  --hraness-palette-disabled-foreground: #c7baa3;
  --hraness-palette-inverse: #f0e5c7;
  --hraness-palette-inverse-foreground: #282828;
  --hraness-palette-danger: #fda49a;
  --hraness-palette-danger-foreground: #282828;
  --hraness-palette-danger-soft: #412c29;
  --hraness-palette-warning: #fabd2f;
  --hraness-palette-warning-foreground: #282828;
  --hraness-palette-warning-soft: #413a29;
  --hraness-palette-success: #bfc23c;
  --hraness-palette-success-foreground: #282828;
  --hraness-palette-success-soft: #393a28;
  --hraness-palette-info: #9cc88c;
  --hraness-palette-info-foreground: #282828;
  --hraness-palette-info-soft: #343a32;
  --hraness-palette-chart1: #fea963;
  --hraness-palette-chart2: #bfc23c;
  --hraness-palette-chart3: #9cc88c;
  --hraness-palette-chart4: #fabd2f;
  --hraness-palette-chart5: #e2aebc;
}
:root[data-palette][data-palette="rose-pine"]:not([data-theme]),
[data-palette="rose-pine"]:not([data-theme]) {
  color-scheme: light dark;
  --hraness-palette-background: light-dark(#faf4ed, #191724);
  --hraness-palette-foreground: light-dark(#44405e, #e0def4);
  --hraness-palette-muted: light-dark(#605c74, #adaac0);
  --hraness-palette-faint: light-dark(#605c74, #adaac0);
  --hraness-palette-grid: light-dark(#f2e9e1, #26233a);
  --hraness-palette-line: light-dark(#dfdad9, #403d52);
  --hraness-palette-control-border: light-dark(#797593, #908caa);
  --hraness-palette-surface: light-dark(#fffaf3, #1f1d2e);
  --hraness-palette-surface-raised: light-dark(#f2e9e1, #26233a);
  --hraness-palette-surface-hover: light-dark(#dfdad9, #403d52);
  --hraness-palette-card: light-dark(#fffaf3, #1f1d2e);
  --hraness-palette-card-foreground: light-dark(#44405e, #e0def4);
  --hraness-palette-popover: light-dark(#f2e9e1, #26233a);
  --hraness-palette-popover-foreground: light-dark(#44405e, #e0def4);
  --hraness-palette-primary: light-dark(#68587a, #c4a7e7);
  --hraness-palette-primary-foreground: light-dark(#faf4ed, #191724);
  --hraness-palette-primary-soft: light-dark(#ede5e5, #2e283b);
  --hraness-palette-secondary: light-dark(#f2e9e1, #26233a);
  --hraness-palette-secondary-foreground: light-dark(#44405e, #e0def4);
  --hraness-palette-accent: light-dark(#ede5e5, #2e283b);
  --hraness-palette-accent-foreground: light-dark(#44405e, #e0def4);
  --hraness-palette-focus: light-dark(#68587a, #c4a7e7);
  --hraness-palette-scrim: light-dark(#00000070, #000000b8);
  --hraness-palette-disabled: light-dark(#f2e9e1, #26233a);
  --hraness-palette-disabled-foreground: light-dark(#605c74, #adaac0);
  --hraness-palette-inverse: light-dark(#44405e, #e0def4);
  --hraness-palette-inverse-foreground: light-dark(#faf4ed, #191724);
  --hraness-palette-danger: light-dark(#8b4c5e, #f090ab);
  --hraness-palette-danger-foreground: light-dark(#faf4ed, #191724);
  --hraness-palette-danger-soft: light-dark(#f2e3df, #322231);
  --hraness-palette-warning: light-dark(#81561d, #f6c177);
  --hraness-palette-warning-foreground: light-dark(#faf4ed, #191724);
  --hraness-palette-warning-soft: light-dark(#f8ead7, #342b2e);
  --hraness-palette-success: light-dark(#27667f, #9ccfd8);
  --hraness-palette-success-foreground: light-dark(#faf4ed, #191724);
  --hraness-palette-success-soft: light-dark(#e1e3e0, #292d3a);
  --hraness-palette-info: light-dark(#3a656c, #ebbcba);
  --hraness-palette-info-foreground: light-dark(#faf4ed, #191724);
  --hraness-palette-info-soft: light-dark(#e6e8e4, #322b36);
  --hraness-palette-chart1: light-dark(#85514e, #ebbcba);
  --hraness-palette-chart2: light-dark(#27667f, #9ccfd8);
  --hraness-palette-chart3: light-dark(#3a656c, #ebbcba);
  --hraness-palette-chart4: light-dark(#81561d, #f6c177);
  --hraness-palette-chart5: light-dark(#68587a, #c4a7e7);
}
:root[data-palette="rose-pine"][data-theme="light"],
[data-palette="rose-pine"][data-theme="light"] {
  color-scheme: light;
  --hraness-palette-background: #faf4ed;
  --hraness-palette-foreground: #44405e;
  --hraness-palette-muted: #605c74;
  --hraness-palette-faint: #605c74;
  --hraness-palette-grid: #f2e9e1;
  --hraness-palette-line: #dfdad9;
  --hraness-palette-control-border: #797593;
  --hraness-palette-surface: #fffaf3;
  --hraness-palette-surface-raised: #f2e9e1;
  --hraness-palette-surface-hover: #dfdad9;
  --hraness-palette-card: #fffaf3;
  --hraness-palette-card-foreground: #44405e;
  --hraness-palette-popover: #f2e9e1;
  --hraness-palette-popover-foreground: #44405e;
  --hraness-palette-primary: #68587a;
  --hraness-palette-primary-foreground: #faf4ed;
  --hraness-palette-primary-soft: #ede5e5;
  --hraness-palette-secondary: #f2e9e1;
  --hraness-palette-secondary-foreground: #44405e;
  --hraness-palette-accent: #ede5e5;
  --hraness-palette-accent-foreground: #44405e;
  --hraness-palette-focus: #68587a;
  --hraness-palette-scrim: #00000070;
  --hraness-palette-disabled: #f2e9e1;
  --hraness-palette-disabled-foreground: #605c74;
  --hraness-palette-inverse: #44405e;
  --hraness-palette-inverse-foreground: #faf4ed;
  --hraness-palette-danger: #8b4c5e;
  --hraness-palette-danger-foreground: #faf4ed;
  --hraness-palette-danger-soft: #f2e3df;
  --hraness-palette-warning: #81561d;
  --hraness-palette-warning-foreground: #faf4ed;
  --hraness-palette-warning-soft: #f8ead7;
  --hraness-palette-success: #27667f;
  --hraness-palette-success-foreground: #faf4ed;
  --hraness-palette-success-soft: #e1e3e0;
  --hraness-palette-info: #3a656c;
  --hraness-palette-info-foreground: #faf4ed;
  --hraness-palette-info-soft: #e6e8e4;
  --hraness-palette-chart1: #85514e;
  --hraness-palette-chart2: #27667f;
  --hraness-palette-chart3: #3a656c;
  --hraness-palette-chart4: #81561d;
  --hraness-palette-chart5: #68587a;
}
:root[data-palette="rose-pine"][data-theme="dark"],
[data-palette="rose-pine"][data-theme="dark"] {
  color-scheme: dark;
  --hraness-palette-background: #191724;
  --hraness-palette-foreground: #e0def4;
  --hraness-palette-muted: #adaac0;
  --hraness-palette-faint: #adaac0;
  --hraness-palette-grid: #26233a;
  --hraness-palette-line: #403d52;
  --hraness-palette-control-border: #908caa;
  --hraness-palette-surface: #1f1d2e;
  --hraness-palette-surface-raised: #26233a;
  --hraness-palette-surface-hover: #403d52;
  --hraness-palette-card: #1f1d2e;
  --hraness-palette-card-foreground: #e0def4;
  --hraness-palette-popover: #26233a;
  --hraness-palette-popover-foreground: #e0def4;
  --hraness-palette-primary: #c4a7e7;
  --hraness-palette-primary-foreground: #191724;
  --hraness-palette-primary-soft: #2e283b;
  --hraness-palette-secondary: #26233a;
  --hraness-palette-secondary-foreground: #e0def4;
  --hraness-palette-accent: #2e283b;
  --hraness-palette-accent-foreground: #e0def4;
  --hraness-palette-focus: #c4a7e7;
  --hraness-palette-scrim: #000000b8;
  --hraness-palette-disabled: #26233a;
  --hraness-palette-disabled-foreground: #adaac0;
  --hraness-palette-inverse: #e0def4;
  --hraness-palette-inverse-foreground: #191724;
  --hraness-palette-danger: #f090ab;
  --hraness-palette-danger-foreground: #191724;
  --hraness-palette-danger-soft: #322231;
  --hraness-palette-warning: #f6c177;
  --hraness-palette-warning-foreground: #191724;
  --hraness-palette-warning-soft: #342b2e;
  --hraness-palette-success: #9ccfd8;
  --hraness-palette-success-foreground: #191724;
  --hraness-palette-success-soft: #292d3a;
  --hraness-palette-info: #ebbcba;
  --hraness-palette-info-foreground: #191724;
  --hraness-palette-info-soft: #322b36;
  --hraness-palette-chart1: #ebbcba;
  --hraness-palette-chart2: #9ccfd8;
  --hraness-palette-chart3: #ebbcba;
  --hraness-palette-chart4: #f6c177;
  --hraness-palette-chart5: #c4a7e7;
}
:root[data-palette][data-palette="tokyo-night"]:not([data-theme]),
[data-palette="tokyo-night"]:not([data-theme]) {
  color-scheme: light dark;
  --hraness-palette-background: light-dark(#e1e2e7, #1a1b26);
  --hraness-palette-foreground: light-dark(#1c3161, #c0caf5);
  --hraness-palette-muted: light-dark(#414c76, #a9b1d6);
  --hraness-palette-faint: light-dark(#414c76, #a9b1d6);
  --hraness-palette-grid: light-dark(#c4c8da, #24283b);
  --hraness-palette-line: light-dark(#b7c1e3, #292e42);
  --hraness-palette-control-border: light-dark(#56659d, #737aa2);
  --hraness-palette-surface: light-dark(#d0d5e3, #16161e);
  --hraness-palette-surface-raised: light-dark(#c4c8da, #24283b);
  --hraness-palette-surface-hover: light-dark(#b7c1e3, #292e42);
  --hraness-palette-card: light-dark(#d0d5e3, #16161e);
  --hraness-palette-card-foreground: light-dark(#1c3161, #c0caf5);
  --hraness-palette-popover: light-dark(#c4c8da, #24283b);
  --hraness-palette-popover-foreground: light-dark(#1c3161, #c0caf5);
  --hraness-palette-primary: light-dark(#1d4e90, #7aa2f7);
  --hraness-palette-primary-foreground: light-dark(#e1e2e7, #1a1b26);
  --hraness-palette-primary-soft: light-dark(#ccd6e7, #262b3f);
  --hraness-palette-secondary: light-dark(#c4c8da, #24283b);
  --hraness-palette-secondary-foreground: light-dark(#1c3161, #c0caf5);
  --hraness-palette-accent: light-dark(#ccd6e7, #262b3f);
  --hraness-palette-accent-foreground: light-dark(#1c3161, #c0caf5);
  --hraness-palette-focus: light-dark(#1d4e90, #7aa2f7);
  --hraness-palette-scrim: light-dark(#00000070, #000000b8);
  --hraness-palette-disabled: light-dark(#c4c8da, #24283b);
  --hraness-palette-disabled-foreground: light-dark(#414c76, #a9b1d6);
  --hraness-palette-inverse: light-dark(#1c3161, #c0caf5);
  --hraness-palette-inverse-foreground: light-dark(#e1e2e7, #1a1b26);
  --hraness-palette-danger: light-dark(#951a3e, #f7768e);
  --hraness-palette-danger-foreground: light-dark(#e1e2e7, #1a1b26);
  --hraness-palette-danger-soft: light-dark(#e3ccd7, #352632);
  --hraness-palette-warning: light-dark(#614b2b, #e0af68);
  --hraness-palette-warning-foreground: light-dark(#e1e2e7, #1a1b26);
  --hraness-palette-warning-soft: light-dark(#d7d4d3, #322d2e);
  --hraness-palette-success: light-dark(#40552a, #9ece6a);
  --hraness-palette-success-foreground: light-dark(#e1e2e7, #1a1b26);
  --hraness-palette-success-soft: light-dark(#d1d5d2, #2a302e);
  --hraness-palette-info: light-dark(#005571, #7dcfff);
  --hraness-palette-info-foreground: light-dark(#e1e2e7, #1a1b26);
  --hraness-palette-info-soft: light-dark(#c6d4dd, #263140);
  --hraness-palette-chart1: light-dark(#7a3f00, #ff9e64);
  --hraness-palette-chart2: light-dark(#40552a, #9ece6a);
  --hraness-palette-chart3: light-dark(#005571, #7dcfff);
  --hraness-palette-chart4: light-dark(#614b2b, #e0af68);
  --hraness-palette-chart5: light-dark(#61369a, #bb9af7);
}
:root[data-palette="tokyo-night"][data-theme="light"],
[data-palette="tokyo-night"][data-theme="light"] {
  color-scheme: light;
  --hraness-palette-background: #e1e2e7;
  --hraness-palette-foreground: #1c3161;
  --hraness-palette-muted: #414c76;
  --hraness-palette-faint: #414c76;
  --hraness-palette-grid: #c4c8da;
  --hraness-palette-line: #b7c1e3;
  --hraness-palette-control-border: #56659d;
  --hraness-palette-surface: #d0d5e3;
  --hraness-palette-surface-raised: #c4c8da;
  --hraness-palette-surface-hover: #b7c1e3;
  --hraness-palette-card: #d0d5e3;
  --hraness-palette-card-foreground: #1c3161;
  --hraness-palette-popover: #c4c8da;
  --hraness-palette-popover-foreground: #1c3161;
  --hraness-palette-primary: #1d4e90;
  --hraness-palette-primary-foreground: #e1e2e7;
  --hraness-palette-primary-soft: #ccd6e7;
  --hraness-palette-secondary: #c4c8da;
  --hraness-palette-secondary-foreground: #1c3161;
  --hraness-palette-accent: #ccd6e7;
  --hraness-palette-accent-foreground: #1c3161;
  --hraness-palette-focus: #1d4e90;
  --hraness-palette-scrim: #00000070;
  --hraness-palette-disabled: #c4c8da;
  --hraness-palette-disabled-foreground: #414c76;
  --hraness-palette-inverse: #1c3161;
  --hraness-palette-inverse-foreground: #e1e2e7;
  --hraness-palette-danger: #951a3e;
  --hraness-palette-danger-foreground: #e1e2e7;
  --hraness-palette-danger-soft: #e3ccd7;
  --hraness-palette-warning: #614b2b;
  --hraness-palette-warning-foreground: #e1e2e7;
  --hraness-palette-warning-soft: #d7d4d3;
  --hraness-palette-success: #40552a;
  --hraness-palette-success-foreground: #e1e2e7;
  --hraness-palette-success-soft: #d1d5d2;
  --hraness-palette-info: #005571;
  --hraness-palette-info-foreground: #e1e2e7;
  --hraness-palette-info-soft: #c6d4dd;
  --hraness-palette-chart1: #7a3f00;
  --hraness-palette-chart2: #40552a;
  --hraness-palette-chart3: #005571;
  --hraness-palette-chart4: #614b2b;
  --hraness-palette-chart5: #61369a;
}
:root[data-palette="tokyo-night"][data-theme="dark"],
[data-palette="tokyo-night"][data-theme="dark"] {
  color-scheme: dark;
  --hraness-palette-background: #1a1b26;
  --hraness-palette-foreground: #c0caf5;
  --hraness-palette-muted: #a9b1d6;
  --hraness-palette-faint: #a9b1d6;
  --hraness-palette-grid: #24283b;
  --hraness-palette-line: #292e42;
  --hraness-palette-control-border: #737aa2;
  --hraness-palette-surface: #16161e;
  --hraness-palette-surface-raised: #24283b;
  --hraness-palette-surface-hover: #292e42;
  --hraness-palette-card: #16161e;
  --hraness-palette-card-foreground: #c0caf5;
  --hraness-palette-popover: #24283b;
  --hraness-palette-popover-foreground: #c0caf5;
  --hraness-palette-primary: #7aa2f7;
  --hraness-palette-primary-foreground: #1a1b26;
  --hraness-palette-primary-soft: #262b3f;
  --hraness-palette-secondary: #24283b;
  --hraness-palette-secondary-foreground: #c0caf5;
  --hraness-palette-accent: #262b3f;
  --hraness-palette-accent-foreground: #c0caf5;
  --hraness-palette-focus: #7aa2f7;
  --hraness-palette-scrim: #000000b8;
  --hraness-palette-disabled: #24283b;
  --hraness-palette-disabled-foreground: #a9b1d6;
  --hraness-palette-inverse: #c0caf5;
  --hraness-palette-inverse-foreground: #1a1b26;
  --hraness-palette-danger: #f7768e;
  --hraness-palette-danger-foreground: #1a1b26;
  --hraness-palette-danger-soft: #352632;
  --hraness-palette-warning: #e0af68;
  --hraness-palette-warning-foreground: #1a1b26;
  --hraness-palette-warning-soft: #322d2e;
  --hraness-palette-success: #9ece6a;
  --hraness-palette-success-foreground: #1a1b26;
  --hraness-palette-success-soft: #2a302e;
  --hraness-palette-info: #7dcfff;
  --hraness-palette-info-foreground: #1a1b26;
  --hraness-palette-info-soft: #263140;
  --hraness-palette-chart1: #ff9e64;
  --hraness-palette-chart2: #9ece6a;
  --hraness-palette-chart3: #7dcfff;
  --hraness-palette-chart4: #e0af68;
  --hraness-palette-chart5: #bb9af7;
}
:root[data-palette][data-palette="paper"]:not([data-theme]),
[data-palette="paper"]:not([data-theme]) {
  color-scheme: light dark;
  --hraness-palette-background: light-dark(#f8f7f4, #12100f);
  --hraness-palette-foreground: light-dark(#1c1917, #f5f2ed);
  --hraness-palette-muted: light-dark(#6c665f, #aaa29a);
  --hraness-palette-faint: light-dark(#6c665f, #aaa29a);
  --hraness-palette-grid: light-dark(#dfdcd6, #302b27);
  --hraness-palette-line: light-dark(#b9b3ab, #514a44);
  --hraness-palette-control-border: light-dark(#8a8177, #827a72);
  --hraness-palette-surface: light-dark(#fffefa, #1d1a18);
  --hraness-palette-surface-raised: light-dark(#fffefa, #211d1a);
  --hraness-palette-surface-hover: light-dark(#ebe8e3, #292522);
  --hraness-palette-card: light-dark(#fffefa, #1d1a18);
  --hraness-palette-card-foreground: light-dark(#1c1917, #f5f2ed);
  --hraness-palette-popover: light-dark(#fffefa, #211d1a);
  --hraness-palette-popover-foreground: light-dark(#1c1917, #f5f2ed);
  --hraness-palette-primary: light-dark(#1e5ae1, #8fb0ff);
  --hraness-palette-primary-foreground: light-dark(#f8f7f4, #12100f);
  --hraness-palette-primary-soft: light-dark(#dee5f3, #21232c);
  --hraness-palette-secondary: light-dark(#ebe8e3, #292522);
  --hraness-palette-secondary-foreground: light-dark(#1c1917, #f5f2ed);
  --hraness-palette-accent: light-dark(#dee5f3, #21232c);
  --hraness-palette-accent-foreground: light-dark(#1c1917, #f5f2ed);
  --hraness-palette-focus: light-dark(#1e5ae1, #8fb0ff);
  --hraness-palette-scrim: light-dark(#00000070, #000000b8);
  --hraness-palette-disabled: light-dark(#fffefa, #211d1a);
  --hraness-palette-disabled-foreground: light-dark(#6c665f, #aaa29a);
  --hraness-palette-inverse: light-dark(#1c1917, #f5f2ed);
  --hraness-palette-inverse-foreground: light-dark(#f8f7f4, #12100f);
  --hraness-palette-danger: light-dark(#b23c34, #ef8c82);
  --hraness-palette-danger-foreground: light-dark(#f8f7f4, #12100f);
  --hraness-palette-danger-soft: light-dark(#f0e1dd, #2d1f1d);
  --hraness-palette-warning: light-dark(#975600, #efae55);
  --hraness-palette-warning-foreground: light-dark(#f8f7f4, #12100f);
  --hraness-palette-warning-soft: light-dark(#eee5d7, #2d2317);
  --hraness-palette-success: light-dark(#227445, #5fc98b);
  --hraness-palette-success-foreground: light-dark(#f8f7f4, #12100f);
  --hraness-palette-success-soft: light-dark(#dfe9e0, #1b261e);
  --hraness-palette-info: light-dark(#1e5ae1, #8fb0ff);
  --hraness-palette-info-foreground: light-dark(#f8f7f4, #12100f);
  --hraness-palette-info-soft: light-dark(#dee5f3, #21232c);
  --hraness-palette-chart1: light-dark(#a24a64, #db91aa);
  --hraness-palette-chart2: light-dark(#227445, #5fc98b);
  --hraness-palette-chart3: light-dark(#1e5ae1, #8fb0ff);
  --hraness-palette-chart4: light-dark(#975600, #efae55);
  --hraness-palette-chart5: light-dark(#7858a3, #b7a0dc);
}
:root[data-palette="paper"][data-theme="light"],
[data-palette="paper"][data-theme="light"] {
  color-scheme: light;
  --hraness-palette-background: #f8f7f4;
  --hraness-palette-foreground: #1c1917;
  --hraness-palette-muted: #6c665f;
  --hraness-palette-faint: #6c665f;
  --hraness-palette-grid: #dfdcd6;
  --hraness-palette-line: #b9b3ab;
  --hraness-palette-control-border: #8a8177;
  --hraness-palette-surface: #fffefa;
  --hraness-palette-surface-raised: #fffefa;
  --hraness-palette-surface-hover: #ebe8e3;
  --hraness-palette-card: #fffefa;
  --hraness-palette-card-foreground: #1c1917;
  --hraness-palette-popover: #fffefa;
  --hraness-palette-popover-foreground: #1c1917;
  --hraness-palette-primary: #1e5ae1;
  --hraness-palette-primary-foreground: #f8f7f4;
  --hraness-palette-primary-soft: #dee5f3;
  --hraness-palette-secondary: #ebe8e3;
  --hraness-palette-secondary-foreground: #1c1917;
  --hraness-palette-accent: #dee5f3;
  --hraness-palette-accent-foreground: #1c1917;
  --hraness-palette-focus: #1e5ae1;
  --hraness-palette-scrim: #00000070;
  --hraness-palette-disabled: #fffefa;
  --hraness-palette-disabled-foreground: #6c665f;
  --hraness-palette-inverse: #1c1917;
  --hraness-palette-inverse-foreground: #f8f7f4;
  --hraness-palette-danger: #b23c34;
  --hraness-palette-danger-foreground: #f8f7f4;
  --hraness-palette-danger-soft: #f0e1dd;
  --hraness-palette-warning: #975600;
  --hraness-palette-warning-foreground: #f8f7f4;
  --hraness-palette-warning-soft: #eee5d7;
  --hraness-palette-success: #227445;
  --hraness-palette-success-foreground: #f8f7f4;
  --hraness-palette-success-soft: #dfe9e0;
  --hraness-palette-info: #1e5ae1;
  --hraness-palette-info-foreground: #f8f7f4;
  --hraness-palette-info-soft: #dee5f3;
  --hraness-palette-chart1: #a24a64;
  --hraness-palette-chart2: #227445;
  --hraness-palette-chart3: #1e5ae1;
  --hraness-palette-chart4: #975600;
  --hraness-palette-chart5: #7858a3;
}
:root[data-palette="paper"][data-theme="dark"],
[data-palette="paper"][data-theme="dark"] {
  color-scheme: dark;
  --hraness-palette-background: #12100f;
  --hraness-palette-foreground: #f5f2ed;
  --hraness-palette-muted: #aaa29a;
  --hraness-palette-faint: #aaa29a;
  --hraness-palette-grid: #302b27;
  --hraness-palette-line: #514a44;
  --hraness-palette-control-border: #827a72;
  --hraness-palette-surface: #1d1a18;
  --hraness-palette-surface-raised: #211d1a;
  --hraness-palette-surface-hover: #292522;
  --hraness-palette-card: #1d1a18;
  --hraness-palette-card-foreground: #f5f2ed;
  --hraness-palette-popover: #211d1a;
  --hraness-palette-popover-foreground: #f5f2ed;
  --hraness-palette-primary: #8fb0ff;
  --hraness-palette-primary-foreground: #12100f;
  --hraness-palette-primary-soft: #21232c;
  --hraness-palette-secondary: #292522;
  --hraness-palette-secondary-foreground: #f5f2ed;
  --hraness-palette-accent: #21232c;
  --hraness-palette-accent-foreground: #f5f2ed;
  --hraness-palette-focus: #8fb0ff;
  --hraness-palette-scrim: #000000b8;
  --hraness-palette-disabled: #211d1a;
  --hraness-palette-disabled-foreground: #aaa29a;
  --hraness-palette-inverse: #f5f2ed;
  --hraness-palette-inverse-foreground: #12100f;
  --hraness-palette-danger: #ef8c82;
  --hraness-palette-danger-foreground: #12100f;
  --hraness-palette-danger-soft: #2d1f1d;
  --hraness-palette-warning: #efae55;
  --hraness-palette-warning-foreground: #12100f;
  --hraness-palette-warning-soft: #2d2317;
  --hraness-palette-success: #5fc98b;
  --hraness-palette-success-foreground: #12100f;
  --hraness-palette-success-soft: #1b261e;
  --hraness-palette-info: #8fb0ff;
  --hraness-palette-info-foreground: #12100f;
  --hraness-palette-info-soft: #21232c;
  --hraness-palette-chart1: #db91aa;
  --hraness-palette-chart2: #5fc98b;
  --hraness-palette-chart3: #8fb0ff;
  --hraness-palette-chart4: #efae55;
  --hraness-palette-chart5: #b7a0dc;
}

/* StyleX owns --hraness-palette-* values. This opt-in global boundary joins
 * portable controls, product CSS, and compiled recipes without new runtime CSS.
 * Import after the existing token boundary. Explicit palette islands carry
 * their own complete theme class, including portalled overlays. Repeating the
 * palette attribute outranks earlier or later legacy root and island tokens;
 * bundlers may deduplicate a consumer's second bridge import. */


:root.hraness-palette[data-theme],
.hraness-palette[data-theme],
:root[data-palette][data-palette],
[data-palette][data-palette] {
  --background: var(--hraness-palette-background);
  --foreground: var(--hraness-palette-foreground);
  --muted: var(--hraness-palette-muted);
  --faint: var(--hraness-palette-faint);
  --grid: var(--hraness-palette-grid);
  --line: var(--hraness-palette-line);
  --control-border: var(--hraness-palette-control-border);
  --surface: var(--hraness-palette-surface);
  --surface-raised: var(--hraness-palette-surface-raised);
  --surface-hover: var(--hraness-palette-surface-hover);
  --card: var(--hraness-palette-card);
  --card-foreground: var(--hraness-palette-card-foreground);
  --popover: var(--hraness-palette-popover);
  --popover-foreground: var(--hraness-palette-popover-foreground);
  --primary: var(--hraness-palette-primary);
  --primary-foreground: var(--hraness-palette-primary-foreground);
  --primary-soft: var(--hraness-palette-primary-soft);
  --secondary: var(--hraness-palette-secondary);
  --secondary-foreground: var(--hraness-palette-secondary-foreground);
  --accent: var(--hraness-palette-accent);
  --accent-foreground: var(--hraness-palette-accent-foreground);
  --focus: var(--hraness-palette-focus);
  --scrim: var(--hraness-palette-scrim);
  --disabled: var(--hraness-palette-disabled);
  --disabled-foreground: var(--hraness-palette-disabled-foreground);
  --inverse: var(--hraness-palette-inverse);
  --inverse-foreground: var(--hraness-palette-inverse-foreground);
  --danger: var(--hraness-palette-danger);
  --danger-foreground: var(--hraness-palette-danger-foreground);
  --danger-soft: var(--hraness-palette-danger-soft);
  --warning: var(--hraness-palette-warning);
  --warning-foreground: var(--hraness-palette-warning-foreground);
  --warning-soft: var(--hraness-palette-warning-soft);
  --success: var(--hraness-palette-success);
  --success-foreground: var(--hraness-palette-success-foreground);
  --success-soft: var(--hraness-palette-success-soft);
  --info: var(--hraness-palette-info);
  --info-foreground: var(--hraness-palette-info-foreground);
  --info-soft: var(--hraness-palette-info-soft);
  --ui-background: var(--hraness-palette-background);
  --ui-foreground: var(--hraness-palette-foreground);
  --ui-card: var(--hraness-palette-card);
  --ui-card-foreground: var(--hraness-palette-card-foreground);
  --ui-popover: var(--hraness-palette-popover);
  --ui-popover-foreground: var(--hraness-palette-popover-foreground);
  --ui-primary: var(--hraness-palette-primary);
  --ui-primary-foreground: var(--hraness-palette-primary-foreground);
  --ui-secondary: var(--hraness-palette-secondary);
  --ui-secondary-foreground: var(--hraness-palette-secondary-foreground);
  --ui-muted: var(--hraness-palette-surface-raised);
  --ui-muted-foreground: var(--hraness-palette-muted);
  --ui-accent: var(--hraness-palette-accent);
  --ui-accent-foreground: var(--hraness-palette-accent-foreground);
  --ui-destructive: var(--hraness-palette-danger);
  --ui-destructive-foreground: var(--hraness-palette-danger-foreground);
  --ui-destructive-soft: var(--hraness-palette-danger-soft);
  --ui-border: var(--hraness-palette-line);
  --ui-input: var(--hraness-palette-control-border);
  --ui-ring: var(--hraness-palette-focus);
  --ui-success: var(--hraness-palette-success);
  --ui-success-foreground: var(--hraness-palette-success-foreground);
  --ui-success-soft: var(--hraness-palette-success-soft);
  --ui-warning: var(--hraness-palette-warning);
  --ui-warning-foreground: var(--hraness-palette-warning-foreground);
  --ui-warning-soft: var(--hraness-palette-warning-soft);
  --ui-info: var(--hraness-palette-info);
  --ui-info-foreground: var(--hraness-palette-info-foreground);
  --ui-info-soft: var(--hraness-palette-info-soft);
  --ui-chart-1: var(--hraness-palette-chart1);
  --ui-chart-2: var(--hraness-palette-chart2);
  --ui-chart-3: var(--hraness-palette-chart3);
  --ui-chart-4: var(--hraness-palette-chart4);
  --ui-chart-5: var(--hraness-palette-chart5);
  --aurora-rose: var(--hraness-palette-chart1);
  --aurora-mint: var(--hraness-palette-chart2);
  --aurora-cyan: var(--hraness-palette-chart3);
  --aurora-gold: var(--hraness-palette-chart4);
  --aurora-violet: var(--hraness-palette-chart5);
  --canvas-background: var(--hraness-palette-background);
}

.hraness-palette[data-theme="dark"] { color-scheme: dark; }
.hraness-palette[data-theme="light"] { color-scheme: light; }

@media (forced-colors: active) {
  /* The pinned StyleX serializer doubles createTheme classes. Outrank those
   * unlayered rules even when a compiler consumer loads its final union last. */
  :root.hraness-palette.hraness-palette[data-palette],
  .hraness-palette.hraness-palette[data-palette],
  :root[data-palette][data-theme],
  [data-palette][data-theme],
  :root[data-palette][data-palette]:not([data-theme]),
  [data-palette]:not([data-theme]),
  :root.hraness-palette.hraness-palette[data-theme],
  .hraness-palette.hraness-palette[data-theme] {
    --hraness-palette-background: Canvas;
    --hraness-palette-foreground: CanvasText;
    --hraness-palette-muted: CanvasText;
    --hraness-palette-surface: Canvas;
    --hraness-palette-surface-raised: Canvas;
    --hraness-palette-surface-hover: Canvas;
    --hraness-palette-card: Canvas;
    --hraness-palette-card-foreground: CanvasText;
    --hraness-palette-popover: Canvas;
    --hraness-palette-popover-foreground: CanvasText;
    --hraness-palette-line: CanvasText;
    --hraness-palette-control-border: ButtonText;
    --hraness-palette-primary: Highlight;
    --hraness-palette-primary-foreground: HighlightText;
    --hraness-palette-focus: Highlight;
  }
}

.hraness-marketing-related__card .hraness-foil-mark { --hraness-foil-size: 28px; }
.hraness-marketing-related__card[data-product-id="peopleblade"] .hraness-foil-mark__paint { --hraness-foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 582 714' width='582' height='714'%3E%3Cpath d='M0 0 C1.8342 -0.0041 3.6683 -0.0094 5.5025 -0.0159 C10.4178 -0.0294 15.3329 -0.0244 20.2482 -0.0148 C25.4322 -0.0071 30.6162 -0.0143 35.8003 -0.019 C44.4989 -0.0244 53.1974 -0.0173 61.896 -0.0029 C71.9038 0.0134 81.9114 0.0081 91.9192 -0.0084 C100.5661 -0.0221 109.213 -0.0239 117.8599 -0.0161 C123.0006 -0.0115 128.1411 -0.0107 133.2818 -0.0207 C138.1174 -0.0295 142.9528 -0.0232 147.7883 -0.006 C149.5461 -0.0021 151.3039 -0.0031 153.0617 -0.0098 C168.4373 -0.063 183.8012 1.3406 198.5564 5.9507 C199.3683 6.2019 200.1801 6.4531 201.0166 6.7119 C236.0458 18.0878 265.8299 42.7562 282.9712 75.4309 C295.9771 101.1168 297.851 127.4027 297.8108 155.6902 C297.8122 157.3341 297.8139 158.978 297.8161 160.6219 C297.8206 165.0369 297.8189 169.452 297.8157 173.867 C297.8132 178.5544 297.8155 183.2418 297.8171 187.9292 C297.8189 195.8245 297.8166 203.7197 297.8118 211.615 C297.807 219.6238 297.8069 227.6326 297.8118 235.6414 C297.8266 261.2239 297.8066 286.8059 297.6814 312.3882 C297.6749 313.7519 297.6684 315.1157 297.6617 316.5208 C297.6259 323.2197 297.5693 329.9176 297.4643 336.6158 C297.438 338.3963 297.4173 340.1768 297.4036 341.9573 C297.167 369.3277 287.9098 393.6266 268.6814 413.3882 C268.0975 414.0224 267.5135 414.6566 266.9119 415.3101 C252.6133 430.4458 227.6784 442.0669 206.8689 442.7007 C182.2979 442.2138 155.9826 435.3489 137.9314 417.9155 C132.3951 411.6968 129.5723 405.394 129.4314 397.0132 C129.4056 396.0979 129.3798 395.1827 129.3533 394.2397 C129.9744 388.8422 132.8702 384.9716 136.1814 380.8257 C158.3764 350.634 169.97 309.2819 164.365 272.1343 C159.7776 246.9954 148.4789 224.9633 127.5564 209.7632 C113.1898 200.2022 97.0408 194.0754 79.6814 193.3882 C78.9221 193.3482 78.1629 193.3083 77.3806 193.2671 C51.4748 192.5463 27.1079 202.1015 8.3494 219.6694 C-9.4447 237.8022 -16.4965 262.0242 -16.5588 286.8606 C-16.5684 289.156 -16.5994 291.4504 -16.6311 293.7456 C-16.7321 307.695 -14.7437 321.0955 -10.5686 334.4507 C-10.3111 335.2852 -10.0536 336.1197 -9.7883 336.9795 C-4.6681 353.0994 2.8006 370.3428 13.6814 383.5132 C17.9526 388.7011 18.9412 393.7551 18.5564 400.3882 C17.3196 409.8604 11.9337 416.9608 4.4939 422.7007 C-14.6046 436.6305 -40.677 444.6381 -64.3186 442.3882 C-83.9288 439.1014 -103.5336 429.6504 -118.3186 416.3882 C-118.9038 415.8842 -119.4891 415.3801 -120.092 414.8608 C-138.0353 398.3076 -149.9902 372.4287 -151.518 348.2303 C-151.6094 344.7179 -151.6427 341.2097 -151.6533 337.696 C-151.665 336.3666 -151.6766 335.0371 -151.6886 333.6673 C-151.7183 330.031 -151.7395 326.3948 -151.7563 322.7584 C-151.7759 318.8657 -151.8056 314.973 -151.8337 311.0802 C-151.8798 304.4805 -151.9181 297.8808 -151.9517 291.281 C-151.9854 284.6699 -152.0266 278.059 -152.0767 271.448 C-152.3414 236.3346 -152.4352 201.2245 -152.0495 166.1116 C-152.026 163.8123 -152.0075 161.5131 -151.9905 159.2138 C-151.6687 120.1597 -151.6687 120.1597 -145.7561 101.4507 C-145.5063 100.6455 -145.2566 99.8403 -144.9993 99.0107 C-138.6116 79.4056 -128.6137 62.7145 -114.4827 47.7085 C-112.1933 45.3221 -112.1933 45.3221 -109.8811 42.2632 C-105.8421 37.7316 -101.0821 34.13 -96.3186 30.3882 C-95.6586 29.8506 -94.9986 29.3131 -94.3186 28.7593 C-81.2899 18.4542 -65.418 11.0636 -49.6311 6.1382 C-48.9033 5.9041 -48.1754 5.6699 -47.4255 5.4287 C-31.9823 0.8673 -15.9918 -0.0611 0 0 Z ' transform='translate%28217.318603515625,48.61181640625%29' fill='%232474d4'/%3E%3Cpath d='M0 0 C14.2982 10.7598 29.82 17.0506 47.4624 20.0596 C48.4624 20.2321 49.4624 20.4047 50.4927 20.5825 C55.4009 21.1724 60.223 21.2142 65.1616 21.2354 C67.2808 21.2586 69.3999 21.2827 71.519 21.3076 C74.8138 21.3424 78.1082 21.3719 81.4031 21.3855 C112.8685 21.5403 140.3952 27.9521 163.4624 51.0596 C178.7774 66.6256 189.213 88.311 189.9624 110.3096 C189.5342 122.8696 184.3729 134.7285 175.2124 143.3721 C167.1734 150.0826 157.8421 154.3067 147.3177 154.314 C145.1563 154.3228 145.1563 154.3228 142.9512 154.3317 C141.3565 154.3281 139.7618 154.3243 138.1671 154.3203 C136.4696 154.3233 134.7721 154.3272 133.0746 154.3319 C128.41 154.3422 123.7455 154.34 119.0809 154.3357 C114.0501 154.3332 109.0193 154.3422 103.9885 154.3497 C94.1319 154.3625 84.2754 154.3643 74.4189 154.3619 C66.4071 154.3601 58.3953 154.3619 50.3835 154.3661 C49.2438 154.3667 48.104 154.3673 46.9298 154.3679 C44.6144 154.3692 42.2991 154.3704 39.9837 154.3716 C18.2619 154.3825 -3.46 154.3803 -25.1818 154.3742 C-45.0528 154.369 -64.9237 154.3803 -84.7947 154.3993 C-105.1962 154.4187 -125.5977 154.4269 -145.9992 154.4232 C-157.4538 154.4213 -168.9084 154.4238 -180.363 154.4379 C-190.1159 154.4498 -199.8687 154.4512 -209.6216 154.4391 C-214.597 154.4332 -219.5723 154.4321 -224.5476 154.4441 C-229.105 154.4549 -233.6621 154.4519 -238.2194 154.4378 C-239.8654 154.4352 -241.5115 154.4376 -243.1575 154.4456 C-257.6287 154.5111 -269.871 152.5877 -280.7251 142.3721 C-290.0146 132.5275 -294.106 121.8066 -294.0232 108.3411 C-293.3118 87.8785 -284.3747 68.9485 -270.5376 54.0596 C-269.7332 53.1869 -268.9288 52.3142 -268.1001 51.415 C-250.9993 33.5928 -227.2514 22.5687 -202.499 21.8713 C-195.662 21.7455 -188.8237 21.6921 -181.9856 21.6787 C-164.2368 21.6204 -147.5378 19.6475 -130.6626 13.8096 C-129.7931 13.5129 -128.9237 13.2163 -128.0278 12.9106 C-117.7216 9.2508 -108.932 3.7937 -100.0376 -2.5029 C-68.2684 -24.7836 -30.6695 -23.098 0 0 Z ' transform='translate%28343.53759765625,509.9404296875%29' fill='%232474d4'/%3E%3C/svg%3E"); }
.hraness-marketing-related__card[data-product-id="message-like-me"] .hraness-foil-mark__paint { --hraness-foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 590 588' width='590' height='588'%3E%3Cpath d='M0 0 C3.7021 0.9255 6.4331 2.1039 9.8203 3.8086 C33.3452 15.4968 57.4529 25.6075 82.8125 32.625 C86.8765 33.9594 89.1312 34.8704 92 38 C94.1691 42.578 95.597 47.0155 96.75 51.9375 C105.3381 84.8912 129.1005 113.746 158.0735 131.0774 C177.2853 142.2466 197.9348 149.8729 220 153 C221.3651 153.1953 221.3651 153.1953 222.7578 153.3945 C260.3492 157.7055 302.6036 147.646 332.6899 124.0808 C335.2718 121.9568 337.7934 119.7763 340.2803 117.542 C341.9152 116.076 343.5857 114.65 345.2578 113.2266 C362.5093 98.1812 375.0458 78.2509 381.7461 56.4062 C382.0482 55.4221 382.3503 54.438 382.6616 53.4241 C383.2507 51.4713 383.8233 49.5135 384.3774 47.5505 C385.9755 42.1672 387.2446 38.3557 392 35 C395.584 33.3897 399.2571 32.186 403 31 C404.083 30.6466 405.1659 30.2933 406.2817 29.9292 C408.6243 29.1663 410.9682 28.4075 413.3132 27.6523 C433.7067 21.0444 453.5375 13.4298 472.3054 2.9961 C477.7181 0 477.7181 0 481 0 C481.0467 12.693 481.082 25.3859 481.1036 38.0789 C481.114 43.9748 481.128 49.8707 481.1509 55.7666 C481.1729 61.4725 481.1846 67.1783 481.1898 72.8843 C481.1934 75.0448 481.2005 77.2053 481.2115 79.3658 C481.412 120.7375 472.888 158.7884 447 192 C446.3194 192.9023 445.6388 193.8047 444.9375 194.7344 C416.3304 231.3601 374.5581 253.3259 329 260 C320.2884 261.0318 311.6364 261.154 302.8718 261.1611 C301.3938 261.1661 299.9157 261.1711 298.3928 261.1762 C294.3653 261.1892 290.3377 261.1957 286.3102 261.2002 C283.7817 261.2031 281.2532 261.2072 278.7248 261.2117 C270.7787 261.2253 262.8327 261.235 254.8867 261.2389 C245.7802 261.2434 236.6739 261.2609 227.5675 261.2899 C220.4859 261.3117 213.4043 261.3216 206.3227 261.3229 C202.1135 261.324 197.9044 261.3296 193.6952 261.3478 C163.0583 261.472 136.0157 258.5483 107.2949 247.679 C106.4164 247.3466 105.5379 247.0143 104.6328 246.6719 C103.8582 246.3738 103.0837 246.0757 102.2856 245.7686 C97.5982 244.1082 97.5982 244.1082 92.8005 244.7058 C92.0504 245.0955 91.3002 245.4852 90.5273 245.8867 C89.6464 246.3248 88.7654 246.7628 87.8577 247.2141 C86.894 247.7003 85.9304 248.1865 84.9375 248.6875 C61.3112 260.0322 35.6255 267.7281 10 273 C8.7867 273.2523 8.7867 273.2523 7.5488 273.5098 C-4.0855 275.8955 -15.1202 277.1809 -27 277 C-25.3641 273.7281 -24.3294 272.1014 -21.9375 269.5625 C2.4619 242.1765 15.288 203.3126 13.875 166.75 C13.0762 157.4147 10.4775 148.7963 7.7305 139.8789 C2.7207 123.3966 -0.1826 106.9524 -0.1135 89.6851 C-0.1137 88.7082 -0.1138 87.7314 -0.114 86.725 C-0.1133 83.5328 -0.1055 80.3406 -0.0977 77.1484 C-0.0958 74.9207 -0.0944 72.693 -0.0934 70.4652 C-0.0896 64.6292 -0.0798 58.7932 -0.0687 52.9572 C-0.0584 46.991 -0.0539 41.0248 -0.0488 35.0586 C-0.0381 23.3724 -0.0211 11.6862 0 0 Z ' transform='translate%2868,270%29' fill='%232474d4'/%3E%3Cpath d='M0 0 C6.8496 0.0001 13.699 -0.0137 20.5486 -0.0308 C25.91 -0.042 31.2714 -0.0439 36.6329 -0.0434 C39.1574 -0.0446 41.6819 -0.0489 44.2064 -0.0567 C63.3887 -0.1108 82.8493 0.0066 101.6213 4.4353 C102.5676 4.6515 103.5138 4.8676 104.4888 5.0903 C119.6158 8.6599 133.1818 13.7911 146.8713 21.1853 C147.5444 21.54 148.2174 21.8946 148.9109 22.26 C162.6556 29.509 174.5849 38.5065 185.8713 49.1853 C186.6925 49.9536 187.5136 50.7219 188.3596 51.5134 C220.1762 82.1919 235.9745 125.1447 237.4338 168.6853 C237.477 169.8893 237.5202 171.0933 237.5647 172.3337 C237.6701 175.2842 237.7722 178.2347 237.8713 181.1853 C177.1878 214.3549 177.1878 214.3549 158.8323 210.5564 C151.6117 207.9496 146.6734 204.9021 142.6995 198.2126 C140.0778 192.4954 139.0856 186.4481 137.9338 180.3103 C134.2729 160.8391 124.8987 144.1095 108.5588 132.4353 C95.1947 123.6496 79.3058 116.1065 63.0003 116.0381 C61.8247 116.031 60.649 116.0238 59.4377 116.0164 C58.1561 116.0138 56.8746 116.0111 55.5542 116.0083 C53.519 115.9984 53.519 115.9984 51.4426 115.9884 C46.9462 115.9687 42.4498 115.957 37.9534 115.947 C36.3982 115.943 34.8431 115.9389 33.288 115.9347 C25.9709 115.9156 18.6539 115.9014 11.3368 115.8931 C2.9325 115.8833 -5.4714 115.8571 -13.8755 115.8166 C-20.3956 115.7862 -26.9156 115.7716 -33.4357 115.7683 C-37.3175 115.7659 -41.1989 115.7572 -45.0805 115.7318 C-74.4696 115.5658 -100.5287 118.1185 -122.9412 139.3728 C-135.7309 152.8595 -143.2102 169.5004 -146.0037 187.7478 C-147.1841 194.3582 -149.109 200.4944 -154.2458 205.072 C-161.4566 210.0856 -168.2706 212.294 -177.1287 211.1853 C-194.7966 206.8473 -211.4584 197.5573 -227.7537 189.7478 C-229.0416 189.1324 -230.3295 188.5169 -231.6565 187.8828 C-232.8565 187.3033 -234.0564 186.7238 -235.2927 186.1267 C-236.3699 185.6079 -237.4471 185.0892 -238.5569 184.5547 C-241.1287 183.1853 -241.1287 183.1853 -243.1287 181.1853 C-243.5975 177.6056 -243.4606 173.9795 -243.4412 170.3728 C-243.4355 169.2935 -243.4299 168.2141 -243.4241 167.1021 C-242.7275 120.0562 -221.4831 78.9885 -188.5093 46.136 C-158.1217 16.7697 -115.7152 1.8102 -73.9607 0.6345 C-73.231 0.6137 -72.5012 0.5929 -71.7494 0.5714 C-47.8402 -0.0871 -23.9161 -0.0019 0 0 Z ' transform='translate%28311.128662109375,40.814697265625%29' fill='%232474d4'/%3E%3Cpath d='M0 0 C0.8909 0.1924 1.7818 0.3848 2.6997 0.583 C5.9365 1.335 9.1574 2.1376 12.3765 2.9619 C21.6086 5.3006 30.8581 7.0572 40.2773 8.4609 C41.3569 8.6238 42.4364 8.7867 43.5486 8.9546 C57.6085 10.9603 71.6517 11.4188 85.8398 11.3984 C86.6237 11.3978 87.4076 11.3972 88.2152 11.3966 C114.4849 11.342 140.4586 9.1714 165.5789 1.0537 C170.2085 -0.3972 173.6011 -1.2844 178.4023 0.2109 C181.6798 3.0571 182.3517 4.5985 182.7109 8.9453 C181.6692 23.3449 168.4745 36.5795 158.5898 45.9609 C136.4483 65.0292 107.503 74.7578 78.4023 73.2109 C50.8408 70.8727 27.0272 60.8078 7.4023 41.2109 C6.5889 40.4091 5.7755 39.6073 4.9375 38.7812 C-2.2872 31.2478 -10.9632 19.8732 -11.9727 9.2734 C-11.5585 4.7868 -10.8308 3.2593 -7.5977 0.2109 C-4.3471 -0.8726 -3.2573 -0.7085 0 0 Z ' transform='translate%28222.59765625,310.7890625%29' fill='%232474d4'/%3E%3Cpath d='M0 0 C8.176 4.7656 13.9158 12.0195 16.9375 21 C19.2756 30.367 18.3166 38.3415 14 47 C8.5855 55.3913 1.5736 62.0972 -8.3633 64.5938 C-19.6329 66.3301 -28.7001 64.7079 -38.1875 58.4375 C-45.0857 52.9105 -49.7749 44.7121 -51 36 C-51.9467 24.3944 -49.4287 15.7487 -42.3164 6.4883 C-31.427 -5.2091 -13.8754 -7.7489 0 0 Z ' transform='translate%28263,204%29' fill='%232474d4'/%3E%3Cpath d='M0 0 C6.2372 4.9898 10.0487 11.8918 12.75 19.3125 C14.0462 31.4216 12.944 41.3809 5.25 51.0625 C-1.0317 57.7095 -9.4841 61.7212 -18.5742 62.5156 C-30.0556 62.7434 -37.861 59.2704 -46.1602 51.5312 C-52.6985 44.7569 -55.406 37.1682 -55.75 27.8125 C-55.37 17.4666 -51.6937 8.5864 -44.25 1.3125 C-30.4055 -9.0597 -14.3198 -9.718 0 0 Z ' transform='translate%28391.25,206.6875%29' fill='%232474d4'/%3E%3C/svg%3E"); }
.hraness-marketing-related__card[data-product-id="soulscrape"] .hraness-foil-mark__paint { --hraness-foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 860 855' width='860' height='855'%3E%3Cpath d='M0 0 C0.0006 0.9049 0.0012 1.8099 0.0018 2.7422 C0.0377 56.3864 0.0944 110.0304 0.1779 163.6745 C0.1879 170.1169 0.1978 176.5593 0.2075 183.0017 C0.2095 184.2843 0.2114 185.5668 0.2134 186.8882 C0.2444 207.6499 0.2614 228.4116 0.2732 249.1733 C0.2856 270.4798 0.3131 291.7862 0.3546 313.0927 C0.3797 326.2379 0.3931 339.3829 0.3914 352.5281 C0.3914 361.5446 0.406 370.561 0.4322 379.5775 C0.4468 384.778 0.455 389.9784 0.4458 395.1789 C0.4375 399.9458 0.4477 404.7123 0.4723 409.4792 C0.478 411.1981 0.477 412.917 0.4685 414.6359 C0.4142 426.6193 0.9169 438.2043 8.5625 448 C15.0469 454.4844 21.9318 457.2453 31.0625 457.5625 C40.961 457.1411 47.4548 453.9788 54.8945 447.5859 C61.5862 439.3672 64.3051 428.6731 67.5156 418.7578 C68.0378 417.1652 68.5609 415.5728 69.0848 413.9807 C70.1784 410.6556 71.2688 407.3294 72.3572 404.0026 C74.7064 396.8343 77.1082 389.6837 79.5079 382.5323 C80.8372 378.5685 82.1625 374.6035 83.4878 370.6384 C83.7535 369.8436 84.0192 369.0487 84.2929 368.2297 C94.2152 338.5384 104.0104 308.8153 113.4679 278.972 C116.4012 269.7197 119.3793 260.4822 122.375 251.25 C122.6179 250.5012 122.8608 249.7525 123.1111 248.981 C127.2809 236.1374 131.5222 223.3181 135.8281 210.5195 C137.1536 206.571 138.444 202.6167 139.6719 198.6367 C147.1026 174.717 162.235 155.0117 184.5 143.0625 C201.9303 134.1289 220.5247 131.5333 239.9146 131.6123 C241.5452 131.6081 243.1758 131.6027 244.8063 131.596 C249.2351 131.5817 253.6637 131.5857 258.0925 131.5932 C262.8887 131.5979 267.6848 131.5854 272.481 131.5751 C281.8551 131.558 291.2292 131.5571 300.6033 131.5624 C308.2243 131.5664 315.8454 131.5649 323.4664 131.5596 C324.5539 131.5589 325.6413 131.5581 326.7617 131.5573 C328.9712 131.5558 331.1807 131.5543 333.3902 131.5527 C354.0717 131.539 374.753 131.5444 395.4345 131.5559 C414.3392 131.5659 433.2439 131.5529 452.1486 131.529 C471.5889 131.5046 491.029 131.495 510.4693 131.5016 C521.3722 131.5051 532.275 131.5029 543.1779 131.4854 C552.4544 131.4707 561.7307 131.47 571.0071 131.4875 C575.7359 131.496 580.4644 131.4981 585.1932 131.4828 C589.5283 131.4689 593.8629 131.4738 598.198 131.493 C600.495 131.4986 602.792 131.4846 605.089 131.4697 C621.5483 131.5861 636.0053 136.7553 648.1914 148.0547 C660.0758 160.8375 664.2614 174.9782 664.4961 192.082 C663.632 205.8729 657.0813 219.8836 652.625 232.875 C651.908 234.9735 651.1911 237.0721 650.4744 239.1707 C645.7865 252.8775 641.0232 266.557 636.2146 280.222 C630.8571 295.4523 625.6545 310.7331 620.4744 326.0246 C615.2598 341.4131 609.9638 356.7702 604.5873 372.1028 C599.7606 385.8741 595.0338 399.6774 590.352 413.4987 C587.8792 420.7944 585.3958 428.0866 582.9126 435.3789 C581.708 438.9167 580.5069 442.4557 579.3101 445.9961 C577.8696 450.2534 576.4056 454.5022 574.9375 458.75 C574.3492 460.5033 574.3492 460.5033 573.749 462.292 C565.4844 485.9441 549.6238 503.7157 528 516 C526.7419 516.7219 525.4837 517.4438 524.1875 518.1875 C513.7238 523.2173 502.1037 526.1559 490.5427 526.1342 C489.6891 526.1366 488.8355 526.1389 487.956 526.1413 C485.0822 526.148 482.2084 526.1476 479.3346 526.1472 C477.2587 526.1505 475.1828 526.1542 473.1068 526.1583 C467.3912 526.1683 461.6756 526.172 455.96 526.1747 C449.7995 526.1786 443.6391 526.1882 437.4786 526.1969 C422.5943 526.2167 407.71 526.2267 392.8257 526.2356 C385.816 526.24 378.8064 526.2454 371.7967 526.2506 C348.4934 526.2676 325.1902 526.2822 301.8869 526.2894 C300.3799 526.2899 298.8728 526.2903 297.3658 526.2908 C296.6185 526.291 295.8712 526.2913 295.1012 526.2915 C291.3149 526.2927 287.5287 526.2939 283.7424 526.2952 C282.6153 526.2955 282.6153 526.2955 281.4655 526.2959 C257.1173 526.3038 232.7692 526.3272 208.421 526.3597 C182.6686 526.3941 156.9162 526.4137 131.1637 526.417 C117.13 526.4192 103.0964 526.4279 89.0628 526.4535 C77.1094 526.4752 65.1561 526.4832 53.2027 526.4735 C47.1066 526.469 41.0107 526.4708 34.9146 526.4903 C29.3262 526.5079 23.7381 526.5069 18.1497 526.4914 C16.1354 526.489 14.1211 526.4933 12.1069 526.5052 C-14.2065 526.651 -35.1997 518.9563 -54.6875 500.8125 C-71.473 483.2682 -78.4877 460.8815 -78.3877 437.1493 C-78.3919 435.5855 -78.3973 434.0217 -78.404 432.4578 C-78.4184 428.1949 -78.4142 423.9322 -78.4068 419.6692 C-78.4021 415.0583 -78.4146 410.4475 -78.4249 405.8366 C-78.442 396.8169 -78.4429 387.7973 -78.4376 378.7775 C-78.4336 371.4429 -78.435 364.1083 -78.4404 356.7737 C-78.4411 355.7279 -78.4419 354.6822 -78.4427 353.6047 C-78.4442 351.4799 -78.4457 349.3551 -78.4473 347.2303 C-78.461 327.3257 -78.4556 307.4211 -78.4441 287.5165 C-78.4342 269.3274 -78.4471 251.1384 -78.471 232.9493 C-78.4954 214.2482 -78.505 195.5472 -78.4984 176.8461 C-78.4949 166.3567 -78.4971 155.8673 -78.5146 145.3779 C-78.5294 136.4487 -78.5299 127.5197 -78.5125 118.5905 C-78.5041 114.0397 -78.5018 109.4892 -78.5172 104.9384 C-78.5311 100.7634 -78.5262 96.5889 -78.507 92.4139 C-78.5015 90.2077 -78.5154 88.0014 -78.5303 85.7952 C-78.3575 62.1675 -68.2924 41.7375 -52.25 24.8125 C-38.9968 12.0312 -19.1059 0 0 0 Z ' transform='translate%28137,269%29' fill='%232474d4'/%3E%3Cpath d='M0 0 C0.9615 -0.0017 1.9231 -0.0034 2.9137 -0.0052 C6.1258 -0.0085 9.3377 0.0025 12.5498 0.0135 C14.8562 0.014 17.1627 0.0137 19.4691 0.0126 C25.7247 0.012 31.9802 0.0238 38.2358 0.0377 C44.7755 0.0502 51.3151 0.0514 57.8548 0.0538 C70.236 0.06 82.6171 0.0764 94.9983 0.0965 C109.095 0.1188 123.1916 0.1298 137.2882 0.1399 C166.2837 0.1608 195.2792 0.1959 224.2747 0.2405 C224.2761 0.9248 224.2776 1.6091 224.2791 2.3142 C224.3163 19.0444 224.3755 35.7744 224.4586 52.5045 C224.4982 60.5954 224.5307 68.6862 224.5457 76.7771 C224.5588 83.8377 224.5859 90.898 224.6293 97.9584 C224.6517 101.6893 224.6655 105.4198 224.6666 109.1507 C224.6847 140.9345 228.9842 165.9069 252.2044 189.1741 C268.0014 203.8896 287.7742 208.5331 308.7383 208.5435 C310.0259 208.5519 311.3135 208.5604 312.6402 208.5691 C316.8556 208.5947 321.0709 208.6069 325.2864 208.6194 C328.2263 208.6356 331.1663 208.6528 334.1062 208.6709 C341.0284 208.7124 347.9506 208.7449 354.8729 208.7734 C368.035 208.8277 381.197 208.8954 394.359 208.9713 C398.6872 208.9942 403.0154 209.0104 407.3437 209.026 C409.9739 209.0394 412.6042 209.0531 415.2344 209.0669 C416.4462 209.0695 417.6581 209.0722 418.9067 209.0748 C420.5487 209.0852 420.5487 209.0852 422.2239 209.0957 C423.6593 209.1015 423.6593 209.1015 425.1237 209.1074 C427.2747 209.2405 427.2747 209.2405 428.2747 210.2405 C428.3753 213.1876 428.4108 216.1113 428.4041 219.0589 C428.4067 220.4466 428.4067 220.4466 428.4094 221.8623 C428.4138 224.9363 428.4109 228.0102 428.4075 231.0843 C428.4082 233.2104 428.4091 235.3365 428.4104 237.4626 C428.4119 241.9248 428.4097 246.3871 428.405 250.8494 C428.3993 256.5832 428.4026 262.317 428.4086 268.0508 C428.4122 272.443 428.4111 276.8351 428.4085 281.2273 C428.4078 283.3421 428.4086 285.4569 428.411 287.5717 C428.4135 290.5219 428.4097 293.472 428.4041 296.4221 C428.4061 297.3053 428.4081 298.1885 428.4102 299.0984 C428.3889 305.1262 428.3889 305.1262 427.2747 306.2405 C425.765 306.3356 424.2508 306.3606 422.7381 306.358 C421.2583 306.3591 421.2583 306.3591 419.7487 306.3603 C418.1033 306.3539 418.1033 306.3539 416.4246 306.3473 C414.6916 306.3465 414.6916 306.3465 412.9236 306.3456 C409.0186 306.3426 405.1137 306.3324 401.2088 306.3223 C398.4217 306.3187 395.6347 306.3157 392.8477 306.313 C386.8263 306.3064 380.805 306.2969 374.7836 306.2851 C366.057 306.2681 357.3304 306.2586 348.6037 306.2512 C334.4193 306.2393 320.2349 306.2243 306.0506 306.2061 C304.7759 306.2045 304.7759 306.2045 303.4755 306.2028 C291.4517 306.1872 279.4278 306.1686 267.404 306.1488 C266.1375 306.1467 266.1375 306.1467 264.8455 306.1446 C263.5806 306.1425 263.5806 306.1425 262.2901 306.1403 C248.1818 306.1172 234.0735 306.102 219.9651 306.093 C211.2735 306.0872 202.582 306.0749 193.8904 306.054 C187.2057 306.0386 180.521 306.0337 173.8362 306.0326 C171.1093 306.0305 168.3824 306.0249 165.6555 306.0156 C137.8119 305.9238 112.6263 307.8691 87.2747 320.2405 C86.2795 320.7239 85.2844 321.2073 84.259 321.7054 C55.0573 336.7651 35.7928 363.5347 25.8652 394.295 C25.4706 395.5403 25.0759 396.7856 24.6692 398.0686 C24.0048 400.1346 23.3405 402.2006 22.6759 404.2665 C21.9667 406.4752 21.2606 408.6849 20.5553 410.8949 C18.2753 418.0376 15.9724 425.1729 13.6721 432.309 C12.8612 434.8253 12.0511 437.3418 11.2409 439.8582 C5.2608 458.4256 -0.8133 476.962 -6.9128 495.4905 C-7.1842 496.3149 -7.4555 497.1393 -7.7351 497.9887 C-15.4127 521.3114 -23.1646 544.608 -31.0378 567.8655 C-31.6573 569.6986 -31.6573 569.6986 -32.2894 571.5688 C-40.3784 595.479 -40.3784 595.479 -44.7253 606.2405 C-45.3853 606.2405 -46.0453 606.2405 -46.7253 606.2405 C-46.8559 561.0479 -46.9835 515.8552 -47.1075 470.6626 C-47.1225 465.1981 -47.1375 459.7336 -47.1526 454.2691 C-47.1556 453.1822 -47.1586 452.0954 -47.1616 450.9756 C-47.203 435.9748 -47.2455 420.9741 -47.289 405.9734 C-47.4256 358.912 -47.5507 311.8507 -47.6455 264.7892 C-47.6476 263.7437 -47.6497 262.6982 -47.6519 261.621 C-47.654 260.5737 -47.6561 259.5265 -47.6583 258.4474 C-47.6615 256.8737 -47.6615 256.8737 -47.6647 255.2682 C-47.669 253.1442 -47.6733 251.0201 -47.6775 248.8961 C-47.7086 233.4313 -47.7457 217.9665 -47.7862 202.5018 C-47.8417 181.2855 -47.8864 160.0692 -47.9145 138.8529 C-47.9288 128.3079 -47.9479 117.763 -47.9803 107.2181 C-48.0076 98.3654 -48.0247 89.5127 -48.0284 80.66 C-48.0305 76.1596 -48.0376 71.6593 -48.0577 67.1589 C-48.0761 63.0379 -48.0804 58.917 -48.0738 54.7959 C-48.0738 52.6091 -48.0887 50.4223 -48.1041 48.2356 C-48.0511 33.887 -44.244 23.3329 -34.6628 12.4905 C-25.3018 3.6814 -12.5266 -0.082 0 0 Z M107.0833 57.9085 C98.2119 69.3473 96.4169 81.2386 97.2747 95.2405 C99.0931 105.3402 105.5786 113.175 113.8372 119.053 C120.0552 122.6135 127.4282 124.2879 134.2747 126.2405 C132.1129 134.7525 128.3004 141.013 120.7747 145.846 C112.982 149.8968 104.8371 151.6211 96.2747 153.2405 C96.1126 164.2781 96.6172 175.2285 97.2747 186.2405 C118.6506 185.672 137.9125 180.4848 154.2747 166.2405 C155.4297 165.3536 156.5847 164.4668 157.7747 163.553 C173.4116 149.8345 182.6503 126.6671 184.2747 106.2405 C185.2079 88.9247 184.8913 74.0974 173.2747 60.2405 C172.616 59.4464 171.9573 58.6524 171.2786 57.8343 C164.1819 50.0214 154.4648 44.8131 143.8411 43.9671 C129.3766 43.6002 117.3838 47.3786 107.0833 57.9085 Z M7.2747 65.2405 C2.5421 72.7029 1.5141 79.5674 2.2747 88.2405 C4.4969 96.9001 8.7254 102.825 16.3372 107.553 C23.0711 111.5062 29.6007 112.0637 37.2747 111.2405 C44.9462 108.8208 51.3838 104.0264 55.5559 97.1194 C59.3982 89.6406 60.5622 82.8334 58.6614 74.5764 C55.8359 66.5357 50.5779 60.7346 43.0247 56.803 C29.8182 51.3003 16.7099 54.4325 7.2747 65.2405 Z ' transform='translate%28219.72532653808594,58.759490966796875%29' fill='%232474d4'/%3E%3Cpath d='M0 0 C4.1468 3.5332 8.1688 7.0503 11.9961 10.9336 C12.8849 11.8301 13.7737 12.7267 14.6895 13.6504 C16.5176 15.5045 18.3457 17.3587 20.1738 19.2129 C24.7226 23.8011 29.3181 28.2147 34.2229 32.4187 C37.0202 34.9078 39.4898 37.6625 42 40.4375 C48.6089 47.6396 55.4679 54.5856 62.375 61.5 C63.3972 62.5267 64.4195 63.5533 65.4727 64.6111 C70.1886 69.3181 74.9379 73.8917 79.998 78.2251 C84.1943 81.9454 88.1075 85.9646 92.0625 89.9375 C92.9217 90.7928 93.7808 91.6481 94.666 92.5293 C98.4457 96.3148 102.1546 100.1094 105.6367 104.1719 C109.0837 108.1827 112.8527 111.7448 116.75 115.3125 C125.3456 123.2819 133.7777 131.2997 141.3867 140.2344 C143.5165 142.5653 145.8855 144.5059 148.3203 146.5078 C150.048 148.0426 151.4709 149.6538 152.9375 151.4375 C155.7053 154.7899 158.7974 157.5445 162.0977 160.3633 C164.5355 162.4607 166.8297 164.6262 169 167 C169 167.66 169 168.32 169 169 C151.8662 169.0703 134.7325 169.1231 117.5986 169.1554 C109.642 169.1709 101.6855 169.1919 93.729 169.2263 C86.0456 169.2596 78.3622 169.2769 70.6787 169.2846 C67.7524 169.2902 64.8261 169.301 61.8998 169.3172 C57.7902 169.3391 53.681 169.342 49.5713 169.3406 C48.3708 169.3514 47.1703 169.3621 45.9334 169.3733 C33.2093 169.3271 21.7533 166.8901 12.0352 158.2539 C4.4355 150.2552 -0.1305 140.2941 -0.1203 129.2736 C-0.1216 128.1308 -0.123 126.988 -0.1244 125.8106 C-0.1208 124.5662 -0.1172 123.3219 -0.1135 122.0398 C-0.1137 120.7223 -0.1138 119.4049 -0.114 118.0475 C-0.1133 113.6918 -0.1055 109.3362 -0.0977 104.9805 C-0.0958 101.9609 -0.0943 98.9413 -0.0934 95.9217 C-0.0903 88.7855 -0.0821 81.6494 -0.072 74.5133 C-0.0608 66.3875 -0.0553 58.2618 -0.0503 50.1361 C-0.0399 33.4241 -0.0223 16.712 0 0 Z ' transform='translate%28480,63%29' fill='%232474d4'/%3E%3C/svg%3E"); }
.hraness-marketing-related__card[data-product-id="kb"] .hraness-foil-mark__paint { --hraness-foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 476 476' width='476' height='476'%3E%3Cpath d='M0 0 C1.9697 -0.006 3.9395 -0.0128 5.9092 -0.0204 C11.2174 -0.0379 16.5254 -0.0427 21.8336 -0.044 C25.1614 -0.0454 28.4893 -0.0497 31.8171 -0.055 C43.4593 -0.0734 55.1014 -0.0817 66.7437 -0.0801 C77.5437 -0.0789 88.3436 -0.1 99.1437 -0.1316 C108.4606 -0.1578 117.7774 -0.1684 127.0943 -0.1672 C132.6392 -0.1667 138.184 -0.1722 143.7288 -0.1935 C148.9502 -0.2131 154.1712 -0.2129 159.3925 -0.1985 C161.2918 -0.1964 163.1911 -0.201 165.0903 -0.2132 C181.8536 -0.3141 198.2512 1.6948 213.9172 8.0405 C214.7871 8.3834 215.657 8.7263 216.5532 9.0796 C227.9628 13.7235 237.6313 20.3338 246.9797 28.2905 C248.0999 29.2019 249.2201 30.1133 250.3743 31.0522 C271.1422 48.9395 283.1401 78.7239 285.316 105.4156 C285.8834 115.8495 286.1239 126.2466 286.1091 136.698 C286.1105 138.3513 286.1123 140.0046 286.1144 141.6579 C286.1189 146.0899 286.1173 150.5219 286.1141 154.9539 C286.1115 159.6326 286.1139 164.3112 286.1154 168.9898 C286.1173 176.8445 286.1149 184.6992 286.1101 192.554 C286.1047 201.5789 286.1064 210.6038 286.1119 219.6288 C286.1165 227.4332 286.1171 235.2376 286.1145 243.0421 C286.113 247.6787 286.1127 252.3153 286.116 256.9519 C286.1663 337.9472 286.1663 337.9472 257.9797 372.2905 C257.4925 372.9428 257.0052 373.5951 256.5032 374.2671 C240.7197 394.6984 211.4307 406.0827 186.7417 409.3837 C177.2269 410.5163 167.7969 410.5723 158.2256 410.5493 C156.2968 410.552 154.3681 410.5556 152.4394 410.5599 C147.2494 410.569 142.0595 410.5656 136.8694 410.5592 C131.4099 410.5541 125.9504 410.5588 120.4909 410.562 C111.3279 410.5656 102.1649 410.5608 93.002 410.5513 C82.4421 410.5404 71.8823 410.5439 61.3224 410.5549 C52.2179 410.564 43.1134 410.5653 34.0089 410.56 C28.5877 410.5569 23.1666 410.5565 17.7454 410.5631 C12.6473 410.5689 7.5493 410.5648 2.4511 410.5533 C0.5917 410.5507 -1.2677 410.5514 -3.1272 410.5559 C-37.917 410.6314 -68.4469 401.3142 -93.7468 376.6304 C-116.5963 352.6137 -124.5195 322.0253 -124.4084 289.7578 C-124.4125 287.7453 -124.4179 285.7327 -124.4244 283.7202 C-124.4379 278.3006 -124.4328 272.8812 -124.4232 267.4617 C-124.4156 261.7593 -124.4227 256.057 -124.4274 250.3546 C-124.4328 240.7805 -124.4257 231.2064 -124.4114 221.6323 C-124.3951 210.6056 -124.4003 199.5789 -124.4169 188.5522 C-124.4305 179.0425 -124.4324 169.5329 -124.4245 160.0232 C-124.4199 154.3622 -124.4192 148.7012 -124.4291 143.0402 C-124.4379 137.713 -124.4317 132.386 -124.4145 127.0589 C-124.4105 125.1185 -124.4116 123.178 -124.4183 121.2376 C-124.5224 87.9217 -115.5499 57.4071 -92.0203 32.978 C-66.0209 8.2241 -34.9706 -0.0215 0 0 Z M-3.9004 52.7012 C-5.2485 52.7522 -5.2485 52.7522 -6.6238 52.8042 C-23.9009 53.6032 -41.1029 60.2537 -53.5515 72.4585 C-68.3689 89.4563 -71.3361 107.0327 -71.2791 128.8088 C-71.2818 130.5579 -71.2853 132.3069 -71.2897 134.056 C-71.2987 138.7794 -71.2953 143.5027 -71.2889 148.2262 C-71.2838 153.1915 -71.2886 158.1567 -71.2917 163.122 C-71.2953 171.4633 -71.2905 179.8045 -71.281 188.1458 C-71.2701 197.7529 -71.2736 207.36 -71.2847 216.9671 C-71.2938 225.2469 -71.295 233.5267 -71.2898 241.8066 C-71.2867 246.7376 -71.2862 251.6687 -71.2929 256.5998 C-71.2987 261.2432 -71.2945 265.8864 -71.2831 270.5298 C-71.2805 272.2211 -71.2811 273.9124 -71.2856 275.6037 C-71.3355 296.4809 -69.7126 315.9532 -57.0203 333.2905 C-56.2571 334.3424 -55.494 335.3943 -54.7078 336.478 C-40.8477 350.9827 -22.3347 357.8343 -2.4864 358.3894 C1.88 358.4348 6.2459 358.4488 10.6125 358.4517 C12.2907 358.4563 13.9689 358.4613 15.647 358.4667 C20.1867 358.4798 24.7264 358.4863 29.2662 358.4907 C32.1105 358.4937 34.9548 358.4978 37.7992 358.5022 C46.7218 358.5159 55.6444 358.5256 64.567 358.5294 C74.823 358.5339 85.0789 358.5514 95.3349 358.5804 C103.2911 358.6021 111.2473 358.6121 119.2036 358.6135 C123.9419 358.6145 128.6802 358.6203 133.4185 358.6383 C137.8838 358.6549 142.3488 358.6568 146.8141 358.6481 C148.4389 358.6474 150.0637 358.6516 151.6884 358.6616 C170.7813 358.7721 191.5529 356.6039 206.9797 344.2905 C207.8125 343.6318 208.6452 342.9731 209.5032 342.2944 C223.3142 330.6608 229.4488 314.8287 231.9797 297.2905 C232.383 291.0818 232.4017 284.8934 232.3838 278.6755 C232.3895 276.8569 232.3965 275.0383 232.4046 273.2198 C232.4224 268.325 232.4214 263.4305 232.4156 258.5358 C232.4125 254.4308 232.4187 250.3258 232.4247 246.2208 C232.4387 236.5281 232.4372 226.8355 232.4258 217.1428 C232.4143 207.1833 232.4284 197.2241 232.4552 187.2646 C232.4774 178.6748 232.484 170.085 232.4781 161.4951 C232.4747 156.3818 232.477 151.2686 232.4944 146.1554 C232.5099 141.3444 232.5057 136.5339 232.487 131.7229 C232.4834 129.9703 232.4864 128.2177 232.4969 126.4651 C232.615 105.2418 227.8981 87.5803 212.804 71.9507 C193.9725 54.2132 171.4225 52.6667 146.8547 52.5405 C144.0861 52.5131 141.3175 52.4845 138.5488 52.4551 C129.6426 52.371 120.7364 52.3302 111.8299 52.3002 C108.8384 52.29 105.8469 52.2789 102.8554 52.2677 C88.2946 52.2146 73.7338 52.1831 59.1728 52.1689 C56.9264 52.1667 54.68 52.1641 52.4336 52.1611 C45.9488 52.1528 39.464 52.1502 32.9791 52.156 C30.9965 52.1571 29.0139 52.1567 27.0313 52.1544 C16.7119 52.1447 6.4111 52.2761 -3.9004 52.7012 Z ' transform='translate%28157.020263671875,32.70947265625%29' fill='%23356a54'/%3E%3C/svg%3E"); }
.hraness-marketing-related__card[data-product-id="xcb"] .hraness-foil-mark__paint { --hraness-foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 502 470' width='502' height='470'%3E%3Cpath d='M0 0 C1.6602 1.6641 1.6602 1.6641 1.6602 3.6641 C3.6402 4.6541 3.6402 4.6541 5.6602 5.6641 C20.4671 20.7199 29.5281 43.0509 30.0352 64.0391 C29.8202 73.8845 28.0713 83.5113 24.9727 92.8516 C21.094 106.4682 22.5665 122.0215 29.1211 134.4297 C36.0925 146.5324 45.1588 154.3096 58.7227 158.2461 C64.4816 159.7795 69.9144 160.0925 75.8477 160.1641 C102.8242 160.9739 126.4805 169.3968 145.4883 188.8489 C160.0214 204.4015 169.8332 225.2334 170.6602 246.6641 C170.7117 247.5484 170.7633 248.4327 170.8164 249.3438 C171.5914 273.1748 162.6767 296.1867 146.6602 313.6641 C145.8274 314.5896 144.9947 315.5152 144.1367 316.4688 C128.0276 333.5227 105.3733 343.6553 81.9961 344.8516 C57.8866 345.2509 34.2512 337.6796 16.6602 320.6641 C14.6016 318.3577 12.6292 315.9844 10.6602 313.6016 C0.518 301.3802 -11.749 294.0165 -27.7344 292.4258 C-47.6289 291.8151 -63.5441 300.2399 -78.0273 313.0391 C-83.4457 319.1896 -87.4862 325.8147 -91.2148 333.1016 C-101.6858 353.0587 -119.4275 365.9767 -140.3398 373.6641 C-164.6778 381.1192 -189.9086 378.3103 -212.6211 367.0352 C-219.8442 363.0233 -226.159 358.1264 -232.3398 352.6641 C-232.9638 352.1239 -233.5877 351.5838 -234.2305 351.0273 C-251.0594 335.4173 -260.4004 312.3732 -261.3398 289.6641 C-261.4017 288.2616 -261.4636 286.8591 -261.5273 285.4141 C-261.0798 259.861 -250.501 238.185 -232.8711 220.1367 C-218.1748 206.18 -200.01 199.4321 -180.3594 195.9609 C-164.5396 193.1578 -151.4426 188.801 -140.9023 175.9297 C-131.5241 162.3312 -129.3286 147.6603 -132.1523 131.4766 C-133.9957 124.2989 -137.6876 118.0733 -141.208 111.6104 C-153.2285 89.2775 -155.2242 64.8414 -148.1523 40.6016 C-144.4463 29.3639 -139.0366 19.6302 -131.3398 10.6641 C-130.6502 9.8416 -129.9605 9.0192 -129.25 8.1719 C-95.966 -30.3182 -38.336 -31.2921 0 0 Z M-78.3398 166.6641 C-79.0579 167.1874 -79.7759 167.7108 -80.5156 168.25 C-90.0317 175.8259 -96.2921 186.7315 -98.3398 198.6641 C-99.7747 211.4378 -98.6385 221.1698 -90.8047 231.7344 C-82.6067 241.0402 -69.2722 245.0433 -57.2969 245.9805 C-40.5266 246.4493 -25.8113 242.0178 -13.4648 230.3516 C-4.0792 220.321 1.7977 207.5194 1.6602 193.6641 C0.8971 182.088 -4.5009 173.606 -12.7773 165.707 C-31.9895 150.39 -59.3196 152.4518 -78.3398 166.6641 Z ' transform='translate%28296.33984375,57.3359375%29' fill='%232474d4'/%3E%3C/svg%3E"); }
.hraness-marketing-related__card[data-product-id="gobstopper"] .hraness-foil-mark__paint { --hraness-foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='%232474d4' fill-rule='evenodd' d='M16 3a13 13 0 1 0 0 26 13 13 0 0 0 0-26Zm0 5a8 8 0 1 1 0 16 8 8 0 0 1 0-16Z'/%3E%3Cpath fill='%232474d4' fill-rule='evenodd' d='M16 11a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z'/%3E%3C/svg%3E"); }
.hraness-marketing-related__card[data-product-id="aicharts"] .hraness-foil-mark__paint { --hraness-foil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 497 580' width='497' height='580'%3E%3Cpath d='M0 0 C4.5926 2.0412 8.1413 4.9403 10.0974 9.6321 C11.153 13.5709 11.252 16.9948 11.2545 21.0745 C11.2577 21.8746 11.2609 22.6746 11.2642 23.4989 C11.2725 26.1845 11.2666 28.8698 11.2607 31.5554 C11.2637 33.4984 11.2676 35.4413 11.2723 37.3843 C11.2826 42.7274 11.2804 48.0704 11.2761 53.4135 C11.2736 59.1744 11.2826 64.9352 11.2901 70.696 C11.3029 81.9833 11.3047 93.2706 11.3023 104.5579 C11.3006 113.7301 11.3023 122.9022 11.3066 132.0744 C11.3072 133.3788 11.3078 134.6831 11.3084 136.027 C11.3096 138.6766 11.3108 141.3263 11.312 143.9759 C11.3229 168.8351 11.3207 193.6944 11.3146 218.5536 C11.3095 241.3074 11.3207 264.0613 11.3397 286.8151 C11.3591 310.167 11.3674 333.5189 11.3636 356.8709 C11.3617 369.9859 11.3642 383.101 11.3783 396.216 C11.3902 407.3802 11.3917 418.5443 11.3795 429.7085 C11.3736 435.4066 11.3726 441.1045 11.3845 446.8025 C11.3953 452.0166 11.3924 457.2304 11.3783 462.4445 C11.3756 464.3327 11.378 466.221 11.386 468.1092 C11.3961 470.6729 11.3877 473.2359 11.3747 475.7996 C11.3748 477.2245 11.3748 478.6494 11.3749 480.1174 C10.7722 486.3597 8.4424 491.5576 4 496 C-2.2337 499.2323 -8.0432 500.1244 -14.9937 500.127 C-16.7596 500.1312 -16.7596 500.1312 -18.5613 500.1355 C-19.8393 500.1335 -21.1173 500.1315 -22.4341 500.1294 C-23.7909 500.1311 -25.1478 500.1329 -26.5458 500.1347 C-30.2589 500.1383 -33.972 500.1375 -37.6852 500.1343 C-41.5833 500.1318 -45.4815 500.1341 -49.3796 500.1357 C-55.9315 500.1375 -62.4833 500.1351 -69.0352 500.1304 C-76.5843 500.1249 -84.1334 500.1267 -91.6825 500.1322 C-98.1821 500.1368 -104.6817 500.1374 -111.1813 500.1348 C-115.0549 500.1332 -118.9284 500.133 -122.802 500.1363 C-127.1312 500.1388 -131.4604 500.1349 -135.7896 500.1294 C-137.0554 500.1314 -138.3213 500.1334 -139.6256 500.1355 C-162.2287 500.0822 -162.2287 500.0822 -168 496 C-173.1303 490.6365 -175.2473 486.399 -175.2573 479.0035 C-175.2637 477.7932 -175.2702 476.5829 -175.2768 475.336 C-175.2722 473.3466 -175.2722 473.3466 -175.2674 471.3171 C-175.272 469.9055 -175.2765 468.494 -175.2812 467.0397 C-175.2934 463.1215 -175.2931 459.2033 -175.2908 455.2851 C-175.2904 451.0593 -175.3014 446.8336 -175.3109 442.6079 C-175.3275 434.3287 -175.333 426.0496 -175.3341 417.7704 C-175.3351 411.041 -175.3392 404.3116 -175.3455 397.5821 C-175.3631 378.5054 -175.3723 359.4287 -175.3708 340.352 C-175.3708 339.3234 -175.3707 338.2948 -175.3706 337.2351 C-175.3705 336.2053 -175.3704 335.1755 -175.3704 334.1144 C-175.3695 317.4235 -175.3887 300.7327 -175.4169 284.0419 C-175.4456 266.9062 -175.4594 249.7705 -175.4577 232.6348 C-175.457 223.0134 -175.4625 213.3921 -175.4841 203.7708 C-175.5023 195.5791 -175.5066 187.3875 -175.493 179.1957 C-175.4865 175.0165 -175.4864 170.8375 -175.5037 166.6582 C-175.5223 162.1266 -175.5099 157.5956 -175.4945 153.0639 C-175.5048 151.7443 -175.5151 150.4248 -175.5256 149.0652 C-175.4621 140.6512 -174.4364 135.3494 -169.1328 128.6367 C-163.5637 123.2302 -157.6165 118.4112 -151.4727 113.6836 C-148.4601 111.3555 -145.5003 108.9837 -142.5625 106.5625 C-138.2952 103.0523 -134.0016 99.5775 -129.6875 96.125 C-128.739 95.3657 -128.739 95.3657 -127.7712 94.5911 C-124.61 92.0661 -121.4386 89.5557 -118.2461 87.0703 C-112.4599 82.5654 -106.8087 78.0041 -101.3789 73.0742 C-97.9081 70.048 -94.2733 67.2413 -90.6401 64.4136 C-84.0244 59.259 -77.5299 53.9593 -71.0322 48.6572 C-67.0281 45.392 -63.0157 42.1369 -59.0049 38.8799 C-55.6437 36.1499 -52.2846 33.4173 -48.9297 30.6797 C-41.4115 24.5494 -33.8492 18.4858 -26.2031 12.5156 C-22.4596 9.5756 -18.7651 6.5785 -15.0859 3.5586 C-10.2234 -0.0747 -5.8826 -0.6852 0 0 Z ' transform='translate%28446,40%29' fill='%232474d4'/%3E%3Cpath d='M0 0 C3.6679 1.865 6.364 4.1543 7.7297 8.1176 C8.9926 14.7547 9.2612 21.138 9.1956 27.8841 C9.1928 29.0239 9.19 30.1636 9.1871 31.3379 C9.1758 35.0826 9.1506 38.8271 9.1255 42.5718 C9.1153 45.2241 9.1061 47.8764 9.0979 50.5287 C9.0803 56.0052 9.0579 61.4817 9.0321 66.9582 C8.9841 77.8612 8.9932 88.764 9.0014 99.6671 C9.0156 123.5448 8.9731 147.4224 8.9197 171.3 C8.89 184.9198 8.872 198.5394 8.8799 212.1592 C8.8868 224.2162 8.8729 236.273 8.8336 248.33 C8.8136 254.6637 8.8039 260.997 8.8196 267.3307 C8.8339 273.2398 8.8202 279.1481 8.785 285.057 C8.7771 287.2173 8.7793 289.3777 8.7926 291.538 C8.8092 294.4906 8.7889 297.4408 8.7595 300.3932 C8.7731 301.2411 8.7867 302.089 8.8007 302.9626 C8.6735 309.5577 6.3396 314.0559 2 319 C-7.55 325.4746 -19.6379 324.1476 -30.7581 324.1294 C-32.0896 324.1311 -33.4211 324.1329 -34.793 324.1347 C-39.1654 324.1391 -43.5378 324.1362 -47.9102 324.1328 C-50.9645 324.133 -54.0188 324.1345 -57.0731 324.1357 C-63.4622 324.1375 -69.8514 324.1351 -76.2405 324.1304 C-83.6051 324.1249 -90.9697 324.1267 -98.3344 324.1322 C-104.6829 324.1367 -111.0314 324.1374 -117.3799 324.1348 C-121.1606 324.1332 -124.9412 324.1334 -128.7219 324.1363 C-132.9384 324.1388 -137.1548 324.135 -141.3713 324.1294 C-142.6085 324.1314 -143.8457 324.1334 -145.1203 324.1355 C-165.6974 324.0855 -165.6974 324.0855 -173 318 C-178.036 312.6426 -179.1231 309.4609 -179.1404 302.2258 C-179.1462 300.7999 -179.1519 299.374 -179.1577 297.905 C-179.159 296.3197 -179.1601 294.7344 -179.1611 293.1492 C-179.1658 291.4836 -179.1708 289.818 -179.1762 288.1525 C-179.1893 283.6235 -179.1957 279.0945 -179.2002 274.5655 C-179.2031 271.7363 -179.2072 268.9072 -179.2117 266.0781 C-179.2254 257.2275 -179.235 248.377 -179.2389 239.5265 C-179.2434 229.3076 -179.2609 219.0889 -179.2899 208.8701 C-179.3115 200.9728 -179.3216 193.0755 -179.3229 185.1781 C-179.324 180.4607 -179.3299 175.7434 -179.3478 171.026 C-179.3642 166.5879 -179.3664 162.1501 -179.3576 157.712 C-179.3568 156.0842 -179.3612 154.4564 -179.3711 152.8287 C-179.3838 150.6042 -179.3761 148.3797 -179.3675 146.1552 C-179.369 144.911 -179.3704 143.6668 -179.3719 142.3849 C-178.7524 136.7469 -176.4525 132.9414 -172.1875 129.3125 C-171.3883 128.6319 -170.5891 127.9512 -169.7656 127.25 C-165.4882 123.7701 -161.1514 120.3681 -156.8008 116.9805 C-152.8689 113.9106 -148.9923 110.7756 -145.125 107.625 C-144.1264 106.8118 -144.1264 106.8118 -143.1077 105.9822 C-141.071 104.3224 -139.0353 102.6614 -137 101 C-129.3989 94.7955 -121.7974 88.6002 -114.0625 82.5625 C-108.0617 77.8724 -102.182 73.0496 -96.3167 68.1917 C-91.9254 64.5626 -87.4923 61.0032 -83 57.5 C-74.8715 51.1552 -66.9399 44.5782 -59 38 C-49.9396 30.4935 -40.8555 23.0442 -31.5703 15.8164 C-28.9107 13.734 -26.2895 11.6093 -23.6797 9.4648 C-22.9527 8.8681 -22.2258 8.2713 -21.4768 7.6565 C-20.0614 6.4915 -18.649 5.3228 -17.24 4.1501 C-11.4366 -0.6245 -7.3916 -1.9368 0 0 Z ' transform='translate%28219,216%29' fill='%232474d4'/%3E%3C/svg%3E"); }

: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%);
  --ghostget-action: #9a5d16;
  --ghostget-action-ink: #ffffff;
  --ghostget-action-bright: #d99a4a;
  --ghostget-action-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(--ghostget-action);
  --inverse: var(--code-background);
  --inverse-foreground: var(--code-foreground);
  --hraness-site-accent: var(--ghostget-action);
  --hraness-site-accent-ink: var(--ghostget-action-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%);
    --ghostget-action: #e6ad63;
    --ghostget-action-ink: #1a1206;
    --ghostget-action-bright: #f0be78;
    --ghostget-action-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 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);
  --ghostget-action-ink: var(--primary-foreground);
  --ghostget-action-soft: var(--accent);
  --ghostget-action-bright: #d99a4a;
  --hraness-site-accent: var(--ghostget-action);
  --hraness-site-accent-ink: var(--ghostget-action-ink);
  --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;
}

.hraness-site-shell > main {
  inline-size: 100%;
}

: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);
}

: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(--ghostget-action-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);
}

.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(--ghostget-action-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;
  min-inline-size: 0;
}

.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(--ghostget-action-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(--ghostget-action-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(--ghostget-action-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(--ghostget-action-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 {
  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: 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);
  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-family: var(--hraness-type-h4-font);
  font-size: var(--hraness-type-h4-size);
  font-weight: var(--hraness-type-h4-weight);
  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);
}

.registry-panel {
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--ghostget-action));
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--ghostget-action));
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.15rem;
  padding: 1.35rem;
}

.registry-panel h3 {
  font-family: var(--hraness-type-h3-font);
  font-size: var(--hraness-type-h3-size);
  font-weight: var(--hraness-type-h3-weight);
  letter-spacing: -0.035em;
  margin: 0;
}

.registry-panel p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0.55rem 0 0;
  max-width: 62ch;
}

.registry-panel p code {
  color: var(--foreground);
}

.registry-domain-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.registry-domain-strip a {
  background: color-mix(in srgb, var(--surface) 80%, var(--ghostget-action) 6%);
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--ghostget-action));
  border-radius: 999px;
  color: var(--foreground);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 0.32rem 0.72rem;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}

.registry-domain-strip a:hover {
  border-color: var(--ghostget-action);
  color: var(--ghostget-action);
}

.registry-domain-strip a:focus-visible {
  outline: 2px solid var(--ghostget-action);
  outline-offset: 2px;
}

.registry-domain-more a {
  border-style: dashed;
  color: var(--ghostget-action);
}

.registry-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.35rem 0 0;
}

.registry-stat {
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--ghostget-action));
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--ghostget-action));
  border-radius: var(--radius-md);
  min-width: 9.5rem;
  padding: 0.9rem 1.05rem;
}

.registry-stat dt {
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.registry-stat dd {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  margin: 0.25rem 0 0;
  text-transform: uppercase;
}

.provider-card {
  --provider-accent: var(--ghostget-action);
  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 {
  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-family: var(--hraness-type-h4-font);
  font-size: var(--hraness-type-h4-size);
  font-weight: var(--hraness-type-h4-weight);
  margin: 0;
}

.provider-channel-grid p,
.provider-action-grid p {
  color: var(--muted);
  font-size: 1rem;
  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(--ghostget-action-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);
  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;
}

.privacy-note {
  line-height: 1.5;
  max-width: 48rem;
}

.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;
}

:is(.guide-article, .blog-main) :is(h2, h3, h4)[id] {
  scroll-margin-block-start: calc(var(--hraness-sticky-offset, 5rem) + 2.5rem);
}

.guide-hero {
  padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.5rem, 8vw, 6rem);
}

.guide-hero h1 {
  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-family: var(--hraness-type-h2-font);
  font-size: var(--hraness-type-h2-size);
  font-weight: var(--hraness-type-h2-weight);
  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: 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) 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 {
  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);
  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%;
}

.claims-group {
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
  padding-top: 2rem;
  scroll-margin-top: 6rem;
}

.claims-group > h3 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.03em;
  margin: 0;
}

.claims-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.claim {
  border-top: 1px dashed var(--line);
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  scroll-margin-top: 6rem;
}

.claim > h4 {
  font-size: 0.95rem;
  margin: 0;
}

.claim > p,
.claim > ul {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0.6rem 0 0;
}

.claim > ul {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.35rem;
}

.claim > ul ul {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.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;
}

.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(--ghostget-action-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);
  line-height: 1.08;
  margin: 0 0 0.65rem;
}

.editorial-card-description {
  margin: 0;
}

.editorial-card a:hover h3 {
  color: var(--ghostget-action);
}

.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(--ghostget-action-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 {
    align-items: stretch;
    flex-direction: column;
  }
}

@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,
  .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;
}

/* The shared metallic foil mark: the brand icon's alpha is the mask for the
   pointer-tracked chrome paint layer — the same lockup every Hraness site
   carries in its header. */
.brand-mark {
  --hraness-foil-size: 1.25rem;
  --hraness-foil-mask: url("/marks/wrench.svg");
}

/* Labels: sentence case in the text face. Monospace stays with code. */
.eyebrow,
.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 {
  margin: 0 0 0.75rem;
}

/* Paragraph labels keep the same sentence-case label treatment at the 16px
 * reading floor. */
.prompt-label,
.skill-install-label {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

/* Headings: the shared per-level type tokens from design-kit typography.css.
 * h1 and h2 take the display face at or above 1.75rem; h3 and h4 take the
 * text face. The inert preview keeps its larger hero size below. */
.hero h1,
.guide-hero h1,
.preview-copy h1 {
  font-family: var(--hraness-type-h1-font);
  font-weight: var(--hraness-type-h1-weight);
  letter-spacing: -0.022em;
  line-height: 1.05;
  text-wrap: balance;
}

.section-heading h2,
.guide-article > section > h2,
.guide-callout h2,
.final-section h2 {
  font-family: var(--hraness-type-h2-font);
  font-weight: var(--hraness-type-h2-weight);
  letter-spacing: -0.022em;
  line-height: 1.05;
  text-wrap: balance;
}

.guide-hero h1 {
  font-size: var(--hraness-type-h1-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-type-h2-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(--hraness-type-h3-font);
  font-size: var(--hraness-type-h3-size);
  font-weight: var(--hraness-type-h3-weight);
  letter-spacing: -0.01em;
  margin: 0;
}

.editorial-card h3 {
  font-family: var(--hraness-type-h4-font);
  font-size: var(--hraness-type-h4-size);
  font-weight: var(--hraness-type-h4-weight);
  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);
  border-color: var(--ghostget-action);
  color: var(--ghostget-action-ink);
}

.button-primary:hover {
  background: color-mix(in srgb, var(--ghostget-action) 86%, black);
  border-color: color-mix(in srgb, var(--ghostget-action) 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);
  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);
  color: var(--ghostget-action-ink);
}

.skill-install-note {
  color: var(--muted);
  font-size: 1rem;
}

.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 {
  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);
}

.card p {
  color: var(--muted);
  font-size: 1rem;
  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);
}

/* 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(--hraness-type-h4-font);
  font-size: var(--hraness-type-h4-size);
  font-weight: var(--hraness-type-h4-weight);
  letter-spacing: -0.01em;
  margin: 0;
}

.provider-card h3 a {
  color: var(--foreground);
  text-decoration-line: underline;
}

.provider-card h3 a:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--ghostget-action);
}

.provider-card .provider-state {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.85rem;
}

.provider-card .provider-state strong {
  font-weight: 500;
}

.provider-capabilities {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
  margin-top: 0.3rem;
}

.provider-transport {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 1rem;
  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: 1rem;
  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: 1rem;
  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: 1rem;
}

.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;
}

/* 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);
}

/* Quiet homepage: the editorial layout with the sans display role, a flat
 * palette background, and no serif, texture, or material paint. */
[data-hraness-marketing-preset="editorial"] {
  --hraness-marketing-display-font: var(--font-text);
  --hraness-marketing-display-weight: 550;
  --hraness-marketing-h1-size: clamp(2.375rem, 1.7rem + 2.6vw, 3.75rem);
  --hraness-marketing-h1-leading: 1.06;
  --hraness-marketing-h1-tracking: -0.03em;
  --hraness-marketing-h2-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  --hraness-marketing-h2-leading: 1.15;
  --hraness-marketing-h2-tracking: -0.02em;
  --hraness-marketing-h3-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --hraness-marketing-hero-space: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
  --hraness-marketing-story-space: clamp(3.5rem, 7vw, 5rem);
}

[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(--foreground);
  --hraness-marketing-muted: var(--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);
}


/* The provider band continues the hero, so the hero ends closer to it. */
.ghostget-product-hero:has(+ .hraness-marketing-marquee) {
  padding-block-end: clamp(1rem, 2.5vw, 1.5rem);
}

.ghostget-product-hero .hraness-marketing-hero__copy {
  gap: 1.1rem;
}

.ghostget-product-hero .hero-explainer {
  color: var(--muted);
}

.ghostget-product-hero .hraness-marketing-hero__frame {
  min-inline-size: 0;
  margin-block-start: 0;
}


.hraness-marketing-header :where(a, button) {
  min-block-size: 2.75rem;
}

.hraness-marketing-header__nav a {
  display: inline-flex;
  align-items: center;
}

@media (forced-colors: none) {
  .hraness-marketing-action[data-emphasis="primary"] {
    color: var(--ghostget-action-ink);
  }
}

.hraness-marketing-page ::selection {
  background-color: var(--ghostget-action-soft);
  color: var(--foreground);
}

.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(--ghostget-action-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: 1rem;
  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(--foreground);
  font-family: var(--hraness-type-h2-font);
  font-size: var(--hraness-paper-section-heading-size);
  font-weight: var(--hraness-type-h2-weight);
  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;
}

/* Meaningful copy keeps the 16px reading floor at every width; the shared
 * marketing roles that default smaller are rebound here rather than in the
 * immutable preset. */
.hraness-marketing-primitive p,
.hraness-marketing-interface p,
.hraness-marketing-flow__detail,
.hraness-marketing-hero__boundary,
.hraness-marketing-cta__footnote,
.hraness-marketing-card__meta,
.hraness-marketing-related__label {
  font-size: 1rem;
}

/* 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);
}

.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) {
  /* The homepage links take their own row and scroll sideways if they
   * ever outgrow it, keeping full-size hit targets. */
  [data-hraness-marketing-preset="editorial"] .hraness-marketing-header__nav {
    flex-wrap: nowrap;
    gap: 0 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  [data-hraness-marketing-preset="editorial"] .hraness-marketing-header__nav::-webkit-scrollbar {
    display: none;
  }

  [data-hraness-marketing-preset="editorial"] .hraness-marketing-header__nav a {
    flex: 0 0 auto;
    font-size: 0.9375rem;
  }

  [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 {
    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-type-h2-weight);
  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;
}

/* Quieter reference pages and clear reading measures. */
:root[data-palette] .guide-hero h1 {
  letter-spacing: -0.05em;
  line-height: 1.04;
}

:root[data-palette] :is(.guide-article h2, .guide-callout h2) {
  letter-spacing: -0.035em;
  line-height: 1.14;
}

:root[data-palette] :is(.answer-lede, .guide-article section > p, .guide-list, .guide-steps) {
  max-inline-size: 70ch;
  text-wrap: pretty;
}

:root[data-palette] :is(.breadcrumbs, .provider-adapter summary span:last-child) {
  font-size: 0.875rem;
}

:root[data-palette] .review-note {
  font-size: 1rem;
}

:root[data-palette] :is(.breadcrumbs, .guide-article > section, .provider-attestation-group) {
  border: 0;
}

:root[data-palette] :is(.card, .provider-card, .provider-card-featured, .guide-callout, .demo-media video, .prompt-card) {
  border: 0;
  box-shadow: var(--elevation-low);
}

:root[data-palette] :is(.provider-mark, .editorial-card img) {
  border: 0;
}

:root[data-palette] .command-panel {
  border: 0;
  box-shadow: var(--elevation-low);
  max-inline-size: 100%;
  min-inline-size: 0;
}

:root[data-palette] :is(pre, .table-scroll) {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

:root[data-palette] .command-panel code {
  font-size: 0.875rem;
}

@media (forced-colors: active) {
  :root[data-palette] :is(.card, .provider-card, .provider-card-featured, .guide-callout, .prompt-card, .command-panel) {
    border: 1px solid CanvasText;
  }
}

/* Guide topbars keep their nav flush right and wrap it below the wordmark on
 * narrow screens. */
.topbar > nav { margin-inline-start: auto; }
@media (max-width: 48rem) {
  .hraness-marketing-header__actions { margin-inline-start: auto; }
  .topbar.guide-topbar { flex-direction: row; align-items: center; }
  .topbar > nav { order: 3; flex-basis: 100%; }
}

/* Quiet homepage details: small mono eyebrows, one text link beside the
 * primary action, top-aligned split sections, bounded prose, and hairline
 * link rows in place of card walls. */
.home-eyebrow {
  color: var(--ghostget-action);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin: 0;
  text-transform: uppercase;
}

.hero-heading-accent {
  color: var(--ghostget-action);
  display: block;
  font-weight: 400;
}

.home-text-link {
  align-items: center;
  color: var(--foreground);
  display: inline-flex;
  font-weight: 550;
  gap: 0.35rem;
  min-block-size: 2.75rem;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.home-text-link:hover {
  text-decoration-color: var(--ghostget-action);
}


.ghostget-product-hero .hraness-marketing-hero__summary {
  max-inline-size: 36rem;
}

.ghostget-product-hero .hraness-marketing-hero__boundary {
  color: var(--muted);
  font-size: 0.9375rem;
}

.hraness-marketing-section[data-layout="split"] {
  align-items: start;
}

.hraness-marketing-prose {
  max-inline-size: 42rem;
}

.hraness-marketing-prose > p {
  margin: 0;
}

.hraness-marketing-prose > p + p {
  margin-block-start: 1rem;
}

#measured .table-scroll {
  max-inline-size: 48rem;
}

#measured table :is(td, thead th:not(:first-child)) {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.home-reading .section {
  border-block-start: 1px solid var(--line);
  padding-block: var(--section-block);
}

.home-reading .card-grid {
  border-block-start: 1px solid var(--line);
  gap: 0 2.5rem;
  margin-top: 2rem;
}

.home-reading .card {
  background: none;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 1.1rem 0;
}

.home-reading .card h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  margin: 0 0 0.35rem;
}

.home-reading .card p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.home-reading .editorial-card {
  padding: 1.1rem 0;
}

.home-reading .editorial-card > a {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: 6rem minmax(0, 1fr);
}

.home-reading .editorial-card img {
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius-sm);
  inline-size: 6rem;
}

.home-reading .editorial-card-copy {
  padding: 0;
}

.home-reading .card h3 a {
  text-decoration-line: underline;
}

.home-reading .card :is(h3 a, a):hover h3,
.home-reading .card h3 a:hover {
  color: var(--ghostget-action);
}

@media (max-width: 45rem) {
  .home-reading .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* One page column for every band: header, homepage sections, reference
 * pages, and all three footer rows share the same 80rem outer width and
 * gutter, so their left and right edges line up at every viewport. */
:root[data-hraness-theme="paper"] {
  --ghostget-column: 80rem;
  --ghostget-column-inset: max(var(--page-inline), calc((100% - var(--ghostget-column)) / 2 + var(--page-inline)));
  --hraness-site-footer-measure: calc(min(var(--ghostget-column), 100%) - 2 * var(--page-inline));
}

.topbar {
  padding-inline: max(var(--ghostget-column-inset), env(safe-area-inset-left)) max(var(--ghostget-column-inset), env(safe-area-inset-right));
}

.hraness-marketing-footer__inner {
  padding-inline: max(var(--ghostget-column-inset), env(safe-area-inset-left)) max(var(--ghostget-column-inset), env(safe-area-inset-right));
}

.hraness-marketing-footer__inner {
  inline-size: 100%;
  max-inline-size: none;
}

.guide-article,
:root[data-palette] .guide-article {
  margin-inline: 0;
}

[data-hraness-marketing-preset] .hraness-marketing-related {
  --hraness-marketing-measure: var(--ghostget-column);
}

.home-reading {
  inline-size: min(100%, var(--ghostget-column));
  padding-inline: var(--page-inline);
}

/* Homepage providers: one hairline row per service instead of a card wall. */
#providers .provider-directory {
  border-block-start: 1px solid var(--line);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

#providers .provider-card,
#providers .provider-card-featured {
  align-items: baseline;
  background: none;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  column-gap: 1.5rem;
  display: grid;
  grid-column: auto;
  grid-template-columns: minmax(11rem, 1fr) minmax(9rem, 0.75fr) minmax(0, 2fr) minmax(10rem, 1.1fr);
  min-height: 0;
  padding: 0.8rem 0;
  row-gap: 0.25rem;
}

#providers .provider-card > * {
  margin: 0;
}

#providers .provider-card-heading {
  align-self: center;
  margin: 0;
}

#providers .provider-card h3 {
  font-size: 1rem;
}

#providers .provider-state strong {
  font-weight: 500;
}

#providers :is(.provider-capabilities, .provider-transport, .provider-feature-copy) {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

#providers .provider-feature-copy {
  grid-column: 2 / -1;
  max-inline-size: 48rem;
}

@media (max-width: 56rem) {
  #providers .provider-card,
  #providers .provider-card-featured {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #providers .provider-state {
    text-align: end;
  }

  #providers :is(.provider-capabilities, .provider-transport, .provider-feature-copy) {
    grid-column: 1 / -1;
  }
}

/* WebMCP: flat note under the list, with sample sites as plain mono links. */
#providers .registry-panel {
  background: none;
  border: 0;
  border-radius: 0;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0;
}

#providers .registry-panel h3 {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

#providers .registry-panel p {
  max-width: 42rem;
}

#providers .registry-domain-strip {
  gap: 0.25rem 1rem;
}

#providers .registry-domain-strip a {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.8125rem;
  min-block-size: 2rem;
  align-items: center;
  padding: 0;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}

#providers .registry-domain-more a {
  color: var(--ghostget-action);
}

/* Install: flat on the page, like every other section. */
.start-section.hraness-marketing-install {
  background: none;
  border: 0;
  border-block-start: 1px solid var(--line);
  border-radius: 0;
  grid-template-columns: minmax(0, 1fr);
  margin-block: 0;
  padding-block: var(--hraness-marketing-section-space);
  padding-inline: var(--page-inline);
}

@media (min-width: 48rem) {
  .start-section.hraness-marketing-install {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.start-section .prompt-card,
:root[data-palette] .start-section .prompt-card {
  background: none;
  border: 0;
  border-inline-start: 2px solid var(--ghostget-action);
  border-radius: 0;
  box-shadow: none;
  padding: 0.25rem 0 0.25rem 1rem;
}

.start-section .prompt-card p:not(.prompt-label) {
  color: var(--foreground);
  font-size: 1.0625rem;
}

.start-section .command-panel,
:root[data-palette] .start-section .command-panel {
  background: var(--code-background);
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.start-section .command-label {
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  color: var(--code-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.start-section .command-label span {
  color: var(--code-muted);
}

.start-section .skill-install-control {
  background: var(--surface);
}

/* Interfaces: three short columns separated by hairlines, not cards. */
.hraness-marketing-interface-grid {
  border-block-start: 1px solid var(--line);
  gap: 0 2rem;
}

.hraness-marketing-interface {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 1.25rem 0 0;
}

/* Limits: a two-column list of short statements with hairlines. */
.hraness-marketing-trust-grid {
  border-block-start: 1px solid var(--line);
  gap: 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.hraness-marketing-trust-item {
  background: none;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  min-block-size: 0;
  padding: 1.1rem 0;
}

.hraness-marketing-trust-item dt {
  font-size: 1.0625rem;
  font-weight: 600;
}

.hraness-marketing-trust-item dd {
  color: var(--muted);
  margin: 0;
}

/* Related products: plain rows. */
.hraness-marketing-card-row .hraness-marketing-card {
  box-shadow: none;
}

/* Fit and finish pass. */
.ghostget-ask-ai {
  margin: 0 auto;
  width: min(calc(100% - 2 * var(--page-inline)), calc(var(--ghostget-column) - 2 * var(--page-inline)));
}

.hraness-marketing-footer__inner {
  padding-block: 1.75rem;
}



.proof-transcript,
.proof-transcript code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Section hairlines run the width of the text column, not the padded box. */
[data-hraness-marketing-preset="editorial"] .hraness-marketing-page > :is(.hraness-marketing-section, .hraness-marketing-install, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related, .hraness-marketing-cta) {
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--page-inline)) 1px no-repeat;
  border-block-start: 0;
}

.start-section .hraness-marketing-install__heading {
  max-inline-size: none;
  text-wrap: balance;
}

.start-section .hraness-marketing-install__heading-group {
  align-content: start;
}

#providers .provider-card,
#providers .provider-card-featured {
  align-items: center;
}

#providers .provider-state {
  font-size: 0.9375rem;
}

:root[data-palette] .home-reading .card {
  border: 0;
  border-block-end: 1px solid var(--line);
  box-shadow: none;
}

#providers .provider-transport {
  padding-top: 0;
}

#uses .hraness-marketing-pillars > div {
  padding-inline: 0;
}

@media (min-width: 48rem) {
  #uses .hraness-marketing-pillars > div + div {
    padding-inline-start: 1.75rem;
  }

  #uses .hraness-marketing-pillars > div:not(:last-child) {
    padding-inline-end: 1.75rem;
  }
}

/* Rows carry their own top hairline, so a list never ends in a double rule. */
.hraness-marketing-trust-grid,
.home-reading .card-grid {
  border-block-start: 0;
}

.hraness-marketing-trust-item,
:root[data-palette] .home-reading .card {
  border-block-end: 0;
  border-block-start: 1px solid var(--line);
}

.hraness-marketing-footer__link {
  align-items: center;
  display: inline-flex;
  min-block-size: 2.75rem;
}

.start-section.hraness-marketing-install {
  inline-size: min(100%, var(--ghostget-column));
  margin-inline: auto;
}

/* Blog index and posts share the reference pages' left text edge. */
:root .blog-main > .plain-publication.plain-publication--embedded {
  margin-inline: 0;
  padding-inline: 0;
}

.provider-card h3 {
  overflow-wrap: break-word;
}


/* Use the shared frame for shell examples while preserving selectable command text. */
.hraness-marketing-proof-frame__content > pre:not(.proof-transcript) {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
  background: var(--code-background);
  color: var(--code-foreground);
}

/*
 * Shared design-kit PlatformInstall and PlatformBadges, rendered as static
 * HTML by platform-install.ts with the kit's hook classes. Values mirror the
 * kit's StyleX definitions. Before enhancement every panel shows under its
 * platform name; source/platform-install.ts reveals the tabs and Copy buttons.
 */
.hraness-platform-install {
  container: hraness-platform-install / inline-size;
  --platform-ink: var(--hraness-marketing-ink, var(--foreground, CanvasText));
  --platform-muted: var(--hraness-marketing-muted, var(--muted, GrayText));
  --platform-surface: var(--hraness-marketing-surface, var(--surface, Canvas));
  --platform-background: var(--hraness-marketing-background, var(--background, Canvas));
  --platform-line: color-mix(in srgb, var(--platform-ink) 12%, transparent);
  --platform-line-strong: color-mix(in srgb, var(--platform-ink) 22%, transparent);
  --platform-focus: var(--hraness-marketing-accent, var(--focus, Highlight));
  color: var(--platform-ink);
  display: grid;
  font-family: var(--hraness-marketing-text-font, var(--font-text, inherit));
  gap: 0.75rem;
  inline-size: 100%;
  min-inline-size: 0;
}
.hraness-platform-install__tabs {
  align-items: stretch;
  background-color: color-mix(in srgb, var(--platform-ink) 5%, var(--platform-background));
  border: 1px solid var(--platform-line);
  border-radius: 0.75rem;
  box-sizing: border-box;
  display: flex;
  gap: 0.25rem;
  justify-self: start;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  padding: 0.25rem;
  scrollbar-width: none;
}
.hraness-platform-install__tabs[hidden],
.hraness-platform-install__panel[hidden],
.hraness-platform-install__copy[hidden] { display: none; }
.hraness-platform-install__tab {
  align-items: center;
  appearance: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  box-sizing: border-box;
  color: var(--platform-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.45rem;
  justify-content: center;
  line-height: 1.2;
  margin: 0;
  min-block-size: 2.25rem;
  min-inline-size: 0;
  outline: none;
  outline-offset: 1px;
  padding: 0.4rem 0.8rem;
  transition: background-color 120ms, color 120ms, border-color 120ms;
  white-space: nowrap;
}
.hraness-platform-install__tab-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
/* Narrow columns (the component is its own inline-size container, as in
 * design-kit v0.30.2): the tab row spans the column and its tabs tighten. */
@container hraness-platform-install (max-width: 30rem) {
  .hraness-platform-install__tabs { gap: 0.125rem; justify-self: stretch; padding: 0.1875rem; }
  .hraness-platform-install__tab { font-size: 0.8125rem; gap: 0.3rem; padding-inline: 0.45rem; }
}
/* Very narrow columns, such as a nested panel on a 320px phone: each mark
 * stacks above its name so all three names stay whole down to a 200px row. */
@container hraness-platform-install (max-width: 17.5rem) {
  .hraness-platform-install__tab { flex-direction: column; font-size: 0.75rem; gap: 0.2rem; padding: 0.35rem 0.25rem; }
}
.hraness-platform-install__marks { block-size: 0; inline-size: 0; overflow: hidden; position: absolute; }
.hraness-platform-install__tab:hover { background-color: color-mix(in srgb, var(--platform-ink) 6%, transparent); color: var(--platform-ink); }
.hraness-platform-install__tab:focus-visible,
.hraness-platform-install__copy:focus-visible { outline: 2px solid var(--platform-focus); }
.hraness-platform-install__tab[aria-selected="true"] {
  background-color: var(--platform-surface);
  border-color: var(--platform-line-strong);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--platform-ink) 10%, transparent);
  color: var(--platform-ink);
}
.hraness-platform-install__panel,
.hraness-platform-install__panel-body { min-inline-size: 0; }
.hraness-platform-install__panel-body { display: grid; gap: 0.6rem; }
.hraness-platform-install__panel-label {
  align-items: center;
  color: var(--platform-ink);
  display: flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.45rem;
  margin: 0;
}
.hraness-platform-install[data-enhanced="true"] .hraness-platform-install__panel-label { display: none; }
.hraness-platform-install__command {
  background-color: var(--platform-surface);
  border: 1px solid var(--platform-line);
  border-radius: 0.75rem;
  box-sizing: border-box;
  display: grid;
  min-inline-size: 0;
  overflow: hidden;
}
.hraness-platform-install__command-bar {
  align-items: center;
  border-block-end: 1px solid var(--platform-line);
  color: var(--platform-muted);
  display: flex;
  font-size: 0.8125rem;
  gap: 0.75rem;
  justify-content: space-between;
  line-height: 1.3;
  min-block-size: 2.5rem;
  min-inline-size: 0;
  padding: 0.25rem 0.3rem 0.25rem 0.9rem;
}
.hraness-platform-install__shell { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hraness-platform-install .hraness-platform-install__pre {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--platform-ink);
  font-family: var(--hraness-marketing-mono-font, var(--font-mono, ui-monospace, monospace));
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
  max-inline-size: 100%;
  min-inline-size: 0;
  outline: none;
  outline-offset: -2px;
  overflow-wrap: normal;
  overflow-x: auto;
  padding: 0.85rem 0.95rem;
  tab-size: 2;
  white-space: pre;
  word-break: normal;
}
.hraness-platform-install .hraness-platform-install__pre:focus-visible { outline: 2px solid var(--platform-focus); }
.hraness-platform-install .hraness-platform-install__code {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  padding: 0;
}
.hraness-platform-install__copy {
  align-items: center;
  appearance: none;
  background-color: color-mix(in srgb, var(--platform-ink) 4%, var(--platform-surface));
  border: 1px solid var(--platform-line);
  border-radius: 0.5rem;
  box-sizing: border-box;
  color: var(--platform-ink);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 0.35rem;
  line-height: 1;
  margin: 0;
  min-block-size: 2rem;
  outline: none;
  outline-offset: 1px;
  padding: 0.35rem 0.65rem;
}
.hraness-platform-install__copy:hover { background-color: color-mix(in srgb, var(--platform-ink) 9%, var(--platform-surface)); }
.hraness-platform-install__copy-icon { block-size: 0.95rem; flex-shrink: 0; inline-size: 0.95rem; }
.hraness-platform-install__note { color: var(--platform-muted); font-size: 0.875rem; line-height: 1.5; margin: 0; }
.hraness-platform-install__unavailable {
  border: 1px dashed var(--platform-line);
  border-radius: 0.75rem;
  color: var(--platform-ink);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.85rem 0.95rem;
}
.hraness-platform-install__status {
  block-size: 1px;
  border-width: 0;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
.hraness-platform-icon {
  block-size: var(--hraness-platform-icon-size, 1em);
  display: inline-block;
  fill: currentColor;
  flex-shrink: 0;
  inline-size: var(--hraness-platform-icon-size, 1em);
  vertical-align: -0.125em;
}
.hraness-platform-badges {
  align-items: center;
  color: var(--hraness-marketing-muted, var(--muted, GrayText));
  column-gap: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--hraness-marketing-text-font, var(--font-text, inherit));
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0;
  row-gap: 0.4rem;
}
.hraness-platform-badges__label { font-weight: 500; }
.hraness-platform-badges__list {
  align-items: center;
  column-gap: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: 0.4rem;
}
.hraness-platform-badges__item {
  align-items: center;
  color: var(--hraness-marketing-ink, var(--foreground, CanvasText));
  display: inline-flex;
  gap: 0.4rem;
  white-space: nowrap;
}
.hraness-platform-badges__note { color: var(--hraness-marketing-muted, var(--muted, GrayText)); }
@media (pointer: coarse) {
  .hraness-platform-install__tab,
  .hraness-platform-install__copy { min-block-size: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hraness-platform-install__tab { transition-duration: 0s; }
}
@media (forced-colors: active) {
  .hraness-platform-install__tabs,
  .hraness-platform-install__command { background-color: Canvas; border-color: CanvasText; }
  .hraness-platform-install__tab { color: ButtonText; }
  /* Keep the paired system colors on descendants without automatic text backplates. */
  .hraness-platform-install__tab[aria-selected="true"] { forced-color-adjust: none; background-color: Highlight; border-color: Highlight; box-shadow: none; color: HighlightText; }
  .hraness-platform-install__copy { background-color: ButtonFace; border-color: ButtonText; color: ButtonText; }
  .hraness-platform-install__note,
  .hraness-platform-install__command-bar,
  .hraness-platform-badges,
  .hraness-platform-badges__item { color: CanvasText; }
}

/* Shared studio convention for text links; controls retain their own decoration line. */
a[href] {
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
@media (forced-colors: none) {
  a[href] { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
  a[href]:where(:hover, :focus-visible) { text-decoration-color: currentColor; }
}
@media (forced-colors: active) {
  a[href] { text-decoration-color: LinkText; }
}

/* Keep settled analytics choices in the footer, clear of reading content.
 * A fixed control moved into a grid needs intrinsic width and start alignment;
 * otherwise its shared full-width root stretches across the available track.
 * The shared required-consent prompt retains its original placement. */
[data-slot="hraness-site-footer"] [data-slot="hraness-cookie-consent"]:is([data-consent-state="clear"], [data-consent-state="declined"]) {
  inline-size: fit-content;
  inset: auto;
  justify-self: start;
  position: static;
  z-index: auto;
}

/* A settled control's disclosure follows its start edge at every breakpoint. */
[data-slot="hraness-site-footer"] [data-slot="hraness-cookie-consent"]:is([data-consent-state="clear"], [data-consent-state="declined"]) details > div {
  inset-inline: 0 auto;
  max-inline-size: calc(100vw - var(--page-inline) - var(--page-inline));
}

/* Static counterpart of design-kit MarketingAccount and MarketingAccountActions. */
.hraness-marketing-account {
  align-items: center;
  border-top: var(--hraness-marketing-rule, 1px solid var(--line));
  color: var(--foreground);
  display: grid;
  gap: 2rem 4rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  scroll-margin-top: calc(var(--hraness-sticky-offset, 5rem) + 2rem);
}
.hraness-marketing-account__copy { min-width: 0; }
.hraness-marketing-account__heading {
  font-family: var(--font-text);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  font-weight: 550;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.hraness-marketing-account__summary {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 1rem 0 0;
  max-width: 42ch;
  text-wrap: pretty;
}
.hraness-marketing-account__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  min-width: 0;
}
.hraness-marketing-account__primary,
.hraness-marketing-account__sign-in {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.3;
  min-height: 3.5rem;
}
.hraness-marketing-account__primary {
  background: var(--primary);
  border: 1px solid transparent;
  border-radius: 0.625rem;
  color: var(--primary-foreground);
  font-weight: 550;
  justify-content: center;
  max-width: 100%;
  padding: 0.875rem 1.5rem;
  text-align: center;
  text-decoration: none;
}
.hraness-marketing-account__primary:hover {
  background: color-mix(in oklch, var(--primary) 88%, var(--foreground));
}
a.hraness-marketing-account__sign-in {
  color: var(--foreground);
  font-weight: 450;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.22em;
}
a.hraness-marketing-account__sign-in:is(:hover, :focus-visible) {
  text-decoration-color: currentColor;
}
.hraness-marketing-account__actions a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
@media (min-width: 50rem) {
  .hraness-marketing-account { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .hraness-marketing-account__primary { background: ButtonFace; border-color: ButtonText; color: ButtonText; }
  a.hraness-marketing-account__sign-in,
  a.hraness-marketing-account__sign-in:is(:hover, :focus-visible) { text-decoration-color: LinkText; }
}

/* Editorial imagery keeps the same quiet frame in either theme. */
.blog-entry-image { display: block; margin-block-end: 1rem; border-radius: var(--radius-lg); overflow: hidden; background: #0e1113; }
.blog-entry-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-main .plain-site.plain-publication .plain-publication__article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; border: 0; }
.blog-main .plain-site.plain-publication .plain-publication__entry { padding: 0; border: 0; min-width: 0; }
.blog-main .plain-publication__article-body > .editorial-figure { margin-block: 0 2.5rem; }
.editorial-figure figcaption:has(> small:only-child) { justify-content: flex-end; }
.editorial-figure figcaption a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.18em; }
@media (max-width: 45rem) {
  .blog-main .plain-site.plain-publication .plain-publication__article-list { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}

.guide-hero .plain-publication__provenance { margin-block: 1.25rem 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }

/* Product landscape: the generated, product-themed world behind the homepage.
 * A grayscale luminance mask carries the drawing, so its ink is the page's own
 * text mixed into the paper: a deeper shade of the background hue in light
 * themes and a lifted one in dark themes, never an accent colour. */
body:has(.ghostget-product-hero) {
  isolation: isolate;
  position: relative;
}

@supports (mask-mode: luminance) {
  body:has(.ghostget-product-hero)::before {
    background: color-mix(in oklch, var(--foreground, var(--ink, CanvasText)) 30%, var(--background, var(--paper, Canvas)));
    content: "";
    inset: 0;
    mask-image: image-set(url("/landscape/landscape-893479efab7e7e02e5c173290db99758f2eb224bde82f575951aa18769d6d121.webp") 1x, url("/landscape/landscape-5a167f432e885bdc7ce35b18b329dd37724b1f697c6953b4d924bf50c81cc3d0.webp") 2x);
    mask-mode: luminance;
    mask-position: top center;
    mask-repeat: no-repeat;
    mask-size: 100% auto;
    opacity: .5;
    pointer-events: none;
    position: absolute;
    z-index: -1;
  }
}

@media (max-width: 48rem) {
  body:has(.ghostget-product-hero)::before {
    mask-image: url("/landscape/landscape-421ef118a46f2ad95f065701cd41dcfb2c0466bcf6e6a7444209ab04e9a9db13.webp");
    opacity: .36;
  }
}

@media (forced-colors: active), print {
  body:has(.ghostget-product-hero)::before {
    display: none;
  }
}

body:has(.ghostget-product-hero) .hraness-marketing-page {
  background: transparent;
}

/* Launch illustrations (website/launch/mockups.tsx). Product-local surfaces on
   the shared hkm tokens; frames come from @hraness/design-kit/mockups.css. */
.ggm { --ggm-gap: 12px; }
.ggm-card {
  background: var(--hkm-card);
  border: 1px solid var(--hkm-frame-line);
  border-radius: 14px;
  box-shadow: var(--hkm-shadow);
  padding: 18px 20px;
}
.ggm-card-title { font: 600 13px/1.3 var(--hkm-mono); color: var(--hkm-muted); margin: 0 0 14px; }
.ggm-card-foot { color: var(--hkm-muted); font-size: 13px; margin: 14px 0 0; }
.ggm .ggm-bars { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.ggm-bar-row { display: grid; gap: 4px; }
.ggm-bar-label { font-weight: 600; font-size: 14px; }
.ggm-bar {
  block-size: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  min-inline-size: 6px;
  position: relative;
  white-space: nowrap;
}
.ggm-bar > span { font: 500 12px/1 var(--hkm-mono); padding-inline-start: 8px; position: absolute; inset-inline-start: 100%; }
.ggm-bar[data-ggm-kind="html"] { background: color-mix(in oklab, var(--hkm-faint) 45%, transparent); }
.ggm-bar[data-ggm-kind="html"] > span { position: static; color: var(--hkm-fg); }
.ggm-bar[data-ggm-kind="markdown"] { background: var(--hkm-accent); }
.ggm-bar[data-ggm-kind="markdown"] > span { color: var(--hkm-fg); }
.ggm-compare { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ggm-side { display: grid; gap: 8px; align-content: start; min-inline-size: 0; }
.ggm-side-label { font: 600 13px/1.3 var(--hkm-mono); color: var(--hkm-muted); margin: 0; }
.ggm-compare[data-ggm-mode="ghostget"] [data-ggm-side="browser"] { opacity: 0.72; }
.ggm-compare[data-ggm-mode="browser"] [data-ggm-side="ghostget"] { opacity: 0.72; }
.ggm-mail { padding: 12px; position: relative; font-size: 13px; }
.ggm-mail-nav { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--hkm-muted); font-size: 12px; margin-block-end: 10px; }
.ggm .ggm-mail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ggm-mail-list li { background: var(--hkm-field); border-radius: 8px; padding: 8px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ggm-mail-list b { margin-inline-end: 6px; }
.ggm-mail-note { color: var(--hkm-warn); font-size: 12px; margin: 10px 0 0; }
.ggm-cursor {
  position: absolute; inset-inline-end: 24%; inset-block-start: 20px;
  inline-size: 14px; block-size: 14px;
  border-inline-start: 2px solid var(--hkm-fg); border-block-start: 2px solid var(--hkm-fg);
  transform: rotate(-12deg);
}
.ggm .ggm-services { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; margin: 0; padding: 0; }
.ggm .ggm-services li { background: var(--hkm-field); border-radius: 10px; display: grid; gap: 2px; padding: 10px 12px; }
.ggm-service-name { font-weight: 600; font-size: 14px; }
.ggm-service-count { color: var(--hkm-muted); font: 500 12px/1.2 var(--hkm-mono); }
.ggm .ggm-steps { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ggm .ggm-steps li {
  align-items: center; background: var(--hkm-card); border: 1px solid var(--hkm-frame-line);
  border-radius: 12px; display: grid; gap: 12px; grid-template-columns: 32px 1fr; padding: 12px 14px;
}
.ggm-steps li[data-ggm-tone="warn"] { border-color: color-mix(in oklab, var(--hkm-warn) 55%, transparent); }
.ggm-steps li[data-ggm-step="hold"] { border-color: color-mix(in oklab, var(--hkm-ok) 55%, transparent); }
.ggm-steps li[data-ggm-current] { box-shadow: 0 0 0 3px color-mix(in oklab, var(--hkm-accent) 40%, transparent); }
.ggm-step-index {
  align-items: center; background: var(--hkm-field); border-radius: 999px; display: inline-flex;
  font: 600 13px/1 var(--hkm-mono); block-size: 32px; inline-size: 32px; justify-content: center;
}
.ggm-step-text { display: grid; gap: 2px; }
.ggm-step-text span { color: var(--hkm-muted); font-size: 13px; }
.ggm-preview-fields { display: grid; gap: 8px; margin: 0; }
.ggm-preview-fields div { display: grid; gap: 8px; grid-template-columns: 96px 1fr; }
.ggm-preview-fields dt { color: var(--hkm-muted); font-size: 13px; }
.ggm-preview-fields dd { margin: 0; font-size: 14px; }
.ggm-preview-text { background: var(--hkm-field); border-radius: 8px; padding: 8px 10px; }
.ggm-preview-command { margin: 14px 0 6px; font: 500 13px/1.3 var(--hkm-mono); }
.ggm-preview-state { color: var(--hkm-warn); font-size: 13px; font-weight: 600; margin: 0; }
.ggm-preview[data-ggm-confirmed] .ggm-preview-state { color: var(--hkm-ok); }
.ggm .ggm-layers { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ggm .ggm-layers li {
  background: var(--hkm-card); border: 1px solid var(--hkm-frame-line); border-radius: 12px;
  display: grid; gap: 2px; padding: 14px 16px; text-align: center;
}
.ggm-layers li[data-ggm-layer="ghostget"] { background: color-mix(in oklab, var(--hkm-accent) 14%, var(--hkm-card)); border-color: var(--hkm-accent); }
.ggm-layers span { color: var(--hkm-muted); font-size: 13px; }
.ggm .ggm-limits { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ggm .ggm-limits li { padding-inline-start: 24px; position: relative; font-size: 14px; }
.ggm-limits li::before { content: "×"; color: var(--hkm-error); font-weight: 700; inset-inline-start: 4px; position: absolute; }
.launch-figure { margin: 24px 0 0; }
.launch-figure figcaption { color: var(--muted-foreground, var(--hkm-muted)); font-size: 0.875rem; margin-block-start: 8px; }
.plain-site.plain-publication .plain-publication__article-body .ggm :is(ul, ol) { display: grid; margin: 0; padding: 0; }
.plain-site.plain-publication .plain-publication__article-body .ggm li + li { margin-top: 0; }

/* Opt-in marketing contract 1, Quiet direction. Asset URLs stay relative in
   packages and snapshots. Instrument Serif stays vendored for products that
   opt in explicitly; no preset uses it by default, so it is never downloaded
   unless a product sets it as its display face. */
@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"]) {
    /* Quiet display role: the body sans at a semibold weight with tight
       tracking, not a serif. */
    --hraness-marketing-display-font: var(--font-text, "Nebula Sans", ui-sans-serif, system-ui, sans-serif);
    --hraness-marketing-display-weight: 550;
    --hraness-marketing-h1-size: clamp(2.375rem, 1.55rem + 3.6vw, 4.5rem);
    --hraness-marketing-h1-leading: 1.04;
    --hraness-marketing-h1-tracking: -.035em;
    --hraness-marketing-h2-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
    --hraness-marketing-h2-leading: 1.1;
    --hraness-marketing-h2-tracking: -.028em;
    --hraness-marketing-h3-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
    --hraness-marketing-h3-leading: 1.2;
    --hraness-marketing-content-measure: 70rem;
    --hraness-marketing-header-measure: 76rem;
    --hraness-marketing-header-height: 3.25rem;
    --hraness-sticky-offset: calc(var(--hraness-marketing-header-height) + 1px);
    --hraness-marketing-gutter: 2rem;
    --hraness-marketing-hero-space: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
    --hraness-marketing-story-space: 5rem;
    --hraness-marketing-summary-leading: 1.6;
    --hraness-marketing-header-action-height: 2.25rem;
    --hraness-marketing-field-ink: var(--foreground, var(--ui-foreground, CanvasText));
    --hraness-marketing-field-muted: color-mix(in oklch, var(--foreground, var(--ui-foreground, CanvasText)) 12%, var(--muted, var(--ui-muted-foreground, CanvasText)));
    --hraness-marketing-link: var(--primary, var(--ui-primary, LinkText));
    /* Retired textures: the field paints the flat palette background. */
    --hraness-marketing-field-images: none;
    --hraness-marketing-field-size: auto;
    --hraness-marketing-terminal-background: var(--surface, var(--ui-card, Canvas));
    --hraness-marketing-terminal-ink: var(--foreground, var(--ui-foreground, CanvasText));
    --hraness-marketing-terminal-muted: var(--muted, var(--ui-muted-foreground, CanvasText));
    --hraness-marketing-terminal-command: var(--primary, var(--ui-primary, LinkText));
    --hraness-marketing-terminal-chrome: var(--surface, var(--ui-card, Canvas));
    --hraness-marketing-terminal-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground, var(--ui-foreground, CanvasText)) 12%, transparent);
  }

  [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(2rem, 1.45rem + 2.4vw, 3.25rem);
    --hraness-marketing-h1-leading: 1.08;
    --hraness-marketing-h1-tracking: -.035em;
    --hraness-marketing-h2-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
    --hraness-marketing-h2-leading: 1.15;
    --hraness-marketing-h2-tracking: -.02em;
    --hraness-marketing-h3-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
    --hraness-marketing-h3-leading: 1.2;
    --hraness-marketing-header-height: 2.5rem;
    --hraness-marketing-hero-space: 2rem 3rem;
    --hraness-marketing-story-space: 3rem;
    --hraness-marketing-field-images: none;
  }

  /* Patterns are retired. The attribute values stay valid for compatibility,
     and every one paints the uninterrupted palette background. */
  :is([data-hraness-pattern="cells"], [data-hraness-pattern="weave"], [data-hraness-pattern="contour"], [data-hraness-pattern="mesh"], [data-hraness-pattern="none"]) {
    --hraness-pattern-image: none;
    --hraness-pattern-decoration: none;
    --hraness-marketing-field-images: none;
    --hraness-material-wall-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-related,
    .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: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    --hraness-marketing-measure: var(--hraness-marketing-content-measure);
    --hraness-marketing-copy-measure: 52ch;
    --hraness-marketing-radius: .75rem;
    --hraness-marketing-frame-radius: 1.125rem;
    --hraness-marketing-section-space: var(--hraness-marketing-story-space);
    --hraness-marketing-action-height: 2.625rem;
    --hraness-marketing-line: color-mix(in srgb, var(--hraness-marketing-ink) 12%, transparent);
    --hraness-marketing-chrome-rule: 1px solid var(--hraness-marketing-line);
    --hraness-marketing-chrome-shadow: none;
    --hraness-marketing-surface-shadow: 0 0 0 1px var(--hraness-marketing-line);
    --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-related,
    .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);
    text-wrap: balance;
  }
  :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-related__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.65);
    text-wrap: pretty;
  }

  :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);
  }
  :is([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) .hraness-marketing-header .hraness-marketing-action {
    min-block-size: var(--hraness-marketing-header-action-height);
  }
  /* Phone headers keep 44px targets on both rows. */
  @media (max-width: 48rem) {
    :where([data-hraness-marketing-preset="editorial"], [data-hraness-marketing-preset="minimal"]) {
      --hraness-marketing-header-action-height: 2.75rem;
    }
  }
  @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-related, .hraness-marketing-cta) {
    padding-inline: var(--hraness-marketing-gutter);
  }

  /* The field is a flow container on the flat palette background. The retired
     grain, cell, and pattern textures never paint, whatever tokens say. */
  :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: none;
    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-related, .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-related, .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, .hraness-marketing-related__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 srgb, 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 srgb, 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 3rem;
      --hraness-marketing-story-space: 3.5rem;
      --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;
    }
  }
}


/* Marketing action forced-colors compatibility: keep this final block self-contained. */
@media (forced-colors: active) {
  .hraness-marketing-action,
  .hraness-marketing-action[data-emphasis="primary"],
  .hraness-marketing-hero[data-tone="accent"] .hraness-marketing-action,
  .hraness-marketing-cta[data-tone="accent"] .hraness-marketing-action {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
}