/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --radius-sm: 0.25rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-zyna {
    border-radius: var(--z-corner);
  }
  .rounded-zyna-lg {
    border-radius: var(--z-corner-lg);
  }
  .rounded-zyna-sm {
    border-radius: var(--z-corner-sm);
  }
  .rounded-zyna-xl {
    border-radius: var(--z-corner-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .bg-zyna-danger {
    background-color: var(--z-color-danger);
  }
  .text-\[var\(--z-color-success\)\] {
    color: var(--z-color-success);
  }
  .text-zyna {
    color: #C9A84C;
  }
  .text-zyna-danger {
    color: var(--z-color-danger);
  }
  .text-zyna-info {
    color: var(--z-color-info);
  }
  .text-zyna-muted {
    color: var(--z-color-text-muted);
  }
  .text-zyna-success {
    color: var(--z-color-success);
  }
  .text-zyna-warning {
    color: var(--z-color-warning);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow\/glow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}
@layer base {
  :root {
    --zyna: #C9A84C;
    --zyna-dark: #7A6230;
    --zp-corner-sm: 7px;
    --zp-corner-md: 10px;
    --zp-corner-lg: 13px;
    --zp-corner-xl: 16px;
    --zp-corner-badge: 5px;
    --zp-corner-badge-lg: 6px;
    --zp-corner-card: 16px;
    --zp-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --zp-ease-snap: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --zp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --z-corner-sm: var(--zp-corner-sm);
    --z-corner: var(--zp-corner-md);
    --z-corner-lg: var(--zp-corner-lg);
    --z-corner-xl: var(--zp-corner-xl);
    --z-ease: var(--zp-ease-standard);
    --z-ease-snap: var(--zp-ease-snap);
    --z-ease-out: var(--zp-ease-out);
    --zp-success: #00FFB2;
    --zp-danger: #FF3366;
    --zp-warning: #FFB800;
    --zp-info: #00D4FF;
    --zp-text: #F0EBE0;
    --z-font-mono: 'DM Mono', 'Fira Code', ui-monospace, monospace;
    --z-color-text: var(--zp-text);
    @supports (color: color-mix(in lab, red, red)) {
      --z-color-text: color-mix(in oklch, var(--zp-text) 90%, transparent);
    }
    --z-color-text-muted: var(--zp-text);
    @supports (color: color-mix(in lab, red, red)) {
      --z-color-text-muted: color-mix(in oklch, var(--zp-text) 55%, transparent);
    }
    --z-color-text-dim: var(--zp-text);
    @supports (color: color-mix(in lab, red, red)) {
      --z-color-text-dim: color-mix(in oklch, var(--zp-text) 65%, transparent);
    }
    --z-color-text-solid: var(--zp-text);
    --z-color-text-inverse: #050407;
    --z-color-success: var(--zp-success);
    --z-color-danger: var(--zp-danger);
    --z-color-warning: var(--zp-warning);
    --z-color-info: var(--zp-info);
    --z-color-border: rgba(255,255,255,0.05);
    --z-color-border-dim: rgba(255,255,255,0.035);
    --z-color-overlay: rgba(255,255,255,0.04);
    --z-surface-page: #09080F;
    --z-surface-inset: #0C0B14;
    --z-surface-inset-hover: #0E0D18;
    --z-surface-inset-danger: #0C0508;
    --z-surface-inset-danger-hover: #100608;
    --z-surface-card: linear-gradient(145deg, rgba(18,16,28,0.97) 0%, rgba(10,9,18,0.97) 100%);
    --z-surface-card-deep: linear-gradient(145deg, rgba(5,4,10,0.99) 0%, rgba(3,2,7,0.99) 100%);
    --z-shadow-card: 0 24px 70px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.02);
    --z-shadow-card-deep: 0 30px 80px rgba(0,0,0,0.80), inset 0 1px 0 rgba(255,255,255,0.02);
    --z-duration-fast: 0.18s;
    --z-duration-base: 0.22s;
    --z-duration-slow: 0.28s;
    --z-duration-pulse: 2s;
    --z-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
    --z-ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
    --z-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  }
}
@layer base {
  @property --btn-bg {
    syntax: "*";
    inherits: false;
    initial-value: transparent;
  }
  @property --btn-color {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(240,235,224,0.55);
  }
  @property --btn-scan-color {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255,255,255,0.07);
  }
  @property --btn-interior {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
  }
  @property --btn-corner {
    syntax: "<length>";
    inherits: true;
    initial-value: 10px;
  }
  @keyframes zyna-scan {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(200%);
    }
  }
  .btn {
    --btn-bg: var(--z-color-overlay);
    --btn-color: var(--z-color-text-muted);
    --btn-filter: none;
    --btn-scan-color: color-mix(in oklch, white 7%, transparent);
    --btn-hover-color: var(--z-color-text);
    --btn-hover-filter: none;
    --btn-hover-text-shadow: none;
    --btn-active-filter: none;
    --btn-focus-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-focus-color: color-mix(in oklch, var(--zyna) 65%, transparent);
    }
    --btn-corner: var(--z-btn-corner);
    --btn-interior: transparent;
    --btn-inner-clip: var(--z-btn-inner-clip);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.5rem;
    font-family: var(--z-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border: none;
    clip-path: var(--z-btn-clip);
    transition: filter var(--z-duration-base) var(--z-ease-exit), color var(--z-duration-fast) var(--z-ease-exit), background var(--z-duration-fast) var(--z-ease-exit), transform var(--z-duration-fast) var(--z-ease-exit);
    background: var(--btn-bg);
    color: var(--btn-color);
    filter: var(--btn-filter);
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      clip-path: var(--btn-inner-clip);
      background: var(--btn-interior);
      z-index: -1;
      pointer-events: none;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--btn-scan-color) 0%, transparent var(--z-btn-scan-stop));
      opacity: 0;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--z-duration-slow) var(--z-ease-exit), opacity var(--z-duration-slow) var(--z-ease-exit);
      pointer-events: none;
    }
    &:hover {
      background: var(--btn-hover-bg, var(--btn-bg));
      color: var(--btn-hover-color, var(--btn-color));
      filter: var(--btn-hover-filter);
      text-shadow: var(--btn-hover-text-shadow);
      transition: filter var(--z-duration-base) var(--z-ease-enter), color var(--z-duration-fast) var(--z-ease-enter), background var(--z-duration-fast) var(--z-ease-enter), transform var(--z-duration-fast) var(--z-ease-enter);
    }
    &:hover::before {
      background: var(--btn-hover-interior, var(--btn-interior));
    }
    &:hover::after {
      opacity: 1;
      transform: scaleX(1);
      transition: transform var(--z-duration-slow) var(--z-ease-enter), opacity var(--z-duration-slow) var(--z-ease-enter);
    }
    &:active {
      transform: scale(var(--z-btn-active-scale));
      filter: var(--btn-active-filter);
    }
    &:focus-visible {
      outline: 1.5px solid var(--btn-focus-color);
      outline-offset: 3px;
    }
    &:disabled, &[aria-disabled="true"] {
      opacity: 0.28;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
  [role="button"] {
    --btn-bg: var(--z-color-overlay);
    --btn-color: var(--z-color-text-muted);
    --btn-filter: none;
    --btn-scan-color: color-mix(in oklch, white 7%, transparent);
    --btn-hover-color: var(--z-color-text);
    --btn-hover-filter: none;
    --btn-hover-text-shadow: none;
    --btn-active-filter: none;
    --btn-focus-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-focus-color: color-mix(in oklch, var(--zyna) 65%, transparent);
    }
    --btn-corner: var(--z-btn-corner);
    --btn-interior: transparent;
    --btn-inner-clip: var(--z-btn-inner-clip);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.5rem;
    font-family: var(--z-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border: none;
    clip-path: var(--z-btn-clip);
    transition: filter var(--z-duration-base) var(--z-ease-exit), color var(--z-duration-fast) var(--z-ease-exit), background var(--z-duration-fast) var(--z-ease-exit), transform var(--z-duration-fast) var(--z-ease-exit);
    background: var(--btn-bg);
    color: var(--btn-color);
    filter: var(--btn-filter);
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      clip-path: var(--btn-inner-clip);
      background: var(--btn-interior);
      z-index: -1;
      pointer-events: none;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--btn-scan-color) 0%, transparent var(--z-btn-scan-stop));
      opacity: 0;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--z-duration-slow) var(--z-ease-exit), opacity var(--z-duration-slow) var(--z-ease-exit);
      pointer-events: none;
    }
    &:hover {
      background: var(--btn-hover-bg, var(--btn-bg));
      color: var(--btn-hover-color, var(--btn-color));
      filter: var(--btn-hover-filter);
      text-shadow: var(--btn-hover-text-shadow);
      transition: filter var(--z-duration-base) var(--z-ease-enter), color var(--z-duration-fast) var(--z-ease-enter), background var(--z-duration-fast) var(--z-ease-enter), transform var(--z-duration-fast) var(--z-ease-enter);
    }
    &:hover::before {
      background: var(--btn-hover-interior, var(--btn-interior));
    }
    &:hover::after {
      opacity: 1;
      transform: scaleX(1);
      transition: transform var(--z-duration-slow) var(--z-ease-enter), opacity var(--z-duration-slow) var(--z-ease-enter);
    }
    &:active {
      transform: scale(var(--z-btn-active-scale));
      filter: var(--btn-active-filter);
    }
    &:focus-visible {
      outline: 1.5px solid var(--btn-focus-color);
      outline-offset: 3px;
    }
    &:disabled, &[aria-disabled="true"] {
      opacity: 0.28;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
  .btn-primary {
    --btn-bg: repeating-linear-gradient(110deg, transparent 0px, transparent 3px, color-mix(in oklch, white 5.5%, transparent) 3px, color-mix(in oklch, white 5.5%, transparent) 4px), linear-gradient(135deg, var(--zyna) 0%, var(--zyna-dark) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: repeating-linear-gradient(110deg, transparent 0px, transparent 3px, color-mix(in oklch, white 5.5%, transparent) 3px, color-mix(in oklch, white 5.5%, transparent) 4px), linear-gradient(135deg, color-mix(in oklch, var(--zyna) 85%, white) 0%, var(--zyna-dark) 100%);
    }
    --btn-color: var(--z-color-text-inverse);
    --btn-scan-color: color-mix(in oklch, white 26%, transparent);
    --btn-filter: drop-shadow(0 0 8px var(--zyna)) drop-shadow(0 0 22px var(--zyna));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-filter: drop-shadow(0 0 8px color-mix(in oklch, var(--zyna) 45%, transparent)) drop-shadow(0 0 22px color-mix(in oklch, var(--zyna) 18%, transparent));
    }
    --btn-hover-color: var(--z-color-text-inverse);
    --btn-hover-filter: drop-shadow(0 0 22px var(--zyna)) drop-shadow(0 0 60px var(--zyna)) brightness(1.10);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-filter: drop-shadow(0 0 22px var(--zyna)) drop-shadow(0 0 60px color-mix(in oklch, var(--zyna) 45%, transparent)) brightness(1.10);
    }
    --btn-hover-text-shadow: 0 0 20px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-text-shadow: 0 0 20px color-mix(in oklch, var(--zyna) 55%, white);
    }
    --btn-active-filter: brightness(0.80) drop-shadow(0 0 8px var(--zyna));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-active-filter: brightness(0.80) drop-shadow(0 0 8px color-mix(in oklch, var(--zyna) 60%, transparent));
    }
    @media (prefers-reduced-motion: reduce) {
      --btn-hover-filter: brightness(1.10);
    }
  }
  .btn-secondary {
    --btn-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklch, var(--zyna) 45%, transparent);
    }
    --btn-color: var(--zyna);
    --btn-scan-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-scan-color: color-mix(in oklch, var(--zyna) 18%, transparent);
    }
    --btn-interior: var(--z-surface-inset);
    --btn-hover-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-bg: color-mix(in oklch, var(--zyna) 92%, transparent);
    }
    --btn-hover-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-color: color-mix(in oklch, var(--zyna) 90%, white);
    }
    --btn-hover-filter: drop-shadow(0 0 14px var(--zyna)) drop-shadow(0 0 42px var(--zyna));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-filter: drop-shadow(0 0 14px color-mix(in oklch, var(--zyna) 85%, transparent)) drop-shadow(0 0 42px color-mix(in oklch, var(--zyna) 30%, transparent));
    }
    --btn-hover-text-shadow: 0 0 14px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-text-shadow: 0 0 14px color-mix(in oklch, var(--zyna) 80%, transparent);
    }
    --btn-hover-interior: var(--z-surface-inset-hover);
  }
  .btn-ghost {
    --btn-bg: transparent;
    --btn-color: var(--z-color-text-muted);
    --btn-scan-color: color-mix(in oklch, white 5.5%, transparent);
    --btn-hover-bg: var(--z-color-border);
    --btn-hover-color: var(--z-color-text);
    --btn-hover-filter: drop-shadow(0 0 8px color-mix(in oklch, white 10%, transparent));
    --btn-hover-text-shadow: 0 0 10px var(--zp-text);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-text-shadow: 0 0 10px color-mix(in oklch, var(--zp-text) 35%, transparent);
    }
  }
  .btn-danger {
    --btn-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-bg: color-mix(in oklch, var(--z-color-danger) 42%, transparent);
    }
    --btn-color: var(--z-color-danger);
    --btn-scan-color: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-scan-color: color-mix(in oklch, var(--z-color-danger) 18%, transparent);
    }
    --btn-interior: var(--z-surface-inset-danger);
    --btn-hover-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-bg: color-mix(in oklch, var(--z-color-danger) 92%, transparent);
    }
    --btn-hover-color: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-color: color-mix(in oklch, var(--z-color-danger) 75%, white);
    }
    --btn-hover-filter: drop-shadow(0 0 16px var(--z-color-danger)) drop-shadow(0 0 44px var(--z-color-danger));
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-filter: drop-shadow(0 0 16px color-mix(in oklch, var(--z-color-danger) 90%, transparent)) drop-shadow(0 0 44px color-mix(in oklch, var(--z-color-danger) 32%, transparent));
    }
    --btn-hover-text-shadow: 0 0 16px var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --btn-hover-text-shadow: 0 0 16px color-mix(in oklch, var(--z-color-danger) 95%, transparent);
    }
    --btn-hover-interior: var(--z-surface-inset-danger-hover);
  }
  .btn-sm {
    padding: 0.42rem 1rem;
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    --btn-corner: var(--z-corner-sm);
  }
  .btn-lg {
    padding: 0.9rem 2.1rem;
    font-size: 0.78rem;
    --btn-corner: var(--z-corner-lg);
  }
  .btn-icon {
    padding: 0.65rem;
    aspect-ratio: 1;
    --btn-corner: var(--z-corner-sm);
  }
  .btn-cut {
    clip-path: polygon(0 0, calc(100% - var(--btn-corner)) 0, 100% var(--btn-corner), 100% 100%, var(--btn-corner) 100%, 0 calc(100% - var(--btn-corner)));
    border-radius: 0;
    --btn-inner-clip: polygon(1px 1px, calc(100% - calc(var(--btn-corner) + 1px)) 1px, calc(100% - 1px) calc(var(--btn-corner) + 1px), calc(100% - 1px) calc(100% - 1px), calc(var(--btn-corner) + 1px) calc(100% - 1px), 1px calc(100% - calc(var(--btn-corner) + 1px)));
  }
  .btn-bevel {
    clip-path: polygon(var(--btn-corner) 0%, calc(100% - var(--btn-corner)) 0%, 100% var(--btn-corner), 100% calc(100% - var(--btn-corner)), calc(100% - var(--btn-corner)) 100%, var(--btn-corner) 100%, 0% calc(100% - var(--btn-corner)), 0% var(--btn-corner));
    --btn-inner-clip: polygon(calc(var(--btn-corner) + 1px) 1px, calc(100% - calc(var(--btn-corner) + 1px)) 1px, calc(100% - 1px) calc(var(--btn-corner) + 1px), calc(100% - 1px) calc(100% - calc(var(--btn-corner) + 1px)), calc(100% - calc(var(--btn-corner) + 1px)) calc(100% - 1px), calc(var(--btn-corner) + 1px) calc(100% - 1px), 1px calc(100% - calc(var(--btn-corner) + 1px)), 1px calc(var(--btn-corner) + 1px));
  }
  .btn-round {
    clip-path: inset(0 round 9999px);
    border-radius: 9999px;
    --btn-inner-clip: inset(1.5px round 9999px);
  }
  .btn-square {
    clip-path: inset(0);
    border-radius: 0;
    --btn-inner-clip: inset(1.5px);
  }
  @property --card-border-color {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255,255,255,0.05);
  }
  @property --card-glow-lo {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(0,0,0,0);
  }
  @property --card-glow-hi {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(0,0,0,0);
  }
  @keyframes zyna-card-pulse {
    0%, 100% {
      filter: drop-shadow(0 0 18px var(--card-glow-lo)) drop-shadow(0 0 6px var(--card-glow-lo));
    }
    50% {
      filter: drop-shadow(0 0 38px var(--card-glow-hi)) drop-shadow(0 0 14px var(--card-glow-hi));
    }
  }
  :where(.card) {
    --card-gradient: var(--z-card-gradient);
    --card-border-color: var(--z-card-border-color);
    --card-shadow: var(--z-card-shadow);
    --card-bracket-color: var(--z-card-bracket-color);
    --card-bracket-size: var(--z-card-bracket-size);
    --card-bracket-stroke: var(--z-card-bracket-stroke);
    --card-animation: none;
    --card-glow-lo: var(--z-card-default-glow-lo);
    --card-glow-hi: var(--z-card-default-glow-hi);
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
    contain: layout style;
    clip-path: var(--z-card-clip);
    filter: var(--z-card-filter);
    background: var(--z-card-texture), repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px), var(--card-gradient);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    animation: var(--card-animation);
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(to right,  var(--card-bracket-color), var(--card-bracket-color)), linear-gradient(to bottom, var(--card-bracket-color), var(--card-bracket-color)), linear-gradient(to left,   var(--card-bracket-color), var(--card-bracket-color)), linear-gradient(to bottom, var(--card-bracket-color), var(--card-bracket-color)), linear-gradient(to right,  var(--card-bracket-color), var(--card-bracket-color)), linear-gradient(to top,    var(--card-bracket-color), var(--card-bracket-color)), linear-gradient(to left,   var(--card-bracket-color), var(--card-bracket-color)), linear-gradient(to top,    var(--card-bracket-color), var(--card-bracket-color));
      background-size: var(--card-bracket-size) var(--card-bracket-stroke), var(--card-bracket-stroke) var(--card-bracket-size), var(--card-bracket-size) var(--card-bracket-stroke), var(--card-bracket-stroke) var(--card-bracket-size), var(--card-bracket-size) var(--card-bracket-stroke), var(--card-bracket-stroke) var(--card-bracket-size), var(--card-bracket-size) var(--card-bracket-stroke), var(--card-bracket-stroke) var(--card-bracket-size);
      background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
      background-repeat: no-repeat;
      z-index: 1;
      pointer-events: none;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--z-card-bar-height);
      background: var(--card-bar-gradient, var(--z-card-bar-bg));
      box-shadow: var(--card-bar-shadow, var(--z-card-bar-shadow));
      z-index: 1;
      pointer-events: none;
    }
  }
  :where(.card-body) {
    padding: 1.5rem;
    position: relative;
  }
  :where(.card-header) {
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid var(--card-header-border, var(--z-card-header-border));
    background: var(--card-header-bg, var(--z-card-header-bg));
    font-family: var(--z-font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: var(--z-card-header-letter-spacing);
    text-transform: uppercase;
    color: var(--card-header-color, var(--z-card-header-color));
    text-shadow: var(--card-header-text-shadow, var(--z-card-header-text-shadow));
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    &::before {
      content: "";
      width: var(--z-card-header-dot-size);
      height: var(--z-card-header-dot-size);
      border-radius: 50%;
      background: var(--card-header-dot-color, var(--z-card-header-dot-bg));
      flex-shrink: 0;
      box-shadow: var(--card-header-dot-shadow, var(--z-card-header-dot-shadow));
      animation: var(--z-card-header-dot-animation);
    }
  }
  :where(.card-footer) {
    padding: 0.7rem 1.25rem;
    border-top: 1px solid var(--card-header-border, var(--z-card-header-border));
  }
  :where(.card-title) {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: var(--z-color-text-solid);
    text-shadow: var(--card-title-text-shadow, var(--z-card-title-text-shadow));
    margin-bottom: 0.2rem;
  }
  :where(.card-subtitle) {
    font-size: 0.78rem;
    color: var(--z-color-text-muted);
    letter-spacing: 0.01em;
    margin-bottom: 0.85rem;
  }
  :where(.card-dark) {
    --card-gradient: var(--z-surface-card-deep);
    --card-border-color: var(--z-color-border-dim);
    --card-shadow: var(--z-shadow-card-deep);
    --card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --card-bracket-color: color-mix(in oklch, var(--zyna) 28%, transparent);
    }
    --card-bar-gradient: linear-gradient(90deg, transparent 0%, var(--zyna) 20%, var(--zyna) 80%, transparent 100%);
    @supports (color: color-mix(in lab, red, red)) {
      --card-bar-gradient: linear-gradient(90deg, transparent 0%, color-mix(in oklch, var(--zyna) 38%, transparent) 20%, color-mix(in oklch, var(--zyna) 38%, transparent) 80%, transparent 100%);
    }
  }
  :where(.card-glow) {
    --card-border-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --card-border-color: color-mix(in oklch, var(--zyna) 22%, transparent);
    }
    --card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --card-bracket-color: color-mix(in oklch, var(--zyna) 70%, transparent);
    }
    --card-bracket-size: 22px;
    --card-bar-gradient: linear-gradient(90deg, transparent 0%, var(--zyna) 20%, var(--zyna) 80%, transparent 100%);
    @supports (color: color-mix(in lab, red, red)) {
      --card-bar-gradient: linear-gradient(90deg, transparent 0%, color-mix(in oklch, var(--zyna) 80%, transparent) 20%, color-mix(in oklch, var(--zyna) 80%, transparent) 80%, transparent 100%);
    }
    --card-animation: zyna-card-pulse var(--z-card-glow-duration) ease-in-out infinite;
    --card-glow-lo: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --card-glow-lo: color-mix(in oklch, var(--zyna) 12%, transparent);
    }
    --card-glow-hi: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --card-glow-hi: color-mix(in oklch, var(--zyna) 26%, transparent);
    }
  }
  :where(.card-sm) :where(.card-header) {
    padding: 0.4rem 0.85rem;
  }
  :where(.card-sm) :where(.card-body) {
    padding: 0.75rem 0.85rem;
  }
  :where(.card-sm) :where(.card-footer) {
    padding: 0.4rem 0.85rem;
  }
  :where(.card-sm) :where(.card-title) {
    font-size: 0.85rem;
    margin-bottom: 0.1rem;
  }
  :where(.card-sm) :where(.card-subtitle) {
    font-size: 0.68rem;
    margin-bottom: 0.55rem;
  }
  :where(.card-round) {
    border-radius: var(--z-corner-xl);
    clip-path: none;
  }
  :where(.card-bevel) {
    clip-path: polygon(var(--zp-corner-card) 0%, calc(100% - var(--zp-corner-card)) 0%, 100% var(--zp-corner-card), 100% calc(100% - var(--zp-corner-card)), calc(100% - var(--zp-corner-card)) 100%, var(--zp-corner-card) 100%, 0% calc(100% - var(--zp-corner-card)), 0% var(--zp-corner-card));
    border-radius: 0;
    --card-shadow: none;
    --card-bar-shadow: none;
    filter: drop-shadow(0 24px 70px rgba(0,0,0,0.60)) drop-shadow(0 0 0 1px rgba(255,255,255,0.02));
  }
  @property --badge-offset {
    syntax: "<length>";
    inherits: true;
    initial-value: 5px;
  }
  @property --badge-bg {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255,255,255,0.04);
  }
  @property --badge-color {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(240,235,224,0.55);
  }
  @keyframes zyna-badge-scan {
    0%, 18% {
      transform: translateX(0);
    }
    52%, 100% {
      transform: translateX(340%);
    }
  }
  @keyframes zyna-pulse-ring {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    45% {
      opacity: 0.55;
      transform: scale(1.35);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes zyna-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.35;
      transform: scale(0.7);
    }
  }
  :where(.badge) {
    --badge-bg: var(--z-color-overlay);
    --badge-color: var(--z-color-text-muted);
    --badge-glow: none;
    --badge-scan-color: color-mix(in oklch, white 18%, transparent);
    --badge-offset: var(--zp-corner-badge);
    --badge-interior: transparent;
    --badge-inner-clip: var(--z-badge-inner-clip);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: var(--z-badge-padding);
    font-family: var(--z-font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: var(--z-badge-letter-spacing);
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    clip-path: var(--z-badge-clip, polygon(var(--badge-offset) 0%, 100% 0%, calc(100% - var(--badge-offset)) 100%, 0% 100%));
    border-radius: var(--z-badge-radius);
    background: var(--badge-bg);
    color: var(--badge-color);
    filter: var(--badge-glow);
    box-shadow: var(--z-badge-inset-shadow);
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      clip-path: var(--badge-inner-clip);
      background: var(--badge-interior);
      z-index: -1;
      pointer-events: none;
    }
    &:focus-visible {
      outline: 1.5px solid var(--badge-color);
      outline-offset: 3px;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -60%;
      width: 50%;
      background: linear-gradient(90deg, transparent, var(--badge-scan-color), transparent);
      animation: zyna-badge-scan var(--z-badge-scan-duration) var(--z-ease-spring) infinite;
      pointer-events: none;
    }
  }
  :where(.badge-outline) {
    --badge-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-color: color-mix(in oklch, var(--zyna) 85%, white);
    }
    --badge-bg: currentColor;
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, currentColor 80%, transparent);
    }
    --badge-interior: var(--z-surface-inset);
    --badge-glow: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 16px currentColor);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 6px color-mix(in oklch, currentColor 55%, transparent)) drop-shadow(0 0 16px color-mix(in oklch, currentColor 20%, transparent));
    }
  }
  :where(.badge-primary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 13%, transparent);
    }
    --badge-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-color: color-mix(in oklch, var(--zyna) 90%, white);
    }
    --badge-glow: drop-shadow(0 0 5px var(--zyna)) drop-shadow(0 0 14px var(--zyna));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 5px color-mix(in oklch, var(--zyna) 40%, transparent)) drop-shadow(0 0 14px color-mix(in oklch, var(--zyna) 14%, transparent));
    }
  }
  :where(.badge-secondary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 5%, transparent);
    }
    --badge-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-color: color-mix(in oklch, var(--zyna) 80%, transparent);
    }
  }
  :where(.badge-success) {
    --badge-bg: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-success) 10%, transparent);
    }
    --badge-color: var(--z-color-success);
    --badge-glow: drop-shadow(0 0 5px var(--z-color-success)) drop-shadow(0 0 14px var(--z-color-success));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 5px color-mix(in oklch, var(--z-color-success) 45%, transparent)) drop-shadow(0 0 14px color-mix(in oklch, var(--z-color-success) 14%, transparent));
    }
  }
  :where(.badge-danger) {
    --badge-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-danger) 10%, transparent);
    }
    --badge-color: var(--z-color-danger);
    --badge-glow: drop-shadow(0 0 5px var(--z-color-danger)) drop-shadow(0 0 14px var(--z-color-danger));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 5px color-mix(in oklch, var(--z-color-danger) 45%, transparent)) drop-shadow(0 0 14px color-mix(in oklch, var(--z-color-danger) 14%, transparent));
    }
  }
  :where(.badge-warning) {
    --badge-bg: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-warning) 10%, transparent);
    }
    --badge-color: var(--z-color-warning);
    --badge-glow: drop-shadow(0 0 5px var(--z-color-warning)) drop-shadow(0 0 12px var(--z-color-warning));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 5px color-mix(in oklch, var(--z-color-warning) 40%, transparent)) drop-shadow(0 0 12px color-mix(in oklch, var(--z-color-warning) 12%, transparent));
    }
  }
  :where(.badge-info) {
    --badge-bg: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-info) 10%, transparent);
    }
    --badge-color: var(--z-color-info);
    --badge-glow: drop-shadow(0 0 5px var(--z-color-info)) drop-shadow(0 0 14px var(--z-color-info));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 5px color-mix(in oklch, var(--z-color-info) 45%, transparent)) drop-shadow(0 0 14px color-mix(in oklch, var(--z-color-info) 14%, transparent));
    }
  }
  :where(.badge-neutral) {
    --badge-bg: var(--z-color-overlay);
    --badge-color: var(--z-color-text-muted);
  }
  :where(.badge-pulse) {
    --badge-dot-size: 5px;
    &::before {
      content: "";
      position: relative;
      inset: auto;
      clip-path: none;
      z-index: auto;
      background: currentColor;
      width: var(--badge-dot-size);
      height: var(--badge-dot-size);
      border-radius: 50%;
      flex-shrink: 0;
      animation: zyna-pulse-ring var(--z-duration-pulse) var(--z-ease-enter) infinite;
    }
  }
  :where(.badge-sm) {
    padding: 0.15rem 0.65rem;
    font-size: 0.55rem;
    --badge-offset: 3px;
    --badge-dot-size: 4px;
  }
  :where(.badge-lg) {
    padding: 0.32rem 1.05rem;
    font-size: 0.68rem;
    --badge-offset: var(--zp-corner-badge-lg);
    --badge-dot-size: 6px;
  }
  :where(.badge-slant) {
    clip-path: polygon(var(--badge-offset) 0%, 100% 0%, calc(100% - var(--badge-offset)) 100%, 0% 100%);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 2px) 2px, calc(100% - 2px) 2px, calc(100% - calc(var(--badge-offset) + 2px)) calc(100% - 2px), 2px calc(100% - 2px));
  }
  :where(.badge-rect) {
    clip-path: inset(0 round 3px);
    border-radius: 3px;
    --badge-inner-clip: inset(2px round 3px);
  }
  :where(.badge-pill) {
    clip-path: inset(0 round 9999px);
    border-radius: 9999px;
    --badge-inner-clip: inset(2px round 9999px);
  }
  :where(.badge-bevel) {
    clip-path: polygon(var(--badge-offset) 0%, calc(100% - var(--badge-offset)) 0%, 100% var(--badge-offset), 100% calc(100% - var(--badge-offset)), calc(100% - var(--badge-offset)) 100%, var(--badge-offset) 100%, 0% calc(100% - var(--badge-offset)), 0% var(--badge-offset));
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 2px) 2px, calc(100% - calc(var(--badge-offset) + 2px)) 2px, calc(100% - 2px) calc(var(--badge-offset) + 2px), calc(100% - 2px) calc(100% - calc(var(--badge-offset) + 2px)), calc(100% - calc(var(--badge-offset) + 2px)) calc(100% - 2px), calc(var(--badge-offset) + 2px) calc(100% - 2px), 2px calc(100% - calc(var(--badge-offset) + 2px)), 2px calc(var(--badge-offset) + 2px));
  }
  @property --alert-bar-color {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255,255,255,0.10);
  }
  @property --alert-bg {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(255,255,255,0.02);
  }
  @property --alert-color {
    syntax: "<color>";
    inherits: false;
    initial-value: rgba(240,235,224,0.65);
  }
  :where(.alert) {
    --alert-bar-color: rgba(255,255,255,0.10);
    --alert-bg: rgba(255,255,255,0.02);
    --alert-color: var(--z-color-text-dim);
    --alert-shadow: none;
    --alert-title-shadow: none;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: var(--z-alert-padding-top) 1.25rem 0.875rem var(--z-alert-padding-left);
    border-radius: var(--z-alert-radius);
    border: var(--z-alert-border);
    background-image: var(--z-alert-texture);
    background-color: var(--alert-bg);
    color: var(--alert-color);
    font-size: 0.82rem;
    line-height: 1.65;
    position: relative;
    box-shadow: var(--alert-shadow);
    &::before {
      content: "";
      position: absolute;
      inset: var(--z-alert-bar-inset);
      width: var(--z-alert-bar-w);
      height: var(--z-alert-bar-h);
      background: var(--alert-bar-color);
      box-shadow: var(--z-alert-bar-glow);
      border-radius: var(--z-alert-bar-radius);
    }
  }
  :where([role="alert"]) {
    --alert-bar-color: rgba(255,255,255,0.10);
    --alert-bg: rgba(255,255,255,0.02);
    --alert-color: var(--z-color-text-dim);
    --alert-shadow: none;
    --alert-title-shadow: none;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: var(--z-alert-padding-top) 1.25rem 0.875rem var(--z-alert-padding-left);
    border-radius: var(--z-alert-radius);
    border: var(--z-alert-border);
    background-image: var(--z-alert-texture);
    background-color: var(--alert-bg);
    color: var(--alert-color);
    font-size: 0.82rem;
    line-height: 1.65;
    position: relative;
    box-shadow: var(--alert-shadow);
    &::before {
      content: "";
      position: absolute;
      inset: var(--z-alert-bar-inset);
      width: var(--z-alert-bar-w);
      height: var(--z-alert-bar-h);
      background: var(--alert-bar-color);
      box-shadow: var(--z-alert-bar-glow);
      border-radius: var(--z-alert-bar-radius);
    }
  }
  :where(.alert-icon) {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
  }
  :where(.alert-title) {
    font-family: var(--z-font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    text-shadow: var(--alert-title-shadow);
    &::before {
      content: var(--z-alert-prefix);
      color: currentColor;
      opacity: var(--z-alert-prefix-opacity);
      font-weight: 400;
      letter-spacing: 0;
    }
  }
  :where(.alert-success) {
    --alert-bar-color: var(--z-color-success);
    --alert-bg: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-bg: color-mix(in oklch, var(--z-color-success) var(--z-alert-bg-opacity), transparent);
    }
    --alert-color: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-color: color-mix(in oklch, var(--z-color-success) 88%, transparent);
    }
    --alert-shadow: 0 0 30px var(--z-color-success), inset 4px 0 18px var(--z-color-success), inset 0 0 40px var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-shadow: 0 0 30px color-mix(in oklch, var(--z-color-success) 8%, transparent), inset 4px 0 18px color-mix(in oklch, var(--z-color-success) 5%, transparent), inset 0 0 40px color-mix(in oklch, var(--z-color-success) 2.5%, transparent);
    }
    --alert-title-shadow: 0 0 12px var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-title-shadow: 0 0 12px color-mix(in oklch, var(--z-color-success) 65%, transparent);
    }
  }
  :where(.alert-danger) {
    --alert-bar-color: var(--z-color-danger);
    --alert-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-bg: color-mix(in oklch, var(--z-color-danger) var(--z-alert-bg-opacity), transparent);
    }
    --alert-color: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-color: color-mix(in oklch, var(--z-color-danger) 88%, transparent);
    }
    --alert-shadow: 0 0 30px var(--z-color-danger), inset 4px 0 18px var(--z-color-danger), inset 0 0 40px var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-shadow: 0 0 30px color-mix(in oklch, var(--z-color-danger) 8%, transparent), inset 4px 0 18px color-mix(in oklch, var(--z-color-danger) 5%, transparent), inset 0 0 40px color-mix(in oklch, var(--z-color-danger) 2.5%, transparent);
    }
    --alert-title-shadow: 0 0 12px var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-title-shadow: 0 0 12px color-mix(in oklch, var(--z-color-danger) 65%, transparent);
    }
  }
  :where(.alert-warning) {
    --alert-bar-color: var(--z-color-warning);
    --alert-bg: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-bg: color-mix(in oklch, var(--z-color-warning) var(--z-alert-bg-opacity), transparent);
    }
    --alert-color: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-color: color-mix(in oklch, var(--z-color-warning) 88%, transparent);
    }
    --alert-shadow: 0 0 24px var(--z-color-warning), inset 4px 0 14px var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-shadow: 0 0 24px color-mix(in oklch, var(--z-color-warning) 7%, transparent), inset 4px 0 14px color-mix(in oklch, var(--z-color-warning) 4%, transparent);
    }
    --alert-title-shadow: 0 0 10px var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-title-shadow: 0 0 10px color-mix(in oklch, var(--z-color-warning) 55%, transparent);
    }
  }
  :where(.alert-info) {
    --alert-bar-color: var(--z-color-info);
    --alert-bg: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-bg: color-mix(in oklch, var(--z-color-info) var(--z-alert-bg-opacity), transparent);
    }
    --alert-color: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-color: color-mix(in oklch, var(--z-color-info) 88%, transparent);
    }
    --alert-shadow: 0 0 30px var(--z-color-info), inset 4px 0 18px var(--z-color-info), inset 0 0 40px var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-shadow: 0 0 30px color-mix(in oklch, var(--z-color-info) 8%, transparent), inset 4px 0 18px color-mix(in oklch, var(--z-color-info) 5%, transparent), inset 0 0 40px color-mix(in oklch, var(--z-color-info) 2.5%, transparent);
    }
    --alert-title-shadow: 0 0 12px var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --alert-title-shadow: 0 0 12px color-mix(in oklch, var(--z-color-info) 65%, transparent);
    }
  }
  :where(.alert-neutral) {
    --alert-bar-color: var(--z-color-border-dim);
    --alert-bg: var(--z-color-overlay);
    --alert-color: var(--z-color-text-dim);
  }
  :where(.alert-dark) {
    --alert-bar-color: color-mix(in oklch, white 14%, transparent);
    --alert-bg: color-mix(in oklch, white 3%, transparent);
    --alert-color: var(--z-color-text-dim);
  }
  :where(.alert-sm) {
    padding: 0.55rem 1rem 0.55rem var(--z-alert-padding-left);
    font-size: 0.74rem;
    line-height: 1.55;
  }
  :where(.alert-lg) {
    padding: 1.1rem 1.5rem 1.1rem var(--z-alert-padding-left);
    font-size: 0.9rem;
    line-height: 1.7;
  }
  :where(.alert-square) {
    border-radius: 0;
  }
  :where(.alert-round) {
    border-radius: 9999px;
    padding: 0.875rem 1.25rem;
    border: none;
    box-shadow: inset 0 0 0 var(--z-alert-bar-width) var(--alert-bar-color);
    &::before {
      display: none;
    }
  }
}
@layer base {
  @media (prefers-reduced-motion: reduce) {
    :where(.badge)::after {
      animation: none;
    }
    :where(.badge-pulse)::before {
      animation: none;
    }
    :where(.card) {
      animation: none;
    }
    :where(.card-header)::before {
      animation: none;
    }
    :where(.btn), :where([role="button"]) {
      transition: none;
    }
    :where(.btn):hover, :where([role="button"]):hover {
      transition: none;
    }
    :where(.btn)::after, :where([role="button"])::after {
      transition: none;
    }
  }
}
@layer base {
  html {
    color-scheme: dark;
    background-color: var(--z-surface-page);
    color: var(--z-color-text);
    --z-btn-clip: polygon(0 0, calc(100% - var(--btn-corner)) 0, 100% var(--btn-corner), 100% 100%, var(--btn-corner) 100%, 0 calc(100% - var(--btn-corner)));
    --z-btn-corner: var(--z-corner);
    --z-btn-inner-clip: polygon(1px 1px, calc(100% - calc(var(--btn-corner) + 1px)) 1px, calc(100% - 1px) calc(var(--btn-corner) + 1px), calc(100% - 1px) calc(100% - 1px), calc(var(--btn-corner) + 1px) calc(100% - 1px), 1px calc(100% - calc(var(--btn-corner) + 1px)));
    --z-btn-active-scale: 0.96;
    --z-btn-scan-stop: 70%;
    --z-alert-radius: 0 3px 3px 0;
    --z-alert-bar-width: 3px;
    --z-alert-prefix: "// ";
    --z-alert-bg-opacity: 5.5%;
    --z-alert-border: none;
    --z-alert-prefix-opacity: 0.38;
    --z-alert-bar-glow: none;
    --z-alert-texture: none;
    --z-alert-padding-top: 0.875rem;
    --z-alert-padding-left: calc(1.25rem + var(--z-alert-bar-width));
    --z-alert-bar-inset: 0 auto 0 0;
    --z-alert-bar-w: var(--z-alert-bar-width);
    --z-alert-bar-h: auto;
    --z-alert-bar-radius: 3px 0 0 3px;
    --z-card-clip: none;
    --z-card-filter: none;
    --z-card-texture: linear-gradient(transparent, transparent);
    --z-card-gradient: var(--z-surface-card);
    --z-card-border-color: var(--z-color-border);
    --z-card-shadow: var(--z-shadow-card);
    --z-card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bracket-color: color-mix(in oklch, var(--zyna) 42%, transparent);
    }
    --z-card-bracket-size: 20px;
    --z-card-bracket-stroke: 1.5px;
    --z-card-bar-height: 1px;
    --z-card-bar-bg: linear-gradient(90deg, transparent 0%, var(--zyna) 20%, var(--zyna) 80%, transparent 100%);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bar-bg: linear-gradient(90deg, transparent 0%, color-mix(in oklch, var(--zyna) 55%, transparent) 20%, color-mix(in oklch, var(--zyna) 55%, transparent) 80%, transparent 100%);
    }
    --z-card-bar-shadow: none;
    --z-card-header-bg: transparent;
    --z-card-header-border: var(--z-color-border);
    --z-card-header-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-color: color-mix(in oklch, var(--zyna) 75%, transparent);
    }
    --z-card-header-letter-spacing: 0.14em;
    --z-card-header-text-shadow: none;
    --z-card-header-dot-size: 5px;
    --z-card-header-dot-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-dot-bg: color-mix(in oklch, var(--zyna) 65%, transparent);
    }
    --z-card-header-dot-shadow: 0 0 6px var(--zyna), 0 0 16px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-dot-shadow: 0 0 6px color-mix(in oklch, var(--zyna) 65%, transparent), 0 0 16px color-mix(in oklch, var(--zyna) 30%, transparent);
    }
    --z-card-header-dot-animation: none;
    --z-card-title-text-shadow: none;
    --z-card-glow-duration: 4s;
    --z-card-default-glow-lo: rgba(0,0,0,0);
    --z-card-default-glow-hi: rgba(0,0,0,0);
    --z-badge-radius: 0;
    --z-badge-padding: 0.22rem 0.85rem;
    --z-badge-letter-spacing: 0.13em;
    --z-badge-inset-shadow: none;
    --z-badge-scan-duration: 5s;
    --z-badge-inner-clip: polygon(calc(var(--badge-offset) + 2px) 2px, calc(100% - 2px) 2px, calc(100% - calc(var(--badge-offset) + 2px)) calc(100% - 2px), 2px calc(100% - 2px));
    --z-topbar-border: var(--z-color-border);
    --z-topbar-glow: none;
    --z-sidebar-active-shadow: none;
  }
  html[data-genre="cyberpunk"] {
    --zyna: #39FF14;
    --zyna-dark: #1A8A00;
    --zp-success: #39FF14;
    --zp-danger: #FF073A;
    --zp-warning: #FFD700;
    --zp-info: #7B61FF;
    --zp-text: #E0FFE0;
    --z-font-mono: 'Share Tech Mono', 'Courier New', monospace;
    --z-duration-fast: 0.12s;
    --z-duration-base: 0.15s;
    --z-duration-slow: 0.20s;
    --z-ease-enter: cubic-bezier(0, 0.85, 0.1, 1);
    --z-ease-exit: cubic-bezier(0.9, 0, 1, 0.15);
    --z-ease-spring: cubic-bezier(0.5, 1.8, 0.5, 1);
    --zp-corner-badge: 14px;
    --z-btn-clip: inset(0);
    --z-btn-inner-clip: inset(1.5px);
    --z-btn-corner: 18px;
    --z-btn-active-scale: 0.94;
    --z-btn-scan-stop: 55%;
    --z-badge-clip: inset(0);
    --z-badge-padding: 0.24rem 0.8rem;
    --z-badge-letter-spacing: 0.16em;
    --z-badge-inset-shadow: inset 0 0 0 1px currentColor;
    --z-badge-scan-duration: 2.5s;
    --z-badge-inner-clip: inset(2px);
    --z-alert-radius: 0;
    --z-alert-bar-width: 5px;
    --z-alert-prefix: "> ";
    --z-alert-bg-opacity: 14%;
    --z-alert-border: 1px solid var(--alert-bar-color);
    @supports (color: color-mix(in lab, red, red)) {
      --z-alert-border: 1px solid color-mix(in oklch, var(--alert-bar-color) 35%, transparent);
    }
    --z-alert-prefix-opacity: 0.55;
    --z-alert-bar-glow: 0 0 14px var(--alert-bar-color), 0 0 30px var(--alert-bar-color);
    @supports (color: color-mix(in lab, red, red)) {
      --z-alert-bar-glow: 0 0 14px var(--alert-bar-color), 0 0 30px color-mix(in oklch, var(--alert-bar-color) 40%, transparent);
    }
    --z-alert-texture: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.018) 3px, rgba(255,255,255,0.018) 4px);
    --z-alert-padding-top: calc(0.875rem + var(--z-alert-bar-width));
    --z-alert-padding-left: 1.25rem;
    --z-alert-bar-inset: 0 0 auto 0;
    --z-alert-bar-w: 100%;
    --z-alert-bar-h: var(--z-alert-bar-width);
    --z-alert-bar-radius: 0;
    --z-card-gradient: linear-gradient(145deg, rgba(2,18,4,0.98) 0%, rgba(0,8,1,0.99) 100%);
    --z-card-border-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-border-color: color-mix(in oklch, var(--zyna) 60%, transparent);
    }
    --z-card-shadow: 0 0 0 1px var(--zyna), 0 8px 32px rgba(0,0,0,0.6);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-shadow: 0 0 0 1px color-mix(in oklch, var(--zyna) 25%, transparent), 0 8px 32px rgba(0,0,0,0.6);
    }
    --z-card-bar-height: 3px;
    --z-card-bar-bg: var(--zyna);
    --z-card-bar-shadow: 0 0 14px var(--zyna), 0 0 32px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bar-shadow: 0 0 14px var(--zyna), 0 0 32px color-mix(in oklch, var(--zyna) 50%, transparent);
    }
    --z-card-header-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-bg: color-mix(in oklch, var(--zyna) 10%, transparent);
    }
    --z-card-header-border: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-border: color-mix(in oklch, var(--zyna) 30%, transparent);
    }
    --z-card-header-color: var(--zyna);
    --z-card-header-letter-spacing: 0.18em;
    --z-card-header-text-shadow: 0 0 10px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-text-shadow: 0 0 10px color-mix(in oklch, var(--zyna) 60%, transparent);
    }
    --z-card-header-dot-size: 7px;
    --z-card-header-dot-bg: var(--zyna);
    --z-card-header-dot-shadow: 0 0 8px var(--zyna), 0 0 20px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-dot-shadow: 0 0 8px var(--zyna), 0 0 20px color-mix(in oklch, var(--zyna) 50%, transparent);
    }
    --z-card-header-dot-animation: zyna-pulse-ring var(--z-duration-pulse) var(--z-ease-enter) infinite;
    --z-card-bracket-size: 22px;
    --z-card-bracket-stroke: 2px;
    --z-card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bracket-color: color-mix(in oklch, var(--zyna) 80%, transparent);
    }
    --z-card-texture: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,255,20,0.022) 1px, rgba(0,255,20,0.022) 2px);
    --z-card-title-text-shadow: 0 0 18px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-title-text-shadow: 0 0 18px color-mix(in oklch, var(--zyna) 22%, transparent);
    }
    --z-card-glow-duration: 5s;
    --z-card-default-glow-lo: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-default-glow-lo: color-mix(in oklch, var(--zyna) 8%, transparent);
    }
    --z-card-default-glow-hi: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-default-glow-hi: color-mix(in oklch, var(--zyna) 22%, transparent);
    }
    --z-topbar-border: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-topbar-border: color-mix(in oklch, var(--zyna) 40%, transparent);
    }
    --z-topbar-glow: 0 1px 0 var(--zyna), 0 2px 14px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-topbar-glow: 0 1px 0 color-mix(in oklch, var(--zyna) 20%, transparent), 0 2px 14px color-mix(in oklch, var(--zyna) 10%, transparent);
    }
    --z-sidebar-active-shadow: inset 3px 0 0 var(--zyna), inset 6px 0 0 var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-sidebar-active-shadow: inset 3px 0 0 var(--zyna), inset 6px 0 0 color-mix(in oklch, var(--zyna) 30%, transparent);
    }
  }
  :where(html[data-genre="cyberpunk"]) :where(.badge-primary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 20%, transparent);
    }
    --badge-glow: drop-shadow(0 0 8px var(--zyna)) drop-shadow(0 0 20px var(--zyna));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 8px color-mix(in oklch, var(--zyna) 70%, transparent)) drop-shadow(0 0 20px color-mix(in oklch, var(--zyna) 28%, transparent));
    }
  }
  :where(html[data-genre="cyberpunk"]) :where(.badge-success) {
    --badge-bg: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-success) 18%, transparent);
    }
    --badge-glow: drop-shadow(0 0 8px var(--z-color-success)) drop-shadow(0 0 18px var(--z-color-success));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 8px color-mix(in oklch, var(--z-color-success) 70%, transparent)) drop-shadow(0 0 18px color-mix(in oklch, var(--z-color-success) 28%, transparent));
    }
  }
  :where(html[data-genre="cyberpunk"]) :where(.badge-danger) {
    --badge-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-danger) 18%, transparent);
    }
    --badge-glow: drop-shadow(0 0 8px var(--z-color-danger)) drop-shadow(0 0 18px var(--z-color-danger));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 8px color-mix(in oklch, var(--z-color-danger) 70%, transparent)) drop-shadow(0 0 18px color-mix(in oklch, var(--z-color-danger) 28%, transparent));
    }
  }
  :where(html[data-genre="cyberpunk"]) :where(.badge-warning) {
    --badge-bg: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-warning) 18%, transparent);
    }
    --badge-glow: drop-shadow(0 0 8px var(--z-color-warning)) drop-shadow(0 0 16px var(--z-color-warning));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 8px color-mix(in oklch, var(--z-color-warning) 65%, transparent)) drop-shadow(0 0 16px color-mix(in oklch, var(--z-color-warning) 25%, transparent));
    }
  }
  :where(html[data-genre="cyberpunk"]) :where(.badge-info) {
    --badge-bg: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-info) 18%, transparent);
    }
    --badge-glow: drop-shadow(0 0 8px var(--z-color-info)) drop-shadow(0 0 18px var(--z-color-info));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 8px color-mix(in oklch, var(--z-color-info) 70%, transparent)) drop-shadow(0 0 18px color-mix(in oklch, var(--z-color-info) 28%, transparent));
    }
  }
  :where(html[data-genre="cyberpunk"]) :where(.badge-secondary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 10%, transparent);
    }
    --badge-glow: drop-shadow(0 0 6px var(--zyna));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 6px color-mix(in oklch, var(--zyna) 45%, transparent));
    }
  }
  :where(html[data-genre="cyberpunk"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--zyna) 2px, var(--zyna) 3px);
    @supports (color: color-mix(in lab, red, red)) {
      background: repeating-linear-gradient(0deg, transparent, transparent 2px, color-mix(in oklch, var(--zyna) 4.5%, transparent) 2px, color-mix(in oklch, var(--zyna) 4.5%, transparent) 3px);
    }
  }
  html[data-genre="corporate"] {
    --zyna: #1D3557;
    --zyna-dark: #0D1F36;
    --zp-success: #1A6B45;
    --zp-danger: #A31621;
    --zp-warning: #926B00;
    --zp-info: #2A5B8C;
    --zp-text: #1C1A18;
    --z-color-text-inverse: #F5F4F0;
    --z-surface-page: #F5F4F0;
    --z-surface-inset: #EDE9E2;
    --z-surface-inset-hover: #E6E2D9;
    --z-surface-inset-danger: #FCF0F0;
    --z-surface-inset-danger-hover: #F7E4E4;
    --z-surface-card: linear-gradient(160deg, #FFFFFF 0%, #F8F7F3 100%);
    --z-surface-card-deep: linear-gradient(160deg, #F4F3EF 0%, #ECEAE3 100%);
    --z-color-border: rgba(28,27,22,0.10);
    --z-color-border-dim: rgba(28,27,22,0.055);
    --z-color-overlay: rgba(28,27,22,0.03);
    --z-shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05);
    --z-shadow-card-deep: 0 2px 8px rgba(0,0,0,0.09), 0 12px 32px rgba(0,0,0,0.06);
    --bg: #F5F4F0;
    --bg2: #EDEAE3;
    --bg3: #E5E1D9;
    --border: rgba(28,27,22,0.13);
    --border2: rgba(28,27,22,0.07);
    --text: #1C1A18;
    --text2: #6B6560;
    --text3: #9E9994;
    --topbar-bg: rgba(244,243,238,0.93);
    --z-panel-bg: #EDEAE3;
    --z-panel-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --z-duration-fast: 0.20s;
    --z-duration-base: 0.28s;
    --z-duration-slow: 0.38s;
    --z-duration-pulse: 3.5s;
    --z-ease-enter: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --z-ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --z-ease-spring: cubic-bezier(0.34, 1.06, 0.64, 1);
    color-scheme: light;
    --z-btn-clip: polygon(0 0, calc(100% - var(--btn-corner)) 0, 100% var(--btn-corner), 100% 100%, 0 100%);
    --z-btn-inner-clip: polygon(1px 1px, calc(100% - calc(var(--btn-corner) + 1px)) 1px, calc(100% - 1px) calc(var(--btn-corner) + 1px), calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px));
    --z-btn-corner: 10px;
    --z-btn-active-scale: 0.97;
    --z-btn-scan-stop: 38%;
    --z-badge-clip: inset(0 round 3px);
    --z-badge-radius: 3px;
    --z-badge-padding: 0.19rem 0.75rem;
    --z-badge-letter-spacing: 0.07em;
    --z-badge-inset-shadow: inset 0 0 0 1px currentColor;
    --z-badge-scan-duration: 9s;
    --z-badge-inner-clip: inset(2px round 1px);
    --z-alert-radius: 0 3px 3px 0;
    --z-alert-bar-width: 2.5px;
    --z-alert-prefix: "§ ";
    --z-alert-bg-opacity: 5%;
    --z-alert-border: 1px solid rgba(28,27,22,0.07);
    --z-alert-prefix-opacity: 0.38;
    --z-alert-bar-glow: none;
    --z-alert-texture: none;
    --z-alert-padding-top: 0.875rem;
    --z-alert-padding-left: calc(1.25rem + var(--z-alert-bar-width));
    --z-alert-bar-inset: 0 auto 0 0;
    --z-alert-bar-w: var(--z-alert-bar-width);
    --z-alert-bar-h: auto;
    --z-alert-bar-radius: 0;
    --z-card-clip: none;
    --z-card-filter: none;
    --z-card-texture: none;
    --z-card-gradient: var(--z-surface-card);
    --z-card-border-color: rgba(28,27,22,0.09);
    --z-card-shadow: var(--z-shadow-card);
    --z-card-bracket-color: transparent;
    --z-card-bracket-size: 0px;
    --z-card-bracket-stroke: 0px;
    --z-card-bar-height: 2px;
    --z-card-bar-bg: linear-gradient(90deg, var(--zyna) 0%, var(--zyna) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bar-bg: linear-gradient(90deg, var(--zyna) 0%, color-mix(in oklch, var(--zyna) 0%, transparent) 100%);
    }
    --z-card-bar-shadow: none;
    --z-card-header-bg: rgba(29,53,87,0.04);
    --z-card-header-border: rgba(29,53,87,0.11);
    --z-card-header-color: var(--zyna);
    --z-card-header-letter-spacing: 0.08em;
    --z-card-header-text-shadow: none;
    --z-card-header-dot-size: 4px;
    --z-card-header-dot-bg: var(--zyna);
    --z-card-header-dot-shadow: none;
    --z-card-header-dot-animation: none;
    --z-card-title-text-shadow: none;
    --z-card-glow-duration: 8s;
    --z-card-default-glow-lo: rgba(29,53,87,0.03);
    --z-card-default-glow-hi: rgba(29,53,87,0.08);
    --z-topbar-border: rgba(28,27,22,0.09);
    --z-topbar-glow: none;
    --z-sidebar-active-shadow: inset 3px 0 0 var(--zyna);
  }
  :where(html[data-genre="corporate"]) :where(.badge-primary) {
    --badge-bg: transparent;
    --badge-glow: none;
  }
  :where(html[data-genre="corporate"]) :where(.badge-success) {
    --badge-bg: transparent;
    --badge-glow: none;
  }
  :where(html[data-genre="corporate"]) :where(.badge-danger) {
    --badge-bg: transparent;
    --badge-glow: none;
  }
  :where(html[data-genre="corporate"]) :where(.badge-warning) {
    --badge-bg: transparent;
    --badge-glow: none;
  }
  :where(html[data-genre="corporate"]) :where(.badge-info) {
    --badge-bg: transparent;
    --badge-glow: none;
  }
  :where(html[data-genre="corporate"]) :where(.badge-secondary) {
    --badge-bg: transparent;
    --badge-glow: none;
  }
  :where(html[data-genre="corporate"]) :where(.badge-slant) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), 1px calc(100% - 1px));
  }
  :where(html[data-genre="corporate"]) :where(.badge-bevel) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) 1px, calc(100% - 1px) calc(var(--badge-offset) + 1px), calc(100% - 1px) calc(100% - calc(var(--badge-offset) + 1px)), calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), calc(var(--badge-offset) + 1px) calc(100% - 1px), 1px calc(100% - calc(var(--badge-offset) + 1px)), 1px calc(var(--badge-offset) + 1px));
  }
  :where(html[data-genre="corporate"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(rgba(29,53,87,0.045) 0 1px, transparent 1px 100%), repeating-linear-gradient(90deg, rgba(29,53,87,0.045) 0 1px, transparent 1px 100%);
    background-size: 24px 24px;
  }
  @keyframes phosphor-sweep {
    0% {
      transform: translateY(-200px);
    }
    100% {
      transform: translateY(100vh);
    }
  }
  html[data-genre="phosphor"] {
    --zyna: #FF9F0A;
    --zyna-dark: #C97300;
    --zp-success: #6EC96C;
    --zp-danger: #FF4E4E;
    --zp-warning: #FFD060;
    --zp-info: #5BBFFF;
    --zp-text: #FFB742;
    --z-color-text-inverse: #0A0700;
    --z-surface-page: #0A0700;
    --z-surface-inset: #120D02;
    --z-surface-inset-hover: #1A1200;
    --z-surface-inset-danger: #1A0600;
    --z-surface-inset-danger-hover: #220800;
    --z-surface-card: linear-gradient(160deg, #120D02 0%, #0A0700 100%);
    --z-surface-card-deep: linear-gradient(160deg, #1A1200 0%, #120D02 100%);
    --z-color-border: rgba(255,159,10,0.12);
    --z-color-border-dim: rgba(255,159,10,0.06);
    --z-color-overlay: rgba(255,159,10,0.05);
    --z-shadow-card: 0 2px 8px rgba(0,0,0,0.5), 0 0 20px rgba(255,159,10,0.04);
    --z-shadow-card-deep: 0 4px 16px rgba(0,0,0,0.7), 0 0 40px rgba(255,159,10,0.06);
    --bg: #0A0700;
    --bg2: #120D02;
    --bg3: #1A1200;
    --border: rgba(255,159,10,0.13);
    --border2: rgba(255,159,10,0.07);
    --text: #FFB742;
    --text2: rgba(255,183,66,0.60);
    --text3: rgba(255,183,66,0.35);
    --topbar-bg: rgba(10,7,0,0.93);
    --z-panel-bg: #120D02;
    --z-panel-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 30px rgba(255,159,10,0.05);
    --z-font-mono: 'VT323', 'Courier New', monospace;
    --z-duration-fast: 0.16s;
    --z-duration-base: 0.24s;
    --z-duration-slow: 0.32s;
    --z-duration-pulse: 4s;
    --z-ease-enter: steps(6, end);
    --z-ease-exit: steps(4, start);
    --z-ease-spring: steps(8, end);
    color-scheme: dark;
    --z-btn-clip: polygon(var(--btn-corner) 0, 100% 0, 100% 100%, var(--btn-corner) 100%, 0 50%);
    --z-btn-inner-clip: polygon(calc(var(--btn-corner) + 1px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(var(--btn-corner) + 1px) calc(100% - 1px), 1px 50%);
    --z-btn-corner: 14px;
    --z-btn-active-scale: 0.97;
    --z-btn-scan-stop: 55%;
    --z-badge-clip: inset(0);
    --z-badge-radius: 0;
    --z-badge-padding: 0.20rem 0.70rem;
    --z-badge-letter-spacing: 0.10em;
    --z-badge-inset-shadow: inset 0 0 0 1px currentColor;
    --z-badge-scan-duration: 9s;
    --z-badge-inner-clip: inset(2px);
    --z-alert-radius: 3px 0 0 3px;
    --z-alert-bar-width: 3px;
    --z-alert-prefix: ">> ";
    --z-alert-bg-opacity: 8%;
    --z-alert-border: 1px solid rgba(255,159,10,0.10);
    --z-alert-prefix-opacity: 0.55;
    --z-alert-bar-glow: 0 0 10px var(--alert-bar-color), 0 0 20px var(--alert-bar-color);
    @supports (color: color-mix(in lab, red, red)) {
      --z-alert-bar-glow: 0 0 10px var(--alert-bar-color), 0 0 20px color-mix(in oklch, var(--alert-bar-color) 40%, transparent);
    }
    --z-alert-texture: none;
    --z-alert-padding-top: 0.875rem;
    --z-alert-padding-left: 1.25rem;
    --z-alert-bar-inset: 0 0 0 auto;
    --z-alert-bar-w: var(--z-alert-bar-width);
    --z-alert-bar-h: auto;
    --z-alert-bar-radius: 0;
    --z-card-clip: none;
    --z-card-filter: none;
    --z-card-texture: none;
    --z-card-gradient: var(--z-surface-card);
    --z-card-border-color: rgba(255,159,10,0.14);
    --z-card-shadow: var(--z-shadow-card);
    --z-card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bracket-color: color-mix(in oklch, var(--zyna) 38%, transparent);
    }
    --z-card-bracket-size: 16px;
    --z-card-bracket-stroke: 1px;
    --z-card-bar-height: 1px;
    --z-card-bar-bg: linear-gradient(90deg, var(--zyna) 0%, var(--zyna) 100%);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bar-bg: linear-gradient(90deg, var(--zyna) 0%, color-mix(in oklch, var(--zyna) 0%, transparent) 100%);
    }
    --z-card-bar-shadow: 0 0 8px rgba(255,159,10,0.6), 0 0 20px rgba(255,159,10,0.2);
    --z-card-header-bg: rgba(255,159,10,0.06);
    --z-card-header-border: rgba(255,159,10,0.14);
    --z-card-header-color: var(--zyna);
    --z-card-header-letter-spacing: 0.16em;
    --z-card-header-text-shadow: 0 0 12px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-text-shadow: 0 0 12px color-mix(in oklch, var(--zyna) 55%, transparent);
    }
    --z-card-header-dot-size: 5px;
    --z-card-header-dot-bg: var(--zyna);
    --z-card-header-dot-shadow: 0 0 6px var(--zyna), 0 0 14px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-dot-shadow: 0 0 6px var(--zyna), 0 0 14px color-mix(in oklch, var(--zyna) 50%, transparent);
    }
    --z-card-header-dot-animation: zyna-pulse-ring var(--z-duration-pulse) var(--z-ease-enter) infinite;
    --z-card-title-text-shadow: 0 0 14px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-title-text-shadow: 0 0 14px color-mix(in oklch, var(--zyna) 22%, transparent);
    }
    --z-card-glow-duration: 6s;
    --z-card-default-glow-lo: rgba(255,159,10,0.04);
    --z-card-default-glow-hi: rgba(255,159,10,0.12);
    --z-topbar-border: rgba(255,159,10,0.15);
    --z-topbar-glow: 0 1px 0 rgba(255,159,10,0.10), 0 2px 16px rgba(255,159,10,0.05);
    --z-sidebar-active-shadow: inset 3px 0 0 var(--zyna), inset 6px 0 0 var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-sidebar-active-shadow: inset 3px 0 0 var(--zyna), inset 6px 0 0 color-mix(in oklch, var(--zyna) 25%, transparent);
    }
  }
  :where(html[data-genre="phosphor"]) :where(.badge-primary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 15%, transparent);
    }
    --badge-glow: drop-shadow(0 0 6px var(--zyna)) drop-shadow(0 0 16px var(--zyna));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 6px color-mix(in oklch, var(--zyna) 65%, transparent)) drop-shadow(0 0 16px color-mix(in oklch, var(--zyna) 25%, transparent));
    }
  }
  :where(html[data-genre="phosphor"]) :where(.badge-success) {
    --badge-bg: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-success) 12%, transparent);
    }
    --badge-glow: drop-shadow(0 0 6px var(--z-color-success));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 6px color-mix(in oklch, var(--z-color-success) 65%, transparent));
    }
  }
  :where(html[data-genre="phosphor"]) :where(.badge-danger) {
    --badge-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-danger) 12%, transparent);
    }
    --badge-glow: drop-shadow(0 0 6px var(--z-color-danger));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 6px color-mix(in oklch, var(--z-color-danger) 65%, transparent));
    }
  }
  :where(html[data-genre="phosphor"]) :where(.badge-warning) {
    --badge-bg: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-warning) 12%, transparent);
    }
    --badge-glow: drop-shadow(0 0 6px var(--z-color-warning));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 6px color-mix(in oklch, var(--z-color-warning) 65%, transparent));
    }
  }
  :where(html[data-genre="phosphor"]) :where(.badge-info) {
    --badge-bg: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-info) 12%, transparent);
    }
    --badge-glow: drop-shadow(0 0 6px var(--z-color-info));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 6px color-mix(in oklch, var(--z-color-info) 65%, transparent));
    }
  }
  :where(html[data-genre="phosphor"]) :where(.badge-secondary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 8%, transparent);
    }
    --badge-glow: drop-shadow(0 0 4px var(--zyna));
    @supports (color: color-mix(in lab, red, red)) {
      --badge-glow: drop-shadow(0 0 4px color-mix(in oklch, var(--zyna) 40%, transparent));
    }
  }
  :where(html[data-genre="phosphor"]) :where(.badge)::after {
    animation: zyna-badge-scan var(--z-badge-scan-duration) linear infinite;
  }
  :where(html[data-genre="phosphor"]) :where(.badge-pulse)::before {
    animation: zyna-pulse-ring var(--z-duration-pulse) ease-in-out infinite;
  }
  :where(html[data-genre="phosphor"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px), radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.65) 100%);
  }
  :where(html[data-genre="phosphor"]) body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(transparent 0%, rgba(255,159,10,0.025) 35%, rgba(255,159,10,0.055) 50%, rgba(255,159,10,0.025) 65%, transparent 100%);
    transform: translateY(-200px);
    animation: phosphor-sweep 8s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(html[data-genre="atelier"]) body::after {
      animation: none;
    }
  }
  @keyframes field-sweep {
    0% {
      transform: translateY(100vh);
    }
    100% {
      transform: translateY(-160px);
    }
  }
  html[data-genre="military"] {
    --zyna: #8B9E4B;
    --zyna-dark: #5C6B2F;
    --zp-success: #5B8A3C;
    --zp-danger: #CC3300;
    --zp-warning: #C98A00;
    --zp-info: #4A7FA5;
    --zp-text: #B8BD9B;
    --z-color-text-inverse: #131510;
    --z-surface-page: #131510;
    --z-surface-inset: #1A1D13;
    --z-surface-inset-hover: #1F2318;
    --z-surface-inset-danger: #1A1208;
    --z-surface-inset-danger-hover: #201508;
    --z-surface-card: linear-gradient(160deg, #1B1F13 0%, #131510 100%);
    --z-surface-card-deep: linear-gradient(160deg, #1F2318 0%, #1A1D13 100%);
    --z-color-border: rgba(139,158,75,0.12);
    --z-color-border-dim: rgba(139,158,75,0.06);
    --z-color-overlay: rgba(139,158,75,0.04);
    --z-shadow-card: 0 2px 8px rgba(0,0,0,0.60), 0 0 24px rgba(139,158,75,0.03);
    --z-shadow-card-deep: 0 4px 18px rgba(0,0,0,0.75), 0 0 40px rgba(139,158,75,0.05);
    --bg: #131510;
    --bg2: #1A1D13;
    --bg3: #1F2318;
    --border: rgba(139,158,75,0.13);
    --border2: rgba(139,158,75,0.07);
    --text: #B8BD9B;
    --text2: rgba(184,189,155,0.55);
    --text3: rgba(184,189,155,0.32);
    --topbar-bg: rgba(19,21,16,0.93);
    --z-panel-bg: #1A1D13;
    --z-panel-shadow: 0 8px 24px rgba(0,0,0,0.65), 0 0 28px rgba(139,158,75,0.04);
    --z-font-mono: 'Share Tech Mono', 'Courier New', monospace;
    --z-duration-fast: 0.15s;
    --z-duration-base: 0.22s;
    --z-duration-slow: 0.30s;
    --z-duration-pulse: 3s;
    --z-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --z-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --z-ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color-scheme: dark;
    --z-btn-clip: polygon(var(--btn-corner) 0, 100% 0, 100% calc(100% - var(--btn-corner)), calc(100% - var(--btn-corner)) 100%, 0 100%, 0 var(--btn-corner));
    --z-btn-inner-clip: polygon(calc(var(--btn-corner) + 1px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - calc(var(--btn-corner) + 1px)), calc(100% - calc(var(--btn-corner) + 1px)) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--btn-corner) + 1px));
    --z-btn-corner: 10px;
    --z-btn-active-scale: 0.97;
    --z-btn-scan-stop: 60%;
    --z-badge-clip: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    --z-badge-radius: 0;
    --z-badge-padding: 0.20rem 0.75rem;
    --z-badge-letter-spacing: 0.11em;
    --z-badge-inset-shadow: inset 0 0 0 1px currentColor;
    --z-badge-scan-duration: 6s;
    --z-badge-inner-clip: polygon(1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 9px calc(100% - 1px), 1px calc(100% - 9px));
    --z-alert-radius: 3px 3px 0 0;
    --z-alert-bar-width: 3px;
    --z-alert-prefix: "◈ ";
    --z-alert-bg-opacity: 6%;
    --z-alert-border: none;
    --z-alert-prefix-opacity: 0.45;
    --z-alert-bar-glow: none;
    --z-alert-texture: none;
    --z-alert-padding-top: 0.875rem;
    --z-alert-padding-left: 1.25rem;
    --z-alert-bar-inset: auto 0 0 0;
    --z-alert-bar-w: auto;
    --z-alert-bar-h: var(--z-alert-bar-width);
    --z-alert-bar-radius: 0;
    --z-card-clip: none;
    --z-card-filter: none;
    --z-card-texture: repeating-linear-gradient(45deg, rgba(139,158,75,0.022) 0px, rgba(139,158,75,0.022) 1px, transparent 1px, transparent 10px);
    --z-card-gradient: var(--z-surface-card);
    --z-card-border-color: rgba(139,158,75,0.13);
    --z-card-shadow: var(--z-shadow-card);
    --z-card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bracket-color: color-mix(in oklch, var(--zyna) 40%, transparent);
    }
    --z-card-bracket-size: 18px;
    --z-card-bracket-stroke: 1.5px;
    --z-card-bar-height: 2px;
    --z-card-bar-bg: var(--zyna);
    --z-card-bar-shadow: none;
    --z-card-header-bg: rgba(139,158,75,0.06);
    --z-card-header-border: rgba(139,158,75,0.12);
    --z-card-header-color: var(--zyna);
    --z-card-header-letter-spacing: 0.14em;
    --z-card-header-text-shadow: none;
    --z-card-header-dot-size: 5px;
    --z-card-header-dot-bg: var(--zyna);
    --z-card-header-dot-shadow: none;
    --z-card-header-dot-animation: none;
    --z-card-title-text-shadow: none;
    --z-card-glow-duration: 5s;
    --z-card-default-glow-lo: rgba(139,158,75,0.03);
    --z-card-default-glow-hi: rgba(139,158,75,0.08);
    --z-topbar-border: rgba(139,158,75,0.12);
    --z-topbar-glow: none;
    --z-sidebar-active-shadow: inset 3px 0 0 var(--zyna), inset 5px 0 0 var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-sidebar-active-shadow: inset 3px 0 0 var(--zyna), inset 5px 0 0 color-mix(in oklch, var(--zyna) 22%, transparent);
    }
  }
  :where(html[data-genre="military"]) :where(.badge-primary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 14%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="military"]) :where(.badge-success) {
    --badge-bg: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-success) 12%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="military"]) :where(.badge-danger) {
    --badge-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-danger) 11%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="military"]) :where(.badge-warning) {
    --badge-bg: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-warning) 11%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="military"]) :where(.badge-info) {
    --badge-bg: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-info) 11%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="military"]) :where(.badge-secondary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 8%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="military"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(45deg, rgba(139,158,75,0.03) 0px, rgba(139,158,75,0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(-45deg, rgba(139,158,75,0.02) 0px, rgba(139,158,75,0.02) 1px, transparent 1px, transparent 12px);
  }
  :where(html[data-genre="military"]) body::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(transparent 0%, rgba(139,158,75,0.018) 30%, rgba(139,158,75,0.035) 50%, rgba(139,158,75,0.018) 70%, transparent 100%);
    transform: translateY(100vh);
    animation: field-sweep 12s linear infinite;
  }
  @keyframes schematic-plotter {
    0% {
      transform: translateX(-4px);
    }
    100% {
      transform: translateX(100vw);
    }
  }
  html[data-genre="blueprint"] {
    --zyna: #1B3A6B;
    --zyna-dark: #0D1F3C;
    --zp-success: #1A6B3A;
    --zp-danger: #C0392B;
    --zp-warning: #A06800;
    --zp-info: #2456A4;
    --zp-text: #0D1B33;
    --z-color-text-inverse: #EDF2FA;
    --z-surface-page: #EDF2FA;
    --z-surface-inset: #E0E8F5;
    --z-surface-inset-hover: #D4DFEF;
    --z-surface-inset-danger: #F5E8E8;
    --z-surface-inset-danger-hover: #EDD9D9;
    --z-surface-card: linear-gradient(160deg, #FFFFFF 0%, #F4F8FE 100%);
    --z-surface-card-deep: linear-gradient(160deg, #EDF2FA 0%, #E4EDF7 100%);
    --z-color-border: rgba(27,58,107,0.12);
    --z-color-border-dim: rgba(27,58,107,0.06);
    --z-color-overlay: rgba(27,58,107,0.03);
    --z-shadow-card: 0 1px 0 rgba(0,0,0,0.09), 0 4px 12px rgba(27,58,107,0.06), 0 1px 3px rgba(0,0,0,0.05);
    --z-shadow-card-deep: 0 2px 0 rgba(0,0,0,0.11), 0 8px 24px rgba(27,58,107,0.08), 0 2px 6px rgba(0,0,0,0.06);
    --bg: #EDF2FA;
    --bg2: #E1E9F5;
    --bg3: #D4DFEF;
    --border: rgba(27,58,107,0.13);
    --border2: rgba(27,58,107,0.07);
    --text: #0D1B33;
    --text2: #3A5580;
    --text3: #7A96B8;
    --topbar-bg: rgba(237,242,250,0.93);
    --z-panel-bg: #E1E9F5;
    --z-panel-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --z-font-mono: 'DM Mono', 'Courier New', monospace;
    --z-duration-fast: 0.16s;
    --z-duration-base: 0.22s;
    --z-duration-slow: 0.30s;
    --z-duration-pulse: 4.5s;
    --z-ease-enter: linear;
    --z-ease-exit: linear;
    --z-ease-spring: cubic-bezier(0.34, 1.02, 0.64, 1);
    color-scheme: light;
    --z-btn-clip: polygon(0 0, calc(100% - var(--btn-corner)) 0, calc(100% - var(--btn-corner)) var(--btn-corner), 100% var(--btn-corner), 100% 100%, 0 100%);
    --z-btn-inner-clip: polygon(1px 1px, calc(100% - var(--btn-corner) - 1px) 1px, calc(100% - var(--btn-corner) - 1px) calc(var(--btn-corner) + 1px), calc(100% - 1px) calc(var(--btn-corner) + 1px), calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px));
    --z-btn-corner: 10px;
    --z-btn-active-scale: 0.97;
    --z-btn-scan-stop: 40%;
    --z-badge-clip: polygon(0 0, calc(50% - 5px) 0, 50% 5px, calc(50% + 5px) 0, 100% 0, 100% 100%, 0 100%);
    --z-badge-radius: 0;
    --z-badge-padding: 0.38rem 0.80rem 0.22rem 0.80rem;
    --z-badge-letter-spacing: 0.09em;
    --z-badge-inset-shadow: inset 0 0 0 1px currentColor;
    --z-badge-scan-duration: 8s;
    --z-badge-inner-clip: polygon(1px 1px, calc(50% - 4px) 1px, 50% 4px, calc(50% + 4px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px));
    --z-alert-radius: 3px;
    --z-alert-bar-width: 2px;
    --z-alert-prefix: "⊗ ";
    --z-alert-bg-opacity: 5%;
    --z-alert-border: 1px solid rgba(27,58,107,0.08);
    --z-alert-prefix-opacity: 0.40;
    --z-alert-bar-glow: none;
    --z-alert-texture: none;
    --z-alert-padding-top: 0.875rem;
    --z-alert-padding-left: calc(1.25rem + var(--z-alert-bar-width));
    --z-alert-bar-inset: 15% auto 15% 0;
    --z-alert-bar-w: var(--z-alert-bar-width);
    --z-alert-bar-h: auto;
    --z-alert-bar-radius: 1px;
    --z-card-clip: none;
    --z-card-filter: none;
    --z-card-texture: repeating-linear-gradient(0deg, rgba(27,58,107,0.022) 0px, rgba(27,58,107,0.022) 1px, transparent 1px, transparent 18px);
    --z-card-gradient: var(--z-surface-card);
    --z-card-border-color: rgba(27,58,107,0.09);
    --z-card-shadow: var(--z-shadow-card);
    --z-card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bracket-color: color-mix(in oklch, var(--zyna) 50%, transparent);
    }
    --z-card-bracket-size: 20px;
    --z-card-bracket-stroke: 2px;
    --z-card-bar-height: 2px;
    --z-card-bar-bg: var(--zyna);
    --z-card-bar-shadow: none;
    --z-card-header-bg: rgba(27,58,107,0.04);
    --z-card-header-border: rgba(27,58,107,0.10);
    --z-card-header-color: var(--zyna);
    --z-card-header-letter-spacing: 0.10em;
    --z-card-header-text-shadow: none;
    --z-card-header-dot-size: 5px;
    --z-card-header-dot-bg: var(--zyna);
    --z-card-header-dot-shadow: 0 0 4px var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-header-dot-shadow: 0 0 4px color-mix(in oklch, var(--zyna) 55%, transparent);
    }
    --z-card-header-dot-animation: zyna-pulse-ring var(--z-duration-pulse) linear infinite;
    --z-card-title-text-shadow: none;
    --z-card-glow-duration: 7s;
    --z-card-default-glow-lo: rgba(27,58,107,0.025);
    --z-card-default-glow-hi: rgba(27,58,107,0.065);
    --z-topbar-border: rgba(27,58,107,0.09);
    --z-topbar-glow: none;
    --z-sidebar-active-shadow: inset 2px 0 0 var(--zyna), inset 4px 0 0 var(--bg), inset 6px 0 0 var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-sidebar-active-shadow: inset 2px 0 0 var(--zyna), inset 4px 0 0 var(--bg), inset 6px 0 0 color-mix(in oklch, var(--zyna) 40%, transparent);
    }
  }
  :where(html[data-genre="blueprint"]) :where(.badge-primary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="blueprint"]) :where(.badge-success) {
    --badge-bg: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-success) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="blueprint"]) :where(.badge-danger) {
    --badge-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-danger) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="blueprint"]) :where(.badge-warning) {
    --badge-bg: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-warning) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="blueprint"]) :where(.badge-info) {
    --badge-bg: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-info) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="blueprint"]) :where(.badge-secondary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 5%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="blueprint"]) :where(.badge-slant) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), 1px calc(100% - 1px));
  }
  :where(html[data-genre="blueprint"]) :where(.badge-bevel) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) 1px, calc(100% - 1px) calc(var(--badge-offset) + 1px), calc(100% - 1px) calc(100% - calc(var(--badge-offset) + 1px)), calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), calc(var(--badge-offset) + 1px) calc(100% - 1px), 1px calc(100% - calc(var(--badge-offset) + 1px)), 1px calc(var(--badge-offset) + 1px));
  }
  :where(html[data-genre="blueprint"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(rgba(27,58,107,0.020) 0 1px, transparent 1px 100%), repeating-linear-gradient(90deg, rgba(27,58,107,0.020) 0 1px, transparent 1px 100%), repeating-linear-gradient(rgba(27,58,107,0.052) 0 1px, transparent 1px 100%), repeating-linear-gradient(90deg, rgba(27,58,107,0.052) 0 1px, transparent 1px 100%);
    background-size: 5px 5px, 5px 5px, 25px 25px, 25px 25px;
  }
  :where(html[data-genre="blueprint"]) body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgba(27,58,107,0.03) 20%, rgba(27,58,107,0.06) 50%, rgba(27,58,107,0.03) 80%, transparent 100%);
    transform: translateX(-4px);
    animation: schematic-plotter 14s linear infinite;
  }
  @keyframes brushwork-sweep {
    0% {
      transform: rotate(-12deg) translateX(-400px);
    }
    100% {
      transform: rotate(-12deg) translateX(calc(100vw + 400px));
    }
  }
  html[data-genre="washi"] {
    --zyna: #C93C23;
    --zyna-dark: #8B2210;
    --zp-success: #2D6B3C;
    --zp-danger: #9B1A0A;
    --zp-warning: #B07A00;
    --zp-info: #3A6B8A;
    --zp-text: #2A1A0E;
    --z-color-text-inverse: #F7F0E6;
    --z-surface-page: #F7F0E6;
    --z-surface-inset: #EDE4D5;
    --z-surface-inset-hover: #E4D7C3;
    --z-surface-inset-danger: #F5E4E0;
    --z-surface-inset-danger-hover: #EDD5CF;
    --z-surface-card: linear-gradient(160deg, #FDFAF6 0%, #F7F0E6 100%);
    --z-surface-card-deep: linear-gradient(160deg, #F0E8DA 0%, #E9DFD0 100%);
    --z-color-border: rgba(42,26,14,0.11);
    --z-color-border-dim: rgba(42,26,14,0.055);
    --z-color-overlay: rgba(42,26,14,0.03);
    --z-shadow-card: 0 1px 2px rgba(42,26,14,0.09), 0 4px 14px rgba(42,26,14,0.06);
    --z-shadow-card-deep: 0 2px 4px rgba(42,26,14,0.11), 0 8px 28px rgba(42,26,14,0.08);
    --bg: #F7F0E6;
    --bg2: #EDE4D5;
    --bg3: #E4D7C3;
    --border: rgba(42,26,14,0.11);
    --border2: rgba(42,26,14,0.06);
    --text: #2A1A0E;
    --text2: #6B4D35;
    --text3: #A07E66;
    --topbar-bg: rgba(247,240,230,0.93);
    --z-panel-bg: #EDE4D5;
    --z-panel-shadow: 0 8px 24px rgba(42,26,14,0.09), 0 2px 6px rgba(42,26,14,0.05);
    --z-duration-fast: 0.17s;
    --z-duration-base: 0.24s;
    --z-duration-slow: 0.34s;
    --z-duration-pulse: 5s;
    --z-ease-enter: cubic-bezier(0.06, 0.92, 0.16, 1);
    --z-ease-exit: cubic-bezier(0.70, 0, 0.94, 0.42);
    --z-ease-spring: cubic-bezier(0.22, 1.35, 0.36, 1);
    color-scheme: light;
    --z-btn-clip: polygon(var(--btn-corner) 0, 100% 0, 100% 100%, 0 100%, 0 var(--btn-corner));
    --z-btn-inner-clip: polygon(calc(var(--btn-corner) + 1px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--btn-corner) + 1px));
    --z-btn-corner: 11px;
    --z-btn-active-scale: 0.97;
    --z-btn-scan-stop: 45%;
    --z-badge-clip: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
    --z-badge-radius: 0;
    --z-badge-padding: 0.20rem 0.78rem;
    --z-badge-letter-spacing: 0.09em;
    --z-badge-inset-shadow: inset 0 0 0 1px currentColor;
    --z-badge-scan-duration: 7s;
    --z-badge-inner-clip: polygon(1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 8px), calc(100% - 8px) calc(100% - 1px), 1px calc(100% - 1px));
    --z-alert-radius: 0 3px 3px 0;
    --z-alert-bar-width: 3px;
    --z-alert-prefix: "「 ";
    --z-alert-bg-opacity: 5%;
    --z-alert-border: 1px solid rgba(42,26,14,0.07);
    --z-alert-prefix-opacity: 0.42;
    --z-alert-bar-glow: none;
    --z-alert-texture: linear-gradient(to right, var(--alert-bar-color) 0px, transparent 16px);
    @supports (color: color-mix(in lab, red, red)) {
      --z-alert-texture: linear-gradient(to right, color-mix(in oklch, var(--alert-bar-color) 10%, transparent) 0px, transparent 16px);
    }
    --z-alert-padding-top: 0.875rem;
    --z-alert-padding-left: calc(1.25rem + var(--z-alert-bar-width));
    --z-alert-bar-inset: 0 auto 0 0;
    --z-alert-bar-w: var(--z-alert-bar-width);
    --z-alert-bar-h: auto;
    --z-alert-bar-radius: 0;
    --z-card-clip: none;
    --z-card-filter: none;
    --z-card-texture: repeating-linear-gradient(45deg, rgba(201,60,35,0.018) 0px, rgba(201,60,35,0.018) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(-45deg, rgba(201,60,35,0.018) 0px, rgba(201,60,35,0.018) 1px, transparent 1px, transparent 12px);
    --z-card-gradient: var(--z-surface-card);
    --z-card-border-color: rgba(42,26,14,0.09);
    --z-card-shadow: var(--z-shadow-card);
    --z-card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bracket-color: color-mix(in oklch, var(--zyna) 30%, transparent);
    }
    --z-card-bracket-size: 16px;
    --z-card-bracket-stroke: 1px;
    --z-card-bar-height: 3px;
    --z-card-bar-bg: linear-gradient(90deg, var(--zyna) 0%, var(--zyna) 35%, var(--zyna) 65%, transparent 100%);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bar-bg: linear-gradient(90deg, var(--zyna) 0%, color-mix(in oklch, var(--zyna) 70%, transparent) 35%, color-mix(in oklch, var(--zyna) 20%, transparent) 65%, transparent 100%);
    }
    --z-card-bar-shadow: none;
    --z-card-header-bg: rgba(201,60,35,0.05);
    --z-card-header-border: rgba(42,26,14,0.09);
    --z-card-header-color: var(--zyna);
    --z-card-header-letter-spacing: 0.11em;
    --z-card-header-text-shadow: none;
    --z-card-header-dot-size: 5px;
    --z-card-header-dot-bg: var(--zyna);
    --z-card-header-dot-shadow: none;
    --z-card-header-dot-animation: none;
    --z-card-title-text-shadow: none;
    --z-card-glow-duration: 5s;
    --z-card-default-glow-lo: rgba(201,60,35,0.022);
    --z-card-default-glow-hi: rgba(201,60,35,0.06);
    --z-topbar-border: rgba(42,26,14,0.08);
    --z-topbar-glow: none;
    --z-sidebar-active-shadow: inset 4px 0 0 var(--zyna);
  }
  :where(html[data-genre="washi"]) :where(.badge-primary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 8%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="washi"]) :where(.badge-success) {
    --badge-bg: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-success) 8%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="washi"]) :where(.badge-danger) {
    --badge-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-danger) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="washi"]) :where(.badge-warning) {
    --badge-bg: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-warning) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="washi"]) :where(.badge-info) {
    --badge-bg: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-info) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="washi"]) :where(.badge-secondary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 5%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="washi"]) :where(.badge-slant) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), 1px calc(100% - 1px));
  }
  :where(html[data-genre="washi"]) :where(.badge-bevel) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) 1px, calc(100% - 1px) calc(var(--badge-offset) + 1px), calc(100% - 1px) calc(100% - calc(var(--badge-offset) + 1px)), calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), calc(var(--badge-offset) + 1px) calc(100% - 1px), 1px calc(100% - calc(var(--badge-offset) + 1px)), 1px calc(var(--badge-offset) + 1px));
  }
  :where(html[data-genre="washi"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(8deg, rgba(42,26,14,0.025) 0px, rgba(42,26,14,0.025) 1px, transparent 1px, transparent 22px), repeating-linear-gradient(-5deg, rgba(42,26,14,0.020) 0px, rgba(42,26,14,0.020) 1px, transparent 1px, transparent 28px), repeating-linear-gradient(83deg, rgba(42,26,14,0.015) 0px, rgba(42,26,14,0.015) 1px, transparent 1px, transparent 16px);
  }
  :where(html[data-genre="washi"]) body::after {
    content: "";
    position: fixed;
    top: -50vh;
    left: 0;
    width: 12px;
    height: 200vh;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to right, transparent 0%, rgba(201,60,35,0.022) 20%, rgba(201,60,35,0.055) 50%, rgba(201,60,35,0.022) 80%, transparent 100%);
    transform-origin: center center;
    transform: rotate(-12deg) translateX(-400px);
    animation: brushwork-sweep 18s linear infinite;
  }
  @keyframes labbook-scan {
    0% {
      transform: translateX(-4px);
      opacity: 1;
    }
    85% {
      transform: translateX(calc(100vw + 4px));
      opacity: 1;
    }
    85.001% {
      transform: translateX(-4px);
      opacity: 0;
    }
    94% {
      transform: translateX(-4px);
      opacity: 0;
    }
    94.001% {
      transform: translateX(-4px);
      opacity: 1;
    }
    100% {
      transform: translateX(-4px);
      opacity: 1;
    }
  }
  html[data-genre="laboratory"] {
    --zyna: #0090B0;
    --zyna-dark: #006B84;
    --zp-success: #1A7A4A;
    --zp-danger: #C42B1A;
    --zp-warning: #B87200;
    --zp-info: #007A96;
    --zp-text: #0C1E24;
    --z-color-text-inverse: #EDFAFC;
    --z-surface-page: #EDFAFC;
    --z-surface-inset: #D4EFF5;
    --z-surface-inset-hover: #BEE4EE;
    --z-surface-inset-danger: #F5E8EB;
    --z-surface-inset-danger-hover: #EDD4DA;
    --z-surface-card: linear-gradient(160deg, #F5FCFD 0%, #EDFAFC 100%);
    --z-surface-card-deep: linear-gradient(160deg, #D4EFF5 0%, #BEE4EE 100%);
    --z-color-border: rgba(12,30,36,0.10);
    --z-color-border-dim: rgba(12,30,36,0.05);
    --z-color-overlay: rgba(12,30,36,0.025);
    --z-shadow-card: 0 1px 2px rgba(12,30,36,0.08), 0 4px 14px rgba(12,30,36,0.05);
    --z-shadow-card-deep: 0 2px 4px rgba(12,30,36,0.10), 0 8px 28px rgba(12,30,36,0.06);
    --bg: #EDFAFC;
    --bg2: #CBE9F3;
    --bg3: #B5DCEC;
    --border: rgba(12,30,36,0.10);
    --border2: rgba(12,30,36,0.05);
    --text: #0C1E24;
    --text2: #1A5C70;
    --text3: #4A8899;
    --topbar-bg: rgba(237,250,252,0.93);
    --z-panel-bg: #CBE9F3;
    --z-panel-shadow: 0 8px 24px rgba(12,30,36,0.07), 0 2px 6px rgba(12,30,36,0.04);
    --z-duration-fast: 0.11s;
    --z-duration-base: 0.18s;
    --z-duration-slow: 0.28s;
    --z-duration-pulse: 3.5s;
    --z-ease-enter: cubic-bezier(0.22, 1.58, 0.44, 1);
    --z-ease-exit: cubic-bezier(0.40, 0, 1.00, 1);
    --z-ease-spring: cubic-bezier(0.18, 1.85, 0.38, 1);
    color-scheme: light;
    --z-btn-clip: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
    --z-btn-inner-clip: polygon(1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 11px), calc(100% - 11px) calc(100% - 1px), 11px calc(100% - 1px), 1px calc(100% - 11px));
    --z-btn-corner: 10px;
    --z-btn-active-scale: 0.97;
    --z-btn-scan-stop: 40%;
    --z-badge-clip: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
    --z-badge-radius: 0;
    --z-badge-padding: 0.18rem 1.0rem 0.18rem 0.72rem;
    --z-badge-letter-spacing: 0.07em;
    --z-badge-inset-shadow: inset 0 0 0 1px currentColor;
    --z-badge-scan-duration: 5s;
    --z-badge-inner-clip: polygon(1px 1px, calc(100% - 9px) 1px, calc(100% - 2px) 50%, calc(100% - 9px) calc(100% - 1px), 1px calc(100% - 1px));
    --z-alert-radius: 0 0 3px 3px;
    --z-alert-bar-width: 0;
    --z-alert-prefix: "∴ ";
    --z-alert-bg-opacity: 5%;
    --z-alert-border: 1px solid rgba(12,30,36,0.07);
    --z-alert-prefix-opacity: 0.36;
    --z-alert-bar-glow: none;
    --z-alert-texture: none;
    --z-alert-padding-top: calc(0.875rem + 3px);
    --z-alert-padding-left: 1.25rem;
    --z-alert-bar-inset: 0 0 auto 0;
    --z-alert-bar-w: auto;
    --z-alert-bar-h: 3px;
    --z-alert-bar-radius: 0;
    --z-card-clip: none;
    --z-card-filter: none;
    --z-card-texture: repeating-linear-gradient(90deg, rgba(0,144,176,0.042) 0px, rgba(0,144,176,0.042) 1px, transparent 1px, transparent 6px);
    --z-card-gradient: var(--z-surface-card);
    --z-card-border-color: rgba(12,30,36,0.08);
    --z-card-shadow: var(--z-shadow-card);
    --z-card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bracket-color: color-mix(in oklch, var(--zyna) 28%, transparent);
    }
    --z-card-bracket-size: 14px;
    --z-card-bracket-stroke: 1px;
    --z-card-bar-height: 4px;
    --z-card-bar-bg: linear-gradient(to bottom, var(--zyna) 0, var(--zyna) 1px, transparent 1px, transparent 3px, var(--zyna) 3px);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bar-bg: linear-gradient(to bottom, var(--zyna) 0, var(--zyna) 1px, transparent 1px, transparent 3px, color-mix(in oklch, var(--zyna) 42%, transparent) 3px);
    }
    --z-card-bar-shadow: none;
    --z-card-header-bg: rgba(0,144,176,0.04);
    --z-card-header-border: rgba(12,30,36,0.08);
    --z-card-header-color: var(--zyna);
    --z-card-header-letter-spacing: 0.09em;
    --z-card-header-text-shadow: none;
    --z-card-header-dot-size: 5px;
    --z-card-header-dot-bg: var(--zyna);
    --z-card-header-dot-shadow: none;
    --z-card-header-dot-animation: none;
    --z-card-title-text-shadow: none;
    --z-card-glow-duration: 3.5s;
    --z-card-default-glow-lo: rgba(0,144,176,0.018);
    --z-card-default-glow-hi: rgba(0,144,176,0.048);
    --z-topbar-border: rgba(12,30,36,0.08);
    --z-topbar-glow: none;
    --z-sidebar-active-shadow: inset 3px 0 0 var(--zyna);
  }
  :where(html[data-genre="laboratory"]) :where(.badge-primary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 8%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="laboratory"]) :where(.badge-success) {
    --badge-bg: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-success) 8%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="laboratory"]) :where(.badge-danger) {
    --badge-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-danger) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="laboratory"]) :where(.badge-warning) {
    --badge-bg: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-warning) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="laboratory"]) :where(.badge-info) {
    --badge-bg: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-info) 7%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="laboratory"]) :where(.badge-secondary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 5%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="laboratory"]) :where(.badge-slant) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), 1px calc(100% - 1px));
  }
  :where(html[data-genre="laboratory"]) :where(.badge-bevel) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) 1px, calc(100% - 1px) calc(var(--badge-offset) + 1px), calc(100% - 1px) calc(100% - calc(var(--badge-offset) + 1px)), calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), calc(var(--badge-offset) + 1px) calc(100% - 1px), 1px calc(100% - calc(var(--badge-offset) + 1px)), 1px calc(var(--badge-offset) + 1px));
  }
  :where(html[data-genre="laboratory"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0,144,176,0.15) 1px, transparent 1px);
    background-size: 8px 8px;
  }
  :where(html[data-genre="laboratory"]) body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,144,176,0.03) 12%, rgba(0,144,176,0.09) 50%, rgba(0,144,176,0.03) 88%, transparent 100%);
    transform: translateX(-4px);
    animation: labbook-scan 9s linear infinite;
  }
  @keyframes maison-shimmer {
    0% {
      transform: translateX(-140px);
      opacity: 0;
    }
    8% {
      transform: translateX(calc(-140px + 8vw));
      opacity: 1;
    }
    92% {
      transform: translateX(calc(100vw + 20px));
      opacity: 1;
    }
    100% {
      transform: translateX(calc(100vw + 140px));
      opacity: 0;
    }
  }
  html[data-genre="atelier"] {
    --zyna: #B8920A;
    --zyna-dark: #8A6C00;
    --zp-success: #2D6A2D;
    --zp-danger: #B03020;
    --zp-warning: #C07000;
    --zp-info: #1A5C7A;
    --zp-text: #1C1208;
    --z-color-text-inverse: #F5EFDF;
    --z-surface-page: #F5EFDF;
    --z-surface-inset: #EBE0C4;
    --z-surface-inset-hover: #DFCEA8;
    --z-surface-inset-danger: #F5E8E4;
    --z-surface-inset-danger-hover: #EDD4CE;
    --z-surface-card: linear-gradient(160deg, #FBF8F0 0%, #F5EFDF 100%);
    --z-surface-card-deep: linear-gradient(160deg, #EDE0C4 0%, #DFCEA8 100%);
    --z-color-border: rgba(44,28,4,0.10);
    --z-color-border-dim: rgba(44,28,4,0.05);
    --z-color-overlay: rgba(44,28,4,0.025);
    --z-shadow-card: 0 1px 2px rgba(44,28,4,0.08), 0 4px 14px rgba(44,28,4,0.05);
    --z-shadow-card-deep: 0 2px 4px rgba(44,28,4,0.10), 0 8px 28px rgba(44,28,4,0.06);
    --bg: #F5EFDF;
    --bg2: #EDE3C8;
    --bg3: #E3D5B0;
    --border: rgba(44,28,4,0.10);
    --border2: rgba(44,28,4,0.05);
    --text: #1C1208;
    --text2: #5C3D00;
    --text3: #8C6B20;
    --topbar-bg: rgba(245,239,223,0.93);
    --z-panel-bg: #EDE3C8;
    --z-panel-shadow: 0 8px 24px rgba(44,28,4,0.07), 0 2px 6px rgba(44,28,4,0.04);
    --z-duration-fast: 0.20s;
    --z-duration-base: 0.38s;
    --z-duration-slow: 0.52s;
    --z-duration-pulse: 6s;
    --z-ease-enter: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --z-ease-exit: cubic-bezier(0.55, 0.00, 1.00, 0.45);
    --z-ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
    color-scheme: light;
    --z-btn-clip: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    --z-btn-inner-clip: polygon(1px 1px, calc(100% - 11px) 1px, calc(100% - 1px) 11px, calc(100% - 1px) calc(100% - 11px), calc(100% - 11px) calc(100% - 1px), 1px calc(100% - 1px));
    --z-btn-corner: 10px;
    --z-btn-active-scale: 0.97;
    --z-btn-scan-stop: 35%;
    --z-badge-clip: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(50% + 5px), 10px 50%, 0 calc(50% - 5px));
    --z-badge-radius: 0;
    --z-badge-padding: 0.18rem 0.72rem 0.18rem 1.0rem;
    --z-badge-letter-spacing: 0.07em;
    --z-badge-inset-shadow: inset 0 0 0 1px currentColor;
    --z-badge-scan-duration: 5s;
    --z-badge-inner-clip: polygon(1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(50% + 6px), 11px 50%, 1px calc(50% - 6px));
    --z-alert-radius: 3px 0 0 3px;
    --z-alert-bar-width: 0;
    --z-alert-prefix: "» ";
    --z-alert-bg-opacity: 5%;
    --z-alert-border: 1px solid rgba(44,28,4,0.07);
    --z-alert-prefix-opacity: 0.40;
    --z-alert-bar-glow: none;
    --z-alert-texture: none;
    --z-alert-padding-top: 0.875rem;
    --z-alert-padding-left: 1.25rem;
    --z-alert-bar-inset: 15% 0 15% auto;
    --z-alert-bar-w: 3px;
    --z-alert-bar-h: auto;
    --z-alert-bar-radius: 2px 0 0 2px;
    --z-card-clip: none;
    --z-card-filter: none;
    --z-card-texture: repeating-linear-gradient(0deg, rgba(184,146,10,0.05) 0px, rgba(184,146,10,0.05) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(90deg, rgba(184,146,10,0.08) 0px, rgba(184,146,10,0.08) 1px, transparent 1px, transparent 40px);
    --z-card-gradient: var(--z-surface-card);
    --z-card-border-color: rgba(44,28,4,0.08);
    --z-card-shadow: var(--z-shadow-card);
    --z-card-bracket-color: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --z-card-bracket-color: color-mix(in oklch, var(--zyna) 28%, transparent);
    }
    --z-card-bracket-size: 14px;
    --z-card-bracket-stroke: 1px;
    --z-card-bar-height: 2px;
    --z-card-bar-bg: linear-gradient(to right, transparent 0%, var(--zyna) 40%, var(--zyna) 60%, transparent 100%);
    --z-card-bar-shadow: none;
    --z-card-header-bg: rgba(184,146,10,0.04);
    --z-card-header-border: rgba(44,28,4,0.08);
    --z-card-header-color: var(--zyna);
    --z-card-header-letter-spacing: 0.11em;
    --z-card-header-text-shadow: none;
    --z-card-header-dot-size: 4px;
    --z-card-header-dot-bg: var(--zyna);
    --z-card-header-dot-shadow: none;
    --z-card-header-dot-animation: none;
    --z-card-title-text-shadow: none;
    --z-card-glow-duration: 6s;
    --z-card-default-glow-lo: rgba(184,146,10,0.015);
    --z-card-default-glow-hi: rgba(184,146,10,0.040);
    --z-topbar-border: rgba(44,28,4,0.08);
    --z-topbar-glow: none;
    --z-sidebar-active-shadow: inset 3px 0 0 var(--zyna);
  }
  :where(html[data-genre="atelier"]) :where(.badge-primary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 10%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="atelier"]) :where(.badge-success) {
    --badge-bg: var(--z-color-success);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-success) 9%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="atelier"]) :where(.badge-danger) {
    --badge-bg: var(--z-color-danger);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-danger) 8%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="atelier"]) :where(.badge-warning) {
    --badge-bg: var(--z-color-warning);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-warning) 8%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="atelier"]) :where(.badge-info) {
    --badge-bg: var(--z-color-info);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--z-color-info) 8%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="atelier"]) :where(.badge-secondary) {
    --badge-bg: var(--zyna);
    @supports (color: color-mix(in lab, red, red)) {
      --badge-bg: color-mix(in oklch, var(--zyna) 6%, transparent);
    }
    --badge-glow: none;
  }
  :where(html[data-genre="atelier"]) :where(.badge-slant) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), 1px calc(100% - 1px));
  }
  :where(html[data-genre="atelier"]) :where(.badge-bevel) {
    --z-badge-inset-shadow: none;
    --badge-bg: currentColor;
    --badge-interior: var(--z-surface-page);
    --badge-inner-clip: polygon(calc(var(--badge-offset) + 1px) 1px, calc(100% - calc(var(--badge-offset) + 1px)) 1px, calc(100% - 1px) calc(var(--badge-offset) + 1px), calc(100% - 1px) calc(100% - calc(var(--badge-offset) + 1px)), calc(100% - calc(var(--badge-offset) + 1px)) calc(100% - 1px), calc(var(--badge-offset) + 1px) calc(100% - 1px), 1px calc(100% - calc(var(--badge-offset) + 1px)), 1px calc(var(--badge-offset) + 1px));
  }
  :where(html[data-genre="atelier"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(0deg, rgba(184,146,10,0.05) 0px, rgba(184,146,10,0.05) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(90deg, rgba(184,146,10,0.08) 0px, rgba(184,146,10,0.08) 1px, transparent 1px, transparent 40px);
  }
  :where(html[data-genre="atelier"]) body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 120px;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to right, transparent 0%, rgba(184,146,10,0.04) 25%, rgba(184,146,10,0.12) 50%, rgba(184,146,10,0.04) 75%, transparent 100%);
    transform: translateX(-140px);
    animation: maison-shimmer 28s ease-in-out infinite;
  }
}
@layer base {
  zyna-waffle, zyna-timeline, zyna-nightingale, zyna-lollipop, zyna-orbital {
    display: block;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}