/* GENERATED by helm-console/scripts/ensure-style-materials.mjs — DO NOT EDIT.
   Source of truth: helm-bridge/src/client/styles.css (the STYLE AXIS section,
   policed by the Bridge smoke's style drift guard + scripts/perf-budget.mjs).
   Regenerated on every console build; edits here are overwritten.

   Owner ruling 2026-09-06 (supersedes #490 Blueprint-only): the chosen UI
   STYLE is unified across ALL surfaces. This file carries the eight styles'
   `[data-style]` MATERIAL TABLES (--mat-* tiers + --bgl-* background), their
   --font-* ROLE tokens (owner correction 2026-09-07 — the @font-face kits ride
   style-fonts.css), the BUTTON SEAM token tables on `.ibtn` (owner ruling
   2026-09-08 — bare glyph + decoration slot + travel opt-in, resolved by the
   byte-identical `.ibtn` block here) and the #style-bg substrate; the console's styles.css wires
   .hc-header / .hc-card / .hc-menu / .hc-dialog / body onto these tokens and
   floors the few structural tokens they reference. DOM-decoration rules are
   dropped — see the generator header. */

:root,
:root[data-style="blueprint"] {
  --mat-shell-bg:   color-mix(in srgb, var(--bg) 86%, transparent);
  --mat-shell-blur: blur(10px);
  --mat-shell-brd:  var(--border);
  --mat-shell-hi:   none;
  --mat-shell-sh:   none;
  --mat-card-bg:   var(--surface);
  --mat-card-blur: none;
  --mat-card-brd:  var(--border);
  --mat-card-hi:   inset 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
  --mat-card-glow: 0 0 14px var(--accent-glow);
  --mat-card-sh:   var(--mat-card-hi);
  --mat-popover-bg:   var(--glass);
  --mat-popover-blur: blur(22px) saturate(150%);
  --mat-popover-brd:  var(--glass-brd);
  --mat-popover-hi:   inset 0 1px 0 var(--glass-hi);
  --mat-popover-glow: none;
  --mat-popover-sh:   var(--glass-sh), var(--mat-popover-hi);
  --mat-modal-bg:   var(--surface);
  --mat-modal-blur: none;
  --mat-modal-brd:  var(--border-2);
  --mat-modal-hi:   none;
  --mat-modal-glow: none;
  --mat-modal-sh:   0 24px 60px rgba(0, 0, 0, .45);
  --mat-modal-scrim:      color-mix(in srgb, var(--bg-deep) 62%, transparent);
  --mat-modal-scrim-blur: blur(3px);
  --bgl-color:      var(--bg);
  --bgl-layer:      radial-gradient(1200px 500px at 50% -80px, var(--surface-2), var(--bg) 70%);
  --bgl-attach:     fixed;
  --bgl-texture:    none;
  --bgl-texture-op: 0;
  --bgl-canvas-op:  1;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius:      var(--radius-md);
  --radius-2xs:  2px;
  --radius-xs:   4px;
  --radius-2xl:  14px;
  --radius-pill: 999px;
  --radius-full: 50%;
  --stroke-hair:  1;
  --stroke-mark:  1.25;
  --stroke-icon:  1.7;
  --stroke-emph:  2.2;
  --stroke-cap:   round;
  --stroke-join:  round;
  --stroke-miter: 4;
  --grid-step: 28px;
  --grid-w:    1px;
  --grid-dash: 0;
  --seg-lit:   100%;
  --seg-gap:   0px;
  --seg-pitch: 100%;
  --mark-rendering: auto;
}

#style-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bgl-color);
  background-image: var(--bgl-layer);
  background-attachment: var(--bgl-attach);
  background-size: var(--bgl-size, auto);
  background-position: var(--bgl-position, 0% 0%);
  background-repeat: var(--bgl-repeat, repeat);
}

#style-bg.style-bg-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bgl-texture);
  opacity: var(--bgl-texture-op);
}

#style-bg .style-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: var(--bgl-canvas-op);
}

@media (prefers-reduced-motion: reduce) {
  #style-bg,
  #style-bg .style-bg-canvas,
  #style-bg.style-bg-texture::after {
    animation: none;
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root:root,
  :root:root[data-style] {
    --mat-shell-blur:   none;
    --mat-card-blur:    none;
    --mat-popover-blur: none;
    --mat-modal-blur:   none;
    --mat-modal-scrim-blur: none;
    --bgl-layer:      var(--bgl-color);
    --bgl-texture-op: 0;
  }
  #style-bg .style-bg-canvas {
    display: none;
  }
}

:root[data-style="glass"] {
  --mark-radius:    5px;
  --mark-stroke-w:  1.15;
  --mark-rendering: geometricPrecision;
  --mark-ring-w:    2.6;
  --mark-fill:      color-mix(in srgb, var(--accent) 84%, #ffffff);
  --mark-fill-2:    var(--sea);
  --mark-track:     color-mix(in srgb, var(--surface) 72%, transparent);
  --mark-grid:      color-mix(in srgb, var(--ink) 12%, transparent);
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-reading: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --font-ui:      "Manrope", "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-accent:  "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-code:    var(--mono);
  --font-data-numeric: tabular-nums;
  --mat-shell-bg:   color-mix(in srgb, var(--surface) 82%, transparent);
  --mat-shell-blur: blur(6px) saturate(115%);
  --mat-shell-brd:  color-mix(in srgb, var(--ink) 8%, transparent);
  --mat-shell-hi:   inset 0 1px 0 rgba(255, 255, 255, .05);
  --mat-shell-sh:   var(--mat-shell-hi);
  --mat-card-bg:   color-mix(in srgb, var(--surface-2) 92%, transparent);
  --mat-card-blur: none;
  --mat-card-brd:  color-mix(in srgb, var(--ink) 10%, transparent);
  --mat-card-hi:   inset 0 1px 0 rgba(255, 255, 255, .06);
  --mat-card-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
  --mat-card-sh:   var(--mat-card-hi), 0 10px 28px -14px rgba(0, 0, 0, .55);
  --mat-popover-bg:   color-mix(in srgb, var(--surface-2) 72%, transparent);
  --mat-popover-blur: blur(20px) saturate(150%);
  --mat-popover-brd:  color-mix(in srgb, var(--ink) 14%, transparent);
  --mat-popover-hi:   inset 0 1px 0 rgba(255, 255, 255, .09);
  --mat-popover-glow: 0 18px 40px -22px var(--glass-glow);
  --mat-popover-sh:   var(--mat-popover-hi), 0 18px 46px -16px rgba(0, 0, 0, .60), var(--mat-popover-glow);
  --mat-modal-bg:   color-mix(in srgb, var(--surface-3) 76%, transparent);
  --mat-modal-blur: blur(28px) saturate(160%);
  --mat-modal-brd:  color-mix(in srgb, var(--ink) 16%, transparent);
  --mat-modal-hi:   inset 0 1px 0 rgba(255, 255, 255, .11), inset 0 -1px 0 rgba(0, 0, 0, .30);
  --mat-modal-glow: none;
  --mat-modal-sh:   var(--mat-modal-hi), 0 30px 76px -20px rgba(0, 0, 0, .70);
  --mat-modal-scrim:      color-mix(in srgb, var(--bg-deep) 70%, transparent);
  --mat-modal-scrim-blur: none;
  --bgl-color:      var(--bg);
  --bgl-layer:      radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--surface) 60%, transparent) 0%, var(--bg) 55%, var(--bg-deep) 100%);
  --bgl-attach:     fixed;
  --bgl-texture:    none;
  --bgl-texture-op: 0;
  --bgl-canvas-op:  1;
  --glass-fringe:      linear-gradient(115deg, var(--accent), var(--sea) 50%, var(--aux-2));
  --glass-glow:        color-mix(in srgb, var(--accent) 45%, transparent);
  --glass-spec-core:   color-mix(in srgb, var(--accent) 4%, transparent);
  --glass-spec-mid:    color-mix(in srgb, var(--sea) 2%, transparent);
  --glass-spec-radius: 150px;
  --glass-disc-alpha:  .10;
  --glass-well:        color-mix(in srgb, var(--ink) 12%, transparent);
}

