/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-emerald-950: oklch(26.2% 0.051 172.552);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-700: oklch(52% 0.105 223.128);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-600: oklch(58.8% 0.158 241.966);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-sky-900: oklch(39.1% 0.09 240.876);
    --color-sky-950: oklch(29.3% 0.066 243.157);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-violet-100: oklch(94.3% 0.029 294.588);
    --color-violet-800: oklch(43.2% 0.232 292.759);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.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-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --blur-sm: 8px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .contents {
    display: contents;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .grow {
    flex-grow: 1;
  }
  .resize {
    resize: both;
  }
}
@layer base {
  :root {
    --primary: #247ec1;
    --accent: #2e8b57;
    --ink: #172433;
    --paper: #ffffff;
    --canvas: #f7f9fc;
    --canvas-blue: #f0f7fc;
    --line: #dce6ee;
    --muted: #667887;
    --shadow-sm: 0 4px 16px rgb(22 39 54 / 0.06);
    --shadow-md: 0 16px 38px rgb(19 40 57 / 0.11);
    --shadow-lg: 0 28px 80px rgb(15 32 48 / 0.16);
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    min-height: 100vh;
    background-color: var(--color-slate-50);
    font-family: var(--font-sans);
    color: var(--color-slate-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
    background-image: radial-gradient(circle at 8% -8%, var(--primary), transparent 28rem), radial-gradient(circle at 94% 20%, var(--accent), transparent 24rem);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: radial-gradient(circle at 8% -8%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 28rem), radial-gradient(circle at 94% 20%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 24rem);
    }
  }
  body, button, input, textarea, select {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  a {
    color: var(--primary);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  a:hover {
    color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--primary) 80%, #000);
    }
  }
  button, a, input, select, textarea {
    --tw-outline-style: none;
    outline-style: none;
  }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    }
    outline-offset: 2px;
  }
  ::selection {
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 20%, white);
    }
    color: var(--ink);
  }
  code {
    border-radius: var(--radius-md);
    background-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: var(--color-slate-700);
  }
}
@layer components {
  .container {
    margin-inline: auto;
    width: 100%;
    max-width: 1200px;
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
  }
  .inline-icon {
    display: inline-block;
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    vertical-align: -2px;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: fixed;
    top: calc(var(--spacing) * 2);
    left: calc(9999px * -1);
    z-index: 1000;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-950);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .skip-link:focus {
    left: calc(var(--spacing) * 2);
  }
  .topline {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    font-size: 0.72rem;
    color: var(--color-slate-300);
    background: var(--ink);
  }
  .topline-inner {
    display: flex;
    min-height: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 5);
  }
  .topline-story {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .topline-story strong {
    color: var(--color-white);
  }
  .topline-story > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topline-dot {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
    }
  }
  .topline-links {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 5);
  }
  .topline a {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-200);
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .site-header {
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 100;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-slate-200) 90%, transparent);
    }
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    --tw-backdrop-blur: blur(var(--blur-xl));
    -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,);
    box-shadow: 0 1px 0 rgb(255 255 255 / .7);
  }
  .header-inner {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    color: var(--color-slate-900);
    text-decoration-line: none;
  }
  .brand:hover {
    text-decoration-line: none;
    color: var(--ink);
  }
  .brand-mark {
    position: relative;
    display: grid;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-950);
    padding: calc(var(--spacing) * 1);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .brand-mark::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    border-radius: var(--radius-xl);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    --tw-ring-inset: inset;
  }
  .brand-mark img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .brand-copy {
    display: flex;
    flex-direction: column;
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .brand-copy strong {
    font-size: 0.98rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .brand-copy small {
    margin-top: calc(var(--spacing) * 0.5);
    max-width: 190px;
    font-size: 0.64rem;
    --tw-leading: 1.25;
    line-height: 1.25;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-500);
  }
  .site-nav {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1);
  }
  .site-nav > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.79rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-600);
    text-decoration-line: none;
  }
  .site-nav > a .ui-icon {
    display: none;
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .site-nav > a:hover {
    background-color: var(--color-slate-100);
    color: var(--color-slate-950);
    text-decoration-line: none;
  }
  .site-nav > a.active {
    background-color: var(--color-sky-50);
    color: var(--color-sky-800);
    text-decoration-line: none;
    color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--primary) 82%, #102a43);
    }
  }
  .site-nav > a.active::after {
    content: "";
    position: absolute;
    inset-inline: calc(var(--spacing) * 3);
    bottom: calc(10px * -1);
    height: 3px;
    border-top-left-radius: calc(infinity * 1px);
    border-top-right-radius: calc(infinity * 1px);
    background: var(--primary);
  }
  .header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .header-icon-button {
    position: relative;
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    place-items: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    color: var(--color-slate-600);
    text-decoration-line: none;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-950);
      }
    }
  }
  .header-icon-button .ui-icon {
    height: 18px;
    width: 18px;
  }
  .notification-link {
    position: relative;
  }
  .count-badge {
    position: absolute;
    top: calc(var(--spacing) * -1.5);
    right: calc(var(--spacing) * -1.5);
    display: grid;
    min-height: calc(var(--spacing) * 5);
    min-width: calc(var(--spacing) * 5);
    place-items: center;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-white);
    background-color: var(--color-red-500);
    padding-inline: calc(var(--spacing) * 1);
    font-size: 0.62rem;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
  }
  .nav-toggle {
    margin-left: auto;
    display: none;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .nav-toggle .ui-icon {
    height: 18px;
    width: 18px;
  }
  .nav-close-icon {
    display: none;
  }
  .nav-toggle[aria-expanded="true"] .nav-open-icon {
    display: none;
  }
  .nav-toggle[aria-expanded="true"] .nav-close-icon {
    display: block;
  }
  .user-menu {
    position: relative;
  }
  .user-menu-button {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-block: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 2.5);
    padding-left: calc(var(--spacing) * 1.5);
    text-align: left;
    color: var(--color-slate-800);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .user-menu-label {
    display: flex;
    max-width: 132px;
    flex-direction: column;
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .user-menu-label strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .user-menu-label small {
    margin-top: calc(var(--spacing) * 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-500);
  }
  .user-menu-button .chevron {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    color: var(--color-slate-400);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .user-menu.open .user-menu-button .chevron {
    rotate: 180deg;
  }
  .user-menu-panel {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: calc(var(--spacing) * 0);
    z-index: 120;
    display: none;
    width: calc(var(--spacing) * 64);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 2);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .user-menu.open .user-menu-panel {
    display: block;
    animation: menu-in .14s ease-out;
  }
  .user-menu-heading {
    margin-bottom: calc(var(--spacing) * 1);
    border-radius: var(--radius-xl);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
  }
  .user-menu-heading strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .user-menu-heading span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .user-menu-panel a, .user-menu-panel button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-600);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-950);
      }
    }
  }
  .user-menu-panel a .ui-icon, .user-menu-panel button .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    color: var(--color-slate-400);
  }
  .user-menu-panel .admin-entry {
    background-color: var(--color-sky-50);
    color: var(--color-sky-800);
  }
  .user-menu-divider {
    margin-block: calc(var(--spacing) * 1);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
  }
  .site-main {
    min-height: 62vh;
  }
  .button {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.82rem;
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    text-decoration-line: none;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .button .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .button:hover {
    --tw-translate-y: -1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    text-decoration-line: none;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .button:disabled, .button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 50%;
    transform: none;
    box-shadow: none;
  }
  .button-primary {
    border-color: transparent;
    color: var(--color-white);
    background: var(--primary);
  }
  .button-primary:hover {
    color: #fff;
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 88%, #000);
    }
  }
  .button-accent {
    border-color: transparent;
    color: var(--color-white);
    background: var(--accent);
  }
  .button-accent:hover {
    color: #fff;
    background: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--accent) 88%, #000);
    }
  }
  .button-dark {
    border-color: transparent;
    color: var(--color-white);
    background: var(--ink);
  }
  .button-dark:hover {
    color: var(--color-white);
    background: var(--ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--ink) 90%, #000);
    }
  }
  .button-light {
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    background-color: var(--color-white);
    color: var(--color-slate-900);
  }
  .button-light:hover {
    background-color: var(--color-slate-100);
    color: var(--color-slate-950);
  }
  .button-ghost {
    border-color: var(--color-slate-300);
    background-color: var(--color-white);
    color: var(--color-slate-700);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-400);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-950);
      }
    }
  }
  .button-danger {
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    color: var(--color-red-700);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-100);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-800);
      }
    }
  }
  .button-small {
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .button-large {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: 0.86rem;
  }
  .button-wide {
    width: 100%;
  }
  .hero {
    position: relative;
    overflow: hidden;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 11);
    }
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 9);
    }
  }
  .hero::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * 10);
    left: calc(var(--spacing) * -32);
    height: calc(var(--spacing) * 96);
    width: calc(var(--spacing) * 96);
    border-radius: calc(infinity * 1px);
    --tw-blur: blur(var(--blur-3xl));
    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,);
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 10%, transparent);
    }
  }
  .hero::after {
    content: "";
    pointer-events: none;
    position: absolute;
    right: calc(var(--spacing) * -24);
    bottom: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 80);
    width: calc(var(--spacing) * 80);
    border-radius: calc(infinity * 1px);
    --tw-blur: blur(var(--blur-3xl));
    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,);
    background: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--accent) 8%, transparent);
    }
  }
  .hero-pattern {
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    opacity: 30%;
    background-image: linear-gradient(to right, rgb(148 163 184 / .12) 1px, transparent 1px), linear-gradient(to bottom, rgb(148 163 184 / .12) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
  }
  .hero-grid {
    position: relative;
    z-index: 10;
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 10);
    @media (width >= 64rem) {
      grid-template-columns: 1.08fr .92fr;
    }
  }
  .hero-content {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .hero-kicker {
    margin-bottom: calc(var(--spacing) * 4);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-sky-200);
    background-color: var(--color-sky-50);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-sky-800);
  }
  .hero-kicker-mark {
    display: grid;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    place-items: center;
    border-radius: calc(infinity * 1px);
    color: var(--color-white);
    background: var(--primary);
  }
  .hero-kicker-mark .ui-icon {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
  }
  .hero h1 {
    margin: calc(var(--spacing) * 0);
    max-width: 760px;
    font-size: clamp(2.45rem, 4.3vw, 4rem);
    --tw-leading: 1.01;
    line-height: 1.01;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.045em;
    letter-spacing: -0.045em;
    color: var(--ink);
  }
  .hero h1 span {
    color: var(--primary);
  }
  .hero-copy {
    margin-top: calc(var(--spacing) * 5);
    max-width: 690px;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-600);
  }
  .hero-actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2.5);
  }
  .hero-proof {
    margin-top: calc(var(--spacing) * 6);
    display: grid;
    gap: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .hero-proof span {
    position: relative;
    min-width: calc(var(--spacing) * 0);
    padding-left: calc(var(--spacing) * 4);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .hero-proof span::before {
    content: "";
    position: absolute;
    top: 0.48rem;
    left: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    background: var(--accent);
  }
  .hero-proof strong {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-700);
  }
  .hero-visual {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 440px;
    padding-bottom: calc(var(--spacing) * 12);
  }
  .hero-logo-card {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-800);
    background-color: var(--color-slate-950);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transform: rotate(1deg);
  }
  .hero-logo-card::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    border-radius: 2rem;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    --tw-ring-inset: inset;
  }
  .hero-logo-card img {
    position: relative;
    z-index: 10;
    width: 100%;
    border-radius: var(--radius-3xl);
  }
  .hero-logo-glow {
    position: absolute;
    top: calc(var(--spacing) * -20);
    left: calc(var(--spacing) * -16);
    height: calc(var(--spacing) * 64);
    width: calc(var(--spacing) * 64);
    border-radius: calc(infinity * 1px);
    --tw-blur: blur(var(--blur-3xl));
    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,);
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 38%, transparent);
    }
  }
  .hero-floating-card {
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
  }
  .hero-floating-card > span {
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    place-items: center;
    border-radius: var(--radius-lg);
    color: var(--color-white);
    background: var(--primary);
  }
  .hero-floating-card > span .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .hero-floating-card strong {
    display: block;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-900);
  }
  .hero-floating-card small {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .hero-floating-card-a {
    top: 18%;
    left: calc(var(--spacing) * -8);
  }
  .hero-floating-card-b {
    right: calc(var(--spacing) * -8);
    bottom: 18%;
  }
  .hero-floating-card-b > span {
    background: var(--accent);
  }
  .hero-stats {
    position: relative;
    z-index: 20;
    margin-top: calc(var(--spacing) * 1);
  }
  .stats-row {
    display: grid;
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .stat {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3.5);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .stat-icon {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    place-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-100);
    color: var(--color-slate-600);
  }
  .stat-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .stat strong {
    display: block;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-900);
  }
  .stat span span {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .section {
    padding-block: calc(var(--spacing) * 12);
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .section-sm {
    padding-block: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 9);
    }
  }
  .section-alt {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
    border-color: var(--color-slate-200);
    background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-100) 70%, transparent);
    }
  }
  .section-soft-blue {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
    border-color: var(--color-sky-100);
    background-color: color-mix(in srgb, oklch(97.7% 0.013 236.62) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-50) 60%, transparent);
    }
  }
  .section-dark {
    position: relative;
    overflow: hidden;
    color: var(--color-slate-200);
    background: var(--ink);
  }
  .section-header {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 6);
  }
  .section-header.compact {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .section-header h2, .page-header h1 {
    margin: calc(var(--spacing) * 0);
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.03em;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .section-header h3 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.025em;
    letter-spacing: -0.025em;
    color: var(--ink);
  }
  .section-header p {
    margin-top: calc(var(--spacing) * 1.5);
    max-width: var(--container-3xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-500);
  }
  .section-dark .section-header h2, .section-dark .section-header h3 {
    color: var(--color-white);
  }
  .section-dark .section-header p {
    color: var(--color-slate-300);
  }
  .section-link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    text-decoration-line: none;
    color: var(--primary);
  }
  .section-link .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .eyebrow {
    margin-bottom: calc(var(--spacing) * 1.5);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: 0.64rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.13em;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--primary);
  }
  .page-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-block: calc(var(--spacing) * 7);
  }
  .page-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 6);
  }
  .page-header p {
    margin-top: calc(var(--spacing) * 1.5);
    max-width: var(--container-3xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-500);
  }
  .breadcrumbs {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-400);
  }
  .breadcrumbs a {
    color: var(--color-slate-500);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-900);
      }
    }
  }
  .grid-2 {
    display: grid;
    gap: calc(var(--spacing) * 5);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .grid-3 {
    display: grid;
    gap: calc(var(--spacing) * 5);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .grid-4 {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .split {
    display: grid;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 340px;
    }
  }
  .card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4.5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .card-tight {
    padding: calc(var(--spacing) * 4);
  }
  .card h2, .card h3 {
    margin-top: calc(var(--spacing) * 0);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .card h2 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .card h3 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .card p {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-600);
  }
  .card p:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .card > h2 + p, .card > h3 + p {
    margin-top: calc(var(--spacing) * 2);
  }
  .card > h2 + ul, .card > h3 + ul, .card > h2 + ol, .card > h3 + ol {
    margin-top: calc(var(--spacing) * 3);
  }
  .card > p + p, .card > p + .inline-actions, .card > p + .game-card-links {
    margin-top: calc(var(--spacing) * 3);
  }
  .card > .tag + h2, .card > .tag + h3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .card-hover {
    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, visibility, 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));
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .card-hover:hover {
    --tw-translate-y: calc(var(--spacing) * -0.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-color: var(--color-slate-300);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .page-reading-width {
    max-width: var(--container-5xl);
  }
  .structured-page {
    padding: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .structured-page > *:first-child {
    margin-top: calc(var(--spacing) * 0);
  }
  .structured-page h2 {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 6);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
    color: var(--color-slate-900);
  }
  .structured-page h2:first-child {
    margin-top: calc(var(--spacing) * 0);
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
    padding-top: calc(var(--spacing) * 0);
  }
  .structured-page .structured-number {
    display: grid;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-sky-100);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-sky-800);
  }
  .structured-page p {
    margin-top: calc(var(--spacing) * 3);
    font-size: 0.9rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-600);
  }
  .structured-page ul {
    margin-top: calc(var(--spacing) * 3);
    display: grid;
    gap: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 5);
    font-size: 0.9rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-600);
    list-style: disc;
  }
  .announcement-strip {
    padding-top: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 9);
    }
  }
  .announcement {
    position: relative;
    overflow: hidden;
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-left-color: var(--primary);
  }
  .announcement::before {
    content: "";
    position: absolute;
    top: calc(var(--spacing) * -8);
    right: calc(var(--spacing) * -8);
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 24);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-sky-50);
  }
  .announcement-success {
    border-left-color: var(--color-emerald-500);
  }
  .announcement-warning {
    border-left-color: var(--color-amber-500);
  }
  .announcement-urgent {
    border-left-color: var(--color-red-500);
    background-color: color-mix(in srgb, oklch(97.1% 0.013 17.38) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-50) 30%, transparent);
    }
  }
  .announcement-top {
    position: relative;
    z-index: 10;
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .announcement-date {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-400);
  }
  .announcement-meta, .meta {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .tag {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.64rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-600);
    text-transform: uppercase;
  }
  .tag-primary {
    background-color: var(--color-sky-100);
    color: var(--color-sky-800);
  }
  .tag-green {
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-800);
  }
  .tag-red {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .tag-gold {
    background-color: var(--color-amber-100);
    color: var(--color-amber-800);
  }
  .tag-purple {
    background-color: var(--color-violet-100);
    color: var(--color-violet-800);
  }
  .community-origin-section {
    padding-top: calc(var(--spacing) * 14);
  }
  .origin-grid {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 8);
    @media (width >= 64rem) {
      grid-template-columns: 1.03fr .97fr;
    }
  }
  .origin-copy > h2 {
    max-width: var(--container-2xl);
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    --tw-leading: 1.08;
    line-height: 1.08;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.04em;
    letter-spacing: -0.04em;
    color: var(--ink);
  }
  .origin-copy > p {
    margin-top: calc(var(--spacing) * 4);
    max-width: var(--container-2xl);
    font-size: 0.94rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-600);
  }
  .origin-points {
    margin-block: calc(var(--spacing) * 7);
    display: grid;
    gap: calc(var(--spacing) * 4);
  }
  .origin-points > div {
    display: flex;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
  }
  .origin-points > div > span {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-sky-50);
    color: var(--color-sky-700);
  }
  .origin-points > div > span .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .origin-points strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .origin-points p {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .origin-game-stack {
    border-radius: 1.75rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .game-row {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-block: calc(var(--spacing) * 5);
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
    &:first-child {
      padding-top: calc(var(--spacing) * 1);
    }
  }
  .game-row > div:last-child {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .game-row-icon {
    display: grid;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-2xl);
    background-color: var(--color-slate-900);
    color: var(--color-white);
  }
  .game-row-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .game-row h3 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .game-row p {
    margin-top: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-500);
  }
  .game-row a {
    margin-top: calc(var(--spacing) * 2);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .game-row a .ui-icon {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
  }
  .game-row-future .game-row-icon {
    background: var(--accent);
  }
  .game-card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    padding-left: calc(var(--spacing) * 5);
  }
  .game-card::before {
    content: "";
    position: absolute;
    inset-block: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    width: calc(var(--spacing) * 1);
    background: var(--primary);
  }
  .game-card h3 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-900);
  }
  .game-card h3 + p {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .game-card p {
    margin-bottom: calc(var(--spacing) * 0);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-600);
  }
  .game-card .game-card-links {
    margin-top: auto;
    padding-top: calc(var(--spacing) * 4);
  }
  .community-path-grid {
    display: grid;
    gap: calc(var(--spacing) * 5);
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .community-path {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .community-path::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * -14);
    right: calc(var(--spacing) * -14);
    height: calc(var(--spacing) * 40);
    width: calc(var(--spacing) * 40);
    border-radius: calc(infinity * 1px);
    opacity: 60%;
    --tw-blur: blur(var(--blur-2xl));
    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,);
  }
  .community-path-forums {
    border-color: var(--color-slate-800);
    background-color: var(--color-slate-950);
    color: var(--color-slate-300);
  }
  .community-path-forums::after {
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 42%, transparent);
    }
  }
  .community-path-boards {
    border-color: var(--color-sky-100);
    background-color: var(--color-sky-50);
  }
  .community-path-boards::after {
    background: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--accent) 20%, transparent);
    }
  }
  .community-path-icon {
    position: relative;
    z-index: 10;
    margin-bottom: calc(var(--spacing) * 5);
    display: grid;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    place-items: center;
    border-radius: var(--radius-2xl);
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    color: var(--color-white);
  }
  .community-path-boards .community-path-icon {
    background-color: var(--color-white);
    color: var(--color-sky-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .community-path-icon .ui-icon {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
  }
  .community-path .eyebrow {
    position: relative;
    z-index: 10;
  }
  .community-path-forums .eyebrow {
    color: var(--color-sky-300);
  }
  .community-path h3 {
    position: relative;
    z-index: 10;
    margin: calc(var(--spacing) * 0);
    max-width: var(--container-xl);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.025em;
    letter-spacing: -0.025em;
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .community-path-boards h3 {
    color: var(--color-slate-900);
  }
  .community-path p {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 3);
    max-width: var(--container-2xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-300);
  }
  .community-path-boards p {
    color: var(--color-slate-600);
  }
  .community-path .button {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 6);
  }
  .home-discussion-grid {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 360px;
    }
  }
  .home-side-stack {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .callout {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-sky-200);
    background-color: var(--color-sky-50);
    padding: calc(var(--spacing) * 5);
  }
  .callout h2, .callout h3 {
    margin-top: calc(var(--spacing) * 0);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .callout h2 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .callout h3 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .callout p {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-600);
  }
  .callout-dark {
    border-color: var(--color-slate-800);
    color: var(--color-slate-300);
    background: var(--ink);
  }
  .callout-dark h2, .callout-dark h3 {
    color: var(--color-white);
  }
  .callout-dark p {
    color: var(--color-slate-300);
  }
  .callout-dark .eyebrow {
    color: var(--color-sky-300);
  }
  .callout-accent {
    border-color: var(--color-emerald-200);
    background-color: var(--color-emerald-50);
  }
  .callout-feature {
    position: relative;
    overflow: hidden;
    padding: calc(var(--spacing) * 6);
  }
  .callout-feature::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * -12);
    right: calc(var(--spacing) * -16);
    height: calc(var(--spacing) * 40);
    width: calc(var(--spacing) * 40);
    border-radius: calc(infinity * 1px);
    --tw-blur: blur(var(--blur-2xl));
    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,);
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 24%, transparent);
    }
  }
  .callout-icon {
    position: relative;
    z-index: 10;
    margin-bottom: calc(var(--spacing) * 5);
    display: grid;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    place-items: center;
    border-radius: var(--radius-2xl);
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    color: var(--color-white);
  }
  .callout-icon .ui-icon {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
  }
  .forum-index-shell {
    position: relative;
  }
  .forum-category {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .category-head {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-800);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3.5);
    color: var(--color-white);
    background: var(--ink);
  }
  .category-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 5);
  }
  .category-head h2 {
    margin: calc(var(--spacing) * 0);
    font-size: 1.05rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .category-head p {
    margin-top: calc(var(--spacing) * 1);
    max-width: var(--container-3xl);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-300);
  }
  .category-kicker {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.58rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
    color: var(--color-sky-300);
    text-transform: uppercase;
  }
  .category-count {
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.62rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate-300);
    text-transform: uppercase;
  }
  .forum-list {
    overflow: hidden;
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .forum-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 124px 210px;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3.5);
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  .forum-row:hover {
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 80%, transparent);
    }
  }
  .forum-main {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .forum-icon {
    display: grid;
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-sky-50);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-sky-700);
  }
  .forum-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .forum-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .forum-title {
    font-size: 0.98rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-900);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .forum-desc {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .forum-counts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .forum-counts span {
    min-width: calc(var(--spacing) * 10);
  }
  .forum-counts strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-800);
  }
  .forum-latest {
    display: flex;
    flex-direction: column;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .forum-latest a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-700);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .forum-latest-label {
    font-size: 0.58rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-400);
    text-transform: uppercase;
  }
  .topic-list {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .topic-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 90px 150px;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3.5);
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  .topic-row:hover {
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 80%, transparent);
    }
  }
  .topic-row.pinned {
    background-color: color-mix(in srgb, oklch(97.7% 0.013 236.62) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-50) 70%, transparent);
    }
  }
  .topic-main {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .topic-symbol {
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-slate-100);
    color: var(--color-slate-500);
  }
  .topic-row.pinned .topic-symbol {
    background-color: var(--color-sky-100);
    color: var(--color-sky-700);
  }
  .topic-symbol .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .topic-title {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .topic-meta {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .topic-meta strong {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-700);
  }
  .home-topic-list .topic-row {
    min-height: 76px;
  }
  .post-thread {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .forum-post {
    display: grid;
    grid-template-columns: 164px minmax(0,1fr);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .post-user {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 5);
    text-align: center;
  }
  .post-user .avatar {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
  }
  .post-user strong {
    display: block;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .post-user small {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .post-content {
    min-width: calc(var(--spacing) * 0);
    padding: calc(var(--spacing) * 5);
  }
  .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    padding-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
  }
  .post-body {
    padding-top: calc(var(--spacing) * 4);
    font-size: 0.93rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    overflow-wrap: break-word;
    color: var(--color-slate-700);
  }
  .board-card {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
    border-top-color: var(--board-accent, var(--primary));
  }
  .feed {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .feed-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .feed-head {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spacing) * 5);
  }
  .feed-card h3 {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 1.5);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .feed-body {
    font-size: 0.93rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-700);
  }
  .feed-image {
    margin-top: calc(var(--spacing) * 4);
    max-height: 560px;
    width: 100%;
    border-radius: var(--radius-2xl);
    background-color: var(--color-slate-100);
    object-fit: cover;
  }
  .feed-actions {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 3);
  }
  .reaction-button {
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-600);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-sky-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-sky-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .reaction-button.active {
    border-color: var(--color-sky-200);
    background-color: var(--color-sky-100);
    color: var(--color-sky-800);
  }
  .community-preview-card {
    display: flex;
    min-height: 220px;
    flex-direction: column;
  }
  .community-preview-top {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .community-preview-card h3 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .community-preview-card h3 a {
    color: var(--color-slate-900);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .community-preview-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .author-line {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .avatar {
    display: inline-grid;
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    flex-shrink: 0;
    place-items: center;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-white);
    object-fit: cover;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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);
    --tw-ring-color: var(--color-slate-200);
  }
  .avatar-sm {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    font-size: 0.6rem;
  }
  .avatar-lg {
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 24);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .avatar-xl {
    height: calc(var(--spacing) * 32);
    width: calc(var(--spacing) * 32);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .avatar-fallback {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--primary), var(--primary));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 62%, #fff));
    }
  }
  .form-stack {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .form-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .field label, .field > span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-600);
  }
  .field input, .field textarea, .field select, .search-box input {
    width: 100%;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-800);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    &::placeholder {
      color: var(--color-slate-400);
    }
  }
  .field input:hover, .field textarea:hover, .field select:hover, .search-box input:hover {
    border-color: var(--color-slate-400);
  }
  .field input:focus, .field textarea:focus, .field select:focus, .search-box input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
    }
  }
  .field textarea {
    min-height: calc(var(--spacing) * 32);
    resize: vertical;
  }
  .field small {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-400);
  }
  .checkbox {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-600);
  }
  .checkbox input {
    margin-top: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    border-radius: 0.25rem;
    border-color: var(--color-slate-300);
    accent-color: var(--primary);
  }
  .checkbox strong {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-800);
  }
  .error-text {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-red-700);
  }
  .errors {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-200);
    background-color: var(--color-red-50);
    padding: calc(var(--spacing) * 3.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-800);
  }
  .errors ul {
    list-style-type: disc;
    padding-left: calc(var(--spacing) * 5);
  }
  .inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .composer {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .composer h2 {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .composer textarea {
    min-height: calc(var(--spacing) * 40);
  }
  .captcha-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-slate-300);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3.5);
  }
  .captcha-box img {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
  }
  .captcha-box label {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-600);
  }
  .captcha-box input {
    width: calc(var(--spacing) * 44);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .captcha-refresh {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-600);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-100);
      }
    }
  }
  .auth-shell {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 14);
  }
  .auth-card {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-xl);
  }
  .auth-card .card {
    border-radius: 1.75rem;
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .auth-card .logo-panel {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    justify-content: center;
  }
  .auth-card .logo-panel img {
    width: calc(var(--spacing) * 28);
    border-radius: var(--radius-3xl);
    background-color: var(--color-slate-950);
    padding: calc(var(--spacing) * 1);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .auth-card h1 {
    margin-bottom: calc(var(--spacing) * 1);
    text-align: center;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.03em;
    letter-spacing: -0.03em;
    color: var(--color-slate-900);
  }
  .auth-card > .card > p {
    margin-bottom: calc(var(--spacing) * 6);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-500);
  }
  .profile-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-block: calc(var(--spacing) * 10);
  }
  .profile-head-inner {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
  }
  .profile-title {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .profile-title h1 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.035em;
    letter-spacing: -0.035em;
    color: var(--color-slate-900);
  }
  .profile-handle {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
  }
  .profile-badges {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .badge-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-600);
  }
  .profile-stats {
    margin-top: calc(var(--spacing) * 5);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
  }
  .profile-stat {
    border-radius: var(--radius-xl);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3);
  }
  .profile-stat strong {
    display: block;
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-900);
  }
  .profile-stat span {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .profile-columns {
    display: grid;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: 320px minmax(0,1fr);
    }
  }
  .praise-card {
    position: relative;
    overflow: hidden;
  }
  .praise-quote {
    font-size: 0.96rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-700);
  }
  .praise-arrow {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--accent);
  }
  .praise-home-section {
    padding-block: calc(var(--spacing) * 16);
  }
  .section-dark-pattern {
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    opacity: 10%;
    background-image: radial-gradient(circle at 20% 30%, #fff 1px, transparent 1px);
    background-size: 22px 22px;
  }
  .praise-home-content {
    position: relative;
    z-index: 10;
  }
  .praise-card-dark {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
  }
  .praise-card-dark .praise-quote {
    color: var(--color-slate-100);
  }
  .praise-card-dark .meta {
    color: var(--color-slate-400);
  }
  .praise-card-dark .meta a {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-sky-300);
  }
  .praise-mark {
    position: absolute;
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
    color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .praise-mark .ui-icon {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
  }
  .table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
  }
  .table-wrap-plain {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .ticket-table, .data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-white);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .ticket-table th, .ticket-table td, .data-table th, .data-table td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: left;
    vertical-align: top;
  }
  .ticket-table tbody tr:last-child td, .data-table tbody tr:last-child td {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  .ticket-table tbody tr:hover td, .data-table tbody tr:hover td {
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 70%, transparent);
    }
  }
  .ticket-table th, .data-table th {
    background-color: var(--color-slate-50);
    font-size: 0.66rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .table-primary {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .status {
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.64rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.06em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .status-open, .status-user_reply {
    background-color: var(--color-sky-100);
    color: var(--color-sky-800);
  }
  .status-staff_reply {
    background-color: var(--color-violet-100);
    color: var(--color-violet-800);
  }
  .status-resolved {
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-800);
  }
  .status-closed {
    background-color: var(--color-slate-100);
    color: var(--color-slate-600);
  }
  .status-banned, .status-urgent {
    background-color: var(--color-red-100);
    color: var(--color-red-800);
  }
  .support-message {
    display: grid;
    grid-template-columns: 180px minmax(0,1fr);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .support-message.staff {
    border-color: var(--color-sky-200);
  }
  .support-message .who {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 4);
  }
  .support-message.staff .who {
    background-color: var(--color-sky-50);
  }
  .support-message .message {
    padding: calc(var(--spacing) * 5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-700);
  }
  .empty-state {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-slate-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
  }
  .empty-state.compact {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--color-slate-50);
    padding-block: calc(var(--spacing) * 5);
  }
  .empty-state-dark {
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    color: var(--color-slate-300);
  }
  .pagination {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
  }
  .pagination a, .pagination span {
    display: grid;
    height: calc(var(--spacing) * 9);
    min-width: calc(var(--spacing) * 9);
    place-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-600);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .pagination .current {
    border-color: transparent;
    color: var(--color-white);
    background: var(--primary);
  }
  .flash-stack {
    pointer-events: none;
    position: fixed;
    top: 104px;
    right: calc(var(--spacing) * 4);
    z-index: 300;
    display: flex;
    width: calc(100% - 2rem);
    max-width: var(--container-md);
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }
  .flash {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-700);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    animation: flash-in .22s ease-out;
  }
  .flash-icon {
    display: grid;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-slate-100);
    color: var(--color-slate-600);
  }
  .flash-icon .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .flash-message {
    flex: 1;
    padding-top: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .flash button {
    display: grid;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-lg);
    background-color: transparent;
    color: var(--color-slate-400);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-100);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-700);
      }
    }
  }
  .flash button .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .flash-success {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-left-color: var(--color-emerald-500);
  }
  .flash-danger {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-left-color: var(--color-red-500);
  }
  .flash-warning {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-left-color: var(--color-amber-500);
  }
  body.admin-app {
    background-color: var(--color-slate-50);
    background-image: none;
  }
  .admin-topbar {
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 220;
    display: grid;
    min-height: calc(var(--spacing) * 16);
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-800);
    padding-inline: calc(var(--spacing) * 4);
    color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background: linear-gradient(90deg,#0c1721,var(--ink));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg,#0c1721,color-mix(in srgb,var(--ink) 96%,#000));
    }
  }
  .admin-topbar-left {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .admin-sidebar-toggle {
    display: none;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    color: var(--color-slate-200);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .admin-sidebar-toggle .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .admin-topbar-brand {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    color: var(--color-white);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .admin-topbar-mark {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: var(--color-black);
    padding: calc(var(--spacing) * 1);
  }
  .admin-topbar-mark img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .admin-topbar-brand > span:last-child {
    min-width: calc(var(--spacing) * 0);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .admin-topbar-brand strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
    color: var(--color-white);
  }
  .admin-topbar-brand small {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: 0.62rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-400);
    text-transform: uppercase;
  }
  .admin-topbar-context {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .admin-topbar-status {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-300);
    text-transform: uppercase;
  }
  .admin-topbar-status > span {
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-emerald-400);
    box-shadow: 0 0 0 4px rgb(52 211 153 / .1);
  }
  .admin-topbar-actions {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 1.5);
  }
  .admin-topbar-actions > a:not(.admin-user-chip) {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.72rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-300);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 8%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .admin-topbar-actions > a .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .admin-user-chip {
    margin-left: calc(var(--spacing) * 1);
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding-block: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 2.5);
    padding-left: calc(var(--spacing) * 1);
    color: var(--color-white);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .admin-user-chip > span:last-child {
    min-width: calc(var(--spacing) * 0);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .admin-user-chip strong {
    display: block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
  }
  .admin-user-chip small {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.61rem;
    color: var(--color-slate-400);
  }
  .admin-nav-backdrop {
    pointer-events: none;
    position: fixed;
    inset: calc(var(--spacing) * 0);
    top: calc(var(--spacing) * 16);
    z-index: 190;
    display: none;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 55%, transparent);
    }
    opacity: 0%;
    --tw-backdrop-blur: blur(1px);
    -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-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, visibility, 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));
  }
  .admin-main {
    min-height: calc(100dvh - 4rem);
  }
  .admin-app .flash-stack {
    top: 4.75rem;
  }
  .admin-shell {
    display: grid;
    min-height: calc(100dvh - 4rem);
    grid-template-columns: 264px minmax(0,1fr);
  }
  .admin-nav {
    position: sticky;
    top: calc(var(--spacing) * 16);
    height: calc(100dvh - 4rem);
    align-self: flex-start;
    overflow-y: auto;
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
    border-color: var(--color-slate-800);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    color: var(--color-white);
    background: linear-gradient(180deg, var(--ink), #0c1721);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 94%, #000), #0c1721);
    }
    scrollbar-width: thin;
    scrollbar-color: rgb(100 116 139 / .45) transparent;
  }
  .admin-nav-mobile-head {
    display: none;
  }
  .admin-nav-brand {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding: calc(var(--spacing) * 3);
  }
  .admin-nav-mark {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    color: var(--color-sky-300);
  }
  .admin-nav-mark .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .admin-nav-brand strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
  }
  .admin-nav-brand small {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-400);
  }
  .admin-nav-group {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .admin-nav h2 {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 2);
    font-size: 0.62rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .admin-nav a {
    margin-bottom: calc(var(--spacing) * 0.5);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.78rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-300);
    text-decoration-line: none;
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 8%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .admin-nav a .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-slate-500);
  }
  .admin-nav a.active {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
    box-shadow: inset 3px 0 0 var(--primary);
  }
  .admin-nav a.active .ui-icon {
    color: var(--color-sky-300);
  }
  .admin-nav-footer {
    margin-top: calc(var(--spacing) * 5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    padding-top: calc(var(--spacing) * 3);
  }
  .admin-content {
    min-width: calc(var(--spacing) * 0);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 5);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
    @media (width >= 80rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .admin-content > * {
    margin-inline: auto;
    width: 100%;
    max-width: 1480px;
  }
  .admin-content > .grid-2, .admin-content > .grid-3, .admin-content > .grid-4 {
    align-items: stretch;
  }
  .admin-content .grid-2, .admin-content .grid-3, .admin-content .grid-4 {
    align-items: stretch;
  }
  .admin-content .admin-form-card {
    min-width: calc(var(--spacing) * 0);
  }
  .admin-content .table-wrap {
    max-width: 100%;
  }
  .admin-content .form-grid > .field {
    min-width: calc(var(--spacing) * 0);
  }
  .admin-titlebar {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    min-height: calc(var(--spacing) * 12);
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 5);
  }
  .admin-titlebar > :last-child {
    flex-shrink: 0;
  }
  .admin-titlebar h1 {
    margin: calc(var(--spacing) * 0);
    font-size: 1.65rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.03em;
    letter-spacing: -0.03em;
    color: var(--color-slate-900);
  }
  .admin-titlebar p {
    margin-top: calc(var(--spacing) * 1.5);
    max-width: var(--container-3xl);
    font-size: 0.82rem;
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-500);
  }
  .admin-titlebar .search-box {
    width: 100%;
    max-width: var(--container-md);
  }
  .metric-grid {
    display: grid;
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .metric {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    color: var(--color-slate-900);
    text-decoration-line: none;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .metric::after {
    content: "";
    position: absolute;
    top: calc(var(--spacing) * -5);
    right: calc(var(--spacing) * -5);
    height: calc(var(--spacing) * 20);
    width: calc(var(--spacing) * 20);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-slate-100);
  }
  .metric-icon {
    position: relative;
    z-index: 10;
    margin-bottom: calc(var(--spacing) * 4);
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-slate-100);
    color: var(--color-slate-600);
  }
  .metric-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .metric strong {
    position: relative;
    z-index: 10;
    display: block;
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-900);
  }
  .metric > span:not(.metric-icon) {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .metric small {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 2);
    display: block;
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-400);
  }
  .metric-blue .metric-icon {
    background-color: var(--color-sky-100);
    color: var(--color-sky-700);
  }
  .metric-indigo .metric-icon {
    background-color: var(--color-indigo-100);
    color: var(--color-indigo-700);
  }
  .metric-green .metric-icon {
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-700);
  }
  .metric-cyan .metric-icon {
    background-color: var(--color-cyan-100);
    color: var(--color-cyan-700);
  }
  .metric-red .metric-icon {
    background-color: var(--color-red-100);
    color: var(--color-red-700);
  }
  .metric-rose .metric-icon {
    background-color: var(--color-rose-100);
    color: var(--color-rose-700);
  }
  .metric-slate .metric-icon {
    background-color: var(--color-slate-200);
    color: var(--color-slate-700);
  }
  .metric-amber .metric-icon {
    background-color: var(--color-amber-100);
    color: var(--color-amber-700);
  }
  .admin-section {
    margin-top: calc(var(--spacing) * 6);
  }
  .admin-section h2 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .admin-form-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .admin-form-card > h2 {
    margin-bottom: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-900);
  }
  .admin-form-card > h3 {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .admin-record-card {
    height: auto;
  }
  .admin-accent-card {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
    border-top-color: var(--board-accent,var(--primary));
  }
  .admin-recent-list {
    margin-top: calc(var(--spacing) * 4);
  }
  .admin-recent-row {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    padding-block: calc(var(--spacing) * 2);
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .panel-heading {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }
  .panel-heading .eyebrow {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .panel-heading h2 {
    margin: calc(var(--spacing) * 0);
  }
  .panel-heading > a {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    text-decoration-line: none;
  }
  .panel-heading > a .ui-icon {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
  }
  .admin-quick-grid {
    display: grid;
    gap: calc(var(--spacing) * 3);
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .admin-quick-card {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .admin-quick-icon {
    display: grid;
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-sky-50);
    color: var(--color-sky-700);
  }
  .admin-quick-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .admin-quick-card > div {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .admin-quick-card strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .admin-quick-card p {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .admin-quick-card > a {
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    color: var(--color-slate-500);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-900);
      }
    }
  }
  .admin-quick-card > a .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .permission-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 4);
  }
  .permission-heading strong {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .permission-heading span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .permission-grid {
    display: grid;
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .permission-item {
    display: flex;
    min-height: calc(var(--spacing) * 12);
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-700);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .permission-item input {
    margin-top: calc(var(--spacing) * 0.5);
    flex-shrink: 0;
  }
  .admin-create-card {
    align-self: flex-start;
    @media (width >= 64rem) {
      position: sticky;
    }
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 20);
    }
  }
  .admin-role-layout, .admin-page-layout {
    align-items: flex-start;
  }
  .admin-tabs {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .admin-tabs a {
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-600);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .admin-tabs a.active {
    border-color: transparent;
    color: var(--color-white);
    background: var(--ink);
  }
  .system-check-list {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-slate-100);
    }
  }
  .system-check {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .system-check > span {
    min-width: calc(var(--spacing) * 0);
  }
  .system-check > span > strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-800);
  }
  .system-check > span > small {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .system-check > strong {
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.06em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .system-ok {
    background-color: var(--color-emerald-50);
    color: var(--color-emerald-700);
  }
  .system-warn {
    background-color: var(--color-amber-50);
    color: var(--color-amber-800);
  }
  .health-feature-list {
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .health-feature-list > div {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-100);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3.5);
  }
  .health-feature-list > div > span {
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    color: var(--color-emerald-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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);
    --tw-ring-color: var(--color-slate-200);
  }
  .health-feature-list > div > span .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .health-feature-list strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-800);
  }
  .health-feature-list p {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .health-help-card {
    max-width: none;
  }
  .health-help-card > p {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-600);
  }
  .audit-action {
    background-color: var(--color-slate-100);
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .notice {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-amber-200);
    background-color: var(--color-amber-50);
    padding-inline: calc(var(--spacing) * 3.5);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-amber-900);
  }
  .prose {
    max-width: var(--container-4xl);
  }
  .prose h2 {
    margin-top: calc(var(--spacing) * 7);
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
    color: var(--color-slate-900);
    &:first-child {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .prose h3 {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .prose p {
    margin-block: calc(var(--spacing) * 3);
    font-size: 0.95rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-600);
  }
  .prose ul, .prose ol {
    margin-block: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 6);
    font-size: 0.95rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-600);
  }
  .prose ul {
    list-style-type: disc;
  }
  .prose ol {
    list-style-type: decimal;
  }
  .discord-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    background-color: #5865f2;
    padding: calc(var(--spacing) * 7);
    color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .discord-hero::after {
    content: "";
    position: absolute;
    top: calc(var(--spacing) * -12);
    right: calc(var(--spacing) * -12);
    height: calc(var(--spacing) * 40);
    width: calc(var(--spacing) * 40);
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .discord-hero h2 {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 0);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
  }
  .discord-hero p {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 2);
    max-width: var(--container-xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-indigo-100);
  }
  .discord-hero .button {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 5);
    border-color: var(--color-white);
    background-color: var(--color-white);
    color: var(--color-indigo-700);
  }
  .search-box {
    display: flex;
    gap: calc(var(--spacing) * 2);
  }
  .search-box input {
    flex: 1;
  }
  .site-footer {
    position: relative;
    margin-top: calc(var(--spacing) * 14);
    overflow: hidden;
    padding-top: calc(var(--spacing) * 11);
    padding-bottom: calc(var(--spacing) * 5);
    color: var(--color-slate-300);
    background: #0d1822;
  }
  .footer-accent {
    position: absolute;
    inset-inline: calc(var(--spacing) * 0);
    top: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 1);
    background: linear-gradient(90deg, var(--primary) 0 64%, var(--accent) 64% 100%);
  }
  .footer-grid {
    display: grid;
    gap: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: 1.55fr repeat(3,1fr);
    }
  }
  .footer-brand {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
  }
  .footer-logo {
    display: grid;
    height: calc(var(--spacing) * 20);
    width: calc(var(--spacing) * 20);
    flex-shrink: 0;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: var(--color-black);
    padding: calc(var(--spacing) * 1.5);
  }
  .footer-logo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .footer-brand strong {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
  }
  .footer-brand p {
    margin-top: calc(var(--spacing) * 1.5);
    max-width: var(--container-sm);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-400);
  }
  .footer-origin {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .footer-origin span {
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.6rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate-400);
    text-transform: uppercase;
  }
  .site-footer h3 {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 3);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
    color: var(--color-white);
    text-transform: uppercase;
  }
  .site-footer a {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    width: fit-content;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-400);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .footer-muted {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .footer-bottom {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spacing) * 5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    padding-top: calc(var(--spacing) * 4);
    font-size: 0.68rem;
    color: var(--color-slate-500);
  }
  .admin-save-hint {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-500);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .admin-save-hint .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    color: var(--color-emerald-600);
  }
  .settings-grid {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 5);
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .setting-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .setting-card-wide {
    @media (width >= 80rem) {
      grid-column: span 2 / span 2;
    }
  }
  .setting-heading {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    padding-bottom: calc(var(--spacing) * 4);
  }
  .setting-heading > div {
    min-width: calc(var(--spacing) * 0);
  }
  .setting-heading h2 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-900);
  }
  .setting-heading p {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .setting-icon {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-sky-50);
    color: var(--color-sky-700);
  }
  .setting-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .color-grid {
    display: grid;
    gap: calc(var(--spacing) * 3);
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .color-control {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .color-control > span:nth-child(2) {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .color-control strong {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-800);
  }
  .color-control small {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: 0.67rem;
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    color: var(--color-slate-500);
  }
  .color-control input[type="color"] {
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 11);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 1);
  }
  .color-swatch {
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    border-radius: var(--radius-xl);
    --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);
    --tw-ring-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
    background: var(--swatch);
  }
  .toggle-stack {
    display: grid;
    gap: calc(var(--spacing) * 2);
  }
  .setting-toggle {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-100);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .setting-toggle span {
    min-width: calc(var(--spacing) * 0);
  }
  .setting-toggle strong {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-800);
  }
  .setting-toggle small {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: 0.68rem;
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
    color: var(--color-slate-500);
  }
  .setting-number-grid {
    margin-top: calc(var(--spacing) * 1);
  }
  .security-callout {
    display: flex;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-emerald-200);
    background-color: var(--color-emerald-50);
    padding: calc(var(--spacing) * 4);
  }
  .security-callout > span {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-700);
  }
  .security-callout > span .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .security-callout strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-emerald-950);
  }
  .security-callout p {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-emerald-800);
  }
  .setting-note {
    border-radius: var(--radius-xl);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .danger-setting-card {
    border-color: var(--color-amber-200);
  }
  .danger-setting-card .setting-icon {
    background-color: var(--color-amber-100);
    color: var(--color-amber-700);
  }
  .maintenance-toggle {
    border-color: var(--color-amber-200);
    background-color: var(--color-amber-50);
  }
  .sticky-savebar {
    position: sticky;
    bottom: calc(var(--spacing) * 4);
    z-index: 30;
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
  }
  .sticky-savebar strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .sticky-savebar span {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .card-heading {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    padding-bottom: calc(var(--spacing) * 4);
  }
  .card-heading > div {
    min-width: calc(var(--spacing) * 0);
  }
  .card-heading h2, .card-heading h3 {
    margin: calc(var(--spacing) * 0);
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
    color: var(--color-slate-900);
  }
  .card-heading h2 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .card-heading h3 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .card-heading p {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .card-heading-icon {
    display: grid;
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-2xl);
    background-color: var(--color-sky-50);
    color: var(--color-sky-700);
    --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);
    --tw-ring-color: var(--color-sky-100);
  }
  .card-heading-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .card-heading-icon-green {
    background-color: var(--color-emerald-50);
    color: var(--color-emerald-700);
    --tw-ring-color: var(--color-emerald-100);
  }
  .card-heading-icon-danger {
    background-color: var(--color-red-50);
    color: var(--color-red-700);
    --tw-ring-color: var(--color-red-100);
  }
  .empty-state-large {
    min-height: calc(var(--spacing) * 56);
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .empty-state-large > .ui-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    color: var(--color-slate-300);
  }
  .empty-state-large h3 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-800);
  }
  .empty-state-large p {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 1);
    max-width: var(--container-md);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-500);
  }
  .text-action {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding: calc(var(--spacing) * 0);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-500);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .report-inline {
    margin-top: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3);
  }
  .field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .field-label-row > label {
    margin: calc(var(--spacing) * 0);
  }
  .field-label-row small {
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-400);
  }
  .feed-image-link {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-2xl);
  }
  .feed-image-link:hover .feed-image {
    scale: 1.01;
  }
  .feed-image {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .feed-open-link {
    margin-left: auto;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .auth-stage {
    display: grid;
    min-height: calc(100vh - 118px);
    align-items: stretch;
    gap: calc(var(--spacing) * 0);
    padding-block: calc(var(--spacing) * 8);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,.88fr) minmax(520px,1.12fr);
    }
  }
  .auth-stage-wide {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,.78fr) minmax(580px,1.22fr);
    }
  }
  .auth-stage-compact {
    max-width: var(--container-5xl);
  }
  .auth-story {
    position: relative;
    display: none;
    min-height: 650px;
    overflow: hidden;
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-900);
    padding: calc(var(--spacing) * 10);
    color: var(--color-white);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 64rem) {
      display: flex;
    }
    @media (width >= 64rem) {
      flex-direction: column;
    }
    @media (width >= 64rem) {
      justify-content: space-between;
    }
    background: linear-gradient(145deg,#0f1e2c 0%,#172c3f 72%,#153348 100%);
  }
  .auth-story::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * -24);
    right: calc(var(--spacing) * -20);
    height: calc(var(--spacing) * 80);
    width: calc(var(--spacing) * 80);
    border-radius: calc(infinity * 1px);
    --tw-blur: blur(var(--blur-3xl));
    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,);
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--primary) 28%, transparent);
    }
  }
  .auth-story::after {
    content: "";
    pointer-events: none;
    position: absolute;
    bottom: calc(var(--spacing) * -20);
    left: calc(var(--spacing) * -24);
    height: calc(var(--spacing) * 72);
    width: calc(var(--spacing) * 72);
    border-radius: calc(infinity * 1px);
    --tw-blur: blur(var(--blur-3xl));
    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,);
    background: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--accent) 18%, transparent);
    }
  }
  .auth-story-compact {
    min-height: 560px;
  }
  .auth-story-logo {
    position: relative;
    z-index: 10;
    width: calc(var(--spacing) * 28);
    overflow: hidden;
    border-radius: var(--radius-3xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: var(--color-black);
    padding: calc(var(--spacing) * 1.5);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .auth-story-logo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .auth-story h1, .auth-story h2 {
    position: relative;
    z-index: 10;
    max-width: var(--container-xl);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.035em;
    letter-spacing: -0.035em;
    color: var(--color-white);
  }
  .auth-story p {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 4);
    max-width: var(--container-xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-300);
  }
  .auth-eyebrow {
    position: relative;
    z-index: 10;
    margin-bottom: calc(var(--spacing) * 3);
    display: block;
    font-size: 0.66rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
    color: var(--color-sky-300);
    text-transform: uppercase;
  }
  .auth-feature-list {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 7);
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .auth-feature-list > span {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding: calc(var(--spacing) * 3.5);
  }
  .auth-feature-list > span > .ui-icon {
    margin-top: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    color: var(--color-sky-300);
  }
  .auth-feature-list > span > strong {
    min-width: 9rem;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
  }
  .auth-feature-list strong {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
  }
  .auth-feature-list small {
    margin-left: auto;
    max-width: 240px;
    text-align: right;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-400);
  }
  .auth-panel {
    display: flex;
    min-height: 650px;
    flex-direction: column;
    justify-content: center;
    border-radius: 2rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 64rem) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .auth-stage-compact .auth-panel {
    min-height: 560px;
  }
  .auth-panel-heading {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .auth-panel-heading h1, .auth-panel-heading h2 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.03em;
    letter-spacing: -0.03em;
    color: var(--color-slate-900);
  }
  .auth-panel-heading p {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-500);
  }
  .auth-panel-icon {
    margin-bottom: calc(var(--spacing) * 4);
    display: grid;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    place-items: center;
    border-radius: var(--radius-2xl);
    background-color: var(--color-sky-50);
    color: var(--color-sky-700);
    --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);
    --tw-ring-color: var(--color-sky-100);
  }
  .auth-panel-icon .ui-icon {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
  }
  .auth-panel-copy {
    margin-top: calc(var(--spacing) * 5);
    border-radius: var(--radius-2xl);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-600);
  }
  .auth-captcha-block {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 4);
  }
  .auth-divider {
    position: relative;
    margin-block: calc(var(--spacing) * 1);
    text-align: center;
    font-size: 0.67rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.1em;
    letter-spacing: 0.1em;
    color: var(--color-slate-400);
    text-transform: uppercase;
  }
  .auth-divider::before {
    content: "";
    position: absolute;
    top: calc(1/2 * 100%);
    right: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-200);
  }
  .auth-divider span {
    position: relative;
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
  }
  .agreement-check {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3.5);
  }
  .success-panel {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-emerald-200);
    background-color: var(--color-emerald-50);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-emerald-900);
  }
  .form-page-layout {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 330px;
    }
  }
  .form-page-card {
    border-radius: 1.6rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .form-actions {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 5);
  }
  .form-page-aside {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      position: sticky;
    }
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .sticky-action-card {
    position: sticky;
    bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
  }
  .editor-section {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .activity-section {
    margin-top: calc(var(--spacing) * 5);
  }
  .check-list {
    display: grid;
    gap: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-600);
  }
  .check-list li {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
  }
  .check-list li::before {
    content: "✓";
    margin-top: calc(var(--spacing) * 0.5);
    display: grid;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    place-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-emerald-100);
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-emerald-700);
  }
  .board-directory-card {
    position: relative;
    min-height: 205px;
    overflow: hidden;
  }
  .board-directory-card::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * -12);
    right: calc(var(--spacing) * -10);
    height: calc(var(--spacing) * 28);
    width: calc(var(--spacing) * 28);
    border-radius: calc(infinity * 1px);
    opacity: 10%;
    background: var(--board-accent,var(--primary));
  }
  .board-directory-top {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .board-dot {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    border-radius: calc(infinity * 1px);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
    --tw-ring-color: var(--color-slate-100);
    background: var(--board-accent,var(--primary));
  }
  .board-directory-card h3 {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 5);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .board-directory-card h3 a {
    color: var(--color-slate-900);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .board-directory-card > p {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-500);
  }
  .board-latest {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .board-latest > span {
    margin-right: calc(var(--spacing) * 2);
    font-size: 0.6rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-400);
    text-transform: uppercase;
  }
  .board-latest a {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-700);
  }
  .board-directory-actions {
    position: relative;
    z-index: 10;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  #community-spaces {
    scroll-margin-top: 5.5rem;
  }
  .grid-2 > .empty-state, .grid-3 > .empty-state, .grid-4 > .empty-state {
    grid-column: 1 / -1;
  }
  .board-directory-card {
    display: flex;
    flex-direction: column;
  }
  .boards-feed-layout {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 340px;
    }
  }
  .board-feed-card {
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .board-page-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    box-shadow: inset 0 -4px 0 var(--board-accent,var(--primary));
  }
  .board-page-layout {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 320px;
    }
  }
  .board-page-feed {
    min-width: calc(var(--spacing) * 0);
  }
  .board-page-aside {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      position: sticky;
    }
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .board-post-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .board-post-title {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
  }
  .board-post-title a {
    color: var(--color-slate-900);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .board-post-excerpt {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-600);
  }
  .community-post-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-block: calc(var(--spacing) * 7);
  }
  .community-post-layout {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 320px;
    }
  }
  .community-post-main {
    min-width: calc(var(--spacing) * 0);
  }
  .community-post-full {
    overflow: hidden;
    border-radius: 1.6rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .post-author-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .community-post-body {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 6);
    font-size: 0.96rem;
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
    color: var(--color-slate-700);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  .community-post-image {
    margin-inline: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 6);
    max-height: 720px;
    width: calc(100% - 2.5rem);
    border-radius: var(--radius-2xl);
    background-color: var(--color-slate-100);
    object-fit: contain;
    @media (width >= 48rem) {
      margin-inline: calc(var(--spacing) * 7);
    }
    @media (width >= 48rem) {
      width: calc(100% - 3.5rem);
    }
  }
  .community-post-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  .comments-section {
    margin-top: calc(var(--spacing) * 6);
  }
  .heading-count {
    margin-left: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.66rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-500);
  }
  .comment-feed {
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .comment-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .comment-body {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-700);
  }
  .comment-actions {
    margin-top: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 2);
  }
  .community-composer {
    margin-top: calc(var(--spacing) * 5);
  }
  .community-post-sidebar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      position: sticky;
    }
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .moderator-card {
    border-color: var(--color-amber-200);
    background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-50) 70%, transparent);
    }
  }
  .praise-header {
    position: relative;
    overflow: hidden;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-800);
    padding-block: calc(var(--spacing) * 8);
    color: var(--color-white);
    background: linear-gradient(130deg,#122333,#172c3f 72%,#19384c);
  }
  .praise-header::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * -28);
    right: calc(var(--spacing) * -24);
    height: calc(var(--spacing) * 80);
    width: calc(var(--spacing) * 80);
    border-radius: calc(infinity * 1px);
    --tw-blur: blur(var(--blur-3xl));
    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,);
    background: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb,var(--accent) 20%,transparent);
    }
  }
  .praise-header h1 {
    color: var(--color-white);
  }
  .praise-header p {
    color: var(--color-slate-300);
  }
  .praise-layout {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 350px;
    }
  }
  .praise-wall {
    min-width: calc(var(--spacing) * 0);
  }
  .praise-count-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-200);
  }
  .praise-feed {
    display: grid;
    gap: calc(var(--spacing) * 4);
  }
  .praise-wall-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: -1px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .praise-wall-card::before {
    content: "";
    position: absolute;
    top: calc(var(--spacing) * 0);
    left: calc(var(--spacing) * 0);
    height: 100%;
    width: calc(var(--spacing) * 1);
    background: var(--accent);
  }
  .praise-wall-quote-icon {
    margin-bottom: calc(var(--spacing) * 3);
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-emerald-50);
    color: var(--color-emerald-700);
  }
  .praise-wall-quote-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .praise-wall-content {
    font-size: 0.95rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-700);
  }
  .praise-people {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .praise-recipient {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-800);
  }
  .praise-sidebar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      position: sticky;
    }
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .praise-form-card {
    padding: calc(var(--spacing) * 5);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .praise-note {
    display: flex;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-sky-200);
    background-color: var(--color-sky-50);
    padding: calc(var(--spacing) * 4);
  }
  .praise-note > .ui-icon {
    margin-top: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    color: var(--color-sky-700);
  }
  .praise-note strong {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-sky-950);
  }
  .praise-note p {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-sky-800);
  }
  .praise-culture-card .callout-icon {
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-700);
  }
  .praise-guidance ul {
    margin-top: calc(var(--spacing) * 3);
    display: grid;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-600);
  }
  .praise-mini {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-emerald-100);
    background-color: var(--color-emerald-50);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-emerald-900);
  }
  .directory-toolbar {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .directory-search {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    gap: calc(var(--spacing) * 2);
  }
  .search-field-wrap {
    position: relative;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .search-field-wrap > .ui-icon {
    position: absolute;
    top: calc(1/2 * 100%);
    left: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    color: var(--color-slate-400);
  }
  .search-field-wrap input {
    width: 100%;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-300);
    background-color: var(--color-white);
    padding-block: calc(var(--spacing) * 2.5);
    padding-right: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 10);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .member-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .member-card {
    position: relative;
    display: flex;
    min-height: 250px;
    flex-direction: column;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .member-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
  }
  .member-card-identity {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .member-card-identity h2 {
    margin: calc(var(--spacing) * 0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
  }
  .member-card-identity h2 a {
    color: var(--color-slate-900);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .member-card-identity .tag {
    margin-top: calc(var(--spacing) * 2);
  }
  .member-praise-count {
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-emerald-50);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-emerald-700);
  }
  .member-card-bio {
    margin-top: calc(var(--spacing) * 4);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-600);
  }
  .game-chips {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .game-chips span {
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-600);
  }
  .member-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 4);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .member-card-link {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    z-index: 0;
    border-radius: var(--radius-2xl);
  }
  .member-card > *:not(.member-card-link) {
    position: relative;
    z-index: 10;
  }
  .profile-layout {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 330px;
    }
  }
  .profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
  }
  .profile-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      position: sticky;
    }
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .profile-about-card, .profile-games-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .profile-bio {
    font-size: 0.95rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-700);
  }
  .profile-detail-list {
    margin-top: calc(var(--spacing) * 4);
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-slate-100);
    }
  }
  .profile-detail-list > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .profile-detail-list dt {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-500);
  }
  .profile-detail-list dd {
    margin: calc(var(--spacing) * 0);
    text-align: right;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-800);
  }
  .profile-activity {
    min-width: calc(var(--spacing) * 0);
  }
  .profile-post-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .profile-topic-list {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .profile-topic-item {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding: calc(var(--spacing) * 4);
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
  }
  .profile-topic-icon {
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-sky-50);
    color: var(--color-sky-700);
  }
  .profile-topic-icon .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .profile-topic-item > span:nth-child(2) {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .profile-topic-item > span:nth-child(2) strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-800);
  }
  .profile-topic-item > span:nth-child(2) small {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .profile-topic-item > .ui-icon {
    margin-top: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-slate-300);
  }
  .profile-editor-wrap {
    padding-block: calc(var(--spacing) * 7);
  }
  .profile-editor-grid {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 320px;
    }
  }
  .profile-editor-main {
    display: grid;
    min-width: calc(var(--spacing) * 0);
    align-content: flex-start;
    gap: calc(var(--spacing) * 5);
  }
  .profile-editor-sidebar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      position: sticky;
    }
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .avatar-editor-card {
    text-align: center;
  }
  .avatar-editor-preview {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    justify-content: center;
  }
  .support-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
  }
  .support-dashboard {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 320px;
    }
  }
  .support-guidance {
    display: flex;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-sky-200);
    background-color: var(--color-sky-50);
    padding: calc(var(--spacing) * 4);
  }
  .support-guidance-icon {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-sky-100);
    color: var(--color-sky-700);
  }
  .support-guidance-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .support-list-heading {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .support-ticket-count {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-600);
  }
  .support-table-wrap {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .responsive-table {
    min-width: 100%;
  }
  .table-date {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    white-space: nowrap;
    color: var(--color-slate-500);
  }
  .table-chevron {
    text-align: right;
    color: var(--color-slate-300);
  }
  .process-list {
    margin-top: calc(var(--spacing) * 3);
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .process-list > li {
    display: flex;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-600);
  }
  .process-list > li > span {
    display: grid;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    flex-shrink: 0;
    place-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-slate-900);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
  }
  .closed-ticket-note {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-600);
  }
  .ticket-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-block: calc(var(--spacing) * 7);
  }
  .ticket-header-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .ticket-layout {
    display: grid;
    align-items: flex-start;
    gap: calc(var(--spacing) * 6);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 320px;
    }
  }
  .ticket-conversation {
    min-width: calc(var(--spacing) * 0);
  }
  .conversation-heading {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .privacy-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-500);
  }
  .support-thread {
    display: grid;
    gap: calc(var(--spacing) * 4);
  }
  .message-role-line {
    margin-top: calc(var(--spacing) * 1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .message-body {
    padding-top: calc(var(--spacing) * 4);
    font-size: 0.94rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-700);
  }
  .ticket-composer {
    margin-top: calc(var(--spacing) * 5);
  }
  .ticket-sidebar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      position: sticky;
    }
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 28);
    }
  }
  .game-picker {
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .game-picker-selected {
    display: flex;
    min-height: calc(var(--spacing) * 11);
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 2.5);
  }
  .game-picker-placeholder {
    padding-inline: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-400);
  }
  .game-picker-tag {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-sky-200);
    background-color: var(--color-sky-50);
    padding-block: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
    padding-left: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-sky-800);
  }
  .game-picker-tag > span {
    min-width: calc(var(--spacing) * 0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .game-picker-tag button {
    display: grid;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    flex-shrink: 0;
    place-items: center;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    color: var(--color-sky-600);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-sky-100);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-900);
      }
    }
  }
  .game-picker-tag button .ui-icon {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
  }
  .game-picker-combobox {
    position: relative;
  }
  .game-picker-combobox > label {
    margin-bottom: calc(var(--spacing) * 1.5);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-600);
  }
  .game-picker-input-shell {
    display: flex;
    min-height: calc(var(--spacing) * 11);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    &:focus-within {
      border-color: var(--color-sky-500);
    }
  }
  .game-picker-input-shell:focus-within {
    box-shadow: 0 0 0 4px var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent);
    }
  }
  .game-picker-input-shell > .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-slate-400);
  }
  .game-picker-input-shell input {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-800);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: var(--color-slate-400);
    }
  }
  .game-picker-input-shell input:focus {
    box-shadow: none;
    outline: none;
  }
  .game-picker-dropdown {
    position: absolute;
    inset-inline: calc(var(--spacing) * 0);
    top: calc(100% + .4rem);
    z-index: 50;
    max-height: calc(var(--spacing) * 80);
    overflow-y: auto;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 1.5);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .game-picker-option {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: left;
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .game-picker-option.active {
    background-color: var(--color-sky-50);
    --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);
    --tw-ring-color: var(--color-sky-100);
    --tw-ring-inset: inset;
  }
  .game-picker-option > span:first-child {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .game-picker-option strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .game-picker-option small {
    margin-top: calc(var(--spacing) * 1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .game-picker-option-action {
    margin-top: calc(var(--spacing) * 0.5);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-slate-600);
    text-transform: uppercase;
  }
  .game-picker-no-results {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 5);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-500);
  }
  .game-picker-help {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .ticket-detail-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ticket-details {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-slate-100);
    }
  }
  .ticket-details > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .ticket-details dt {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-500);
  }
  .ticket-details dd {
    margin: calc(var(--spacing) * 0);
    text-align: right;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-800);
  }
  .ticket-controls {
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .upload-panel {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-slate-300);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 4);
  }
  .upload-panel-icon {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    color: var(--color-slate-500);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .upload-panel-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .upload-preview {
    margin-top: calc(var(--spacing) * 3);
    max-height: calc(var(--spacing) * 48);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    object-fit: contain;
  }
  .stack-sm {
    display: grid;
    gap: calc(var(--spacing) * 2);
  }
  .stack-md {
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .stack-lg {
    display: grid;
    gap: calc(var(--spacing) * 4);
  }
  .space-top-sm {
    margin-top: calc(var(--spacing) * 2);
  }
  .space-top-md {
    margin-top: calc(var(--spacing) * 4);
  }
  .space-top-lg {
    margin-top: calc(var(--spacing) * 6);
  }
  .space-bottom-md {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .centered-form {
    margin-inline: auto;
    width: 100%;
    max-width: 900px;
  }
  .editor-tall {
    min-height: 210px !important;
  }
  .editor-extra-tall {
    min-height: 250px !important;
  }
  .filter-submit {
    justify-content: flex-end;
    @media (width >= 48rem) {
      padding-top: 1.45rem;
    }
  }
  .moderator-toolbar {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-amber-200);
    background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-50) 70%, transparent);
    }
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .moderator-toolbar-title {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-amber-900);
    text-transform: uppercase;
  }
  .moderator-toolbar .inline-actions {
    margin-top: calc(var(--spacing) * 3);
  }
  .role-tag {
    margin-top: calc(var(--spacing) * 2);
  }
  .thread-inline-form {
    margin-top: calc(var(--spacing) * 4);
  }
  .thread-delete-form {
    margin-top: calc(var(--spacing) * 2);
  }
  .thread-composer {
    margin-top: calc(var(--spacing) * 6);
  }
  .thread-state {
    margin-top: calc(var(--spacing) * 5);
  }
  .forum-notice {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .about-aside-callout {
    margin-top: calc(var(--spacing) * 4);
  }
  .maintenance-logo {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 28);
    border-radius: var(--radius-2xl);
    background-color: var(--color-slate-950);
    padding: calc(var(--spacing) * 1);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .notification-card {
    position: relative;
  }
  .notification-card-unread {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-left-color: var(--primary);
  }
  .link-list {
    margin-top: calc(var(--spacing) * 3);
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(& > :not(:last-child)) {
      border-color: var(--color-slate-100);
    }
  }
  .link-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:first-child {
      padding-top: calc(var(--spacing) * 1);
    }
    &:last-child {
      padding-bottom: calc(var(--spacing) * 1);
    }
  }
  .link-list-main {
    min-width: calc(var(--spacing) * 0);
  }
  .link-list-main a {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .link-list-open {
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    color: var(--color-slate-500);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-900);
      }
    }
  }
  .link-list-open .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .admin-record-stack {
    display: grid;
    align-content: flex-start;
    gap: calc(var(--spacing) * 4);
  }
  .admin-record-stack > .admin-record-card {
    margin: calc(var(--spacing) * 0);
  }
  .admin-danger-row {
    margin-top: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 3);
  }
  .page-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .section-header > :first-child, .page-header-inner > :first-child, .admin-titlebar > :first-child {
    min-width: calc(var(--spacing) * 0);
  }
  .section-header .section-link {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .page-header-inner > .button, .page-header-inner > .inline-actions {
    margin-top: calc(var(--spacing) * 1);
  }
  .grid-2 > *, .grid-3 > *, .grid-4 > * {
    min-width: 0;
  }
  .grid-2 > .card, .grid-3 > .card, .grid-4 > .card, .grid-2 > .admin-form-card, .grid-3 > .admin-form-card, .grid-4 > .admin-form-card {
    height: 100%;
  }
  .admin-role-layout > .admin-create-card, .admin-page-layout > .admin-create-card {
    height: auto;
  }
  .announcement {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  .announcement-meta {
    margin-top: auto;
    padding-top: calc(var(--spacing) * 3);
  }
  .topic-row > .topic-meta {
    text-align: right;
  }
  .forum-latest {
    min-width: calc(var(--spacing) * 0);
  }
  .post-user .tag {
    max-width: 100%;
  }
  .discord-hero .button {
    margin-top: calc(var(--spacing) * 5);
  }
  .discord-links-card {
    align-self: flex-start;
  }
  .state-stage {
    display: grid;
    min-height: 62vh;
    place-items: center;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 12);
  }
  .state-card {
    width: 100%;
    max-width: var(--container-2xl);
    border-radius: 1.75rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 7);
    text-align: center;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 10);
    }
  }
  .state-icon {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 5);
    display: grid;
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    place-items: center;
    border-radius: var(--radius-2xl);
    background-color: var(--color-sky-50);
    color: var(--color-sky-700);
  }
  .state-icon .ui-icon {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
  }
  .state-icon-warn {
    background-color: var(--color-amber-50);
    color: var(--color-amber-700);
  }
  .state-card h1 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.03em;
    letter-spacing: -0.03em;
    color: var(--color-slate-900);
  }
  .state-card p {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 3);
    max-width: var(--container-lg);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-500);
  }
  .state-actions {
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  .report-card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .captcha-setting-card {
    --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);
    --tw-ring-color: var(--color-sky-100);
  }
  .page-header-visual {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg,#fff 0%,#f8fbfd 100%);
  }
  .page-header-visual::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * -20);
    right: calc(var(--spacing) * -16);
    height: calc(var(--spacing) * 56);
    width: calc(var(--spacing) * 56);
    border-radius: calc(infinity * 1px);
    --tw-blur: blur(var(--blur-3xl));
    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,);
    background: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb,var(--primary) 8%,transparent);
    }
  }
  .page-header-visual > .container {
    position: relative;
    z-index: 10;
  }
  .page-header-visual .page-header-inner > .ui-icon {
    height: calc(var(--spacing) * 20);
    width: calc(var(--spacing) * 20);
    color: var(--color-slate-200);
  }
  .manager-stats {
    margin-bottom: calc(var(--spacing) * 6);
    display: grid;
    gap: calc(var(--spacing) * 3);
  }
  .manager-stats-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .manager-stats-4 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .manager-stat {
    display: flex;
    min-height: calc(var(--spacing) * 28);
    flex-direction: column;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .manager-stat > span {
    display: block;
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.1em;
    letter-spacing: 0.1em;
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .manager-stat > strong {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.04em;
    letter-spacing: -0.04em;
    color: var(--color-slate-900);
  }
  .manager-stat > small {
    margin-top: auto;
    display: block;
    padding-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .manager-stat-attention {
    border-color: var(--color-amber-200);
    background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-50) 60%, transparent);
    }
  }
  .manager-stat-danger {
    border-color: var(--color-red-200);
    background-color: color-mix(in srgb, oklch(97.1% 0.013 17.38) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-50) 60%, transparent);
    }
  }
  .manager-panel {
    margin-bottom: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .manager-panel-attention {
    border-color: var(--color-amber-200);
  }
  .manager-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .manager-panel-head > div:first-child {
    min-width: calc(var(--spacing) * 0);
  }
  .manager-panel-head h2 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
    color: var(--color-slate-900);
  }
  .manager-panel-head p {
    margin-top: calc(var(--spacing) * 1);
    max-width: var(--container-3xl);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .manager-panel-head-tools {
    align-items: flex-end;
  }
  .manager-count {
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.66rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.06em;
    letter-spacing: 0.06em;
    color: var(--color-slate-600);
    text-transform: uppercase;
  }
  .manager-count-attention {
    background-color: var(--color-amber-100);
    color: var(--color-amber-800);
  }
  .manager-clear-link {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .manager-table-wrap {
    overflow-x: auto;
    border-radius: 0;
    border-style: var(--tw-border-style);
    border-width: 0px;
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .manager-table {
    min-width: 860px;
  }
  .manager-table th, .manager-table td {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    vertical-align: middle;
  }
  .manager-table th {
    white-space: nowrap;
  }
  .manager-table tbody tr:hover td {
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 80%, transparent);
    }
  }
  .manager-table tr[hidden] {
    display: none;
  }
  .table-actions-col {
    text-align: right;
  }
  .table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 1.5);
    white-space: nowrap;
  }
  .table-actions form {
    margin: calc(var(--spacing) * 0);
  }
  .table-primary {
    min-width: calc(var(--spacing) * 0);
  }
  .table-primary > strong, .table-primary > span > strong {
    display: block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .table-primary > strong a, .table-primary > span > strong a {
    color: var(--color-slate-900);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-700);
      }
    }
  }
  .table-primary > small, .table-primary > span > small {
    margin-top: calc(var(--spacing) * 1.5);
    display: block;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.69rem;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .table-primary-accent, .table-primary-icon {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .table-primary-accent > span:last-child, .table-primary-icon > span:last-child {
    min-width: calc(var(--spacing) * 0);
  }
  .board-swatch {
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 2);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    background: var(--swatch,var(--primary));
  }
  .table-record-icon {
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-sky-50);
    color: var(--color-sky-700);
  }
  .table-record-icon .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .table-category {
    display: block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-slate-700);
  }
  .table-warning {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.66rem;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-amber-700);
  }
  .table-number {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-800);
  }
  .table-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .table-link-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--spacing) * 1.5);
  }
  .sort-chip {
    display: inline-grid;
    min-width: calc(var(--spacing) * 8);
    place-items: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-600);
  }
  .count-attention {
    display: inline-grid;
    min-width: calc(var(--spacing) * 7);
    place-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-amber-100);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-amber-800);
  }
  .table-empty, .table-filter-empty {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 8);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
  }
  .table-filter-empty {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    background-color: var(--color-slate-50);
  }
  .manager-search {
    display: flex;
    width: 100%;
    max-width: var(--container-xs);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 3);
    color: var(--color-slate-400);
    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, visibility, 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));
    &:focus-within {
      border-color: var(--color-sky-300);
    }
    &:focus-within {
      background-color: var(--color-white);
    }
  }
  .manager-search .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .manager-search input {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-800);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &::placeholder {
      color: var(--color-slate-400);
    }
  }
  .manager-search input:focus {
    box-shadow: none;
  }
  .icon-action {
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    color: var(--color-slate-500);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-900);
      }
    }
  }
  .icon-action .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .icon-action-danger {
    border-color: var(--color-red-100);
    color: var(--color-red-500);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-700);
      }
    }
  }
  .icon-action-success {
    border-color: var(--color-emerald-100);
    color: var(--color-emerald-600);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-emerald-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-emerald-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-emerald-800);
      }
    }
  }
  .status-active {
    background-color: var(--color-emerald-100);
    color: var(--color-emerald-800);
  }
  .status-disabled {
    background-color: var(--color-slate-100);
    color: var(--color-slate-600);
  }
  .admin-filterbar {
    display: grid;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 70%, transparent);
    }
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: minmax(220px,1.6fr) repeat(4,minmax(130px,0.8fr)) auto;
    }
  }
  .admin-filterbar > label:not(.filter-search) {
    display: grid;
    gap: calc(var(--spacing) * 1);
  }
  .admin-filterbar > label:not(.filter-search) > span {
    font-size: 0.62rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .admin-filterbar select, .admin-filterbar input {
    width: 100%;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .admin-filterbar > .button {
    align-self: flex-end;
  }
  .filter-search {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    align-self: flex-end;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:focus-within {
      border-color: var(--color-sky-300);
    }
  }
  .filter-search .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    color: var(--color-slate-400);
  }
  .filter-search input {
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 0);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .support-manager-table {
    min-width: 1160px;
  }
  body.modal-open {
    overflow: hidden;
  }
  .modal-layer {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 500;
    display: grid;
    place-items: center;
    padding: calc(var(--spacing) * 4);
    opacity: 0%;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .modal-layer.open {
    opacity: 100%;
  }
  .modal-backdrop {
    position: absolute;
    inset: calc(var(--spacing) * 0);
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 60%, transparent);
    }
    --tw-backdrop-blur: blur(2px);
    -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,);
  }
  .modal-card {
    position: relative;
    z-index: 10;
    display: flex;
    max-height: calc(100dvh - 2rem);
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
    background-color: var(--color-white);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    transform: translateY(8px) scale(.985);
  }
  .modal-layer.open .modal-card {
    transform: none;
  }
  .modal-card-md {
    max-width: var(--container-xl);
  }
  .modal-card-lg {
    max-width: var(--container-3xl);
  }
  .modal-card-xl {
    max-width: var(--container-5xl);
  }
  .modal-head {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .modal-head > div {
    min-width: calc(var(--spacing) * 0);
  }
  .modal-head h2 {
    margin: calc(var(--spacing) * 0);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.03em;
    letter-spacing: -0.03em;
    color: var(--color-slate-900);
  }
  .modal-head p {
    margin-top: calc(var(--spacing) * 1);
    max-width: var(--container-2xl);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .modal-close {
    display: grid;
    height: calc(var(--spacing) * 9);
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    color: var(--color-slate-500);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-900);
      }
    }
  }
  .modal-close .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .modal-form {
    display: grid;
    min-height: calc(var(--spacing) * 0);
    gap: calc(var(--spacing) * 4);
    overflow-y: auto;
    padding: calc(var(--spacing) * 5);
  }
  .modal-actions {
    margin-inline: calc(var(--spacing) * -5);
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * -5);
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
  }
  .toggle-field {
    display: flex;
    min-height: 72px;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3);
  }
  .toggle-field input {
    margin-top: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    accent-color: var(--primary);
  }
  .toggle-field span {
    min-width: calc(var(--spacing) * 0);
  }
  .toggle-field strong {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-800);
  }
  .toggle-field small {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: 0.68rem;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .color-field {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .color-field input[type="color"] {
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 14);
    flex-shrink: 0;
    cursor: pointer;
    padding: calc(var(--spacing) * 1);
  }
  .color-field span {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .record-callout {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-sky-100);
    background-color: var(--color-sky-50);
    padding: calc(var(--spacing) * 3);
  }
  .record-callout-icon {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    color: var(--color-sky-700);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .record-callout-icon .ui-icon {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
  }
  .record-callout small {
    display: block;
    font-size: 0.62rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-sky-700);
    text-transform: uppercase;
  }
  .record-callout strong {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .confirm-card {
    max-width: var(--container-md);
  }
  .confirm-body {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 5);
  }
  .confirm-icon {
    display: grid;
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    flex-shrink: 0;
    place-items: center;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-red-50);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-red-700);
  }
  .confirm-body p {
    margin: calc(var(--spacing) * 0);
    padding-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-600);
  }
  .avatar-card-heading {
    text-align: left;
  }
  .avatar-editor-card {
    height: auto;
  }
  .avatar-editor-stage {
    position: relative;
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 1);
    display: grid;
    width: 100%;
    place-items: center;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-slate-50);
    --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));
    --tw-gradient-to: var(--color-white);
    --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));
    padding: calc(var(--spacing) * 5);
  }
  .avatar-editor-preview {
    margin: calc(var(--spacing) * 0);
    display: grid;
    min-height: calc(var(--spacing) * 36);
    place-items: center;
  }
  .avatar-profile-editor {
    height: calc(var(--spacing) * 32);
    width: calc(var(--spacing) * 32);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .avatar-editor-badge {
    position: absolute;
    right: calc(var(--spacing) * 3);
    bottom: calc(var(--spacing) * 3);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-emerald-100);
    background-color: var(--color-emerald-50);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 0.62rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.06em;
    letter-spacing: 0.06em;
    color: var(--color-emerald-700);
    text-transform: uppercase;
  }
  .avatar-editor-badge .ui-icon {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
  }
  .avatar-editor-actions {
    margin-top: calc(var(--spacing) * 4);
  }
  .avatar-file-status {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 0);
    text-align: center;
    font-size: 0.68rem;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .avatar-file-warning {
    color: var(--color-amber-700);
  }
  .avatar-requirements {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 3);
    text-align: left;
  }
  .avatar-requirements > .ui-icon {
    margin-top: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-slate-400);
  }
  .avatar-requirements strong {
    display: block;
    font-size: 0.7rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-700);
  }
  .avatar-requirements p {
    margin-top: calc(var(--spacing) * 0.5);
    margin-bottom: calc(var(--spacing) * 0);
    font-size: 0.66rem;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .remove-avatar {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-red-100);
    background-color: color-mix(in srgb, oklch(97.1% 0.013 17.38) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-50) 50%, transparent);
    }
    padding: calc(var(--spacing) * 3);
    text-align: left;
  }
  .remove-avatar input {
    margin-top: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    accent-color: #dc2626;
  }
  .remove-avatar strong {
    display: block;
    font-size: 0.7rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-red-800);
  }
  .remove-avatar small {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: 0.65rem;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-red-600);
  }
  .avatar-crop-card {
    max-width: var(--container-6xl);
  }
  .avatar-crop-body {
    display: grid;
    min-height: calc(var(--spacing) * 0);
    gap: calc(var(--spacing) * 5);
    overflow-y: auto;
    padding: calc(var(--spacing) * 5);
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) 260px;
    }
  }
  .avatar-crop-workspace {
    min-width: calc(var(--spacing) * 0);
  }
  .avatar-crop-frame {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 760px;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background-color: var(--color-slate-950);
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    aspect-ratio: 720/520;
    touch-action: none;
  }
  .avatar-crop-frame canvas[data-avatar-crop-canvas] {
    display: block;
    height: 100%;
    width: 100%;
    cursor: crosshair;
    -webkit-user-select: none;
    user-select: none;
  }
  .avatar-crop-instruction {
    pointer-events: none;
    position: absolute;
    top: calc(1/2 * 100%);
    left: calc(1/2 * 100%);
    z-index: 10;
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 80%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-backdrop-blur: blur(var(--blur-sm));
    -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,);
  }
  .avatar-crop-selection {
    position: absolute;
    z-index: 20;
    cursor: move;
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-white);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
    background: rgb(255 255 255 / .04);
    box-shadow: 0 0 0 9999px rgb(2 6 23 / .48), 0 0 0 1px rgb(15 23 42 / .35), 0 10px 30px rgb(2 6 23 / .24);
    touch-action: none;
  }
  .avatar-crop-selection:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
    --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-sky-300) 70%, transparent);
    }
  }
  .avatar-crop-selection.dragging {
    cursor: grabbing;
  }
  .avatar-crop-selection-grid {
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    background-image: linear-gradient(to right,transparent 33.1%,rgb(255 255 255 / .55) 33.3%,rgb(255 255 255 / .55) 33.7%,transparent 33.9%,transparent 66.1%,rgb(255 255 255 / .55) 66.3%,rgb(255 255 255 / .55) 66.7%,transparent 66.9%),linear-gradient(to bottom,transparent 33.1%,rgb(255 255 255 / .55) 33.3%,rgb(255 255 255 / .55) 33.7%,transparent 33.9%,transparent 66.1%,rgb(255 255 255 / .55) 66.3%,rgb(255 255 255 / .55) 66.7%,transparent 66.9%);
  }
  .avatar-crop-handle {
    position: absolute;
    z-index: 30;
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: var(--color-slate-900);
    background-color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .avatar-crop-handle-nw {
    top: calc(var(--spacing) * -2.5);
    left: calc(var(--spacing) * -2.5);
    cursor: nwse-resize;
  }
  .avatar-crop-handle-ne {
    top: calc(var(--spacing) * -2.5);
    right: calc(var(--spacing) * -2.5);
    cursor: nesw-resize;
  }
  .avatar-crop-handle-sw {
    bottom: calc(var(--spacing) * -2.5);
    left: calc(var(--spacing) * -2.5);
    cursor: nesw-resize;
  }
  .avatar-crop-handle-se {
    right: calc(var(--spacing) * -2.5);
    bottom: calc(var(--spacing) * -2.5);
    cursor: nwse-resize;
  }
  .avatar-crop-tip {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 3);
    max-width: var(--container-2xl);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .avatar-crop-controls {
    display: grid;
    align-content: flex-start;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 4);
  }
  .avatar-crop-live-preview {
    display: grid;
    justify-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
  }
  .avatar-crop-live-preview > span {
    font-size: 0.64rem;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
    color: var(--color-slate-500);
    text-transform: uppercase;
  }
  .avatar-crop-live-preview canvas {
    height: calc(var(--spacing) * 32);
    width: calc(var(--spacing) * 32);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 4px;
    border-color: var(--color-white);
    background-color: var(--color-slate-200);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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);
    --tw-ring-color: var(--color-slate-200);
  }
  .crop-control-group {
    display: grid;
    gap: calc(var(--spacing) * 2);
  }
  .crop-control-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-700);
  }
  .crop-control-group input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
  }
  .crop-control-group input[type="range"]:disabled {
    cursor: not-allowed;
    opacity: 40%;
  }
  .crop-control-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-700);
  }
  .crop-button-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 2);
  }
  .crop-nudge-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--spacing) * 1.5);
  }
  .crop-nudge-grid .button {
    min-height: calc(var(--spacing) * 10);
    padding-inline: calc(var(--spacing) * 0);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .crop-output-note {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-emerald-100);
    background-color: var(--color-emerald-50);
    padding: calc(var(--spacing) * 3);
  }
  .crop-output-note > .ui-icon {
    margin-top: calc(var(--spacing) * 0.5);
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-emerald-700);
  }
  .crop-output-note p {
    margin: calc(var(--spacing) * 0);
    font-size: 0.67rem;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-emerald-800);
  }
  .markdown-editor {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-300);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
  }
  .markdown-editor:focus-within {
    border-color: var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--primary) 55%,#cbd5e1);
    }
    box-shadow: 0 0 0 3px var(--primary);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent);
    }
  }
  .markdown-editor-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 3);
  }
  .markdown-editor-label {
    min-width: calc(var(--spacing) * 0);
    padding-bottom: calc(var(--spacing) * 3);
  }
  .markdown-editor-label label {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .markdown-editor-label span {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: 0.68rem;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-500);
  }
  .markdown-tabs {
    display: flex;
    flex-shrink: 0;
    align-items: flex-end;
    gap: calc(var(--spacing) * 1);
  }
  .markdown-tab {
    position: relative;
    min-height: calc(var(--spacing) * 9);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-500);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-900);
      }
    }
  }
  .markdown-tab.active {
    border-color: var(--color-slate-200);
    border-bottom-color: var(--color-white);
    background-color: var(--color-white);
    color: var(--color-slate-900);
    margin-bottom: -1px;
  }
  .markdown-tab.active::after {
    content: "";
    position: absolute;
    inset-inline: calc(var(--spacing) * 2);
    bottom: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 0.5);
    border-radius: calc(infinity * 1px);
    background: var(--primary);
  }
  .markdown-toolbar {
    display: flex;
    min-height: calc(var(--spacing) * 12);
    align-items: center;
    gap: calc(var(--spacing) * 1);
    overflow-x: auto;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    scrollbar-width: thin;
  }
  .markdown-tool-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .markdown-tool {
    display: grid;
    height: calc(var(--spacing) * 8);
    min-width: calc(var(--spacing) * 8);
    place-items: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-slate-600);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-200);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-950);
      }
    }
  }
  .markdown-tool-strong span {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .markdown-tool-em span {
    font-style: italic;
  }
  .markdown-tool-strike span {
    text-decoration-line: line-through;
  }
  .markdown-tool-code {
    font-family: var(--font-mono);
    font-size: 0.68rem;
  }
  .markdown-tool-wide {
    min-width: calc(var(--spacing) * 9);
  }
  .markdown-toolbar-divider {
    margin-inline: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 5);
    width: 1px;
    flex-shrink: 0;
    background-color: var(--color-slate-200);
  }
  .markdown-toolbar-spacer {
    min-width: calc(var(--spacing) * 2);
    flex: 1;
  }
  .markdown-help-toggle {
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: 0.68rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-500);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-900);
      }
    }
  }
  .markdown-write-pane {
    background-color: var(--color-white);
  }
  .markdown-write-pane textarea {
    display: block;
    min-height: 260px;
    width: 100%;
    resize: vertical;
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    font-size: 0.9rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-800);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-outline-style: none;
    outline-style: none;
  }
  .markdown-write-pane textarea:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    outline: none;
    box-shadow: none;
  }
  .markdown-editor-compact .markdown-write-pane textarea {
    min-height: 170px;
  }
  .markdown-editor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-50) 70%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-500);
  }
  .markdown-character-count {
    flex-shrink: 0;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .markdown-character-count.near-limit {
    color: var(--color-amber-700);
  }
  .markdown-character-count.at-limit {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-red-700);
  }
  .markdown-preview-pane {
    min-height: 260px;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 5);
  }
  .markdown-editor-compact .markdown-preview-pane {
    min-height: 170px;
  }
  .markdown-preview-state {
    display: grid;
    min-height: 150px;
    place-items: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 5);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-slate-400);
  }
  .markdown-format-guide {
    display: grid;
    column-gap: calc(var(--spacing) * 6);
    row-gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .markdown-format-guide > div {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    font-size: 0.68rem;
    color: var(--color-slate-600);
  }
  .markdown-format-guide strong {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-700);
  }
  .markdown-format-guide code {
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: var(--color-white);
    font-size: 0.64rem;
    color: var(--color-slate-600);
    --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);
    --tw-ring-color: var(--color-slate-200);
  }
  .markdown-inline-edit {
    margin-top: calc(var(--spacing) * 4);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-200);
    padding-top: calc(var(--spacing) * 4);
  }
  .forum-topic-form {
    max-width: var(--container-4xl);
  }
  .markdown-body {
    min-width: calc(var(--spacing) * 0);
    font-size: 0.9rem;
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
    color: var(--color-slate-700);
  }
  .markdown-body > *:first-child {
    margin-top: calc(var(--spacing) * 0);
  }
  .markdown-body > *:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .markdown-body p {
    margin-block: calc(var(--spacing) * 3);
  }
  .markdown-body .markdown-heading {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: -0.02em;
    letter-spacing: -0.02em;
    color: var(--color-slate-900);
  }
  .markdown-body .markdown-heading-1 {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .markdown-body .markdown-heading-2 {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .markdown-body .markdown-heading-3 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .markdown-body strong {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-900);
  }
  .markdown-body em {
    font-style: italic;
  }
  .markdown-body del {
    color: var(--color-slate-500);
  }
  .markdown-body a {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    overflow-wrap: break-word;
    text-decoration-line: underline;
    text-decoration-color: var(--color-sky-200);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  .markdown-body .markdown-hashtag, .markdown-hashtag {
    display: inline-flex;
    border-radius: var(--radius-md);
    background-color: var(--color-sky-50);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-sky-700);
    text-decoration-line: none;
    --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);
    --tw-ring-color: var(--color-sky-100);
    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, visibility, 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));
    --tw-ring-inset: inset;
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-sky-100);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-900);
      }
    }
  }
  .markdown-tool-hashtag {
    color: var(--color-sky-700);
  }
  .markdown-body ul {
    margin-block: calc(var(--spacing) * 3);
    list-style-type: disc;
    :where(& > :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)));
    }
    padding-left: calc(var(--spacing) * 6);
  }
  .markdown-body ol {
    margin-block: calc(var(--spacing) * 3);
    list-style-type: decimal;
    :where(& > :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)));
    }
    padding-left: calc(var(--spacing) * 6);
  }
  .markdown-body li {
    padding-left: calc(var(--spacing) * 1);
  }
  .markdown-body blockquote {
    margin-block: calc(var(--spacing) * 4);
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
    border-color: var(--color-sky-200);
    background-color: color-mix(in srgb, oklch(97.7% 0.013 236.62) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-50) 70%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-slate-600);
  }
  .markdown-body blockquote > *:first-child {
    margin-top: calc(var(--spacing) * 0);
  }
  .markdown-body blockquote > *:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .markdown-body hr {
    margin-block: calc(var(--spacing) * 6);
    border-style: var(--tw-border-style);
    border-width: 0px;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-200);
  }
  .markdown-body code {
    border-radius: var(--radius-md);
    background-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: var(--font-mono);
    font-size: 0.82em;
    color: var(--color-slate-800);
    --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);
    --tw-ring-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-slate-200) 60%, transparent);
    }
  }
  .markdown-body pre {
    margin-block: calc(var(--spacing) * 4);
    overflow-x: auto;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-800);
    background-color: var(--color-slate-950);
    padding: calc(var(--spacing) * 4);
    color: var(--color-slate-100);
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .markdown-body pre code {
    display: block;
    min-width: max-content;
    background-color: transparent;
    padding: calc(var(--spacing) * 0);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-100);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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);
  }
  .markdown-table-wrap {
    margin-block: calc(var(--spacing) * 4);
    max-width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
  }
  .markdown-body table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    background-color: var(--color-white);
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .markdown-body th {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-slate-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-slate-700);
  }
  .markdown-body td {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    vertical-align: top;
  }
  .markdown-align-center {
    text-align: center !important;
  }
  .markdown-align-right {
    text-align: right !important;
  }
  .markdown-align-left {
    text-align: left !important;
  }
  .hashtag-layout {
    display: grid;
    gap: calc(var(--spacing) * 8);
  }
  .hashtag-section {
    display: grid;
    gap: calc(var(--spacing) * 4);
  }
  .hashtag-section + .hashtag-section {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-200);
    padding-top: calc(var(--spacing) * 8);
  }
  .hashtag-result-list {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .hashtag-result {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding: calc(var(--spacing) * 4);
    color: var(--color-slate-800);
    text-decoration-line: none;
    &:first-child {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-950);
      }
    }
  }
  .hashtag-result > span:nth-child(2) {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .hashtag-result strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .hashtag-result small {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .hashtag-result-icon {
    display: grid;
    height: calc(var(--spacing) * 10);
    width: calc(var(--spacing) * 10);
    flex-shrink: 0;
    place-items: center;
    border-radius: var(--radius-xl);
    background-color: var(--color-sky-50);
    color: var(--color-sky-700);
  }
  .hashtag-result-icon .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
  }
  .hashtag-result > .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-slate-300);
  }
  .hashtag-card {
    display: flex;
    min-height: 190px;
    flex-direction: column;
  }
  .hashtag-card > h3 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .hashtag-card > h3 + p {
    margin-top: calc(var(--spacing) * 2);
  }
  .hashtag-card > .meta {
    margin-top: auto;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--color-slate-100);
    padding-top: calc(var(--spacing) * 3);
  }
  .hashtag-praise {
    margin-top: calc(var(--spacing) * 3);
    flex: 1;
  }
  .member-mini-card {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    color: var(--color-slate-800);
    text-decoration-line: none;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    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, visibility, 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));
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-slate-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-950);
      }
    }
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .member-mini-card > span {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .member-mini-card strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .member-mini-card small {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .member-mini-card em {
    margin-top: calc(var(--spacing) * 2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-600);
    font-style: normal;
  }
  .member-mini-card > .ui-icon {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-slate-300);
  }
  .hero-logo-wrap {
    margin-inline: auto;
    max-width: 420px;
    overflow: hidden;
    border-radius: 1.6rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-slate-800);
    background-color: var(--color-slate-950);
    padding: calc(var(--spacing) * 3);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .hero-logo-wrap img {
    display: block;
    width: 100%;
    border-radius: var(--radius-2xl);
  }
}
.steam-connect-card {
  border-radius: var(--radius-2xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-slate-200);
  background-color: var(--color-slate-50);
  padding: calc(var(--spacing) * 4);
}
.steam-connect-heading {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.steam-connect-heading strong {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-black);
  font-weight: var(--font-weight-black);
  color: var(--color-slate-900);
}
.steam-connect-heading p {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
  color: var(--color-slate-500);
}
.steam-connect-icon {
  display: grid;
  height: calc(var(--spacing) * 10);
  width: calc(var(--spacing) * 10);
  flex-shrink: 0;
  place-items: center;
  border-radius: var(--radius-xl);
  background-color: var(--color-slate-900);
  color: var(--color-white);
}
.steam-connect-icon .ui-icon {
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
}
.steam-connect-row {
  margin-top: calc(var(--spacing) * 4);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--spacing) * 3);
}
.steam-connect-row .field {
  min-width: calc(var(--spacing) * 0);
  flex: 1;
}
.steam-connect-row .button {
  flex-shrink: 0;
}
.steam-lookup-status {
  margin-top: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-500);
}
.steam-lookup-status[data-state="success"] {
  color: var(--color-emerald-700);
}
.steam-lookup-status[data-state="error"] {
  color: var(--color-red-700);
}
.steam-lookup-status[data-state="loading"] {
  color: var(--color-sky-700);
}
.game-link-grid {
  align-items: flex-start;
}
.steam-link-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
}
.steam-link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-slate-200);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-size: 0.68rem;
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-slate-600);
  text-decoration-line: none;
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-slate-300);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-slate-900);
    }
  }
}
.steam-link .ui-icon {
  height: calc(var(--spacing) * 3.5);
  width: calc(var(--spacing) * 3.5);
}
.game-row-links, .game-card-links {
  margin-top: calc(var(--spacing) * 3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.game-row-links a, .game-card-links a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-slate-200);
  background-color: var(--color-white);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: 0.7rem;
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-slate-600);
  text-decoration-line: none;
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-slate-300);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-slate-900);
    }
  }
}
.game-row-links .ui-icon, .game-card-links .ui-icon {
  height: calc(var(--spacing) * 3.5);
  width: calc(var(--spacing) * 3.5);
}
.game-card {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.game-card > h3 {
  margin-bottom: calc(var(--spacing) * 0);
}
.game-card > h3 + p {
  margin-top: calc(var(--spacing) * 2);
}
.game-card > p {
  flex: 1;
}
.game-card > .game-card-links {
  margin-top: calc(var(--spacing) * 4);
}
.game-chip-link {
  text-decoration-line: none;
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-sky-200);
    }
  }
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-sky-50);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-sky-800);
    }
  }
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1120px) {
  .brand-copy small {
    display: none;
  }
  .site-nav {
    gap: 0;
  }
  .site-nav > a {
    padding-left: .48rem;
    padding-right: .48rem;
    font-size: .76rem;
  }
  .user-menu-label {
    display: none;
  }
}
@media (max-width: 1020px) {
  .admin-topbar {
    grid-template-columns: 1fr auto;
  }
  .admin-topbar-context {
    display: none;
  }
  .admin-sidebar-toggle {
    display: grid;
  }
  .admin-topbar-actions > a:not(.admin-user-chip) span {
    display: none;
  }
  .admin-shell {
    grid-template-columns: 1fr;
  }
  .admin-nav {
    position: fixed;
    left: 0;
    top: 4rem;
    z-index: 200;
    width: min(290px,86vw);
    height: calc(100dvh - 4rem);
    transform: translateX(-102%);
    box-shadow: 24px 0 50px rgb(2 6 23 / .28);
    transition: transform .2s ease;
  }
  .admin-nav-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -.2rem 0 .65rem;
    padding: .55rem .35rem .7rem;
    border-bottom: 1px solid rgb(255 255 255 / .08);
  }
  .admin-nav-mobile-head strong {
    display: block;
    font-size: .78rem;
    color: white;
  }
  .admin-nav-mobile-head small {
    display: block;
    margin-top: .1rem;
    font-size: .62rem;
    color: #64748b;
  }
  .admin-nav-mobile-head button {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: .65rem;
    background: rgb(255 255 255 / .05);
    color: #cbd5e1;
  }
  .admin-nav-mobile-head button .ui-icon {
    width: 1rem;
    height: 1rem;
  }
  body.admin-nav-open {
    overflow: hidden;
  }
  body.admin-nav-open .admin-nav {
    transform: translateX(0);
  }
  body.admin-nav-open .admin-nav-backdrop {
    display: block;
    pointer-events: auto;
    opacity: 1;
  }
}
@media (max-width: 940px) {
  .topline {
    display: none;
  }
  .site-header {
    position: relative;
  }
  .header-inner {
    min-height: 70px;
    flex-wrap: wrap;
    gap: .65rem;
  }
  .brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .site-nav {
    display: none;
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: .25rem 0 .9rem;
  }
  .site-nav.open {
    display: flex;
  }
  .site-nav > a {
    justify-content: flex-start;
    gap: .65rem;
    padding: .7rem .8rem;
    font-size: .86rem;
  }
  .site-nav > a .ui-icon {
    display: block;
  }
  .site-nav > a.active::after {
    display: none;
  }
  .header-actions {
    margin-left: 0;
  }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-content {
    padding-bottom: 0;
  }
  .hero-visual {
    max-width: 460px;
  }
  .hero-floating-card-a {
    left: -1rem;
  }
  .hero-floating-card-b {
    right: -1rem;
  }
  .forum-row {
    grid-template-columns: minmax(0,1fr) 100px;
  }
  .forum-latest {
    display: none;
  }
  .topic-row {
    grid-template-columns: minmax(0,1fr) 135px;
  }
  .topic-row > :nth-child(2) {
    display: none;
  }
}
@media (max-width: 700px) {
  .container {
    padding-left: .8rem;
    padding-right: .8rem;
  }
  .brand-copy {
    display: none;
  }
  .header-actions {
    margin-left: auto;
  }
  .header-icon-button {
    width: 38px;
    height: 38px;
  }
  .user-menu-button {
    border-radius: 999px;
    padding: .2rem;
  }
  .user-menu-button .chevron {
    display: none;
  }
  .nav-toggle span {
    display: none;
  }
  .hero {
    padding-top: 2rem;
  }
  .hero h1 {
    font-size: clamp(2.25rem,11vw,3.1rem);
  }
  .hero-copy {
    font-size: 1rem;
    line-height: 1.7;
  }
  .hero-visual {
    padding-bottom: 2rem;
  }
  .hero-floating-card {
    display: none;
  }
  .hero-logo-card {
    border-radius: 1.5rem;
    padding: .75rem;
    transform: none;
  }
  .section {
    padding-top: 2.35rem;
    padding-bottom: 2.35rem;
  }
  .section-sm {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .section-header, .page-header-inner, .admin-titlebar {
    align-items: flex-start;
    flex-direction: column;
  }
  .section-link {
    align-self: flex-start;
  }
  .forum-row {
    grid-template-columns: 1fr;
  }
  .forum-counts {
    display: none;
  }
  .topic-row {
    grid-template-columns: 1fr;
  }
  .topic-row > .topic-meta {
    text-align: left;
  }
  .forum-post, .support-message {
    grid-template-columns: 1fr;
  }
  .post-user, .support-message .who {
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }
  .post-user .avatar {
    display: inline-grid;
    margin: 0 .5rem 0 0;
    vertical-align: middle;
  }
  .profile-head-inner {
    flex-direction: column;
  }
  .profile-stats {
    width: 100%;
  }
  .profile-header .avatar-xl {
    width: 100px;
    height: 100px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
  }
  .admin-content {
    padding: 1rem;
  }
  .admin-topbar {
    min-height: 4rem;
    padding-left: .7rem;
    padding-right: .7rem;
  }
  .admin-topbar-brand strong {
    font-size: .78rem;
  }
  .admin-topbar-brand small {
    display: none;
  }
  .admin-user-chip > span:last-child {
    display: none;
  }
  .admin-user-chip {
    padding-right: .25rem;
  }
  .permission-grid {
    grid-template-columns: 1fr;
  }
  .flash-stack {
    top: 84px;
    right: .7rem;
    width: calc(100% - 1.4rem);
  }
  .captcha-box {
    align-items: flex-start;
    flex-direction: column;
  }
  .captcha-box input {
    width: 100%;
  }
  .table-wrap {
    border-radius: .75rem;
  }
  .search-box {
    flex-direction: column;
  }
  .community-preview-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }
  .markdown-editor-head {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .markdown-editor-label {
    padding-bottom: .55rem;
  }
  .markdown-tabs {
    align-self: flex-start;
  }
  .markdown-toolbar {
    padding-left: .55rem;
    padding-right: .55rem;
  }
  .markdown-write-pane textarea {
    min-height: 220px;
    padding-left: .8rem;
    padding-right: .8rem;
  }
  .markdown-editor-compact .markdown-write-pane textarea {
    min-height: 160px;
  }
  .markdown-editor-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
    padding-left: .8rem;
    padding-right: .8rem;
  }
  .markdown-format-guide {
    grid-template-columns: 1fr;
  }
  .game-picker-selected {
    padding: .55rem;
  }
  .game-picker-tag {
    max-width: 100%;
  }
  .game-picker-dropdown {
    max-height: 17rem;
  }
  .game-picker-option {
    min-height: 3.25rem;
    padding: .7rem;
  }
  .hashtag-card-grid, .hashtag-member-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .auth-stage {
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .auth-panel {
    min-height: 0;
    border-radius: 1.5rem;
    padding: 1.25rem;
  }
  .form-page-layout, .board-page-layout, .community-post-layout, .praise-layout, .profile-layout, .profile-editor-grid, .support-dashboard, .ticket-layout {
    grid-template-columns: 1fr;
  }
  .form-page-aside, .board-page-aside, .community-post-sidebar, .praise-sidebar, .profile-sidebar, .profile-editor-sidebar, .ticket-sidebar {
    position: static;
  }
  .directory-search {
    flex-direction: column;
  }
  .member-grid {
    grid-template-columns: 1fr;
  }
  .responsive-table thead {
    display: none;
  }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
    display: block;
    width: 100%;
  }
  .responsive-table tr {
    border-top: 1px solid #e2e8f0;
    padding: .7rem .85rem;
  }
  .responsive-table tr:first-child {
    border-top: 0;
  }
  .responsive-table td {
    border: 0 !important;
    padding: .3rem 0 !important;
  }
  .responsive-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .1rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
  }
  .table-chevron {
    display: none !important;
  }
  .community-post-body {
    padding: 1.1rem;
  }
  .community-post-image {
    margin-left: 1.1rem;
    margin-right: 1.1rem;
    width: calc(100% - 2.2rem);
  }
  .post-author-banner {
    padding: .9rem 1rem;
  }
}
@media (max-width: 760px) {
  .manager-panel {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .manager-panel-head {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: white;
    padding: .9rem;
  }
  .manager-panel-head-tools {
    align-items: stretch;
    flex-direction: column;
  }
  .manager-search {
    width: 100%;
  }
  .manager-search input {
    min-width: 0;
    width: 100%;
  }
  .manager-table-wrap {
    overflow: visible;
  }
  .manager-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .manager-table thead {
    display: none;
  }
  .manager-table tbody {
    display: grid;
    gap: .75rem;
    padding: .75rem 0;
  }
  .manager-table tbody tr {
    display: block;
    overflow: hidden;
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 1px 2px rgb(15 23 42 / .05);
  }
  .manager-table tbody td {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(88px,28%) minmax(0,1fr);
    gap: .75rem;
    align-items: start;
    border: 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: .65rem .8rem !important;
    text-align: left !important;
    white-space: normal;
  }
  .manager-table tbody td:first-child {
    border-top: 0 !important;
  }
  .manager-table tbody td[data-label]::before {
    content: attr(data-label);
    padding-top: .08rem;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
  }
  .manager-table tbody td[colspan] {
    display: block;
    border-top: 0 !important;
  }
  .manager-table tbody td[colspan]::before {
    display: none;
  }
  .manager-table .table-primary > strong, .manager-table .table-primary > small, .manager-table .table-primary > span > strong, .manager-table .table-primary > span > small {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .manager-table .table-actions {
    justify-content: flex-start;
    white-space: normal;
  }
  .manager-table .table-actions form {
    display: inline-flex;
  }
  .manager-table .sort-chip {
    display: inline-flex;
    width: max-content;
  }
  .admin-titlebar > .button, .admin-titlebar > a.button {
    width: 100%;
    justify-content: center;
  }
  .manager-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .manager-stat {
    min-width: 0;
  }
  .steam-connect-row {
    align-items: stretch;
    flex-direction: column;
  }
  .steam-connect-row .button {
    width: 100%;
    justify-content: center;
  }
  .modal-layer {
    align-items: end;
    padding: .5rem;
  }
  .modal-card {
    max-height: calc(100dvh - 1rem);
    border-radius: 1.25rem;
  }
  .modal-head, .modal-form {
    padding-left: .9rem;
    padding-right: .9rem;
  }
  .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-left: -.9rem;
    margin-right: -.9rem;
    margin-bottom: -.9rem;
    padding: .8rem .9rem;
    background: white;
    border-top: 1px solid #e2e8f0;
  }
  .modal-actions .button {
    flex: 1;
    justify-content: center;
  }
  .game-select-grid {
    grid-template-columns: 1fr;
  }
  .game-row {
    align-items: flex-start;
  }
  .game-row-icon {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: .8rem;
  }
  .profile-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .profile-stats > * {
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .manager-stats {
    grid-template-columns: 1fr;
  }
  .manager-table tbody td {
    display: block;
  }
  .manager-table tbody td[data-label]::before {
    display: block;
    margin-bottom: .3rem;
  }
  .table-actions {
    flex-wrap: wrap;
  }
  .modal-actions {
    flex-direction: column-reverse;
  }
  .modal-actions .button {
    width: 100%;
  }
  .header-inner {
    padding-top: .45rem;
    padding-bottom: .45rem;
  }
  .hero-actions, .form-actions, .inline-actions {
    width: 100%;
  }
  .hero-actions .button, .form-actions > .button {
    width: 100%;
    justify-content: center;
  }
  .profile-stats {
    grid-template-columns: 1fr;
  }
  .markdown-tool-group {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  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: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@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-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@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-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@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-duration: initial;
      --tw-font-weight: 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-border-style: solid;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-leading: initial;
      --tw-tracking: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --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-divide-y-reverse: 0;
      --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-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-space-y-reverse: 0;
    }
  }
}