@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@600;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap";
@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700&family=Share+Tech+Mono&display=swap";
/* [project]/app/globals.css [app-client] (css) */
@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-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --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-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;
    }
  }
}

@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-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-orange-50: #fff7ed;
    --color-orange-200: #ffd7a8;
    --color-orange-700: #c53c00;
    --color-amber-50: #fffbeb;
    --color-amber-200: #fee685;
    --color-amber-300: #ffd236;
    --color-amber-400: #fcbb00;
    --color-amber-500: #f99c00;
    --color-amber-700: #b75000;
    --color-amber-800: #953d00;
    --color-emerald-50: #ecfdf5;
    --color-emerald-200: #a4f4cf;
    --color-emerald-300: #5ee9b5;
    --color-emerald-600: #009767;
    --color-emerald-700: #007956;
    --color-rose-50: #fff1f2;
    --color-rose-200: #ffccd3;
    --color-rose-300: #ffa2ae;
    --color-rose-600: #e70044;
    --color-rose-700: #c20039;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cad5e2;
    --color-slate-400: #90a1b9;
    --color-slate-500: #62748e;
    --color-slate-600: #45556c;
    --color-slate-700: #314158;
    --color-slate-900: #0f172b;
    --color-white: #fff;
    --spacing: .25rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-semibold: 600;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --leading-relaxed: 1.625;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-orange-50: lab(97.7008% 1.53735 5.90649);
      --color-orange-200: lab(88.4871% 9.94918 28.8378);
      --color-orange-700: lab(46.4615% 57.7275 70.8507);
      --color-amber-50: lab(98.6252% -.635922 8.42309);
      --color-amber-200: lab(91.7203% -.505269 49.9084);
      --color-amber-300: lab(86.4156% 6.13147 78.3961);
      --color-amber-400: lab(80.1641% 16.6016 99.2089);
      --color-amber-500: lab(72.7183% 31.8672 97.9407);
      --color-amber-700: lab(47.2709% 42.9082 69.2966);
      --color-amber-800: lab(37.8822% 37.1699 52.2718);
      --color-emerald-50: lab(97.8462% -6.94966 1.85487);
      --color-emerald-200: lab(90.2247% -31.039 9.47084);
      --color-emerald-300: lab(83.9203% -48.7124 13.8849);
      --color-emerald-600: lab(55.0481% -49.9246 15.93);
      --color-emerald-700: lab(44.4871% -41.0396 11.0361);
      --color-rose-50: lab(96.2369% 4.94155 1.28011);
      --color-rose-200: lab(86.806% 19.1909 4.07754);
      --color-rose-300: lab(76.6339% 38.3549 9.68835);
      --color-rose-600: lab(49.1882% 81.577 36.0311);
      --color-rose-700: lab(41.1651% 71.6251 30.3087);
      --color-slate-100: lab(96.286% -.852436 -2.46847);
      --color-slate-200: lab(91.7353% -.998765 -4.76968);
      --color-slate-300: lab(84.7652% -1.94535 -7.93337);
      --color-slate-400: lab(65.5349% -2.25151 -14.5072);
      --color-slate-500: lab(48.0876% -2.03595 -16.5814);
      --color-slate-600: lab(35.5623% -1.74978 -15.4316);
      --color-slate-700: lab(26.9569% -1.47016 -15.6993);
      --color-slate-900: lab(7.78673% 1.82345 -15.0537);
    }
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    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;
    -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 {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.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 {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :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)) {
      ::placeholder {
        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 {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-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"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .absolute {
    position: absolute;
  }

  .relative {
    position: relative;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .z-10 {
    z-index: 10;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline-flex {
    display: inline-flex;
  }

  .h-44 {
    height: calc(var(--spacing) * 44);
  }

  .h-\[42px\] {
    height: 42px;
  }

  .h-fit {
    height: fit-content;
  }

  .min-h-\[70px\] {
    min-height: 70px;
  }

  .min-h-\[80px\] {
    min-height: 80px;
  }

  .min-h-\[96px\] {
    min-height: 96px;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-\[120px\] {
    width: 120px;
  }

  .w-\[140px\] {
    width: 140px;
  }

  .w-full {
    width: 100%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .min-w-\[1400px\] {
    min-width: 1400px;
  }

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

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .grid-cols-\[1\.3fr_0\.7fr_0\.7fr_0\.7fr_0\.7fr_0\.7fr\] {
    grid-template-columns: 1.3fr .7fr .7fr .7fr .7fr .7fr;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

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

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

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

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-amber-200\/70 {
    border-color: #fee685b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-200\/70 {
      border-color: color-mix(in oklab, var(--color-amber-200) 70%, transparent);
    }
  }

  .border-amber-400\/80 {
    border-color: #fcbb00cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/80 {
      border-color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
    }
  }

  .border-emerald-200\/70 {
    border-color: #a4f4cfb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-200\/70 {
      border-color: color-mix(in oklab, var(--color-emerald-200) 70%, transparent);
    }
  }

  .border-orange-200\/70 {
    border-color: #ffd7a8b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-orange-200\/70 {
      border-color: color-mix(in oklab, var(--color-orange-200) 70%, transparent);
    }
  }

  .border-rose-200\/70 {
    border-color: #ffccd3b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-rose-200\/70 {
      border-color: color-mix(in oklab, var(--color-rose-200) 70%, transparent);
    }
  }

  .border-slate-200 {
    border-color: var(--color-slate-200);
  }

  .border-slate-200\/70 {
    border-color: #e2e8f0b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-slate-200\/70 {
      border-color: color-mix(in oklab, var(--color-slate-200) 70%, transparent);
    }
  }

  .border-slate-900 {
    border-color: var(--color-slate-900);
  }

  .bg-amber-50\/80 {
    background-color: #fffbebcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-50\/80 {
      background-color: color-mix(in oklab, var(--color-amber-50) 80%, transparent);
    }
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-emerald-50\/80 {
    background-color: #ecfdf5cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-50\/80 {
      background-color: color-mix(in oklab, var(--color-emerald-50) 80%, transparent);
    }
  }

  .bg-orange-50\/80 {
    background-color: #fff7edcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-orange-50\/80 {
      background-color: color-mix(in oklab, var(--color-orange-50) 80%, transparent);
    }
  }

  .bg-rose-50\/80 {
    background-color: #fff1f2cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-rose-50\/80 {
      background-color: color-mix(in oklab, var(--color-rose-50) 80%, transparent);
    }
  }

  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }

  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/60 {
    background-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/60 {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-white\/80 {
    background-color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/80 {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .bg-white\/85 {
    background-color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/85 {
      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-amber-50\/70 {
    --tw-gradient-from: #fffbebb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-50\/70 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-50) 70%, transparent);
    }
  }

  .from-amber-50\/70 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-white {
    --tw-gradient-via: var(--color-white);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .object-cover {
    object-fit: cover;
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[0\.65rem\] {
    font-size: .65rem;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .text-amber-200 {
    color: var(--color-amber-200);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-emerald-300 {
    color: var(--color-emerald-300);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-orange-700 {
    color: var(--color-orange-700);
  }

  .text-rose-300 {
    color: var(--color-rose-300);
  }

  .text-rose-600 {
    color: var(--color-rose-600);
  }

  .text-rose-700 {
    color: var(--color-rose-700);
  }

  .text-slate-200 {
    color: var(--color-slate-200);
  }

  .text-slate-300 {
    color: var(--color-slate-300);
  }

  .text-slate-400 {
    color: var(--color-slate-400);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-700 {
    color: var(--color-slate-700);
  }

  .text-slate-900 {
    color: var(--color-slate-900);
  }

  .text-white {
    color: var(--color-white);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow-\[0_8px_18px_rgba\(15\,23\,42\,0\.06\)\] {
    --tw-shadow: 0 8px 18px var(--tw-shadow-color, #0f172a0f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_18px_rgba\(15\,23\,42\,0\.18\)\] {
    --tw-shadow: 0 8px 18px var(--tw-shadow-color, #0f172a2e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_18px_rgba\(16\,185\,129\,0\.2\)\] {
    --tw-shadow: 0 8px 18px var(--tw-shadow-color, #10b98133);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_18px_rgba\(217\,119\,6\,0\.28\)\] {
    --tw-shadow: 0 8px 18px var(--tw-shadow-color, #d9770647);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_20px_rgba\(15\,23\,42\,0\.06\)\] {
    --tw-shadow: 0 8px 20px var(--tw-shadow-color, #0f172a0f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_10px_22px_rgba\(15\,23\,42\,0\.18\)\] {
    --tw-shadow: 0 10px 22px var(--tw-shadow-color, #0f172a2e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_10px_24px_rgba\(15\,23\,42\,0\.06\)\] {
    --tw-shadow: 0 10px 24px var(--tw-shadow-color, #0f172a0f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_12px_30px_rgba\(15\,23\,42\,0\.06\)\] {
    --tw-shadow: 0 12px 30px var(--tw-shadow-color, #0f172a0f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_18px_40px_rgba\(217\,119\,6\,0\.16\)\] {
    --tw-shadow: 0 18px 40px var(--tw-shadow-color, #d9770629);
    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);
  }

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

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -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));
  }

  @media (hover: hover) {
    .group-hover\:opacity-60:is(:where(.group):hover *) {
      opacity: .6;
    }
  }

  @media (hover: hover) {
    .hover\:border-emerald-300:hover {
      border-color: var(--color-emerald-300);
    }
  }

  @media (hover: hover) {
    .hover\:border-slate-300:hover {
      border-color: var(--color-slate-300);
    }
  }

  @media (hover: hover) {
    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }
  }

  @media (hover: hover) {
    .hover\:text-rose-200:hover {
      color: var(--color-rose-200);
    }
  }

  @media (hover: hover) {
    .hover\:shadow-\[0_8px_18px_rgba\(15\,23\,42\,0\.08\)\]:hover {
      --tw-shadow: 0 8px 18px var(--tw-shadow-color, #0f172a14);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + 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);
  }

  .focus-visible\:ring-amber-300\/70:focus-visible {
    --tw-ring-color: #ffd236b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-amber-300\/70:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-300) 70%, transparent);
    }
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-\[1fr_auto\] {
      grid-template-columns: 1fr auto;
    }
  }

  @media (min-width: 48rem) {
    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:sticky {
      position: sticky;
    }
  }

  @media (min-width: 64rem) {
    .lg\:top-6 {
      top: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 64rem) {
    .lg\:top-8 {
      top: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 64rem) {
    .lg\:w-\[200px\] {
      width: 200px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[340px_1fr\] {
      grid-template-columns: 340px 1fr;
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[360px_1fr\] {
      grid-template-columns: 360px 1fr;
    }
  }

  @media (min-width: 64rem) {
    .lg\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 64rem) {
    .lg\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 64rem) {
    .lg\:items-end {
      align-items: flex-end;
    }
  }

  @media (min-width: 64rem) {
    .lg\:justify-between {
      justify-content: space-between;
    }
  }

  @media (min-width: 64rem) {
    .lg\:self-start {
      align-self: flex-start;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

:root {
  --ink: #0f172a;
  --ink-soft: #475569;
  --paper: #f8f2ea;
  --paper-cool: #edf3f7;
  --accent-warm: #d56a3a;
  --accent-warm-strong: #b45309;
  --accent-cool: #2a718f;
  --accent-cool-strong: #1f5a74;
  --success: #0f766e;
  --warning: #b45309;
  --danger: #b42318;
  --font-sans: "Noto Sans SC", "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Noto Serif SC", "Noto Serif", serif;
  --font-tech: "Oxanium", "Orbitron", "Noto Sans SC", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-sans);
  background-image: radial-gradient(1200px 800px at 12% -10%, #d56a3a38 0%, #0000 60%), radial-gradient(900px 700px at 92% 0, #2a718f33 0%, #0000 55%), repeating-linear-gradient(90deg, #0f172a09 0 1px, #0000 1px 36px), repeating-linear-gradient(0deg, #0f172a09 0 1px, #0000 1px 36px), linear-gradient(140deg, #f8f2ea 0%, #edf3f7 55%, #faf6ef 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  letter-spacing: -.02em;
}

body[data-theme="cyber"] h1, body[data-theme="cyber"] h2, body[data-theme="cyber"] h3, body[data-theme="cyber"] h4 {
  font-family: var(--font-serif);
  letter-spacing: .02em;
}

body[data-theme="cyber"] .site-title, body[data-theme="cyber"] .home-eyebrow, body[data-theme="cyber"] .home-section-eyebrow, body[data-theme="cyber"] .home-cta-eyebrow, body[data-theme="cyber"] .home-stat-label, body[data-theme="cyber"] .home-feature-index, body[data-theme="cyber"] .home-step-index, body[data-theme="cyber"] .hud-label, body[data-theme="cyber"] .role-tag, body[data-theme="cyber"] .pill, body[data-theme="cyber"] .site-status {
  font-family: var(--font-tech);
}

a {
  color: inherit;
  text-decoration: none;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up, body[data-theme="cyber"] .panel:after, body[data-theme="cyber"] .panel-soft:after, body[data-theme="cyber"] .panel-strong:after, body[data-theme="cyber"] .btn-primary, body[data-theme="cyber"] .btn-primary:before, body[data-theme="cyber"], body[data-theme="cyber"]:before, body[data-theme="cyber"]:after, body[data-theme="cyber"] .app-shell:before, body[data-theme="cyber"] .app-shell:after, .cyber-pet, .cyber-pet:before, .cyber-pet .pet-aura, .cyber-pet .pet-ring, .cyber-pet .pet-figure, .cyber-pet .pet-bull, .cyber-pet .bull-core, .cyber-pet .bull-core-ring, .cyber-pet .bull-thruster .bull-flame, .cyber-pet .pet-bull .bull-eye, .cyber-pet .pet-emote, .cyber-pet .pet-snort, .cyber-pet .pet-bloom, .cyber-pet .pet-wave, .cyber-pet .pet-burst, .cyber-pet .pet-spark, .cyber-pet .pet-hud {
    animation: none;
  }

  body[data-theme="cyber"] .cyber-cursor, body[data-theme="cyber"] .cyber-trail, body[data-theme="cyber"] .cyber-particles, body[data-theme="cyber"] .cyber-sky, body[data-theme="cyber"] .cyber-sky:before, body[data-theme="cyber"] .cyber-sky:after, body[data-theme="cyber"] .cyber-glow, .galaxy-grid, .galaxy-noise, .galaxy-scan, body[data-theme="cyber"] .hero-block:after, body[data-theme="cyber"] .hero-hud-line, body[data-theme="cyber"] .app-shell, body[data-theme="cyber"] .parallax-foreground, body[data-theme="cyber"] .glitch-slice:before, body[data-theme="cyber"] .glitch-slice:after {
    transition: none;
    animation: none;
  }

  body[data-theme="cyber"] .app-shell, body[data-theme="cyber"] .parallax-foreground {
    transform: none;
  }
}

.fade-up {
  animation: .6s both fade-up;
}

.fade-delay-1 {
  animation-delay: 80ms;
}

.fade-delay-2 {
  animation-delay: .16s;
}

.fade-delay-3 {
  animation-delay: .24s;
}

.fade-delay-4 {
  animation-delay: .32s;
}

.app-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.site-header {
  z-index: 60;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 1.1rem 1.25rem .6rem;
  position: sticky;
  top: 0;
}

.site-header-inner {
  background: #ffffffd1;
  border: 1px solid #94a3b847;
  border-radius: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: .65rem 1rem;
  display: flex;
  box-shadow: 0 14px 40px #0f172a1f;
}

.site-brand {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.site-logo {
  background: linear-gradient(135deg, #0f172ae6, #3b82f64d), radial-gradient(circle at 30% 30%, #3b82f6cc, #0000 60%);
  border: 1px solid #94a3b866;
  border-radius: 14px;
  width: 40px;
  height: 40px;
  box-shadow: inset 0 0 12px #3b82f659;
}

.site-title {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .95rem;
  font-weight: 700;
}

.site-subtitle {
  color: var(--ink-soft);
  margin-top: .15rem;
  font-size: .72rem;
}

.site-nav {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.site-auth {
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.site-user {
  color: var(--ink-soft);
  font-size: .75rem;
  font-weight: 600;
}

.site-link {
  color: var(--ink-soft);
  background: #ffffffbf;
  border: 1px solid #94a3b859;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: .45rem .9rem;
  font-size: .75rem;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s, border .2s;
  display: inline-flex;
}

.site-link:hover {
  color: var(--ink);
  border-color: #94a3b899;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px #0f172a14;
}

.site-link.is-active {
  color: #fff;
  background: #0f172ae6;
  border-color: #0f172abf;
  box-shadow: 0 12px 26px #0f172a3d;
}

.site-status {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-items: center;
  gap: .45rem;
  font-size: .7rem;
  font-weight: 600;
  display: inline-flex;
}

.status-dot {
  background: radial-gradient(circle, #10b981f2, #10b98133);
  border-radius: 999px;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 12px #10b98199;
}

.skeleton {
  background: linear-gradient(110deg, #94a3b81f 8%, #94a3b838 18%, #94a3b81f 33%) 0 0 / 200% 100%;
  border: 1px solid #94a3b838;
  border-radius: 16px;
  animation: 1.4s ease-in-out infinite skeleton-shimmer;
}

.skeleton-line {
  border-radius: 999px;
  height: 10px;
  margin-bottom: .6rem;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

.galaxy-bg {
  z-index: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.galaxy-canvas {
  filter: saturate(1.25) contrast(1.08);
  width: 100%;
  height: 100%;
  display: block;
}

.galaxy-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.galaxy-vignette {
  mix-blend-mode: multiply;
  opacity: .78;
  background: radial-gradient(circle at 50% 40%, #060c1833 0%, #05070d8c 55%, #04060ce0 100%), radial-gradient(circle at 50% 20%, #0a101e80 0%, #0000 60%);
  position: absolute;
  inset: 0;
}

.galaxy-grid {
  opacity: .18;
  mix-blend-mode: normal;
  background-image: linear-gradient(90deg, #48f3ff14 0 1px, #0000 1px 80px), linear-gradient(0deg, #48f3ff14 0 1px, #0000 1px 80px), linear-gradient(0deg, #48f3ff14, #0000 40%, #48f3ff14);
  background-position: 0 0, 0 0, 0 -120%;
  background-size: 80px 80px, 80px 80px, 100% 140%;
  animation: 40s linear infinite galaxy-grid;
}

.galaxy-noise {
  opacity: .12;
  mix-blend-mode: soft-light;
  background-image: repeating-linear-gradient(0deg, #ffffff0a 0 1px, #0000 1px 3px), repeating-linear-gradient(90deg, #ffffff0a 0 1px, #0000 1px 4px);
}

.galaxy-scan {
  opacity: .16;
  mix-blend-mode: normal;
  background: linear-gradient(#0000 0%, #48f3ff29 45%, #0000 100%);
  animation: 20s linear infinite galaxy-scan;
}

.hero-block {
  border-radius: 32px;
  padding: 2.6rem 2.2rem;
  position: relative;
  overflow: hidden;
}

.hero-header {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  display: flex;
}

.hero-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  display: flex;
}

.hero-widgets {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  display: grid;
}

.hud-widget {
  background: #ffffffd1;
  border: 1px solid #94a3b84d;
  border-radius: 18px;
  padding: .9rem 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 32px #0f172a14;
}

.hud-label {
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-soft);
  font-size: .65rem;
}

.hud-value {
  color: var(--ink);
  margin-top: .35rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.hud-meter {
  background: #94a3b84d;
  border-radius: 999px;
  height: 4px;
  margin-top: .65rem;
  overflow: hidden;
}

.hud-meter:after {
  content: "";
  height: 100%;
  width: var(--hud-fill, 60%);
  background: linear-gradient(90deg, #0f766ecc, #3b82f6cc);
  transition: width .4s;
  display: block;
}

.hero-hud {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.hero-hud-line {
  opacity: .7;
  background: linear-gradient(90deg, #0000, #94a3b8cc, #0000);
  width: 120px;
  height: 1px;
  position: absolute;
}

.hero-hud-line-a {
  top: 20px;
  left: 24px;
}

.hero-hud-line-b {
  top: 20px;
  right: 24px;
}

.hero-hud-line-c {
  bottom: 24px;
  left: 28px;
}

.hero-hud-line-d {
  bottom: 24px;
  right: 28px;
}

.panel {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #ffffffd1;
  border: 1px solid #94a3b84d;
  border-radius: 26px;
  box-shadow: 0 24px 70px #0f172a14;
}

.panel-soft {
  background: #ffffffa3;
  border: 1px solid #94a3b833;
  border-radius: 24px;
}

.panel-strong {
  background: #ffffffe6;
  border: 1px solid #94a3b859;
  border-radius: 28px;
  box-shadow: 0 30px 80px #0f172a1f;
}

.pill {
  letter-spacing: .02em;
  border: 1px solid #0000;
  border-radius: 999px;
  align-items: center;
  gap: .4rem;
  padding: .25rem .8rem;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
}

.pill-warm {
  color: var(--accent-warm-strong);
  background: #d56a3a1f;
  border-color: #d56a3a59;
}

.pill-cool {
  color: var(--accent-cool-strong);
  background: #2a718f1f;
  border-color: #2a718f59;
}

.pill-neutral {
  color: var(--ink-soft);
  background: #0f172a0f;
  border-color: #94a3b866;
}

.field {
  width: 100%;
  color: var(--ink);
  background: #fffffff2;
  border: 1px solid #94a3b873;
  border-radius: 14px;
  padding: .55rem .75rem;
  font-size: .9rem;
  transition: border .2s, box-shadow .2s;
}

.field:focus {
  border-color: #d56a3ab3;
  outline: none;
  box-shadow: 0 0 0 4px #d56a3a1f;
}

.btn-primary {
  color: #fff;
  background: #0f172a;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.3rem;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s, background .2s;
  display: inline-flex;
  box-shadow: 0 14px 34px #0f172a2e;
}

.btn-primary:hover {
  background: #111d36;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px #0f172a38;
}

.btn-primary:disabled {
  box-shadow: none;
  cursor: not-allowed;
  background: #94a3b8;
  transform: none;
}

.btn-outline {
  color: var(--ink-soft);
  background: #ffffffe6;
  border: 1px solid #94a3b899;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  font-weight: 600;
  transition: border .2s, box-shadow .2s, color .2s;
  display: inline-flex;
}

.btn-outline:hover {
  color: var(--ink);
  border-color: #94a3b8e6;
  box-shadow: 0 10px 24px #0f172a14;
}

.btn-soft {
  color: var(--ink-soft);
  background: #ffffffb8;
  border: 1px solid #94a3b866;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  transition: border .2s, color .2s, background .2s;
  display: inline-flex;
}

.btn-soft:hover {
  color: var(--ink);
  background: #fffffff2;
  border-color: #94a3b8cc;
}

.btn-danger {
  color: var(--danger);
  background: #b423181f;
  border-color: #b423184d;
}

.role-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  display: grid;
}

.role-tag {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: #ffffffb3;
  border: 1px solid #94a3b866;
  border-radius: 999px;
  align-items: center;
  gap: .35rem;
  padding: .28rem .85rem;
  font-size: .7rem;
  font-weight: 700;
  display: inline-flex;
}

.role-tag-small {
  letter-spacing: .12em;
  padding: .18rem .55rem;
  font-size: .62rem;
}

.role-tag[data-tone="strike"] {
  color: #9d174d;
  background: #d946ef1a;
  border-color: #d946ef73;
}

.role-tag[data-tone="heal"] {
  color: #0f766e;
  background: #0e74901f;
  border-color: #0e749073;
}

.role-tag[data-tone="guard"] {
  color: #c2410c;
  background: #ea580c1f;
  border-color: #ea580c73;
}

.cycle-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  display: flex;
}

.cycle-mode {
  flex-wrap: wrap;
  gap: .6rem;
  display: flex;
}

.cycle-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.4rem;
  display: flex;
}

.cycle-status {
  color: var(--ink-soft);
  margin-left: auto;
  font-size: .8rem;
}

.cycle-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  display: grid;
}

.cycle-card {
  position: relative;
}

.cycle-card-head {
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  display: flex;
}

.cycle-toggle {
  color: var(--ink);
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  display: inline-flex;
}

.cycle-toggle input {
  accent-color: #0f172a;
}

.cycle-chip {
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: #0f172a0f;
  border: 1px solid #94a3b866;
  border-radius: 999px;
  align-items: center;
  gap: .35rem;
  padding: .2rem .65rem;
  font-size: .7rem;
  font-weight: 600;
  display: inline-flex;
}

.cycle-row {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: end;
  gap: .9rem;
  margin-top: .9rem;
  display: grid;
}

.cycle-metric {
  background: #ffffffb3;
  border: 1px solid #94a3b84d;
  border-radius: 18px;
  padding: .6rem .75rem;
  box-shadow: 0 10px 24px #0f172a0f;
}

.cycle-metric-label {
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-size: .62rem;
}

.cycle-metric-value {
  color: var(--ink);
  margin-top: .35rem;
  font-size: 1rem;
  font-weight: 600;
}

.cycle-input {
  color: var(--ink-soft);
  font-size: .75rem;
}

.cycle-log {
  gap: .4rem;
  max-height: 260px;
  padding-right: .3rem;
  display: grid;
  overflow: auto;
}

.cycle-log-item {
  color: var(--ink);
  background: #0f172a0a;
  border: 1px solid #94a3b840;
  border-radius: 12px;
  padding: .45rem .65rem;
  font-size: .78rem;
}

.cycle-candidates {
  gap: .5rem;
  margin-top: .75rem;
  display: grid;
}

.cycle-order-item {
  background: #ffffffd1;
  border: 1px solid #94a3b859;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .4rem .55rem;
  display: flex;
  box-shadow: 0 12px 28px #0f172a14;
}

.cycle-order-info {
  align-items: center;
  gap: .6rem;
  display: flex;
}

.cycle-order-index {
  width: 30px;
  height: 30px;
  color: var(--ink);
  background: #0f172a1a;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
  box-shadow: inset 0 0 8px #0f172a14;
}

.cycle-order-name {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
}

.cycle-order-meta {
  letter-spacing: .02em;
  color: var(--ink-soft);
  font-size: .68rem;
}

.cycle-order-actions {
  gap: .3rem;
  display: flex;
}

.cycle-order-btn {
  min-width: 32px;
  padding: .2rem .5rem;
}

.cycle-available {
  gap: .4rem;
  margin-top: .6rem;
  display: grid;
}

.cycle-available-title {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-size: .65rem;
}

.cycle-available-list {
  flex-wrap: wrap;
  gap: .4rem;
  display: flex;
}

.cycle-available-item {
  font-size: .7rem;
}

.cycle-pill {
  color: var(--ink-soft);
  background: #ffffffbf;
  border: 1px solid #94a3b859;
  border-radius: 999px;
  align-items: center;
  gap: .25rem;
  padding: .2rem .6rem;
  font-size: .7rem;
  display: inline-flex;
}

body[data-theme="cyber"] .cycle-chip {
  color: #8fdff4;
  background: #48f3ff1f;
  border-color: #48f3ff66;
}

body[data-theme="cyber"] .cycle-metric {
  background: #0a101cd9;
  border-color: #48f3ff59;
  box-shadow: 0 16px 40px #0408108c;
}

body[data-theme="cyber"] .cycle-metric-label, body[data-theme="cyber"] .cycle-status, body[data-theme="cyber"] .cycle-input {
  color: #8fdff4;
}

body[data-theme="cyber"] .cycle-metric-value, body[data-theme="cyber"] .cycle-toggle {
  color: #d8f6ff;
}

body[data-theme="cyber"] .cycle-log-item {
  color: #d8f6ff;
  background: #080e1ab3;
  border-color: #48f3ff40;
}

body[data-theme="cyber"] .cycle-pill {
  color: #8fdff4;
  background: #0a101ccc;
  border-color: #48f3ff59;
}

body[data-theme="cyber"] .cycle-order-item {
  background: #0a101ccc;
  border-color: #48f3ff4d;
  box-shadow: 0 18px 40px #040a1699;
}

body[data-theme="cyber"] .cycle-order-index {
  color: #d8f6ff;
  background: #48f3ff1f;
}

body[data-theme="cyber"] .cycle-order-name {
  color: #d8f6ff;
}

body[data-theme="cyber"] .cycle-order-meta, body[data-theme="cyber"] .cycle-available-title {
  color: #8fdff4;
}

.member-notifier {
  z-index: 90;
  pointer-events: none;
  gap: .6rem;
  width: min(320px, 100vw - 32px);
  display: grid;
  position: fixed;
  top: 90px;
  right: 24px;
}

.member-notifier-head {
  pointer-events: auto;
  background: #ffffffd1;
  border: 1px solid #94a3b84d;
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .45rem .75rem;
  display: flex;
  box-shadow: 0 12px 30px #0f172a1a;
}

.member-notifier-title {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-size: .75rem;
  font-weight: 700;
}

.member-notifier-toggle {
  color: var(--ink-soft);
  background: #ffffffe6;
  border: 1px solid #94a3b880;
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .7rem;
  font-weight: 600;
}

.member-notifier-list {
  gap: .5rem;
  display: grid;
}

.modal-backdrop {
  z-index: 60;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #05091499;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal-card {
  color: #0f172a;
  background: #ffffffeb;
  border: 1px solid #94a3b84d;
  border-radius: 18px;
  width: min(92vw, 420px);
  padding: 20px;
  box-shadow: 0 24px 60px #0f172a4d;
}

body[data-theme="cyber"] .modal-card {
  color: #e2e8f0;
  background: #080d19eb;
  border-color: #94a3b840;
  box-shadow: 0 24px 70px #0a0e1a99;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
}

.modal-text {
  color: inherit;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.modal-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.member-cycle {
  pointer-events: auto;
  background: #ffffffd6;
  border: 1px solid #94a3b84d;
  border-radius: 16px;
  padding: .6rem .75rem;
  box-shadow: 0 14px 32px #0f172a1a;
}

.member-cycle-title {
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-soft);
  font-size: .62rem;
  font-weight: 700;
}

.aegis-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 1.5rem;
  display: grid;
}

@media (max-width: 900px) {
  .aegis-layout {
    grid-template-columns: 1fr;
  }
}

.aegis-sidebar {
  height: fit-content;
  position: sticky;
  top: 96px;
}

.aegis-channel {
  width: 100%;
  color: var(--ink-strong);
  background: #ffffffb3;
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .55rem .7rem;
  font-size: .85rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
}

.aegis-channel:hover {
  border-color: #94a3b880;
  transform: translateY(-1px);
}

.aegis-channel.is-active {
  border-color: #3b82f680;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px #3b82f62e;
}

.aegis-channel.is-joined {
  border-color: #10b98180;
  box-shadow: 0 10px 20px #10b98126;
}

.aegis-channel-main {
  align-items: center;
  gap: .6rem;
  min-width: 0;
  display: flex;
}

.aegis-channel-icon {
  width: 22px;
  height: 22px;
  color: var(--ink-soft);
  background: #94a3b833;
  border-radius: 6px;
  place-items: center;
  font-size: .75rem;
  font-weight: 700;
  display: grid;
}

.aegis-channel-text {
  min-width: 0;
  display: grid;
}

.aegis-channel-name {
  color: var(--ink-strong);
  font-size: .82rem;
  font-weight: 600;
}

.aegis-channel-sub {
  color: var(--ink-soft);
  font-size: .68rem;
}

.aegis-channel-meta {
  color: var(--ink-soft);
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  display: flex;
}

.aegis-group-title {
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .35rem;
  font-size: .62rem;
  font-weight: 700;
}

.aegis-channel-list {
  gap: .5rem;
  display: grid;
}

.aegis-slot {
  background: #ffffffeb;
  border: 1px solid #94a3b84d;
  border-radius: 16px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  display: grid;
}

.aegis-slot-id {
  color: var(--ink-strong);
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  display: flex;
}

.aegis-slot-tag {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: #94a3b826;
  border: 1px solid #94a3b859;
  border-radius: 999px;
  align-items: center;
  padding: .15rem .55rem;
  font-size: .65rem;
  font-weight: 600;
  display: inline-flex;
}

.aegis-slot-user {
  color: var(--ink-soft);
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  display: flex;
}

.aegis-slot-state {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  background: #94a3b833;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .7rem;
  font-weight: 600;
}

.aegis-slot-state.state-online {
  color: #10b981;
  background: #10b98133;
}

.aegis-slot-state.state-dead {
  color: #f43f5e;
  background: #f43f5e33;
}

.aegis-slot-actions {
  align-items: center;
  gap: .4rem;
  display: flex;
}

.aegis-slot.is-current {
  border-color: #22d3eed9;
  position: relative;
  box-shadow: 0 0 24px #38bdf859;
}

.aegis-slot.is-current:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  border: 1px dashed #7dd3fc73;
  animation: 1.6s ease-in-out infinite id-pulse;
  position: absolute;
  inset: 2px;
}

.aegis-now {
  color: #e2f7ff;
  background: #080c16cc;
  border: 1px solid #22d3ee80;
  border-radius: 999px;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 0 18px #38bdf859;
}

.aegis-log {
  gap: .5rem;
  display: grid;
}

.aegis-timeline {
  background: #0f172abf;
  border: 1px solid #94a3b833;
  border-radius: 16px;
  gap: .5rem;
  padding: .8rem 1rem;
  display: grid;
}

.aegis-timeline-item {
  color: var(--ink-soft);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  display: grid;
}

.aegis-timeline-item.is-current {
  color: #e2f7ff;
  background: #38bdf81f;
  border-radius: 12px;
  padding: .2rem .4rem;
}

.aegis-timeline-time {
  font-variant-numeric: tabular-nums;
  color: #7dd3fce6;
}

.aegis-timeline-label {
  color: #e2e8f0d9;
}

.aegis-timeline-count {
  font-variant-numeric: tabular-nums;
  color: #94a3b8d9;
}

.aegis-log-item {
  color: var(--ink-soft);
  background: #ffffffe6;
  border: 1px solid #94a3b840;
  border-radius: 12px;
  padding: .5rem .75rem;
  font-size: .75rem;
}

.member-cycle-sub {
  color: var(--ink-soft);
  margin-top: .35rem;
  font-size: .72rem;
}

.member-cycle-list {
  gap: .35rem;
  margin-top: .45rem;
  display: grid;
}

.member-cycle-item {
  background: #0f172a0a;
  border: 1px solid #94a3b833;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem;
  display: flex;
}

.member-cycle-skill {
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
}

.member-cycle-time {
  color: var(--ink-soft);
  font-size: .7rem;
}

.member-cycle-empty {
  color: var(--ink-soft);
  margin-top: .4rem;
  font-size: .75rem;
}

.member-title-pill {
  letter-spacing: .08em;
  color: #1e293b;
  background: #94a3b826;
  border: 1px solid #94a3b859;
  border-radius: 999px;
  align-items: center;
  padding: .1rem .55rem;
  font-size: .65rem;
  font-weight: 600;
  display: inline-flex;
}

.title-tone-gold {
  color: #fbbf24;
  background: #facc1526;
  border-color: #facc15b3;
}

.title-tone-violet {
  color: #c084fc;
  background: #a855f726;
  border-color: #a855f799;
}

.title-tone-cyan {
  color: #67e8f9;
  background: #22d3ee26;
  border-color: #22d3ee99;
}

.title-tone-emerald {
  color: #6ee7b7;
  background: #10b98126;
  border-color: #10b98199;
}

.title-tone-crimson {
  color: #fca5a5;
  background: #f8717126;
  border-color: #f87171b3;
}

.title-tone-azure {
  color: #93c5fd;
  background: #3b82f626;
  border-color: #3b82f6b3;
}

.title-tone-amber {
  color: #facc15;
  background: #fbbf2426;
  border-color: #fbbf24b3;
}

.member-id-effect {
  align-items: center;
  gap: .4rem;
  display: inline-flex;
  position: relative;
}

.id-effect-glow {
  text-shadow: 0 0 12px #38bdf8a6, 0 0 22px #d946ef59;
}

.id-effect-pulse {
  text-shadow: 0 0 12px #22d3eea6;
  animation: 2.2s ease-in-out infinite id-pulse;
}

.id-effect-flare {
  text-shadow: 0 0 14px #facc15bf, 0 0 24px #facc1573;
}

.id-effect-goldflame {
  text-shadow: 0 0 14px #facc15cc, 0 0 28px #fb923c99;
  animation: 1.8s ease-in-out infinite id-flame;
}

.id-effect-violetstorm {
  text-shadow: 0 0 16px #a855f7e6, 0 0 30px #818cf899;
  animation: 2.4s ease-in-out infinite id-lightning;
}

.id-effect-starfield {
  text-shadow: 0 0 10px #e2e8f0bf, 0 0 22px #7dd3fc99;
  animation: 3.4s ease-in-out infinite id-star;
}

.id-effect-ember {
  text-shadow: 0 0 12px #fb923cd9, 0 0 26px #ea580c99;
  animation: 2.1s ease-in-out infinite id-ember;
}

.id-effect-aqua {
  text-shadow: 0 0 14px #38bdf8d9, 0 0 28px #22d3ee99;
  animation: 2.6s ease-in-out infinite id-aqua;
}

.id-effect-glitch {
  text-shadow: 1px 0 #f87171a6, -1px 0 #38bdf88c;
  animation: 2.4s steps(2, end) infinite id-glitch;
}

.id-effect-prism {
  background: linear-gradient(120deg, #f472b6, #a78bfa, #38bdf8);
  color: #0000;
  text-shadow: 0 0 12px #a78bfa80;
  -webkit-background-clip: text;
  animation: 3s ease-in-out infinite id-prism;
}

.id-effect-halo {
  text-shadow: 0 0 16px #e2e8f0e6, 0 0 36px #3b82f680;
  animation: 2.8s ease-in-out infinite id-halo;
}

.id-effect-arc {
  text-shadow: 0 0 12px #5eead4e6, 0 0 24px #3b82f680;
  animation: 1.8s ease-in-out infinite id-arc;
}

.member-toast {
  pointer-events: auto;
  background: #ffffffe6;
  border: 1px solid #94a3b847;
  border-radius: 16px;
  padding: .6rem .75rem;
  box-shadow: 0 14px 32px #0f172a1f;
}

.member-toast-label {
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-soft);
  font-size: .62rem;
  font-weight: 700;
}

.member-toast-message {
  color: var(--ink);
  margin-top: .35rem;
  font-size: .85rem;
  line-height: 1.5;
}

.member-toast-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: .75rem;
}

body[data-theme="cyber"] .member-notifier-head, body[data-theme="cyber"] .member-toast, body[data-theme="cyber"] .member-cycle {
  background: #0a101ce0;
  border-color: #48f3ff59;
  box-shadow: 0 18px 40px #0408108c;
}

body[data-theme="cyber"] .member-notifier-title, body[data-theme="cyber"] .member-toast-label, body[data-theme="cyber"] .member-cycle-title {
  color: #8fdff4;
}

body[data-theme="cyber"] .member-toast-message {
  color: #d8f6ff;
}

body[data-theme="cyber"] .member-cycle-sub, body[data-theme="cyber"] .member-cycle-time, body[data-theme="cyber"] .member-cycle-empty {
  color: #9bb0c9;
}

body[data-theme="cyber"] .member-cycle-item {
  background: #080e1ab3;
  border-color: #48f3ff33;
}

body[data-theme="cyber"] .member-cycle-skill {
  color: #d8f6ff;
}

body[data-theme="cyber"] .member-notifier-toggle {
  color: #8fdff4;
  background: #080e1ad9;
  border-color: #48f3ff73;
}

@media (max-width: 640px) {
  .member-notifier {
    top: 76px;
    right: 12px;
  }
}

@media (max-width: 720px) {
  .cycle-actions {
    align-items: flex-start;
  }

  .cycle-status {
    width: 100%;
    margin-left: 0;
  }
}

.cyber-pet {
  cursor: grab;
  appearance: none;
  z-index: 80;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  --pet-x: 0px;
  --pet-y: 0px;
  --pet-boost: 0;
  width: 240px;
  height: 240px;
  transform: translate3d(var(--pet-x), var(--pet-y), 0) translateY(calc(-4px * var(--pet-boost))) scale(calc(1 + .03 * var(--pet-boost)));
  background: radial-gradient(circle at 30% 18%, #38bdf82e, #0000 60%), linear-gradient(135deg, #070c16eb 0%, #0c1426eb 100%);
  border: 1px solid #38bdf873;
  border-radius: 34px;
  place-items: center;
  padding: 0;
  transition: transform .25s, box-shadow .25s;
  display: grid;
  position: fixed;
  bottom: 32px;
  right: 24px;
  overflow: visible;
  box-shadow: 0 30px 70px #02060ead, inset 0 0 30px #38bdf81f;
}

.cyber-pet[data-dragging="true"] {
  cursor: grabbing;
  transition: none;
}

.cyber-pet[data-motion="reduce"] {
  transition: none;
}

.cyber-pet[data-motion="reduce"] .pet-aura, .cyber-pet[data-motion="reduce"] .pet-ring, .cyber-pet[data-motion="reduce"] .pet-figure, .cyber-pet[data-motion="reduce"] .pet-bull, .cyber-pet[data-motion="reduce"] .bull-core, .cyber-pet[data-motion="reduce"] .bull-core-ring, .cyber-pet[data-motion="reduce"] .bull-thruster .bull-flame, .cyber-pet[data-motion="reduce"] .pet-bull .bull-eye, .cyber-pet[data-motion="reduce"] .pet-emote, .cyber-pet[data-motion="reduce"] .pet-snort, .cyber-pet[data-motion="reduce"] .pet-bloom, .cyber-pet[data-motion="reduce"] .pet-wave, .cyber-pet[data-motion="reduce"] .pet-burst, .cyber-pet[data-motion="reduce"] .pet-spark, .cyber-pet[data-motion="reduce"] .bull-nose-ring {
  animation: none;
}

.cyber-pet:focus-visible {
  outline-offset: 4px;
  outline: 2px solid #38bdf8cc;
}

.cyber-pet:before {
  content: "";
  opacity: .4;
  pointer-events: none;
  background: linear-gradient(120deg, #0000 0%, #38bdf82e 50%, #0000 100%);
  animation: 7s ease-in-out infinite pet-sheen;
  position: absolute;
  inset: 0;
  transform: translateX(-60%);
}

.cyber-pet[data-state="boost"] {
  --pet-boost: 1;
  box-shadow: 0 32px 70px #38bdf859, 0 0 30px #d946ef40;
}

@media (max-width: 768px) {
  .cyber-pet {
    width: 200px;
    height: 200px;
    bottom: 18px;
    right: 12px;
  }
}

.cyber-pet .pet-aura {
  filter: blur(1px);
  background: radial-gradient(circle, #38bdf840 0%, #0000 70%);
  border-radius: 999px;
  width: 176px;
  height: 176px;
  animation: 4s ease-in-out infinite pet-aura;
  position: absolute;
}

.cyber-pet .pet-ring {
  border: 1px dashed #38bdf899;
  border-radius: 999px;
  width: 168px;
  height: 168px;
  animation: 9s linear infinite pet-spin;
  position: absolute;
}

.cyber-pet .pet-bloom {
  opacity: 0;
  border: 1px solid #38bdf899;
  border-radius: 999px;
  width: 148px;
  height: 148px;
  position: absolute;
  box-shadow: 0 0 18px #38bdf880;
}

.cyber-pet .pet-wave {
  opacity: 0;
  filter: drop-shadow(0 0 10px #48f3ff80);
  border: 1px solid #48f3ff99;
  border-radius: 999px;
  width: 180px;
  height: 180px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)scale(.4);
}

.cyber-pet .pet-wave-2 {
  filter: drop-shadow(0 0 10px #ff2aa173);
  border-color: #ff2aa199;
}

.cyber-pet .pet-burst {
  opacity: 0;
  filter: drop-shadow(0 0 6px #22d3ee99);
  background: linear-gradient(90deg, #22d3eef2, #d946efcc);
  border-radius: 999px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cyber-pet .pet-burst-1 {
  --tx: -42px;
  --ty: -34px;
  --rot: -18deg;
}

.cyber-pet .pet-burst-2 {
  --tx: 42px;
  --ty: -28px;
  --rot: 22deg;
}

.cyber-pet .pet-burst-3 {
  --tx: -34px;
  --ty: 30px;
  --rot: 145deg;
}

.cyber-pet .pet-burst-4 {
  --tx: 34px;
  --ty: 32px;
  --rot: 38deg;
}

.cyber-pet .pet-burst-5 {
  --tx: -6px;
  --ty: -52px;
  --rot: -90deg;
}

.cyber-pet .pet-burst-6 {
  --tx: 10px;
  --ty: 52px;
  --rot: 90deg;
}

.cyber-pet .pet-hud {
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 12px #48f3ff66);
  background: linear-gradient(90deg, #48f3ff99 0 32px, #0000 0) 0 0 / 60px 2px no-repeat, linear-gradient(0deg, #48f3ff99 0 32px, #0000 0) 0 0 / 2px 60px no-repeat, linear-gradient(90deg, #48f3ff99 0 32px, #0000 0) 100% 0 / 60px 2px no-repeat, linear-gradient(0deg, #48f3ff99 0 32px, #0000 0) 100% 0 / 2px 60px no-repeat, linear-gradient(90deg, #48f3ff99 0 32px, #0000 0) 0 100% / 60px 2px no-repeat, linear-gradient(0deg, #48f3ff99 0 32px, #0000 0) 0 100% / 2px 60px no-repeat, linear-gradient(90deg, #48f3ff99 0 32px, #0000 0) 100% 100% / 60px 2px no-repeat, linear-gradient(0deg, #48f3ff99 0 32px, #0000 0) 100% 100% / 2px 60px no-repeat;
  border-radius: 24px;
  transition: opacity .3s, transform .3s;
  position: absolute;
  inset: 16px;
  transform: scale(.98);
}

.cyber-pet .pet-hud-2 {
  opacity: 0;
  filter: drop-shadow(0 0 10px #ff2aa173);
  background: linear-gradient(90deg, #ff2aa18c 0 24px, #0000 0) 0 0 / 48px 2px no-repeat, linear-gradient(0deg, #ff2aa18c 0 24px, #0000 0) 0 0 / 2px 48px no-repeat, linear-gradient(90deg, #ff2aa18c 0 24px, #0000 0) 100% 100% / 48px 2px no-repeat, linear-gradient(0deg, #ff2aa18c 0 24px, #0000 0) 100% 100% / 2px 48px no-repeat;
  inset: 30px;
}

.cyber-pet:hover .pet-hud, .cyber-pet:focus-visible .pet-hud {
  opacity: .9;
  transform: scale(1);
}

.cyber-pet .pet-figure {
  pointer-events: none;
  width: 200px;
  height: 200px;
  animation: 3.6s ease-in-out infinite pet-float;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cyber-pet .pet-bull {
  filter: drop-shadow(0 0 18px #38bdf866);
  width: 100%;
  height: 100%;
  animation: 3s ease-in-out infinite pet-pulse;
}

.cyber-pet .bull-shell {
  filter: drop-shadow(0 0 12px #22d3ee40);
  opacity: .85;
}

.cyber-pet .bull-wear {
  mix-blend-mode: screen;
}

.cyber-pet .bull-plate-line {
  opacity: .85;
  filter: drop-shadow(0 0 6px #38bdf880);
}

.cyber-pet .bull-horn-line {
  filter: drop-shadow(0 0 6px #7dd3fc99);
}

.cyber-pet .bull-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: 6s linear infinite bull-core-spin;
}

.cyber-pet .bull-core-ring {
  animation: 3.5s linear infinite bull-core-dash;
}

.cyber-pet .bull-core-mark {
  filter: drop-shadow(0 0 6px #22d3eeb3);
}

.cyber-pet .bull-thruster {
  filter: drop-shadow(0 0 8px #22d3ee66);
}

.cyber-pet .bull-thruster .bull-flame {
  transform-origin: 0;
  animation: 1s ease-in-out infinite bull-flame;
}

.cyber-pet .pet-bull .bull-eye {
  transform-origin: center;
  transform-box: fill-box;
  animation: 4.8s ease-in-out infinite bull-blink;
}

.cyber-pet .bull-nose-ring {
  filter: drop-shadow(0 0 8px #38bdf899);
  animation: 3s ease-in-out infinite bull-nose-pulse;
}

.cyber-pet .pet-snort {
  opacity: 0;
  background: linear-gradient(90deg, #e2f1ffd9, #38bdf8d9);
  border-radius: 999px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 106px;
  box-shadow: 0 0 8px #38bdf899;
}

.cyber-pet .pet-snort-left {
  --snort-x: -12px;
  --snort-rot: -12deg;
  left: 64px;
}

.cyber-pet .pet-snort-right {
  --snort-x: 12px;
  --snort-rot: 12deg;
  right: 64px;
}

.cyber-pet .pet-spark {
  background: #d946efe6;
  border-radius: 2px;
  width: 8px;
  height: 8px;
  animation: 2.4s ease-in-out infinite pet-spark;
  position: absolute;
  box-shadow: 24px -18px #38bdf8e6, -26px 22px #22d3eecc;
}

.cyber-pet .pet-emote {
  color: #22d3eef2;
  text-shadow: 0 0 12px #22d3eecc;
  opacity: 0;
  pointer-events: none;
  font-size: 1rem;
  font-weight: 700;
  position: absolute;
  top: 24px;
  right: 36px;
  transform: translateY(6px)scale(.7);
}

.cyber-pet .pet-label {
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9ff6ffd9;
  font-family: Share Tech Mono, Noto Sans SC, sans-serif;
  font-size: .7rem;
  position: absolute;
  bottom: 14px;
}

.cyber-pet[data-state="boost"] .pet-bull, .cyber-pet[data-state="boost"] .pet-figure {
  animation: .7s ease-in-out pet-boost;
}

.cyber-pet[data-state="boost"] .bull-core {
  animation-duration: 2s;
}

.cyber-pet[data-state="boost"] .bull-thruster .bull-flame {
  animation-duration: .35s;
}

.cyber-pet[data-state="boost"] .pet-emote {
  animation: .8s ease-out pet-emote;
}

.cyber-pet[data-state="boost"] .pet-snort {
  animation: .7s ease-out pet-snort;
}

.cyber-pet[data-state="boost"] .pet-ring {
  animation: 3s linear infinite pet-spin;
}

.cyber-pet[data-state="boost"] .pet-bloom {
  animation: .8s ease-out pet-bloom;
}

.cyber-pet[data-state="boost"] .pet-burst {
  animation: .75s ease-out pet-burst;
}

.cyber-pet[data-state="boost"] .pet-wave {
  animation: .8s ease-out pet-wave;
}

.cyber-pet[data-state="boost"] .pet-wave-2 {
  animation-delay: 80ms;
}

@keyframes pet-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes pet-sheen {
  0% {
    transform: translateX(-60%);
  }

  50% {
    transform: translateX(40%);
  }

  100% {
    transform: translateX(120%);
  }
}

@keyframes pet-aura {
  0%, 100% {
    opacity: .6;
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes pet-spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pet-pulse {
  0%, 100% {
    transform: scale(.95);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes pet-bloom {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  35% {
    opacity: .8;
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

@keyframes pet-wave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(.35);
  }

  35% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(1.4);
  }
}

@keyframes pet-boost {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.18);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pet-snort {
  0% {
    opacity: 0;
    transform: rotate(var(--snort-rot, 0deg)) translateX(0) scale(.5);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(var(--snort-rot, 0deg)) translateX(var(--snort-x, 12px)) scale(1.2);
  }
}

@keyframes bull-blink {
  0%, 92%, 100% {
    transform: scaleY(1);
  }

  94%, 96% {
    transform: scaleY(.15);
  }
}

@keyframes bull-core-spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes bull-core-dash {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 80px;
  }
}

@keyframes bull-flame {
  0%, 100% {
    opacity: .7;
    transform: scaleX(.85);
  }

  50% {
    opacity: 1;
    transform: scaleX(1.05);
  }
}

@keyframes bull-nose-pulse {
  0%, 100% {
    opacity: .55;
    transform: scale(.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes pet-emote {
  0% {
    opacity: 0;
    transform: translateY(8px)scale(.7);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-16px)scale(1.1);
  }
}

@keyframes pet-burst {
  0% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.4);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  100% {
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--rot, 0deg)) scale(1.1);
    opacity: 0;
  }
}

@keyframes pet-spark {
  0%, 100% {
    opacity: .6;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-6px);
  }
}

body[data-theme="cyber"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  color: #e2f1ff;
  --neon-cyan: #48f3ff;
  --neon-magenta: #ff2aa1;
  --neon-lime: #a7ff1e;
  --neon-blue: #4d7cff;
  --neon-ice: #9ee7ff;
  --tech-border: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%2348f3ff' stroke-opacity='0.7' stroke-width='1' stroke-linecap='square'><path d='M2,2H24M2,2V24M98,2H76M98,2V24M2,98H24M2,98V76M98,98H76M98,98V76'/></svg>");
  --cursor-x: 50vw;
  --cursor-y: 30vh;
  background-color: #05070d;
  background-image: radial-gradient(1200px 720px at 10% -20%, #ff2aa138 0%, #0000 58%), radial-gradient(900px 620px at 90% -10%, #48f3ff38 0%, #0000 60%), radial-gradient(800px 900px at 55% 120%, #4d8dff29 0%, #0000 60%), linear-gradient(135deg, #050810fa 0%, #070c18fa 55%, #04080ffa 100%);
  background-position: 0 0, 100% 0, 50% 100%, 0 0;
  background-size: 160% 160%, 140% 140%, 180% 180%, 100% 100%;
  background-attachment: fixed;
  animation: 18s ease-in-out infinite cyber-aurora;
  position: relative;
}

body[data-theme="cyber"] > .galaxy-bg {
  z-index: 0;
  position: fixed;
}

body[data-theme="cyber"] > .cyber-fx {
  z-index: 2;
  position: fixed;
}

body[data-theme="cyber"] .app-shell, body[data-theme="cyber"] .site-header, body[data-theme="cyber"] .welfare-page, body[data-theme="cyber"] .min-h-screen {
  z-index: 3;
  position: relative;
}

body[data-theme="cyber"] > .cyber-pet {
  z-index: 80;
  position: fixed;
}

body[data-theme="cyber"] .app-shell {
  transition: none;
  position: relative;
  transform: none;
}

body[data-theme="cyber"] .app-shell:before, body[data-theme="cyber"] .app-shell:after {
  content: "";
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: normal;
  border-radius: 30px;
  position: absolute;
  inset: -16px;
}

body[data-theme="cyber"] .app-shell:before {
  border: 1px solid #48f3ff40;
  box-shadow: 0 0 24px #48f3ff26;
}

body[data-theme="cyber"] .app-shell:after {
  background-image: var(--tech-border);
  opacity: .45;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 26px;
  inset: -10px;
}

body[data-theme="cyber"] .parallax-foreground {
  transform: translate3d(calc(var(--parallax-x, 0) * 6px), calc(var(--parallax-y, 0) * 4px), 0);
}

body[data-theme="cyber"]:before {
  content: "";
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: normal;
  z-index: 0;
  background-image: repeating-linear-gradient(0deg, #94a3b812 0 1px, #0000 1px 4px), repeating-linear-gradient(90deg, #48f3ff0f 0 1px, #0000 1px 36px), linear-gradient(#0000 0%, #48f3ff2e 50%, #0000 100%);
  background-position: 0 0, 0 0, 0 -120%;
  background-size: auto, auto, 100% 200%;
  animation: 28s linear infinite cyber-grid-shift;
  position: fixed;
  inset: 0;
}

body[data-theme="cyber"]:after {
  content: "";
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: normal;
  transform-origin: center;
  z-index: 0;
  background: radial-gradient(circle at 50% 0, #48f3ff33 0%, #0000 60%), radial-gradient(circle at 18% 82%, #ff2aa129 0%, #0000 55%), radial-gradient(circle at 82% 75%, #a7ff1e1f 0%, #0000 55%), radial-gradient(circle at 70% 20%, #4d8dff1f 0%, #0000 55%);
  animation: 24s ease-in-out infinite cyber-flares;
  position: fixed;
  inset: 0;
}

body[data-theme="cyber"] .cyber-fx {
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: normal;
  opacity: .36;
  transition: opacity .35s;
  position: fixed;
  inset: 0;
}

body[data-theme="cyber"] .cyber-sky {
  transform-origin: center;
  opacity: .45;
  filter: blur(.2px);
  z-index: 0;
  background-image: radial-gradient(1px 1px at 12% 20%, #ffffffe6, #0000 60%), radial-gradient(1px 1px at 78% 18%, #48f3ffd9, #0000 60%), radial-gradient(1px 1px at 36% 72%, #ff2aa1d9, #0000 60%), radial-gradient(2px 2px at 60% 38%, #a7ff1ebf, #0000 60%);
  background-size: 160% 160%;
  animation: 90s linear infinite star-drift;
  position: absolute;
  inset: -20%;
}

body[data-theme="cyber"] .cyber-sky:before {
  content: "";
  opacity: .35;
  background-image: radial-gradient(1px 1px at 20% 32%, #fffc, #0000 60%), radial-gradient(1px 1px at 52% 18%, #48f3ffcc, #0000 60%), radial-gradient(1px 1px at 82% 46%, #ff2aa1bf, #0000 60%), radial-gradient(1px 1px at 45% 80%, #a7ff1eb3, #0000 60%), radial-gradient(1px 1px at 15% 70%, #ffffffa6, #0000 60%);
  animation: 18s ease-in-out infinite star-twinkle;
  position: absolute;
  inset: 0;
}

body[data-theme="cyber"] .cyber-sky:after {
  content: "";
  opacity: .6;
  filter: blur(18px);
  mix-blend-mode: screen;
  background: radial-gradient(600px at 22% 34%, #48f3ff33, #0000 70%), radial-gradient(720px at 72% 46%, #ff2aa138, #0000 72%), radial-gradient(520px at 45% 70%, #a7ff1e29, #0000 68%), conic-gradient(from 180deg, #48f3ff14, #0000 35%, #ff2aa11f, #0000 70%, #48f3ff14);
  animation: 80s linear infinite nebula-swirl;
  position: absolute;
  inset: -10%;
}

body[data-theme="cyber"] .cyber-glow {
  background: radial-gradient(520px circle at var(--cursor-x) var(--cursor-y), #48f3ff38, transparent 68%), radial-gradient(720px circle at calc(var(--cursor-x)  + 180px) calc(var(--cursor-y)  - 120px), #ff2aa12e, transparent 70%), radial-gradient(640px circle at calc(var(--cursor-x)  - 220px) calc(var(--cursor-y)  + 160px), #a7ff1e24, transparent 72%);
  filter: blur(10px);
  opacity: .55;
  z-index: 1;
  transition: opacity .4s;
  position: absolute;
  inset: -30%;
}

body[data-theme="cyber"][data-cursor="off"] .cyber-fx {
  opacity: .25;
}

body[data-theme="cyber"][data-cursor="off"] .cyber-glow {
  opacity: .2;
}

body[data-theme="cyber"] .cyber-cursor, body[data-theme="cyber"] .cyber-trail, body[data-theme="cyber"] .cyber-particles {
  transform: translate3d(calc(var(--cursor-x)  - 50%), calc(var(--cursor-y)  - 50%), 0);
  will-change: transform;
  border-radius: 999px;
  position: absolute;
  top: 0;
  left: 0;
}

body[data-theme="cyber"] .cyber-cursor {
  z-index: 2;
  width: 260px;
  height: 260px;
  transform: translate3d(calc(var(--cursor-x)  - 130px), calc(var(--cursor-y)  - 130px), 0);
  filter: blur(2px);
  opacity: .45;
  background: radial-gradient(circle, #48f3ff47 0%, #48f3ff1a 40%, #0000 70%);
  transition: transform .2s ease-out, opacity .4s;
  box-shadow: 0 0 45px #48f3ff38;
}

body[data-theme="cyber"] .cyber-trail {
  z-index: 2;
  width: 150px;
  height: 150px;
  transform: translate3d(calc(var(--cursor-x)  - 75px), calc(var(--cursor-y)  - 75px), 0);
  opacity: .4;
  filter: blur(3px);
  background: radial-gradient(circle, #ff2aa152 0%, #ff2aa11a 35%, #0000 70%);
  transition: transform .3s ease-out;
  box-shadow: 0 0 24px #ff2aa12e;
}

body[data-theme="cyber"] .cyber-trail:before {
  content: "";
  opacity: .35;
  background-image: radial-gradient(6px 6px at 20% 20%, #48f3ffe6, #0000 60%), radial-gradient(4px 4px at 70% 25%, #ff2aa1e6, #0000 60%), radial-gradient(5px 5px at 40% 75%, #a7ff1ebf, #0000 60%), radial-gradient(3px 3px at 78% 68%, #48f3ffcc, #0000 60%);
  animation: 12s ease-in-out infinite particle-flicker;
  position: absolute;
  inset: -8px;
}

body[data-theme="cyber"] .cyber-trail:after {
  content: "";
  opacity: .3;
  background: radial-gradient(circle, #48f3ff33 0%, #0000 70%);
  border-radius: 999px;
  animation: 16s ease-in-out infinite particle-flicker;
  position: absolute;
  inset: 18px;
}

body[data-theme="cyber"] .cyber-particles {
  z-index: 3;
  width: 220px;
  height: 220px;
  transform: translate3d(calc(var(--cursor-x)  - 110px), calc(var(--cursor-y)  - 110px), 0);
  opacity: .25;
  background-image: radial-gradient(2px 2px at 25% 30%, #fffc, #0000 60%), radial-gradient(2px 2px at 60% 20%, #48f3ffcc, #0000 60%), radial-gradient(3px 3px at 70% 70%, #ff2aa1cc, #0000 60%), radial-gradient(2px 2px at 35% 65%, #a7ff1ebf, #0000 60%), radial-gradient(3px 3px, #48f3ffb3, #0000 60%);
  transition: transform .28s ease-out;
  animation: 20s linear infinite particle-spin;
}

body[data-theme="cyber"] .cyber-hud-grid, body[data-theme="cyber"] .cyber-scanlines, body[data-theme="cyber"] .cyber-beam, body[data-theme="cyber"] .cyber-circuit, body[data-theme="cyber"] .cyber-streaks, body[data-theme="cyber"] .cyber-sparks, body[data-theme="cyber"] .cyber-radar {
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .5;
  will-change: transform, opacity;
  position: absolute;
  inset: -10%;
}

body[data-theme="cyber"] .cyber-hud-grid {
  opacity: .22;
  background-image: linear-gradient(90deg, #48f3ff14 0 1px, #0000 1px 90px), linear-gradient(0deg, #48f3ff14 0 1px, #0000 1px 90px), linear-gradient(90deg, #ff2aa10d 0 1px, #0000 1px 140px);
  background-position: 0 0, 0 0, 20px 40px;
  background-size: 90px 90px, 90px 90px, 140px 140px;
  animation: 60s linear infinite hud-grid-drift;
}

body[data-theme="cyber"] .cyber-radar {
  opacity: .28;
  filter: blur(2px);
  background: radial-gradient(460px at 30% 30%, #48f3ff33, #0000 70%), radial-gradient(520px at 70% 70%, #ff2aa12e, #0000 75%), conic-gradient(from 120deg, #48f3ff1f, #0000 35%, #ff2aa129, #0000 70%, #a7ff1e1f);
  animation: 60s linear infinite radar-spin;
  inset: -20%;
}

body[data-theme="cyber"] .cyber-circuit {
  opacity: .26;
  filter: blur(.2px);
  background-image: linear-gradient(120deg, #48f3ff33 0 2px, #0000 2px 120px), linear-gradient(0deg, #ff2aa11f 0 1px, #0000 1px 60px), radial-gradient(3px 3px at 20% 30%, #48f3ffcc, #0000 60%), radial-gradient(2px 2px at 70% 40%, #ff2aa1b3, #0000 60%), radial-gradient(2px 2px at 45% 75%, #a7ff1ea6, #0000 60%);
  background-size: 140px 140px, 60px 60px, 260px 260px, 300px 300px, 240px 240px;
  animation: 42s linear infinite circuit-flow;
}

body[data-theme="cyber"] .cyber-streaks {
  opacity: .14;
  background-image: repeating-linear-gradient(120deg, #48f3ff0f 0 2px, #0000 2px 18px);
  animation: 54s linear infinite streak-drift;
}

body[data-theme="cyber"] .cyber-beam {
  opacity: .18;
  filter: blur(3px);
  background: linear-gradient(120deg, #0000 0%, #48f3ff26 46%, #ff2aa138 50%, #0000 54%);
  animation: 42s ease-in-out infinite beam-sweep;
  inset: -30%;
}

body[data-theme="cyber"] .cyber-beam:after {
  content: "";
  opacity: .2;
  background: linear-gradient(120deg, #0000 0%, #a7ff1e26 46%, #48f3ff33 50%, #0000 54%);
  animation: 50s ease-in-out infinite reverse beam-sweep;
  position: absolute;
  inset: -20%;
}

body[data-theme="cyber"] .cyber-scanlines {
  opacity: .05;
  background-image: repeating-linear-gradient(0deg, #ffffff0a 0 1px, #0000 1px 3px);
  animation: 32s linear infinite scanlines;
  inset: 0;
}

body[data-theme="cyber"] .cyber-sparks {
  opacity: .16;
  background-image: radial-gradient(2px 2px at 12% 18%, #48f3ffe6, #0000 60%), radial-gradient(2px 2px at 36% 72%, #ff2aa1d9, #0000 60%), radial-gradient(3px 3px at 78% 32%, #a7ff1ed9, #0000 60%), radial-gradient(2px 2px at 62% 58%, #48f3ffcc, #0000 60%), radial-gradient(2px 2px at 88% 76%, #ff2aa1b3, #0000 60%);
  animation: 14s ease-in-out infinite sparks-flicker;
  inset: -5%;
}

@keyframes hud-grid-drift {
  0% {
    background-position: 0 0, 0 0, 20px 40px;
  }

  100% {
    background-position: 180px 120px, -120px 180px, 200px 260px;
  }
}

@keyframes circuit-flow {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 200px 120px, -120px 200px, 160px 140px, -180px 160px, 140px -120px;
  }
}

@keyframes beam-sweep {
  0% {
    opacity: .18;
    transform: translateX(-18%)translateY(-10%)rotate(0);
  }

  25% {
    opacity: .35;
  }

  50% {
    opacity: .55;
    transform: translateX(8%)translateY(6%)rotate(2deg);
  }

  75% {
    opacity: .35;
  }

  100% {
    opacity: .18;
    transform: translateX(18%)translateY(10%)rotate(-2deg);
  }
}

@keyframes scanlines {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 120px;
  }
}

@keyframes streak-drift {
  0% {
    transform: translateX(-10%)translateY(-10%);
  }

  100% {
    transform: translateX(10%)translateY(10%);
  }
}

@keyframes sparks-flicker {
  0%, 100% {
    opacity: .18;
  }

  50% {
    opacity: .3;
  }
}

@keyframes radar-spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="cyber"] .cyber-hud-grid, body[data-theme="cyber"] .cyber-circuit, body[data-theme="cyber"] .cyber-streaks, body[data-theme="cyber"] .cyber-beam, body[data-theme="cyber"] .cyber-scanlines, body[data-theme="cyber"] .cyber-sparks, body[data-theme="cyber"] .cyber-radar {
    animation: none;
  }
}

@media (max-width: 768px) {
  body[data-theme="cyber"] .cyber-hud-grid, body[data-theme="cyber"] .cyber-circuit, body[data-theme="cyber"] .cyber-radar {
    opacity: .16;
  }

  body[data-theme="cyber"] .cyber-beam, body[data-theme="cyber"] .cyber-streaks, body[data-theme="cyber"] .cyber-sparks {
    opacity: .18;
  }
}

body[data-theme="cyber"] .glitch-slice {
  position: relative;
}

body[data-theme="cyber"] .glitch-slice:before, body[data-theme="cyber"] .glitch-slice:after {
  content: attr(data-glitch);
  pointer-events: none;
  opacity: .03;
  mix-blend-mode: screen;
  filter: blur(.2px);
  width: 100%;
  height: 100%;
  transition: opacity .2s;
  position: absolute;
  top: 0;
  left: 0;
}

body[data-theme="cyber"] .glitch-slice:before {
  color: var(--neon-cyan);
  clip-path: inset(0 0 58%);
  transform: translate(-1px, -1px);
}

body[data-theme="cyber"] .glitch-slice:after {
  color: var(--neon-magenta);
  clip-path: inset(58% 0 0);
  transform: translate(1px, 1px);
}

body[data-theme="cyber"] .glitch-slice:hover:before, body[data-theme="cyber"] .glitch-slice:hover:after {
  opacity: .18;
}

body[data-theme="cyber"] .glitch-slice:hover:before {
  animation: 3s steps(2, end) infinite glitch-slice-1;
}

body[data-theme="cyber"] .glitch-slice:hover:after {
  animation: 3.6s steps(2, end) .2s infinite glitch-slice-2;
}

body[data-theme="cyber"] h1, body[data-theme="cyber"] h2, body[data-theme="cyber"] h3, body[data-theme="cyber"] h4 {
  letter-spacing: .02em;
  text-shadow: 0 0 10px #48f3ff40, 0 0 18px #ff2aa11f;
  font-family: Oxanium, Orbitron, Noto Sans SC, sans-serif;
}

body[data-theme="cyber"] .app-shell {
  z-index: 1;
  position: relative;
}

body[data-theme="cyber"] .app-shell:before {
  content: "";
  filter: blur(30px);
  opacity: .7;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 20% 30%, #48f3ff2e 0%, #0000 60%), radial-gradient(circle at 80% 40%, #ff2aa129 0%, #0000 60%);
  height: 520px;
  animation: 20s ease-in-out infinite cyber-orbit;
  position: absolute;
  inset: -220px -160px auto;
}

body[data-theme="cyber"] .app-shell:after {
  content: "";
  filter: blur(36px);
  opacity: .6;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 30%, #a7ff1e1f 0%, #0000 55%), radial-gradient(circle at 70% 40%, #4d8dff26 0%, #0000 60%);
  height: 520px;
  animation: 24s ease-in-out infinite reverse cyber-orbit;
  position: absolute;
  inset: auto -120px -240px;
}

body[data-theme="cyber"] .panel, body[data-theme="cyber"] .panel-soft, body[data-theme="cyber"] .panel-strong {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffff0d;
  border-color: #38bdf859;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px #03060ea6, inset 0 0 0 1px #38bdf81f;
}

body[data-theme="cyber"] .panel-soft {
  background: #ffffff0a;
  box-shadow: 0 18px 50px #02060e80;
}

body[data-theme="cyber"] .panel-strong {
  background: #ffffff0f;
  border-color: #d946ef66;
  box-shadow: 0 30px 90px #070e1ab3, inset 0 0 0 1px #d946ef2e;
}

body[data-theme="cyber"] .hero-block {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #ffffff0f;
  border-color: #48f3ff73;
  box-shadow: 0 40px 140px #030610d9, inset 0 0 0 1px #48f3ff1f;
}

body[data-theme="cyber"] .hero-block:before {
  content: "";
  pointer-events: none;
  border: 1px solid #48f3ff38;
  border-radius: 24px;
  position: absolute;
  inset: 14px;
  box-shadow: inset 0 0 18px #48f3ff14;
}

body[data-theme="cyber"] .hero-block:after {
  content: "";
  background-image: var(--tech-border), linear-gradient(90deg, transparent 0 18%, #48f3ff33 18% 18.6%, transparent 18.6% 100%), linear-gradient(0deg, transparent 0 22%, #ff2aa129 22% 22.6%, transparent 22.6% 100%), radial-gradient(circle at 12% 28%, #48f3ff33, transparent 45%), radial-gradient(circle at 80% 22%, #ff2aa133, transparent 45%);
  opacity: .2;
  mix-blend-mode: normal;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: none;
  position: absolute;
  inset: 0;
}

body[data-theme="cyber"] .hero-hud-line {
  opacity: .4;
  background: linear-gradient(90deg, #0000, #48f3ffcc, #0000);
  animation: none;
  box-shadow: 0 0 10px #48f3ff4d;
}

body[data-theme="cyber"] .hero-hud-line-b {
  opacity: .35;
  background: linear-gradient(90deg, #0000, #ff2aa1bf, #0000);
}

body[data-theme="cyber"] .hero-hud-line-c {
  opacity: .35;
  background: linear-gradient(90deg, #0000, #a7ff1eb3, #0000);
}

body[data-theme="cyber"] .hero-hud-line-d {
  opacity: .3;
}

@media (min-width: 900px) {
  body[data-theme="cyber"] .hero-header {
    text-align: left;
    align-items: flex-start;
  }

  body[data-theme="cyber"] .hero-actions {
    justify-content: flex-start;
  }
}

body[data-theme="cyber"] .hud-widget {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffff0d;
  border-color: #48f3ff38;
  box-shadow: 0 16px 36px #02060ea6, inset 0 0 0 1px #48f3ff14;
}

body[data-theme="cyber"] .hud-widget:before {
  content: "";
  opacity: .6;
  pointer-events: none;
  background: linear-gradient(120deg, #48f3ff14, #0000 60%);
  position: absolute;
  inset: 0;
}

body[data-theme="cyber"] .hud-widget:after {
  content: "";
  background-image: var(--tech-border);
  opacity: .5;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  inset: 0;
}

body[data-theme="cyber"] .hud-widget > * {
  z-index: 1;
  position: relative;
}

body[data-theme="cyber"] .hud-label {
  color: #9ee7ffb8;
}

body[data-theme="cyber"] .hud-value {
  color: #eaf6ff;
  text-shadow: 0 0 12px #48f3ff33;
}

body[data-theme="cyber"] .hud-meter {
  background: #48f3ff2e;
}

body[data-theme="cyber"] .hud-meter:after {
  background: linear-gradient(90deg, #48f3fff2, #ff2aa1e6, #a7ff1ee6);
  box-shadow: 0 0 12px #48f3ff66;
}

body[data-theme="cyber"] .site-header {
  background: linear-gradient(#050810bf, #0000 70%);
}

body[data-theme="cyber"] .site-header-inner {
  background: #060a14d1;
  border-color: #48f3ff59;
  box-shadow: 0 18px 50px #02060eb3, inset 0 0 0 1px #48f3ff1f;
}

body[data-theme="cyber"] .site-logo {
  background: linear-gradient(135deg, #060a14e6, #3b82f659), radial-gradient(circle at 30% 30%, #48f3ffe6, #0000 60%);
  border-color: #48f3ff66;
  box-shadow: inset 0 0 16px #48f3ff59;
}

body[data-theme="cyber"] .site-subtitle {
  color: #94daffbf;
}

body[data-theme="cyber"] .site-link {
  color: #93e7ffd9;
  background: #0a101ca6;
  border-color: #48f3ff59;
}

body[data-theme="cyber"] .site-link.is-active {
  color: #0b1120;
  text-shadow: none;
  background: linear-gradient(120deg, #48f3ff59, #ff2aa147);
  border-color: #48f3ffcc;
}

body[data-theme="cyber"] .site-status {
  color: #94daffb3;
}

body[data-theme="cyber"] .status-dot {
  background: radial-gradient(circle, #48f3ffe6, #48f3ff33);
  box-shadow: 0 0 14px #48f3ffb3;
}

body[data-theme="cyber"] .panel, body[data-theme="cyber"] .panel-soft, body[data-theme="cyber"] .panel-strong {
  transition: transform .35s, box-shadow .35s, border-color .35s;
}

body[data-theme="cyber"] .panel:hover, body[data-theme="cyber"] .panel-soft:hover, body[data-theme="cyber"] .panel-strong:hover {
  border-color: #48f3ff8c;
  transform: translateY(-3px);
  box-shadow: 0 28px 80px #0a1220d9, 0 0 28px #48f3ff2e;
}

body[data-theme="cyber"] .panel-strong:hover {
  border-color: #ff2aa18c;
  box-shadow: 0 32px 90px #0a1220e6, 0 0 30px #ff2aa133;
}

body[data-theme="cyber"] .panel:before, body[data-theme="cyber"] .panel-soft:before, body[data-theme="cyber"] .panel-strong:before {
  content: "";
  background-image: var(--tech-border), linear-gradient(120deg, #38bdf814, transparent 45%, #d946ef1a);
  opacity: .6;
  pointer-events: none;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  position: absolute;
  inset: 0;
}

body[data-theme="cyber"] .panel:after, body[data-theme="cyber"] .panel-soft:after, body[data-theme="cyber"] .panel-strong:after {
  content: "";
  opacity: .12;
  mix-blend-mode: normal;
  pointer-events: none;
  background-image: linear-gradient(#0000 0%, #48f3ff29 50%, #0000 100%), repeating-linear-gradient(90deg, #0000 0 24px, #48f3ff38 24px 25px, #0000 25px 80px), repeating-linear-gradient(0deg, #0000 0 22px, #ff2aa12e 22px 23px, #0000 23px 72px), radial-gradient(circle at 18% 32%, #48f3ff8c 0 2px, #0000 3px), radial-gradient(circle at 62% 52%, #ff2aa180 0 2px, #0000 3px), radial-gradient(circle at 78% 72%, #a7ff1e73 0 2px, #0000 3px);
  background-position: 0 -120%, 0 0, 40px 60px, 0 0, 0 0, 0 0;
  background-size: 100% 180%, 240px 180px, 200px 220px, 100% 100%, 100% 100%, 100% 100%;
  animation: none;
  position: absolute;
  inset: 0;
}

body[data-theme="cyber"] .panel > *, body[data-theme="cyber"] .panel-soft > *, body[data-theme="cyber"] .panel-strong > * {
  z-index: 1;
  position: relative;
}

body[data-theme="cyber"] .aegis-channel {
  color: #d5f2ff;
  background: #080c16c7;
  border-color: #38bdf866;
  box-shadow: inset 0 0 14px #0f172a59;
}

body[data-theme="cyber"] .aegis-channel.is-active {
  border-color: #818cf8b3;
  box-shadow: 0 18px 36px #4f46e533, 0 0 20px #818cf833;
}

body[data-theme="cyber"] .aegis-channel.is-joined {
  border-color: #10b98199;
  box-shadow: 0 18px 30px #10b9812e;
}

body[data-theme="cyber"] .aegis-channel-icon {
  color: #d8f0ffd9;
  background: #38bdf826;
}

body[data-theme="cyber"] .aegis-channel-name {
  color: #e2f7ff;
}

body[data-theme="cyber"] .aegis-channel-sub {
  color: #add8ff99;
}

body[data-theme="cyber"] .aegis-slot {
  background: #080c16cc;
  border-color: #38bdf859;
  box-shadow: inset 0 0 16px #09101e99;
}

body[data-theme="cyber"] .aegis-slot-id {
  color: #d6f2ff;
}

body[data-theme="cyber"] .aegis-slot-tag {
  color: #f3b6ff;
  background: #180a1e99;
  border-color: #d946ef73;
}

body[data-theme="cyber"] .aegis-slot-user {
  color: #d8f0ffb3;
}

body[data-theme="cyber"] .aegis-slot-state {
  color: #9ee7ff;
  background: #38bdf81f;
  border: 1px solid #38bdf840;
}

body[data-theme="cyber"] .aegis-slot-state.state-online {
  color: #6ee7b7;
  background: #10b9812e;
  border-color: #10b98159;
}

body[data-theme="cyber"] .aegis-slot-state.state-dead {
  color: #fda4af;
  background: #f43f5e29;
  border-color: #f43f5e59;
}

body[data-theme="cyber"] .aegis-log-item {
  color: #d6f2ffb3;
  background: #080c16bf;
  border-color: #38bdf84d;
}

body[data-theme="cyber"] .btn-primary {
  color: #020617;
  text-shadow: 0 0 12px #ffffff59;
  background: linear-gradient(120deg, #22d3ee 0%, #6366f1 50%, #d946ef 100%) 0 0 / 200% 200%;
  animation: 6s infinite neon-flow;
  position: relative;
  overflow: hidden;
}

body[data-theme="cyber"] .btn-primary:before {
  content: "";
  opacity: .6;
  pointer-events: none;
  background: linear-gradient(120deg, #0000, #48f3ff66, #0000);
  animation: 4.6s ease-in-out infinite cyber-shine;
  position: absolute;
  inset: -80% 0;
  transform: translateX(-60%);
}

body[data-theme="cyber"] .btn-primary:after {
  content: "";
  opacity: .35;
  pointer-events: none;
  background: radial-gradient(circle at 20% 20%, #48f3ff40, #0000 60%);
  position: absolute;
  inset: 0;
}

body[data-theme="cyber"] .btn-primary:hover {
  background-position: 80% 20%;
  box-shadow: 0 18px 40px #22d3ee40;
}

body[data-theme="cyber"] .btn-soft:hover {
  background: #0a101ebf;
  border-color: #38bdf899;
}

body[data-theme="cyber"] .btn-danger {
  color: #fecaca;
  background: #3b071299;
  border-color: #f8717166;
}

body[data-theme="cyber"] .cyber-card {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px #02060e99, inset 0 0 0 1px #38bdf81f;
  background: #ffffff0d !important;
  border-color: #38bdf859 !important;
}

body[data-theme="cyber"] .cyber-card:before {
  content: "";
  background-image: var(--tech-border);
  opacity: .55;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  inset: 0;
}

body[data-theme="cyber"] .cyber-card > * {
  z-index: 1;
  position: relative;
}

body[data-theme="cyber"] .cyber-chip {
  box-shadow: inset 0 0 18px #38bdf814;
  color: #c7e8ff !important;
  background: #080c16cc !important;
  border-color: #38bdf84d !important;
}

body[data-theme="cyber"] .role-tag {
  color: #9ad7f5;
  background: #080c16b3;
  border-color: #38bdf880;
}

body[data-theme="cyber"] .role-tag[data-tone="strike"] {
  color: #f3b6ff;
  background: #230831b3;
  border-color: #d946ef99;
  box-shadow: 0 0 16px #d946ef40;
}

body[data-theme="cyber"] .role-tag[data-tone="heal"] {
  color: #7be7ff;
  background: #06191eb3;
  border-color: #22d3ee99;
  box-shadow: 0 0 16px #22d3ee40;
}

body[data-theme="cyber"] .role-tag[data-tone="guard"] {
  color: #fdba74;
  background: #2c1006b3;
  border-color: #f9731699;
  box-shadow: 0 0 16px #f9731633;
}

body[data-theme="cyber"] .neon-title {
  color: #e2f1ff;
  text-shadow: 0 0 20px #38bdf873, 0 0 40px #d946ef38;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(120deg, #e2f1ff 0%, #7be7ff 40%, #ff7ad9 80%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: 6s ease-in-out infinite cyber-title-shift;
}

body[data-theme="cyber"] .bg-white {
  background-color: #070c16e6 !important;
}

body[data-theme="cyber"] .bg-white\/90 {
  background-color: #070c16d1 !important;
}

body[data-theme="cyber"] .bg-white\/85 {
  background-color: #070c16cc !important;
}

body[data-theme="cyber"] .bg-white\/80 {
  background-color: #070c16c2 !important;
}

body[data-theme="cyber"] .bg-white\/75 {
  background-color: #070c16b8 !important;
}

body[data-theme="cyber"] .bg-white\/70 {
  background-color: #070c16b3 !important;
}

body[data-theme="cyber"] .bg-white\/60 {
  background-color: #070c1699 !important;
}

body[data-theme="cyber"] .bg-slate-100 {
  color: #9ad7f5;
  background-color: #0c1222cc !important;
}

body[data-theme="cyber"] .bg-slate-900 {
  background: linear-gradient(135deg, #38bdf866, #d946ef73);
}

body[data-theme="cyber"] .bg-amber-50\/80 {
  background-color: #f59e0b1f !important;
}

body[data-theme="cyber"] .border-amber-200\/70 {
  border-color: #f59e0b73 !important;
}

body[data-theme="cyber"] .text-amber-700 {
  color: #fbbf24 !important;
}

body[data-theme="cyber"] .bg-orange-50\/80 {
  background-color: #f973161f !important;
}

body[data-theme="cyber"] .border-orange-200\/70 {
  border-color: #f9731673 !important;
}

body[data-theme="cyber"] .text-orange-700 {
  color: #fb923c !important;
}

body[data-theme="cyber"] .bg-emerald-50\/80 {
  background-color: #10b9811f !important;
}

body[data-theme="cyber"] .border-emerald-200\/70 {
  border-color: #10b98173 !important;
}

body[data-theme="cyber"] .text-emerald-700 {
  color: #34d399 !important;
}

body[data-theme="cyber"] .bg-rose-50\/80 {
  background-color: #f43f5e1f !important;
}

body[data-theme="cyber"] .border-rose-200\/70 {
  border-color: #f43f5e73 !important;
}

body[data-theme="cyber"] .text-rose-700 {
  color: #fb7185 !important;
}

body[data-theme="cyber"] .border-slate-200 {
  border-color: #38bdf838 !important;
}

body[data-theme="cyber"] .border-slate-200\/70 {
  border-color: #38bdf84d !important;
}

body[data-theme="cyber"] .border-slate-200\/60 {
  border-color: #38bdf847 !important;
}

body[data-theme="cyber"] .border-slate-900 {
  border-color: #38bdf8a6 !important;
}

body[data-theme="cyber"] .text-slate-600 {
  color: #9bb0c9 !important;
}

body[data-theme="cyber"] .text-slate-500 {
  color: #7f96b3 !important;
}

@keyframes neon-flow {
  0% {
    background-position: 0%;
  }

  50% {
    background-position: 100%;
  }

  100% {
    background-position: 0%;
  }
}

@keyframes cyber-scan {
  0% {
    transform: translateY(-120%);
  }

  100% {
    transform: translateY(120%);
  }
}

@keyframes galaxy-scan {
  0% {
    transform: translateY(-120%);
  }

  100% {
    transform: translateY(120%);
  }
}

@keyframes galaxy-grid {
  0% {
    background-position: 0 0, 0 0, 0 -120%;
  }

  100% {
    background-position: 0 0, 0 0, 0 120%;
  }
}

@keyframes cyber-aurora {
  0% {
    background-position: 0 0, 100% 0, 50% 100%, 0 0;
  }

  50% {
    background-position: 15% 18%, 85% 10%, 45% 85%, 0 0;
  }

  100% {
    background-position: 0 0, 100% 0, 50% 100%, 0 0;
  }
}

@keyframes cyber-grid-shift {
  0% {
    background-position: 0 0, 0 0, 0 -120%;
  }

  100% {
    background-position: 0 0, 0 0, 0 120%;
  }
}

@keyframes cyber-flares {
  0% {
    opacity: .4;
    transform: translateY(-1%)scale(1);
  }

  50% {
    opacity: .55;
    transform: translateY(.5%)scale(1.02);
  }

  100% {
    opacity: .45;
    transform: translateY(-.5%)scale(1.01);
  }
}

@keyframes cyber-orbit {
  0% {
    transform: translateY(0)translateX(0)scale(1);
  }

  50% {
    transform: translateY(10px)translateX(-12px)scale(1.04);
  }

  100% {
    transform: translateY(-6px)translateX(6px)scale(1.02);
  }
}

@keyframes cyber-title-shift {
  0%, 100% {
    filter: drop-shadow(0 0 10px #48f3ff59);
  }

  50% {
    filter: drop-shadow(0 0 18px #ff2aa159);
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes cyber-shine {
  0% {
    transform: translateX(-60%);
  }

  50% {
    transform: translateX(40%);
  }

  100% {
    transform: translateX(140%);
  }
}

@keyframes id-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .6;
  }
}

@keyframes id-flame {
  0%, 100% {
    filter: drop-shadow(0 0 8px #fbbf2499);
    opacity: 1;
  }

  50% {
    filter: drop-shadow(0 0 14px #fb923ccc);
    opacity: .85;
  }
}

@keyframes id-lightning {
  0%, 100% {
    text-shadow: 0 0 12px #a855f7cc, 0 0 20px #818cf880;
  }

  40% {
    text-shadow: 0 0 20px #818cf8e6, 0 0 40px #a855f7bf;
  }

  60% {
    text-shadow: 0 0 8px #a855f799, 0 0 24px #5eead466;
  }
}

@keyframes id-star {
  0%, 100% {
    opacity: .9;
    text-shadow: 0 0 10px #e2e8f099, 0 0 24px #7dd3fc80;
  }

  50% {
    opacity: .6;
    text-shadow: 0 0 16px #e2e8f0e6, 0 0 30px #38bdf8b3;
  }
}

@keyframes id-ember {
  0%, 100% {
    filter: drop-shadow(0 0 8px #fb923c99);
    opacity: 1;
  }

  50% {
    filter: drop-shadow(0 0 14px #ea580ccc);
    opacity: .8;
  }
}

@keyframes id-aqua {
  0%, 100% {
    text-shadow: 0 0 10px #38bdf8b3, 0 0 20px #22d3ee80;
  }

  50% {
    text-shadow: 0 0 20px #22d3eee6, 0 0 36px #38bdf8b3;
  }
}

@keyframes id-glitch {
  0%, 100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-1px);
  }

  40% {
    transform: translateX(1px);
  }

  60% {
    transform: translateX(-1px);
  }
}

@keyframes id-prism {
  0%, 100% {
    filter: drop-shadow(0 0 10px #a78bfa80);
  }

  50% {
    filter: drop-shadow(0 0 18px #38bdf8a6);
  }
}

@keyframes id-halo {
  0%, 100% {
    opacity: .9;
  }

  50% {
    opacity: .65;
  }
}

@keyframes id-arc {
  0%, 100% {
    text-shadow: 0 0 10px #5eead4b3, 0 0 18px #3b82f673;
  }

  50% {
    text-shadow: 0 0 20px #3b82f6cc, 0 0 32px #5eead4b3;
  }
}

@keyframes cyber-circuit {
  0% {
    background-position: 0 -120%, 0 0, 40px 60px, 0 0, 0 0, 0 0;
  }

  50% {
    background-position: 0 120%, 120px 40px, 10px 140px, 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 0 -120%, 240px 80px, 80px 0, 0 0, 0 0, 0 0;
  }
}

@keyframes star-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-4%, 3%, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes star-twinkle {
  0%, 100% {
    opacity: .35;
  }

  50% {
    opacity: .55;
  }
}

@keyframes nebula-swirl {
  0% {
    transform: rotate(0)scale(1);
  }

  50% {
    transform: rotate(180deg)scale(1.05);
  }

  100% {
    transform: rotate(360deg)scale(1);
  }
}

@keyframes hero-hud-scan {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }

  50% {
    background-position: 0 0, 120px 40px, 60px 120px, 0 0, 0 0;
  }

  100% {
    background-position: 0 0, 240px 80px, 120px 240px, 0 0, 0 0;
  }
}

@keyframes hero-hud-pulse {
  0%, 100% {
    opacity: .4;
    transform: scaleX(.8);
  }

  50% {
    opacity: .6;
    transform: scaleX(1);
  }
}

@keyframes particle-spin {
  0% {
    transform: translate3d(calc(var(--cursor-x)  - 110px), calc(var(--cursor-y)  - 110px), 0) rotate(0deg);
  }

  100% {
    transform: translate3d(calc(var(--cursor-x)  - 110px), calc(var(--cursor-y)  - 110px), 0) rotate(360deg);
  }
}

@keyframes particle-flicker {
  0%, 100% {
    opacity: .35;
    transform: scale(.98);
  }

  50% {
    opacity: .6;
    transform: scale(1.02);
  }
}

@keyframes glitch-slice-1 {
  0% {
    clip-path: inset(0 0 58%);
    transform: translate(-1px, -1px);
  }

  20% {
    clip-path: inset(0 0 40%);
    transform: translate(1px);
  }

  40% {
    clip-path: inset(0 0 68%);
    transform: translate(-2px, 1px);
  }

  60% {
    clip-path: inset(0 0 48%);
    transform: translate(2px, -1px);
  }

  100% {
    clip-path: inset(0 0 58%);
    transform: translate(-1px);
  }
}

@keyframes glitch-slice-2 {
  0% {
    clip-path: inset(58% 0 0);
    transform: translate(1px, 1px);
  }

  25% {
    clip-path: inset(72% 0 0);
    transform: translate(-2px);
  }

  50% {
    clip-path: inset(45% 0 0);
    transform: translate(2px, -1px);
  }

  75% {
    clip-path: inset(62% 0 0);
    transform: translate(1px, 1px);
  }

  100% {
    clip-path: inset(58% 0 0);
    transform: translate(1px, 1px);
  }
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  .app-shell {
    padding: 2.5rem 1rem 3rem;
  }

  .hero-block {
    padding: 2rem 1.4rem;
  }

  .hero-widgets {
    grid-template-columns: 1fr;
  }

  .welfare-page {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welfare-hero, .welfare-ornament, .welfare-hero:after {
    animation: none;
  }
}

:root {
  --welfare-ink: #1b1610;
  --welfare-ink-soft: #6b5c4d;
  --welfare-paper: #f8f1e4;
  --welfare-paper-strong: #f1e5d4;
  --welfare-crimson: #b13a2f;
  --welfare-gold: #c8a46d;
  --welfare-teal: #2f6f6b;
}

.welfare-page {
  color: var(--welfare-ink);
  background-image: radial-gradient(900px 560px at 8% -6%, #b13a2f33 0%, #0000 60%), radial-gradient(980px 760px at 96% 4%, #2f6f6b33 0%, #0000 55%), repeating-linear-gradient(90deg, #1b16100a 0 1px, #0000 1px 42px), repeating-linear-gradient(0deg, #1b161009 0 1px, #0000 1px 42px), linear-gradient(140deg, #f8f1e4 0%, #f2e6d6 55%, #fbf6ed 100%);
  background-attachment: fixed;
  font-family: Noto Sans SC, Noto Sans, PingFang SC, Microsoft YaHei, sans-serif;
  position: relative;
  overflow-x: hidden;
}

.welfare-page[data-theme="cyber"] {
  --welfare-ink: #d8f6ff;
  --welfare-ink-soft: #8fdff4;
  --welfare-paper: #0a0f1c;
  --welfare-paper-strong: #121a2b;
  --welfare-crimson: #ff2aa1;
  --welfare-gold: #48f3ff;
  --welfare-teal: #2ad1ff;
  color: var(--welfare-ink);
  background-image: radial-gradient(900px 620px at 10% -10%, #ff2aa12e 0%, #0000 60%), radial-gradient(900px 700px at 94% 4%, #48f3ff33 0%, #0000 55%), repeating-linear-gradient(90deg, #48f3ff14 0 1px, #0000 1px 36px), repeating-linear-gradient(0deg, #48f3ff0f 0 1px, #0000 1px 36px), linear-gradient(140deg, #0a0f1c 0%, #111b2d 55%, #0c1626 100%);
}

.welfare-page[data-theme="cyber"] .welfare-title, .welfare-page[data-theme="cyber"] .welfare-seal, .welfare-page[data-theme="cyber"] .welfare-badge {
  letter-spacing: .16em;
  font-family: Oxanium, Orbitron, Noto Sans SC, sans-serif;
}

.welfare-shell {
  z-index: 1;
  max-width: 1260px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4.5rem;
  position: relative;
}

.welfare-hero {
  background: linear-gradient(135deg, #fffaf2eb 0%, #f4e9dbeb 100%);
  border: 1px solid #a5784e59;
  border-radius: 28px;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.2rem 2.4rem;
  animation: 10s ease-in-out infinite welfare-glow;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px #1e18122e;
}

.welfare-hero:after {
  content: "";
  opacity: .25;
  pointer-events: none;
  background: linear-gradient(120deg, #0000 0%, #fff6 50%, #0000 100%);
  animation: 12s ease-in-out infinite welfare-sheen;
  position: absolute;
  inset: 0;
  transform: translateX(-60%);
}

@keyframes welfare-glow {
  0%, 100% {
    box-shadow: 0 24px 70px #1e18122e;
  }

  50% {
    box-shadow: 0 30px 90px #1e181247;
  }
}

@keyframes welfare-sheen {
  0% {
    transform: translateX(-60%);
  }

  50% {
    transform: translateX(40%);
  }

  100% {
    transform: translateX(120%);
  }
}

.welfare-title {
  letter-spacing: .1em;
  margin-top: .35rem;
  font-family: Noto Serif SC, Noto Serif, serif;
  font-size: clamp(2.1rem, 3vw, 3.1rem);
}

.welfare-subtitle {
  max-width: 42rem;
  color: var(--welfare-ink-soft);
  margin-top: .6rem;
  font-size: .95rem;
}

.welfare-badge {
  letter-spacing: .08em;
  color: var(--welfare-crimson);
  font-family: Noto Serif SC, Noto Serif, serif;
  font-size: .95rem;
}

.welfare-seal {
  border: 2px solid var(--welfare-crimson);
  width: 84px;
  height: 84px;
  color: var(--welfare-crimson);
  letter-spacing: .16em;
  background: #b13a2f1f;
  border-radius: 20px;
  place-items: center;
  gap: .1rem;
  font-family: Noto Serif SC, Noto Serif, serif;
  font-weight: 700;
  display: grid;
  transform: rotate(-8deg);
  box-shadow: 0 18px 30px #b13a2f2e;
}

.welfare-seal span {
  display: block;
}

.welfare-nav {
  flex-wrap: wrap;
  gap: .6rem;
  display: flex;
}

.welfare-theme-toggle {
  background: #ffffffb3;
  border: 1px solid #a5784e4d;
  border-radius: 999px;
  gap: .4rem;
  padding: .25rem;
  display: inline-flex;
  box-shadow: inset 0 0 0 1px #ffffff59;
}

.welfare-theme-btn {
  color: var(--welfare-ink-soft);
  background: none;
  border: 1px solid #0000;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s, color .2s;
}

.welfare-theme-btn.is-active {
  color: var(--welfare-ink);
  background: #b13a2f24;
  border-color: #b13a2f80;
  box-shadow: 0 10px 24px #b13a2f2e;
}

.welfare-page[data-theme="cyber"] .welfare-theme-toggle {
  background: #0c121ed9;
  border-color: #48f3ff66;
}

.welfare-page[data-theme="cyber"] .welfare-theme-btn.is-active {
  color: #d8f6ff;
  background: #48f3ff1f;
  border-color: #48f3ff99;
  box-shadow: 0 0 20px #48f3ff4d;
}

.welfare-ornament {
  filter: blur();
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, #c8a46d33 0%, #0000 70%);
  border-radius: 999px;
  width: 240px;
  height: 240px;
  animation: 14s ease-in-out infinite welfare-float;
  position: absolute;
}

.welfare-ornament-left {
  top: -80px;
  left: -60px;
}

.welfare-ornament-right {
  animation-delay: -4s;
  top: 140px;
  right: -80px;
}

@keyframes welfare-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(18px);
  }
}

.welfare-panel, .welfare-panel-soft, .welfare-panel-strong {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fffaf2eb;
  border: 1px solid #a5784e52;
  border-radius: 24px;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 18px 50px #1e18121f;
}

.welfare-panel:hover, .welfare-panel-soft:hover, .welfare-panel-strong:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px #1e181229;
}

.welfare-panel-soft {
  background: #fffaf2cc;
  box-shadow: 0 16px 40px #1e18121a;
}

.welfare-panel-strong {
  background: #ffffffeb;
  border-color: #a5784e66;
  box-shadow: 0 26px 70px #1e181229;
}

.welfare-stat {
  background: #ffffffc7;
  border: 1px solid #a5784e40;
  border-radius: 20px;
  padding: 1rem 1.1rem;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 12px 30px #1e181214;
}

.welfare-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px #1e181224;
}

.welfare-page[data-theme="cyber"] .welfare-stat:hover {
  box-shadow: 0 0 30px #48f3ff40;
}

.welfare-stat-title {
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--welfare-ink-soft);
  font-size: .68rem;
}

.welfare-stat-value {
  color: var(--welfare-ink);
  margin-top: .3rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.welfare-stat-meta {
  color: var(--welfare-ink-soft);
  margin-top: .25rem;
  font-size: .75rem;
}

.welfare-chip {
  letter-spacing: .08em;
  border: 1px solid #0000;
  border-radius: 999px;
  align-items: center;
  gap: .4rem;
  padding: .22rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s;
  display: inline-flex;
}

.welfare-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px #1e18121f;
}

.welfare-chip-jungler {
  color: #8f2d25;
  background: #b13a2f24;
  border-color: #b13a2f73;
}

.welfare-chip-blue {
  color: #1f5d5a;
  background: #2f6f6b24;
  border-color: #2f6f6b73;
}

.welfare-chip-standard {
  color: var(--welfare-ink-soft);
  background: #6e5c4d1f;
  border-color: #6e5c4d4d;
}

.welfare-chip-attack {
  color: #8f2d25;
  background: #b13a2f1f;
  border-color: #b13a2f66;
}

.welfare-chip-defense {
  color: #1f5d5a;
  background: #2f6f6b1f;
  border-color: #2f6f6b66;
}

.welfare-chip-excellent {
  color: #8b2b1f;
  background: #d460362e;
  border-color: #d4603673;
}

.welfare-chip-strong {
  color: #7a5321;
  background: #c8a46d33;
  border-color: #c8a46d80;
}

.welfare-chip-normal {
  color: var(--welfare-ink-soft);
  background: #6e5c4d1f;
  border-color: #6e5c4d4d;
}

.welfare-chip-sub {
  color: #2f6f6b;
  background: #2f6f6b24;
  border-color: #2f6f6b59;
}

.welfare-chip-commander {
  color: #7a2f2f;
  background: #b13a2f33;
  border-color: #b13a2f73;
}

.welfare-page[data-theme="cyber"] .welfare-chip-jungler {
  color: #ff8ad4;
  background: #ff2aa12e;
  border-color: #ff2aa180;
}

.welfare-page[data-theme="cyber"] .welfare-chip-blue, .welfare-page[data-theme="cyber"] .welfare-chip-defense, .welfare-page[data-theme="cyber"] .welfare-chip-sub {
  color: #7be7ff;
  background: #48f3ff24;
  border-color: #48f3ff73;
}

.welfare-page[data-theme="cyber"] .welfare-chip-commander {
  color: #ff8ad4;
  background: #ff2aa12e;
  border-color: #ff2aa180;
}

.welfare-page[data-theme="cyber"] .welfare-chip-excellent {
  color: #ff79c6;
  background: #ff79c633;
  border-color: #ff79c680;
}

.welfare-page[data-theme="cyber"] .welfare-chip-strong {
  color: #6efeff;
  background: #48f3ff2e;
  border-color: #48f3ff80;
}

.welfare-page[data-theme="cyber"] .welfare-chip-normal {
  color: #9aa7ff;
  background: #9aa7ff1f;
  border-color: #9aa7ff66;
}

.welfare-select {
  color: var(--welfare-ink);
  background: #fffcf6eb;
  border: 1px solid #ab7e5680;
  border-radius: 999px;
  min-width: 90px;
  padding: .3rem .7rem;
  font-size: .75rem;
}

.welfare-page .field {
  color: var(--welfare-ink);
  background: #fffcf6eb;
  border-color: #ab7e5680;
}

.welfare-page .field:focus {
  border-color: var(--welfare-crimson);
  box-shadow: 0 0 0 4px #b13a2f1f;
}

.welfare-page .btn-outline {
  color: var(--welfare-ink);
  background: #fffcf6d9;
  border-color: #b13a2f66;
}

.welfare-page .btn-outline:hover {
  color: var(--welfare-ink);
  border-color: #b13a2fb3;
  box-shadow: 0 12px 28px #1f18121f;
}

.welfare-page .btn-soft {
  color: var(--welfare-ink-soft);
  background: #fffcf6b3;
  border-color: #ab7e5673;
}

.welfare-page[data-theme="cyber"] .welfare-hero {
  background: linear-gradient(135deg, #0a0f1cf2 0%, #121e34eb 100%);
  border-color: #48f3ff66;
  box-shadow: 0 30px 90px #48f3ff2e;
}

.welfare-page[data-theme="cyber"] .welfare-panel, .welfare-page[data-theme="cyber"] .welfare-panel-soft, .welfare-page[data-theme="cyber"] .welfare-panel-strong, .welfare-page[data-theme="cyber"] .welfare-stat {
  background: #0c121ee6;
  border-color: #48f3ff59;
  box-shadow: 0 20px 60px #060a1480;
}

.welfare-page[data-theme="cyber"] .welfare-title {
  text-shadow: 0 0 12px #48f3ff73;
}

.welfare-page[data-theme="cyber"] .welfare-badge {
  color: #7be7ff;
}

.welfare-page[data-theme="cyber"] .welfare-seal {
  color: #7be7ff;
  background: #48f3ff1f;
  border-color: #7be7ff;
  box-shadow: 0 0 30px #48f3ff4d;
}

.welfare-page[data-theme="cyber"] .field, .welfare-page[data-theme="cyber"] .welfare-select {
  color: var(--welfare-ink);
  background: #0a0f1cd9;
  border-color: #48f3ff73;
}

.welfare-page[data-theme="cyber"] .field:focus {
  border-color: #7be7ff;
  box-shadow: 0 0 0 4px #48f3ff33;
}

.welfare-page[data-theme="cyber"] .btn-outline {
  color: var(--welfare-ink);
  background: #0c121ed9;
  border-color: #48f3ff66;
}

.welfare-page[data-theme="cyber"] .btn-outline:hover {
  border-color: #48f3ffcc;
  box-shadow: 0 12px 28px #48f3ff33;
}

.welfare-page[data-theme="cyber"] .btn-soft {
  color: #8fdff4;
  background: #0c121eb3;
  border-color: #48f3ff59;
}

.welfare-page[data-theme="cyber"] .text-slate-900 {
  color: #d8f6ff !important;
}

.welfare-page[data-theme="cyber"] .text-slate-700 {
  color: #b6e9f5 !important;
}

.welfare-page[data-theme="cyber"] .text-slate-600, .welfare-page[data-theme="cyber"] .text-slate-500 {
  color: #8fdff4 !important;
}

.welfare-page[data-theme="cyber"] .text-slate-400 {
  color: #74cfe6 !important;
}

@media (min-width: 900px) {
  .welfare-hero {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .welfare-seal {
    align-self: flex-start;
  }
}

@media (max-width: 640px) {
  .welfare-shell {
    padding: 2.8rem 1.1rem 3.5rem;
  }

  .welfare-hero {
    padding: 1.8rem 1.6rem;
  }
}

.home-hero {
  background: linear-gradient(140deg, #ffffffeb, #f0f2f6e6);
  border: 1px solid #0f172a1f;
  border-radius: 40px;
  padding: 3.8rem 3.6rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 50px 120px #0f172a2e;
}

.home-hero:before {
  content: "";
  opacity: .8;
  pointer-events: none;
  background: radial-gradient(circle at 14% 20%, #0f172a14, #0000 50%), radial-gradient(circle at 88% 20%, #3b82f61a, #0000 55%), linear-gradient(90deg, #0f172a0f, #0000 40%, #0f172a0a);
  position: absolute;
  inset: 0;
}

.home-hero-inner {
  z-index: 1;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 3.2rem;
  display: grid;
  position: relative;
}

.home-eyebrow {
  letter-spacing: .36em;
  text-transform: uppercase;
  color: #0f172a99;
  align-items: center;
  gap: .7rem;
  font-size: .7rem;
  display: inline-flex;
}

.home-eyebrow:before {
  content: "";
  background: #0f172a66;
  width: 28px;
  height: 1px;
}

.home-title {
  letter-spacing: .08em;
  margin-top: 1.2rem;
  font-size: clamp(2.6rem, 4.2vw, 4.8rem);
  font-weight: 700;
  line-height: 1.05;
}

.home-lead {
  color: #0f172aa6;
  max-width: 36rem;
  margin-top: 1.4rem;
  font-size: 1rem;
  line-height: 1.8;
}

.home-hero-actions {
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
  display: flex;
}

.home-hero-stats {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 2.6rem;
  display: grid;
}

.home-stat {
  background: #ffffffb3;
  border: 1px solid #0f172a1f;
  border-radius: 18px;
  padding: .9rem 1.1rem;
  box-shadow: 0 18px 40px #0f172a1f;
}

.home-stat-label {
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #0f172a8c;
  font-size: .62rem;
}

.home-stat-value {
  color: #0f172ad9;
  margin-top: .55rem;
  font-size: .95rem;
  font-weight: 600;
}

.home-hero-figure {
  background: radial-gradient(circle at 30% 30%, #0f172a1f, #0000 55%), linear-gradient(135deg, #ffffffeb, #e6ebf2eb);
  border: 1px solid #0f172a24;
  border-radius: 28px;
  min-height: 320px;
  animation: 10s ease-in-out infinite home-float;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 60px #0f172a14;
}

.home-hero-logo {
  object-fit: contain;
  filter: drop-shadow(0 12px 28px #0f172a59);
  opacity: .92;
  z-index: 2;
  pointer-events: none;
  width: min(280px, 64%);
  height: auto;
  margin: auto;
  position: absolute;
  inset: 0;
}

.home-hero-ring {
  border: 1px solid #0f172a1f;
  border-radius: 50%;
  width: 220px;
  height: 220px;
  animation: 14s linear infinite home-orbit;
  position: absolute;
  top: 30px;
  right: 24px;
  box-shadow: 0 0 40px #0f172a14;
}

.home-hero-grid {
  opacity: .25;
  background-image: linear-gradient(90deg, #0f172a14 0 1px, #0000 1px 64px), linear-gradient(0deg, #0f172a14 0 1px, #0000 1px 64px);
  position: absolute;
  inset: 0;
}

.home-hero-glow {
  filter: blur(4px);
  background: radial-gradient(circle, #3b82f62e, #0000 65%);
  border-radius: 999px;
  width: 220px;
  height: 220px;
  animation: 6s ease-in-out infinite home-glow;
  position: absolute;
  bottom: -60px;
  left: -40px;
}

.home-hero-mark {
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0f172a99;
  font-size: 1.1rem;
  font-weight: 600;
  position: absolute;
  top: 28px;
  left: 28px;
}

.home-hero-caption {
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0f172a80;
  font-size: .7rem;
  position: absolute;
  bottom: 28px;
  left: 28px;
}

.home-section {
  margin-top: 4.5rem;
}

.home-section-head {
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 2rem;
  display: flex;
}

.home-section-eyebrow {
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #0f172a99;
  font-size: .7rem;
}

.home-section-title {
  letter-spacing: .08em;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
}

.home-section-subtitle {
  color: #0f172a99;
  max-width: 44rem;
  font-size: .95rem;
  line-height: 1.7;
}

.home-feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  display: grid;
}

.home-feature-card {
  background: #ffffffc2;
  border: 1px solid #0f172a1f;
  border-radius: 24px;
  padding: 1.6rem;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 24px 60px #0f172a1f;
}

.home-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px #0f172a29;
}

.home-feature-index {
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #0f172a8c;
  font-size: .65rem;
}

.home-feature-title {
  margin-top: .7rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.home-feature-body {
  color: #0f172a99;
  margin-top: .6rem;
  font-size: .92rem;
  line-height: 1.6;
}

.home-steps {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
  display: grid;
}

.home-step {
  background: #ffffffb8;
  border: 1px solid #0f172a1f;
  border-radius: 20px;
  padding: 1.4rem;
  box-shadow: 0 18px 40px #0f172a1a;
}

.home-step-index {
  letter-spacing: .3em;
  color: #0f172a80;
  font-size: .65rem;
}

.home-step-title {
  margin-top: .6rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.home-step-detail {
  color: #0f172a99;
  margin-top: .5rem;
  font-size: .9rem;
  line-height: 1.6;
}

.home-manifesto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
  gap: 1.6rem;
  display: grid;
}

.home-manifesto-card {
  background: #ffffffbf;
  border: 1px solid #0f172a1f;
  border-radius: 24px;
  padding: 1.8rem;
  box-shadow: 0 24px 60px #0f172a1f;
}

.home-manifesto-lines {
  gap: .8rem;
  display: grid;
}

.home-manifesto-line {
  color: #0f172aad;
  font-size: .95rem;
  line-height: 1.7;
}

.home-manifesto-tags {
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
  display: flex;
}

.home-gallery-head {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
}

.home-gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  display: grid;
}

.home-gallery-card {
  background: #ffffffbf;
  border: 1px solid #0f172a1f;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 40px #0f172a1f;
}

.home-gallery-image {
  object-fit: cover;
  width: 100%;
  height: 220px;
  display: block;
}

.home-gallery-caption {
  color: #0f172a99;
  padding: .75rem 1rem;
  font-size: .8rem;
}

.home-gallery-empty {
  text-align: center;
  color: #0f172a80;
  background: #ffffff8c;
  border: 1px dashed #0f172a33;
  border-radius: 20px;
  padding: 1.4rem;
  font-size: .85rem;
}

.home-cta {
  text-align: center;
  background: linear-gradient(135deg, #ffffffeb, #e6ebf2e6);
  border: 1px solid #0f172a24;
  border-radius: 32px;
  margin-top: 4.5rem;
  padding: 3rem 2.5rem;
  box-shadow: 0 30px 80px #0f172a2e;
}

.home-cta-eyebrow {
  letter-spacing: .36em;
  text-transform: uppercase;
  color: #0f172a99;
  font-size: .7rem;
}

.home-cta-title {
  letter-spacing: .08em;
  margin-top: 1rem;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
}

.home-cta-subtitle {
  color: #0f172a99;
  max-width: 44rem;
  margin: 1rem auto 0;
  font-size: .95rem;
  line-height: 1.7;
}

.home-cta-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2rem;
  display: flex;
}

@keyframes home-orbit {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes home-glow {
  0%, 100% {
    opacity: .65;
    transform: translateY(0);
  }

  50% {
    opacity: .9;
    transform: translateY(-6px);
  }
}

@keyframes home-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

body[data-theme="cyber"] .home-hero {
  background: linear-gradient(140deg, #080c16f2, #0c1424eb);
  border-color: #48f3ff59;
  box-shadow: 0 50px 120px #040810a6;
}

body[data-theme="cyber"] .home-hero:before {
  opacity: .8;
  background: radial-gradient(circle at 16% 20%, #48f3ff1f, #0000 55%), radial-gradient(circle at 86% 12%, #ff2aa129, #0000 55%), linear-gradient(90deg, #48f3ff14, #0000 40%, #ff2aa114);
}

body[data-theme="cyber"] .home-eyebrow, body[data-theme="cyber"] .home-section-eyebrow, body[data-theme="cyber"] .home-cta-eyebrow, body[data-theme="cyber"] .home-stat-label, body[data-theme="cyber"] .home-feature-index, body[data-theme="cyber"] .home-step-index, body[data-theme="cyber"] .home-hero-caption {
  color: #8fdff4;
}

body[data-theme="cyber"] .home-title, body[data-theme="cyber"] .home-section-title, body[data-theme="cyber"] .home-feature-title, body[data-theme="cyber"] .home-step-title, body[data-theme="cyber"] .home-stat-value, body[data-theme="cyber"] .home-cta-title {
  color: #e2f1ff;
}

body[data-theme="cyber"] .home-lead, body[data-theme="cyber"] .home-section-subtitle, body[data-theme="cyber"] .home-feature-body, body[data-theme="cyber"] .home-step-detail, body[data-theme="cyber"] .home-manifesto-line, body[data-theme="cyber"] .home-cta-subtitle, body[data-theme="cyber"] .home-gallery-caption {
  color: #9bb0c9;
}

body[data-theme="cyber"] .home-stat, body[data-theme="cyber"] .home-feature-card, body[data-theme="cyber"] .home-step, body[data-theme="cyber"] .home-manifesto-card, body[data-theme="cyber"] .home-gallery-card, body[data-theme="cyber"] .home-cta {
  background: #0a101cd9;
  border-color: #48f3ff47;
  box-shadow: 0 22px 60px #0408108c;
}

body[data-theme="cyber"] .home-gallery-empty {
  color: #8fdff4;
  background: #0a101c99;
  border-color: #48f3ff4d;
}

body[data-theme="cyber"] .home-hero-figure {
  background: radial-gradient(circle at 30% 30%, #48f3ff26, #0000 55%), linear-gradient(135deg, #080c16e6, #0c1424e6);
  border-color: #48f3ff66;
  box-shadow: inset 0 0 70px #48f3ff1f;
}

body[data-theme="cyber"] .home-hero-logo {
  filter: drop-shadow(0 0 26px #ff7c5459) drop-shadow(0 0 40px #48f3ff4d);
  opacity: .98;
}

body[data-theme="cyber"] .home-hero-ring {
  border-color: #48f3ff66;
  box-shadow: 0 0 40px #48f3ff33;
}

body[data-theme="cyber"] .home-hero-grid {
  opacity: .4;
}

body[data-theme="cyber"] .home-hero-glow {
  background: radial-gradient(circle, #ff2aa12e, #0000 65%);
}

body[data-theme="cyber"] .home-hero-mark {
  color: #e2f1ffb3;
}

@media (max-width: 980px) {
  .home-hero {
    padding: 3rem 2.4rem;
  }

  .home-hero-inner {
    grid-template-columns: 1fr;
  }

  .home-hero-figure {
    min-height: 240px;
  }

  .home-gallery-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .home-hero {
    padding: 2.4rem 1.6rem;
  }

  .home-hero-actions, .home-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero-stats {
    grid-template-columns: 1fr;
  }

  .home-gallery-image {
    height: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-figure, .home-hero-ring, .home-hero-glow {
    animation: none;
  }
}

body[data-theme="cyber"] {
  color: #d8f6ff;
  background-color: #06080f;
}

body[data-theme="cyber"] .text-slate-900 {
  color: #e2f1ff !important;
}

body[data-theme="cyber"] .text-slate-700 {
  color: #c4e5ff !important;
}

body[data-theme="cyber"] .text-slate-600, body[data-theme="cyber"] .text-slate-500 {
  color: #8fdff4 !important;
}

body[data-theme="cyber"] .text-slate-400 {
  color: #6cc9e2 !important;
}

body[data-theme="cyber"] .site-header {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body[data-theme="cyber"] .site-header-inner {
  background: #060c18d9;
  border: 1px solid #48f3ff66;
  box-shadow: 0 18px 50px #02060cb3, 0 0 24px #48f3ff33;
}

body[data-theme="cyber"] .site-logo {
  background: linear-gradient(135deg, #081020f2, #2dd4ff40), radial-gradient(circle at 30% 30%, #48f3ffcc, #0000 60%);
  border-color: #48f3ff8c;
  animation: 6s ease-in-out infinite cyber-logo;
  box-shadow: inset 0 0 18px #48f3ff59, 0 0 20px #48f3ff4d;
}

body[data-theme="cyber"] .site-title {
  color: #e2f1ff;
  text-shadow: 0 0 16px #48f3ff59;
}

body[data-theme="cyber"] .site-subtitle, body[data-theme="cyber"] .site-user {
  color: #8fdff4;
}

body[data-theme="cyber"] .site-link {
  color: #8fdff4;
  background: #08101cbf;
  border-color: #48f3ff59;
  box-shadow: inset 0 0 #0000;
}

body[data-theme="cyber"] .site-link:hover {
  color: #e2f1ff;
  border-color: #48f3ffbf;
  box-shadow: 0 10px 26px #02060c99, 0 0 18px #48f3ff40;
}

body[data-theme="cyber"] .site-link.is-active {
  color: #f7f7ff;
  background: linear-gradient(120deg, #48f3ff33, #ff2aa140);
  border-color: #ff2aa1b3;
  box-shadow: 0 16px 36px #02060ca6, 0 0 22px #ff2aa140;
}

body[data-theme="cyber"] .panel, body[data-theme="cyber"] .panel-soft, body[data-theme="cyber"] .panel-strong {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #080e1ae0;
  border-color: #48f3ff59;
  box-shadow: 0 24px 70px #02060ca6, inset 0 0 0 1px #48f3ff1a;
}

body[data-theme="cyber"] .panel-soft {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #060c18b3;
}

body[data-theme="cyber"] .panel-strong {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #08101eeb;
  box-shadow: 0 30px 90px #02060cb3, 0 0 26px #48f3ff33;
}

body[data-theme="cyber"] .panel:before, body[data-theme="cyber"] .panel-soft:before, body[data-theme="cyber"] .panel-strong:before {
  content: "";
  border-radius: inherit;
  -webkit-mask-composite: xor;
  opacity: .5;
  pointer-events: none;
  background: linear-gradient(120deg, #48f3ff40, #ff2aa140);
  padding: 1px;
  position: absolute;
  inset: -1px;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

body[data-theme="cyber"] .field {
  color: #e2f1ff;
  background: #080e18e6;
  border-color: #48f3ff73;
  box-shadow: inset 0 0 18px #48f3ff14;
}

body[data-theme="cyber"] .field::placeholder {
  color: #8fdff4a6;
}

body[data-theme="cyber"] .field:focus {
  border-color: #48f3ffe6;
  box-shadow: 0 0 0 4px #48f3ff2e;
}

body[data-theme="cyber"] .btn-primary {
  color: #05070c;
  background: linear-gradient(120deg, #48f3ffd9, #ff2aa1cc);
  box-shadow: 0 16px 36px #02060ca6, 0 0 18px #48f3ff59;
}

body[data-theme="cyber"] .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px #02060cb3, 0 0 26px #ff2aa159;
}

body[data-theme="cyber"] .btn-outline {
  color: #8fdff4;
  background: #080e18d9;
  border-color: #48f3ff66;
}

body[data-theme="cyber"] .btn-outline:hover {
  color: #e2f1ff;
  border-color: #48f3ffd9;
  box-shadow: 0 12px 28px #02060c99;
}

body[data-theme="cyber"] .btn-soft {
  color: #9bdff0;
  background: #080e18b3;
  border-color: #48f3ff4d;
}

body[data-theme="cyber"] .btn-soft:hover {
  color: #e2f1ff;
  border-color: #48f3ffb3;
  box-shadow: 0 12px 26px #02060c8c;
}

body[data-theme="cyber"] .btn-danger {
  color: #ffb1b1;
  background: #ff505026;
  border-color: #ff505080;
  box-shadow: 0 0 16px #ff505040;
}

body[data-theme="cyber"] .btn-danger:hover {
  border-color: #ff5050d9;
  box-shadow: 0 12px 28px #780a0a8c, 0 0 22px #ff505059;
}

body[data-theme="cyber"] .site-status .status-dot {
  background: radial-gradient(circle, #48f3fff2, #48f3ff33);
  box-shadow: 0 0 18px #48f3ffb3;
}

body[data-theme="cyber"] ::selection {
  color: #f8faff;
  background: #ff2aa166;
}

body[data-theme="cyber"] .pill {
  color: #8fdff4;
  background: #080e18b3;
  border-color: #48f3ff59;
}

body[data-theme="cyber"] .pill-warm {
  color: #ff8ad4;
  background: #ff2aa12e;
  border-color: #ff2aa180;
}

body[data-theme="cyber"] .pill-cool {
  color: #7be7ff;
  background: #48f3ff2e;
  border-color: #48f3ff80;
}

body[data-theme="cyber"] .pill-neutral {
  color: #9bb0c9;
  border-color: #94a3b859;
}

@keyframes cyber-logo {
  0%, 100% {
    transform: translateY(0);
    box-shadow: inset 0 0 18px #48f3ff59, 0 0 20px #48f3ff4d;
  }

  50% {
    transform: translateY(-2px);
    box-shadow: inset 0 0 22px #48f3ff80, 0 0 28px #48f3ff73;
  }
}

@media (max-width: 768px) {
  body[data-theme="cyber"] .site-header-inner {
    padding: .75rem;
  }

  body[data-theme="cyber"] .panel, body[data-theme="cyber"] .panel-soft, body[data-theme="cyber"] .panel-strong {
    box-shadow: 0 18px 50px #02060c99;
  }

  body[data-theme="cyber"] .panel, body[data-theme="cyber"] .panel-soft, body[data-theme="cyber"] .panel-strong, body[data-theme="cyber"] .field, body[data-theme="cyber"] .site-header-inner {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

body[data-theme="cyber"][data-stable="on"] *, body[data-theme="cyber"][data-stable="on"] :before, body[data-theme="cyber"][data-stable="on"] :after {
  transition: none !important;
  animation: none !important;
}

body[data-theme="cyber"][data-stable="on"] .cyber-fx {
  display: none !important;
}

body[data-theme="cyber"][data-stable="on"] .galaxy-grid, body[data-theme="cyber"][data-stable="on"] .galaxy-scan {
  opacity: .12;
  animation: none !important;
}

body[data-theme="cyber"][data-stable="on"] .galaxy-noise {
  opacity: .08;
}

body[data-theme="cyber"][data-stable="on"]:before, body[data-theme="cyber"][data-stable="on"]:after {
  opacity: .18;
  animation: none !important;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@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: 0;
}

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

/*# sourceMappingURL=app_globals_71f961d1.css.map*/