:root[data-style="glass"][data-theme="light"] {
  --glass-spec-core: color-mix(in srgb, var(--accent) 4%, transparent);
  --glass-spec-mid:  color-mix(in srgb, var(--sea) 2%, transparent);
}

@media (prefers-reduced-transparency: reduce) {
  :root:root[data-style="glass"] {
    --mat-shell-bg:   var(--surface);
    --mat-shell-sh:   none;
    --mat-card-bg:    var(--surface-2);
    --mat-card-sh:    0 4px 10px -6px rgba(0, 0, 0, .60);
    --mat-popover-bg: var(--surface-2);
    --mat-popover-sh: 0 12px 24px -10px rgba(0, 0, 0, .70);
    --mat-modal-bg:   var(--surface-3);
    --mat-modal-sh:   0 24px 44px -14px rgba(0, 0, 0, .75);
    --mat-modal-scrim: var(--bg-deep);
  }
}

:root[data-style="glass"][data-reduce="1"] {
  --mat-shell-bg:   var(--surface);
  --mat-shell-blur: none;
  --mat-shell-sh:   none;
  --mat-card-bg:    var(--surface-2);
  --mat-card-blur:  none;
  --mat-card-sh:    0 4px 10px -6px rgba(0, 0, 0, .60);
  --mat-popover-bg:   var(--surface-2);
  --mat-popover-blur: none;
  --mat-popover-sh:   0 12px 24px -10px rgba(0, 0, 0, .70);
  --mat-modal-bg:   var(--surface-3);
  --mat-modal-blur: none;
  --mat-modal-sh:   0 24px 44px -14px rgba(0, 0, 0, .75);
  --mat-modal-scrim: var(--bg-deep);
  --mat-modal-scrim-blur: none;
}

:root[data-style="glass"] .ibtn {
  --btn-neutral-rest-fill: transparent;
  --btn-neutral-rest-border: transparent;
  --btn-destructive-rest-fill: transparent;
  --btn-destructive-rest-border: transparent;
  --btn-error-rest-fill: transparent;
  --btn-error-rest-border: transparent;
  --btn-additive-rest-fill: transparent;
  --btn-additive-rest-ink: var(--btn-additive-hover-fill);
  --btn-additive-hover-ink: var(--btn-additive-hover-fill);
  --btn-hover-chrome-fill: transparent;
  --btn-hover-chrome-border: var(--accent);
  --btn-deco-hover: var(--glass-well);
  --btn-deco-inset: 50%;
  --btn-deco-hover-inset: 50%;
  --btn-deco-active-inset: 0px;
  --btn-radius: 50%;
}

:root[data-style="synthwave"] {
  --mark-radius:    4px;
  --mark-stroke-w:  1.1;
  --mark-ring-w:    2.6;
  --mark-rendering: geometricPrecision;
  --mark-fill:      color-mix(in srgb, var(--accent) 82%, #ffffff);
  --mark-fill-2:    var(--sea);
  --mark-track:     var(--bg-deep);
  --mark-grid:      color-mix(in srgb, var(--accent) 30%, transparent);
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-reading: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --font-ui:      "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-accent:  "Syne", "Arial Narrow", system-ui, sans-serif;
  --font-code:    var(--mono);
  --font-data-numeric: tabular-nums;
  --mat-shell-bg:   var(--bg-deep);
  --mat-shell-blur: none;
  --mat-shell-brd:  var(--border);
  --mat-shell-hi:   0 0 0 0 transparent;
  --mat-shell-sh:   none;
  --mat-card-bg:   var(--surface);
  --mat-card-blur: none;
  --mat-card-brd:  var(--border-2);
  --mat-card-hi:   0 0 0 0 transparent;
  --mat-card-glow: 0 0 2px 0 var(--sw-rim), 0 0 8px -1px var(--sw-glow);
  --mat-card-sh:   none;
  --mat-popover-bg:   var(--surface-2);
  --mat-popover-blur: none;
  --mat-popover-brd:  var(--accent);
  --mat-popover-hi:   0 0 0 1px var(--bg-deep);
  --mat-popover-glow: 0 0 14px -2px color-mix(in srgb, var(--accent) 44%, transparent);
  --mat-popover-sh:   var(--mat-popover-hi), var(--mat-popover-glow);
  --mat-modal-bg:   var(--surface-2);
  --mat-modal-blur: none;
  --mat-modal-brd:  var(--accent);
  --mat-modal-hi:   0 0 0 1px var(--bg-deep);
  --mat-modal-glow: 0 0 24px -4px color-mix(in srgb, var(--accent) 38%, transparent);
  --mat-modal-sh:   var(--mat-modal-hi), var(--mat-modal-glow);
  --mat-modal-scrim:      color-mix(in srgb, var(--bg-deep) 82%, transparent);
  --mat-modal-scrim-blur: none;
  --bgl-color:      var(--bg);
  --sw-ramp:        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  --bgl-layer:      var(--sw-ramp);
  --bgl-attach:     fixed;
  --bgl-texture:    none;
  --bgl-texture-op: 0;
  --bgl-canvas-op:  1;
  --sw-glow:   color-mix(in srgb, var(--accent) 33%, transparent);
  --sw-rim:    color-mix(in srgb, var(--accent) 67%, transparent);
  --sw-rung-alpha: .16;
  --sw-horizon: var(--bgl-horizon, 38%);
  --sw-tick:   6px;
  --sw-hue:    var(--accent);
  --sw-line-a: color-mix(in srgb, var(--sea) 16%, var(--bg));
  --sw-line-b: color-mix(in srgb, var(--accent) 16%, var(--bg));
  --sw-sun:    color-mix(in srgb, var(--accent) 34%, var(--bg));
  --btn-destructive-fill:         color-mix(in srgb, #FF8A3D 10%, var(--surface-2));
  --btn-destructive-ink:          #FF8A3D;
  --btn-destructive-border:       color-mix(in srgb, #FF8A3D 45%, transparent);
  --btn-destructive-hover-fill:   #FF8A3D;
  --btn-destructive-hover-ink:    var(--bg-deep);
  --btn-destructive-hover-border: #FF8A3D;
  --btn-error-fill:         color-mix(in srgb, #FF3D46 10%, var(--surface-2));
  --btn-error-ink:          #FF3D46;
  --btn-error-border:       color-mix(in srgb, #FF3D46 45%, transparent);
  --btn-error-hover-fill:   #FF3D46;
  --btn-error-hover-ink:    var(--bg-deep);
  --btn-error-hover-border: #FF3D46;
}

:root[data-style="synthwave"][data-theme="light"] {
  --btn-destructive-fill:         color-mix(in srgb, #CC5100 10%, var(--surface-2));
  --btn-destructive-ink:          #CC5100;
  --btn-destructive-border:       color-mix(in srgb, #CC5100 45%, transparent);
  --btn-destructive-hover-fill:   #CC5100;
  --btn-destructive-hover-border: #CC5100;
  --btn-error-fill:         color-mix(in srgb, #E0000A 10%, var(--surface-2));
  --btn-error-ink:          #E0000A;
  --btn-error-border:       color-mix(in srgb, #E0000A 45%, transparent);
  --btn-error-hover-fill:   #E0000A;
  --btn-error-hover-border: #E0000A;
}

:root[data-style="synthwave"] {
  --sw-held-layer:
    linear-gradient(180deg, var(--bg) 0 var(--sw-horizon), transparent var(--sw-horizon)),
    linear-gradient(var(--sw-line-a), var(--sw-line-a)),
    linear-gradient(var(--sw-line-b), var(--sw-line-b)),
    linear-gradient(var(--sw-line-a), var(--sw-line-a)),
    linear-gradient(var(--sw-line-b), var(--sw-line-b)),
    linear-gradient(var(--sw-line-a), var(--sw-line-a)),
    linear-gradient(var(--sw-line-b), var(--sw-line-b)),
    linear-gradient(var(--sw-line-a), var(--sw-line-a)),
    linear-gradient(var(--sw-line-b), var(--sw-line-b)),
    repeating-conic-gradient(from 180deg at 50% var(--sw-horizon), var(--sw-line-a) 0 .16deg, transparent .16deg 6.2deg),
    var(--sw-ramp);
  --sw-held-size:
    100% 100%,
    100% 1px, 100% 1px, 100% 1px, 100% 1px, 100% 1px, 100% 1px, 100% 1px, 100% 1px,
    100% 100%,
    100% 100%;
  --sw-held-position:
    0 0,
    0 41.8%, 0 44.2%, 0 47.6%, 0 52.3%, 0 59.0%, 0 68.4%, 0 81.5%, 0 100%,
    0 0,
    0 0;
}

@media (prefers-reduced-motion: reduce) {
  :root:root[data-style="synthwave"] {
    --bgl-layer:    var(--sw-held-layer);
    --bgl-size:     var(--sw-held-size);
    --bgl-position: var(--sw-held-position);
    --bgl-repeat:   no-repeat;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root:root[data-style="synthwave"] {
    --bgl-layer:    var(--sw-held-layer);
    --bgl-size:     var(--sw-held-size);
    --bgl-position: var(--sw-held-position);
    --bgl-repeat:   no-repeat;
  }
}

:root:root[data-style="synthwave"][data-reduce="1"] {
  --bgl-layer:    var(--sw-held-layer);
  --bgl-size:     var(--sw-held-size);
  --bgl-position: var(--sw-held-position);
  --bgl-repeat:   no-repeat;
}

@media (prefers-reduced-transparency: reduce) {
  :root:root[data-style="synthwave"] {
    --mat-modal-scrim: var(--bg-deep);
  }
}

:root[data-style="synthwave"][data-reduce="1"] {
  --mat-modal-scrim: var(--bg-deep);
}

:root[data-style="synthwave"] .ibtn {
  --btn-neutral-rest-fill: transparent;
  --btn-neutral-rest-border: transparent;
  --btn-destructive-rest-fill: transparent;
  --btn-destructive-rest-border: transparent;
  --btn-error-rest-fill: transparent;
  --btn-error-rest-border: transparent;
  --btn-additive-rest-fill: transparent;
  --btn-additive-rest-border: transparent;
  --btn-additive-rest-ink: var(--btn-additive-hover-fill);
  --btn-additive-hover-ink: var(--btn-additive-hover-fill);
  --btn-destructive-hover-ink: var(--btn-destructive-hover-fill);
  --btn-error-hover-ink: var(--btn-error-hover-fill);
  --btn-hover-chrome-fill: transparent;
  --btn-hover-chrome-border: transparent;
  --btn-deco-shadow: 0 0 0 1px var(--sw-hue), 0 0 0 3px var(--sw-rim);
  --btn-deco-inset: 0px;
  --btn-deco-hover-inset: -3px;
  --btn-deco-active-inset: 0px;
}

:root[data-style="quarterdeck"] {
  --mark-radius:    2px;
  --mark-stroke-w:  1.25;
  --mark-ring-w:    2.8;
  --mark-rendering: geometricPrecision;
  --mark-fill:      color-mix(in srgb, var(--accent) 86%, var(--ink));
  --mark-fill-2:    var(--sea);
  --mark-track:     var(--surface-2);
  --mark-grid:      var(--border-2);
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-reading: "Source Serif 4", Charter, Georgia, "Iowan Old Style", serif;
  --font-ui:      "Figtree", -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --font-data:    "Azeret Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-accent:  "Spectral SC", Georgia, serif;
  --font-code:    var(--mono);
  --font-data-numeric: tabular-nums;
  --mat-shell-bg:   var(--surface);
  --mat-shell-blur: none;
  --mat-shell-brd:  var(--border-2);
  --mat-shell-hi:   inset 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
  --mat-shell-sh:   var(--mat-shell-hi);
  --mat-card-bg:   var(--surface-2);
  --mat-card-blur: none;
  --mat-card-brd:  var(--border);
  --mat-card-hi:   inset 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent);
  --mat-card-glow: inset 0 1px 0 color-mix(in srgb, var(--accent) 40%, transparent), 0 10px 24px -10px var(--qd-shadow);
  --mat-card-sh:   var(--mat-card-hi), 0 10px 24px -10px var(--qd-shadow);
  --mat-popover-bg:   color-mix(in srgb, var(--surface) 84%, transparent);
  --mat-popover-blur: blur(10px) saturate(115%);
  --mat-popover-brd:  var(--border-2);
  --mat-popover-hi:   inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent);
  --mat-popover-glow: none;
  --mat-popover-sh:   var(--mat-popover-hi), 0 18px 40px -12px var(--qd-shadow-deep);
  --mat-modal-bg:   color-mix(in srgb, var(--surface-2) 88%, transparent);
  --mat-modal-blur: blur(18px) saturate(120%);
  --mat-modal-brd:  var(--border-2);
  --mat-modal-hi:   inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  --mat-modal-glow: none;
  --mat-modal-sh:   var(--mat-modal-hi), 0 28px 64px -16px var(--qd-shadow-deep);
  --mat-modal-scrim:      radial-gradient(120% 100% at 50% 50%, transparent 30%, color-mix(in srgb, var(--bg-deep) 66%, transparent));
  --mat-modal-scrim-blur: none;
  --bgl-color:      var(--bg);
  --bgl-layer:      linear-gradient(var(--bg), var(--bg));
  --bgl-attach:     fixed;
  --bgl-texture:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='qdg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23qdg)' opacity='.55'/%3E%3C/svg%3E");
  --bgl-texture-op: var(--grain-op);
  --bgl-canvas-op:  1;
  --grain-op: .03;
  --qd-shadow:      rgba(6, 8, 9, .50);
  --qd-shadow-deep: rgba(6, 8, 9, .58);
  --qd-gleam-core:  color-mix(in srgb, var(--accent) 4%, transparent);
  --qd-gleam-edge:  color-mix(in srgb, var(--accent-2) 2%, transparent);
  --qd-glow:        color-mix(in srgb, var(--accent) 34%, transparent);
  --qd-well:        color-mix(in srgb, var(--ink) 14%, transparent);
  --qd-rhumb-alpha:   .035;
  --qd-lantern-alpha: .055;
  --qd-tick: 9px;
  --qd-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='bevel'%3E%3Cpath d='M12 1.2 13.9 9.2 12 12 10.1 9.2Z'/%3E%3Cpath d='M12 20.4 10.7 14.6 12 12 13.3 14.6Z'/%3E%3Cpath d='M20.4 12 14.6 13.3 12 12 14.6 10.7Z'/%3E%3Cpath d='M3.6 12 9.4 10.7 12 12 9.4 13.3Z'/%3E%3Ccircle cx='12' cy='12' r='1.4'/%3E%3C/svg%3E");
  --qd-rust:  #A85426;
  --qd-flare: #FF6B52;
  --btn-additive-fill:         color-mix(in srgb, var(--accent) 14%, transparent);
  --btn-additive-ink:          var(--accent);
  --btn-additive-border:       var(--accent);
  --btn-additive-hover-fill:   color-mix(in srgb, var(--accent) 24%, transparent);
  --btn-additive-hover-ink:    var(--accent-2);
  --btn-additive-hover-border: var(--accent-2);
  --btn-destructive-fill:         color-mix(in srgb, var(--qd-rust) 10%, var(--surface-2));
  --btn-destructive-ink:          var(--qd-rust);
  --btn-destructive-border:       color-mix(in srgb, var(--qd-rust) 45%, transparent);
  --btn-destructive-hover-fill:   color-mix(in srgb, var(--qd-rust) 26%, var(--surface-2));
  --btn-destructive-hover-ink:    var(--qd-rust);
  --btn-destructive-hover-border: var(--qd-rust);
  --btn-error-fill:         color-mix(in srgb, var(--qd-flare) 10%, var(--surface-2));
  --btn-error-ink:          var(--qd-flare);
  --btn-error-border:       color-mix(in srgb, var(--qd-flare) 45%, transparent);
  --btn-error-hover-fill:   color-mix(in srgb, var(--qd-flare) 26%, var(--surface-2));
  --btn-error-hover-ink:    var(--qd-flare);
  --btn-error-hover-border: var(--qd-flare);
}

:root[data-style="quarterdeck"][data-theme="light"] {
  --grain-op: .02;
  --qd-shadow:      rgba(74, 70, 56, .16);
  --qd-shadow-deep: rgba(74, 70, 56, .22);
  --qd-rust:  #9A3C1C;
  --qd-flare: #F0413A;
}

:root[data-style="quarterdeck"] .ibtn {
  --btn-neutral-rest-fill: transparent;
  --btn-neutral-rest-border: transparent;
  --btn-destructive-rest-fill: transparent;
  --btn-destructive-rest-border: transparent;
  --btn-error-rest-fill: transparent;
  --btn-error-rest-border: transparent;
  --btn-additive-rest-fill: transparent;
  --btn-hover-chrome-fill: transparent;
  --btn-hover-chrome-border: var(--ink);
  --btn-deco-hover: var(--qd-well);
  --btn-deco-inset: 50%;
  --btn-deco-hover-inset: 50%;
  --btn-deco-active-inset: 0px;
  --btn-radius: 50%;
}

@media (prefers-reduced-transparency: reduce) {
  :root:root[data-style="quarterdeck"] {
    --mat-popover-bg: var(--surface);
    --mat-modal-bg:   var(--surface-2);
    --mat-modal-scrim: var(--bg-deep);
  }
}

:root[data-style="quarterdeck"][data-reduce="1"] {
  --mat-popover-bg:   var(--surface);
  --mat-popover-blur: none;
  --mat-modal-bg:     var(--surface-2);
  --mat-modal-blur:   none;
  --mat-modal-scrim:  var(--bg-deep);
  --mat-modal-scrim-blur: none;
}

:root[data-style="starship"] {
  --mark-radius:    2px;
  --mark-stroke-w:  1;
  --mark-rendering: geometricPrecision;
  --mark-ring-w:    2.4;
  --mark-fill:      color-mix(in srgb, var(--accent) 90%, var(--bg));
  --mark-fill-2:    var(--sea);
  --mark-track:     var(--bg);
  --mark-grid:      var(--border);
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-reading: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --font-ui:      "IBM Plex Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-data:    "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-accent:  "Titillium Web", "Segoe UI", Roboto, sans-serif;
  --font-code:    var(--mono);
  --font-data-numeric: tabular-nums;
  --mat-shell-bg:   var(--bg);
  --mat-shell-blur: none;
  --mat-shell-brd:  var(--border);
  --mat-shell-hi:   inset 0 1px 0 rgba(255, 255, 255, .04);
  --mat-shell-sh:   var(--mat-shell-hi);
  --mat-card-bg:   color-mix(in srgb, var(--surface) 90%, transparent);
  --mat-card-blur: none;
  --mat-card-brd:  var(--border);
  --mat-card-hi:   inset 0 1px 0 rgba(255, 255, 255, .05);
  --mat-card-glow: inset 2px 0 0 0 color-mix(in srgb, var(--accent) 85%, transparent);
  --mat-card-sh:   var(--mat-card-hi), 0 8px 24px -12px rgba(0, 0, 0, .50);
  --mat-popover-bg:   color-mix(in srgb, var(--surface-2) 86%, transparent);
  --mat-popover-blur: blur(16px) saturate(130%);
  --mat-popover-brd:  var(--border-2);
  --mat-popover-hi:   inset 0 1px 0 rgba(255, 255, 255, .08);
  --mat-popover-glow: none;
  --mat-popover-sh:   var(--mat-popover-hi), 0 16px 40px -16px rgba(0, 0, 0, .60);
  --mat-modal-bg:   color-mix(in srgb, var(--surface-3) 84%, transparent);
  --mat-modal-blur: blur(24px) saturate(140%);
  --mat-modal-brd:  var(--border-2);
  --mat-modal-hi:   inset 0 1px 0 rgba(255, 255, 255, .10);
  --mat-modal-glow: none;
  --mat-modal-sh:   var(--mat-modal-hi), 0 32px 80px -24px rgba(0, 0, 0, .70);
  --mat-modal-scrim:      color-mix(in srgb, var(--bg-deep) 62%, transparent);
  --mat-modal-scrim-blur: none;
  --ss-grid-alpha:  .06;
  --ss-grid-pitch:  56px;
  --bgl-color:      var(--bg);
  --bgl-layer:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) calc(var(--ss-grid-alpha) * 100%), transparent) 0 1px, transparent 1px var(--ss-grid-pitch)),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--ink) calc(var(--ss-grid-alpha) * 100%), transparent) 0 1px, transparent 1px var(--ss-grid-pitch)),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  --bgl-attach:     fixed;
  --bgl-texture:    none;
  --bgl-texture-op: 0;
  --bgl-canvas-op:  1;
  --ss-star-alpha-far:  .16;
  --ss-star-alpha-mid:  .28;
  --ss-star-alpha-near: .40;
  --ss-hover-veil:      color-mix(in srgb, var(--ink) 4%, transparent);
  --ss-amber: #F2A63C;
  --ss-red:   #FF4D57;
  --btn-destructive-fill:         color-mix(in srgb, var(--ss-amber) 10%, var(--surface-2));
  --btn-destructive-ink:          var(--ss-amber);
  --btn-destructive-border:       color-mix(in srgb, var(--ss-amber) 45%, transparent);
  --btn-destructive-hover-fill:   color-mix(in srgb, var(--ss-amber) 26%, var(--surface-2));
  --btn-destructive-hover-ink:    var(--ss-amber);
  --btn-destructive-hover-border: var(--ss-amber);
  --btn-error-fill:         color-mix(in srgb, var(--ss-red) 10%, var(--surface-2));
  --btn-error-ink:          var(--ss-red);
  --btn-error-border:       color-mix(in srgb, var(--ss-red) 45%, transparent);
  --btn-error-hover-fill:   color-mix(in srgb, var(--ss-red) 26%, var(--surface-2));
  --btn-error-hover-ink:    var(--ss-red);
  --btn-error-hover-border: var(--ss-red);
  --ss-fleet-intent:    var(--ink-3);
}

:root[data-style="starship"] .ibtn {
  --btn-rest-fill: transparent;
  --btn-rest-border: transparent;
  --btn-hover-chrome-fill: transparent;
  --btn-hover-chrome-border: transparent;
  --btn-deco-hover:
    linear-gradient(var(--accent), var(--accent)) 0 0        / 7px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 0        / 1.5px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0     / 7px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0     / 1.5px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100%     / 7px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100%     / 1.5px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100%  / 7px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100%  / 1.5px 7px no-repeat;
  --btn-deco-hover-inset: 1px;
  --btn-deco-active-inset: 2px;
  --btn-deco-travel: 1;
  --btn-additive-ink: var(--accent);
  --btn-additive-hover-ink: var(--accent-2);
}

:root[data-style="starship"][data-theme="light"] {
  --ss-amber: #96580A;
  --ss-red:   #C0303C;
  --ss-grid-alpha: .08;
}

@media (prefers-reduced-transparency: reduce) {
  :root:root[data-style="starship"] {
    --mat-card-bg:    var(--surface);
    --mat-card-sh:    0 4px 10px -6px rgba(0, 0, 0, .60);
    --mat-popover-bg: var(--surface-2);
    --mat-popover-sh: 0 12px 24px -10px rgba(0, 0, 0, .70);
    --mat-modal-bg:   var(--surface-3);
    --mat-modal-sh:   0 24px 44px -14px rgba(0, 0, 0, .75);
    --mat-modal-scrim: var(--bg-deep);
  }
}

:root[data-style="starship"][data-reduce="1"] {
  --mat-card-bg:      var(--surface);
  --mat-card-blur:    none;
  --mat-card-sh:      0 4px 10px -6px rgba(0, 0, 0, .60);
  --mat-popover-bg:   var(--surface-2);
  --mat-popover-blur: none;
  --mat-popover-sh:   0 12px 24px -10px rgba(0, 0, 0, .70);
  --mat-modal-bg:     var(--surface-3);
  --mat-modal-blur:   none;
  --mat-modal-sh:     0 24px 44px -14px rgba(0, 0, 0, .75);
  --mat-modal-scrim:  var(--bg-deep);
  --mat-modal-scrim-blur: none;
}

:root[data-style="studio"] {
  --mark-radius:    var(--radius-sm);
  --mark-stroke-w:  0.9;
  --mark-ring-w:    2.2;
  --mark-rendering: geometricPrecision;
  --mark-fill:      color-mix(in srgb, var(--accent) 88%, var(--ink));
  --mark-fill-2:    var(--sea);
  --mark-grid:      color-mix(in srgb, var(--ink) 10%, transparent);
  --font-display: "Newsreader", Charter, Georgia, "Times New Roman", serif;
  --font-reading: "Geist", -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --font-ui:      "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-accent:  "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code:    var(--mono);
  --font-data-numeric: tabular-nums;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius: var(--radius-md);
  --hatch-op: 0;
  --star-op: 0;
  --chartline-op: 0;
  --mat-shell-bg:   var(--bg);
  --mat-shell-blur: none;
  --mat-shell-brd:  var(--border);
  --mat-shell-hi:   none;
  --mat-shell-sh:   none;
  --mat-card-bg:   var(--surface);
  --mat-card-blur: none;
  --mat-card-brd:  var(--border);
  --mat-card-hi:   inset 0 1px 0 rgba(255, 255, 255, .04);
  --mat-card-glow: none;
  --mat-card-sh:   var(--mat-card-hi);
  --mat-popover-bg:   var(--surface);
  --mat-popover-blur: none;
  --mat-popover-brd:  var(--border-2);
  --mat-popover-hi:   inset 0 1px 0 rgba(255, 255, 255, .06);
  --mat-popover-glow: none;
  --mat-popover-sh:   0 2px 4px rgba(0, 0, 0, .30), 0 8px 16px rgba(0, 0, 0, .40),
                      0 0 0 1px var(--studio-ring), var(--mat-popover-hi);
  --mat-modal-bg:   var(--surface-2);
  --mat-modal-blur: none;
  --mat-modal-brd:  var(--border-2);
  --mat-modal-hi:   inset 0 1px 0 rgba(255, 255, 255, .06);
  --mat-modal-glow: none;
  --mat-modal-sh:   0 24px 48px rgba(0, 0, 0, .50), 0 0 0 1px var(--studio-ring), var(--mat-modal-hi);
  --mat-modal-scrim:      color-mix(in srgb, var(--bg) 60%, transparent);
  --mat-modal-scrim-blur: none;
  --bgl-color:      var(--bg);
  --bgl-layer:      none;
  --bgl-attach:     fixed;
  --bgl-texture:    var(--studio-grain);
  --bgl-texture-op: var(--studio-grain-op);
  --bgl-canvas-op:  1;
  --studio-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E");
  --studio-grain-op: .015;
  --studio-ring: rgba(255, 255, 255, .06);
  --studio-well-a:       8%;
  --studio-well-hover-a: 12%;
  --studio-btn-well:     color-mix(in srgb, var(--ink) 12%, transparent);
  --ico-o20: inline;
  --ico-o16: none;
}

:root[data-style="studio"][data-theme="light"] {
  --mat-card-hi:      none;
  --mat-card-sh:      0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06);
  --mat-popover-hi:   none;
  --mat-popover-sh:   0 2px 4px rgba(0, 0, 0, .04), 0 8px 16px rgba(0, 0, 0, .08),
                      0 0 0 1px var(--studio-ring);
  --mat-modal-bg:     var(--surface);
  --mat-modal-hi:     none;
  --mat-modal-sh:     0 2px 4px rgba(0, 0, 0, .04), 0 8px 16px rgba(0, 0, 0, .08),
                      0 0 0 1px var(--studio-ring), 0 24px 48px rgba(0, 0, 0, .12);
  --studio-ring:      rgba(0, 0, 0, .02);
  --studio-grain-op:  0;
}

:root[data-style="studio"] #style-bg.style-bg-texture::after {
  mix-blend-mode: overlay;
}

@media (prefers-reduced-transparency: reduce) {
  :root:root[data-style="studio"] {
    --mat-modal-scrim: color-mix(in srgb, var(--bg) 92%, transparent);
    --studio-ring: var(--border);
  }
}

:root[data-style="studio"][data-reduce="1"] {
  --mat-modal-scrim: color-mix(in srgb, var(--bg) 92%, transparent);
  --studio-ring: var(--border);
}

:root[data-style="studio"] .ibtn {
  --btn-neutral-rest-fill: transparent;
  --btn-neutral-rest-border: transparent;
  --btn-destructive-rest-fill: transparent;
  --btn-destructive-rest-border: transparent;
  --btn-error-rest-fill: transparent;
  --btn-error-rest-border: transparent;
  --btn-additive-rest-fill: transparent;
  --btn-additive-rest-ink: var(--btn-additive-hover-fill);
  --btn-additive-hover-ink: var(--btn-additive-hover-fill);
  --btn-hover-chrome-fill: transparent;
  --btn-hover-chrome-border: transparent;
  --btn-deco-hover: var(--studio-btn-well);
  --btn-deco-inset: 50%;
  --btn-deco-hover-inset: 4px;
  --btn-deco-active-inset: 0px;
}

:root[data-style="mainframe"] {
  --mark-radius:    0;
  --mark-stroke-w:  1;
  --mark-cap:       butt;
  --mark-join:      miter;
  --mark-rendering: crispEdges;
  --mark-ring-w:    3;
  --mark-fill:      color-mix(in srgb, var(--accent) 96%, var(--bg));
  --mark-fill-2:    var(--yellow);
  --mark-grid:      color-mix(in srgb, var(--accent) 22%, transparent);
  --mf-face:      "Source Code Pro", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-display: var(--mf-face);
  --font-reading: var(--mf-face);
  --font-ui:      var(--mf-face);
  --font-data:    var(--mf-face);
  --font-accent:  var(--mf-face);
  --font-code:    var(--mono);
  --font-data-numeric: tabular-nums;
  --mf-display-w:  700;
  --mf-display-sz: 1.5rem;
  --mf-display-tr: .05em;
  --mf-reading-w:  400;
  --mf-reading-sz: .9375rem;
  --mf-reading-lh: 1.6;
  --mf-ui-w:       600;
  --mf-ui-sz:      .75rem;
  --mf-ui-tr:      .06em;
  --mf-data-w:     500;
  --mf-data-sz:    .8125rem;
  --mf-data-tr:    -.01em;
  --mf-accent-w:   700;
  --mf-accent-sz:  .6875rem;
  --mf-accent-tr:  .09em;
  --intent-neutral:     var(--ink-3);
  --intent-additive:    var(--accent);
  --intent-destructive: #DE5409;
  --intent-error:       #FF7A72;
  --btn-neutral-fill:         transparent;
  --btn-neutral-ink:          var(--intent-neutral);
  --btn-neutral-border:       var(--border-2);
  --btn-neutral-hover-fill:   var(--ink);
  --btn-neutral-hover-ink:    var(--bg);
  --btn-neutral-hover-border: var(--ink);
  --btn-additive-fill:         transparent;
  --btn-additive-ink:          var(--intent-additive);
  --btn-additive-border:       var(--intent-additive);
  --btn-additive-hover-fill:   var(--intent-additive);
  --btn-additive-hover-ink:    var(--bg);
  --btn-additive-hover-border: var(--intent-additive);
  --btn-destructive-fill:         transparent;
  --btn-destructive-ink:          var(--intent-destructive);
  --btn-destructive-border:       var(--intent-destructive);
  --btn-destructive-hover-fill:   var(--intent-destructive);
  --btn-destructive-hover-ink:    var(--bg);
  --btn-destructive-hover-border: var(--intent-destructive);
  --btn-error-fill:         transparent;
  --btn-error-ink:          var(--intent-error);
  --btn-error-border:       var(--intent-error);
  --btn-error-hover-fill:   var(--intent-error);
  --btn-error-hover-ink:    var(--bg);
  --btn-error-hover-border: var(--intent-error);
  --btn-neutral-rest-fill:       transparent;
  --btn-neutral-rest-border:     transparent;
  --btn-additive-rest-fill:      transparent;
  --btn-additive-rest-border:    transparent;
  --btn-destructive-rest-fill:   transparent;
  --btn-destructive-rest-border: transparent;
  --btn-error-rest-fill:         transparent;
  --btn-error-rest-border:       transparent;
  --btn-hover-chrome-ink: var(--bg);
  --mf-press:              color-mix(in srgb, var(--ink) 22%, transparent);
  --btn-deco-inset:        50%;
  --btn-deco-hover-inset:  50%;
  --btn-deco-active-inset: 0;
  --btn-deco-hover:        linear-gradient(var(--mf-press), var(--mf-press));
  --mat-shell-bg:   var(--bg-deep);
  --mat-shell-blur: none;
  --mat-shell-brd:  var(--border);
  --mat-shell-hi:   none;
  --mat-shell-sh:   none;
  --mat-card-bg:   var(--surface);
  --mat-card-blur: none;
  --mat-card-brd:  var(--border);
  --mat-card-hi:   inset 0 2px 0 var(--border-2);
  --mat-card-glow: 0 0 0 1px var(--accent);
  --mat-card-sh:   var(--mat-card-hi), 0 2px 6px -3px rgba(0, 0, 0, .45);
  --mat-popover-bg:   color-mix(in srgb, var(--surface-2) 90%, transparent);
  --mat-popover-blur: blur(8px) saturate(105%);
  --mat-popover-brd:  var(--border-2);
  --mat-popover-hi:   inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  --mat-popover-glow: none;
  --mat-popover-sh:   var(--mat-popover-hi), 0 14px 30px -12px rgba(0, 0, 0, .60);
  --mat-modal-bg:   var(--surface-2);
  --mat-modal-blur: none;
  --mat-modal-brd:  var(--border-2);
  --mat-modal-hi:   inset 0 2px 0 var(--accent);
  --mat-modal-glow: none;
  --mat-modal-sh:   var(--mat-modal-hi), 0 24px 50px -18px rgba(0, 0, 0, .65);
  --mat-modal-scrim:      color-mix(in srgb, var(--bg-deep) 72%, transparent);
  --mat-modal-scrim-blur: none;
  --raster-op:      .03;
  --bgl-color:      var(--bg-deep);
  --bgl-layer:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ink) calc(var(--raster-op) * 100%), transparent) 0 1px, transparent 1px 3px),
    radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(0, 0, 0, .07) 100%),
    linear-gradient(var(--bg-deep), var(--bg-deep));
  --bgl-attach:     fixed;
  --bgl-texture:    none;
  --bgl-texture-op: 0;
  --bgl-canvas-op:  0;
  --mf-bezel-glow:  color-mix(in srgb, var(--accent) 55%, transparent);
  --mf-select-fill: color-mix(in srgb, var(--ink) 2%, transparent);
  --mf-blink:       1.06s;
}

:root[data-style="mainframe"][data-theme="light"] {
  --raster-op: 0;
  --bgl-layer:
    radial-gradient(130% 110% at 50% 45%, transparent 60%, rgba(0, 0, 0, .04) 100%),
    linear-gradient(var(--bg-deep), var(--bg-deep));
  --intent-destructive: #B4520A;
  --intent-error:       #C1272D;
  --btn-neutral-rest-ink: var(--btn-neutral-hover-fill);
  --mf-bezel-glow:      transparent;
  --mf-select-fill:     color-mix(in srgb, var(--ink) 3%, transparent);
}

@media (prefers-reduced-transparency: reduce) {
  :root:root[data-style="mainframe"] {
    --mat-popover-bg: var(--surface-2);
    --mat-popover-sh: var(--mat-popover-hi), 0 14px 30px -12px rgba(0, 0, 0, .70);
    --mat-modal-scrim: var(--bg-deep);
  }
}

:root[data-style="mainframe"][data-reduce="1"] {
  --mat-popover-bg:   var(--surface-2);
  --mat-popover-blur: none;
  --mat-popover-sh:   var(--mat-popover-hi), 0 14px 30px -12px rgba(0, 0, 0, .70);
  --mat-modal-scrim:  var(--bg-deep);
  --mf-bezel-glow:    transparent;
}

:root[data-style="destroyer"] {
  --mark-radius:    0;
  --mark-stroke-w:  1.5;
  --mark-cap:       butt;
  --mark-join:      miter;
  --mark-rendering: crispEdges;
  --mark-ring-w:    3.4;
  --mark-fill:      color-mix(in srgb, var(--accent) 92%, var(--ink));
  --mark-fill-2:    var(--yellow);
  --mark-grid:      color-mix(in srgb, var(--border-2) 80%, transparent);
  --font-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --font-reading: "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --font-ui:      "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-data:    "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-accent:  "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-code:    var(--mono);
  --font-data-numeric: tabular-nums;
  --radius: 0px;
  --dz-chamfer: 4px;
  --intent-neutral:     var(--ink-2);
  --intent-additive:    var(--accent);
  --intent-destructive: #E39A33;
  --intent-error:       #EE493A;
  --intent-onfill:      var(--bg-deep);
  --btn-neutral-fill:         var(--surface-2);
  --btn-neutral-ink:          var(--intent-neutral);
  --btn-neutral-border:       var(--border-2);
  --btn-neutral-hover-fill:   var(--surface-3);
  --btn-neutral-hover-ink:    var(--ink);
  --btn-neutral-hover-border: var(--intent-neutral);
  --btn-additive-fill:         var(--intent-additive);
  --btn-additive-ink:          var(--onaccent);
  --btn-additive-border:       var(--intent-additive);
  --btn-additive-hover-fill:   var(--accent-2);
  --btn-additive-hover-ink:    var(--onaccent);
  --btn-additive-hover-border: var(--accent-2);
  --btn-destructive-fill:         color-mix(in srgb, var(--intent-destructive) 10%, var(--surface-2));
  --btn-destructive-ink:          var(--intent-destructive);
  --btn-destructive-border:       color-mix(in srgb, var(--intent-destructive) 45%, transparent);
  --btn-destructive-hover-fill:   color-mix(in srgb, var(--intent-destructive) 14%, var(--surface-2));
  --btn-destructive-hover-ink:    var(--intent-destructive);
  --btn-destructive-hover-border: var(--intent-destructive);
  --btn-error-fill:         color-mix(in srgb, var(--intent-error) 10%, var(--surface-2));
  --btn-error-ink:          var(--intent-error);
  --btn-error-border:       color-mix(in srgb, var(--intent-error) 45%, transparent);
  --btn-error-hover-fill:   color-mix(in srgb, var(--intent-error) 14%, var(--surface-2));
  --btn-error-hover-ink:    var(--intent-error);
  --btn-error-hover-border: var(--intent-error);
  --mat-shell-bg:   var(--bg);
  --mat-shell-blur: none;
  --mat-shell-brd:  var(--border);
  --mat-shell-hi:   none;
  --mat-shell-sh:   0 12px 30px -18px rgba(0, 0, 0, .55);
  --mat-card-bg:   var(--surface);
  --mat-card-blur: none;
  --mat-card-brd:  var(--border);
  --mat-card-hi:   inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent),
                   inset 0 -1px 0 rgba(0, 0, 0, .28);
  --mat-card-glow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  --mat-card-sh:   var(--mat-card-hi);
  --mat-popover-bg:   color-mix(in srgb, var(--surface-2) 92%, transparent);
  --mat-popover-blur: blur(6px) saturate(105%);
  --mat-popover-brd:  var(--border-2);
  --mat-popover-hi:   none;
  --mat-popover-glow: none;
  --mat-popover-sh:   inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent),
                      inset 0 -2px 0 rgba(0, 0, 0, .32);
  --mat-modal-bg:   var(--surface-3);
  --mat-modal-blur: none;
  --mat-modal-brd:  var(--border-2);
  --mat-modal-hi:   none;
  --mat-modal-glow: none;
  --mat-modal-sh:   inset 0 2px 0 color-mix(in srgb, var(--ink) 16%, transparent),
                    inset 0 -2px 0 rgba(0, 0, 0, .40);
  --mat-modal-scrim:      color-mix(in srgb, var(--bg-deep) 60%, transparent);
  --mat-modal-scrim-blur: blur(4px);
  --dz-ring-step: 63px;
  --dz-plate:
    repeating-radial-gradient(circle at 72% 102%,
      transparent 0 var(--dz-ring-step),
      color-mix(in srgb, var(--ink) 4%, transparent) var(--dz-ring-step) calc(var(--dz-ring-step) + 1px)),
    repeating-conic-gradient(from 0deg at 72% 102%,
      color-mix(in srgb, var(--ink) 4%, transparent) 0 .35deg, transparent .35deg 9deg),
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--ink) 3.5%, transparent) 0 1px, transparent 1px 6px);
  --dz-frozen:
    conic-gradient(from 0deg at 72% 102%,
      color-mix(in srgb, var(--ink) 24%, transparent) 0 .3deg, transparent .3deg);
  --bgl-color:      var(--bg);
  --bgl-layer:      var(--dz-plate), linear-gradient(var(--bg), var(--bg));
  --bgl-attach:     fixed;
  --bgl-texture:    none;
  --bgl-texture-op: 0;
  --bgl-canvas-op:  1;
  --dz-sweep-alpha: .24;
  --dz-sweep-trail: .01;
  --dz-sweep-worst: .27;
  --dz-sweep-field: .05;
  --dz-wash-plate: color-mix(in srgb, var(--ink) 3%, transparent);
  --dz-wash-edge:  color-mix(in srgb, var(--ink-2) 1.5%, transparent);
}

:root[data-style="destroyer"][data-theme="light"] {
  --intent-destructive: #8E530D;
  --intent-error:       #B02E24;
  --intent-onfill:      #FFFFFF;
}

:root[data-style="destroyer"] .ibtn {
  --btn-rest-fill: transparent;
  --btn-rest-border: transparent;
  --btn-hover-chrome-fill: transparent;
  --btn-hover-chrome-border: transparent;
  --btn-additive-ink: var(--intent-additive);
  --btn-additive-hover-ink: var(--accent-2);
  --dz-lock: var(--intent-additive);
  --btn-deco-hover:
    linear-gradient(var(--dz-lock), var(--dz-lock)) 0 0        / 8px 2px no-repeat,
    linear-gradient(var(--dz-lock), var(--dz-lock)) 0 0        / 2px 8px no-repeat,
    linear-gradient(var(--dz-lock), var(--dz-lock)) 100% 0     / 8px 2px no-repeat,
    linear-gradient(var(--dz-lock), var(--dz-lock)) 100% 0     / 2px 8px no-repeat,
    linear-gradient(var(--dz-lock), var(--dz-lock)) 0 100%     / 8px 2px no-repeat,
    linear-gradient(var(--dz-lock), var(--dz-lock)) 0 100%     / 2px 8px no-repeat,
    linear-gradient(var(--dz-lock), var(--dz-lock)) 100% 100%  / 8px 2px no-repeat,
    linear-gradient(var(--dz-lock), var(--dz-lock)) 100% 100%  / 2px 8px no-repeat;
  --btn-deco-hover-inset: 0px;
  --btn-deco-active-inset: 2px;
  --btn-deco-travel: 1;
}

:root[data-style="destroyer"] .ibtn[data-btn="destructive"] {
  --dz-lock: var(--intent-destructive);
}

:root[data-style="destroyer"] .ibtn[data-btn="error"] {
  --dz-lock: var(--intent-error);
}

@media (prefers-reduced-transparency: reduce) {
  :root:root[data-style="destroyer"] {
    --mat-popover-bg:  var(--surface-2);
    --mat-modal-scrim: color-mix(in srgb, var(--bg-deep) 78%, transparent);
  }
}

:root[data-style="destroyer"][data-reduce="1"] {
  --mat-popover-bg:  var(--surface-2);
  --mat-popover-blur: none;
  --mat-modal-scrim: color-mix(in srgb, var(--bg-deep) 78%, transparent);
  --mat-modal-scrim-blur: none;
}