/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Playfair+Display:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Amiri:wght@400;700&family=Bebas+Neue&family=Pacifico&family=Cinzel:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Audiowide&family=VT323&family=IM+Fell+DW+Pica:ital@0;1&family=Bungee&family=Comfortaa:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&family=Press+Start+2P&family=Archivo+Black&family=Bowlby+One&family=Mochiy+Pop+One&family=Caveat:wght@400;500;600;700&family=Permanent+Marker&family=Bangers&display=swap");
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --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-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --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-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-violet-200: oklch(89.4% 0.057 293.283);
    --color-violet-300: oklch(81.1% 0.111 293.571);
    --color-violet-400: oklch(70.2% 0.183 293.541);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-rose-300: oklch(81% 0.117 11.638);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-300: oklch(87.1% 0.006 286.286);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-600: oklch(44.2% 0.017 285.786);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-zinc-950: oklch(14.1% 0.005 285.823);
    --color-neutral-950: oklch(14.5% 0 0);
    --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;
    --container-7xl: 80rem;
    --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);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-xs: 0.125rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-xl: 24px;
    --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);
    --color-memphis-black: #1a1a2e;
    --color-memphis-cream: #faf8f5;
    --color-memphis-pink: #e8879f;
    --color-surface: var(--tn-surface-panel-muted);
    --color-surface-card: var(--tn-surface-panel);
    --color-on-surface: #1a1a2e;
    --color-on-surface-muted: #6b6b7b;
    --color-on-surface-soft: #8a8a9a;
    --color-outline-variant: rgba(26, 26, 46, 0.18);
    --color-outline-hair: rgba(26, 26, 46, 0.08);
    --color-lab-blue: #4db8a8;
  }
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .\@container {
    container-type: inline-size;
  }
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .\!fixed {
    position: fixed !important;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .fixed\! {
    position: fixed !important;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .inset-y-6 {
    inset-block: calc(var(--spacing) * 6);
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .start\! {
    inset-inline-start: var(--spacing) !important;
  }
  .start-0 {
    inset-inline-start: calc(var(--spacing) * 0);
  }
  .start-3 {
    inset-inline-start: calc(var(--spacing) * 3);
  }
  .start-4 {
    inset-inline-start: calc(var(--spacing) * 4);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .end\! {
    inset-inline-end: var(--spacing) !important;
  }
  .end-0 {
    inset-inline-end: calc(var(--spacing) * 0);
  }
  .end-1 {
    inset-inline-end: calc(var(--spacing) * 1);
  }
  .end-2\.5 {
    inset-inline-end: calc(var(--spacing) * 2.5);
  }
  .end-5 {
    inset-inline-end: calc(var(--spacing) * 5);
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-full {
    top: 100%;
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-0\.5 {
    right: calc(var(--spacing) * 0.5);
  }
  .right-1 {
    right: calc(var(--spacing) * 1);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-3 {
    bottom: calc(var(--spacing) * 3);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-5 {
    bottom: calc(var(--spacing) * 5);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-full {
    bottom: 100%;
  }
  .-left-1 {
    left: calc(var(--spacing) * -1);
  }
  .-left-\[7px\] {
    left: calc(7px * -1);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-0\.5 {
    left: calc(var(--spacing) * 0.5);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .isolate {
    isolation: isolate;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-2147483647 {
    z-index: 2147483647;
  }
  .z-\[30\] {
    z-index: 30;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[70\] {
    z-index: 70;
  }
  .z-\[1000\] {
    z-index: 1000;
  }
  .z-\[var\(--z-modal\)\] {
    z-index: var(--z-modal);
  }
  .z-\[var\(--z-sticky\)\] {
    z-index: var(--z-sticky);
  }
  .z-\[var\(--z-toast\)\] {
    z-index: var(--z-toast);
  }
  .col-12 {
    grid-column: 12;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .col-start-2 {
    grid-column-start: 2;
  }
  .clear-left {
    clear: left;
  }
  .clear-right {
    clear: right;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .m-1 {
    margin: calc(var(--spacing) * 1);
  }
  .m-4 {
    margin: calc(var(--spacing) * 4);
  }
  .m-auto {
    margin: auto;
  }
  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }
  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-auto {
    margin-block: auto;
  }
  .ms-1 {
    margin-inline-start: calc(var(--spacing) * 1);
  }
  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }
  .me-1 {
    margin-inline-end: calc(var(--spacing) * 1);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-10 {
    margin-left: calc(var(--spacing) * 10);
  }
  .ml-auto {
    margin-left: auto;
  }
  .box-border {
    box-sizing: border-box;
  }
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .\!block {
    display: block !important;
  }
  .\!inline-block {
    display: inline-block !important;
  }
  .block {
    display: block;
  }
  .block\! {
    display: block !important;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .flow-root {
    display: flow-root;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .hidden\! {
    display: none !important;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-table {
    display: inline-table;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .table-caption {
    display: table-caption;
  }
  .table-cell {
    display: table-cell;
  }
  .table-column {
    display: table-column;
  }
  .table-column-group {
    display: table-column-group;
  }
  .table-footer-group {
    display: table-footer-group;
  }
  .table-header-group {
    display: table-header-group;
  }
  .table-row {
    display: table-row;
  }
  .table-row-group {
    display: table-row-group;
  }
  .field-sizing-content {
    field-sizing: content;
  }
  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }
  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }
  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }
  .size-24 {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-\[18px\] {
    height: 18px;
  }
  .h-\[32px\] {
    height: 32px;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .h-screen {
    height: 100vh;
  }
  .max-h-12 {
    max-height: calc(var(--spacing) * 12);
  }
  .max-h-20 {
    max-height: calc(var(--spacing) * 20);
  }
  .max-h-28 {
    max-height: calc(var(--spacing) * 28);
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }
  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }
  .max-h-\[28rem\] {
    max-height: 28rem;
  }
  .max-h-\[70vh\] {
    max-height: 70vh;
  }
  .max-h-\[85vh\] {
    max-height: 85vh;
  }
  .max-h-\[200px\] {
    max-height: 200px;
  }
  .max-h-\[400px\] {
    max-height: 400px;
  }
  .min-h-4 {
    min-height: calc(var(--spacing) * 4);
  }
  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }
  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }
  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }
  .min-h-\[44px\] {
    min-height: 44px;
  }
  .min-h-\[96px\] {
    min-height: 96px;
  }
  .min-h-\[140px\] {
    min-height: 140px;
  }
  .min-h-\[160px\] {
    min-height: 160px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .\!w-auto {
    width: auto !important;
  }
  .w-1 {
    width: calc(var(--spacing) * 1);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-\[20rem\] {
    width: 20rem;
  }
  .w-\[calc\(100\%-1\.5rem\)\] {
    width: calc(100% - 1.5rem);
  }
  .w-\[min\(92vw\,420px\)\] {
    width: min(92vw, 420px);
  }
  .w-\[min\(92vw\,560px\)\] {
    width: min(92vw, 560px);
  }
  .w-\[min\(92vw\,640px\)\] {
    width: min(92vw, 640px);
  }
  .w-\[min\(92vw\,800px\)\] {
    width: min(92vw, 800px);
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-\[64px\] {
    max-width: 64px;
  }
  .max-w-\[90\%\] {
    max-width: 90%;
  }
  .max-w-\[150px\] {
    max-width: 150px;
  }
  .max-w-\[180px\] {
    max-width: 180px;
  }
  .max-w-\[200px\] {
    max-width: 200px;
  }
  .max-w-\[250px\] {
    max-width: 250px;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-\[320px\] {
    max-width: 320px;
  }
  .max-w-\[360px\] {
    max-width: 360px;
  }
  .max-w-\[1600px\] {
    max-width: 1600px;
  }
  .max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-\[14rem\] {
    min-width: 14rem;
  }
  .min-w-\[18px\] {
    min-width: 18px;
  }
  .min-w-\[18rem\] {
    min-width: 18rem;
  }
  .min-w-\[110px\] {
    min-width: 110px;
  }
  .min-w-\[200px\] {
    min-width: 200px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .caption-bottom {
    caption-side: bottom;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-\[calc\(100\%\+24px\)\] {
    --tw-translate-x: calc(100% + 24px);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-2 {
    --tw-translate-y: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .rotate-45 {
    rotate: 45deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-ping {
    animation: var(--animate-ping);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-col-resize {
    cursor: col-resize;
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .resize-y {
    resize: vertical;
  }
  .scroll-my-1 {
    scroll-margin-block: calc(var(--spacing) * 1);
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .list-none {
    list-style-type: none;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-\[120px_1fr\] {
    grid-template-columns: 120px 1fr;
  }
  .grid-cols-\[140px_1fr\] {
    grid-template-columns: 140px 1fr;
  }
  .grid-cols-\[140px_60px_1fr\] {
    grid-template-columns: 140px 60px 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-items-start {
    justify-items: start;
  }
  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1 {
    :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)));
    }
  }
  .space-y-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-12 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .space-x-0 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 0) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .gap-y-0 {
    row-gap: calc(var(--spacing) * 0);
  }
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .divide-y {
    :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)));
    }
  }
  .divide-\[var\(--tn-border-subtle\)\] {
    :where(& > :not(:last-child)) {
      border-color: var(--tn-border-subtle);
    }
  }
  .divide-zinc-100 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-zinc-100);
    }
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[var\(--tn-radius-lg\)\] {
    border-radius: var(--tn-radius-lg);
  }
  .rounded-\[var\(--tn-radius-md\)\] {
    border-radius: var(--tn-radius-md);
  }
  .rounded-\[var\(--tn-radius-sm\)\] {
    border-radius: var(--tn-radius-sm);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-xs {
    border-radius: var(--radius-xs);
  }
  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }
  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
  .rounded-r {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
  }
  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }
  .rounded-bl {
    border-bottom-left-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-s {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[color-mix\(in_srgb\,var\(--tn-accent\)_34\%\,transparent\)\] {
    border-color: var(--tn-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--tn-accent) 34%,transparent);
    }
  }
  .border-\[color-mix\(in_srgb\,var\(--tn-error\)_34\%\,transparent\)\] {
    border-color: var(--tn-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--tn-error) 34%,transparent);
    }
  }
  .border-\[color-mix\(in_srgb\,var\(--tn-error\)_38\%\,transparent\)\] {
    border-color: var(--tn-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--tn-error) 38%,transparent);
    }
  }
  .border-\[color-mix\(in_srgb\,var\(--tn-success\)_34\%\,transparent\)\] {
    border-color: var(--tn-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--tn-success) 34%,transparent);
    }
  }
  .border-\[color-mix\(in_srgb\,var\(--tn-success\)_38\%\,transparent\)\] {
    border-color: var(--tn-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--tn-success) 38%,transparent);
    }
  }
  .border-\[color-mix\(in_srgb\,var\(--tn-warning\)_34\%\,transparent\)\] {
    border-color: var(--tn-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--tn-warning) 34%,transparent);
    }
  }
  .border-\[color-mix\(in_srgb\,var\(--tn-warning\)_38\%\,transparent\)\] {
    border-color: var(--tn-warning);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb,var(--tn-warning) 38%,transparent);
    }
  }
  .border-\[var\(--tn-accent-primary\)\] {
    border-color: var(--tn-accent-primary);
  }
  .border-\[var\(--tn-border\)\] {
    border-color: var(--tn-border);
  }
  .border-\[var\(--tn-border-default\)\] {
    border-color: var(--tn-border-default);
  }
  .border-\[var\(--tn-border-subtle\)\] {
    border-color: var(--tn-border-subtle);
  }
  .border-\[var\(--tn-danger-primary\)\] {
    border-color: var(--tn-danger-primary);
  }
  .border-\[var\(--tn-danger-primary\)\]\/20 {
    border-color: var(--tn-danger-primary);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--tn-danger-primary) 20%, transparent);
    }
  }
  .border-\[var\(--tn-error\)\] {
    border-color: var(--tn-error);
  }
  .border-\[var\(--tn-error\)\]\/20 {
    border-color: var(--tn-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--tn-error) 20%, transparent);
    }
  }
  .border-\[var\(--tn-error\)\]\/30 {
    border-color: var(--tn-error);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--tn-error) 30%, transparent);
    }
  }
  .border-\[var\(--tn-error-soft\)\] {
    border-color: var(--tn-error-soft);
  }
  .border-\[var\(--tn-info\)\] {
    border-color: var(--tn-info);
  }
  .border-\[var\(--tn-info-primary\)\] {
    border-color: var(--tn-info-primary);
  }
  .border-\[var\(--tn-success\)\] {
    border-color: var(--tn-success);
  }
  .border-\[var\(--tn-success\)\]\/20 {
    border-color: var(--tn-success);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--tn-success) 20%, transparent);
    }
  }
  .border-\[var\(--tn-success-primary\)\] {
    border-color: var(--tn-success-primary);
  }
  .border-\[var\(--tn-success-soft\)\] {
    border-color: var(--tn-success-soft);
  }
  .border-\[var\(--tn-warning\)\] {
    border-color: var(--tn-warning);
  }
  .border-\[var\(--tn-warning-primary\)\] {
    border-color: var(--tn-warning-primary);
  }
  .border-\[var\(--tn-warning-soft\)\] {
    border-color: var(--tn-warning-soft);
  }
  .border-amber-500\/20 {
    border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }
  .border-black\/10 {
    border-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  .border-emerald-500\/20 {
    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-green-200 {
    border-color: var(--color-green-200);
  }
  .border-memphis-pink {
    border-color: var(--color-memphis-pink);
  }
  .border-outline-hair {
    border-color: var(--color-outline-hair);
  }
  .border-outline-variant {
    border-color: var(--color-outline-variant);
  }
  .border-outline-variant\/10 {
    border-color: color-mix(in srgb, rgba(26, 26, 46, 0.18) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-outline-variant) 10%, transparent);
    }
  }
  .border-outline-variant\/20 {
    border-color: color-mix(in srgb, rgba(26, 26, 46, 0.18) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-outline-variant) 20%, transparent);
    }
  }
  .border-outline-variant\/30 {
    border-color: color-mix(in srgb, rgba(26, 26, 46, 0.18) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-outline-variant) 30%, transparent);
    }
  }
  .border-outline-variant\/40 {
    border-color: color-mix(in srgb, rgba(26, 26, 46, 0.18) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-outline-variant) 40%, transparent);
    }
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-white\/10 {
    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);
    }
  }
  .border-zinc-100 {
    border-color: var(--color-zinc-100);
  }
  .border-zinc-200 {
    border-color: var(--color-zinc-200);
  }
  .border-zinc-200\/60 {
    border-color: color-mix(in srgb, oklch(92% 0.004 286.32) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-zinc-200) 60%, transparent);
    }
  }
  .border-zinc-300 {
    border-color: var(--color-zinc-300);
  }
  .bg-\[\#0d0d0f\] {
    background-color: #0d0d0f;
  }
  .bg-\[\#0d1117\] {
    background-color: #0d1117;
  }
  .bg-\[\#f6f8fa\] {
    background-color: #f6f8fa;
  }
  .bg-\[color-mix\(in_srgb\,var\(--tn-accent\)_10\%\,transparent\)\] {
    background-color: var(--tn-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--tn-accent) 10%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--tn-accent\)_12\%\,transparent\)\] {
    background-color: var(--tn-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--tn-accent) 12%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--tn-accent-primary\)_14\%\,transparent\)\] {
    background-color: var(--tn-accent-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--tn-accent-primary) 14%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--tn-bg\)_72\%\,transparent\)\] {
    background-color: var(--tn-bg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--tn-bg) 72%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--tn-error\)_12\%\,transparent\)\] {
    background-color: var(--tn-error);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--tn-error) 12%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--tn-success\)_12\%\,transparent\)\] {
    background-color: var(--tn-success);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--tn-success) 12%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--tn-warning\)_10\%\,transparent\)\] {
    background-color: var(--tn-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--tn-warning) 10%,transparent);
    }
  }
  .bg-\[color-mix\(in_srgb\,var\(--tn-warning\)_12\%\,transparent\)\] {
    background-color: var(--tn-warning);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb,var(--tn-warning) 12%,transparent);
    }
  }
  .bg-\[var\(--tn-accent\)\] {
    background-color: var(--tn-accent);
  }
  .bg-\[var\(--tn-accent-primary\)\] {
    background-color: var(--tn-accent-primary);
  }
  .bg-\[var\(--tn-accent-primary\)\]\/10 {
    background-color: var(--tn-accent-primary);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--tn-accent-primary) 10%, transparent);
    }
  }
  .bg-\[var\(--tn-accent-primary-soft\)\] {
    background-color: var(--tn-accent-primary-soft);
  }
  .bg-\[var\(--tn-bg-inset\)\] {
    background-color: var(--tn-bg-inset);
  }
  .bg-\[var\(--tn-bg-overlay\)\] {
    background-color: var(--tn-bg-overlay);
  }
  .bg-\[var\(--tn-bg-raised\)\] {
    background-color: var(--tn-bg-raised);
  }
  .bg-\[var\(--tn-danger-soft\)\] {
    background-color: var(--tn-danger-soft);
  }
  .bg-\[var\(--tn-error\)\] {
    background-color: var(--tn-error);
  }
  .bg-\[var\(--tn-error-soft\)\] {
    background-color: var(--tn-error-soft);
  }
  .bg-\[var\(--tn-info-soft\)\] {
    background-color: var(--tn-info-soft);
  }
  .bg-\[var\(--tn-success\)\] {
    background-color: var(--tn-success);
  }
  .bg-\[var\(--tn-success-soft\)\] {
    background-color: var(--tn-success-soft);
  }
  .bg-\[var\(--tn-surface-code\)\] {
    background-color: var(--tn-surface-code);
  }
  .bg-\[var\(--tn-surface-elevated\)\] {
    background-color: var(--tn-surface-elevated);
  }
  .bg-\[var\(--tn-surface-inset\)\] {
    background-color: var(--tn-surface-inset);
  }
  .bg-\[var\(--tn-surface-inset\)\]\/20 {
    background-color: var(--tn-surface-inset);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--tn-surface-inset) 20%, transparent);
    }
  }
  .bg-\[var\(--tn-surface-inset\)\]\/30 {
    background-color: var(--tn-surface-inset);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--tn-surface-inset) 30%, transparent);
    }
  }
  .bg-\[var\(--tn-surface-inset\)\]\/50 {
    background-color: var(--tn-surface-inset);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--tn-surface-inset) 50%, transparent);
    }
  }
  .bg-\[var\(--tn-surface-panel\)\] {
    background-color: var(--tn-surface-panel);
  }
  .bg-\[var\(--tn-warning\)\] {
    background-color: var(--tn-warning);
  }
  .bg-\[var\(--tn-warning-soft\)\] {
    background-color: var(--tn-warning-soft);
  }
  .bg-amber-500\/10 {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-blue-700 {
    background-color: var(--color-blue-700);
  }
  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }
  .bg-emerald-500\/10 {
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }
  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
  .bg-gray-700 {
    background-color: var(--color-gray-700);
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-memphis-cream {
    background-color: var(--color-memphis-cream);
  }
  .bg-memphis-pink {
    background-color: var(--color-memphis-pink);
  }
  .bg-neutral-950 {
    background-color: var(--color-neutral-950);
  }
  .bg-outline-variant\/40 {
    background-color: color-mix(in srgb, rgba(26, 26, 46, 0.18) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-outline-variant) 40%, transparent);
    }
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-surface {
    background-color: var(--color-surface);
  }
  .bg-surface-card {
    background-color: var(--color-surface-card);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-violet-500 {
    background-color: var(--color-violet-500);
  }
  .bg-violet-600 {
    background-color: var(--color-violet-600);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/5 {
    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);
    }
  }
  .bg-white\/10 {
    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);
    }
  }
  .bg-white\/80 {
    background-color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .bg-white\/90 {
    background-color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .bg-white\/\[0\.01\] {
    background-color: color-mix(in srgb, #fff 1%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 1%, transparent);
    }
  }
  .bg-zinc-50 {
    background-color: var(--color-zinc-50);
  }
  .bg-zinc-200 {
    background-color: var(--color-zinc-200);
  }
  .bg-zinc-800 {
    background-color: var(--color-zinc-800);
  }
  .bg-zinc-900 {
    background-color: var(--color-zinc-900);
  }
  .bg-zinc-950 {
    background-color: var(--color-zinc-950);
  }
  .bg-zinc-950\/40 {
    background-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-zinc-950) 40%, transparent);
    }
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-transparent {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .mask-repeat {
    mask-repeat: repeat;
  }
  .fill-black {
    fill: var(--color-black);
  }
  .fill-current {
    fill: currentcolor;
  }
  .stroke-white {
    stroke: var(--color-white);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-top {
    object-position: top;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-0\.5 {
    padding: calc(var(--spacing) * 0.5);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .pe-8 {
    padding-inline-end: calc(var(--spacing) * 8);
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }
  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-justify {
    text-align: justify;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-start {
    text-align: start;
  }
  .indent-2 {
    text-indent: calc(var(--spacing) * 2);
  }
  .indent-4 {
    text-indent: calc(var(--spacing) * 4);
  }
  .align-bottom {
    vertical-align: bottom;
  }
  .align-middle {
    vertical-align: middle;
  }
  .font-\[inherit\] {
    font-family: inherit;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[24px\] {
    font-size: 24px;
  }
  .text-\[32px\] {
    font-size: 32px;
  }
  .text-\[40px\] {
    font-size: 40px;
  }
  .text-\[48px\] {
    font-size: 48px;
  }
  .text-\[64px\] {
    font-size: 64px;
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.06em\] {
    --tw-tracking: 0.06em;
    letter-spacing: 0.06em;
  }
  .tracking-\[0\.08em\] {
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
  }
  .tracking-\[0\.12em\] {
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
  }
  .tracking-\[0\.14em\] {
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[\#57606a\] {
    color: #57606a;
  }
  .text-\[\#e5e5e5\] {
    color: #e5e5e5;
  }
  .text-\[var\(--tn-accent\)\] {
    color: var(--tn-accent);
  }
  .text-\[var\(--tn-accent-primary\)\] {
    color: var(--tn-accent-primary);
  }
  .text-\[var\(--tn-color-ink\)\] {
    color: var(--tn-color-ink);
  }
  .text-\[var\(--tn-color-paper\)\] {
    color: var(--tn-color-paper);
  }
  .text-\[var\(--tn-danger-primary\)\] {
    color: var(--tn-danger-primary);
  }
  .text-\[var\(--tn-error\)\] {
    color: var(--tn-error);
  }
  .text-\[var\(--tn-font-size-base\)\] {
    color: var(--tn-font-size-base);
  }
  .text-\[var\(--tn-font-size-md\)\] {
    color: var(--tn-font-size-md);
  }
  .text-\[var\(--tn-font-size-micro\)\] {
    color: var(--tn-font-size-micro);
  }
  .text-\[var\(--tn-font-size-sm\)\] {
    color: var(--tn-font-size-sm);
  }
  .text-\[var\(--tn-font-size-xs\)\] {
    color: var(--tn-font-size-xs);
  }
  .text-\[var\(--tn-info\)\] {
    color: var(--tn-info);
  }
  .text-\[var\(--tn-info-primary\)\] {
    color: var(--tn-info-primary);
  }
  .text-\[var\(--tn-pill-accent-fg\)\] {
    color: var(--tn-pill-accent-fg);
  }
  .text-\[var\(--tn-pill-error-fg\)\] {
    color: var(--tn-pill-error-fg);
  }
  .text-\[var\(--tn-pill-info-fg\)\] {
    color: var(--tn-pill-info-fg);
  }
  .text-\[var\(--tn-pill-success-fg\)\] {
    color: var(--tn-pill-success-fg);
  }
  .text-\[var\(--tn-pill-warning-fg\)\] {
    color: var(--tn-pill-warning-fg);
  }
  .text-\[var\(--tn-success\)\] {
    color: var(--tn-success);
  }
  .text-\[var\(--tn-success-primary\)\] {
    color: var(--tn-success-primary);
  }
  .text-\[var\(--tn-text-code\)\] {
    color: var(--tn-text-code);
  }
  .text-\[var\(--tn-text-default\)\] {
    color: var(--tn-text-default);
  }
  .text-\[var\(--tn-text-inverse\)\] {
    color: var(--tn-text-inverse);
  }
  .text-\[var\(--tn-text-muted\)\] {
    color: var(--tn-text-muted);
  }
  .text-\[var\(--tn-text-on-accent\)\] {
    color: var(--tn-text-on-accent);
  }
  .text-\[var\(--tn-text-primary\)\] {
    color: var(--tn-text-primary);
  }
  .text-\[var\(--tn-text-secondary\)\] {
    color: var(--tn-text-secondary);
  }
  .text-\[var\(--tn-text-soft\)\] {
    color: var(--tn-text-soft);
  }
  .text-\[var\(--tn-warning\)\] {
    color: var(--tn-warning);
  }
  .text-\[var\(--tn-warning-primary\)\] {
    color: var(--tn-warning-primary);
  }
  .text-amber-500 {
    color: var(--color-amber-500);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-current {
    color: currentcolor;
  }
  .text-emerald-500 {
    color: var(--color-emerald-500);
  }
  .text-emerald-700 {
    color: var(--color-emerald-700);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-inherit {
    color: inherit;
  }
  .text-lab-blue {
    color: var(--color-lab-blue);
  }
  .text-memphis-pink {
    color: var(--color-memphis-pink);
  }
  .text-on-surface {
    color: var(--color-on-surface);
  }
  .text-on-surface-muted {
    color: var(--color-on-surface-muted);
  }
  .text-on-surface-muted\/60 {
    color: color-mix(in srgb, #6b6b7b 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-surface-muted) 60%, transparent);
    }
  }
  .text-on-surface-soft {
    color: var(--color-on-surface-soft);
  }
  .text-on-surface-soft\/40 {
    color: color-mix(in srgb, #8a8a9a 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-on-surface-soft) 40%, transparent);
    }
  }
  .text-outline-variant {
    color: var(--color-outline-variant);
  }
  .text-outline-variant\/40 {
    color: color-mix(in srgb, rgba(26, 26, 46, 0.18) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-outline-variant) 40%, transparent);
    }
  }
  .text-red-300 {
    color: var(--color-red-300);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-violet-400 {
    color: var(--color-violet-400);
  }
  .text-violet-500 {
    color: var(--color-violet-500);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-zinc-100 {
    color: var(--color-zinc-100);
  }
  .text-zinc-400 {
    color: var(--color-zinc-400);
  }
  .text-zinc-500 {
    color: var(--color-zinc-500);
  }
  .text-zinc-600 {
    color: var(--color-zinc-600);
  }
  .text-zinc-700 {
    color: var(--color-zinc-700);
  }
  .text-zinc-900 {
    color: var(--color-zinc-900);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .diagonal-fractions {
    --tw-numeric-fraction: diagonal-fractions;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .lining-nums {
    --tw-numeric-figure: lining-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .oldstyle-nums {
    --tw-numeric-figure: oldstyle-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .proportional-nums {
    --tw-numeric-spacing: proportional-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .slashed-zero {
    --tw-slashed-zero: slashed-zero;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .stacked-fractions {
    --tw-numeric-fraction: stacked-fractions;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tabular-nums {
    --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,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .no-underline {
    text-decoration-line: none;
  }
  .overline {
    text-decoration-line: overline;
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .\[color-scheme\:dark\] {
    color-scheme: dark;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --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);
  }
  .shadow-\[var\(--shadow-lg\)\] {
    --tw-shadow: var(--shadow-lg);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[var\(--shadow-md\)\] {
    --tw-shadow: var(--shadow-md);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[var\(--shadow-overlay\)\] {
    --tw-shadow: var(--shadow-overlay);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[var\(--tn-shadow-xl\)\] {
    --tw-shadow: var(--tn-shadow-xl);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --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);
  }
  .shadow-md {
    --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);
  }
  .shadow-sm {
    --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);
  }
  .shadow-xl {
    --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);
  }
  .shadow-xs {
    --tw-shadow: 0 1px 2px 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);
  }
  .shadow\/unified {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-0 {
    --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);
  }
  .ring-1 {
    --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);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-\[var\(--tn-focus-ring\)\] {
    --tw-ring-color: var(--tn-focus-ring);
  }
  .ring-black\/5 {
    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }
  .ring-emerald-500 {
    --tw-ring-color: var(--color-emerald-500);
  }
  .ring-gray-500 {
    --tw-ring-color: var(--color-gray-500);
  }
  .ring-zinc-400 {
    --tw-ring-color: var(--color-zinc-400);
  }
  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .ring-offset-white {
    --tw-ring-offset-color: var(--color-white);
  }
  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -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,);
  }
  .backdrop-blur-sm {
    --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,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    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));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    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));
  }
  .transition-none {
    transition-property: none;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-1000 {
    --tw-duration: 1000ms;
    transition-duration: 1000ms;
  }
  .ease-\[var\(--ease-spring\)\] {
    --tw-ease: var(--ease-spring);
    transition-timing-function: var(--ease-spring);
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .ring-inset {
    --tw-ring-inset: inset;
  }
  .group-open\:rotate-180 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      rotate: 180deg;
    }
  }
  .group-open\:text-memphis-pink {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      color: var(--color-memphis-pink);
    }
  }
  .group-open\/security-notice\:rotate-180 {
    &:is(:where(.group\/security-notice):is([open], :popover-open, :open) *) {
      rotate: 180deg;
    }
  }
  .group-hover\:text-zinc-600 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-zinc-600);
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/row\:opacity-100 {
    &:is(:where(.group\/row):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .file\:mr-4 {
    &::file-selector-button {
      margin-right: calc(var(--spacing) * 4);
    }
  }
  .file\:rounded-lg {
    &::file-selector-button {
      border-radius: var(--radius-lg);
    }
  }
  .file\:border {
    &::file-selector-button {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .file\:border-\[var\(--tn-border-subtle\)\] {
    &::file-selector-button {
      border-color: var(--tn-border-subtle);
    }
  }
  .file\:bg-\[var\(--tn-surface-inset\)\] {
    &::file-selector-button {
      background-color: var(--tn-surface-inset);
    }
  }
  .file\:px-4 {
    &::file-selector-button {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .file\:py-2 {
    &::file-selector-button {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .file\:text-sm {
    &::file-selector-button {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .file\:font-semibold {
    &::file-selector-button {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
  }
  .file\:text-\[var\(--tn-text-default\)\] {
    &::file-selector-button {
      color: var(--tn-text-default);
    }
  }
  .placeholder\:text-\[var\(--tn-text-muted\)\] {
    &::placeholder {
      color: var(--tn-text-muted);
    }
  }
  .placeholder\:text-zinc-400 {
    &::placeholder {
      color: var(--color-zinc-400);
    }
  }
  .backdrop\:bg-\[color-mix\(in_srgb\,black_55\%\,transparent\)\] {
    &::backdrop {
      background-color: color-mix(in srgb,black 55%,transparent);
    }
  }
  .backdrop\:bg-black\/50 {
    &::backdrop {
      background-color: color-mix(in srgb, #000 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
      }
    }
  }
  .last\:border-0 {
    &:last-child {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .focus-within\:opacity-100 {
    &:focus-within {
      opacity: 100%;
    }
  }
  .hover\:w-64 {
    &:hover {
      @media (hover: hover) {
        width: calc(var(--spacing) * 64);
      }
    }
  }
  .hover\:border-\[var\(--tn-border-hover\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--tn-border-hover);
      }
    }
  }
  .hover\:border-\[var\(--tn-danger\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--tn-danger);
      }
    }
  }
  .hover\:border-memphis-pink\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #e8879f 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-memphis-pink) 40%, transparent);
        }
      }
    }
  }
  .hover\:border-zinc-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-zinc-300);
      }
    }
  }
  .hover\:bg-\[\#ebeff2\] {
    &:hover {
      @media (hover: hover) {
        background-color: #ebeff2;
      }
    }
  }
  .hover\:bg-\[color-mix\(in_srgb\,var\(--tn-accent\)_6\%\,transparent\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-accent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in srgb,var(--tn-accent) 6%,transparent);
        }
      }
    }
  }
  .hover\:bg-\[var\(--tn-accent-primary-strong\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-accent-primary-strong);
      }
    }
  }
  .hover\:bg-\[var\(--tn-danger-soft\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-danger-soft);
      }
    }
  }
  .hover\:bg-\[var\(--tn-error\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-error);
      }
    }
  }
  .hover\:bg-\[var\(--tn-error-soft\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-error-soft);
      }
    }
  }
  .hover\:bg-\[var\(--tn-success-soft\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-success-soft);
      }
    }
  }
  .hover\:bg-\[var\(--tn-surface-inset\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-surface-inset);
      }
    }
  }
  .hover\:bg-\[var\(--tn-surface-panel\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-surface-panel);
      }
    }
  }
  .hover\:bg-\[var\(--tn-surface-panel-muted\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-surface-panel-muted);
      }
    }
  }
  .hover\:bg-\[var\(--tn-surface-subtle\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-surface-subtle);
      }
    }
  }
  .hover\:bg-\[var\(--tn-warning\)\]\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-warning);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--tn-warning) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-\[var\(--tn-warning-soft\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--tn-warning-soft);
      }
    }
  }
  .hover\:bg-surface-card {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-surface-card);
      }
    }
  }
  .hover\:bg-white\/\[0\.01\] {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 1%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 1%, transparent);
        }
      }
    }
  }
  .hover\:bg-zinc-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-zinc-50);
      }
    }
  }
  .hover\:bg-zinc-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-zinc-100);
      }
    }
  }
  .hover\:text-\[var\(--tn-accent-hover\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--tn-accent-hover);
      }
    }
  }
  .hover\:text-\[var\(--tn-accent-primary\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--tn-accent-primary);
      }
    }
  }
  .hover\:text-\[var\(--tn-danger\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--tn-danger);
      }
    }
  }
  .hover\:text-\[var\(--tn-error\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--tn-error);
      }
    }
  }
  .hover\:text-\[var\(--tn-text-default\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--tn-text-default);
      }
    }
  }
  .hover\:text-\[var\(--tn-text-inverse\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--tn-text-inverse);
      }
    }
  }
  .hover\:text-\[var\(--tn-text-primary\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--tn-text-primary);
      }
    }
  }
  .hover\:text-on-surface {
    &:hover {
      @media (hover: hover) {
        color: var(--color-on-surface);
      }
    }
  }
  .hover\:text-rose-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-rose-500);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:text-zinc-600 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-zinc-600);
      }
    }
  }
  .hover\:text-zinc-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-zinc-800);
      }
    }
  }
  .hover\:text-zinc-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-zinc-900);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-80 {
    &:hover {
      @media (hover: hover) {
        opacity: 80%;
      }
    }
  }
  .hover\:opacity-90 {
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .hover\:shadow-sm {
    &: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);
      }
    }
  }
  .hover\:shadow-xl {
    &:hover {
      @media (hover: hover) {
        --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);
      }
    }
  }
  .hover\:file\:bg-\[var\(--tn-surface-panel\)\] {
    &:hover {
      @media (hover: hover) {
        &::file-selector-button {
          background-color: var(--tn-surface-panel);
        }
      }
    }
  }
  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .focus\:fixed {
    &:focus {
      position: fixed;
    }
  }
  .focus\:start-2 {
    &:focus {
      inset-inline-start: calc(var(--spacing) * 2);
    }
  }
  .focus\:top-2 {
    &:focus {
      top: calc(var(--spacing) * 2);
    }
  }
  .focus\:z-50 {
    &:focus {
      z-index: 50;
    }
  }
  .focus\:rounded-md {
    &:focus {
      border-radius: var(--radius-md);
    }
  }
  .focus\:border-\[var\(--tn-accent-primary\)\] {
    &:focus {
      border-color: var(--tn-accent-primary);
    }
  }
  .focus\:px-3 {
    &:focus {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .focus\:py-1\.5 {
    &:focus {
      padding-block: calc(var(--spacing) * 1.5);
    }
  }
  .focus\:text-sm {
    &:focus {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .focus\:font-medium {
    &:focus {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
  }
  .focus\:text-zinc-950 {
    &:focus {
      color: var(--color-zinc-950);
    }
  }
  .focus\:opacity-100 {
    &:focus {
      opacity: 100%;
    }
  }
  .focus\:ring-1 {
    &:focus {
      --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);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-\[var\(--tn-focus-ring\)\] {
    &:focus {
      --tw-ring-color: var(--tn-focus-ring);
    }
  }
  .focus\:ring-\[var\(--tn-focus-ring\)\]\/20 {
    &:focus {
      --tw-ring-color: var(--tn-focus-ring);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--tn-focus-ring) 20%, transparent);
      }
    }
  }
  .focus\:ring-offset-2 {
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .focus-visible\:ring-2 {
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus-visible\:ring-\[var\(--tn-focus-ring\)\] {
    &:focus-visible {
      --tw-ring-color: var(--tn-focus-ring);
    }
  }
  .focus-visible\:ring-offset-2 {
    &:focus-visible {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }
  .focus-visible\:outline-2 {
    &:focus-visible {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
  }
  .focus-visible\:outline-offset-2 {
    &:focus-visible {
      outline-offset: 2px;
    }
  }
  .focus-visible\:outline-\[var\(--tn-accent-primary\)\] {
    &:focus-visible {
      outline-color: var(--tn-accent-primary);
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-30 {
    &:disabled {
      opacity: 30%;
    }
  }
  .disabled\:opacity-40 {
    &:disabled {
      opacity: 40%;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .disabled\:opacity-60 {
    &:disabled {
      opacity: 60%;
    }
  }
  .disabled\:hover\:text-zinc-400 {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          color: var(--color-zinc-400);
        }
      }
    }
  }
  .sm\:right-6 {
    @media (width >= 40rem) {
      right: calc(var(--spacing) * 6);
    }
  }
  .sm\:bottom-6 {
    @media (width >= 40rem) {
      bottom: calc(var(--spacing) * 6);
    }
  }
  .sm\:left-auto {
    @media (width >= 40rem) {
      left: auto;
    }
  }
  .sm\:col-span-1 {
    @media (width >= 40rem) {
      grid-column: span 1 / span 1;
    }
  }
  .sm\:col-span-2 {
    @media (width >= 40rem) {
      grid-column: span 2 / span 2;
    }
  }
  .sm\:w-56 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 56);
    }
  }
  .sm\:max-w-md {
    @media (width >= 40rem) {
      max-width: var(--container-md);
    }
  }
  .sm\:translate-x-0 {
    @media (width >= 40rem) {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-4 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-\[auto_minmax\(0\,1fr\)\] {
    @media (width >= 40rem) {
      grid-template-columns: auto minmax(0,1fr);
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:items-start {
    @media (width >= 40rem) {
      align-items: flex-start;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:justify-end {
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .sm\:p-5 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .sm\:p-7 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 7);
    }
  }
  .sm\:px-7 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 7);
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:col-span-3 {
    @media (width >= 48rem) {
      grid-column: span 3 / span 3;
    }
  }
  .md\:col-span-4 {
    @media (width >= 48rem) {
      grid-column: span 4 / span 4;
    }
  }
  .md\:col-span-6 {
    @media (width >= 48rem) {
      grid-column: span 6 / span 6;
    }
  }
  .md\:col-span-8 {
    @media (width >= 48rem) {
      grid-column: span 8 / span 8;
    }
  }
  .md\:col-span-12 {
    @media (width >= 48rem) {
      grid-column: span 12 / span 12;
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:inline-flex {
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
  .md\:grid-cols-1 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-5 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-6 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-12 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .lg\:sticky {
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .lg\:top-6 {
    @media (width >= 64rem) {
      top: calc(var(--spacing) * 6);
    }
  }
  .lg\:col-span-1 {
    @media (width >= 64rem) {
      grid-column: span 1 / span 1;
    }
  }
  .lg\:col-span-2 {
    @media (width >= 64rem) {
      grid-column: span 2 / span 2;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .lg\:col-span-7 {
    @media (width >= 64rem) {
      grid-column: span 7 / span 7;
    }
  }
  .lg\:mt-0 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:w-auto {
    @media (width >= 64rem) {
      width: auto;
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-5 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[1\.4fr_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 1.4fr 1fr;
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:items-end {
    @media (width >= 64rem) {
      align-items: flex-end;
    }
  }
  .lg\:justify-between {
    @media (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .dark\:divide-zinc-900 {
    @media (prefers-color-scheme: dark) {
      :where(& > :not(:last-child)) {
        border-color: var(--color-zinc-900);
      }
    }
  }
  .dark\:border-zinc-600 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-zinc-600);
    }
  }
  .dark\:border-zinc-700 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-zinc-700);
    }
  }
  .dark\:border-zinc-800 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-zinc-800);
    }
  }
  .dark\:border-zinc-800\/60 {
    @media (prefers-color-scheme: dark) {
      border-color: color-mix(in srgb, oklch(27.4% 0.006 286.033) 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-zinc-800) 60%, transparent);
      }
    }
  }
  .dark\:border-zinc-900 {
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-zinc-900);
    }
  }
  .dark\:bg-zinc-700 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-zinc-700);
    }
  }
  .dark\:bg-zinc-800 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-zinc-800);
    }
  }
  .dark\:bg-zinc-800\/50 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(27.4% 0.006 286.033) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);
      }
    }
  }
  .dark\:bg-zinc-900 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-zinc-900);
    }
  }
  .dark\:bg-zinc-900\/50 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(21% 0.006 285.885) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-zinc-900) 50%, transparent);
      }
    }
  }
  .dark\:bg-zinc-950 {
    @media (prefers-color-scheme: dark) {
      background-color: var(--color-zinc-950);
    }
  }
  .dark\:bg-zinc-950\/80 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 80%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-zinc-950) 80%, transparent);
      }
    }
  }
  .dark\:bg-zinc-950\/90 {
    @media (prefers-color-scheme: dark) {
      background-color: color-mix(in srgb, oklch(14.1% 0.005 285.823) 90%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-zinc-950) 90%, transparent);
      }
    }
  }
  .dark\:text-emerald-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-emerald-400);
    }
  }
  .dark\:text-red-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-red-400);
    }
  }
  .dark\:text-zinc-50 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-zinc-50);
    }
  }
  .dark\:text-zinc-100 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-zinc-100);
    }
  }
  .dark\:text-zinc-200 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-zinc-200);
    }
  }
  .dark\:text-zinc-300 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-zinc-300);
    }
  }
  .dark\:text-zinc-400 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-zinc-400);
    }
  }
  .dark\:text-zinc-500 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-zinc-500);
    }
  }
  .dark\:text-zinc-700 {
    @media (prefers-color-scheme: dark) {
      color: var(--color-zinc-700);
    }
  }
  .dark\:ring-offset-zinc-950 {
    @media (prefers-color-scheme: dark) {
      --tw-ring-offset-color: var(--color-zinc-950);
    }
  }
  .dark\:group-hover\:text-zinc-300 {
    @media (prefers-color-scheme: dark) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--color-zinc-300);
        }
      }
    }
  }
  .dark\:placeholder\:text-zinc-600 {
    @media (prefers-color-scheme: dark) {
      &::placeholder {
        color: var(--color-zinc-600);
      }
    }
  }
  .dark\:hover\:bg-zinc-700 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-zinc-700);
        }
      }
    }
  }
  .dark\:hover\:bg-zinc-800 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-zinc-800);
        }
      }
    }
  }
  .dark\:hover\:bg-zinc-900 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-zinc-900);
        }
      }
    }
  }
  .dark\:hover\:text-zinc-50 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-zinc-50);
        }
      }
    }
  }
  .dark\:hover\:text-zinc-100 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-zinc-100);
        }
      }
    }
  }
  .dark\:hover\:text-zinc-200 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-zinc-200);
        }
      }
    }
  }
  .dark\:hover\:text-zinc-300 {
    @media (prefers-color-scheme: dark) {
      &:hover {
        @media (hover: hover) {
          color: var(--color-zinc-300);
        }
      }
    }
  }
  .print\:hidden {
    @media print {
      display: none;
    }
  }
  .\[\&\:\:-webkit-details-marker\]\:hidden {
    &::-webkit-details-marker {
      display: none;
    }
  }
  .\[\&\:has\(li\)\]\:flex {
    &:has(li) {
      display: flex;
    }
  }
}
:root {
  --tn-color-ink: #1a1a2e;
  --tn-color-paper: #fffef7;
  --tn-color-cream: #faf8f5;
  --tn-color-cream-strong: #f0ece8;
  --tn-color-muted: #5e5e6c;
  --tn-color-soft: #6b6b7b;
  --tn-color-pink: #e8879f;
  --tn-color-pink-soft: #f5b5c4;
  --tn-color-pink-strong: #b04968;
  --tn-color-teal: #4db8a8;
  --tn-color-teal-soft: #7fcfc3;
  --tn-color-teal-strong: #3a9a8c;
  --tn-color-yellow: #f5d76e;
  --tn-color-yellow-soft: #f9e5a0;
  --tn-color-coral: #e8a07a;
  --tn-color-purple: #9b7cc4;
  --tn-color-purple-soft: #c4b0e0;
  --tn-color-danger: #c0392b;
  --tn-color-danger-soft: #fde8e6;
  --tn-color-warning: #c0860e;
  --tn-color-warning-soft: #fdf3d0;
  --tn-color-success-soft: #c8ede9;
  --tn-color-done-soft: #e8dffa;
  --tn-color-ink-soft: #2c2c45;
  --tn-color-paper-warm: #fffcf3;
  --tn-color-ink-rgb: 26 26 46;
  --tn-color-paper-rgb: 255 254 247;
  --tn-color-pink-rgb: 232 135 159;
  --tn-color-teal-rgb: 77 184 168;
  --tn-color-yellow-rgb: 245 215 110;
  --tn-color-purple-rgb: 155 124 196;
  --tn-surface-canvas: var(--tn-color-paper);
  --tn-surface-overlay: var(--tn-color-paper);
  --tn-surface-subtle: var(--tn-color-cream);
  --tn-surface-inset: var(--tn-color-cream-strong);
  --tn-surface-panel: var(--tn-color-paper);
  --tn-surface-panel-muted: var(--tn-color-cream);
  --tn-surface-panel-strong: var(--tn-color-cream-strong);
  --tn-surface-soft: var(--tn-color-cream);
  --tn-surface-elevated: var(--tn-color-paper-warm);
  --tn-surface-footer: var(--tn-surface-panel-muted);
  --tn-surface-footer-muted: var(--tn-color-ink-soft);
  --tn-surface-card: var(--tn-surface-panel);
  --tn-surface-muted: var(--tn-surface-panel-muted);
  --tn-color-accent-soft: var(--tn-warning-soft);
  --tn-border-default: var(--tn-color-ink);
  --tn-border-muted: rgb(var(--tn-color-ink-rgb) / 0.18);
  --tn-border-subtle: rgb(var(--tn-color-ink-rgb) / 0.18);
  --tn-border-strong: var(--tn-color-ink);
  --tn-border-width-heavy: 3px;
  --tn-border-heavy: var(--tn-border-width-heavy) solid var(--tn-border-strong);
  --tn-text-default: var(--tn-color-ink);
  --tn-text-muted: var(--tn-color-muted);
  --tn-text-soft: var(--tn-color-soft);
  --tn-text-secondary: #4b5563;
  --tn-text-inverse: var(--tn-color-paper);
  --tn-text-footer: var(--tn-color-paper);
  --tn-text-footer-muted: rgb(var(--tn-color-paper-rgb) / 0.72);
  --tn-success-text: var(--tn-pill-success-fg);
  --tn-warning-text: var(--tn-pill-warning-fg);
  --tn-error-text: var(--tn-pill-error-fg);
  --tn-accent-primary: var(--tn-color-pink);
  --tn-accent-primary-strong: var(--tn-color-pink-strong);
  --tn-accent-primary-soft: var(--tn-color-pink-soft);
  --tn-accent-focus: rgb(var(--tn-color-pink-rgb) / 0.22);
  --tn-accent-text: var(--tn-color-pink-strong);
  --tn-focus-ring: #2563eb;
  --tn-focus-ring-offset: var(--tn-surface-canvas);
  --tn-focus-ring-width: 2px;
  --tn-accent-subtle: var(--tn-color-pink-soft);
  --tn-accent-muted: rgb(var(--tn-color-pink-rgb) / 0.45);
  --tn-success: var(--tn-color-teal);
  --tn-success-soft: var(--tn-color-success-soft);
  --tn-success-muted: var(--tn-color-success-soft);
  --tn-success-rgb: var(--tn-color-teal-rgb);
  --tn-error: var(--tn-color-danger);
  --tn-error-soft: var(--tn-color-danger-soft);
  --tn-error-muted: var(--tn-color-danger-soft);
  --tn-error-light: var(--tn-color-danger-soft);
  --tn-warning: var(--tn-color-warning);
  --tn-warning-soft: var(--tn-color-warning-soft);
  --tn-info: #2563eb;
  --tn-info-soft: rgb(37 99 235 / 0.15);
  --tn-done: var(--tn-color-purple);
  --tn-done-soft: var(--tn-color-done-soft);
  --tn-pill-success-fg: #0f6f60;
  --tn-pill-warning-fg: #5d4002;
  --tn-pill-error-fg: #8a1d12;
  --tn-pill-info-fg: #1d4ed8;
  --tn-pill-accent-fg: #7a2342;
  --tn-bg-raised: var(--tn-surface-subtle);
  --tn-bg-inset: var(--tn-surface-inset);
  --tn-border: var(--tn-border-default);
  --tn-text: var(--tn-text-default);
  --tn-transition: 0.15s ease;
  --tn-shadow-brand: 4px 4px 0 var(--tn-color-pink);
  --tn-header-bg: rgb(var(--tn-color-paper-rgb) / 0.92);
  --tn-header-border: var(--tn-border-muted);
  --tn-footer-bg: var(--tn-surface-footer);
  --tn-footer-border: rgb(var(--tn-color-paper-rgb) / 0.14);
  --tn-surface-code: #0d0d0f;
  --tn-border-code: var(--tn-border-subtle);
  --tn-text-code: var(--tn-color-cream);
  --tn-overlay-light: rgb(var(--tn-color-paper-rgb) / 0.95);
  --tn-overlay-medium: rgb(var(--tn-color-paper-rgb) / 0.85);
  --tn-overlay-heavy: rgb(var(--tn-color-ink-rgb) / 0.75);
  --tn-overlay-backdrop: rgb(var(--tn-color-ink-rgb) / 0.5);
}
html.dark {
  --tn-surface-canvas: var(--tn-color-ink);
  --tn-surface-overlay: #22223a;
  --tn-surface-subtle: #22223a;
  --tn-surface-inset: #14142a;
  --tn-surface-panel: #22223a;
  --tn-surface-panel-muted: #1e1e34;
  --tn-surface-panel-strong: #14142a;
  --tn-surface-soft: #22223a;
  --tn-surface-elevated: #282842;
  --tn-surface-footer: var(--tn-surface-panel-muted);
  --tn-surface-footer-muted: #1b1b32;
  --tn-border-default: rgb(var(--tn-color-paper-rgb) / 0.22);
  --tn-border-muted: rgb(var(--tn-color-paper-rgb) / 0.12);
  --tn-border-subtle: rgb(var(--tn-color-paper-rgb) / 0.12);
  --tn-border-strong: rgb(var(--tn-color-paper-rgb) / 0.38);
  --tn-text-default: #f5f0e8;
  --tn-text-muted: #b0a89a;
  --tn-text-soft: #8a8480;
  --tn-text-secondary: #b0a89a;
  --tn-text-inverse: var(--tn-color-ink);
  --tn-text-footer: #f5f0e8;
  --tn-text-footer-muted: rgb(var(--tn-color-paper-rgb) / 0.72);
  --tn-accent-primary: var(--tn-color-pink-soft);
  --tn-accent-primary-strong: var(--tn-color-pink);
  --tn-accent-primary-soft: rgb(var(--tn-color-pink-rgb) / 0.2);
  --tn-accent-focus: rgb(var(--tn-color-pink-rgb) / 0.22);
  --tn-accent-text: var(--tn-color-pink-soft);
  --tn-surface-code: #0b0b0d;
  --tn-border-code: var(--tn-border-subtle);
  --tn-text-code: #e5e5e7;
  --tn-overlay-light: rgb(var(--tn-color-ink-rgb) / 0.95);
  --tn-overlay-medium: rgb(var(--tn-color-ink-rgb) / 0.85);
  --tn-overlay-heavy: rgb(var(--tn-color-paper-rgb) / 0.15);
  --tn-overlay-backdrop: rgb(0 0 0 / 0.7);
  --tn-focus-ring: #60a5fa;
  --tn-focus-ring-offset: var(--tn-surface-canvas);
  --tn-accent-subtle: var(--tn-color-pink-soft);
  --tn-accent-muted: rgb(var(--tn-color-pink-rgb) / 0.55);
  --tn-success: var(--tn-color-teal-soft);
  --tn-success-soft: rgb(var(--tn-color-teal-rgb) / 0.18);
  --tn-success-muted: rgb(var(--tn-color-teal-rgb) / 0.45);
  --tn-success-rgb: var(--tn-color-teal-rgb);
  --tn-error: #ff8a80;
  --tn-error-soft: rgb(192 57 43 / 0.18);
  --tn-error-muted: rgb(192 57 43 / 0.32);
  --tn-error-light: rgb(192 57 43 / 0.18);
  --tn-warning: var(--tn-color-yellow);
  --tn-warning-soft: rgb(192 134 14 / 0.18);
  --tn-info: #6aa9ff;
  --tn-info-soft: rgb(106 169 255 / 0.18);
  --tn-done: var(--tn-color-purple-soft);
  --tn-done-soft: rgb(var(--tn-color-purple-rgb) / 0.18);
  --tn-pill-success-fg: #7fcfc3;
  --tn-pill-warning-fg: #f5d76e;
  --tn-pill-error-fg: #ffb2a8;
  --tn-pill-info-fg: #9ec3ff;
  --tn-pill-accent-fg: #f5b5c4;
  --tn-bg-raised: var(--tn-surface-subtle);
  --tn-bg-inset: var(--tn-surface-inset);
  --tn-border: var(--tn-border-default);
  --tn-text: var(--tn-text-default);
  --tn-header-bg: rgb(var(--tn-color-ink-rgb) / 0.92);
  --tn-header-border: var(--tn-border-muted);
  --tn-footer-bg: var(--tn-surface-footer);
  --tn-footer-border: rgb(var(--tn-color-paper-rgb) / 0.12);
}
:root {
  --tn-space-1: 4px;
  --tn-space-2: 8px;
  --tn-space-3: 12px;
  --tn-space-4: 16px;
  --tn-space-5: 20px;
  --tn-space-6: 24px;
  --tn-space-8: 32px;
  --tn-space-10: 40px;
  --tn-space-12: 48px;
  --tn-space-16: 64px;
  --tn-space-20: 80px;
  --tn-space-24: 96px;
  --tn-shell-sidebar-collapsed: 68px;
  --tn-shell-sidebar-expanded: 260px;
  --tn-shell-sidebar-micro: 44px;
  --tn-shell-header-height: 64px;
  --tn-shell-max-width: 1680px;
  --tn-page-max-width: 1200px;
  --tn-page-gutter: clamp(var(--tn-space-4), 4vw, var(--tn-space-6));
  --tn-section-gap: var(--tn-space-12);
}
:root {
  --tn-font-headline: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --tn-text-scale: 1;
  --tn-font-size-micro: calc(var(--tn-text-scale) * 0.6875rem);
  --tn-font-size-xs: calc(var(--tn-text-scale) * 0.75rem);
  --tn-font-size-sm: calc(var(--tn-text-scale) * 0.875rem);
  --tn-font-size-base: calc(var(--tn-text-scale) * 1rem);
  --tn-font-size-lg: calc(var(--tn-text-scale) * 1.125rem);
  --tn-font-size-xl: calc(var(--tn-text-scale) * 1.25rem);
  --tn-font-size-2xl: calc(var(--tn-text-scale) * 1.5rem);
  --tn-font-size-3xl: calc(var(--tn-text-scale) * 2rem);
  --tn-font-size-hero: clamp(2rem, 5vw, 3.75rem);
  --tn-leading-tight: 1.08;
  --tn-leading-heading: 1.15;
  --tn-leading-body: 1.65;
  --tn-tracking-heading: -0.03em;
}
html[data-text-size="xs"] {
  --tn-text-scale: 0.85;
}
html[data-text-size="sm"] {
  --tn-text-scale: 0.92;
}
html[data-text-size="md"] {
  --tn-text-scale: 1;
}
html[data-text-size="lg"] {
  --tn-text-scale: 1.08;
}
:root {
  --tn-radius-sm: 4px;
  --tn-radius-md: 8px;
  --tn-radius-lg: 12px;
  --tn-radius-xl: 16px;
  --tn-radius-2xl: 22px;
  --tn-radius-3xl: 28px;
  --tn-radius-pill: 50px;
}
:root {
  --tn-shadow-sm: 2px 2px 0 var(--tn-border-strong);
  --tn-shadow-md: 4px 4px 0 var(--tn-border-strong);
  --tn-shadow-lg: 6px 6px 0 var(--tn-border-strong);
  --tn-shadow-pink: 4px 4px 0 var(--tn-color-pink);
  --tn-shadow-teal: 4px 4px 0 var(--tn-color-teal);
  --tn-shadow-yellow: 4px 4px 0 var(--tn-color-yellow);
  --tn-shadow-purple: 4px 4px 0 var(--tn-color-purple);
  --tn-shadow-card: 0 16px 40px rgb(var(--tn-color-ink-rgb) / 0.08);
  --tn-shadow-card-hover: 0 24px 60px rgb(var(--tn-color-ink-rgb) / 0.14);
  --tn-shadow-floating: 0 24px 70px rgb(var(--tn-color-ink-rgb) / 0.18);
  --tn-shadow-header: 0 10px 30px rgb(var(--tn-color-ink-rgb) / 0.07);
  --tn-shadow-focus: 0 0 0 4px var(--tn-accent-focus);
  --tn-shadow-subtle: 0 1px 3px rgb(var(--tn-color-ink-rgb) / 0.1);
  --tn-shadow-dropdown: 0 8px 24px rgb(var(--tn-color-ink-rgb) / 0.15);
  --tn-shadow-modal: 0 20px 60px rgb(var(--tn-color-ink-rgb) / 0.3);
  --tn-shadow-popover: 0 4px 12px rgb(var(--tn-color-ink-rgb) / 0.12);
}
html.dark {
  --tn-shadow-sm: 2px 2px 0 rgb(var(--tn-color-paper-rgb) / 0.10);
  --tn-shadow-md: 4px 4px 0 rgb(var(--tn-color-paper-rgb) / 0.10);
  --tn-shadow-lg: 6px 6px 0 rgb(var(--tn-color-paper-rgb) / 0.10);
  --tn-shadow-card: 0 12px 32px rgb(0 0 0 / 0.18);
  --tn-shadow-card-hover: 0 20px 48px rgb(0 0 0 / 0.24);
  --tn-shadow-floating: 0 20px 56px rgb(0 0 0 / 0.30);
  --tn-shadow-header: 0 8px 24px rgb(0 0 0 / 0.18);
  --tn-shadow-subtle: 0 1px 3px rgb(0 0 0 / 0.2);
  --tn-shadow-dropdown: 0 8px 24px rgb(0 0 0 / 0.4);
  --tn-shadow-modal: 0 20px 60px rgb(0 0 0 / 0.6);
  --tn-shadow-popover: 0 4px 12px rgb(0 0 0 / 0.3);
}
:root {
  --tn-z-base: 0;
  --tn-z-content-behind: -1;
  --tn-z-content-raised: 1;
  --tn-z-content-elevated: 10;
  --tn-z-header: 100;
  --tn-z-sidebar: 100;
  --tn-z-footer: 100;
  --tn-z-dropdown: 200;
  --tn-z-sticky: 300;
  --tn-z-fixed: 400;
  --tn-z-popover: 500;
  --tn-z-modal-backdrop: 900;
  --tn-z-modal: 1000;
  --tn-z-drawer: 1000;
  --tn-z-toast: 2000;
  --tn-z-notification: 2000;
  --tn-z-tooltip: 3000;
  --tn-z-loading-overlay: 8000;
  --tn-z-page-loader: 9000;
  --tn-z-max: 10000;
}
:root {
  --tn-radius-component: var(--tn-radius-lg);
  --tn-border-width-component: var(--tn-border-width-heavy);
  --tn-shadow-offset-x: 4px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: var(--tn-shadow-offset-x) var(--tn-shadow-offset-y) 0 var(--tn-border-strong);
}
html.dark {
  --tn-radius-component: var(--tn-radius-lg);
  --tn-border-width-component: var(--tn-border-width-heavy);
  --tn-shadow-offset-x: 4px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: var(--tn-shadow-offset-x) var(--tn-shadow-offset-y) 0 rgb(var(--tn-color-paper-rgb) / 0.15);
}
[data-admin-shell="true"] {
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 2px;
  --tn-shadow-component: var(--tn-shadow-offset-x) var(--tn-shadow-offset-y) 4px
        rgba(0, 0, 0, 0.28);
}
:root {
  --app-bg: #faf8f5;
  --surface-1: #fffef7;
  --surface-2: #faf8f5;
  --surface-3: #f0ece8;
  --border: rgba(26, 26, 46, 0.22);
  --text-primary: #1a1a2e;
  --text-secondary: #5e5e6c;
  --text-muted: #6b6b7b;
  --accent: #e8879f;
  --accent-hover: #c8607f;
  --color-ok: #4db8a8;
  --color-ok-bg: #c8ede9;
  --color-error: #c0392b;
  --color-error-bg: #fde8e6;
  --color-warn: #c0860e;
  --color-warn-bg: #fdf3d0;
  --code-purple: #9b7cc4;
  --font-ui: var(--tn-font-body);
  --font-mono: var(--tn-font-mono);
  --fs-ui: 13px;
  --t-base: 0.15s ease;
  --radius-md: 12px;
}
html.dark {
  --app-bg: #1a1a2e;
  --surface-1: #22223a;
  --surface-2: #1e1e34;
  --surface-3: #14142a;
  --border: rgba(255, 254, 247, 0.22);
  --text-primary: #f5f0e8;
  --text-secondary: #b0a89a;
  --text-muted: #8a8480;
  --accent: #f5b5c4;
  --accent-hover: #e8879f;
  --color-ok: #7fcfc3;
  --color-ok-bg: rgba(77, 184, 168, 0.18);
  --color-error: #ff8a80;
  --color-error-bg: rgba(192, 57, 43, 0.18);
  --color-warn: #f5d76e;
  --color-warn-bg: rgba(192, 134, 14, 0.18);
}
.m-0 {
  margin: 0;
}
.m-1 {
  margin: var(--tn-space-1);
}
.m-2 {
  margin: var(--tn-space-2);
}
.m-3 {
  margin: var(--tn-space-3);
}
.m-4 {
  margin: var(--tn-space-4);
}
.m-5 {
  margin: var(--tn-space-5);
}
.m-6 {
  margin: var(--tn-space-6);
}
.m-8 {
  margin: var(--tn-space-8);
}
.m-10 {
  margin: var(--tn-space-10);
}
.m-12 {
  margin: var(--tn-space-12);
}
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: var(--tn-space-1);
}
.mt-2 {
  margin-top: var(--tn-space-2);
}
.mt-3 {
  margin-top: var(--tn-space-3);
}
.mt-4 {
  margin-top: var(--tn-space-4);
}
.mt-5 {
  margin-top: var(--tn-space-5);
}
.mt-6 {
  margin-top: var(--tn-space-6);
}
.mt-8 {
  margin-top: var(--tn-space-8);
}
.mt-10 {
  margin-top: var(--tn-space-10);
}
.mt-12 {
  margin-top: var(--tn-space-12);
}
.mr-0 {
  margin-right: 0;
}
.mr-1 {
  margin-right: var(--tn-space-1);
}
.mr-2 {
  margin-right: var(--tn-space-2);
}
.mr-3 {
  margin-right: var(--tn-space-3);
}
.mr-4 {
  margin-right: var(--tn-space-4);
}
.mr-5 {
  margin-right: var(--tn-space-5);
}
.mr-6 {
  margin-right: var(--tn-space-6);
}
.mr-8 {
  margin-right: var(--tn-space-8);
}
.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: var(--tn-space-1);
}
.mb-2 {
  margin-bottom: var(--tn-space-2);
}
.mb-3 {
  margin-bottom: var(--tn-space-3);
}
.mb-4 {
  margin-bottom: var(--tn-space-4);
}
.mb-5 {
  margin-bottom: var(--tn-space-5);
}
.mb-6 {
  margin-bottom: var(--tn-space-6);
}
.mb-8 {
  margin-bottom: var(--tn-space-8);
}
.mb-10 {
  margin-bottom: var(--tn-space-10);
}
.mb-12 {
  margin-bottom: var(--tn-space-12);
}
.ml-0 {
  margin-left: 0;
}
.ml-1 {
  margin-left: var(--tn-space-1);
}
.ml-2 {
  margin-left: var(--tn-space-2);
}
.ml-3 {
  margin-left: var(--tn-space-3);
}
.ml-4 {
  margin-left: var(--tn-space-4);
}
.ml-5 {
  margin-left: var(--tn-space-5);
}
.ml-6 {
  margin-left: var(--tn-space-6);
}
.ml-8 {
  margin-left: var(--tn-space-8);
}
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}
.mx-1 {
  margin-left: var(--tn-space-1);
  margin-right: var(--tn-space-1);
}
.mx-2 {
  margin-left: var(--tn-space-2);
  margin-right: var(--tn-space-2);
}
.mx-3 {
  margin-left: var(--tn-space-3);
  margin-right: var(--tn-space-3);
}
.mx-4 {
  margin-left: var(--tn-space-4);
  margin-right: var(--tn-space-4);
}
.mx-5 {
  margin-left: var(--tn-space-5);
  margin-right: var(--tn-space-5);
}
.mx-6 {
  margin-left: var(--tn-space-6);
  margin-right: var(--tn-space-6);
}
.mx-8 {
  margin-left: var(--tn-space-8);
  margin-right: var(--tn-space-8);
}
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my-1 {
  margin-top: var(--tn-space-1);
  margin-bottom: var(--tn-space-1);
}
.my-2 {
  margin-top: var(--tn-space-2);
  margin-bottom: var(--tn-space-2);
}
.my-3 {
  margin-top: var(--tn-space-3);
  margin-bottom: var(--tn-space-3);
}
.my-4 {
  margin-top: var(--tn-space-4);
  margin-bottom: var(--tn-space-4);
}
.my-5 {
  margin-top: var(--tn-space-5);
  margin-bottom: var(--tn-space-5);
}
.my-6 {
  margin-top: var(--tn-space-6);
  margin-bottom: var(--tn-space-6);
}
.my-8 {
  margin-top: var(--tn-space-8);
  margin-bottom: var(--tn-space-8);
}
.my-10 {
  margin-top: var(--tn-space-10);
  margin-bottom: var(--tn-space-10);
}
.my-12 {
  margin-top: var(--tn-space-12);
  margin-bottom: var(--tn-space-12);
}
.p-0 {
  padding: 0;
}
.p-1 {
  padding: var(--tn-space-1);
}
.p-2 {
  padding: var(--tn-space-2);
}
.p-3 {
  padding: var(--tn-space-3);
}
.p-4 {
  padding: var(--tn-space-4);
}
.p-5 {
  padding: var(--tn-space-5);
}
.p-6 {
  padding: var(--tn-space-6);
}
.p-8 {
  padding: var(--tn-space-8);
}
.p-10 {
  padding: var(--tn-space-10);
}
.p-12 {
  padding: var(--tn-space-12);
}
.pt-0 {
  padding-top: 0;
}
.pt-1 {
  padding-top: var(--tn-space-1);
}
.pt-2 {
  padding-top: var(--tn-space-2);
}
.pt-3 {
  padding-top: var(--tn-space-3);
}
.pt-4 {
  padding-top: var(--tn-space-4);
}
.pt-5 {
  padding-top: var(--tn-space-5);
}
.pt-6 {
  padding-top: var(--tn-space-6);
}
.pt-8 {
  padding-top: var(--tn-space-8);
}
.pt-10 {
  padding-top: var(--tn-space-10);
}
.pt-12 {
  padding-top: var(--tn-space-12);
}
.pr-0 {
  padding-right: 0;
}
.pr-1 {
  padding-right: var(--tn-space-1);
}
.pr-2 {
  padding-right: var(--tn-space-2);
}
.pr-3 {
  padding-right: var(--tn-space-3);
}
.pr-4 {
  padding-right: var(--tn-space-4);
}
.pr-5 {
  padding-right: var(--tn-space-5);
}
.pr-6 {
  padding-right: var(--tn-space-6);
}
.pr-8 {
  padding-right: var(--tn-space-8);
}
.pb-0 {
  padding-bottom: 0;
}
.pb-1 {
  padding-bottom: var(--tn-space-1);
}
.pb-2 {
  padding-bottom: var(--tn-space-2);
}
.pb-3 {
  padding-bottom: var(--tn-space-3);
}
.pb-4 {
  padding-bottom: var(--tn-space-4);
}
.pb-5 {
  padding-bottom: var(--tn-space-5);
}
.pb-6 {
  padding-bottom: var(--tn-space-6);
}
.pb-8 {
  padding-bottom: var(--tn-space-8);
}
.pb-10 {
  padding-bottom: var(--tn-space-10);
}
.pb-12 {
  padding-bottom: var(--tn-space-12);
}
.pl-0 {
  padding-left: 0;
}
.pl-1 {
  padding-left: var(--tn-space-1);
}
.pl-2 {
  padding-left: var(--tn-space-2);
}
.pl-3 {
  padding-left: var(--tn-space-3);
}
.pl-4 {
  padding-left: var(--tn-space-4);
}
.pl-5 {
  padding-left: var(--tn-space-5);
}
.pl-6 {
  padding-left: var(--tn-space-6);
}
.pl-8 {
  padding-left: var(--tn-space-8);
}
.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.px-1 {
  padding-left: var(--tn-space-1);
  padding-right: var(--tn-space-1);
}
.px-2 {
  padding-left: var(--tn-space-2);
  padding-right: var(--tn-space-2);
}
.px-3 {
  padding-left: var(--tn-space-3);
  padding-right: var(--tn-space-3);
}
.px-4 {
  padding-left: var(--tn-space-4);
  padding-right: var(--tn-space-4);
}
.px-5 {
  padding-left: var(--tn-space-5);
  padding-right: var(--tn-space-5);
}
.px-6 {
  padding-left: var(--tn-space-6);
  padding-right: var(--tn-space-6);
}
.px-8 {
  padding-left: var(--tn-space-8);
  padding-right: var(--tn-space-8);
}
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.py-1 {
  padding-top: var(--tn-space-1);
  padding-bottom: var(--tn-space-1);
}
.py-2 {
  padding-top: var(--tn-space-2);
  padding-bottom: var(--tn-space-2);
}
.py-3 {
  padding-top: var(--tn-space-3);
  padding-bottom: var(--tn-space-3);
}
.py-4 {
  padding-top: var(--tn-space-4);
  padding-bottom: var(--tn-space-4);
}
.py-5 {
  padding-top: var(--tn-space-5);
  padding-bottom: var(--tn-space-5);
}
.py-6 {
  padding-top: var(--tn-space-6);
  padding-bottom: var(--tn-space-6);
}
.py-8 {
  padding-top: var(--tn-space-8);
  padding-bottom: var(--tn-space-8);
}
.py-10 {
  padding-top: var(--tn-space-10);
  padding-bottom: var(--tn-space-10);
}
.py-12 {
  padding-top: var(--tn-space-12);
  padding-bottom: var(--tn-space-12);
}
.gap-0 {
  gap: 0;
}
.gap-1 {
  gap: var(--tn-space-1);
}
.gap-2 {
  gap: var(--tn-space-2);
}
.gap-3 {
  gap: var(--tn-space-3);
}
.gap-4 {
  gap: var(--tn-space-4);
}
.gap-5 {
  gap: var(--tn-space-5);
}
.gap-6 {
  gap: var(--tn-space-6);
}
.gap-8 {
  gap: var(--tn-space-8);
}
.gap-10 {
  gap: var(--tn-space-10);
}
.gap-12 {
  gap: var(--tn-space-12);
}
.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-inline {
  display: inline;
}
.d-inline-block {
  display: inline-block;
}
.d-flex {
  display: flex;
}
.d-inline-flex {
  display: inline-flex;
}
.d-grid {
  display: grid;
}
.d-inline-grid {
  display: inline-grid;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-column {
  flex-direction: column;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-1 {
  flex: 1;
}
.flex-auto {
  flex: auto;
}
.flex-initial {
  flex: initial;
}
.flex-none {
  flex: none;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-shrink-1 {
  flex-shrink: 1;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.items-baseline {
  align-items: baseline;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}
.self-auto {
  align-self: auto;
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}
.w-full {
  width: 100%;
}
.w-auto {
  width: auto;
}
.w-screen {
  width: 100vw;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-min {
  width: -moz-min-content;
  width: min-content;
}
.h-full {
  height: 100%;
}
.h-auto {
  height: auto;
}
.h-screen {
  height: 100vh;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-max {
  height: -moz-max-content;
  height: max-content;
}
.h-min {
  height: -moz-min-content;
  height: min-content;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-prose {
  max-width: 65ch;
}
@media (max-width: 640px) {
  .sm\:d-none {
    display: none;
  }
  .sm\:d-block {
    display: block;
  }
  .sm\:d-flex {
    display: flex;
  }
  .sm\:d-grid {
    display: grid;
  }
}
@media (max-width: 768px) {
  .md\:d-none {
    display: none;
  }
  .md\:d-block {
    display: block;
  }
  .md\:d-flex {
    display: flex;
  }
  .md\:d-grid {
    display: grid;
  }
}
@media (max-width: 1024px) {
  .lg\:d-none {
    display: none;
  }
  .lg\:d-block {
    display: block;
  }
  .lg\:d-flex {
    display: flex;
  }
  .lg\:d-grid {
    display: grid;
  }
}
.font-sans {
  font-family: var(--tn-font-body);
}
.font-mono {
  font-family: var(--tn-font-mono);
}
.font-headline {
  font-family: var(--tn-font-headline);
}
.text-xs {
  font-size: 0.75rem;
}
.text-sm {
  font-size: 0.875rem;
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.125rem;
}
.text-xl {
  font-size: 1.25rem;
}
.text-2xl {
  font-size: 1.5rem;
}
.text-3xl {
  font-size: 1.875rem;
}
.text-4xl {
  font-size: 2.25rem;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.text-default {
  color: var(--tn-text-default);
}
.text-muted {
  color: var(--tn-text-muted);
}
.text-subtle {
  color: var(--tn-text-soft);
}
.text-accent {
  color: var(--tn-accent-primary);
}
.text-success {
  color: var(--tn-success);
}
.text-error {
  color: var(--tn-error);
}
.text-warning {
  color: var(--tn-warning);
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-normal {
  letter-spacing: 0;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: 1.25;
}
.leading-snug {
  line-height: 1.375;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-loose {
  line-height: 2;
}
.underline {
  text-decoration: underline;
}
.line-through {
  text-decoration: line-through;
}
.no-underline {
  text-decoration: none;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-normal {
  word-break: normal;
}
.break-words {
  word-break: break-word;
}
.break-all {
  word-break: break-all;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.border-0 {
  border-width: 0;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-8 {
  border-width: 8px;
}
.border-t-0 {
  border-top-width: 0;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-r-0 {
  border-right-width: 0;
}
.border-r {
  border-right-width: 1px;
}
.border-r-2 {
  border-right-width: 2px;
}
.border-b-0 {
  border-bottom-width: 0;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l-0 {
  border-left-width: 0;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-default {
  border-color: var(--tn-border-default);
}
.border-muted {
  border-color: var(--tn-border-muted);
}
.border-accent {
  border-color: var(--tn-accent-primary);
}
.border-success {
  border-color: var(--tn-success);
}
.border-error {
  border-color: var(--tn-error);
}
.rounded-none {
  border-radius: 0;
}
.rounded-sm {
  border-radius: var(--tn-radius-sm);
}
.rounded {
  border-radius: var(--tn-radius-md);
}
.rounded-md {
  border-radius: var(--tn-radius-md);
}
.rounded-lg {
  border-radius: var(--tn-radius-lg);
}
.rounded-xl {
  border-radius: var(--tn-radius-xl);
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-full {
  border-radius: var(--tn-radius-pill);
}
.rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rounded-t-sm {
  border-top-left-radius: var(--tn-radius-sm);
  border-top-right-radius: var(--tn-radius-sm);
}
.rounded-t {
  border-top-left-radius: var(--tn-radius-md);
  border-top-right-radius: var(--tn-radius-md);
}
.rounded-t-lg {
  border-top-left-radius: var(--tn-radius-lg);
  border-top-right-radius: var(--tn-radius-lg);
}
.rounded-b-none {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rounded-b-sm {
  border-bottom-left-radius: var(--tn-radius-sm);
  border-bottom-right-radius: var(--tn-radius-sm);
}
.rounded-b {
  border-bottom-left-radius: var(--tn-radius-md);
  border-bottom-right-radius: var(--tn-radius-md);
}
.rounded-b-lg {
  border-bottom-left-radius: var(--tn-radius-lg);
  border-bottom-right-radius: var(--tn-radius-lg);
}
.shadow-sm {
  box-shadow: var(--tn-shadow-sm);
}
.shadow {
  box-shadow: var(--tn-shadow-md);
}
.shadow-md {
  box-shadow: var(--tn-shadow-md);
}
.shadow-lg {
  box-shadow: var(--tn-shadow-lg);
}
.shadow-none {
  box-shadow: none;
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  border-left-width: 1px;
  border-right-width: 0;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 1px;
  border-bottom-width: 0;
}
.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
  border-left-width: 0;
  border-right-width: 1px;
}
.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 0;
  border-bottom-width: 1px;
}
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.home-page {
  min-height: 100vh;
  color: var(--tn-text-default);
}
.home-inner--hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 40px;
  align-items: start;
}
.section-title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--tn-text-default);
}
.section-subtitle {
  margin: 0;
  max-width: 720px;
  color: var(--tn-text-muted);
  font-size: 16px;
  line-height: 1.7;
}
.home-tool-section {
  padding: 56px 0;
  border-top: 1px solid var(--tn-border-muted);
}
.tool-section {
  padding: 56px 0;
  border-top: 1px solid var(--tn-border-muted);
}
.tool-section--home {
  padding: 48px 0 36px;
}
.tool-section__header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.tool-section__header--home {
  display: grid;
  gap: 10px;
}
.tool-section__header-text {
  display: grid;
  gap: 6px;
}
.tool-section__header-text h2 {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.tool-section__header-text p {
  margin: 0;
  max-width: 62ch;
  color: var(--tn-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.tool-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tool-section__count {
  color: var(--tn-text-soft);
  font-size: 14px;
  font-weight: 500;
}
.tool-section__eyebrow {
  margin: 0;
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.directory-shell {
  width: min(100%, var(--tn-page-max-width));
  margin: 0 auto;
}
.directory-search {
  margin-top: var(--tn-space-4);
}
.directory-search__shell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 56px 0 46px;
  border: 1px solid var(--tn-border-default);
  border-radius: 14px;
  background: var(--tn-surface-canvas);
}
.directory-search__shell:focus-within {
  border-color: var(--tn-accent-primary);
  box-shadow: 0 0 0 4px var(--tn-accent-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn-accent-primary) 16%, transparent);
  }
}
.directory-search__icon {
  position: absolute;
  left: 18px;
  width: 1em;
  height: 1em;
  font-size: 20px;
  color: var(--tn-text-soft);
}
.directory-search__input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--tn-text-default);
  font-size: 15px;
}
.directory-search__input::placeholder {
  color: var(--tn-text-soft);
}
.directory-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.directory-results {
  padding: 56px 0;
  border-top: 1px solid var(--tn-border-muted);
}
.directory-results__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}
.directory-results__context {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 14px;
  line-height: 1.7;
}
.directory-results__count {
  font-weight: 700;
  color: var(--tn-text-default);
}
.directory-results__active {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid var(--tn-border-default);
  border-radius: 14px;
  background: var(--tn-surface-subtle);
}
.directory-guide {
  padding: 56px 0;
  border-top: 1px solid var(--tn-border-muted);
}
.directory-guide__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 24px;
}
.directory-guide__copy {
  display: grid;
  gap: 8px;
}
.directory-guide__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.directory-guide__body {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 14px;
  line-height: 1.7;
}
.tool-directory-status {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}
.tool-directory-status__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tool-directory-status__count {
  font-family: var(--tn-font-headline);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.tool-directory-status__label {
  color: var(--tn-text-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tool-directory-active {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 20px;
  background: var(--tn-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-success) 12%, transparent);
  }
  color: var(--tn-success);
  font-size: 12px;
  font-weight: 600;
}
.directory-browse {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.directory-browse__group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.directory-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.directory-facets__label {
  display: block;
  margin-bottom: 6px;
  color: var(--tn-text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.directory-facets__rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.directory-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}
.directory-pagination__pages {
  display: flex;
  gap: 6px;
}
.directory-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}
.directory-pagination__btn:hover {
  border-color: var(--tn-accent-primary);
  color: var(--tn-accent-primary);
}
.directory-pagination__btn--current {
  background: var(--tn-accent-primary-strong);
  border-color: var(--tn-accent-primary-strong);
  color: #fff;
}
.shell-skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 9999;
  padding: var(--tn-spacing-4) var(--tn-spacing-6);
  background: var(--tn-surface-panel);
  color: var(--tn-text-primary);
  border: 2px solid var(--tn-accent-primary);
  border-radius: var(--tn-radius-md);
  font-size: var(--tn-font-size-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--tn-shadow-lg);
  transition: all 200ms ease;
}
.shell-skip-link:focus {
  top: var(--tn-spacing-6);
  left: var(--tn-spacing-6);
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.shell-skip-link:focus:hover {
  background: var(--tn-surface-elevated);
  transform: translateY(-1px);
  box-shadow: var(--tn-shadow-xl);
}
html.dark .shell-skip-link {
  background: var(--tn-surface-panel);
  color: var(--tn-text-primary);
  border-color: var(--tn-accent-primary);
}
html.dark .shell-skip-link:focus:hover {
  background: var(--tn-surface-elevated);
}
@media (prefers-contrast: more) {
  .shell-skip-link:focus {
    outline-width: 3px;
    outline-offset: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-skip-link {
    transition: none;
  }
  .shell-skip-link:focus:hover {
    transform: none;
  }
}
.btn,
.directory-submit,
.directory-link-button,
.directory-clear,
.tool-directory-clear,
.home-search-submit,
.home-search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tn-space-2);
  min-height: 44px;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  font-family: var(--tn-font-body);
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition),
        background var(--tn-transition),
        border-color var(--tn-transition),
        color var(--tn-transition);
}
.btn {
  padding: 0 var(--tn-space-6);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--tn-shadow-md);
}
.btn:hover,
.directory-submit:hover,
.directory-link-button:hover,
.directory-clear:hover,
.tool-directory-clear:hover,
.home-search-submit:hover,
.home-search-link:hover {
  transform: translate(2px, 2px);
  box-shadow: var(--tn-shadow-sm);
}
.btn:active,
.directory-submit:active,
.directory-link-button:active,
.directory-clear:active,
.tool-directory-clear:active,
.home-search-submit:active,
.home-search-link:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}
.btn:focus-visible,
.directory-submit:focus-visible,
.directory-link-button:focus-visible,
.directory-clear:focus-visible,
.tool-directory-clear:focus-visible,
.home-search-submit:focus-visible,
.home-search-link:focus-visible {
  outline: var(--tn-focus-ring-width, 2px) solid var(--tn-focus-ring);
  outline-offset: 3px;
}
.btn:disabled,
.directory-submit:disabled,
.directory-link-button:disabled,
.directory-clear:disabled,
.tool-directory-clear:disabled,
.home-search-submit:disabled,
.home-search-link:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}
.btn-primary,
.directory-submit,
.directory-link-button,
.home-search-submit {
  background: var(--tn-color-pink);
  color: var(--tn-color-ink);
  box-shadow: var(--tn-shadow-md);
}
.btn-primary:hover,
.directory-submit:hover,
.directory-link-button:hover,
.home-search-submit:hover {
  background: var(--tn-color-pink-strong);
  color: var(--tn-color-ink);
}
.btn-ghost,
.directory-clear,
.tool-directory-clear,
.home-search-link {
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-teal);
}
.btn-ghost:hover,
.directory-clear:hover,
.tool-directory-clear:hover,
.home-search-link:hover {
  background: var(--tn-color-teal-soft);
  color: var(--tn-color-ink);
}
.btn-teal {
  background: var(--tn-color-teal);
  color: var(--tn-color-ink);
  box-shadow: var(--tn-shadow-md);
}
.btn-teal:hover {
  background: var(--tn-color-teal-strong);
}
.btn-yellow {
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
  box-shadow: var(--tn-shadow-yellow);
}
.btn-danger {
  background: var(--tn-error);
  color: var(--tn-color-paper);
  box-shadow: var(--tn-shadow-md);
}
.btn-sm {
  min-height: 34px;
  padding: 0 var(--tn-space-4);
  border-width: 2px;
  font-size: 12px;
  box-shadow: var(--tn-shadow-sm);
}
.btn-lg {
  min-height: 54px;
  padding: 0 var(--tn-space-8);
  font-size: 16px;
  font-weight: 700;
  box-shadow: var(--tn-shadow-lg);
}
.btn-lg:hover {
  transform: translate(3px, 3px);
  box-shadow: var(--tn-shadow-md);
}
.btn-block {
  width: 100%;
}
.btn-icon {
  min-width: 44px;
  padding: 0;
}
.btn-group {
  display: inline-flex;
  gap: 10px;
}
.directory-submit,
.directory-link-button,
.home-search-submit {
  padding: 0 var(--tn-space-6);
  font-size: 14px;
  font-weight: 700;
}
.directory-clear,
.tool-directory-clear,
.home-search-link {
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
}
.tool-directory-clear {
  min-height: 34px;
  padding: 4px var(--tn-space-2);
  border-width: 2px;
  border-radius: var(--tn-radius-md);
  font-size: 12px;
}
.card,
.tool-card,
.home-hero__surface-card,
.home-surface-card,
.info-card {
  display: grid;
  min-height: 0;
  border: var(--tn-border-heavy);
  background: var(--tn-surface-panel);
}
.card,
.tool-card {
  gap: var(--tn-space-4);
  padding: var(--tn-space-6);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-card);
  transition: transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}
.card:hover,
.tool-card:hover {
  border-color: var(--tn-accent-primary);
  transform: translateY(-5px);
  box-shadow: var(--tn-shadow-card-hover);
}
.tool-card {
  position: relative;
  color: var(--tn-text-default);
  text-decoration: none;
  overflow: hidden;
  grid-template-rows: auto 1fr auto;
}
.tool-card[data-stagger-index] {
  --stagger-index: attr(data-stagger-index number, 0);
}
.tool-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: repeating-linear-gradient(
        90deg,
        var(--tn-color-pink) 0% 33.33%,
        var(--tn-color-yellow) 33.33% 66.66%,
        var(--tn-color-teal) 66.66% 100%
    );
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tool-card:hover::before {
  opacity: 1;
}
.tool-card__topline,
.tool-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  justify-content: space-between;
}
.tool-card__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-accent-primary-strong);
}
.tool-card__icon .material-symbols-outlined {
  font-size: 22px;
}
.tool-card__icon:has(img) {
  background: transparent;
  border: none;
  overflow: hidden;
}
.tool-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--tn-radius-lg);
}
.tool-card__signals,
.tool-card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tn-space-2);
}
.tool-card__identity {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  min-width: 0;
}
.tool-card__category,
.tool-card__tag,
.tool-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  color: var(--tn-color-ink);
  font-family: var(--tn-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tool-card__category {
  background: var(--tn-color-pink-soft);
}
.tool-card__tag {
  background: var(--tn-color-yellow-soft);
}
.tool-card__badge {
  background: var(--tn-color-teal-soft);
}
.tool-card__badge--access {
  background: var(--tn-color-purple-soft);
  border-color: var(--tn-color-purple);
}
.tool-card__badge--server {
  background: var(--tn-color-warning-soft);
  border-color: var(--tn-color-warning);
}
.tool-card__badge--server::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--tn-color-warning);
}
.tool-card__body {
  display: grid;
  gap: var(--tn-space-2);
}
.tool-card__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}
.tool-card:hover .tool-card__title {
  color: var(--tn-accent-primary-strong);
}
.tool-card__description {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 14px;
  line-height: 1.65;
}
.tool-card__meta {
  margin-top: auto;
  gap: 12px 18px;
  padding-top: 14px;
  border-top: 2px solid var(--tn-border-muted);
}
.tool-card__meta-item {
  display: grid;
  gap: 3px;
  color: var(--tn-text-soft);
  font-size: 11px;
}
.tool-card__meta-item strong {
  color: var(--tn-text-default);
  font-size: 12px;
  font-weight: 700;
}
.tool-card__meta-item--hide-xs {
  display: none;
}
@media (min-width: 768px) {
  .tool-card__meta-item--hide-xs {
    display: grid;
  }
}
.tool-card__launch {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  margin-left: auto;
  color: var(--tn-accent-primary);
  font-size: 12px;
  font-weight: 700;
}
.tool-card__launch .material-symbols-outlined,
.tool-card__launch-icon {
  width: 1em;
  height: 1em;
  font-size: 16px;
  line-height: 1;
  transition: transform var(--tn-transition);
}
.tool-card:hover .tool-card__launch {
  color: var(--tn-accent-primary-strong);
}
.tool-card:hover .tool-card__launch .material-symbols-outlined,
.tool-card:hover .tool-card__launch-icon {
  transform: translate(2px, -2px);
}
.home-hero__surface-card,
.home-surface-card {
  gap: var(--tn-space-4);
  padding: var(--tn-space-6);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-card);
}
.info-card {
  padding: var(--tn-space-5);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-card);
}
.info-card--warning {
  border-color: var(--tn-warning);
  background: var(--tn-warning-soft);
  box-shadow: var(--tn-shadow-card);
}
.info-card--error {
  border-color: var(--tn-error);
  background: var(--tn-error-soft);
  box-shadow: var(--tn-shadow-card);
}
.info-card--success {
  border-color: var(--tn-success);
  background: var(--tn-success-soft);
  box-shadow: var(--tn-shadow-card);
}
.tool-directory-empty,
.directory-empty {
  display: grid;
  gap: var(--tn-space-4);
  padding: var(--tn-space-8);
  border: 3px dashed var(--tn-border-muted);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel-muted);
}
.tool-directory-empty__title,
.directory-empty__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}
.tool-directory-empty__body,
.directory-empty__body,
.tool-directory-empty__query {
  margin: 0;
  color: var(--tn-text-muted);
}
.tool-directory-empty__actions,
.directory-empty__actions,
.directory-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-input,
.admin-select,
.directory-control select {
  width: 100%;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  transition: border-color var(--tn-transition),
        box-shadow var(--tn-transition),
        background var(--tn-transition);
}
.admin-input,
.admin-select {
  padding: var(--tn-space-2) var(--tn-space-3);
  font-size: 14px;
  box-shadow: var(--tn-shadow-sm);
}
.admin-input:focus,
.admin-select:focus,
.directory-control select:focus {
  outline: none;
  border-color: var(--tn-border-strong);
  box-shadow: var(--tn-shadow-pink);
}
.admin-input::placeholder {
  color: var(--tn-text-soft);
}
.admin-input__status {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--tn-text-soft);
  min-height: 1em;
}
.admin-input__status:empty {
  display: none;
}
.admin-input__status--busy {
  color: var(--tn-text-default);
}
.admin-input__status--success {
  color: var(--tn-success);
}
.admin-input__status--error {
  color: var(--tn-error);
}
.admin-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--tn-text-default);
  font-size: 12px;
  font-weight: 600;
}
.directory-control {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}
.directory-control select {
  min-height: 34px;
  padding: 0 28px 0 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--tn-shadow-sm);
}
.tool-directory-control {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
}
.tool-directory-control label,
.tool-directory-control span,
.directory-control > span {
  color: var(--tn-text-muted);
  font-size: 12px;
  font-weight: 600;
}
.tool-directory-toggle {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}
.tool-directory-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--tn-accent-primary);
}
.directory-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin-top: var(--tn-space-3);
}
.directory-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
}
.directory-search__shell,
.home-search-shell {
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-teal);
  transition: box-shadow var(--tn-transition),
        transform var(--tn-transition),
        border-color var(--tn-transition);
}
.directory-search__shell:focus-within,
.home-search-shell:focus-within {
  border-color: var(--tn-border-strong);
  box-shadow: var(--tn-shadow-pink);
  transform: none;
}
.directory-search__input,
.home-search-input {
  background: transparent;
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: 15px;
  font-weight: 500;
}
.directory-search__input::placeholder,
.home-search-input::placeholder {
  color: var(--tn-text-muted);
  font-weight: 400;
}
.tn-badge,
.admin-badge,
.admin-badge-info,
.admin-badge-success,
.admin-badge-warning,
.admin-badge-error,
.admin-badge-neutral {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  font-family: var(--tn-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: uppercase;
}
.tn-badge--info,
.admin-badge-info {
  background: var(--tn-accent-primary-soft);
  color: var(--tn-color-ink);
}
.tn-badge--success,
.admin-badge-success {
  background: var(--tn-success-soft);
  color: var(--tn-color-ink);
}
.tn-badge--warning,
.admin-badge-warning {
  background: var(--tn-warning-soft);
  color: var(--tn-color-ink);
}
.tn-badge--error,
.admin-badge-error {
  background: var(--tn-error-soft);
  color: var(--tn-pill-error-fg);
  border-color: var(--tn-pill-error-fg);
}
.tn-badge--neutral,
.admin-badge-neutral {
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-muted);
}
.admin-data-table-wrap {
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-canvas);
  overflow: hidden;
  position: relative;
}
.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-data-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tn-text-muted);
  background: var(--tn-surface-subtle);
  border-bottom: 1px solid var(--tn-border-default);
  position: relative;
}
.admin-data-table td {
  padding: 12px 14px;
  color: var(--tn-text-default);
  border-bottom: 1px solid var(--tn-border-muted);
}
.admin-data-table tr:last-child td {
  border-bottom: none;
}
.admin-data-table tbody tr {
  transition: background-color var(--tn-transition);
}
.admin-data-table tbody tr:hover td {
  background: var(--tn-surface-subtle);
}
.admin-data-table th.sortable {
  cursor: pointer;
  user-select: none;
  padding-right: 28px;
}
.admin-data-table th.sortable:hover {
  background: var(--tn-surface-inset);
}
.admin-data-table th.sortable::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.3;
}
.admin-data-table th.sortable:not(.sorted)::after {
  border-top: 5px solid currentColor;
}
.admin-data-table th.sortable.sorted-asc::after {
  border-bottom: 5px solid currentColor;
  opacity: 1;
}
.admin-data-table th.sortable.sorted-desc::after {
  border-top: 5px solid currentColor;
  opacity: 1;
}
.admin-data-table--sticky-header {
  max-height: 600px;
  overflow-y: auto;
}
.admin-data-table--sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 var(--tn-border-default);
}
.admin-data-table--striped tbody tr:nth-child(even) td {
  background-color: var(--tn-surface-inset);
}
.admin-data-table--striped tbody tr:hover td {
  background-color: var(--tn-surface-subtle);
}
.admin-data-table--compact th {
  padding: 6px 10px;
}
.admin-data-table--compact td {
  padding: 8px 10px;
}
.admin-data-table--comfortable th {
  padding: 14px 18px;
}
.admin-data-table--comfortable td {
  padding: 16px 18px;
}
.admin-data-table tbody tr.expandable {
  cursor: pointer;
}
.admin-data-table tbody tr.expandable td:first-child::before {
  content: '›';
  display: inline-block;
  margin-right: 8px;
  font-size: 16px;
  font-weight: bold;
  transition: transform var(--tn-transition);
}
.admin-data-table tbody tr.expandable.expanded td:first-child::before {
  transform: rotate(90deg);
}
.admin-data-table tbody tr.expansion-row {
  background-color: var(--tn-surface-inset);
}
.admin-data-table tbody tr.expansion-row td {
  padding: var(--tn-space-4) var(--tn-space-4);
  border-bottom: 1px solid var(--tn-border-default);
}
.admin-data-table tbody tr.expansion-row:hover td {
  background-color: var(--tn-surface-inset);
}
.admin-data-table__row-actions {
  display: flex;
  gap: var(--tn-space-2);
  opacity: 0;
  transition: opacity var(--tn-transition);
}
.admin-data-table tbody tr:hover .admin-data-table__row-actions {
  opacity: 1;
}
.admin-data-table__row-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--tn-text-muted);
  cursor: pointer;
  border-radius: var(--tn-radius-sm);
  transition: background-color var(--tn-transition), color var(--tn-transition);
}
.admin-data-table__row-actions button:hover {
  background-color: var(--tn-surface-inset);
  color: var(--tn-text-default);
}
.admin-data-table__checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--tn-accent-primary);
}
.admin-data-table th:has(.admin-data-table__checkbox),
.admin-data-table td:has(.admin-data-table__checkbox) {
  width: 40px;
  padding-left: 14px;
  padding-right: 0;
}
.admin-data-table__empty {
  text-align: center;
  padding: var(--tn-space-12) var(--tn-space-6);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
}
.admin-data-table-wrap--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(var(--tn-surface-panel-rgb), 0.8);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .admin-data-table-wrap {
    overflow-x: auto;
  }
  .admin-data-table {
    min-width: 600px;
  }
}
.accordion-item {
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius);
  background: var(--tn-surface-subtle);
  margin-bottom: 8px;
  overflow: hidden;
}
.accordion-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: none;
  color: var(--tn-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  gap: 8px;
  transition: background var(--tn-transition);
}
.accordion-button:hover {
  background: rgba(255, 255, 255, 0.04);
}
.accordion-body {
  padding: 12px 16px;
  border-top: 1px solid var(--tn-border);
}
.admin-notice {
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--tn-border-default);
  background: var(--tn-surface-panel);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-surface-panel) 92%, transparent);
  }
  color: var(--tn-text-default);
  font-size: 0.92rem;
}
.admin-notice--info {
  border-color: var(--tn-info);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--tn-info) 26%, var(--tn-border-default));
  }
  background: var(--tn-info);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-info) 8%, var(--tn-surface-panel));
  }
}
.admin-notice--success {
  border-color: var(--tn-success);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--tn-success) 26%, var(--tn-border-default));
  }
  background: var(--tn-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-success) 8%, var(--tn-surface-panel));
  }
}
.admin-notice--warning {
  border-color: var(--tn-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--tn-warning) 26%, var(--tn-border-default));
  }
  background: var(--tn-warning);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-warning) 8%, var(--tn-surface-panel));
  }
}
.admin-notice--danger {
  border-color: var(--tn-error);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--tn-error) 26%, var(--tn-border-default));
  }
  background: var(--tn-error);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-error) 8%, var(--tn-surface-panel));
  }
}
.tn-noscript-notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 1.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--tn-warning, var(--tn-border-default));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--tn-warning, var(--tn-border-default)) 32%, var(--tn-border-default));
  }
  border-radius: 0.75rem;
  background: var(--tn-warning, var(--tn-surface-panel));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-warning, var(--tn-surface-panel)) 10%, var(--tn-surface-panel));
  }
  color: var(--tn-text-default);
}
.tn-noscript-notice__icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tn-warning, var(--tn-text-muted));
  flex-shrink: 0;
}
.tn-noscript-notice__body {
  flex: 1;
  min-width: 0;
}
.tn-noscript-notice__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tn-text-default);
}
.tn-noscript-notice__copy {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--tn-text-muted);
}
.tn-noscript-notice__copy + .tn-noscript-notice__copy {
  margin-top: 0.35rem;
}
.tn-noscript-notice__copy code {
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  background: var(--tn-surface-inset, var(--tn-surface-panel));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-surface-inset, var(--tn-surface-panel)) 80%, transparent);
  }
}
.admin-filters-bar {
  display: flex;
  align-items: center;
  gap: var(--tn-space-4);
  padding: var(--tn-space-4);
  background: var(--tn-surface-subtle);
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-lg);
  margin-bottom: var(--tn-space-4);
}
.admin-filters-bar__row {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  flex-wrap: wrap;
}
.admin-adv-filters {
  margin-top: var(--tn-space-3);
  padding-top: var(--tn-space-3);
  border-top: 1px solid var(--tn-border-muted);
}
.admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tn-space-4);
  margin-bottom: var(--tn-space-6);
  flex-wrap: wrap;
}
.admin-page-header__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tn-text-default);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}
.admin-page-header__subtitle {
  font-size: 0.875rem;
  color: var(--tn-text-muted);
  margin-top: 4px;
}
.admin-page-header__actions {
  display: flex;
  gap: var(--tn-space-2);
  flex-shrink: 0;
}
.admin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--tn-space-12) var(--tn-space-6);
  text-align: center;
  color: var(--tn-text-muted);
}
.admin-empty-state__icon {
  font-size: 48px;
  margin-bottom: var(--tn-space-4);
  opacity: 0.5;
}
.admin-empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tn-text-default);
  margin-bottom: var(--tn-space-2);
}
.admin-empty-state__description {
  font-size: 0.875rem;
  max-width: 400px;
}
.tool-page-status-badge--hybrid {
  background: var(--tn-warning);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-warning) 18%, transparent);
  }
  color: var(--tn-warning);
}
.tool-page-status-badge--hybrid .tool-page-status-dot {
  background: var(--tn-warning);
}
.tool-page-status-badge--serverai {
  background: var(--tn-info, var(--tn-accent-primary));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-info, var(--tn-accent-primary)) 18%, transparent);
  }
  color: var(--tn-info, var(--tn-accent-primary));
}
.tool-page-status-badge--serverai .tool-page-status-dot {
  background: var(--tn-info, var(--tn-accent-primary));
}
.tool-page-family-strip {
  background: var(--tn-surface-panel);
  border-bottom: 1px solid var(--tn-border-muted);
  color: var(--tn-text-muted);
}
.tool-page-family-label {
  color: var(--tn-text-muted);
  letter-spacing: 0.08em;
}
.tool-page-family-chip {
  color: var(--tn-text-muted);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.2;
}
.tool-page-family-chip:hover,
.tool-page-family-chip:focus-visible {
  color: var(--tn-text-default);
  background: var(--tn-surface-panel-muted);
  border-color: var(--tn-border-soft, var(--tn-surface-panel-muted));
  outline: none;
}
.tool-page-family-chip:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 1px;
}
.tool-page-family-chip--current {
  color: var(--tn-text-default);
  background: var(--tn-accent-primary-soft);
  border-color: var(--tn-accent-primary);
}
.tool-page-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2, 8px);
  padding: var(--tn-space-4, 16px);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.2s ease-out;
}
[data-runtime-template-mounted="true"] .tool-page-skeleton,
[data-runtime-template-error="true"] .tool-page-skeleton,
[data-runtime-fallback="true"] .tool-page-skeleton {
  opacity: 0;
  pointer-events: none;
}
.tool-page-skeleton-row {
  height: 14px;
  border-radius: var(--tn-radius-sm, 4px);
  background: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    var(--tn-surface-panel-muted) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    color-mix(in srgb, var(--tn-surface-panel-muted) 60%, transparent) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  }
  background-size: 200% 100%;
  animation: tool-page-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes tool-page-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.tool-page-skeleton-row--code {
  width: var(--tn-skeleton-row-fill, 70%);
  height: 12px;
}
.tool-page-skeleton-row--table-head {
  height: 18px;
  opacity: 0.9;
}
.tool-page-skeleton-row--table {
  height: 14px;
}
.tool-page-skeleton-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--tn-space-3, 12px);
}
.tool-page-skeleton-row--label {
  width: 30%;
  height: 10px;
}
.tool-page-skeleton-row--input {
  width: 100%;
  height: 32px;
}
.tool-page-skeleton-map {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--tn-space-3, 12px);
  flex: 1;
  min-height: 0;
}
.tool-page-skeleton-map-canvas {
  border-radius: var(--tn-radius-md, 8px);
  background: var(--tn-surface-panel-muted);
  animation: tool-page-skeleton-shimmer 1.4s ease-in-out infinite;
  background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    var(--tn-surface-panel-muted) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    color-mix(in srgb, var(--tn-surface-panel-muted) 60%, transparent) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  }
  background-size: 200% 100%;
}
.tool-page-skeleton-map-rail {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2, 8px);
}
.tool-page-skeleton-row--listing {
  height: 64px;
  border-radius: var(--tn-radius-md, 8px);
}
.tool-page-skeleton-bubble {
  max-width: 60%;
  height: 36px;
  border-radius: var(--tn-radius-lg, 12px);
  background: var(--tn-surface-panel-muted);
  animation: tool-page-skeleton-shimmer 1.4s ease-in-out infinite;
  background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    var(--tn-surface-panel-muted) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    color-mix(in srgb, var(--tn-surface-panel-muted) 60%, transparent) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  }
  background-size: 200% 100%;
}
.tool-page-skeleton-bubble--in {
  align-self: flex-start;
}
.tool-page-skeleton-bubble--out {
  align-self: flex-end;
  max-width: 50%;
}
.tool-page-skeleton-timeline {
  display: flex;
  gap: var(--tn-space-2, 8px);
  align-items: center;
  padding: var(--tn-space-3, 12px) 0;
  overflow: hidden;
}
.tool-page-skeleton-timeline-clip {
  flex: 1 1 0;
  height: 64px;
  border-radius: var(--tn-radius-sm, 4px);
  background: var(--tn-surface-panel-muted);
  animation: tool-page-skeleton-shimmer 1.4s ease-in-out infinite;
  background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    var(--tn-surface-panel-muted) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    color-mix(in srgb, var(--tn-surface-panel-muted) 60%, transparent) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  }
  background-size: 200% 100%;
}
.tool-page-skeleton-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--tn-space-3, 12px);
}
.tool-page-skeleton-tile {
  aspect-ratio: 1 / 1;
  border-radius: var(--tn-radius-md, 8px);
  background: var(--tn-surface-panel-muted);
  animation: tool-page-skeleton-shimmer 1.4s ease-in-out infinite;
  background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    var(--tn-surface-panel-muted) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    color-mix(in srgb, var(--tn-surface-panel-muted) 60%, transparent) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  }
  background-size: 200% 100%;
}
.tool-page-skeleton-canvas {
  flex: 1;
  border-radius: var(--tn-radius-md, 8px);
  background: var(--tn-surface-panel-muted);
  animation: tool-page-skeleton-shimmer 1.4s ease-in-out infinite;
  background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    var(--tn-surface-panel-muted) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(
    90deg,
    var(--tn-surface-panel-muted) 0%,
    color-mix(in srgb, var(--tn-surface-panel-muted) 60%, transparent) 50%,
    var(--tn-surface-panel-muted) 100%
  );
  }
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .tool-page-skeleton-row,
  .tool-page-skeleton-bubble,
  .tool-page-skeleton-tile,
  .tool-page-skeleton-canvas,
  .tool-page-skeleton-map-canvas,
  .tool-page-skeleton-timeline-clip {
    animation: none;
    background: var(--tn-surface-panel-muted);
  }
}
body[data-shell-surface="public"] svg.material-symbols-outlined {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}
.breadcrumb-shell {
  background: var(--tn-surface-panel-muted);
  border-bottom: 2px solid rgb(var(--tn-color-ink-rgb) / 0.1);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: "Poppins", sans-serif;
  padding: 7px 20px;
  flex-shrink: 0;
}
.breadcrumb-shell__links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.breadcrumb-shell__link {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
  color: var(--tn-color-muted);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-decoration: none;
}
.breadcrumb-shell__link:hover {
  color: var(--tn-color-pink);
  text-decoration: none;
}
.breadcrumb-shell__link-icon {
  font-size: 13px;
}
.breadcrumb-shell__separator {
  font-size: 13px;
  color: rgb(var(--tn-color-ink-rgb) / 0.3);
}
.header-shell__icon {
  font-size: 14px;
}
.header-shell__icon--lg {
  font-size: 18px;
}
.header-shell__icon--sm {
  font-size: 12px;
}
.header-shell__icon--fill {
  font-variation-settings: "FILL" 1;
}
.header-shell__palette-results {
  max-height: 340px;
}
.header-shell__kbd-hint--auto {
  margin-left: auto;
}
.footer-shell__icon {
  color: var(--tn-color-pink);
  font-size: 22px;
}
.footer-shell__title-text {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--tn-color-ink);
}
.footer-shell__copy-text {
  color: var(--tn-text-muted);
  font-family: "Poppins", sans-serif;
}
.footer-shell__status-dot {
  background: var(--tn-color-teal);
  border: 1px solid rgb(var(--tn-color-ink-rgb) / 0.3);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.sticky-footer-ad__icon {
  font-size: 12px;
  color: inherit;
  vertical-align: middle;
}
.breadcrumb-shell__current {
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  color: var(--tn-color-ink);
}
.breadcrumb-shell__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.breadcrumb-shell__action-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: background 0.15s ease,
        border-color 0.15s ease;
  color: var(--tn-text-default);
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
.breadcrumb-shell__action-link:hover {
  background: rgb(var(--tn-color-pink-rgb) / 0.1);
  border-color: rgb(var(--tn-color-ink-rgb) / 0.1);
  color: var(--tn-text-default);
}
.breadcrumb-shell__action-icon {
  font-size: 16px;
}
.breadcrumb-shell__action-text {
  font-weight: 500;
}
.breadcrumb-shell__divider {
  width: 1px;
  height: 12px;
  background: rgb(var(--tn-color-ink-rgb) / 0.15);
  margin: 0 4px;
}
.breadcrumb-shell__btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  border: 2px solid transparent;
  background: transparent;
  transition: background 0.15s ease,
        border-color 0.15s ease;
  color: var(--tn-color-muted);
  cursor: pointer;
}
.breadcrumb-shell__btn:hover {
  background: rgb(var(--tn-color-pink-rgb) / 0.1);
  border-color: rgb(var(--tn-color-ink-rgb) / 0.1);
  color: var(--tn-color-ink);
}
.breadcrumb-shell__btn-icon {
  font-size: 18px;
}
.breadcrumb-shell__quick-links {
  display: none;
  align-items: center;
  gap: 12px;
  color: var(--tn-text-muted);
  font-family: "Poppins", sans-serif;
}
@media (min-width: 768px) {
  .breadcrumb-shell__quick-links {
    display: flex;
  }
}
.breadcrumb-shell__quick-link {
  transition: color 0.15s ease;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--tn-text-default);
}
.breadcrumb-shell__quick-link:hover {
  text-decoration: none;
  color: var(--tn-accent-text);
}
.breadcrumb-shell__quick-separator {
  color: rgb(var(--tn-color-ink-rgb) / 0.2);
}
.shell-skip-link {
  position: fixed;
  top: var(--tn-space-4);
  left: var(--tn-space-4);
  z-index: 1000;
  transform: translateY(calc(-100% - var(--tn-space-6)));
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--tn-space-4);
  border: 1px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-elevated);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-floating);
  font-size: var(--tn-font-size-sm);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition);
}
.shell-skip-link:focus,
.shell-skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--tn-shadow-focus), var(--tn-shadow-floating);
}
.header-shell {
  min-height: var(--tn-shell-header-height);
  height: var(--tn-shell-header-height);
  padding-inline: var(--tn-space-5);
  border-bottom: 1px solid var(--tn-header-border);
  background: var(--tn-header-bg);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-header);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 1000;
}
.header-shell__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 900;
  letter-spacing: var(--tn-tracking-heading);
  text-decoration: none;
  white-space: nowrap;
}
.header-shell__brand::before {
  content: "TN";
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-md);
  background: var(--tn-accent-primary);
  color: var(--tn-color-ink);
  font-size: var(--tn-font-size-xs);
  font-weight: 900;
  box-shadow: var(--tn-shadow-sm);
}
.header-shell__nav {
  display: none;
  align-items: center;
  gap: var(--tn-space-1);
}
.header-shell__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: var(--tn-space-3);
  border: 1px solid transparent;
  border-radius: var(--tn-radius-pill);
  color: var(--tn-text-muted);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--tn-transition),
        border-color var(--tn-transition),
        color var(--tn-transition),
        transform var(--tn-transition);
}
.header-shell__nav-link:hover,
.header-shell__nav-link:focus-visible {
  border-color: var(--tn-border-muted);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  transform: translateY(-1px);
}
.header-shell__nav-link--active {
  border-color: var(--tn-border-strong);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-color-ink);
}
.header-shell__mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding-inline: var(--tn-space-3);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--tn-shadow-sm);
}
.header-shell__controls {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}
.header-shell__text-size-control,
#text-size-control {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
}
.header-shell__text-size-control-button,
#text-size-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--tn-radius-pill);
  background: transparent;
  color: var(--tn-text-muted);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-xs);
  font-weight: 900;
  cursor: pointer;
  transition: background var(--tn-transition),
        color var(--tn-transition);
}
.header-shell__text-size-control-button:hover,
#text-size-control button:hover {
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
}
.header-shell__ts-display,
.ts-display {
  min-width: 38px;
  color: var(--tn-text-soft);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  font-weight: 800;
  text-align: center;
}
.header-shell__focus-mode-btn,
.header-shell__theme-toggle,
.header-shell__settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-pill);
  background: transparent;
  color: var(--tn-text-muted);
  cursor: pointer;
  transition: background var(--tn-transition),
        border-color var(--tn-transition),
        color var(--tn-transition),
        transform var(--tn-transition);
}
.header-shell__focus-mode-btn:hover,
.header-shell__theme-toggle:hover,
.header-shell__settings-btn:hover {
  border-color: var(--tn-border-muted);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  transform: translateY(-1px);
}
.header-shell__account-btn {
  display: none;
  align-items: center;
  gap: var(--tn-space-2);
  min-height: 38px;
  padding: 3px var(--tn-space-3) 3px 3px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  cursor: pointer;
  box-shadow: var(--tn-shadow-sm);
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition);
}
.header-shell__account-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: none;
}
.header-shell__account-avatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
  flex-shrink: 0;
}
.header-shell__account-name {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
}
.header-shell__icon--sm {
  font-size: 16px;
}
.header-shell__icon--lg {
  font-size: 20px;
}
.header-shell__icon--fill {
  font-variation-settings: "FILL" 1;
}
.search-wrapper,
.header-shell__search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
#search-input-main,
.header-shell__search-input {
  width: min(260px, 28vw);
  min-height: 38px;
  padding: 0 52px 0 38px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  box-shadow: var(--tn-shadow-teal);
  transition: box-shadow var(--tn-transition),
        border-color var(--tn-transition);
}
#search-input-main:focus,
.header-shell__search-input:focus {
  outline: 0;
  border-color: var(--tn-border-strong);
  box-shadow: var(--tn-shadow-pink);
}
#search-input-main::placeholder,
.header-shell__search-input::placeholder {
  color: var(--tn-text-soft);
}
.search-icon-left,
.header-shell__search-icon {
  position: absolute;
  left: var(--tn-space-3);
  color: var(--tn-text-soft);
  font-size: 18px;
  pointer-events: none;
  z-index: 1;
}
.search-mode-chip,
.header-shell__search-mode-chip {
  display: none;
}
.search-kbd-hint,
.header-shell__search-kbd-hint {
  position: absolute;
  right: var(--tn-space-3);
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-soft);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  font-weight: 800;
  pointer-events: none;
}
#search-palette {
  display: none;
  position: absolute;
  top: calc(100% + var(--tn-space-2));
  right: 0;
  width: min(420px, 92vw);
  max-height: 440px;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-floating);
  overflow: hidden;
  z-index: 200;
}
#search-palette.open {
  display: flex;
  flex-direction: column;
}
.palette-results-wrap {
  flex: 1;
  overflow-y: auto;
  padding: var(--tn-space-3);
  background: var(--tn-surface-panel);
}
.palette-footer {
  display: flex;
  gap: var(--tn-space-3);
  padding: var(--tn-space-3);
  border-top: 1px solid var(--tn-border-muted);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-micro);
}
.palette-footer kbd {
  padding: 1px 6px;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
}
.mono-sans-tight,
.inter-spaced {
  font-family: var(--tn-font-body);
}
@media (min-width: 768px) {
  .header-shell__nav {
    display: flex;
  }
  .header-shell__mobile-cta {
    display: none;
  }
}
@media (min-width: 1024px) {
  .header-shell__text-size-control,
    #text-size-control,
    .header-shell__account-btn {
    display: inline-flex;
  }
}
@media (max-width: 640px) {
  .header-shell {
    padding-inline: var(--tn-space-3);
  }
  .header-shell__brand {
    font-size: var(--tn-font-size-base);
  }
  .header-shell__focus-mode-btn,
    .header-shell__settings-btn {
    display: none;
  }
}
.header-shell__auth-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-shell__login-btn,
.header-shell__signup-btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.header-shell__login-btn {
  background: transparent;
  color: var(--tn-text-default);
  border: 2px solid var(--tn-border-default);
  box-shadow: 2px 2px 0 rgba(26, 26, 46, 0.1);
}
.header-shell__login-btn:hover {
  background: var(--tn-surface-panel-muted);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(26, 26, 46, 0.1);
}
.header-shell__signup-btn {
  background: var(--tn-accent-primary);
  color: var(--tn-color-ink);
  border: 2px solid var(--tn-border-strong);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
}
.header-shell__signup-btn:hover {
  background: var(--tn-accent-primary-strong);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--tn-border-strong);
}
body.palette-open {
  overflow: hidden;
}
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: start center;
  padding: 12vh var(--tn-space-4) var(--tn-space-4);
}
.command-palette__overlay {
  position: absolute;
  inset: 0;
  background: rgb(var(--tn-color-ink-rgb) / 0.48);
}
html.dark .command-palette__overlay {
  background: rgb(var(--tn-color-ink-rgb) / 0.68);
}
.command-palette__content {
  position: relative;
  width: min(640px, calc(100vw - var(--tn-space-8)));
  max-height: min(680px, 76vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-floating);
}
.command-palette__search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tn-space-2);
  min-height: 48px;
  padding: 0 var(--tn-space-3);
  border-bottom: 1px solid var(--tn-border-muted);
  color: var(--tn-text-muted);
}
.command-palette__search .material-symbols-outlined {
  font-size: 18px;
}
.command-palette__search input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--tn-text-default);
  font: inherit;
  font-size: var(--tn-font-size-base);
  outline: 0;
}
.command-palette__search input::placeholder {
  color: var(--tn-text-soft);
}
.command-palette kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 var(--tn-space-1);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-subtle);
  color: var(--tn-text-muted);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  font-weight: 600;
  line-height: 1;
}
.command-palette__results {
  min-height: 160px;
  overflow-y: auto;
  padding: var(--tn-space-2);
}
.command-group + .command-group {
  margin-top: var(--tn-space-3);
}
.command-group__label {
  padding: var(--tn-space-2) var(--tn-space-2) var(--tn-space-1);
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
  font-weight: 700;
  line-height: var(--tn-leading-heading);
}
.command-item,
.command-result--empty {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
}
.command-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tn-space-3);
  min-height: 48px;
  padding: var(--tn-space-2);
  text-align: left;
  transition: background var(--tn-transition),
    border-color var(--tn-transition);
}
.command-item:hover,
.command-item.is-focused {
  border-color: var(--tn-border-muted);
  background: var(--tn-surface-subtle);
}
.command-item__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-micro);
  font-weight: 800;
}
.command-item__icon.material-symbols-outlined {
  font-size: 18px;
  font-weight: 400;
}
.command-item__label {
  min-width: 0;
}
.command-item__label strong,
.command-item__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.command-item__label strong {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 650;
}
.command-item__meta {
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
}
.command-result--empty {
  display: grid;
  gap: var(--tn-space-1);
  padding: var(--tn-space-6);
  background: var(--tn-surface-subtle);
  text-align: center;
}
.command-result--empty strong {
  font-size: var(--tn-font-size-sm);
}
.command-result--empty p {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
}
.command-palette__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--tn-space-2);
  padding: var(--tn-space-2) var(--tn-space-3);
  border-top: 1px solid var(--tn-border-muted);
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
}
.command-palette__footer span {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
}
@media (max-width: 768px) {
  .command-palette {
    place-items: start center;
    padding-top: var(--tn-space-4);
  }
  .command-palette__content {
    width: min(100%, calc(100vw - var(--tn-space-4)));
    max-height: calc(100vh - var(--tn-space-8));
  }
  .command-palette__footer {
    display: none;
  }
}
.sidebar-shell {
  width: var(--tn-shell-sidebar-expanded);
  min-width: var(--tn-shell-sidebar-expanded);
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 9981;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--tn-surface-panel);
  border-right: 1px solid var(--tn-border-muted);
  box-shadow: 0 0 1px rgba(0,0,0,0.06), 1px 0 12px rgba(0,0,0,0.05);
  color: var(--tn-text-default);
  transition: width var(--tn-transition),
    min-width var(--tn-transition),
    background var(--tn-transition),
    border-color var(--tn-transition),
    box-shadow var(--tn-transition);
}
html.dark .sidebar-shell {
  background: var(--tn-surface-panel-strong);
  border-right-color: var(--tn-border-muted);
  box-shadow: 0 0 1px rgba(0,0,0,0.12), 1px 0 16px rgba(0,0,0,0.22);
}
.sidebar-shell.is-collapsed {
  width: var(--tn-shell-sidebar-collapsed);
  min-width: var(--tn-shell-sidebar-collapsed);
}
.sidebar-shell__top {
  display: grid;
  gap: var(--tn-space-2);
  padding: var(--tn-space-3);
  border-bottom: 1px solid var(--tn-border-muted);
  flex-shrink: 0;
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
  min-height: 40px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  min-width: 0;
  color: var(--tn-text-default);
  text-decoration: none;
}
.brand-glyph {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--tn-radius-md);
  background: var(--tn-accent-primary);
  color: var(--tn-color-paper);
}
.brand-glyph .material-symbols-outlined {
  font-size: 19px;
  line-height: 1;
}
.brand-name {
  display: grid;
  min-width: 0;
  transition: opacity var(--tn-transition),
    width var(--tn-transition);
}
.brand-name__title {
  overflow: hidden;
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 650;
  line-height: var(--tn-leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-name__meta {
  overflow: hidden;
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-micro);
  line-height: var(--tn-leading-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-collapse-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-muted);
  transition: background var(--tn-transition),
    border-color var(--tn-transition),
    color var(--tn-transition);
}
.sidebar-collapse-btn:hover {
  background: var(--tn-surface-subtle);
  border-color: var(--tn-border-muted);
  color: var(--tn-text-default);
}
.sidebar-collapse-btn:focus-visible {
  background: var(--tn-surface-subtle);
  border-color: var(--tn-accent-primary);
  color: var(--tn-text-default);
  outline: 2px solid var(--tn-accent-focus);
  outline-offset: 2px;
}
.sidebar-collapse-btn .material-symbols-outlined {
  font-size: 18px;
}
.sidebar-search-wrap {
  min-width: 0;
}
.sidebar-command-trigger {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tn-space-2);
  padding: 0 var(--tn-space-3);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-subtle);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  text-align: left;
  transition: background var(--tn-transition),
    border-color var(--tn-transition),
    color var(--tn-transition),
    box-shadow var(--tn-transition);
}
.sidebar-command-trigger:hover {
  border-color: var(--tn-border-default);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
}
.sidebar-command-trigger:focus-visible {
  border-color: var(--tn-accent-primary);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  box-shadow: 0 0 0 2px var(--tn-accent-focus);
}
.sidebar-command-trigger .nav-icon {
  width: 16px;
  height: 16px;
  font-size: 17px;
}
.sidebar-command-trigger__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-command-trigger kbd {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 var(--tn-space-1);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-panel-strong);
  color: var(--tn-text-muted);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  line-height: 1;
}
.sidebar-shell__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  padding: var(--tn-space-2) var(--tn-space-3);
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-section-label,
.sidebar-shell__nav-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
  min-height: 28px;
  margin: var(--tn-space-3) 0 var(--tn-space-1);
  padding: 0 var(--tn-space-2);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: var(--tn-leading-heading);
}
.nav-section-label:first-child,
.sidebar-shell__nav-group:first-child {
  margin-top: var(--tn-space-1);
}
.sidebar-shell__group-count {
  color: var(--tn-text-soft);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  font-weight: 500;
}
.sidebar-nav-item,
.sidebar-docs__nav-link,
.sidebar-shell__nav-link {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding: var(--tn-space-1) var(--tn-space-2);
  border: 1px solid transparent;
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-secondary);
  font-size: var(--tn-font-size-sm);
  font-weight: 500;
  line-height: var(--tn-leading-heading);
  text-decoration: none;
  transition: background var(--tn-transition),
    border-color var(--tn-transition),
    color var(--tn-transition);
}
.sidebar-nav-item:hover,
.sidebar-docs__nav-link:hover,
.sidebar-shell__nav-link:hover {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
}
.sidebar-nav-item:focus-visible,
.sidebar-docs__nav-link:focus-visible,
.sidebar-shell__nav-link:focus-visible {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: -2px;
}
.sidebar-nav-item.active,
.sidebar-docs__nav-link--active,
.sidebar-docs__nav-link.active,
.sidebar-shell__nav-link--active,
.sidebar-shell__nav-link.active {
  background: var(--tn-accent-primary-soft);
  border-color: rgb(var(--tn-color-pink-rgb) / 0.15);
  color: var(--tn-accent-primary-strong);
  font-weight: 600;
}
.sidebar-nav-item.active::before,
.sidebar-docs__nav-link--active::before,
.sidebar-docs__nav-link.active::before,
.sidebar-shell__nav-link--active::before,
.sidebar-shell__nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--tn-accent-primary);
}
.nav-icon,
.sidebar-shell__nav-link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--tn-text-muted);
  font-size: 18px;
  transition: color var(--tn-transition);
}
.sidebar-nav-item:hover .nav-icon,
.sidebar-nav-item.active .nav-icon,
.sidebar-shell__nav-link:hover .sidebar-shell__nav-link-icon,
.sidebar-shell__nav-link.active .sidebar-shell__nav-link-icon {
  color: currentColor;
}
.sidebar-nav-item.active .nav-icon,
.sidebar-shell__nav-link.active .sidebar-shell__nav-link-icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.nav-label,
.sidebar-docs__nav-link-label,
.sidebar-shell__nav-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--tn-transition),
    width var(--tn-transition);
}
.sidebar-shell__nav-link-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
  flex: 1;
}
.sidebar-shell__nav-link-badge {
  min-width: 0;
  padding: 1px var(--tn-space-1);
  border: none;
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-inset);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-micro);
  font-weight: 500;
  line-height: 1.5;
}
.sidebar-nav-item.active .sidebar-shell__nav-link-badge,
.sidebar-shell__nav-link--active .sidebar-shell__nav-link-badge {
  background: var(--tn-accent-primary-strong);
  color: var(--tn-color-paper);
}
.sidebar-footer {
  display: grid;
  gap: var(--tn-space-2);
  margin-top: auto;
  padding: var(--tn-space-3);
  border-top: 1px solid var(--tn-border-muted);
  background: var(--tn-surface-panel);
  flex-shrink: 0;
}
.sidebar-footer:has(.sidebar-footer__controls:empty) {
  padding: 0;
  border-top: none;
  gap: 0;
}
.sidebar-footer__controls {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.sidebar-text-scale,
.sidebar-theme-toggle {
  min-height: 28px;
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-subtle);
  color: var(--tn-text-muted);
}
.sidebar-text-scale {
  display: grid;
  grid-template-columns: 28px minmax(34px, 1fr) 28px;
  align-items: center;
  overflow: hidden;
}
.sidebar-text-scale button,
.sidebar-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tn-transition),
    color var(--tn-transition);
}
.sidebar-text-scale button {
  height: 28px;
  color: var(--tn-text-muted);
  font-weight: 700;
}
.sidebar-text-scale button:hover,
.sidebar-text-scale button:focus-visible,
.sidebar-theme-toggle:hover,
.sidebar-theme-toggle:focus-visible {
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
}
.sidebar-text-scale span {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-micro);
  text-align: center;
}
.sidebar-theme-toggle {
  gap: var(--tn-space-1);
  width: 100%;
  padding: 0 var(--tn-space-2);
  justify-content: flex-start;
}
.sidebar-theme-toggle .material-symbols-outlined {
  font-size: 17px;
}
.theme-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  min-width: 0;
  min-height: 40px;
  padding: var(--tn-space-1) var(--tn-space-2);
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
  text-decoration: none;
  transition: background var(--tn-transition);
}
.sidebar-user:hover,
.sidebar-user:focus-visible {
  background: var(--tn-surface-subtle);
}
.user-avatar {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-panel);
  color: var(--tn-accent-primary-strong);
  font-size: var(--tn-font-size-xs);
  font-weight: 700;
}
.user-avatar .material-symbols-outlined {
  font-size: 16px;
}
.user-info {
  display: grid;
  min-width: 0;
  transition: opacity var(--tn-transition),
    width var(--tn-transition);
}
.user-name,
.user-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-name {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  line-height: var(--tn-leading-tight);
}
.user-role {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-micro);
  line-height: var(--tn-leading-heading);
}
.styled-scroll {
  scrollbar-color: var(--tn-border-muted) transparent;
  scrollbar-width: thin;
}
.styled-scroll::-webkit-scrollbar {
  width: var(--tn-space-1);
}
.styled-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.styled-scroll::-webkit-scrollbar-thumb {
  background: var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
}
.styled-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--tn-border-default);
}
.sidebar-user__chevron {
  margin-left: auto;
  color: var(--tn-text-muted);
  font-size: 18px;
  transition: transform var(--tn-transition), color var(--tn-transition);
}
.sidebar-user:hover .sidebar-user__chevron {
  color: var(--tn-text-default);
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .sidebar-shell:not(.is-collapsed, .is-micro) {
    --tn-shell-sidebar-expanded: 240px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-shell,
  .sidebar-collapse-btn,
  .sidebar-command-trigger,
  .sidebar-nav-item,
  .sidebar-docs__nav-link,
  .sidebar-shell__nav-link,
  .sidebar-user,
  .nav-icon,
  .sidebar-shell__nav-link-icon,
  .sidebar-user__chevron,
  .brand-name {
    transition: none;
  }
}
.sidebar-auth-cta {
  margin-top: 0;
  padding: var(--tn-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  border: none;
  border-radius: var(--tn-radius-md);
  background: transparent;
}
.sidebar-auth-cta__text {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.sidebar-auth-cta__btn {
  align-self: stretch;
  min-height: 36px;
  padding: 0 var(--tn-space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tn-accent-primary);
  border-radius: var(--tn-radius-md);
  background: var(--tn-accent-primary);
  color: var(--tn-color-paper);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--tn-transition), border-color var(--tn-transition);
}
.sidebar-auth-cta__btn:hover {
  background: var(--tn-accent-primary-strong);
  border-color: var(--tn-accent-primary-strong);
}
.sidebar-shell.is-collapsed .sidebar-auth-cta {
  margin-top: 0;
  padding: var(--tn-space-2);
  border: none;
  background: transparent;
  justify-content: center;
}
.sidebar-shell.is-collapsed .sidebar-auth-cta__text {
  display: none;
}
.sidebar-shell.is-collapsed .sidebar-auth-cta__btn {
  align-self: center;
  min-height: 32px;
  padding: 0 var(--tn-space-3);
  font-size: var(--tn-font-size-xs);
}
.sidebar-shell.is-collapsed .brand-name,
.sidebar-shell.is-collapsed .sidebar-command-trigger__label,
.sidebar-shell.is-collapsed .sidebar-command-trigger kbd,
.sidebar-shell.is-collapsed .nav-label,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link-label,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link-label,
.sidebar-shell.is-collapsed .sidebar-text-scale,
.sidebar-shell.is-collapsed .sidebar-theme-toggle .theme-label,
.sidebar-shell.is-collapsed .user-info,
.sidebar-shell.is-collapsed .sidebar-user__chevron {
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.sidebar-shell.is-collapsed .sidebar-shell__top {
  padding: var(--tn-space-2);
  border-bottom: 1px solid var(--tn-border-muted);
}
.sidebar-shell.is-collapsed .sidebar-header {
  justify-content: center;
  padding-bottom: 0;
}
.sidebar-shell.is-collapsed .sidebar-brand {
  display: flex;
}
.sidebar-shell.is-collapsed .brand-name {
  display: none;
}
.sidebar-shell.is-collapsed .sidebar-command-trigger {
  grid-template-columns: auto;
  justify-content: center;
  padding: 0;
  min-height: 40px;
  border-radius: var(--tn-radius-md);
  border-color: transparent;
  background: transparent;
}
.sidebar-shell.is-collapsed .sidebar-command-trigger:hover,
.sidebar-shell.is-collapsed .sidebar-command-trigger:focus-visible {
  background: var(--tn-surface-subtle);
}
.sidebar-shell.is-collapsed .sidebar-command-trigger .nav-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  margin: 0;
}
.sidebar-shell.is-collapsed .sidebar-shell__nav {
  padding: var(--tn-space-2) var(--tn-space-1);
  gap: var(--tn-space-1);
}
.sidebar-shell.is-collapsed .nav-section-label,
.sidebar-shell.is-collapsed .sidebar-shell__nav-group {
  justify-content: center;
  min-height: 0;
  height: 0;
  margin: var(--tn-space-3) auto;
  padding: 0;
  border: none;
  position: relative;
}
.sidebar-shell.is-collapsed .nav-section-label::after,
.sidebar-shell.is-collapsed .sidebar-shell__nav-group::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--tn-border-muted);
  border-radius: 1px;
}
.sidebar-shell.is-collapsed .nav-section-label span,
.sidebar-shell.is-collapsed .sidebar-shell__nav-group span {
  display: none;
}
.sidebar-shell.is-collapsed .sidebar-shell__group-count {
  display: none;
}
.sidebar-shell.is-collapsed .sidebar-nav-item,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link {
  display: grid;
  place-items: center;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-md);
  position: relative;
  color: var(--tn-text-secondary);
  transition: background var(--tn-transition),
    color var(--tn-transition);
}
.sidebar-shell.is-collapsed .sidebar-nav-item:hover,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link:hover,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link:hover {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
}
.sidebar-shell.is-collapsed .sidebar-nav-item:focus-visible,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link:focus-visible,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link:focus-visible {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: -2px;
}
.sidebar-shell.is-collapsed .sidebar-nav-item.active,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link--active,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link.active,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link--active,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link.active {
  background: var(--tn-accent-primary-soft);
  border-color: rgb(var(--tn-color-pink-rgb) / 0.15);
  color: var(--tn-accent-primary-strong);
}
.sidebar-shell.is-collapsed .sidebar-nav-item.active::before,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link--active::before,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link.active::before,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link--active::before,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--tn-accent-primary);
}
.sidebar-shell.is-collapsed .nav-icon,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: currentColor;
  margin: 0;
}
.sidebar-shell.is-collapsed .sidebar-nav-item.active .nav-icon,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link.active .sidebar-shell__nav-link-icon,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link.active .sidebar-shell__nav-link-icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.sidebar-shell.is-collapsed .sidebar-nav-item[data-tooltip]::after,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link[data-tooltip]::after,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 5px 10px;
  background: var(--tn-surface-panel-strong);
  color: var(--tn-text-default);
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
  font-family: var(--tn-font-body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
  box-shadow: var(--tn-shadow-floating);
  transition: opacity 120ms ease,
    transform 150ms ease;
  transition-delay: 180ms;
}
.sidebar-shell.is-collapsed .sidebar-nav-item[data-tooltip]:hover::after,
.sidebar-shell.is-collapsed .sidebar-nav-item[data-tooltip]:focus-visible::after,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link[data-tooltip]:hover::after,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link[data-tooltip]:focus-visible::after,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link[data-tooltip]:hover::after,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sidebar-rail-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10050;
  max-width: min(280px, calc(100vw - 24px));
  padding: 6px 10px;
  background: var(--tn-surface-panel-strong);
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-floating);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
  line-height: var(--tn-leading-heading);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 120ms ease, transform 150ms ease;
  white-space: nowrap;
}
.sidebar-rail-tooltip[data-open="true"] {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sidebar-shell.is-collapsed .sidebar-footer {
  padding: var(--tn-space-2);
  border-top: 1px solid var(--tn-border-muted);
}
.sidebar-shell.is-collapsed .sidebar-footer__controls {
  justify-content: center;
  grid-template-columns: auto;
}
.sidebar-shell.is-collapsed .sidebar-user {
  justify-content: center;
}
.sidebar-shell.is-collapsed .sidebar-auth-cta__text {
  display: none;
}
.sidebar-shell.is-collapsed .sidebar-auth-cta {
  justify-content: center;
}
.sidebar-shell.is-collapsed .sidebar-auth-cta__btn {
  font-size: var(--tn-font-size-xs);
  padding: var(--tn-space-1) var(--tn-space-2);
}
.sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__identity,
.sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__chev {
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__trigger {
  justify-content: center;
  padding: var(--tn-space-1);
  border: none;
  background: transparent;
}
.sidebar-shell.is-collapsed .account-menu--sidebar {
  justify-content: center;
}
.sidebar-shell.is-collapsed .sidebar-theme-toggle {
  justify-content: center;
  padding: 0;
  min-height: 36px;
  border-radius: var(--tn-radius-md);
}
.sidebar-shell.is-collapsed .sidebar-theme-toggle .material-symbols-outlined {
  font-size: 18px;
  margin: 0;
}
.sidebar-shell.is-micro {
  width: var(--tn-shell-sidebar-micro);
  min-width: var(--tn-shell-sidebar-micro);
}
.sidebar-shell.is-micro .sidebar-search-wrap,
.sidebar-shell.is-micro .sidebar-shell__nav,
.sidebar-shell.is-micro .sidebar-footer__controls,
.sidebar-shell.is-micro .sidebar-brand {
  display: none;
}
.sidebar-shell.is-micro .sidebar-shell__top {
  padding: var(--tn-space-2);
  border-bottom: none;
}
.sidebar-shell.is-micro .sidebar-header {
  justify-content: center;
}
.sidebar-shell.is-micro .sidebar-footer {
  padding: var(--tn-space-2);
  border-top: 1px solid var(--tn-border-muted);
  background: transparent;
}
.sidebar-shell.is-micro .sidebar-user {
  justify-content: center;
  padding: 0;
}
.sidebar-shell.is-micro .account-menu--sidebar .account-menu__identity,
.sidebar-shell.is-micro .account-menu--sidebar .account-menu__chev {
  display: none;
}
.sidebar-shell.is-micro .account-menu--sidebar .account-menu__trigger {
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
}
.sidebar-shell.is-micro .account-menu--sidebar {
  justify-content: center;
}
@media (max-width: 1023px) {
  .sidebar-shell.is-collapsed,
  .sidebar-shell.is-micro {
    width: min(var(--tn-shell-sidebar-expanded), 86vw);
    min-width: min(var(--tn-shell-sidebar-expanded), 86vw);
  }
  .sidebar-shell.is-collapsed .brand-name,
  .sidebar-shell.is-collapsed .sidebar-command-trigger__label,
  .sidebar-shell.is-collapsed .sidebar-command-trigger kbd,
  .sidebar-shell.is-collapsed .nav-section-label span,
  .sidebar-shell.is-collapsed .nav-label,
  .sidebar-shell.is-collapsed .sidebar-docs__nav-link-label,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link-label,
  .sidebar-shell.is-collapsed .user-info,
  .sidebar-shell.is-collapsed .sidebar-user__chevron {
    width: auto;
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar-shell.is-collapsed .sidebar-brand,
  .sidebar-shell.is-micro .sidebar-search-wrap,
  .sidebar-shell.is-micro .sidebar-shell__nav,
  .sidebar-shell.is-micro .sidebar-footer__controls,
  .sidebar-shell.is-micro .sidebar-brand {
    display: flex;
  }
  .sidebar-shell.is-collapsed .sidebar-command-trigger {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .sidebar-shell.is-collapsed .sidebar-command-trigger,
  .sidebar-shell.is-collapsed .sidebar-nav-item,
  .sidebar-shell.is-collapsed .sidebar-docs__nav-link,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link {
    justify-content: flex-start;
    padding-right: var(--tn-space-2);
    padding-left: var(--tn-space-2);
  }
  .sidebar-shell.is-collapsed .nav-section-label,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-group {
    min-height: var(--tn-space-8);
    margin: var(--tn-space-3) var(--tn-space-1) var(--tn-space-1);
    height: auto;
  }
  .sidebar-shell.is-collapsed .nav-section-label::after,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-group::after {
    display: none;
  }
  .sidebar-shell.is-collapsed .sidebar-nav-item[data-tooltip]::after,
  .sidebar-shell.is-collapsed .sidebar-docs__nav-link[data-tooltip]::after,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link[data-tooltip]::after {
    display: none;
  }
}
.mobile-nav {
  display: none;
}
@media (max-width: 1023px) {
  .mobile-nav {
    display: contents;
  }
  .mobile-nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgb(0 0 0 / 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
  }
  .mobile-nav.is-open .mobile-nav__backdrop {
    opacity: 1;
    visibility: visible;
  }
  .mobile-nav__panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9991;
    width: min(300px, 85vw);
    display: flex;
    flex-direction: column;
    background: var(--tn-surface-panel);
    border-right: 1px solid var(--tn-border-default);
    box-shadow: var(--tn-shadow-lg);
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-nav.is-open .mobile-nav__panel {
    transform: translateX(0);
  }
  .mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--tn-border-default);
    flex-shrink: 0;
  }
  .mobile-nav__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--tn-text-default);
  }
  .mobile-nav__brand-mark {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav__brand-mark img {
    width: 24px;
    height: 24px;
    display: block;
  }
  .mobile-nav__brand-name {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .mobile-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--tn-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .mobile-nav__close:hover {
    color: var(--tn-text-default);
    background: var(--tn-surface-inset);
  }
  .mobile-nav__close:focus-visible {
    outline: 2px solid var(--tn-accent-primary);
    outline-offset: 2px;
  }
  .mobile-nav__close .material-symbols-outlined {
    font-size: 20px;
  }
  .mobile-nav__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 1rem 0;
    padding: 0 0.75rem;
    height: 40px;
    background: var(--tn-surface-inset);
    border: 1px solid var(--tn-border-default);
    border-radius: 8px;
    color: var(--tn-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 120ms ease;
    flex-shrink: 0;
  }
  .mobile-nav__search:hover {
    border-color: var(--tn-border-strong);
  }
  .mobile-nav__search:focus-visible {
    outline: 2px solid var(--tn-accent-primary);
    outline-offset: 2px;
  }
  .mobile-nav__search .material-symbols-outlined {
    font-size: 18px;
  }
  .mobile-nav__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.75rem;
    flex: 1;
  }
  .mobile-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 44px;
    padding: 0 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--tn-text-secondary);
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .mobile-nav__link:hover {
    color: var(--tn-text-default);
    background: var(--tn-surface-inset);
  }
  .mobile-nav__link:focus-visible {
    outline: 2px solid var(--tn-accent-primary);
    outline-offset: -2px;
  }
  .mobile-nav__link.is-active {
    color: var(--tn-text-default);
    background: var(--tn-surface-inset);
    font-weight: 600;
  }
  .mobile-nav__link .material-symbols-outlined {
    font-size: 20px;
    color: var(--tn-text-muted);
  }
  .mobile-nav__link.is-active .material-symbols-outlined {
    color: var(--tn-accent-primary);
  }
  .mobile-nav__divider {
    height: 1px;
    margin: 0.25rem 0.75rem;
    background: var(--tn-border-default);
  }
  .mobile-nav__auth {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: auto;
    border-top: 1px solid var(--tn-border-default);
    flex-shrink: 0;
  }
  .mobile-nav__auth-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 120ms ease;
  }
  .mobile-nav__auth-primary--login {
    background: var(--tn-accent-primary);
    color: var(--tn-color-paper);
  }
  .mobile-nav__auth-primary--login:hover {
    opacity: 0.9;
  }
  .mobile-nav__auth-primary--register {
    background: var(--tn-surface-inset);
    color: var(--tn-text-default);
    border: 1px solid var(--tn-border-default);
  }
  .mobile-nav__auth-primary--register:hover {
    background: var(--tn-surface-panel);
  }
  .mobile-nav__account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--tn-text-default);
    transition: background-color 120ms ease;
  }
  .mobile-nav__account:hover {
    background: var(--tn-surface-inset);
  }
  .mobile-nav__account-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--tn-accent-primary);
    color: var(--tn-color-paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
  }
  .mobile-nav__account-info {
    display: grid;
    min-width: 0;
  }
  .mobile-nav__account-name {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-nav__account-email {
    font-size: 0.75rem;
    color: var(--tn-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.mobile-nav-open {
    overflow: hidden;
  }
}
@media (min-width: 1024px) {
  .mobile-nav {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav__backdrop,
    .mobile-nav__panel {
    transition: none;
  }
}
@media (max-width: 1023px) {
  .sidebar-shell {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9991;
    width: min(var(--tn-shell-sidebar-expanded), 86vw);
    min-width: min(var(--tn-shell-sidebar-expanded), 86vw);
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: none;
  }
  .sidebar-shell.is-mobile-open {
    transform: translateX(0);
    box-shadow: var(--tn-shadow-lg);
  }
  .sidebar-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgb(0 0 0 / 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
  }
  .sidebar-mobile-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
  }
}
@media (min-width: 1024px) {
  .sidebar-mobile-backdrop {
    display: none;
  }
}
.app-header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  background: var(--tn-bg, var(--tn-surface-canvas));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-bg, var(--tn-surface-canvas)) 86%, transparent);
  }
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tn-border-default);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
  color: var(--tn-text-default);
}
.app-header__left,
.app-header__right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}
.app-header__left {
  flex: 1 1 auto;
}
.app-header__right {
  flex-shrink: 0;
}
.app-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  color: var(--tn-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.app-header__menu-toggle:hover {
  color: var(--tn-text-default);
  background: var(--tn-surface-inset);
}
.app-header__menu-toggle:active,
.app-header__search:active,
.app-header__nav-link:active {
  transform: scale(0.98);
}
.app-header__menu-toggle:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.app-header__menu-toggle .material-symbols-outlined {
  font-size: 20px;
}
.app-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--tn-text-default);
  flex-shrink: 0;
}
.app-header__brand-mark {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-header__brand-mark img {
  width: 24px;
  height: 24px;
  display: block;
}
.app-header__brand-name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tn-text-default);
}
.app-header__env-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 22px;
  padding: 0 0.5rem;
  margin-inline-start: 0.125rem;
  border-radius: var(--tn-radius-pill, 999px);
  border: 1px solid transparent;
  background: var(--tn-surface-inset);
  color: var(--tn-text-default);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
  user-select: none;
}
.app-header__env-pill .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}
.app-header__env-pill-label {
  line-height: 1;
}
.app-header__env-pill--development {
  background: var(--tn-success-soft);
  color: var(--tn-pill-success-fg);
  border-color: var(--tn-success-muted, var(--tn-success-soft));
}
.app-header__env-pill--staging {
  background: var(--tn-warning-soft);
  color: var(--tn-pill-warning-fg);
  border-color: var(--tn-warning, var(--tn-warning-soft));
}
.app-header__env-pill--production {
  background: var(--tn-error-soft);
  color: var(--tn-pill-error-fg);
  border-color: var(--tn-error, var(--tn-error-soft));
}
.app-header__env-pill--custom {
  background: var(--tn-info-soft);
  color: var(--tn-pill-info-fg);
  border-color: var(--tn-info, var(--tn-info-soft));
}
@media (max-width: 640px) {
  .app-header__env-pill-label {
    display: none;
  }
  .app-header__env-pill {
    padding: 0 0.35rem;
  }
}
.app-header__trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 22px;
  padding: 0 0.5rem;
  margin-inline-start: 0.125rem;
  border-radius: var(--tn-radius-pill, 999px);
  border: 1px solid transparent;
  background: var(--tn-surface-inset);
  color: var(--tn-text-default);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
  user-select: none;
}
.app-header__trust-pill .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}
.app-header__trust-pill-label {
  line-height: 1;
}
.app-header__trust-pill--configured {
  background: var(--tn-success-soft);
  color: var(--tn-pill-success-fg);
  border-color: var(--tn-success-muted, var(--tn-success-soft));
}
.app-header__trust-pill--unconfigured {
  background: var(--tn-error-soft);
  color: var(--tn-pill-error-fg);
  border-color: var(--tn-error, var(--tn-error-soft));
}
@media (max-width: 640px) {
  .app-header__trust-pill-label {
    display: none;
  }
  .app-header__trust-pill {
    padding: 0 0.35rem;
  }
}
.app-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--tn-border-default);
  min-width: 0;
}
.app-header__crumb {
  font-size: 0.8125rem;
  color: var(--tn-text-muted);
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16ch;
  transition: color 120ms ease;
}
.app-header__crumb:hover {
  color: var(--tn-text-default);
}
.app-header__crumb--current {
  color: var(--tn-text-default);
  font-weight: 600;
  max-width: 32ch;
}
.app-header__crumb-sep {
  color: var(--tn-text-muted);
  font-size: 0.8rem;
  line-height: 1;
}
.app-header__nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: 1rem;
}
.app-header__nav-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tn-text-muted);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.app-header__nav-link:hover {
  color: var(--tn-text-default);
  background: var(--tn-surface-inset);
}
.app-header__nav-link.is-active {
  color: var(--tn-text-default);
  background: var(--tn-surface-inset);
  font-weight: 600;
}
.app-header__search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
  padding: 0 0.625rem 0 0.5rem;
  background: var(--tn-surface-inset);
  border: 1px solid var(--tn-border-default);
  border-radius: 6px;
  color: var(--tn-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.app-header__search:hover {
  border-color: var(--tn-border-strong);
  color: var(--tn-text-default);
}
.app-header__search:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.app-header__search .material-symbols-outlined {
  font-size: 16px;
}
.app-header__search-label {
  font-weight: 500;
}
.app-header__search-kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 0.375rem;
  margin-left: 0.375rem;
  border: 1px solid var(--tn-border-strong, var(--tn-border-default));
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  font-family: var(--tn-font-mono, ui-monospace, "Cascadia Code", monospace);
  color: var(--tn-text-default);
  background: var(--tn-surface-panel);
  text-transform: none;
  white-space: nowrap;
}
.app-header__search-kbd-mod,
.app-header__search-kbd-key {
  display: inline-block;
}
.app-header__search-kbd-mod[data-shortcut-mod="cmd"] {
  font-size: 0.75rem;
}
.app-header[data-shell-surface="admin"] .app-header__nav {
  display: none;
}
.app-header[data-shell-surface="admin"] {
  height: var(--tn-header-h, var(--tn-shell-header-height));
  padding-inline: var(--tn-space-4);
  background: var(--tn-bg, var(--tn-surface-canvas));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-bg, var(--tn-surface-canvas)) 90%, transparent);
  }
}
.app-header[data-shell-surface="admin"] .app-header__brand-mark {
  background: var(--tn-accent);
}
.app-header[data-shell-surface="admin"] .app-header__search {
  background: var(--tn-bg-overlay, var(--tn-surface-inset));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-bg-overlay, var(--tn-surface-inset)) 76%, transparent);
  }
}
.app-header[data-shell-surface="public"] .app-header__breadcrumb {
  display: none;
}
@media (max-width: 1023px) {
  .app-header__breadcrumb,
    .app-header__nav {
    display: none;
  }
}
@media (max-width: 1023px) and (min-width: 640px) {
  .app-header__search-label {
    display: none;
  }
}
@media (max-width: 639px) {
  .app-header__search-label,
    .app-header__search-kbd {
    display: none;
  }
  .app-header__search {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
  }
}
@media (min-width: 1024px) {
  .app-header__menu-toggle {
    display: none;
  }
  body[data-shell-surface="admin"] .app-header__menu-toggle {
    display: inline-flex;
  }
  .app-header {
    padding: 0 1.25rem;
  }
}
@media (max-width: 640px) {
  .app-header__brand-name {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-header,
    .app-header__menu-toggle,
    .app-header__brand,
    .app-header__crumb,
    .app-header__nav-link,
    .app-header__search {
    transition: none;
  }
}
.app-header[data-shell-surface="tool"] {
  height: 48px;
  padding-inline: var(--tn-space-4, 1rem);
  background: var(--tn-surface-panel);
  border-bottom: 1px solid var(--tn-border-subtle, var(--tn-border-default));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.app-header[data-shell-surface="tool"] .app-header__brand-mark {
  width: 22px;
  height: 22px;
  border-radius: var(--tn-radius-sm, 6px);
}
.app-header[data-shell-surface="tool"] .app-header__brand-mark svg {
  width: 15px;
  height: 15px;
  color: var(--tn-color-paper);
}
.app-header[data-shell-surface="tool"] .app-header__brand-name {
  font-size: var(--tn-font-size-sm, 0.875rem);
  font-weight: 600;
}
.app-header[data-shell-surface="tool"] .app-header__nav {
  display: flex;
  align-items: center;
  gap: var(--tn-space-1, 0.25rem);
  margin-inline-start: var(--tn-space-4, 1rem);
}
.app-header[data-shell-surface="tool"] .app-header__nav-link {
  padding: var(--tn-space-1, 0.25rem) var(--tn-space-3, 0.75rem);
  border-radius: var(--tn-radius-sm, 6px);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm, 0.875rem);
  font-weight: 500;
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease;
}
.app-header[data-shell-surface="tool"] .app-header__nav-link:hover {
  color: var(--tn-text-default);
  background: var(--tn-surface-inset);
}
.app-header[data-shell-surface="tool"] .app-header__nav-link.is-active {
  color: var(--tn-text-default);
  font-weight: 600;
}
.app-header[data-shell-surface="tool"] .app-header__nav-link:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.app-header[data-shell-surface="tool"] .app-header__search {
  color: var(--tn-text-muted);
}
.app-header[data-shell-surface="tool"] .app-header__search svg {
  width: 18px;
  height: 18px;
}
.app-header[data-shell-surface="tool"] .app-header__search:hover {
  color: var(--tn-text-default);
  background: var(--tn-surface-inset);
}
@media (max-width: 768px) {
  .app-header[data-shell-surface="tool"] .app-header__nav {
    display: none;
  }
  .app-header[data-shell-surface="tool"] .app-header__search-label,
    .app-header[data-shell-surface="tool"] .app-header__search-kbd {
    display: none;
  }
}
.account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.account-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding: var(--tn-space-1);
  min-width: 32px;
  min-height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-pill);
  cursor: pointer;
  color: var(--tn-text-default);
  transition: background-color var(--tn-transition),
        border-color var(--tn-transition),
        transform 100ms ease;
}
.account-menu__trigger:hover {
  background: var(--tn-surface-inset);
  border-color: var(--tn-border-subtle);
}
.account-menu__trigger:active {
  transform: scale(0.98);
}
.account-menu__trigger:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.account-menu__trigger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.account-menu--header .account-menu__trigger {
  padding: 0;
}
.account-menu__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tn-accent-primary-soft);
  border: 1px solid var(--tn-accent-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tn-font-size-micro);
  font-weight: 700;
  color: var(--tn-accent-text);
  flex-shrink: 0;
}
.account-menu__avatar--image {
  background: transparent;
  object-fit: cover;
  overflow: hidden;
}
.account-menu--sidebar .account-menu__avatar {
  border-radius: var(--tn-radius-md);
}
.account-menu--sidebar .account-menu__trigger {
  width: 100%;
  justify-content: flex-start;
  padding: var(--tn-space-2);
  border-radius: var(--tn-radius-md);
  border: 1px solid transparent;
  background: var(--tn-surface-subtle);
}
.account-menu--sidebar .account-menu__trigger:hover {
  background: var(--tn-surface-inset);
  border-color: var(--tn-border-muted);
}
.account-menu--sidebar .account-menu__avatar {
  width: 28px;
  height: 28px;
  font-size: var(--tn-font-size-xs);
}
.account-menu__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.account-menu__name {
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  color: var(--tn-text-default);
  line-height: var(--tn-leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.account-menu__email {
  font-size: var(--tn-font-size-micro);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.account-menu__chev {
  font-size: 18px;
  color: var(--tn-text-muted);
  flex-shrink: 0;
  transition: transform var(--tn-transition), color var(--tn-transition);
}
.account-menu__panel {
  position: absolute;
  top: calc(100% + var(--tn-space-2));
  right: 0;
  min-width: 280px;
  max-width: 320px;
  padding: var(--tn-space-1);
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-floating);
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 0;
  max-height: min(560px, 80vh);
  overflow-y: auto;
  animation: account-menu-pop 140ms cubic-bezier(.16, 1, .3, 1);
}
.account-menu__panel--up {
  top: auto;
  bottom: calc(100% + var(--tn-space-2));
  right: auto;
  left: 0;
  transform-origin: bottom left;
  animation-name: account-menu-pop-up;
}
.account-menu__panel[data-open="true"] {
  display: flex;
}
@keyframes account-menu-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes account-menu-pop-up {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.account-menu__panel-header {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--tn-space-2);
  padding: var(--tn-space-2) var(--tn-space-2) var(--tn-space-1);
}
.account-menu__panel-name {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  color: var(--tn-text-default);
  line-height: var(--tn-leading-tight);
}
.account-menu__role-badge {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: var(--tn-font-size-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px var(--tn-space-1);
  border-radius: var(--tn-radius-pill);
  color: var(--tn-accent-primary-strong);
  background: var(--tn-accent-primary-soft);
  border: 1px solid var(--tn-accent-primary);
}
.account-menu__panel-email {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--tn-font-size-micro);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-tight);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-menu__item {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  width: 100%;
  min-height: 30px;
  padding: var(--tn-space-1) var(--tn-space-2);
  background: transparent;
  border: 0;
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
  text-decoration: none;
  font-size: var(--tn-font-size-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  line-height: var(--tn-leading-tight);
  transition: background-color var(--tn-transition);
}
.account-menu__item:hover,
.account-menu__item:focus-visible {
  background: var(--tn-surface-inset);
  outline: none;
}
.account-menu__item:active {
  transform: scale(0.98);
}
.account-menu__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.account-menu__item .material-symbols-outlined {
  font-size: 17px;
  color: var(--tn-text-muted);
  flex-shrink: 0;
}
.account-menu__item--accent .material-symbols-outlined {
  color: var(--tn-accent-text);
}
.account-menu__item--danger {
  color: var(--tn-error, var(--tn-text-default));
}
.account-menu__item--danger .material-symbols-outlined {
  color: var(--tn-error, var(--tn-text-muted));
}
.account-menu__divider {
  height: 1px;
  background: var(--tn-border-subtle);
  margin: var(--tn-space-1) var(--tn-space-2);
}
.account-menu__form {
  margin: 0;
}
.account-menu--guest {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
}
.account-menu__sign-in,
.account-menu__sign-up {
  padding: var(--tn-space-1) var(--tn-space-3);
  border-radius: var(--tn-radius-md);
  font-size: var(--tn-font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--tn-transition), color var(--tn-transition);
}
.account-menu__sign-in {
  color: var(--tn-text-muted);
}
.account-menu__sign-in:hover {
  color: var(--tn-text-default);
}
.account-menu__sign-up {
  background: var(--tn-accent-primary);
  color: var(--tn-color-ink);
  font-weight: 600;
}
.account-menu__sign-up:hover {
  background: var(--tn-accent-primary-strong);
}
.display-prefs {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-2);
}
.display-prefs__note {
  margin: 0;
  font-size: var(--tn-font-size-micro);
  line-height: 1.35;
  color: var(--tn-text-muted);
  font-style: italic;
}
.display-prefs__row {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
}
.display-prefs__row--toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
}
.display-prefs__row--action {
  flex-direction: column;
  align-items: stretch;
  gap: var(--tn-space-2);
}
.display-prefs__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
  color: var(--tn-text-default);
}
.display-prefs__hint {
  font-size: var(--tn-font-size-micro);
  color: var(--tn-text-muted);
  font-weight: 400;
}
.display-prefs__seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--tn-surface-inset);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
}
.display-prefs__seg-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 32px;
  padding: var(--tn-space-1);
  background: transparent;
  border: 0;
  border-radius: var(--tn-radius-sm);
  font-family: inherit;
  font-size: var(--tn-font-size-micro);
  font-weight: 500;
  color: var(--tn-text-muted);
  cursor: pointer;
  transition: background-color var(--tn-transition), color var(--tn-transition), transform 100ms ease;
}
.display-prefs__seg-btn .material-symbols-outlined {
  font-size: 16px;
}
.display-prefs__seg-btn:hover {
  color: var(--tn-text-default);
  background: var(--tn-surface-panel);
}
.display-prefs__seg-btn:active {
  transform: scale(0.98);
}
.display-prefs__seg-btn[aria-pressed="true"] {
  background: var(--tn-surface-panel);
  color: var(--tn-accent-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.04);
}
.display-prefs__seg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.display-prefs__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tn-space-1);
  min-height: 32px;
  padding: var(--tn-space-1) var(--tn-space-2);
  background: var(--tn-surface-inset);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  font-family: inherit;
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
  color: var(--tn-text-default);
  cursor: pointer;
  transition: background-color var(--tn-transition), color var(--tn-transition), border-color var(--tn-transition), transform 100ms ease;
}
.display-prefs__action-btn:hover {
  background: var(--tn-surface-panel);
  border-color: var(--tn-border-muted);
}
.display-prefs__action-btn:active {
  transform: scale(0.98);
}
.display-prefs__action-btn:focus-visible {
  outline: var(--tn-focus-ring-width, 2px) solid var(--tn-focus-ring);
  outline-offset: 2px;
}
.display-prefs__action-icon {
  font-size: 16px;
}
.display-prefs__action-btn[data-cleared="true"] {
  background: var(--tn-accent-primary);
  border-color: var(--tn-accent-primary);
  color: var(--tn-color-paper);
}
.display-prefs__action-btn[data-cleared="true"] .display-prefs__action-icon {
  color: var(--tn-color-paper);
}
.display-prefs__action-icon[data-clear-recent-tools-icon] .display-prefs__action-icon-cleared {
  display: none;
}
.display-prefs__action-btn[data-cleared="true"] .display-prefs__action-icon[data-clear-recent-tools-icon] .display-prefs__action-icon-idle {
  display: none;
}
.display-prefs__action-btn[data-cleared="true"] .display-prefs__action-icon[data-clear-recent-tools-icon] .display-prefs__action-icon-cleared {
  display: inline-block;
}
.display-prefs__slider-wrap {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}
.display-prefs__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: var(--tn-space-1);
  background: var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  cursor: pointer;
}
.display-prefs__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tn-accent-primary);
  border: 2px solid var(--tn-surface-panel);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  cursor: pointer;
  transition: transform 120ms ease;
}
.display-prefs__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.display-prefs__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tn-accent-primary);
  border: 2px solid var(--tn-surface-panel);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  cursor: pointer;
}
.display-prefs__slider-value {
  min-width: 2.75rem;
  font-size: var(--tn-font-size-micro);
  font-family: var(--tn-font-mono);
  color: var(--tn-text-muted);
  text-align: right;
}
.display-prefs__switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-inset);
  border: 1px solid var(--tn-border-muted);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
  flex-shrink: 0;
}
.display-prefs__switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tn-text-muted);
  transition: transform 140ms ease, background-color 140ms ease;
}
.display-prefs__switch:checked {
  background: var(--tn-accent-primary);
  border-color: var(--tn-accent-primary);
}
.display-prefs__switch:checked::after {
  transform: translateX(14px);
  background: var(--tn-color-paper);
}
.display-prefs__switch:focus-visible {
  outline: var(--tn-focus-ring-width, 2px) solid var(--tn-focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .account-menu__panel {
    animation: none;
  }
  .account-menu__trigger,
    .account-menu__item,
    .account-menu__sign-in,
    .account-menu__sign-up,
    .display-prefs__seg-btn,
    .display-prefs__slider::-webkit-slider-thumb,
    .display-prefs__switch,
    .display-prefs__switch::after {
    transition: none;
  }
}
@media (max-width: 640px) {
  .account-menu__panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
    width: 100%;
    border-radius: var(--tn-radius-lg) var(--tn-radius-lg) 0 0;
    box-shadow: 0 -8px 24px rgb(0 0 0 / 0.2);
    max-height: 75vh;
    overflow-y: auto;
    animation: account-menu-slide-up 200ms cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes account-menu-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}
.display-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.display-menu--inline {
  display: block;
  width: 100%;
}
.display-menu--popover .display-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 32px;
  padding: 0 0.625rem;
  border: 1px solid var(--tn-border-default);
  background: var(--tn-surface-inset);
  border-radius: 6px;
  color: var(--tn-text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease, transform 100ms ease;
}
.display-menu--popover .display-menu__trigger:hover {
  border-color: var(--tn-border-strong);
  color: var(--tn-text-default);
}
.display-menu--popover .display-menu__trigger:active {
  transform: scale(0.98);
}
.display-menu--popover .display-menu__trigger:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.display-menu--popover .display-menu__trigger .material-symbols-outlined {
  font-size: 16px;
}
.display-menu__trigger-label {
  line-height: 1;
}
.display-menu__trigger--inline {
  justify-content: flex-start;
}
.display-menu__trigger--inline .display-menu__trigger-label {
  flex: 1;
}
.display-menu__chevron {
  font-size: 18px;
  color: var(--tn-text-muted);
  transition: transform 140ms ease;
}
.display-menu__trigger--inline[aria-expanded="true"] .display-menu__chevron {
  transform: rotate(180deg);
}
.display-menu__panel {
  display: none;
}
.display-menu__panel[data-open] {
  display: block;
}
.display-menu--popover .display-menu__panel {
  position: absolute;
  top: calc(100% + var(--tn-space-2));
  right: 0;
  min-width: 280px;
  max-width: 320px;
  padding: var(--tn-space-1);
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-floating);
  z-index: 60;
  max-height: min(560px, 80vh);
  overflow-y: auto;
}
.display-menu--popover .display-menu__panel[data-open] {
  animation: display-menu-pop 140ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes display-menu-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.display-menu--inline .display-menu__panel {
  padding: 0 var(--tn-space-1);
}
@media (prefers-reduced-motion: reduce) {
  .display-menu--popover .display-menu__panel[data-open] {
    animation: none;
  }
  .display-menu--popover .display-menu__trigger,
    .display-menu__chevron {
    transition: none;
  }
}
@media (max-width: 1279px) {
  .display-menu--popover .display-menu__trigger-label {
    display: none;
  }
  .display-menu--popover .display-menu__trigger {
    padding-inline: 0.5rem;
  }
}
@media (max-width: 640px) {
  .display-menu--popover .display-menu__panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 0;
    max-width: none;
    width: 100%;
    border-radius: var(--tn-radius-lg) var(--tn-radius-lg) 0 0;
    box-shadow: 0 -8px 24px rgb(0 0 0 / 0.2);
    max-height: 75vh;
  }
  .display-menu--popover .display-menu__panel[data-open] {
    animation: display-menu-slide-up 200ms cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes display-menu-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}
.account-dropdown-wrapper {
  position: relative;
  display: inline-block;
}
.account-dropdown-trigger {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  border-radius: 50%;
}
.account-dropdown__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--tn-space-2));
  width: 280px;
  min-width: 280px;
  background: var(--tn-surface-elevated);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 9995;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.account-dropdown-wrapper--sidebar .account-dropdown__panel {
  position: absolute !important;
  right: auto;
  left: 0;
  top: auto !important;
  bottom: 100% !important;
  margin-bottom: var(--tn-space-2);
  margin-top: 0;
  width: 280px;
  min-width: 280px;
  z-index: 9999;
}
.account-dropdown__panel[data-open='true'] {
  display: flex;
  animation: slideDown 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.account-dropdown__header {
  padding: var(--tn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
  background: var(--tn-surface-panel-muted);
  min-width: 0;
}
.account-dropdown__name {
  font-family: var(--tn-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--tn-text-default);
  line-height: 1.2;
}
.account-dropdown__email {
  font-family: var(--tn-font-mono);
  font-size: 11px;
  color: var(--tn-text-muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}
.account-dropdown__divider {
  height: 2px;
  background: var(--tn-border-subtle);
  margin: var(--tn-space-1) 0;
}
.account-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding: var(--tn-space-2) var(--tn-space-6);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background var(--tn-transition), color var(--tn-transition);
}
.account-dropdown__item:hover {
  background: var(--tn-surface-panel-strong);
  color: var(--tn-accent-primary-strong);
}
.account-dropdown__icon {
  font-size: 18px;
  color: var(--tn-text-muted);
}
.account-dropdown__item:hover .account-dropdown__icon {
  color: var(--tn-accent-primary-strong);
}
.account-dropdown__item--danger {
  color: var(--tn-color-danger);
}
.account-dropdown__item--danger .account-dropdown__icon {
  color: var(--tn-color-danger);
}
.account-dropdown__item--danger:hover {
  background: rgba(220, 38, 38, 0.1);
  color: var(--tn-color-danger);
}
.account-dropdown__item--admin {
  color: var(--tn-text-default);
  font-weight: 600;
}
.account-dropdown__item--admin .account-dropdown__icon {
  color: var(--tn-accent-primary-strong);
}
.account-dropdown__item--admin:hover {
  background: var(--tn-accent-primary-soft);
  color: var(--tn-color-ink);
}
.account-dropdown__item--admin:hover .account-dropdown__icon {
  color: var(--tn-color-ink);
}
.account-dropdown__form {
  margin: 0;
  padding: 0;
}
.account-dropdown__identity {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  flex-wrap: wrap;
}
.account-dropdown__role-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-warning-soft);
  color: var(--tn-color-ink);
  font-family: var(--tn-font-body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
html.dark .account-dropdown__panel {
  border-color: var(--tn-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.account-dropdown-wrapper--sidebar .account-dropdown__panel[data-open='true'] {
  animation: slideUp 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.account-dropdown__panel.account-dropdown__panel--up[data-open='true'] {
  animation: slideUp 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.account-dropdown__panel:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.account-dropdown-wrapper--sidebar .account-dropdown-trigger {
  width: 100%;
  transition: background var(--tn-transition), outline var(--tn-transition);
}
.account-dropdown-wrapper--sidebar .account-dropdown-trigger:hover,
.account-dropdown-wrapper--sidebar .account-dropdown-trigger:focus-visible {
  background: var(--tn-surface-subtle);
}
.account-dropdown-wrapper--sidebar .account-dropdown-trigger:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
  border-radius: var(--tn-radius-md);
}
.account-dropdown-wrapper--sidebar .sidebar-user__chevron {
  transition: transform var(--tn-transition);
}
.account-dropdown-wrapper--sidebar .account-dropdown-trigger[aria-expanded="true"] .sidebar-user__chevron {
  transform: rotate(180deg);
}
.header-shell__account-initial {
  font-family: var(--tn-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--tn-text-on-accent);
}
.sidebar-shell {
  position: sticky;
  top: 0;
  overflow: visible;
  background: linear-gradient(180deg, var(--tn-surface-elevated), var(--tn-surface-panel));
  border-right: var(--tn-border-heavy);
  box-shadow: none;
}
.sidebar-shell .sidebar-shell__top {
  padding: var(--tn-space-3);
  border-bottom: var(--tn-border-heavy);
  background: var(--tn-surface-panel);
}
.sidebar-shell .sidebar-header {
  min-height: 36px;
}
.sidebar-shell .sidebar-brand {
  gap: var(--tn-space-2);
  max-width: calc(100% - 42px);
}
.sidebar-shell .brand-glyph {
  width: 34px;
  height: 34px;
  background: var(--tn-accent-primary);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-md);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-color-paper);
}
.sidebar-shell .brand-glyph .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}
.sidebar-shell .brand-name__title {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sidebar-shell .brand-name__meta {
  max-width: 140px;
  color: var(--tn-text-muted);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.sidebar-shell .sidebar-collapse-btn {
  width: 34px;
  height: 34px;
  border: 2px solid transparent;
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
}
.sidebar-shell .sidebar-collapse-btn:hover,
.sidebar-shell .sidebar-collapse-btn:focus-visible {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-border-strong);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
}
.sidebar-shell .sidebar-search-wrap {
  margin-top: var(--tn-space-1);
}
.sidebar-shell .sidebar-command-trigger {
  min-height: 38px;
  padding: 0 var(--tn-space-2);
  grid-template-columns: auto minmax(0, 1fr) auto;
  background: var(--tn-surface-elevated);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
  font-weight: 600;
}
.sidebar-shell .sidebar-command-trigger:hover,
.sidebar-shell .sidebar-command-trigger:focus-visible {
  background: var(--tn-surface-panel);
  border-color: var(--tn-border-strong);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
}
.sidebar-shell .sidebar-command-trigger .nav-icon {
  color: var(--tn-text-default);
}
.sidebar-shell .sidebar-command-trigger kbd {
  min-height: 22px;
  padding: 0 var(--tn-space-2);
  background: var(--tn-color-yellow-soft);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-sm);
  color: var(--tn-color-ink);
  font-weight: 600;
  box-shadow: 1px 1px 0 var(--tn-border-strong);
}
.sidebar-shell .sidebar-shell__nav {
  gap: 2px;
  padding: var(--tn-space-3);
  background: linear-gradient(var(--tn-surface-panel) 30%, transparent) center top,
    linear-gradient(transparent, var(--tn-surface-panel) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgb(var(--tn-color-ink-rgb) / 0.12), transparent) center top,
    radial-gradient(farthest-side at 50% 100%, rgb(var(--tn-color-ink-rgb) / 0.12), transparent) center bottom;
  background-attachment: local, local, scroll, scroll;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
}
.sidebar-shell .sidebar-shell__nav-group {
  justify-content: flex-start;
  min-height: 24px;
  margin: var(--tn-space-4) 0 var(--tn-space-2);
  padding: 0 var(--tn-space-2);
  color: var(--tn-text-default);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sidebar-shell .sidebar-shell__nav-group span {
  flex: 0 1 auto;
}
.sidebar-shell .sidebar-shell__nav-group:first-child {
  margin-top: var(--tn-space-1);
}
.sidebar-shell .sidebar-shell__nav-group::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: var(--tn-space-1);
  border: 2px solid var(--tn-border-strong);
  border-radius: 50%;
  background: var(--tn-accent-primary);
  box-shadow: 1px 1px 0 var(--tn-border-strong);
}
.sidebar-shell .sidebar-shell__nav-link {
  min-height: 40px;
  gap: var(--tn-space-2);
  padding: var(--tn-space-2);
  border: 2px solid transparent;
  border-radius: var(--tn-radius-lg);
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
}
.sidebar-shell .sidebar-shell__nav-link:hover,
.sidebar-shell .sidebar-shell__nav-link:focus-visible {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-border-strong);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
}
.sidebar-shell .sidebar-shell__nav-link.active,
.sidebar-shell .sidebar-shell__nav-link--active {
  background: var(--tn-accent-primary-soft);
  border-color: var(--tn-border-strong);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
  font-weight: 600;
}
.sidebar-shell .sidebar-shell__nav-link.active::before,
.sidebar-shell .sidebar-shell__nav-link--active::before {
  left: var(--tn-space-1);
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-border-strong);
}
.sidebar-shell .sidebar-shell__nav-link-icon {
  width: 20px;
  height: 20px;
  color: var(--tn-text-default);
  font-size: 20px;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}
.sidebar-shell .sidebar-shell__nav-link.active .sidebar-shell__nav-link-icon,
.sidebar-shell .sidebar-shell__nav-link--active .sidebar-shell__nav-link-icon {
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}
.sidebar-shell .sidebar-shell__nav-link-label {
  padding-left: var(--tn-space-1);
}
.sidebar-shell .sidebar-footer {
  padding: var(--tn-space-3);
  background: var(--tn-surface-panel);
  border-top: var(--tn-border-heavy);
}
.sidebar-shell .sidebar-auth-cta {
  padding: var(--tn-space-3);
  background: var(--tn-surface-elevated);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
}
.sidebar-shell .sidebar-auth-cta__text {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  line-height: var(--tn-leading-body);
}
.sidebar-shell .sidebar-auth-cta__btn {
  min-height: 38px;
  background: var(--tn-accent-primary);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-md);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-color-ink);
  font-weight: 600;
}
.sidebar-shell .sidebar-auth-cta__btn:hover,
.sidebar-shell .sidebar-auth-cta__btn:focus-visible {
  background: var(--tn-accent-primary-soft);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
}
.sidebar-shell .account-menu--sidebar {
  width: 100%;
}
.sidebar-shell .account-menu--sidebar .account-menu__trigger {
  min-height: 46px;
  background: var(--tn-surface-elevated);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
}
.sidebar-shell .account-menu--sidebar .account-menu__trigger:hover,
.sidebar-shell .account-menu--sidebar .account-menu__trigger:focus-visible {
  background: var(--tn-surface-panel);
  box-shadow: 4px 4px 0 var(--tn-border-strong);
}
.sidebar-shell .account-menu--sidebar .account-menu__avatar {
  background: var(--tn-accent-primary-soft);
  border: 2px solid var(--tn-border-strong);
  color: var(--tn-text-default);
  font-weight: 600;
}
.sidebar-shell .account-menu__name {
  color: var(--tn-text-default);
  font-weight: 600;
}
.sidebar-shell .account-menu__email {
  color: var(--tn-text-muted);
  font-family: var(--tn-font-mono);
}
.sidebar-shell .account-menu__panel--up {
  min-width: 304px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: 6px 6px 0 var(--tn-border-strong);
  z-index: 10010;
}
.sidebar-shell .sidebar-auth-cta__btn {
  gap: var(--tn-space-1);
}
.sidebar-shell .sidebar-auth-cta__btn-icon {
  font-size: 18px;
  line-height: 1;
}
@media (min-width: 1024px) {
  .sidebar-shell.is-collapsed {
    overflow: visible;
  }
  .sidebar-shell.is-collapsed .sidebar-shell__top,
  .sidebar-shell.is-collapsed .sidebar-footer {
    padding: var(--tn-space-2) 0;
  }
  .sidebar-shell.is-collapsed .sidebar-shell__top {
    justify-items: center;
  }
  .sidebar-shell.is-collapsed .sidebar-header {
    width: 100%;
    min-height: 0;
    display: grid;
    justify-items: center;
    gap: var(--tn-space-2);
  }
  .sidebar-shell.is-collapsed .sidebar-brand,
  .sidebar-shell.is-collapsed .sidebar-collapse-btn,
  .sidebar-shell.is-collapsed .sidebar-command-trigger,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link,
  .sidebar-shell.is-collapsed .sidebar-auth-cta,
  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn,
  .sidebar-shell.is-collapsed .account-menu--sidebar,
  .sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .sidebar-shell.is-collapsed .sidebar-brand,
  .sidebar-shell.is-collapsed .sidebar-collapse-btn,
  .sidebar-shell.is-collapsed .sidebar-command-trigger,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link,
  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn,
  .sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__trigger {
    display: grid;
    place-items: center;
    gap: 0;
    margin: 0 auto;
    padding: 0;
  }
  .sidebar-shell.is-collapsed .brand-glyph {
    width: 34px;
    height: 34px;
    border-radius: var(--tn-radius-md);
    box-shadow: 1px 1px 0 var(--tn-border-strong);
  }
  .sidebar-shell.is-collapsed .sidebar-collapse-btn {
    border-width: 2px;
  }
  .sidebar-shell.is-collapsed .sidebar-search-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .sidebar-shell.is-collapsed .sidebar-command-trigger {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .sidebar-shell.is-collapsed .sidebar-command-trigger__label,
  .sidebar-shell.is-collapsed .sidebar-command-trigger kbd,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link-label,
  .sidebar-shell.is-collapsed .nav-label,
  .sidebar-shell.is-collapsed .sidebar-auth-cta__text,
  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn-label,
  .sidebar-shell.is-collapsed .account-menu__identity,
  .sidebar-shell.is-collapsed .account-menu__chev {
    display: none;
  }
  .sidebar-shell.is-collapsed .sidebar-shell__nav {
    align-items: center;
    gap: var(--tn-space-2);
    padding: var(--tn-space-3) 0;
  }
  .sidebar-shell.is-collapsed .sidebar-shell__nav-group {
    width: 24px;
    min-height: 1px;
    height: 1px;
    margin: var(--tn-space-3) 0;
    padding: 0;
  }
  .sidebar-shell.is-collapsed .sidebar-shell__nav-group::before {
    display: none;
  }
  .sidebar-shell.is-collapsed .sidebar-shell__nav-group::after {
    width: 24px;
    background: var(--tn-border-muted);
  }
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link {
    border-width: 2px;
    border-radius: var(--tn-radius-lg);
    box-shadow: none;
  }
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link.active,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link--active {
    box-shadow: 2px 2px 0 var(--tn-border-strong);
  }
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link.active::before,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link--active::before {
    left: 4px;
    top: 10px;
    bottom: 10px;
  }
  .sidebar-shell.is-collapsed .sidebar-auth-cta {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn {
    color: transparent;
    font-size: 0;
    line-height: 0;
  }
  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn::before {
    content: "login";
    color: var(--tn-text-default);
    font-family: "Material Symbols Outlined";
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }
  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn-icon {
    display: none;
  }
  .sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__trigger {
    box-shadow: 2px 2px 0 var(--tn-border-strong);
  }
  .sidebar-shell.is-collapsed .account-menu__panel--up {
    left: calc(100% + var(--tn-space-2));
  }
  .sidebar-shell.is-collapsed .account-menu__panel--up .account-menu__item {
    min-height: 40px;
  }
}
@media (max-width: 1023px) {
  .sidebar-shell {
    width: min(var(--tn-shell-sidebar-expanded), 88vw);
    min-width: min(var(--tn-shell-sidebar-expanded), 88vw);
    border-right: var(--tn-border-heavy);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-shell .sidebar-command-trigger,
  .sidebar-shell .sidebar-shell__nav-link,
  .sidebar-shell .sidebar-auth-cta__btn,
  .sidebar-shell .account-menu--sidebar .account-menu__trigger {
    transition: none;
  }
}
.text-scale-widget {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.text-scale-widget__label {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-micro);
  font-weight: 500;
  line-height: var(--tn-leading-heading);
}
.text-scale-widget__segments {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  width: fit-content;
}
.text-scale-widget__segment {
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--tn-radius-pill);
  background: transparent;
  color: var(--tn-text-muted);
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.text-scale-widget__segment .material-symbols-outlined {
  font-size: 18px;
}
.text-scale-widget__segment:hover {
  background: var(--tn-surface-elevated);
  color: var(--tn-text-default);
  transform: scale(1.05);
}
.text-scale-widget__segment:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tn-accent-primary);
}
.text-scale-widget__segment:active:not(:disabled) {
  transform: scale(0.95);
}
.text-scale-widget__segment:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.text-scale-widget__segment:disabled:hover {
  background: transparent;
  color: var(--tn-text-muted);
  transform: none;
}
.text-scale-widget--header {
  flex-direction: row;
  align-items: center;
  gap: var(--tn-space-2);
}
.text-scale-widget--header .text-scale-widget__label {
  display: none;
}
.text-scale-widget--header .text-scale-widget__segments {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
html.dark .text-scale-widget--header .text-scale-widget__segments {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.text-scale-widget--header .text-scale-widget__segment {
  width: 28px;
  height: 24px;
}
.sidebar-shell[data-sidebar-mode="mini"] .text-scale-widget__label,
.sidebar-shell[data-sidebar-mode="micro"] .text-scale-widget__label,
.admin-sidebar[data-collapsed="true"] .text-scale-widget__label,
.admin-sidebar.is-micro .text-scale-widget__label {
  display: none;
}
.sidebar-shell[data-sidebar-mode="mini"] .text-scale-widget__segments,
.sidebar-shell[data-sidebar-mode="micro"] .text-scale-widget__segments,
.admin-sidebar[data-collapsed="true"] .text-scale-widget__segments,
.admin-sidebar.is-micro .text-scale-widget__segments {
  flex-direction: column;
  width: 100%;
}
.sidebar-shell[data-sidebar-mode="mini"] .text-scale-widget__segment,
.sidebar-shell[data-sidebar-mode="micro"] .text-scale-widget__segment,
.admin-sidebar[data-collapsed="true"] .text-scale-widget__segment,
.admin-sidebar.is-micro .text-scale-widget__segment {
  width: 100%;
}
@media (max-width: 1023px) {
  .text-scale-widget--header {
    display: none;
  }
}
.footer-shell {
  border-top: 1px solid var(--tn-border-default);
  background: var(--tn-surface-footer);
  color: var(--tn-text-secondary);
}
.footer-shell__container {
  max-width: var(--tn-shell-max-width);
  margin: 0 auto;
}
.footer-shell__container--user {
  padding-block: var(--tn-space-12) var(--tn-space-6);
}
.footer-shell__container--admin {
  padding-block: var(--tn-space-4);
}
.footer-shell__container--user-panel {
  padding-block: var(--tn-space-4);
}
body[data-shell-surface="user"] .footer-shell {
  border-top-color: var(--tn-border-default);
  background: var(--tn-surface-panel);
}
.footer-shell__partner-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-4);
  padding: var(--tn-space-4) var(--tn-space-5);
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--tn-transition),
        border-color var(--tn-transition);
}
.footer-shell__partner-card:hover {
  border-color: var(--tn-accent-primary);
  box-shadow: var(--tn-shadow-card);
}
.footer-shell__partner-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px var(--tn-space-3);
  border-bottom-left-radius: var(--tn-radius-md);
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
}
.footer-shell__partner-badge-text,
.footer-shell__nav-title {
  color: inherit;
  font-family: var(--tn-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-shell__partner-icon--success {
  color: var(--tn-success);
}
.footer-shell__partner-icon--accent,
.footer-shell__brand-icon .material-symbols-outlined {
  color: var(--tn-accent-primary);
}
.footer-shell__partner-title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-sm);
  font-weight: 700;
}
.footer-shell__partner-description,
.footer-shell__copy-text,
.footer-shell__nav-list,
.footer-shell__trust-item {
  color: var(--tn-text-muted);
  font-family: var(--tn-font-body);
  line-height: var(--tn-leading-body);
  font-size: var(--tn-font-size-xs);
}
.footer-shell__partner-cta--primary,
.footer-shell__partner-cta--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding-inline: var(--tn-space-4);
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--tn-transition),
        color var(--tn-transition);
}
.footer-shell__partner-cta--primary {
  background: var(--tn-accent-primary);
  color: var(--tn-color-paper);
}
.footer-shell__partner-cta--ghost {
  background: transparent;
}
.footer-shell__partner-cta--primary:hover {
  background: var(--tn-accent-primary-strong);
  color: var(--tn-color-paper);
}
.footer-shell__partner-cta--ghost:hover {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
  border-color: var(--tn-accent-primary);
}
.footer-shell__nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tn-space-8);
  margin-bottom: var(--tn-space-8);
}
.footer-shell__brand-section {
  grid-column: span 2;
}
.footer-shell__brand-icon {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  margin-bottom: var(--tn-space-4);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 800;
  letter-spacing: var(--tn-tracking-heading);
}
.footer-shell__status,
.footer-shell__trust-item {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}
.footer-shell__status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-success);
  box-shadow: 0 0 0 3px var(--tn-success-soft);
}
.footer-shell__social {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer-shell__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--tn-radius-pill);
  color: var(--tn-text-muted);
  border: 1px solid var(--tn-border-subtle);
  transition: color var(--tn-transition), border-color var(--tn-transition), background var(--tn-transition);
}
.footer-shell__social-link:hover,
.footer-shell__social-link:focus-visible {
  color: var(--tn-text-default);
  border-color: var(--tn-border-strong);
  background: var(--tn-surface-inset);
}
.footer-shell__social-icon {
  display: block;
}
.footer-shell__nav-section,
.footer-shell__trust-section {
  display: flex;
  flex-direction: column;
}
.footer-shell__title-text,
.footer-shell__nav-title {
  color: var(--tn-text-default);
}
.footer-shell__nav-list,
.footer-shell__trust-list {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer-shell__nav-link {
  color: var(--tn-text-muted);
  text-decoration: none;
  font-size: var(--tn-font-size-xs);
  transition: color var(--tn-transition);
}
.footer-shell__nav-link:hover {
  color: var(--tn-text-default);
}
.footer-shell__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-4);
  padding-top: var(--tn-space-4);
  border-top: 1px solid var(--tn-border-default);
}
.footer-shell__bottom-bar--admin {
  padding-top: 0;
  border-top: 0;
}
.footer-shell__bottom-bar--user {
  padding-top: 0;
  border-top: 0;
}
.footer-shell__copyright,
.footer-shell__bottom-links {
  color: var(--tn-text-muted);
  font-family: var(--tn-font-body);
  font-size: 11px;
}
.footer-shell__bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-4);
  font-weight: 500;
}
.sticky-footer-ad {
  position: fixed;
  right: var(--tn-space-4);
  bottom: var(--tn-space-4);
  left: var(--tn-space-4);
  z-index: 9985;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-floating);
  transition: transform 0.28s ease,
        opacity 0.28s ease;
}
.sticky-footer-ad[hidden] {
  display: none;
}
.sticky-footer-ad__container {
  max-width: var(--tn-page-max-width);
  min-height: 58px;
  margin: 0 auto;
  padding: var(--tn-space-2) var(--tn-space-4);
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
}
.sticky-footer-ad__close-btn,
.sticky-footer-ad__dismiss-btn {
  border: 0;
  background: transparent;
  color: var(--tn-text-muted);
  cursor: pointer;
  transition: color var(--tn-transition),
        background var(--tn-transition);
}
.sticky-footer-ad__close-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--tn-radius-pill);
}
.sticky-footer-ad__close-btn:hover,
.sticky-footer-ad__dismiss-btn:hover {
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
}
.sticky-footer-ad__label {
  color: var(--tn-text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sticky-footer-ad__content {
  flex: 1;
  min-width: 0;
}
.sticky-footer-ad--adsense .sticky-footer-ad__content {
  min-height: 58px;
}
.sticky-footer-ad__adsense {
  width: 100%;
  min-height: 58px;
}
.sticky-footer-ad__link {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  color: var(--tn-text-default);
  text-decoration: none;
}
.sticky-footer-ad__link-icon {
  color: var(--tn-accent-primary);
}
.sticky-footer-ad__link-title,
.sticky-footer-ad__link-subtitle {
  margin: 0;
}
.sticky-footer-ad__link-title {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
}
.sticky-footer-ad__link-subtitle,
.sticky-footer-ad__dismiss-btn,
.sticky-footer-ad__link-arrow {
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-micro);
  font-weight: 700;
}
@media (min-width: 768px) {
  .footer-shell__nav-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .footer-shell__nav-grid {
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr));
  }
  .footer-shell__brand-section {
    grid-column: auto;
  }
}
.tn-consent-banner {
  position: fixed;
  right: var(--tn-space-4);
  bottom: var(--tn-space-4);
  left: var(--tn-space-4);
  z-index: 9990;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--tn-space-4) var(--tn-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-4);
  border: var(--tn-border-heavy);
  border-radius: 12px;
  background: var(--memphis-cream, var(--tn-surface-panel, #faf8f5));
  color: var(--memphis-black, var(--tn-text-default));
  box-shadow: 4px 4px 0 0 var(--memphis-black, var(--tn-color-ink, #1a1a2e));
}
.tn-consent-banner__copy {
  display: grid;
  gap: var(--tn-space-1);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
}
.tn-consent-banner__copy strong {
  font-weight: 800;
  letter-spacing: 0.01em;
}
.tn-consent-banner__copy span {
  color: var(--memphis-black, var(--tn-text-default));
  opacity: 0.78;
  font-weight: 500;
}
.tn-consent-banner__actions {
  display: flex;
  gap: var(--tn-space-2);
  flex-shrink: 0;
}
.tn-consent-banner__btn {
  min-height: 40px;
  padding: 0 var(--tn-space-4);
  border: var(--tn-border-heavy);
  border-radius: 8px;
  font-size: var(--tn-font-size-micro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.tn-consent-banner__btn:hover,
.tn-consent-banner__btn:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--memphis-black, var(--tn-color-ink, #1a1a2e));
}
.tn-consent-banner__btn--ghost {
  background: transparent;
  color: var(--memphis-black, var(--tn-text-default));
}
.tn-consent-banner__btn--primary {
  background: var(--memphis-pink, var(--tn-accent-primary, #ff3366));
  color: var(--memphis-black, var(--tn-color-on-accent, #1a1a2e));
}
.tool-page-byok-dialog {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: var(--tn-space-4);
  background: var(--tn-color-ink);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-color-ink) 56%, transparent);
  }
}
.tool-page-byok-dialog__panel {
  width: min(100%, 420px);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-floating);
}
.tool-page-byok-dialog__form {
  display: grid;
  gap: var(--tn-space-3);
  padding: var(--tn-space-5);
}
.tool-page-byok-dialog__form h2,
.tool-page-byok-dialog__form p {
  margin: 0;
}
.tool-page-byok-dialog__form h2 {
  font-size: var(--tn-font-size-md);
  font-weight: 800;
}
.tool-page-byok-dialog__form p {
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
}
.tool-page-byok-dialog__input {
  min-height: 42px;
  padding: 0 var(--tn-space-3);
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-inset);
  color: var(--tn-text-default);
  outline: none;
}
.tool-page-byok-dialog__input:focus {
  border-color: var(--tn-accent-primary);
  box-shadow: 0 0 0 3px var(--tn-focus-ring);
}
.tool-page-byok-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--tn-space-2);
}
.tool-page-byok-dialog__cancel,
.tool-page-byok-dialog__submit {
  min-height: 36px;
  padding: 0 var(--tn-space-4);
  border-radius: var(--tn-radius-pill);
  font-size: var(--tn-font-size-micro);
  font-weight: 800;
  cursor: pointer;
}
.tool-page-byok-dialog__cancel {
  border: 1px solid var(--tn-border-muted);
  background: transparent;
  color: var(--tn-text-default);
}
.tool-page-byok-dialog__submit {
  border: 1px solid var(--tn-accent-primary);
  background: var(--tn-accent-primary);
  color: var(--tn-color-on-accent, #fff);
}
@media (max-width: 768px) {
  .footer-shell__bottom-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .tn-consent-banner {
    align-items: stretch;
    flex-direction: column;
  }
  .tn-consent-banner__actions {
    justify-content: flex-end;
  }
  .sticky-footer-ad__container {
    align-items: flex-start;
  }
  .sticky-footer-ad__link-arrow {
    display: none;
  }
}
@media (max-width: 640px) {
  .footer-shell__nav-grid {
    grid-template-columns: 1fr;
  }
  .footer-shell__brand-section {
    grid-column: auto;
  }
  .footer-shell__partner-card,
    .sticky-footer-ad__link {
    align-items: flex-start;
    flex-direction: column;
  }
}
body[data-shell-surface="public"] .footer-shell,
body[data-public-marketing="true"] .footer-shell {
  position: relative;
  background: var(--tn-color-ink);
  color: var(--tn-color-cream);
  border-top: 3px solid var(--tn-color-ink);
}
body[data-shell-surface="public"] .footer-shell::before,
body[data-public-marketing="true"] .footer-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
        90deg,
        var(--tn-color-pink),
        var(--tn-color-teal),
        var(--tn-color-yellow),
        var(--tn-color-purple)
    );
}
body[data-shell-surface="public"] .footer-shell a:not(.btn):not(.btn-memphis),
body[data-public-marketing="true"] .footer-shell a:not(.btn):not(.btn-memphis) {
  color: var(--tn-color-cream);
  transition: color 0.15s ease;
}
body[data-shell-surface="public"] .footer-shell a:not(.btn):not(.btn-memphis):hover,
body[data-shell-surface="public"] .footer-shell a:not(.btn):not(.btn-memphis):focus-visible,
body[data-public-marketing="true"] .footer-shell a:not(.btn):not(.btn-memphis):hover,
body[data-public-marketing="true"] .footer-shell a:not(.btn):not(.btn-memphis):focus-visible {
  color: var(--tn-color-yellow);
}
body[data-shell-surface="public"] .footer-shell h3,
body[data-shell-surface="public"] .footer-shell h4,
body[data-shell-surface="public"] .footer-shell .footer-shell__heading,
body[data-public-marketing="true"] .footer-shell h3,
body[data-public-marketing="true"] .footer-shell h4,
body[data-public-marketing="true"] .footer-shell .footer-shell__heading {
  color: var(--tn-color-paper);
}
.theme-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-pill);
  height: 32px;
}
.theme-switcher--sidebar {
  width: 100%;
  justify-content: center;
}
.theme-switcher__indicator {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 28px;
  width: calc((100% - 8px) / 3);
  background: var(--tn-accent-primary);
  border-radius: var(--tn-radius-pill);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
  pointer-events: none;
}
html.dark .theme-switcher__indicator {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.theme-switcher[data-theme-active="light"] .theme-switcher__indicator {
  transform: translateX(0);
}
.theme-switcher[data-theme-active="system"] .theme-switcher__indicator {
  transform: translateX(calc(100% + 2px));
}
.theme-switcher[data-theme-active="dark"] .theme-switcher__indicator {
  transform: translateX(calc(200% + 4px));
}
.theme-switcher__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 28px;
  min-width: 32px;
  border: none;
  background: transparent;
  border-radius: var(--tn-radius-pill);
  color: var(--tn-text-muted);
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-switcher__btn .material-symbols-outlined {
  font-size: 18px;
}
.theme-switcher__btn:hover {
  color: var(--tn-text-default);
}
.theme-switcher__btn[aria-pressed="true"] {
  color: var(--tn-color-ink);
}
.theme-switcher__btn:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.theme-switcher--locked {
  opacity: 0.6;
  pointer-events: none;
}
.theme-switcher--locked .theme-switcher__btn {
  cursor: not-allowed;
}
.sidebar-shell.is-collapsed .theme-switcher--sidebar,
.admin-sidebar[data-collapsed="true"] .theme-switcher--sidebar {
  flex-direction: column;
  height: auto;
  width: 100%;
}
.sidebar-shell.is-collapsed .theme-switcher--sidebar .theme-switcher__indicator,
.admin-sidebar[data-collapsed="true"] .theme-switcher--sidebar .theme-switcher__indicator {
  width: calc(100% - 4px);
  height: 28px;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sidebar-shell.is-collapsed .theme-switcher[data-theme-active="light"] .theme-switcher__indicator,
.admin-sidebar[data-collapsed="true"] .theme-switcher[data-theme-active="light"] .theme-switcher__indicator {
  transform: translateY(0);
}
.sidebar-shell.is-collapsed .theme-switcher[data-theme-active="system"] .theme-switcher__indicator,
.admin-sidebar[data-collapsed="true"] .theme-switcher[data-theme-active="system"] .theme-switcher__indicator {
  transform: translateY(100%);
}
.sidebar-shell.is-collapsed .theme-switcher[data-theme-active="dark"] .theme-switcher__indicator,
.admin-sidebar[data-collapsed="true"] .theme-switcher[data-theme-active="dark"] .theme-switcher__indicator {
  transform: translateY(200%);
}
.sidebar-shell.is-collapsed .theme-switcher--sidebar .theme-switcher__btn,
.admin-sidebar[data-collapsed="true"] .theme-switcher--sidebar .theme-switcher__btn {
  width: 100%;
  height: 28px;
  flex: none;
}
.theme-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tn-space-4);
}
.theme-modal[hidden] {
  display: none;
}
.theme-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(2px);
  animation: theme-modal-fade-in 140ms ease-out;
}
.theme-modal__panel {
  position: relative;
  width: min(960px, 100%);
  max-height: min(720px, calc(100dvh - var(--tn-space-8)));
  display: flex;
  flex-direction: column;
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-lg);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
  overflow: hidden;
  animation: theme-modal-pop-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes theme-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes theme-modal-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-modal__backdrop,
    .theme-modal__panel {
    animation: none;
  }
}
.theme-modal__header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--tn-space-3);
  align-items: center;
  padding: var(--tn-space-4) var(--tn-space-5);
  border-bottom: 1px solid var(--tn-border-subtle);
  background: var(--tn-surface-panel);
}
.theme-modal__title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.theme-modal__title {
  margin: 0;
  font-size: var(--tn-font-size-lg);
  font-weight: 600;
  color: var(--tn-text-default);
}
.theme-modal__subtitle {
  margin: 0;
  font-size: var(--tn-font-size-xs);
  color: var(--tn-text-muted);
}
.theme-modal__search {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  padding-left: 32px;
  padding-right: var(--tn-space-2);
  background: var(--tn-surface-inset);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-pill);
  min-width: 220px;
}
.theme-modal__search:focus-within {
  border-color: var(--tn-accent-primary);
  box-shadow: 0 0 0 2px rgb(from var(--tn-accent-primary) r g b / 0.18);
}
.theme-modal__search-icon {
  position: absolute;
  left: 10px;
  font-size: 16px;
  color: var(--tn-text-muted);
  pointer-events: none;
}
.theme-modal__search-input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-family: inherit;
}
.theme-modal__search-input::placeholder {
  color: var(--tn-text-muted);
}
.theme-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: var(--tn-radius-pill);
  color: var(--tn-text-muted);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.theme-modal__close:hover {
  background: var(--tn-surface-inset);
  color: var(--tn-text-default);
}
.theme-modal__close:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.theme-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--tn-space-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--tn-space-3);
  align-content: start;
  background: var(--tn-surface-canvas);
}
.theme-modal__empty {
  grid-column: 1 / -1;
  margin: var(--tn-space-6) 0;
  text-align: center;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
}
.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-3);
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  text-align: left;
  color: var(--tn-text-default);
  cursor: pointer;
  transition: border-color 140ms ease,
        background-color 140ms ease,
        transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 160ms ease;
}
.theme-card:hover {
  border-color: var(--tn-accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.12);
}
.theme-card:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.theme-card--active {
  border-color: var(--tn-accent-primary);
  box-shadow: 0 0 0 1px var(--tn-accent-primary);
}
.theme-card[hidden] {
  display: none !important;
}
.theme-card__check {
  position: absolute;
  top: var(--tn-space-2);
  right: var(--tn-space-2);
  font-size: 18px;
  color: var(--tn-accent-primary);
  opacity: 0;
  transition: opacity 140ms ease;
}
.theme-card--active .theme-card__check {
  opacity: 1;
}
.theme-card__preview {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
  aspect-ratio: 16 / 10;
  background: var(--tn-color-surface-canvas, var(--tn-surface-canvas));
  border: 1px solid var(--tn-color-border-subtle, var(--tn-border-subtle));
  border-radius: var(--tn-radius-sm);
  padding: var(--tn-space-2);
  overflow: hidden;
}
.theme-card__chrome {
  display: flex;
  gap: 4px;
}
.theme-card__chrome-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tn-color-text-muted, var(--tn-text-muted));
  opacity: 0.6;
}
.theme-card__sample {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.theme-card__sample-bar {
  height: 6px;
  width: 80%;
  background: var(--tn-color-text-default, var(--tn-text-default));
  border-radius: var(--tn-radius-pill);
  opacity: 0.65;
}
.theme-card__sample-bar--short {
  width: 50%;
  opacity: 0.4;
}
.theme-card__sample-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px var(--tn-space-2);
  font-size: 10px;
  font-weight: 600;
  background: var(--tn-color-accent-primary, var(--tn-accent-primary));
  color: var(--tn-color-paper, var(--tn-color-paper));
  border-radius: var(--tn-radius-pill);
}
.theme-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
}
.theme-card__name {
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  color: var(--tn-text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-card__swatches {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
.theme-card__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--tn-border-subtle);
}
.theme-card__swatch--primary {
  background: var(--tn-accent-primary);
}
.theme-card__swatch--accent {
  background: var(--tn-accent-primary-strong);
}
.theme-card__swatch--panel {
  background: var(--tn-surface-panel);
}
.theme-card__swatch--text {
  background: var(--tn-text-default);
}
.theme-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
  padding: var(--tn-space-3) var(--tn-space-5);
  border-top: 1px solid var(--tn-border-subtle);
  background: var(--tn-surface-panel);
}
.theme-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tn-space-1);
  height: 32px;
  padding: 0 var(--tn-space-3);
  border-radius: var(--tn-radius-md);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.theme-modal__btn .material-symbols-outlined {
  font-size: 16px;
}
.theme-modal__btn--ghost {
  background: transparent;
  border: 1px solid var(--tn-border-subtle);
  color: var(--tn-text-muted);
}
.theme-modal__btn--ghost:hover {
  color: var(--tn-text-default);
  background: var(--tn-surface-inset);
}
.theme-modal__btn--primary {
  background: var(--tn-accent-primary);
  border: 1px solid var(--tn-accent-primary);
  color: var(--tn-color-paper);
}
.theme-modal__btn--primary:hover {
  background: var(--tn-accent-primary-strong);
  border-color: var(--tn-accent-primary-strong);
}
.theme-modal__btn:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
html.theme-modal-open,
html.theme-modal-open body {
  overflow: hidden;
}
.display-prefs__more-themes {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  width: 100%;
  margin-top: var(--tn-space-2);
  padding: var(--tn-space-2) var(--tn-space-3);
  background: var(--tn-surface-inset);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
  font-family: inherit;
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.display-prefs__more-themes:hover {
  background: var(--tn-surface-panel);
  border-color: var(--tn-accent-primary);
  color: var(--tn-text-default);
}
.display-prefs__more-themes:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.display-prefs__more-themes .material-symbols-outlined {
  font-size: 16px;
}
.display-prefs__more-themes-label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  min-width: 0;
  text-align: left;
}
.display-prefs__more-themes-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 var(--tn-space-2);
  background: var(--tn-accent-primary);
  color: var(--tn-color-paper);
  border-radius: var(--tn-radius-pill);
  font-size: var(--tn-font-size-micro);
  font-weight: 600;
  line-height: 1;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.display-prefs__more-themes-chip[hidden] {
  display: none;
}
.display-prefs__more-themes-chevron {
  color: var(--tn-text-muted);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .theme-modal {
    padding: 0;
  }
  .theme-modal__panel {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }
  .theme-modal__header {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title  close"
            "search search";
    row-gap: var(--tn-space-2);
  }
  .theme-modal__title-group {
    grid-area: title;
  }
  .theme-modal__close {
    grid-area: close;
  }
  .theme-modal__search {
    grid-area: search;
  }
  .theme-modal__body {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    padding: var(--tn-space-3);
  }
}
.a11y-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.a11y-dropdown-trigger:hover {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-border-muted);
}
.a11y-dropdown-trigger:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.a11y-dropdown-trigger .material-symbols-outlined {
  font-size: 20px;
}
.a11y-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  padding: var(--tn-space-3);
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}
html.dark .a11y-dropdown {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.a11y-dropdown[data-open] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.a11y-dropdown__section {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.a11y-dropdown__section + .a11y-dropdown__section {
  margin-top: var(--tn-space-3);
  padding-top: var(--tn-space-3);
  border-top: 1px solid var(--tn-border-subtle);
}
.a11y-dropdown__label {
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  color: var(--tn-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.a11y-font-controls {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}
.a11y-font-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-elevated);
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.a11y-font-btn:hover:not(:disabled) {
  background: var(--tn-accent-primary);
  border-color: var(--tn-accent-primary);
  color: var(--tn-color-ink);
  transform: scale(1.05);
}
.a11y-font-btn:active:not(:disabled) {
  transform: scale(0.95);
}
.a11y-font-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.a11y-font-btn:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.a11y-font-display {
  flex: 1;
  text-align: center;
  font-size: var(--tn-font-size-base);
  font-weight: 600;
  color: var(--tn-text-primary);
}
.a11y-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--tn-surface-subtle);
  border-radius: var(--tn-radius-md);
}
.a11y-panel__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}
.a11y-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.a11y-control--slider {
  flex: 1.5;
}
.a11y-control--toggle {
  flex: 0 0 auto;
}
.a11y-control__icon {
  font-size: 18px;
  color: var(--tn-text-soft);
  flex-shrink: 0;
}
.a11y-control__value {
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  color: var(--tn-text-primary);
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.a11y-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.a11y-panel__label {
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  color: var(--tn-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.a11y-slider {
  flex: 1;
  min-width: 80px;
  height: 6px;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.a11y-slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tn-accent-primary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.a11y-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.a11y-slider::-webkit-slider-thumb:active {
  transform: scale(1.1);
}
.a11y-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--tn-accent-primary);
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.a11y-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}
.a11y-slider::-moz-range-thumb:active {
  transform: scale(1.1);
}
.a11y-slider:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.a11y-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-subtle);
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance: none;
  appearance: none;
}
.a11y-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tn-text-muted);
  transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.a11y-toggle:checked {
  background: var(--tn-accent-primary);
  border-color: var(--tn-accent-primary);
}
.a11y-toggle:checked::before {
  left: 22px;
  background: var(--tn-color-ink);
}
.a11y-toggle:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.a11y-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.a11y-theme-group {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-pill);
}
.a11y-theme-btn {
  flex: 1;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tn-space-1);
  padding: 0 var(--tn-space-2);
  border: none;
  border-radius: var(--tn-radius-pill);
  background: transparent;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.a11y-theme-btn:hover {
  background: var(--tn-surface-elevated);
  color: var(--tn-text-default);
}
.a11y-theme-btn[aria-pressed="true"] {
  background: var(--tn-accent-primary);
  color: var(--tn-color-ink);
}
.a11y-theme-btn:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.a11y-theme-btn .material-symbols-outlined {
  font-size: 16px;
}
html.high-contrast {
  --tn-bg-page: #000;
  --tn-surface-panel: #000;
  --tn-surface-elevated: #1a1a1a;
  --tn-text-primary: #fff;
  --tn-text-default: #fff;
  --tn-text-muted: #ccc;
  --tn-border-subtle: #444;
  --tn-border-muted: #666;
}
html.high-contrast * {
  border-color: #666 !important;
}
@media (max-width: 1023px) {
  .a11y-dropdown-trigger {
    display: none;
  }
}
.sidebar-shell[data-sidebar-mode="mini"] .a11y-panel,
.sidebar-shell[data-sidebar-mode="micro"] .a11y-panel,
.admin-sidebar[data-collapsed="true"] .a11y-panel,
.admin-sidebar.is-micro .a11y-panel {
  display: none;
}
html.theme-dashboard {
  --tn-accent-primary: #3b82f6;
  --tn-accent-primary-strong: #2563eb;
  --tn-accent-primary-soft: rgb(59 130 246 / 0.12);
  --tn-accent-focus: rgb(59 130 246 / 0.28);
  --tn-color-yellow: #10b981;
  --tn-color-yellow-soft: rgb(16 185 129 / 0.16);
  --tn-color-yellow-rgb: 16 185 129;
  --tn-surface-canvas: #f8fafc;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f1f5f9;
  --tn-surface-inset: #e2e8f0;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f1f5f9;
  --tn-surface-panel-strong: #e2e8f0;
  --tn-surface-soft: #f1f5f9;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #0f172a;
  --tn-surface-footer-muted: #1e293b;
  --tn-border-default: #cbd5e1;
  --tn-border-muted: #e2e8f0;
  --tn-border-subtle: #e2e8f0;
  --tn-border-strong: #94a3b8;
  --tn-text-default: #1e293b;
  --tn-text-muted: #64748b;
  --tn-text-soft: #94a3b8;
  --tn-text-secondary: #475569;
  --tn-text-inverse: #fff;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.018em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 2px;
  --tn-shadow-component: 0 2px 4px rgb(15 23 42 / 0.08);
}
html.theme-dashboard[data-admin-shell="true"] {
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 2px;
  --tn-shadow-component: 0 2px 4px rgb(15 23 42 / 0.18);
}
html.theme-notion {
  --tn-accent-primary: #2383e2;
  --tn-accent-primary-strong: #1a6dc0;
  --tn-accent-primary-soft: rgb(35 131 226 / 0.12);
  --tn-accent-focus: rgb(35 131 226 / 0.24);
  --tn-color-yellow: #cb7c26;
  --tn-color-yellow-soft: rgb(203 124 38 / 0.16);
  --tn-color-yellow-rgb: 203 124 38;
  --tn-surface-canvas: #fff;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f7f7f5;
  --tn-surface-inset: #f1f1ef;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f7f7f5;
  --tn-surface-panel-strong: #ebebe9;
  --tn-surface-soft: #f7f7f5;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #37352f;
  --tn-surface-footer-muted: #2f2d28;
  --tn-border-default: rgb(55 53 47 / 0.16);
  --tn-border-muted: rgb(55 53 47 / 0.09);
  --tn-border-subtle: rgb(55 53 47 / 0.09);
  --tn-border-strong: rgb(55 53 47 / 0.32);
  --tn-text-default: #37352f;
  --tn-text-muted: #787774;
  --tn-text-soft: #9b9a97;
  --tn-text-secondary: #787774;
  --tn-text-inverse: #fff;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.011em;
  --tn-radius-component: 4px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: none;
}
html.theme-minimalist {
  --tn-accent-primary: #111;
  --tn-accent-primary-strong: #000;
  --tn-accent-primary-soft: rgb(17 17 17 / 0.06);
  --tn-accent-focus: rgb(0 102 255 / 0.32);
  --tn-color-yellow: #06f;
  --tn-color-yellow-soft: rgb(0 102 255 / 0.12);
  --tn-color-yellow-rgb: 0 102 255;
  --tn-surface-canvas: #fafafa;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f4f4f4;
  --tn-surface-inset: #ededed;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f4f4f4;
  --tn-surface-panel-strong: #ededed;
  --tn-surface-soft: #f4f4f4;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #111;
  --tn-surface-footer-muted: #1a1a1a;
  --tn-border-default: #e5e5e5;
  --tn-border-muted: #ededed;
  --tn-border-subtle: #ededed;
  --tn-border-strong: #111;
  --tn-text-default: #111;
  --tn-text-muted: #6b6b6b;
  --tn-text-soft: #9b9b9b;
  --tn-text-secondary: #4b4b4b;
  --tn-text-inverse: #fafafa;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.022em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: none;
}
html.theme-linear {
  color-scheme: dark;
  --tn-accent-primary: #5e6ad2;
  --tn-accent-primary-strong: #4f5bc4;
  --tn-accent-primary-soft: rgb(94 106 210 / 0.18);
  --tn-accent-focus: rgb(94 106 210 / 0.36);
  --tn-color-yellow: #8b5cf6;
  --tn-color-yellow-soft: rgb(139 92 246 / 0.18);
  --tn-color-yellow-rgb: 139 92 246;
  --tn-surface-canvas: #131316;
  --tn-surface-overlay: #1c1c1f;
  --tn-surface-subtle: #1c1c1f;
  --tn-surface-inset: #0f0f12;
  --tn-surface-panel: #1c1c1f;
  --tn-surface-panel-muted: #16161a;
  --tn-surface-panel-strong: #232328;
  --tn-surface-soft: #1c1c1f;
  --tn-surface-elevated: #232328;
  --tn-surface-footer: #0a0a0c;
  --tn-surface-footer-muted: #131316;
  --tn-border-default: rgb(255 255 255 / 0.10);
  --tn-border-muted: rgb(255 255 255 / 0.06);
  --tn-border-subtle: rgb(255 255 255 / 0.06);
  --tn-border-strong: rgb(255 255 255 / 0.18);
  --tn-text-default: #f4f4f5;
  --tn-text-muted: #a1a1aa;
  --tn-text-soft: #71717a;
  --tn-text-secondary: #d4d4d8;
  --tn-text-inverse: #131316;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.018em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 12px rgb(0 0 0 / 0.45);
}
html.theme-brutalism {
  --tn-accent-primary: #ff3b3b;
  --tn-accent-primary-strong: #c00;
  --tn-accent-primary-soft: rgb(255 59 59 / 0.16);
  --tn-accent-focus: rgb(255 59 59 / 0.36);
  --tn-color-yellow: #ff0;
  --tn-color-yellow-soft: rgb(255 255 0 / 0.32);
  --tn-color-yellow-rgb: 255 255 0;
  --tn-surface-canvas: #fff;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f4f4f4;
  --tn-surface-inset: #e9e9e9;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f4f4f4;
  --tn-surface-panel-strong: #e9e9e9;
  --tn-surface-soft: #f4f4f4;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #000;
  --tn-surface-footer-muted: #1a1a1a;
  --tn-border-default: #000;
  --tn-border-muted: #000;
  --tn-border-subtle: #000;
  --tn-border-strong: #000;
  --tn-text-default: #000;
  --tn-text-muted: #333;
  --tn-text-soft: #555;
  --tn-text-secondary: #1a1a1a;
  --tn-text-inverse: #fff;
  --tn-font-headline: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --tn-font-body: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --tn-tracking-heading: 0;
  --tn-radius-component: 0;
  --tn-border-width-component: 4px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: none;
}
html.theme-glassmorphism {
  color-scheme: dark;
  --tn-accent-primary: #8b5cf6;
  --tn-accent-primary-strong: #7c3aed;
  --tn-accent-primary-soft: rgb(139 92 246 / 0.22);
  --tn-accent-focus: rgb(139 92 246 / 0.42);
  --tn-color-yellow: #f472b6;
  --tn-color-yellow-soft: rgb(244 114 182 / 0.22);
  --tn-color-yellow-rgb: 244 114 182;
  --tn-surface-canvas: #1e1b4b;
  --tn-surface-overlay: rgb(255 255 255 / 0.06);
  --tn-surface-subtle: rgb(255 255 255 / 0.04);
  --tn-surface-inset: #181538;
  --tn-surface-panel: rgb(255 255 255 / 0.06);
  --tn-surface-panel-muted: rgb(255 255 255 / 0.04);
  --tn-surface-panel-strong: rgb(255 255 255 / 0.10);
  --tn-surface-soft: rgb(255 255 255 / 0.04);
  --tn-surface-elevated: rgb(255 255 255 / 0.10);
  --tn-surface-footer: #14122e;
  --tn-surface-footer-muted: #1a1838;
  --tn-border-default: rgb(255 255 255 / 0.18);
  --tn-border-muted: rgb(255 255 255 / 0.10);
  --tn-border-subtle: rgb(255 255 255 / 0.10);
  --tn-border-strong: rgb(255 255 255 / 0.32);
  --tn-text-default: #f5f3ff;
  --tn-text-muted: #c4b5fd;
  --tn-text-soft: #a78bfa;
  --tn-text-secondary: #ddd6fe;
  --tn-text-inverse: #1e1b4b;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 16px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: 0 8px 32px rgb(0 0 0 / 0.36);
}
html.theme-neubrutalism {
  --tn-accent-primary: #fde047;
  --tn-accent-primary-strong: #facc15;
  --tn-accent-primary-soft: rgb(253 224 71 / 0.36);
  --tn-accent-focus: rgb(253 224 71 / 0.56);
  --tn-color-yellow: #fb923c;
  --tn-color-yellow-soft: rgb(251 146 60 / 0.32);
  --tn-color-yellow-rgb: 251 146 60;
  --tn-surface-canvas: #fef3c7;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #fef9e7;
  --tn-surface-inset: #fde68a;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #fef9e7;
  --tn-surface-panel-strong: #fde68a;
  --tn-surface-soft: #fef9e7;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #1c1917;
  --tn-surface-footer-muted: #292524;
  --tn-border-default: #1c1917;
  --tn-border-muted: #1c1917;
  --tn-border-subtle: #44403c;
  --tn-border-strong: #1c1917;
  --tn-text-default: #1c1917;
  --tn-text-muted: #44403c;
  --tn-text-soft: #78716c;
  --tn-text-secondary: #292524;
  --tn-text-inverse: #fef3c7;
  --tn-font-headline: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --tn-font-body: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --tn-tracking-heading: 0;
  --tn-radius-component: 0;
  --tn-border-width-component: 3px;
  --tn-shadow-offset-x: 5px;
  --tn-shadow-offset-y: 5px;
  --tn-shadow-component: 5px 5px 0 #1c1917;
}
html.theme-retro {
  --tn-accent-primary: #c2410c;
  --tn-accent-primary-strong: #9a3412;
  --tn-accent-primary-soft: rgb(194 65 12 / 0.16);
  --tn-accent-focus: rgb(194 65 12 / 0.28);
  --tn-color-yellow: #ca8a04;
  --tn-color-yellow-soft: rgb(202 138 4 / 0.18);
  --tn-color-yellow-rgb: 202 138 4;
  --tn-surface-canvas: #fef3e2;
  --tn-surface-overlay: #fffaf0;
  --tn-surface-subtle: #fbe9c8;
  --tn-surface-inset: #f6dcae;
  --tn-surface-panel: #fffaf0;
  --tn-surface-panel-muted: #fbe9c8;
  --tn-surface-panel-strong: #f6dcae;
  --tn-surface-soft: #fbe9c8;
  --tn-surface-elevated: #fffaf0;
  --tn-surface-footer: #422006;
  --tn-surface-footer-muted: #5a2a08;
  --tn-border-default: rgb(66 32 6 / 0.32);
  --tn-border-muted: rgb(66 32 6 / 0.18);
  --tn-border-subtle: rgb(66 32 6 / 0.18);
  --tn-border-strong: #422006;
  --tn-text-default: #422006;
  --tn-text-muted: #78350f;
  --tn-text-soft: #92400e;
  --tn-text-secondary: #5a2a08;
  --tn-text-inverse: #fef3e2;
  --tn-font-headline: "Playfair Display", "Times New Roman", Georgia, serif;
  --tn-font-body: "Playfair Display", "Times New Roman", Georgia, serif;
  --tn-tracking-heading: -0.005em;
  --tn-radius-component: 16px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 12px rgb(66 32 6 / 0.18);
}
html.theme-cyberpunk {
  color-scheme: dark;
  --tn-accent-primary: #0ff;
  --tn-accent-primary-strong: #00d4d4;
  --tn-accent-primary-soft: rgb(0 255 255 / 0.18);
  --tn-accent-focus: rgb(0 255 255 / 0.42);
  --tn-color-yellow: #ff0;
  --tn-color-yellow-soft: rgb(255 255 0 / 0.22);
  --tn-color-yellow-rgb: 255 255 0;
  --tn-surface-canvas: #0a0a0f;
  --tn-surface-overlay: #14141c;
  --tn-surface-subtle: #14141c;
  --tn-surface-inset: #050508;
  --tn-surface-panel: #14141c;
  --tn-surface-panel-muted: #0e0e15;
  --tn-surface-panel-strong: #1d1d28;
  --tn-surface-soft: #14141c;
  --tn-surface-elevated: #1d1d28;
  --tn-surface-footer: #050508;
  --tn-surface-footer-muted: #0a0a0f;
  --tn-border-default: rgb(0 255 255 / 0.32);
  --tn-border-muted: rgb(0 255 255 / 0.16);
  --tn-border-subtle: rgb(0 255 255 / 0.16);
  --tn-border-strong: rgb(0 255 255 / 0.62);
  --tn-text-default: #e6f9ff;
  --tn-text-muted: #99c4d6;
  --tn-text-soft: #6b8b9a;
  --tn-text-secondary: #c4e7f5;
  --tn-text-inverse: #0a0a0f;
  --tn-font-headline: "Orbitron", "Space Mono", -apple-system, BlinkMacSystemFont, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.04em;
  --tn-radius-component: 4px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: 0 0 24px rgb(0 255 255 / 0.18);
}
html.theme-japanese-zen {
  --tn-accent-primary: #b91c1c;
  --tn-accent-primary-strong: #991b1b;
  --tn-accent-primary-soft: rgb(185 28 28 / 0.10);
  --tn-accent-focus: rgb(185 28 28 / 0.24);
  --tn-color-yellow: #8b7355;
  --tn-color-yellow-soft: rgb(139 115 85 / 0.18);
  --tn-color-yellow-rgb: 139 115 85;
  --tn-surface-canvas: #fdfbf7;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f7f3ec;
  --tn-surface-inset: #efe9df;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f7f3ec;
  --tn-surface-panel-strong: #efe9df;
  --tn-surface-soft: #f7f3ec;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #1a1a1a;
  --tn-surface-footer-muted: #2a2a2a;
  --tn-border-default: rgb(26 26 26 / 0.16);
  --tn-border-muted: rgb(26 26 26 / 0.08);
  --tn-border-subtle: rgb(26 26 26 / 0.08);
  --tn-border-strong: rgb(26 26 26 / 0.36);
  --tn-text-default: #1a1a1a;
  --tn-text-muted: #5a5a5a;
  --tn-text-soft: #8a8a8a;
  --tn-text-secondary: #2a2a2a;
  --tn-text-inverse: #fdfbf7;
  --tn-font-headline: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.02em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: none;
}
html.theme-scandinavian {
  --tn-accent-primary: #1e3a5f;
  --tn-accent-primary-strong: #15294a;
  --tn-accent-primary-soft: rgb(30 58 95 / 0.12);
  --tn-accent-focus: rgb(30 58 95 / 0.28);
  --tn-color-yellow: #7a8b7c;
  --tn-color-yellow-soft: rgb(122 139 124 / 0.18);
  --tn-color-yellow-rgb: 122 139 124;
  --tn-surface-canvas: #faf7f2;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f3eee5;
  --tn-surface-inset: #e8e1d3;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f3eee5;
  --tn-surface-panel-strong: #e8e1d3;
  --tn-surface-soft: #f3eee5;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #1e3a5f;
  --tn-surface-footer-muted: #15294a;
  --tn-border-default: rgb(30 58 95 / 0.18);
  --tn-border-muted: rgb(30 58 95 / 0.08);
  --tn-border-subtle: rgb(30 58 95 / 0.08);
  --tn-border-strong: rgb(30 58 95 / 0.36);
  --tn-text-default: #1e3a5f;
  --tn-text-muted: #5a6a7a;
  --tn-text-soft: #8a96a3;
  --tn-text-secondary: #2a4566;
  --tn-text-inverse: #faf7f2;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.014em;
  --tn-radius-component: 12px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 2px;
  --tn-shadow-component: 0 2px 8px rgb(30 58 95 / 0.08);
}
html.theme-wabi-sabi {
  --tn-accent-primary: #92400e;
  --tn-accent-primary-strong: #78350f;
  --tn-accent-primary-soft: rgb(146 64 14 / 0.12);
  --tn-accent-focus: rgb(146 64 14 / 0.28);
  --tn-color-yellow: #a16207;
  --tn-color-yellow-soft: rgb(161 98 7 / 0.18);
  --tn-color-yellow-rgb: 161 98 7;
  --tn-surface-canvas: #faf6ee;
  --tn-surface-overlay: #fffaf0;
  --tn-surface-subtle: #f3ecdd;
  --tn-surface-inset: #ebe1cc;
  --tn-surface-panel: #fffaf0;
  --tn-surface-panel-muted: #f3ecdd;
  --tn-surface-panel-strong: #ebe1cc;
  --tn-surface-soft: #f3ecdd;
  --tn-surface-elevated: #fffaf0;
  --tn-surface-footer: #44403c;
  --tn-surface-footer-muted: #292524;
  --tn-border-default: rgb(68 64 60 / 0.22);
  --tn-border-muted: rgb(68 64 60 / 0.10);
  --tn-border-subtle: rgb(68 64 60 / 0.10);
  --tn-border-strong: rgb(68 64 60 / 0.42);
  --tn-text-default: #44403c;
  --tn-text-muted: #78716c;
  --tn-text-soft: #a8a29e;
  --tn-text-secondary: #57534e;
  --tn-text-inverse: #faf6ee;
  --tn-font-headline: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.005em;
  --tn-radius-component: 4px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 12px rgb(68 64 60 / 0.10);
}
html.theme-korean-modern {
  --tn-accent-primary: #ec407a;
  --tn-accent-primary-strong: #d81b60;
  --tn-accent-primary-soft: rgb(236 64 122 / 0.14);
  --tn-accent-focus: rgb(236 64 122 / 0.32);
  --tn-color-yellow: #283593;
  --tn-color-yellow-soft: rgb(40 53 147 / 0.12);
  --tn-color-yellow-rgb: 40 53 147;
  --tn-surface-canvas: #fff7f9;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #fdedf2;
  --tn-surface-inset: #f9dde6;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #fdedf2;
  --tn-surface-panel-strong: #f9dde6;
  --tn-surface-soft: #fdedf2;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #283593;
  --tn-surface-footer-muted: #1a237e;
  --tn-border-default: rgb(40 53 147 / 0.16);
  --tn-border-muted: rgb(40 53 147 / 0.08);
  --tn-border-subtle: rgb(40 53 147 / 0.08);
  --tn-border-strong: rgb(40 53 147 / 0.36);
  --tn-text-default: #1a1a2e;
  --tn-text-muted: #5a5a72;
  --tn-text-soft: #8a8aa3;
  --tn-text-secondary: #2a2a44;
  --tn-text-inverse: #fff7f9;
  --tn-font-headline: "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  --tn-font-body: "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 16px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 16px rgb(236 64 122 / 0.12);
}
html.theme-french-parisian {
  --tn-accent-primary: #7f1d1d;
  --tn-accent-primary-strong: #5c1717;
  --tn-accent-primary-soft: rgb(127 29 29 / 0.12);
  --tn-accent-focus: rgb(127 29 29 / 0.28);
  --tn-color-yellow: #b08d57;
  --tn-color-yellow-soft: rgb(176 141 87 / 0.18);
  --tn-color-yellow-rgb: 176 141 87;
  --tn-surface-canvas: #fdfaf3;
  --tn-surface-overlay: #fffdf7;
  --tn-surface-subtle: #f6f1e3;
  --tn-surface-inset: #ede5cd;
  --tn-surface-panel: #fffdf7;
  --tn-surface-panel-muted: #f6f1e3;
  --tn-surface-panel-strong: #ede5cd;
  --tn-surface-soft: #f6f1e3;
  --tn-surface-elevated: #fffdf7;
  --tn-surface-footer: #1c1917;
  --tn-surface-footer-muted: #292524;
  --tn-border-default: rgb(127 29 29 / 0.22);
  --tn-border-muted: rgb(127 29 29 / 0.10);
  --tn-border-subtle: rgb(127 29 29 / 0.10);
  --tn-border-strong: #7f1d1d;
  --tn-text-default: #1c1917;
  --tn-text-muted: #5c4a3f;
  --tn-text-soft: #8a7766;
  --tn-text-secondary: #292524;
  --tn-text-inverse: #fdfaf3;
  --tn-font-headline: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --tn-font-body: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --tn-tracking-heading: 0.005em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 14px rgb(28 25 23 / 0.12);
}
html.theme-greek-mediterranean {
  --tn-accent-primary: #1565c0;
  --tn-accent-primary-strong: #0d47a1;
  --tn-accent-primary-soft: rgb(21 101 192 / 0.12);
  --tn-accent-focus: rgb(21 101 192 / 0.28);
  --tn-color-yellow: #c0392b;
  --tn-color-yellow-soft: rgb(192 57 43 / 0.16);
  --tn-color-yellow-rgb: 192 57 43;
  --tn-surface-canvas: #fdfbf5;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f4eedf;
  --tn-surface-inset: #e8ddc8;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f4eedf;
  --tn-surface-panel-strong: #e8ddc8;
  --tn-surface-soft: #f4eedf;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #0d47a1;
  --tn-surface-footer-muted: #093178;
  --tn-border-default: rgb(13 71 161 / 0.16);
  --tn-border-muted: rgb(13 71 161 / 0.08);
  --tn-border-subtle: rgb(13 71 161 / 0.08);
  --tn-border-strong: rgb(13 71 161 / 0.36);
  --tn-text-default: #0d47a1;
  --tn-text-muted: #4a5a72;
  --tn-text-soft: #7a8a9a;
  --tn-text-secondary: #1a3768;
  --tn-text-inverse: #fdfbf5;
  --tn-font-headline: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.005em;
  --tn-radius-component: 12px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 12px rgb(13 71 161 / 0.10);
}
html.theme-moroccan-luxe {
  --tn-accent-primary: #1e6091;
  --tn-accent-primary-strong: #0f456b;
  --tn-accent-primary-soft: rgb(30 96 145 / 0.14);
  --tn-accent-focus: rgb(30 96 145 / 0.32);
  --tn-color-yellow: #d97706;
  --tn-color-yellow-soft: rgb(217 119 6 / 0.18);
  --tn-color-yellow-rgb: 217 119 6;
  --tn-surface-canvas: #fefae0;
  --tn-surface-overlay: #fffdf0;
  --tn-surface-subtle: #f9efc4;
  --tn-surface-inset: #f3e3a4;
  --tn-surface-panel: #fffdf0;
  --tn-surface-panel-muted: #f9efc4;
  --tn-surface-panel-strong: #f3e3a4;
  --tn-surface-soft: #f9efc4;
  --tn-surface-elevated: #fffdf0;
  --tn-surface-footer: #0f456b;
  --tn-surface-footer-muted: #082c47;
  --tn-border-default: rgb(15 69 107 / 0.22);
  --tn-border-muted: rgb(15 69 107 / 0.10);
  --tn-border-subtle: rgb(15 69 107 / 0.10);
  --tn-border-strong: rgb(15 69 107 / 0.46);
  --tn-text-default: #0f456b;
  --tn-text-muted: #5a4a30;
  --tn-text-soft: #8a7548;
  --tn-text-secondary: #1a2e44;
  --tn-text-inverse: #fefae0;
  --tn-font-headline: "Amiri", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.005em;
  --tn-radius-component: 16px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 16px rgb(217 119 6 / 0.18);
}
html.theme-southwest-desert {
  --tn-accent-primary: #c2410c;
  --tn-accent-primary-strong: #9a3412;
  --tn-accent-primary-soft: rgb(194 65 12 / 0.14);
  --tn-accent-focus: rgb(194 65 12 / 0.30);
  --tn-color-yellow: #0d9488;
  --tn-color-yellow-soft: rgb(13 148 136 / 0.16);
  --tn-color-yellow-rgb: 13 148 136;
  --tn-surface-canvas: #fef3e2;
  --tn-surface-overlay: #fff8eb;
  --tn-surface-subtle: #fde3bf;
  --tn-surface-inset: #fbd194;
  --tn-surface-panel: #fff8eb;
  --tn-surface-panel-muted: #fde3bf;
  --tn-surface-panel-strong: #fbd194;
  --tn-surface-soft: #fde3bf;
  --tn-surface-elevated: #fff8eb;
  --tn-surface-footer: #4c2a14;
  --tn-surface-footer-muted: #34170a;
  --tn-border-default: rgb(76 42 20 / 0.22);
  --tn-border-muted: rgb(76 42 20 / 0.10);
  --tn-border-subtle: rgb(76 42 20 / 0.10);
  --tn-border-strong: rgb(76 42 20 / 0.46);
  --tn-text-default: #4c2a14;
  --tn-text-muted: #7a503a;
  --tn-text-soft: #a37f63;
  --tn-text-secondary: #5e3a22;
  --tn-text-inverse: #fef3e2;
  --tn-font-headline: "Playfair Display", "Lora", "Times New Roman", Georgia, serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.005em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 14px rgb(76 42 20 / 0.14);
}
html.theme-tropical-paradise {
  --tn-accent-primary: #ff6b6b;
  --tn-accent-primary-strong: #ee5253;
  --tn-accent-primary-soft: rgb(255 107 107 / 0.16);
  --tn-accent-focus: rgb(255 107 107 / 0.36);
  --tn-color-yellow: #fbbf24;
  --tn-color-yellow-soft: rgb(251 191 36 / 0.22);
  --tn-color-yellow-rgb: 251 191 36;
  --tn-surface-canvas: #ecfeff;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #d6f5f7;
  --tn-surface-inset: #b8ebef;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #d6f5f7;
  --tn-surface-panel-strong: #b8ebef;
  --tn-surface-soft: #d6f5f7;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #075e74;
  --tn-surface-footer-muted: #053f4f;
  --tn-border-default: rgb(6 182 212 / 0.32);
  --tn-border-muted: rgb(6 182 212 / 0.16);
  --tn-border-subtle: rgb(6 182 212 / 0.16);
  --tn-border-strong: rgb(6 182 212 / 0.62);
  --tn-text-default: #075e74;
  --tn-text-muted: #2a7a8a;
  --tn-text-soft: #5a9aa6;
  --tn-text-secondary: #0d4759;
  --tn-text-inverse: #ecfeff;
  --tn-font-headline: "Pacifico", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --tn-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.005em;
  --tn-radius-component: 16px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 16px rgb(255 107 107 / 0.18);
}
html.theme-african-bold {
  --tn-accent-primary: #1e293b;
  --tn-accent-primary-strong: #0f172a;
  --tn-accent-primary-soft: rgb(30 41 59 / 0.14);
  --tn-accent-focus: rgb(30 41 59 / 0.32);
  --tn-color-yellow: #f59e0b;
  --tn-color-yellow-soft: rgb(245 158 11 / 0.22);
  --tn-color-yellow-rgb: 245 158 11;
  --tn-surface-canvas: #fef3c7;
  --tn-surface-overlay: #fffbeb;
  --tn-surface-subtle: #fde68a;
  --tn-surface-inset: #fcd34d;
  --tn-surface-panel: #fffbeb;
  --tn-surface-panel-muted: #fde68a;
  --tn-surface-panel-strong: #fcd34d;
  --tn-surface-soft: #fde68a;
  --tn-surface-elevated: #fffbeb;
  --tn-surface-footer: #1e293b;
  --tn-surface-footer-muted: #0f172a;
  --tn-border-default: #1e293b;
  --tn-border-muted: rgb(30 41 59 / 0.32);
  --tn-border-subtle: rgb(30 41 59 / 0.18);
  --tn-border-strong: #0f172a;
  --tn-text-default: #1e293b;
  --tn-text-muted: #475569;
  --tn-text-soft: #64748b;
  --tn-text-secondary: #334155;
  --tn-text-inverse: #fef3c7;
  --tn-font-headline: "Bebas Neue", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.04em;
  --tn-radius-component: 4px;
  --tn-border-width-component: 3px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 4px 4px 0 #1e293b;
}
html.theme-forest-woodland {
  --tn-accent-primary: #14532d;
  --tn-accent-primary-strong: #0a3d1c;
  --tn-accent-primary-soft: rgb(20 83 45 / 0.12);
  --tn-accent-focus: rgb(20 83 45 / 0.28);
  --tn-color-yellow: #84cc16;
  --tn-color-yellow-soft: rgb(132 204 22 / 0.18);
  --tn-color-yellow-rgb: 132 204 22;
  --tn-surface-canvas: #f4f1e8;
  --tn-surface-overlay: #fbf9f1;
  --tn-surface-subtle: #ebe5d3;
  --tn-surface-inset: #ddd5b8;
  --tn-surface-panel: #fbf9f1;
  --tn-surface-panel-muted: #ebe5d3;
  --tn-surface-panel-strong: #ddd5b8;
  --tn-surface-soft: #ebe5d3;
  --tn-surface-elevated: #fbf9f1;
  --tn-surface-footer: #14532d;
  --tn-surface-footer-muted: #0a3d1c;
  --tn-border-default: rgb(20 83 45 / 0.20);
  --tn-border-muted: rgb(20 83 45 / 0.10);
  --tn-border-subtle: rgb(20 83 45 / 0.10);
  --tn-border-strong: rgb(20 83 45 / 0.42);
  --tn-text-default: #14532d;
  --tn-text-muted: #5a6a4a;
  --tn-text-soft: #8a9477;
  --tn-text-secondary: #1f5e38;
  --tn-text-inverse: #f4f1e8;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 12px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 14px rgb(20 83 45 / 0.12);
}
html.theme-ocean-coastal {
  --tn-accent-primary: #0c4a6e;
  --tn-accent-primary-strong: #075985;
  --tn-accent-primary-soft: rgb(12 74 110 / 0.12);
  --tn-accent-focus: rgb(12 74 110 / 0.28);
  --tn-color-yellow: #06b6d4;
  --tn-color-yellow-soft: rgb(6 182 212 / 0.16);
  --tn-color-yellow-rgb: 6 182 212;
  --tn-surface-canvas: #f0f9ff;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #e0f2fe;
  --tn-surface-inset: #bae6fd;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #e0f2fe;
  --tn-surface-panel-strong: #bae6fd;
  --tn-surface-soft: #e0f2fe;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #0c4a6e;
  --tn-surface-footer-muted: #082f49;
  --tn-border-default: rgb(12 74 110 / 0.18);
  --tn-border-muted: rgb(12 74 110 / 0.08);
  --tn-border-subtle: rgb(12 74 110 / 0.08);
  --tn-border-strong: rgb(12 74 110 / 0.36);
  --tn-text-default: #0c4a6e;
  --tn-text-muted: #4a6a82;
  --tn-text-soft: #7a96a8;
  --tn-text-secondary: #155775;
  --tn-text-inverse: #f0f9ff;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 12px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 14px rgb(12 74 110 / 0.10);
}
html.theme-neumorphism {
  --tn-accent-primary: #6c7a89;
  --tn-accent-primary-strong: #4d5a68;
  --tn-accent-primary-soft: rgb(108 122 137 / 0.18);
  --tn-accent-focus: rgb(108 122 137 / 0.36);
  --tn-color-yellow: #94a3b8;
  --tn-color-yellow-soft: rgb(148 163 184 / 0.18);
  --tn-color-yellow-rgb: 148 163 184;
  --tn-surface-canvas: #e0e5ec;
  --tn-surface-overlay: #e0e5ec;
  --tn-surface-subtle: #d6dbe2;
  --tn-surface-inset: #cbd0d7;
  --tn-surface-panel: #e0e5ec;
  --tn-surface-panel-muted: #d6dbe2;
  --tn-surface-panel-strong: #cbd0d7;
  --tn-surface-soft: #d6dbe2;
  --tn-surface-elevated: #e0e5ec;
  --tn-surface-footer: #b8bfc9;
  --tn-surface-footer-muted: #a8b0bb;
  --tn-border-default: rgb(108 122 137 / 0.10);
  --tn-border-muted: rgb(108 122 137 / 0.05);
  --tn-border-subtle: rgb(108 122 137 / 0.05);
  --tn-border-strong: rgb(108 122 137 / 0.20);
  --tn-text-default: #2d3748;
  --tn-text-muted: #5a6878;
  --tn-text-soft: #8a96a3;
  --tn-text-secondary: #3a4a5a;
  --tn-text-inverse: #e0e5ec;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 16px;
  --tn-border-width-component: 0;
  --tn-shadow-offset-x: 9px;
  --tn-shadow-offset-y: 9px;
  --tn-shadow-component: 9px 9px 18px rgb(163 177 198 / 0.55),
        -9px -9px 18px rgb(255 255 255 / 0.85);
}
html.theme-claymorphism {
  --tn-accent-primary: #6366f1;
  --tn-accent-primary-strong: #4f46e5;
  --tn-accent-primary-soft: rgb(99 102 241 / 0.16);
  --tn-accent-focus: rgb(99 102 241 / 0.36);
  --tn-color-yellow: #f472b6;
  --tn-color-yellow-soft: rgb(244 114 182 / 0.20);
  --tn-color-yellow-rgb: 244 114 182;
  --tn-surface-canvas: #eef2ff;
  --tn-surface-overlay: #f8faff;
  --tn-surface-subtle: #e0e7ff;
  --tn-surface-inset: #c7d2fe;
  --tn-surface-panel: #f8faff;
  --tn-surface-panel-muted: #e0e7ff;
  --tn-surface-panel-strong: #c7d2fe;
  --tn-surface-soft: #e0e7ff;
  --tn-surface-elevated: #f8faff;
  --tn-surface-footer: #4338ca;
  --tn-surface-footer-muted: #312e81;
  --tn-border-default: rgb(99 102 241 / 0.12);
  --tn-border-muted: rgb(99 102 241 / 0.06);
  --tn-border-subtle: rgb(99 102 241 / 0.06);
  --tn-border-strong: rgb(99 102 241 / 0.28);
  --tn-text-default: #1e1b4b;
  --tn-text-muted: #4f46e5;
  --tn-text-soft: #818cf8;
  --tn-text-secondary: #312e81;
  --tn-text-inverse: #eef2ff;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.014em;
  --tn-radius-component: 24px;
  --tn-border-width-component: 0;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 8px;
  --tn-shadow-component: 0 8px 24px rgb(99 102 241 / 0.18),
        inset 0 -4px 0 rgb(99 102 241 / 0.08);
}
html.theme-aurora-gradient {
  color-scheme: dark;
  --tn-accent-primary: #a855f7;
  --tn-accent-primary-strong: #9333ea;
  --tn-accent-primary-soft: rgb(168 85 247 / 0.22);
  --tn-accent-focus: rgb(168 85 247 / 0.42);
  --tn-color-yellow: #06b6d4;
  --tn-color-yellow-soft: rgb(6 182 212 / 0.22);
  --tn-color-yellow-rgb: 6 182 212;
  --tn-surface-canvas: linear-gradient(135deg, #0f0a2e 0%, #2a1054 50%, #0a3047 100%);
  --tn-surface-overlay: rgb(255 255 255 / 0.06);
  --tn-surface-subtle: rgb(255 255 255 / 0.04);
  --tn-surface-inset: rgb(0 0 0 / 0.32);
  --tn-surface-panel: rgb(255 255 255 / 0.08);
  --tn-surface-panel-muted: rgb(255 255 255 / 0.04);
  --tn-surface-panel-strong: rgb(255 255 255 / 0.12);
  --tn-surface-soft: rgb(255 255 255 / 0.04);
  --tn-surface-elevated: rgb(255 255 255 / 0.10);
  --tn-surface-footer: #0f0a2e;
  --tn-surface-footer-muted: #1a0f3a;
  --tn-border-default: rgb(168 85 247 / 0.32);
  --tn-border-muted: rgb(168 85 247 / 0.16);
  --tn-border-subtle: rgb(168 85 247 / 0.16);
  --tn-border-strong: rgb(168 85 247 / 0.62);
  --tn-text-default: #f5f3ff;
  --tn-text-muted: #c4b5fd;
  --tn-text-soft: #a78bfa;
  --tn-text-secondary: #ddd6fe;
  --tn-text-inverse: #0f0a2e;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 16px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 8px;
  --tn-shadow-component: 0 8px 32px rgb(168 85 247 / 0.28);
}
html.theme-aurora-gradient body {
  background: var(--tn-surface-canvas);
  background-attachment: fixed;
}
html.theme-oled-dark {
  color-scheme: dark;
  --tn-accent-primary: #10b981;
  --tn-accent-primary-strong: #059669;
  --tn-accent-primary-soft: rgb(16 185 129 / 0.22);
  --tn-accent-focus: rgb(16 185 129 / 0.42);
  --tn-color-yellow: #06b6d4;
  --tn-color-yellow-soft: rgb(6 182 212 / 0.22);
  --tn-color-yellow-rgb: 6 182 212;
  --tn-surface-canvas: #000;
  --tn-surface-overlay: #0a0a0a;
  --tn-surface-subtle: #0a0a0a;
  --tn-surface-inset: #000;
  --tn-surface-panel: #0a0a0a;
  --tn-surface-panel-muted: #050505;
  --tn-surface-panel-strong: #141414;
  --tn-surface-soft: #0a0a0a;
  --tn-surface-elevated: #141414;
  --tn-surface-footer: #000;
  --tn-surface-footer-muted: #050505;
  --tn-border-default: rgb(16 185 129 / 0.28);
  --tn-border-muted: rgb(255 255 255 / 0.10);
  --tn-border-subtle: rgb(255 255 255 / 0.06);
  --tn-border-strong: rgb(16 185 129 / 0.56);
  --tn-text-default: #f5f5f5;
  --tn-text-muted: #a3a3a3;
  --tn-text-soft: #737373;
  --tn-text-secondary: #d4d4d4;
  --tn-text-inverse: #000;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: none;
}
html.theme-frosted-dark {
  color-scheme: dark;
  --tn-accent-primary: #38bdf8;
  --tn-accent-primary-strong: #0ea5e9;
  --tn-accent-primary-soft: rgb(56 189 248 / 0.18);
  --tn-accent-focus: rgb(56 189 248 / 0.36);
  --tn-color-yellow: #818cf8;
  --tn-color-yellow-soft: rgb(129 140 248 / 0.18);
  --tn-color-yellow-rgb: 129 140 248;
  --tn-surface-canvas: #0f172a;
  --tn-surface-overlay: rgb(255 255 255 / 0.05);
  --tn-surface-subtle: rgb(255 255 255 / 0.03);
  --tn-surface-inset: #0a1020;
  --tn-surface-panel: rgb(255 255 255 / 0.05);
  --tn-surface-panel-muted: rgb(255 255 255 / 0.03);
  --tn-surface-panel-strong: rgb(255 255 255 / 0.10);
  --tn-surface-soft: rgb(255 255 255 / 0.03);
  --tn-surface-elevated: rgb(255 255 255 / 0.10);
  --tn-surface-footer: #0a1020;
  --tn-surface-footer-muted: #050a14;
  --tn-border-default: rgb(255 255 255 / 0.14);
  --tn-border-muted: rgb(255 255 255 / 0.08);
  --tn-border-subtle: rgb(255 255 255 / 0.08);
  --tn-border-strong: rgb(255 255 255 / 0.28);
  --tn-text-default: #f1f5f9;
  --tn-text-muted: #94a3b8;
  --tn-text-soft: #64748b;
  --tn-text-secondary: #cbd5e1;
  --tn-text-inverse: #0f172a;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 20px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 8px;
  --tn-shadow-component: 0 8px 32px rgb(15 23 42 / 0.42);
}
html.theme-paper-cutout {
  --tn-accent-primary: #e85d75;
  --tn-accent-primary-strong: #c8425a;
  --tn-accent-primary-soft: rgb(232 93 117 / 0.14);
  --tn-accent-focus: rgb(232 93 117 / 0.28);
  --tn-color-yellow: #f4a261;
  --tn-color-yellow-soft: rgb(244 162 97 / 0.20);
  --tn-color-yellow-rgb: 244 162 97;
  --tn-surface-canvas: #fefae0;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f8f1d4;
  --tn-surface-inset: #f0e6c0;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f8f1d4;
  --tn-surface-panel-strong: #f0e6c0;
  --tn-surface-soft: #f8f1d4;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #5b3a29;
  --tn-surface-footer-muted: #4a2f22;
  --tn-border-default: rgb(91 58 41 / 0.18);
  --tn-border-muted: rgb(91 58 41 / 0.10);
  --tn-border-subtle: rgb(91 58 41 / 0.10);
  --tn-border-strong: rgb(91 58 41 / 0.36);
  --tn-text-default: #5b3a29;
  --tn-text-muted: #8a6850;
  --tn-text-soft: #a88774;
  --tn-text-secondary: #6b4836;
  --tn-text-inverse: #fefae0;
  --tn-font-headline: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.005em;
  --tn-radius-component: 14px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 6px;
  --tn-shadow-component: 0 2px 0 rgb(91 58 41 / 0.08),
        0 6px 18px rgb(91 58 41 / 0.14);
}
html.theme-skeuomorphism {
  --tn-accent-primary: #2563eb;
  --tn-accent-primary-strong: #1d4ed8;
  --tn-accent-primary-soft: rgb(37 99 235 / 0.12);
  --tn-accent-focus: rgb(37 99 235 / 0.28);
  --tn-color-yellow: #f59e0b;
  --tn-color-yellow-soft: rgb(245 158 11 / 0.16);
  --tn-color-yellow-rgb: 245 158 11;
  --tn-surface-canvas: #e8edf2;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #dde3ea;
  --tn-surface-inset: #cfd6df;
  --tn-surface-panel: #f5f7fa;
  --tn-surface-panel-muted: #dde3ea;
  --tn-surface-panel-strong: #cfd6df;
  --tn-surface-soft: #dde3ea;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #1e293b;
  --tn-surface-footer-muted: #0f172a;
  --tn-border-default: rgb(30 41 59 / 0.16);
  --tn-border-muted: rgb(30 41 59 / 0.08);
  --tn-border-subtle: rgb(30 41 59 / 0.08);
  --tn-border-strong: rgb(30 41 59 / 0.32);
  --tn-text-default: #1e293b;
  --tn-text-muted: #64748b;
  --tn-text-soft: #94a3b8;
  --tn-text-secondary: #334155;
  --tn-text-inverse: #fff;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 2px;
  --tn-shadow-component: inset 0 1px 0 rgb(255 255 255 / 0.6),
        0 2px 4px rgb(30 41 59 / 0.18),
        0 4px 12px rgb(30 41 59 / 0.10);
}
html.theme-liquid-organic {
  --tn-accent-primary: #a855f7;
  --tn-accent-primary-strong: #8b3fe0;
  --tn-accent-primary-soft: rgb(168 85 247 / 0.14);
  --tn-accent-focus: rgb(168 85 247 / 0.28);
  --tn-color-yellow: #ec4899;
  --tn-color-yellow-soft: rgb(236 72 153 / 0.16);
  --tn-color-yellow-rgb: 236 72 153;
  --tn-surface-canvas: #fdf4ff;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f9e8ff;
  --tn-surface-inset: #f3d4ff;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f9e8ff;
  --tn-surface-panel-strong: #f3d4ff;
  --tn-surface-soft: #f9e8ff;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #581c87;
  --tn-surface-footer-muted: #4a1571;
  --tn-border-default: rgb(168 85 247 / 0.20);
  --tn-border-muted: rgb(168 85 247 / 0.10);
  --tn-border-subtle: rgb(168 85 247 / 0.10);
  --tn-border-strong: rgb(168 85 247 / 0.40);
  --tn-text-default: #581c87;
  --tn-text-muted: #7e3bb1;
  --tn-text-soft: #a78bda;
  --tn-text-secondary: #6b2796;
  --tn-text-inverse: #fdf4ff;
  --tn-font-headline: "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.005em;
  --tn-radius-component: 24px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 8px;
  --tn-shadow-component: 0 8px 24px rgb(168 85 247 / 0.18);
}
html.theme-art-deco {
  --tn-accent-primary: #d4af37;
  --tn-accent-primary-strong: #b39429;
  --tn-accent-primary-soft: rgb(212 175 55 / 0.16);
  --tn-accent-focus: rgb(212 175 55 / 0.32);
  --tn-color-yellow: #d4af37;
  --tn-color-yellow-soft: rgb(212 175 55 / 0.20);
  --tn-color-yellow-rgb: 212 175 55;
  --tn-surface-canvas: #fdf6e3;
  --tn-surface-overlay: #fffbef;
  --tn-surface-subtle: #f5ecd0;
  --tn-surface-inset: #ebdfb6;
  --tn-surface-panel: #fffbef;
  --tn-surface-panel-muted: #f5ecd0;
  --tn-surface-panel-strong: #ebdfb6;
  --tn-surface-soft: #f5ecd0;
  --tn-surface-elevated: #fffbef;
  --tn-surface-footer: #1a1a1a;
  --tn-surface-footer-muted: #0d0d0d;
  --tn-border-default: rgb(26 26 26 / 0.40);
  --tn-border-muted: rgb(26 26 26 / 0.16);
  --tn-border-subtle: rgb(26 26 26 / 0.16);
  --tn-border-strong: rgb(26 26 26 / 0.72);
  --tn-text-default: #1a1a1a;
  --tn-text-muted: #5a5a5a;
  --tn-text-soft: #8a8a8a;
  --tn-text-secondary: #2d2d2d;
  --tn-text-inverse: #fdf6e3;
  --tn-font-headline: "Cinzel", "Playfair Display", Georgia, serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.06em;
  --tn-radius-component: 4px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 4px 0 #1a1a1a;
}
html.theme-mid-century {
  --tn-accent-primary: #d2691e;
  --tn-accent-primary-strong: #b25410;
  --tn-accent-primary-soft: rgb(210 105 30 / 0.14);
  --tn-accent-focus: rgb(210 105 30 / 0.28);
  --tn-color-yellow: #e9c46a;
  --tn-color-yellow-soft: rgb(233 196 106 / 0.20);
  --tn-color-yellow-rgb: 233 196 106;
  --tn-surface-canvas: #f5e6d3;
  --tn-surface-overlay: #fff5e6;
  --tn-surface-subtle: #ecdcc4;
  --tn-surface-inset: #e0cdb0;
  --tn-surface-panel: #fff5e6;
  --tn-surface-panel-muted: #ecdcc4;
  --tn-surface-panel-strong: #e0cdb0;
  --tn-surface-soft: #ecdcc4;
  --tn-surface-elevated: #fff5e6;
  --tn-surface-footer: #2a9d8f;
  --tn-surface-footer-muted: #1f7a70;
  --tn-border-default: rgb(58 39 28 / 0.18);
  --tn-border-muted: rgb(58 39 28 / 0.10);
  --tn-border-subtle: rgb(58 39 28 / 0.10);
  --tn-border-strong: rgb(58 39 28 / 0.36);
  --tn-text-default: #3a271c;
  --tn-text-muted: #6b4836;
  --tn-text-soft: #98745f;
  --tn-text-secondary: #4a3324;
  --tn-text-inverse: #f5e6d3;
  --tn-font-headline: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.012em;
  --tn-radius-component: 6px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 3px;
  --tn-shadow-component: 0 3px 10px rgb(58 39 28 / 0.16);
}
html.theme-synthwave {
  color-scheme: dark;
  --tn-accent-primary: #f0f;
  --tn-accent-primary-strong: #d600d6;
  --tn-accent-primary-soft: rgb(255 0 255 / 0.18);
  --tn-accent-focus: rgb(255 0 255 / 0.40);
  --tn-color-yellow: #0ff;
  --tn-color-yellow-soft: rgb(0 255 255 / 0.18);
  --tn-color-yellow-rgb: 0 255 255;
  --tn-surface-canvas: #1a0033;
  --tn-surface-overlay: #2a0a4f;
  --tn-surface-subtle: #240845;
  --tn-surface-inset: #15002b;
  --tn-surface-panel: #2a0a4f;
  --tn-surface-panel-muted: #240845;
  --tn-surface-panel-strong: #1a0033;
  --tn-surface-soft: #240845;
  --tn-surface-elevated: #2a0a4f;
  --tn-surface-footer: #0d001a;
  --tn-surface-footer-muted: #08000f;
  --tn-border-default: rgb(255 0 255 / 0.32);
  --tn-border-muted: rgb(255 0 255 / 0.16);
  --tn-border-subtle: rgb(255 0 255 / 0.16);
  --tn-border-strong: rgb(255 0 255 / 0.64);
  --tn-text-default: #fff;
  --tn-text-muted: #c4a8e8;
  --tn-text-soft: #8a6db0;
  --tn-text-secondary: #0ff;
  --tn-text-inverse: #1a0033;
  --tn-font-headline: "Audiowide", "Orbitron", -apple-system, BlinkMacSystemFont, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.04em;
  --tn-radius-component: 4px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: 0 0 12px rgb(255 0 255 / 0.50),
        0 0 24px rgb(0 255 255 / 0.20);
}
html.theme-vaporwave {
  --tn-accent-primary: #ff71ce;
  --tn-accent-primary-strong: #ff4cc0;
  --tn-accent-primary-soft: rgb(255 113 206 / 0.18);
  --tn-accent-focus: rgb(255 113 206 / 0.36);
  --tn-color-yellow: #01cdfe;
  --tn-color-yellow-soft: rgb(1 205 254 / 0.18);
  --tn-color-yellow-rgb: 1 205 254;
  --tn-surface-canvas: #fce4ec;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f8d5e2;
  --tn-surface-inset: #f3c2d4;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f8d5e2;
  --tn-surface-panel-strong: #f3c2d4;
  --tn-surface-soft: #f8d5e2;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #b967ff;
  --tn-surface-footer-muted: #9a4de0;
  --tn-border-default: rgb(75 0 130 / 0.28);
  --tn-border-muted: rgb(75 0 130 / 0.14);
  --tn-border-subtle: rgb(75 0 130 / 0.14);
  --tn-border-strong: rgb(75 0 130 / 0.56);
  --tn-text-default: #4b0082;
  --tn-text-muted: #7e3bb1;
  --tn-text-soft: #b56fd9;
  --tn-text-secondary: #5d1a93;
  --tn-text-inverse: #fce4ec;
  --tn-font-headline: "VT323", "Space Mono", ui-monospace, monospace;
  --tn-font-body: "VT323", "Space Mono", ui-monospace, monospace;
  --tn-tracking-heading: 0.02em;
  --tn-radius-component: 0px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 6px;
  --tn-shadow-offset-y: 6px;
  --tn-shadow-component: 6px 6px 0 #b967ff;
}
html.theme-y2k {
  --tn-accent-primary: #00d4ff;
  --tn-accent-primary-strong: #00a8d6;
  --tn-accent-primary-soft: rgb(0 212 255 / 0.16);
  --tn-accent-focus: rgb(0 212 255 / 0.32);
  --tn-color-yellow: #f6c;
  --tn-color-yellow-soft: rgb(255 102 204 / 0.18);
  --tn-color-yellow-rgb: 255 102 204;
  --tn-surface-canvas: #e0e8f0;
  --tn-surface-overlay: #f4f8fc;
  --tn-surface-subtle: #d4dde8;
  --tn-surface-inset: #c4cfdc;
  --tn-surface-panel: #f4f8fc;
  --tn-surface-panel-muted: #d4dde8;
  --tn-surface-panel-strong: #c4cfdc;
  --tn-surface-soft: #d4dde8;
  --tn-surface-elevated: #f4f8fc;
  --tn-surface-footer: #1a3a52;
  --tn-surface-footer-muted: #0d2638;
  --tn-border-default: rgb(0 84 130 / 0.22);
  --tn-border-muted: rgb(0 84 130 / 0.10);
  --tn-border-subtle: rgb(0 84 130 / 0.10);
  --tn-border-strong: rgb(0 84 130 / 0.44);
  --tn-text-default: #1a3a52;
  --tn-text-muted: #4a6680;
  --tn-text-soft: #7a92aa;
  --tn-text-secondary: #2a4a64;
  --tn-text-inverse: #e0e8f0;
  --tn-font-headline: "Audiowide", "Orbitron", -apple-system, BlinkMacSystemFont, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.03em;
  --tn-radius-component: 16px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: inset 0 1px 0 rgb(255 255 255 / 0.7),
        0 4px 14px rgb(0 84 130 / 0.20);
}
html.theme-victorian {
  --tn-accent-primary: #8b0000;
  --tn-accent-primary-strong: #6b0000;
  --tn-accent-primary-soft: rgb(139 0 0 / 0.14);
  --tn-accent-focus: rgb(139 0 0 / 0.28);
  --tn-color-yellow: #b8860b;
  --tn-color-yellow-soft: rgb(184 134 11 / 0.18);
  --tn-color-yellow-rgb: 184 134 11;
  --tn-surface-canvas: #f4e8d0;
  --tn-surface-overlay: #fcf5e3;
  --tn-surface-subtle: #ecdcb8;
  --tn-surface-inset: #ddc89a;
  --tn-surface-panel: #fcf5e3;
  --tn-surface-panel-muted: #ecdcb8;
  --tn-surface-panel-strong: #ddc89a;
  --tn-surface-soft: #ecdcb8;
  --tn-surface-elevated: #fcf5e3;
  --tn-surface-footer: #2b0d0d;
  --tn-surface-footer-muted: #1c0808;
  --tn-border-default: rgb(43 13 13 / 0.28);
  --tn-border-muted: rgb(43 13 13 / 0.14);
  --tn-border-subtle: rgb(43 13 13 / 0.14);
  --tn-border-strong: rgb(43 13 13 / 0.56);
  --tn-text-default: #2b0d0d;
  --tn-text-muted: #6a3d3d;
  --tn-text-soft: #946767;
  --tn-text-secondary: #3d1818;
  --tn-text-inverse: #f4e8d0;
  --tn-font-headline: "IM Fell DW Pica", "Playfair Display", Georgia, serif;
  --tn-font-body: "IM Fell DW Pica", "Cormorant Garamond", Georgia, serif;
  --tn-tracking-heading: 0.005em;
  --tn-radius-component: 4px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 3px;
  --tn-shadow-component: 0 1px 0 rgb(184 134 11 / 0.30),
        0 3px 8px rgb(43 13 13 / 0.22);
}
html.theme-psychedelic {
  --tn-accent-primary: #ff006e;
  --tn-accent-primary-strong: #d6005c;
  --tn-accent-primary-soft: rgb(255 0 110 / 0.14);
  --tn-accent-focus: rgb(255 0 110 / 0.32);
  --tn-color-yellow: #fb5607;
  --tn-color-yellow-soft: rgb(251 86 7 / 0.18);
  --tn-color-yellow-rgb: 251 86 7;
  --tn-surface-canvas: #fff8a0;
  --tn-surface-overlay: #fffdc9;
  --tn-surface-subtle: #fff183;
  --tn-surface-inset: #f9e75c;
  --tn-surface-panel: #fffdc9;
  --tn-surface-panel-muted: #fff183;
  --tn-surface-panel-strong: #f9e75c;
  --tn-surface-soft: #fff183;
  --tn-surface-elevated: #fffdc9;
  --tn-surface-footer: #8338ec;
  --tn-surface-footer-muted: #6822c4;
  --tn-border-default: #1a1a1a;
  --tn-border-muted: rgb(26 26 26 / 0.32);
  --tn-border-subtle: rgb(26 26 26 / 0.32);
  --tn-border-strong: #1a1a1a;
  --tn-text-default: #1a1a1a;
  --tn-text-muted: #4a4a4a;
  --tn-text-soft: #7a7a7a;
  --tn-text-secondary: #8338ec;
  --tn-text-inverse: #fff8a0;
  --tn-font-headline: "Bungee", "Bebas Neue", -apple-system, BlinkMacSystemFont, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.02em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 3px;
  --tn-shadow-offset-x: 4px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 4px 4px 0 #1a1a1a;
}
html.theme-pixel-art {
  --tn-accent-primary: #38bdf8;
  --tn-accent-primary-strong: #0ea5e9;
  --tn-accent-primary-soft: rgb(56 189 248 / 0.16);
  --tn-accent-focus: rgb(56 189 248 / 0.32);
  --tn-color-yellow: #facc15;
  --tn-color-yellow-soft: rgb(250 204 21 / 0.20);
  --tn-color-yellow-rgb: 250 204 21;
  --tn-surface-canvas: #fef3c7;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #fde68a;
  --tn-surface-inset: #fcd34d;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #fde68a;
  --tn-surface-panel-strong: #fcd34d;
  --tn-surface-soft: #fde68a;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #1e293b;
  --tn-surface-footer-muted: #0f172a;
  --tn-border-default: #1e293b;
  --tn-border-muted: rgb(30 41 59 / 0.32);
  --tn-border-subtle: rgb(30 41 59 / 0.32);
  --tn-border-strong: #1e293b;
  --tn-text-default: #1e293b;
  --tn-text-muted: #475569;
  --tn-text-soft: #64748b;
  --tn-text-secondary: #334155;
  --tn-text-inverse: #fef3c7;
  --tn-font-headline: "Press Start 2P", "VT323", "Space Mono", ui-monospace, monospace;
  --tn-font-body: "Press Start 2P", "VT323", "Space Mono", ui-monospace, monospace;
  --tn-tracking-heading: 0.04em;
  --tn-radius-component: 0px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 4px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 4px 4px 0 #1e293b;
}
html.theme-swiss {
  --tn-accent-primary: #dc2626;
  --tn-accent-primary-strong: #b91c1c;
  --tn-accent-primary-soft: rgb(220 38 38 / 0.10);
  --tn-accent-focus: rgb(220 38 38 / 0.24);
  --tn-color-yellow: #facc15;
  --tn-color-yellow-soft: rgb(250 204 21 / 0.18);
  --tn-color-yellow-rgb: 250 204 21;
  --tn-surface-canvas: #fafafa;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f4f4f5;
  --tn-surface-inset: #e4e4e7;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f4f4f5;
  --tn-surface-panel-strong: #e4e4e7;
  --tn-surface-soft: #f4f4f5;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #18181b;
  --tn-surface-footer-muted: #09090b;
  --tn-border-default: #18181b;
  --tn-border-muted: rgb(24 24 27 / 0.16);
  --tn-border-subtle: rgb(24 24 27 / 0.16);
  --tn-border-strong: #18181b;
  --tn-text-default: #18181b;
  --tn-text-muted: #52525b;
  --tn-text-soft: #71717a;
  --tn-text-secondary: #27272a;
  --tn-text-inverse: #fafafa;
  --tn-font-headline: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tn-font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tn-tracking-heading: -0.02em;
  --tn-radius-component: 0px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: none;
}
html.theme-bauhaus {
  --tn-accent-primary: #2563eb;
  --tn-accent-primary-strong: #1d4ed8;
  --tn-accent-primary-soft: rgb(37 99 235 / 0.12);
  --tn-accent-focus: rgb(37 99 235 / 0.28);
  --tn-color-yellow: #fbbf24;
  --tn-color-yellow-soft: rgb(251 191 36 / 0.20);
  --tn-color-yellow-rgb: 251 191 36;
  --tn-surface-canvas: #f5f5f4;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #e7e5e4;
  --tn-surface-inset: #d6d3d1;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #e7e5e4;
  --tn-surface-panel-strong: #d6d3d1;
  --tn-surface-soft: #e7e5e4;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #1c1917;
  --tn-surface-footer-muted: #0c0a09;
  --tn-border-default: #1c1917;
  --tn-border-muted: rgb(28 25 23 / 0.32);
  --tn-border-subtle: rgb(28 25 23 / 0.32);
  --tn-border-strong: #1c1917;
  --tn-text-default: #1c1917;
  --tn-text-muted: #57534e;
  --tn-text-soft: #78716c;
  --tn-text-secondary: #dc2626;
  --tn-text-inverse: #f5f5f4;
  --tn-font-headline: "Archivo Black", "Bebas Neue", -apple-system, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.01em;
  --tn-radius-component: 0px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 4px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 4px 4px 0 #1c1917;
}
html.theme-pop-art {
  --tn-accent-primary: #f06;
  --tn-accent-primary-strong: #d6004f;
  --tn-accent-primary-soft: rgb(255 0 102 / 0.14);
  --tn-accent-focus: rgb(255 0 102 / 0.32);
  --tn-color-yellow: #ffd700;
  --tn-color-yellow-soft: rgb(255 215 0 / 0.22);
  --tn-color-yellow-rgb: 255 215 0;
  --tn-surface-canvas: #fff8d4;
  --tn-surface-overlay: #fffce8;
  --tn-surface-subtle: #fef3a3;
  --tn-surface-inset: #fde768;
  --tn-surface-panel: #fffce8;
  --tn-surface-panel-muted: #fef3a3;
  --tn-surface-panel-strong: #fde768;
  --tn-surface-soft: #fef3a3;
  --tn-surface-elevated: #fffce8;
  --tn-surface-footer: #0d0d0d;
  --tn-surface-footer-muted: #000;
  --tn-border-default: #0d0d0d;
  --tn-border-muted: rgb(13 13 13 / 0.36);
  --tn-border-subtle: rgb(13 13 13 / 0.36);
  --tn-border-strong: #0d0d0d;
  --tn-text-default: #0d0d0d;
  --tn-text-muted: #404040;
  --tn-text-soft: #6b6b6b;
  --tn-text-secondary: #f06;
  --tn-text-inverse: #fff8d4;
  --tn-font-headline: "Bowlby One", "Bungee", "Bebas Neue", -apple-system, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.01em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 3px;
  --tn-shadow-offset-x: 5px;
  --tn-shadow-offset-y: 5px;
  --tn-shadow-component: 5px 5px 0 #0d0d0d;
}
html.theme-de-stijl {
  --tn-accent-primary: #e30613;
  --tn-accent-primary-strong: #b30410;
  --tn-accent-primary-soft: rgb(227 6 19 / 0.10);
  --tn-accent-focus: rgb(227 6 19 / 0.28);
  --tn-color-yellow: #ffd200;
  --tn-color-yellow-soft: rgb(255 210 0 / 0.22);
  --tn-color-yellow-rgb: 255 210 0;
  --tn-surface-canvas: #fff;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f5f5f5;
  --tn-surface-inset: #e5e5e5;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f5f5f5;
  --tn-surface-panel-strong: #e5e5e5;
  --tn-surface-soft: #f5f5f5;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #000;
  --tn-surface-footer-muted: #1a1a1a;
  --tn-border-default: #000;
  --tn-border-muted: rgb(0 0 0 / 0.40);
  --tn-border-subtle: rgb(0 0 0 / 0.40);
  --tn-border-strong: #000;
  --tn-text-default: #000;
  --tn-text-muted: #404040;
  --tn-text-soft: #6b6b6b;
  --tn-text-secondary: #1d4ed8;
  --tn-text-inverse: #fff;
  --tn-font-headline: "Archivo Black", "Bebas Neue", -apple-system, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.005em;
  --tn-radius-component: 0px;
  --tn-border-width-component: 4px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: none;
}
html.theme-constructivism {
  --tn-accent-primary: #b91c1c;
  --tn-accent-primary-strong: #991414;
  --tn-accent-primary-soft: rgb(185 28 28 / 0.12);
  --tn-accent-focus: rgb(185 28 28 / 0.28);
  --tn-color-yellow: #d97706;
  --tn-color-yellow-soft: rgb(217 119 6 / 0.18);
  --tn-color-yellow-rgb: 217 119 6;
  --tn-surface-canvas: #f5f1e3;
  --tn-surface-overlay: #fffbed;
  --tn-surface-subtle: #ece7d4;
  --tn-surface-inset: #ddd5b8;
  --tn-surface-panel: #fffbed;
  --tn-surface-panel-muted: #ece7d4;
  --tn-surface-panel-strong: #ddd5b8;
  --tn-surface-soft: #ece7d4;
  --tn-surface-elevated: #fffbed;
  --tn-surface-footer: #18181b;
  --tn-surface-footer-muted: #09090b;
  --tn-border-default: #18181b;
  --tn-border-muted: rgb(24 24 27 / 0.32);
  --tn-border-subtle: rgb(24 24 27 / 0.32);
  --tn-border-strong: #18181b;
  --tn-text-default: #18181b;
  --tn-text-muted: #44403c;
  --tn-text-soft: #78716c;
  --tn-text-secondary: #b91c1c;
  --tn-text-inverse: #f5f1e3;
  --tn-font-headline: "Bebas Neue", "Archivo Black", -apple-system, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.04em;
  --tn-radius-component: 0px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 5px;
  --tn-shadow-offset-y: 5px;
  --tn-shadow-component: 5px 5px 0 #18181b;
}
html.theme-art-nouveau {
  --tn-accent-primary: #5d6e3f;
  --tn-accent-primary-strong: #455429;
  --tn-accent-primary-soft: rgb(93 110 63 / 0.14);
  --tn-accent-focus: rgb(93 110 63 / 0.28);
  --tn-color-yellow: #b4884d;
  --tn-color-yellow-soft: rgb(180 136 77 / 0.18);
  --tn-color-yellow-rgb: 180 136 77;
  --tn-surface-canvas: #f6f1e3;
  --tn-surface-overlay: #fcf8eb;
  --tn-surface-subtle: #ebe5d0;
  --tn-surface-inset: #ddd4b8;
  --tn-surface-panel: #fcf8eb;
  --tn-surface-panel-muted: #ebe5d0;
  --tn-surface-panel-strong: #ddd4b8;
  --tn-surface-soft: #ebe5d0;
  --tn-surface-elevated: #fcf8eb;
  --tn-surface-footer: #2e3a1c;
  --tn-surface-footer-muted: #1f2811;
  --tn-border-default: rgb(46 58 28 / 0.18);
  --tn-border-muted: rgb(46 58 28 / 0.10);
  --tn-border-subtle: rgb(46 58 28 / 0.10);
  --tn-border-strong: rgb(46 58 28 / 0.40);
  --tn-text-default: #2e3a1c;
  --tn-text-muted: #5d6e3f;
  --tn-text-soft: #8a956d;
  --tn-text-secondary: #b4884d;
  --tn-text-inverse: #f6f1e3;
  --tn-font-headline: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --tn-font-body: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --tn-tracking-heading: 0;
  --tn-radius-component: 16px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 4px;
  --tn-shadow-component: 0 1px 0 rgb(180 136 77 / 0.24),
        0 4px 16px rgb(46 58 28 / 0.16);
}
html.theme-kawaii {
  --tn-accent-primary: #ff80ab;
  --tn-accent-primary-strong: #ff5c97;
  --tn-accent-primary-soft: rgb(255 128 171 / 0.18);
  --tn-accent-focus: rgb(255 128 171 / 0.36);
  --tn-color-yellow: #b388ff;
  --tn-color-yellow-soft: rgb(179 136 255 / 0.18);
  --tn-color-yellow-rgb: 179 136 255;
  --tn-surface-canvas: #fff0f5;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #ffe1eb;
  --tn-surface-inset: #ffcedb;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #ffe1eb;
  --tn-surface-panel-strong: #ffcedb;
  --tn-surface-soft: #ffe1eb;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #b388ff;
  --tn-surface-footer-muted: #9268e0;
  --tn-border-default: rgb(255 92 151 / 0.32);
  --tn-border-muted: rgb(255 92 151 / 0.16);
  --tn-border-subtle: rgb(255 92 151 / 0.16);
  --tn-border-strong: rgb(255 92 151 / 0.56);
  --tn-text-default: #8a2057;
  --tn-text-muted: #b04a82;
  --tn-text-soft: #d489b3;
  --tn-text-secondary: #b388ff;
  --tn-text-inverse: #fff0f5;
  --tn-font-headline: "Mochiy Pop One", "Quicksand", "Comfortaa", -apple-system, sans-serif;
  --tn-font-body: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.005em;
  --tn-radius-component: 20px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 6px;
  --tn-shadow-component: 0 6px 20px rgb(255 128 171 / 0.30);
}
html.theme-doodle {
  --tn-accent-primary: #6d28d9;
  --tn-accent-primary-strong: #5b21b6;
  --tn-accent-primary-soft: rgb(109 40 217 / 0.14);
  --tn-accent-focus: rgb(109 40 217 / 0.28);
  --tn-color-yellow: #f59e0b;
  --tn-color-yellow-soft: rgb(245 158 11 / 0.18);
  --tn-color-yellow-rgb: 245 158 11;
  --tn-surface-canvas: #fefcf7;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f9f4e8;
  --tn-surface-inset: #f0e9d6;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f9f4e8;
  --tn-surface-panel-strong: #f0e9d6;
  --tn-surface-soft: #f9f4e8;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #1e1b29;
  --tn-surface-footer-muted: #0f0d18;
  --tn-border-default: #1e1b29;
  --tn-border-muted: rgb(30 27 41 / 0.32);
  --tn-border-subtle: rgb(30 27 41 / 0.32);
  --tn-border-strong: #1e1b29;
  --tn-text-default: #1e1b29;
  --tn-text-muted: #4a455c;
  --tn-text-soft: #74708a;
  --tn-text-secondary: #6d28d9;
  --tn-text-inverse: #fefcf7;
  --tn-font-headline: "Caveat", "Pacifico", "Comic Sans MS", cursive;
  --tn-font-body: "Caveat", "Pacifico", "Comic Sans MS", cursive;
  --tn-tracking-heading: 0.005em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 2px;
  --tn-shadow-offset-x: 3px;
  --tn-shadow-offset-y: 3px;
  --tn-shadow-component: 3px 3px 0 #1e1b29;
}
html.theme-graffiti {
  --tn-accent-primary: #ff2d95;
  --tn-accent-primary-strong: #d6217a;
  --tn-accent-primary-soft: rgb(255 45 149 / 0.16);
  --tn-accent-focus: rgb(255 45 149 / 0.36);
  --tn-color-yellow: #fbbf24;
  --tn-color-yellow-soft: rgb(251 191 36 / 0.22);
  --tn-color-yellow-rgb: 251 191 36;
  --tn-surface-canvas: #d1d5db;
  --tn-surface-overlay: #f3f4f6;
  --tn-surface-subtle: #c1c5cd;
  --tn-surface-inset: #a8aeb8;
  --tn-surface-panel: #f3f4f6;
  --tn-surface-panel-muted: #c1c5cd;
  --tn-surface-panel-strong: #a8aeb8;
  --tn-surface-soft: #c1c5cd;
  --tn-surface-elevated: #f3f4f6;
  --tn-surface-footer: #111;
  --tn-surface-footer-muted: #000;
  --tn-border-default: #111;
  --tn-border-muted: rgb(17 17 17 / 0.32);
  --tn-border-subtle: rgb(17 17 17 / 0.32);
  --tn-border-strong: #111;
  --tn-text-default: #111;
  --tn-text-muted: #404040;
  --tn-text-soft: #6b6b6b;
  --tn-text-secondary: #ff2d95;
  --tn-text-inverse: #d1d5db;
  --tn-font-headline: "Permanent Marker", "Bangers", "Bebas Neue", -apple-system, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.01em;
  --tn-radius-component: 4px;
  --tn-border-width-component: 3px;
  --tn-shadow-offset-x: 6px;
  --tn-shadow-offset-y: 6px;
  --tn-shadow-component: 6px 6px 0 #111;
}
html.theme-comic-book {
  --tn-accent-primary: #ef4444;
  --tn-accent-primary-strong: #c73838;
  --tn-accent-primary-soft: rgb(239 68 68 / 0.14);
  --tn-accent-focus: rgb(239 68 68 / 0.32);
  --tn-color-yellow: #fbbf24;
  --tn-color-yellow-soft: rgb(251 191 36 / 0.22);
  --tn-color-yellow-rgb: 251 191 36;
  --tn-surface-canvas: #fef9c3;
  --tn-surface-overlay: #fffbe6;
  --tn-surface-subtle: #fef08a;
  --tn-surface-inset: #fde047;
  --tn-surface-panel: #fffbe6;
  --tn-surface-panel-muted: #fef08a;
  --tn-surface-panel-strong: #fde047;
  --tn-surface-soft: #fef08a;
  --tn-surface-elevated: #fffbe6;
  --tn-surface-footer: #111;
  --tn-surface-footer-muted: #000;
  --tn-border-default: #111;
  --tn-border-muted: rgb(17 17 17 / 0.40);
  --tn-border-subtle: rgb(17 17 17 / 0.40);
  --tn-border-strong: #111;
  --tn-text-default: #111;
  --tn-text-muted: #404040;
  --tn-text-soft: #6b6b6b;
  --tn-text-secondary: #2563eb;
  --tn-text-inverse: #fef9c3;
  --tn-font-headline: "Bangers", "Bowlby One", "Bebas Neue", -apple-system, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.04em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 3px;
  --tn-shadow-offset-x: 5px;
  --tn-shadow-offset-y: 5px;
  --tn-shadow-component: 5px 5px 0 #111;
}
html.theme-neon-glow {
  color-scheme: dark;
  --tn-accent-primary: #ec4899;
  --tn-accent-primary-strong: #db2777;
  --tn-accent-primary-soft: rgb(236 72 153 / 0.18);
  --tn-accent-focus: rgb(236 72 153 / 0.40);
  --tn-color-yellow: #06b6d4;
  --tn-color-yellow-soft: rgb(6 182 212 / 0.18);
  --tn-color-yellow-rgb: 6 182 212;
  --tn-surface-canvas: #0a0a14;
  --tn-surface-overlay: #14142b;
  --tn-surface-subtle: #1a1a2e;
  --tn-surface-inset: #050510;
  --tn-surface-panel: #14142b;
  --tn-surface-panel-muted: #1a1a2e;
  --tn-surface-panel-strong: #0a0a14;
  --tn-surface-soft: #14142b;
  --tn-surface-elevated: #14142b;
  --tn-surface-footer: #050510;
  --tn-surface-footer-muted: #000;
  --tn-border-default: rgb(236 72 153 / 0.32);
  --tn-border-muted: rgb(236 72 153 / 0.16);
  --tn-border-subtle: rgb(236 72 153 / 0.16);
  --tn-border-strong: rgb(236 72 153 / 0.64);
  --tn-text-default: #fff;
  --tn-text-muted: #a8a3c4;
  --tn-text-soft: #6e6a8a;
  --tn-text-secondary: #06b6d4;
  --tn-text-inverse: #0a0a14;
  --tn-font-headline: "Audiowide", "Orbitron", -apple-system, BlinkMacSystemFont, sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: 0.03em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: 0 0 14px rgb(236 72 153 / 0.45),
        0 0 28px rgb(6 182 212 / 0.20);
}
html.theme-stripe {
  --tn-accent-primary: #635bff;
  --tn-accent-primary-strong: #4f46e5;
  --tn-accent-primary-soft: rgb(99 91 255 / 0.10);
  --tn-accent-focus: rgb(99 91 255 / 0.24);
  --tn-color-yellow: #00d4b4;
  --tn-color-yellow-soft: rgb(0 212 180 / 0.16);
  --tn-color-yellow-rgb: 0 212 180;
  --tn-surface-canvas: #fff;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f7fafc;
  --tn-surface-inset: #edf2f7;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f7fafc;
  --tn-surface-panel-strong: #edf2f7;
  --tn-surface-soft: #f7fafc;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #0a2540;
  --tn-surface-footer-muted: #061b2e;
  --tn-border-default: rgb(10 37 64 / 0.10);
  --tn-border-muted: rgb(10 37 64 / 0.06);
  --tn-border-subtle: rgb(10 37 64 / 0.06);
  --tn-border-strong: rgb(10 37 64 / 0.20);
  --tn-text-default: #0a2540;
  --tn-text-muted: #425466;
  --tn-text-soft: #8898aa;
  --tn-text-secondary: #1a3552;
  --tn-text-inverse: #fff;
  --tn-font-headline: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.022em;
  --tn-radius-component: 8px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 8px;
  --tn-shadow-component: 0 1px 2px rgb(10 37 64 / 0.06), 0 8px 24px rgb(10 37 64 / 0.10);
}
html.theme-editorial {
  --tn-accent-primary: #1a1a1a;
  --tn-accent-primary-strong: #000;
  --tn-accent-primary-soft: rgb(26 26 26 / 0.08);
  --tn-accent-focus: rgb(26 26 26 / 0.20);
  --tn-color-yellow: #b91c1c;
  --tn-color-yellow-soft: rgb(185 28 28 / 0.14);
  --tn-color-yellow-rgb: 185 28 28;
  --tn-surface-canvas: #fafaf5;
  --tn-surface-overlay: #fff;
  --tn-surface-subtle: #f0f0e8;
  --tn-surface-inset: #e2e2d6;
  --tn-surface-panel: #fff;
  --tn-surface-panel-muted: #f0f0e8;
  --tn-surface-panel-strong: #e2e2d6;
  --tn-surface-soft: #f0f0e8;
  --tn-surface-elevated: #fff;
  --tn-surface-footer: #1a1a1a;
  --tn-surface-footer-muted: #0d0d0d;
  --tn-border-default: rgb(26 26 26 / 0.18);
  --tn-border-muted: rgb(26 26 26 / 0.10);
  --tn-border-subtle: rgb(26 26 26 / 0.10);
  --tn-border-strong: rgb(26 26 26 / 0.40);
  --tn-text-default: #1a1a1a;
  --tn-text-muted: #4a4a4a;
  --tn-text-soft: #7a7a7a;
  --tn-text-secondary: #b91c1c;
  --tn-text-inverse: #fafaf5;
  --tn-font-headline: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --tn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tn-tracking-heading: -0.005em;
  --tn-radius-component: 0px;
  --tn-border-width-component: 1px;
  --tn-shadow-offset-x: 0px;
  --tn-shadow-offset-y: 0px;
  --tn-shadow-component: none;
}
.home-page {
  --home-gutter: var(--tn-page-gutter);
  --home-content-max: var(--tn-page-max-width);
  --home-stack-gap: var(--tn-space-12);
  position: relative;
  overflow-x: hidden;
}
.home-inner {
  max-width: var(--home-content-max);
  margin: 0 auto;
  padding: 0 var(--home-gutter);
}
.home-content {
  display: flex;
  flex-direction: column;
  gap: var(--home-stack-gap);
  padding-bottom: var(--tn-space-16);
}
.home-section {
  padding: var(--tn-section-gap) 0 0;
}
.home-hero {
  position: relative;
  padding: var(--tn-space-12) 0 var(--tn-space-10);
  border-bottom: var(--tn-border-heavy);
  background: var(--tn-surface-panel);
  overflow: hidden;
}
.home-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--home-content-max);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-6);
  margin: 0 auto;
  padding: 0 var(--home-gutter);
}
.home-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-4);
}
.home-hero__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: var(--tn-border-heavy);
  opacity: 0.65;
}
.home-hero__decor--a {
  top: var(--tn-space-8);
  right: clamp(4px, 4vw, 80px);
  width: clamp(56px, 12vw, 140px);
  height: clamp(56px, 12vw, 140px);
  background: var(--tn-color-pink-soft);
  border-radius: 50%;
  transform: rotate(8deg);
}
.home-hero__decor--b {
  bottom: var(--tn-space-6);
  right: clamp(72px, 18vw, 240px);
  width: clamp(32px, 8vw, 80px);
  height: clamp(32px, 8vw, 80px);
  background: var(--tn-color-teal-soft);
  border-radius: var(--tn-radius-md);
  transform: rotate(-12deg);
}
@media (max-width: 1024px) {
  .home-hero__decor {
    display: none;
  }
}
.home-hero__sticker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  background: var(--tn-color-pink);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-sm);
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
  transform: rotate(-2deg);
  margin: 0 0 var(--tn-space-1);
}
.home-hero__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-tight);
  color: var(--tn-text-default);
}
.home-hero__lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--tn-font-size-lg);
  line-height: var(--tn-leading-body);
  color: var(--tn-text-muted);
}
.home-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-3);
  max-width: 680px;
  margin: var(--tn-space-2) 0 0;
  padding: 0;
  list-style: none;
}
.home-stat {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
  padding: var(--tn-space-4);
  border: var(--tn-border-heavy);
  background: var(--tn-surface-canvas);
  box-shadow: var(--tn-shadow-card);
  border-radius: var(--tn-radius-xl);
}
.home-stat--primary {
  border-top: 4px solid var(--tn-color-pink);
}
.home-stat--secondary {
  border-top: 4px solid var(--tn-color-teal);
}
.home-stat--tertiary {
  border-top: 4px solid var(--tn-color-yellow);
}
.home-stat strong {
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-2xl);
  font-weight: 900;
}
.home-stat span {
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
}
.home-stat--linked {
  padding: 0;
}
.home-stat__link {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
  padding: var(--tn-space-4);
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.home-stat__link:hover,
.home-stat__link:focus-visible {
  background: var(--tn-surface-panel);
  transform: translateY(-1px);
}
.home-stat__link:focus-visible {
  outline: 2px solid var(--tn-color-teal);
  outline-offset: 2px;
}
.home-stat__link-affordance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--tn-space-1);
  color: var(--tn-color-teal);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.home-stat__link-icon {
  width: 1em;
  height: 1em;
  font-size: 16px;
  transition: transform 0.15s ease;
}
.home-stat__link:hover .home-stat__link-icon,
.home-stat__link:focus-visible .home-stat__link-icon {
  transform: translateX(2px);
}
.home-route-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: var(--tn-border-heavy);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 800;
  text-decoration: none;
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-sm);
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
  cursor: pointer;
}
.home-route-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--tn-shadow-md);
}
.home-route-chip--primary {
  background: var(--tn-accent-primary);
  color: var(--tn-color-ink);
}
.home-route-chip .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}
.home-search-hub {
  width: 100%;
}
.home-hub-tabs {
  display: flex;
  gap: var(--tn-space-2);
  margin-bottom: var(--tn-space-3);
}
.home-hub-tab {
  font-family: var(--tn-font-headline);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--tn-space-2) var(--tn-space-4);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  color: var(--tn-text-soft);
  cursor: pointer;
  transition: color var(--tn-transition), box-shadow var(--tn-transition), transform var(--tn-transition);
}
.home-hub-tab.is-active {
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-card);
  transform: translate(-2px, -2px);
}
.home-build-form {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
}
.home-build-shell {
  display: flex;
  align-items: stretch;
  gap: var(--tn-space-2);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-card);
  padding: var(--tn-space-2);
  transition: box-shadow var(--tn-transition);
}
.home-build-shell:focus-within {
  box-shadow: var(--tn-shadow-focus);
}
.home-build-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: vertical;
  min-height: 2.75rem;
  padding: var(--tn-space-2) var(--tn-space-3);
  font: inherit;
  color: var(--tn-text-default);
  outline: none;
}
.home-build-submit {
  align-self: stretch;
  font-family: var(--tn-font-headline);
  font-weight: 800;
  padding: 0 var(--tn-space-5);
  background: var(--tn-text-default);
  color: var(--tn-surface-panel);
  border: none;
  border-radius: var(--tn-radius-xl);
  cursor: pointer;
  white-space: nowrap;
}
.home-build-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tn-text-soft);
}
.home-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
}
.home-search-shell {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-card);
  transition: box-shadow var(--tn-transition);
}
.home-search-shell:focus-within {
  box-shadow: var(--tn-shadow-focus);
}
.home-search-shell__icon {
  position: absolute;
  left: 14px;
  color: var(--tn-text-soft);
  width: 1em;
  height: 1em;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
  flex-shrink: 0;
}
.home-search-input {
  width: 100%;
  height: 52px;
  padding: 0 3rem 0 2.75rem;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  -webkit-appearance: none;
  appearance: none;
}
.home-search-input::placeholder {
  color: var(--tn-text-soft);
}
.home-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.home-search-kbd {
  position: absolute;
  right: 12px;
  padding: 2px 6px;
  font-size: 0.7rem;
  font-family: var(--tn-font-mono);
  color: var(--tn-text-soft);
  background: var(--tn-surface-panel-muted);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-sm);
  pointer-events: none;
  white-space: nowrap;
}
.home-search-shell:focus-within .home-search-kbd {
  display: none;
}
.home-search-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
  flex-wrap: wrap;
}
.home-search-tip {
  font-size: 0.78rem;
  color: var(--tn-text-soft);
  margin: 0;
}
.home-search-tip kbd {
  font-family: var(--tn-font-mono);
  font-size: 0.72rem;
  padding: 1px 4px;
  background: var(--tn-surface-panel-muted);
  border: 1px solid var(--tn-border-muted);
  border-radius: 3px;
}
.home-search-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tn-accent-primary);
  white-space: nowrap;
  text-decoration: none;
}
.home-search-link:hover {
  text-decoration: underline;
}
.home-search-popular {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
}
.home-search-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tn-text-muted);
  background: var(--tn-surface-panel-muted);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  text-decoration: none;
  transition: background var(--tn-transition), border-color var(--tn-transition), color var(--tn-transition);
  white-space: nowrap;
}
.home-search-chip:hover {
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
}
.home-search-filter-note {
  font-size: 0.75rem;
  color: var(--tn-text-soft);
  margin: 0;
}
.home-search-disclosure {
  align-self: flex-start;
}
.home-search-disclosure__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
  height: 28px;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tn-text-muted);
  background: var(--tn-surface-panel-muted);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--tn-transition), border-color var(--tn-transition), color var(--tn-transition);
}
.home-search-disclosure__trigger::-webkit-details-marker {
  display: none;
}
.home-search-disclosure__trigger::marker {
  content: "";
}
.home-search-disclosure__trigger:hover {
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
}
.home-search-disclosure__trigger:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.home-search-disclosure__icon,
.home-search-disclosure__chevron {
  width: 1em;
  height: 1em;
  font-size: 16px;
  line-height: 1;
}
.home-search-disclosure__count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tn-accent-primary);
  line-height: 1;
}
.home-search-disclosure__chevron {
  transition: transform var(--tn-transition);
}
.home-search-disclosure[open] > .home-search-disclosure__trigger .home-search-disclosure__chevron {
  transform: rotate(180deg);
}
.home-search-disclosure__panel {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  margin-top: var(--tn-space-3);
}
@media (max-width: 640px) {
  .home-search-disclosure {
    align-self: stretch;
  }
  .home-search-disclosure__trigger {
    width: 100%;
    justify-content: center;
  }
  .home-search-disclosure__panel {
    gap: var(--tn-space-2);
    margin-top: var(--tn-space-2);
  }
}
.home-cat-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  padding-top: var(--tn-space-2);
  border-top: 1px solid var(--tn-border-muted);
}
.home-cat-strip__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tn-text-soft);
  white-space: nowrap;
  margin-right: var(--tn-space-1);
}
.home-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
  height: 26px;
  padding: 0 9px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tn-text-muted);
  background: transparent;
  border: 2px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  text-decoration: none;
  transition: background var(--tn-transition), color var(--tn-transition), border-color var(--tn-transition);
  white-space: nowrap;
}
.home-cat-chip:hover {
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  border-color: var(--tn-border-default);
}
.home-cat-chip__count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--tn-text-soft);
  background: var(--tn-surface-panel-muted);
  border-radius: 99px;
  padding: 0 4px;
  min-width: 18px;
  text-align: center;
  line-height: 1.6;
}
.home-cat-chip--all {
  font-weight: 600;
  color: var(--tn-accent-primary);
  border-color: transparent;
}
.home-help-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  padding-top: var(--tn-space-2);
  border-top: 1px solid var(--tn-border-muted);
}
.home-help-strip__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tn-text-soft);
  white-space: nowrap;
  margin-right: var(--tn-space-1);
}
.home-help-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  font-family: var(--tn-font-headline);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tn-text-default);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition),
    background var(--tn-transition), border-color var(--tn-transition),
    color var(--tn-transition);
}
.home-help-chip__icon {
  width: 1em;
  height: 1em;
  font-size: 16px;
  line-height: 1;
}
.home-help-chip:hover,
.home-help-chip:focus-visible {
  transform: translateY(-1px);
  border-color: var(--tn-color-ink);
  box-shadow: var(--tn-shadow-sm);
}
.home-help-chip[data-accent="purple"] {
  background: rgb(var(--tn-color-purple-rgb) / 0.12);
  border-color: rgb(var(--tn-color-purple-rgb) / 0.55);
}
.home-help-chip[data-accent="purple"]:hover,
.home-help-chip[data-accent="purple"]:focus-visible {
  background: rgb(var(--tn-color-purple-rgb) / 0.2);
  border-color: rgb(var(--tn-color-purple-rgb) / 1);
}
.home-help-chip[data-accent="teal"] {
  background: rgb(var(--tn-color-teal-rgb) / 0.12);
  border-color: rgb(var(--tn-color-teal-rgb) / 0.55);
}
.home-help-chip[data-accent="teal"]:hover,
.home-help-chip[data-accent="teal"]:focus-visible {
  background: rgb(var(--tn-color-teal-rgb) / 0.2);
  border-color: rgb(var(--tn-color-teal-rgb) / 1);
}
.home-help-chip[data-accent="yellow"] {
  background: rgb(var(--tn-color-yellow-rgb) / 0.18);
  border-color: rgb(var(--tn-color-yellow-rgb) / 0.7);
}
.home-help-chip[data-accent="yellow"]:hover,
.home-help-chip[data-accent="yellow"]:focus-visible {
  background: rgb(var(--tn-color-yellow-rgb) / 0.28);
  border-color: rgb(var(--tn-color-yellow-rgb) / 1);
}
.home-help-chip[data-accent="pink"] {
  background: rgb(var(--tn-color-pink-rgb) / 0.12);
  border-color: rgb(var(--tn-color-pink-rgb) / 0.55);
}
.home-help-chip[data-accent="pink"]:hover,
.home-help-chip[data-accent="pink"]:focus-visible {
  background: rgb(var(--tn-color-pink-rgb) / 0.2);
  border-color: rgb(var(--tn-color-pink-rgb) / 1);
}
.home-search-kbd--button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--tn-surface-panel-muted);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-sm);
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--tn-transition), border-color var(--tn-transition),
    transform var(--tn-transition);
}
.home-search-kbd--button kbd {
  font-family: var(--tn-font-mono);
  font-size: 0.7rem;
  color: var(--tn-text-soft);
  background: transparent;
  border: none;
  padding: 0;
}
.home-search-kbd--button:hover,
.home-search-kbd--button:focus-visible {
  background: var(--tn-accent-primary-soft);
  border-color: var(--tn-accent-primary);
  transform: translateY(-1px);
}
.home-search-kbd--button:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.home-search-kbd--button:hover kbd,
.home-search-kbd--button:focus-visible kbd {
  color: var(--tn-text-default);
}
.home-shortcuts-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tn-space-4);
}
.home-shortcuts-modal[hidden] {
  display: none;
}
.home-shortcuts-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
}
.home-shortcuts-modal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(640px, calc(100vh - var(--tn-space-8)));
  display: flex;
  flex-direction: column;
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-lg, var(--tn-shadow-card));
  overflow: hidden;
}
.home-shortcuts-modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--tn-space-3);
  padding: var(--tn-space-5) var(--tn-space-6) var(--tn-space-3);
}
.home-shortcuts-modal__title-group {
  flex: 1;
  min-width: 0;
}
.home-shortcuts-modal__title {
  font-family: var(--tn-font-headline);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tn-text-default);
  margin: 0 0 var(--tn-space-1);
}
.home-shortcuts-modal__subtitle {
  font-size: 0.85rem;
  color: var(--tn-text-soft);
  margin: 0;
  line-height: 1.45;
}
.home-shortcuts-modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
  cursor: pointer;
  transition: background var(--tn-transition), border-color var(--tn-transition);
}
.home-shortcuts-modal__close:hover,
.home-shortcuts-modal__close:focus-visible {
  background: var(--tn-surface-panel-muted);
  border-color: var(--tn-border-default);
}
.home-shortcuts-modal__close:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.home-shortcuts-modal__close .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}
.home-shortcuts-modal__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.home-shortcuts-modal__list {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: var(--tn-space-2) var(--tn-space-6) var(--tn-space-3);
  display: grid;
  gap: var(--tn-space-3);
}
.home-shortcuts-modal__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--tn-space-4);
  align-items: baseline;
  padding: var(--tn-space-3) 0;
  border-top: 1px solid var(--tn-border-muted);
}
.home-shortcuts-modal__row:first-child {
  border-top: none;
  padding-top: 0;
}
.home-shortcuts-modal__keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.home-shortcuts-modal__keys kbd {
  font-family: var(--tn-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--tn-surface-panel-muted);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-sm);
  color: var(--tn-text-default);
}
.home-shortcuts-modal__body {
  margin: 0;
}
.home-shortcuts-modal__action {
  font-family: var(--tn-font-headline);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--tn-text-default);
  margin: 0 0 2px;
}
.home-shortcuts-modal__detail {
  font-size: 0.82rem;
  color: var(--tn-text-soft);
  margin: 0;
  line-height: 1.45;
}
.home-shortcuts-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
  padding: var(--tn-space-4) var(--tn-space-6) var(--tn-space-5);
  border-top: 1px solid var(--tn-border-muted);
  flex-wrap: wrap;
}
.home-shortcuts-modal__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tn-font-headline);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tn-accent-primary);
  text-decoration: none;
  white-space: nowrap;
}
.home-shortcuts-modal__link:hover,
.home-shortcuts-modal__link:focus-visible {
  text-decoration: underline;
}
.home-shortcuts-modal__link .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}
.home-shortcuts-modal__link-arrow {
  transition: transform var(--tn-transition);
}
.home-shortcuts-modal__link:hover .home-shortcuts-modal__link-arrow,
.home-shortcuts-modal__link:focus-visible .home-shortcuts-modal__link-arrow {
  transform: translateX(2px);
}
.home-shortcuts-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  font-family: var(--tn-font-headline);
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: var(--tn-radius-pill);
  cursor: pointer;
  border: var(--tn-border-heavy);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.home-shortcuts-modal__btn:hover,
.home-shortcuts-modal__btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--tn-shadow-sm);
}
.home-shortcuts-modal__btn:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.home-shortcuts-modal__btn--primary {
  background: var(--tn-accent-primary);
  color: var(--tn-color-ink);
}
@media (max-width: 640px) {
  .home-shortcuts-modal__row {
    grid-template-columns: 1fr;
    gap: var(--tn-space-1);
  }
}
html.home-shortcuts-open {
  overflow: hidden;
}
.home-cat-chip--all:hover {
  background: var(--tn-accent-primary-soft);
  border-color: var(--tn-accent-primary);
}
.home-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  background: var(--tn-color-yellow);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-sm);
  font-family: var(--tn-font-headline);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
  margin: 0;
  transform: rotate(-1deg);
}
.home-section-title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 850;
  letter-spacing: var(--tn-tracking-heading);
  color: var(--tn-text-default);
}
.home-section-sub {
  margin: 0;
  font-size: var(--tn-font-size-base);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
  max-width: 60ch;
}
.home-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  margin-bottom: var(--tn-space-6);
}
.home-tool-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tn-space-4);
  margin-bottom: var(--tn-space-6);
  flex-wrap: wrap;
}
.home-tool-section__controls {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  font-size: 0.82rem;
  color: var(--tn-text-soft);
}
.page-home .tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--tn-space-5);
}
.home-workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--tn-space-5);
}
.home-workflow-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-6);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-card);
  text-decoration: none;
  color: var(--tn-text-default);
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.home-workflow-card[data-accent="pink"] {
  border-top: 4px solid var(--tn-color-pink);
}
.home-workflow-card[data-accent="teal"] {
  border-top: 4px solid var(--tn-color-teal);
}
.home-workflow-card[data-accent="yellow"] {
  border-top: 4px solid var(--tn-color-yellow);
}
.home-workflow-card[data-accent="purple"] {
  border-top: 4px solid var(--tn-color-purple);
}
.home-workflow-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tn-shadow-card-hover);
}
.home-workflow-card__eyebrow {
  margin: 0;
  color: var(--tn-text-muted);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.home-workflow-card__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 800;
  color: var(--tn-text-default);
}
.home-workflow-card__body {
  margin: 0;
  flex: 1;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.home-workflow-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
  margin-top: var(--tn-space-2);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 800;
  color: var(--tn-accent-primary);
}
.home-workflow-card__cta .material-symbols-outlined {
  font-size: 16px;
}
.home-operate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tn-space-10);
  align-items: start;
}
.home-steps {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tn-space-4);
  align-items: start;
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-card);
}
.home-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-sm);
}
.home-step__icon svg {
  width: 24px;
  height: 24px;
}
.home-step__content {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.home-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--tn-font-headline);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--tn-color-ink);
  background: var(--tn-color-teal);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-md);
}
.home-step__label {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-base);
  font-weight: 800;
  color: var(--tn-text-default);
}
.home-step__content p {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.home-steps--tabs {
  gap: var(--tn-space-4);
}
.home-steps--tabs .home-steps__tablist {
  display: none;
}
.home-steps--tabs .home-steps__panels {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-4);
}
.home-step-panel {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-card);
}
.home-step-panel__detail {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.home-steps--tabs.is-enhanced {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--tn-space-5);
  align-items: start;
}
.home-steps--tabs.is-enhanced .home-steps__tablist {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
}
.home-step-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tn-space-4);
  align-items: center;
  width: 100%;
  text-align: left;
  padding: var(--tn-space-4);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-card);
  color: var(--tn-text-default);
  cursor: pointer;
  transition: transform var(--tn-transition),
    background var(--tn-transition);
}
.home-step-tab:hover {
  transform: translateY(-1px);
}
.home-step-tab.is-active {
  background: var(--tn-color-teal);
  color: var(--tn-color-ink);
}
.home-step-tab.is-active .home-step__num {
  background: var(--tn-color-ink);
  color: var(--tn-color-cream);
}
.home-step-tab__text {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.home-step-tab .home-step__label {
  font-size: var(--tn-font-size-sm);
}
.home-steps--tabs.is-enhanced .home-step-panel {
  display: none;
  margin: 0;
}
.home-steps--tabs.is-enhanced .home-step-panel.is-active {
  display: flex;
}
.home-step-panel__num {
  align-self: flex-start;
}
@media (max-width: 640px) {
  .home-steps--tabs.is-enhanced {
    grid-template-columns: 1fr;
  }
  .home-steps--tabs.is-enhanced .home-steps__tablist {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .home-step-tab {
    flex: 1 1 auto;
  }
}
.home-kbd-card {
  padding: var(--tn-space-6);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-4);
}
.home-kbd-card__eyebrow {
  margin: 0;
  color: var(--tn-text-muted);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.home-kbd-card__lead {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.home-kbd-grid {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.home-kbd-row {
  display: flex;
  align-items: center;
  gap: var(--tn-space-4);
  padding: var(--tn-space-2) var(--tn-space-3);
  background: var(--tn-surface-panel-muted);
  border-radius: var(--tn-radius-md);
}
.home-kbd-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 4px 10px;
  font-family: var(--tn-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tn-text-default);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-md);
}
.home-kbd-row dd {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
}
.home-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--tn-space-5);
}
.home-category-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-component);
  color: inherit;
  text-decoration: none;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.home-category-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--tn-color-teal);
}
.home-category-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tn-space-3);
}
.home-category-card__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tn-text-default);
}
.home-category-card__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tn-text-soft);
  white-space: nowrap;
}
.home-category-card__summary {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--tn-text-secondary);
}
.home-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--tn-space-6);
}
.home-cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-component);
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.home-cta-card[data-accent="pink"] {
  background: var(--tn-surface-panel-muted);
}
.home-cta-card[data-accent="teal"] {
  background: var(--tn-surface-panel-strong);
}
.home-cta-card:hover {
  transform: translate(-3px, -3px);
}
.home-cta-card[data-accent="pink"]:hover {
  box-shadow: 6px 6px 0 var(--tn-color-pink);
}
.home-cta-card[data-accent="teal"]:hover {
  box-shadow: 6px 6px 0 var(--tn-color-teal);
}
.home-cta-card__eyebrow {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-text-default);
}
.home-cta-card__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tn-text-default);
}
.home-cta-card__body {
  margin: 0;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tn-text-muted);
}
.home-cta-card .home-route-chip {
  align-self: flex-start;
  margin-top: var(--tn-space-2);
}
.home-faq {
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-card);
  overflow: hidden;
}
.home-faq__item {
  border-bottom: 1px solid var(--tn-border-subtle);
}
.home-faq__item:last-child {
  border-bottom: none;
}
.home-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tn-space-5);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-weight: 800;
  font-size: var(--tn-font-size-base);
  cursor: pointer;
  list-style: none;
}
.home-faq__item summary::-webkit-details-marker {
  display: none;
}
.home-faq__icon {
  display: inline-block;
  transition: transform var(--tn-transition);
}
.home-faq__icon::before {
  content: "+";
  font-size: 1.25rem;
  color: var(--tn-text-muted);
}
.home-faq__item[open] .home-faq__icon {
  transform: rotate(45deg);
}
.home-faq__answer {
  padding: 0 var(--tn-space-5) var(--tn-space-5);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.home-faq__answer p {
  margin: 0;
}
.home-grid-bootstrapping {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  flex-wrap: wrap;
  padding: var(--tn-space-4) var(--tn-space-5);
  margin-bottom: var(--tn-space-4);
  background: var(--tn-surface-panel-muted);
  border: 1px dashed var(--tn-border-default);
  border-radius: var(--tn-radius-lg);
  color: var(--tn-text-default);
}
.home-grid-bootstrapping__icon {
  width: 1em;
  height: 1em;
  font-size: 22px;
  color: var(--tn-accent-primary);
  animation: home-grid-bootstrapping-spin 1.6s linear infinite;
}
.home-grid-bootstrapping__text {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
}
.home-grid-bootstrapping__hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--tn-text-soft);
}
.home-grid-bootstrapping__hint a {
  color: var(--tn-accent-primary);
  text-decoration: underline;
}
@keyframes home-grid-bootstrapping-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-grid-bootstrapping__icon {
    animation: none;
  }
}
html.dark .home-grid-bootstrapping {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-border-default);
}
.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--tn-space-4);
  padding: var(--tn-space-10) var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: 2px dashed var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
}
.home-empty__icon {
  width: 1em;
  height: 1em;
  font-size: 2.5rem;
  color: var(--tn-text-soft);
}
.home-empty__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--tn-text-default);
}
.home-empty__body {
  margin: 0;
  max-width: 50ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tn-text-muted);
}
.home-empty__query {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tn-text-soft);
}
.home-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-3);
  justify-content: center;
}
.home-route-chip:focus-visible,
.home-cat-chip:focus-visible,
.home-search-chip:focus-visible,
.home-search-link:focus-visible,
.home-workflow-card:focus-visible {
  outline: 3px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.home-faq__item summary:focus-visible {
  outline: 3px solid var(--tn-accent-primary);
  outline-offset: -2px;
  border-radius: 3px;
}
@media (max-width: 1024px) {
  .home-operate-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .home-hero__title {
    font-size: 1.4rem;
  }
  .home-hero__stats {
    grid-template-columns: 1fr;
  }
  .home-search-input {
    height: 46px;
    font-size: 0.9rem;
  }
  .home-inner {
    padding: 0 var(--tn-space-4);
  }
  .page-home .tool-grid {
    grid-template-columns: 1fr;
  }
  .home-cta-grid {
    grid-template-columns: 1fr;
  }
  .tool-card__meta-item--hide-xs {
    display: none;
  }
}
html.dark .home-hero {
  border-bottom-color: var(--tn-border-default);
}
html.dark .home-stat {
  background: var(--tn-surface-panel);
}
html.dark .home-stat__link:hover,
html.dark .home-stat__link:focus-visible {
  background: var(--tn-surface-raised, var(--tn-surface-panel));
}
html.dark .home-step__icon {
  background: var(--tn-surface-panel-muted);
}
html.dark .home-kbd-row {
  background: var(--tn-surface-subtle);
}
html.dark .home-kbd-row kbd {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-border-default);
  color: var(--tn-text-default);
}
html.dark .home-cta-card,
html.dark .home-cta-card[data-accent="pink"],
html.dark .home-cta-card[data-accent="teal"] {
  background: var(--tn-surface-panel);
}
html.dark .home-cta-card[data-accent="pink"]:hover {
  box-shadow: 6px 6px 0 rgb(var(--tn-color-pink-rgb) / 0.35);
}
html.dark .home-cta-card[data-accent="teal"]:hover {
  box-shadow: 6px 6px 0 rgb(var(--tn-color-teal-rgb) / 0.35);
}
html.dark .home-faq {
  background: var(--tn-surface-panel);
}
html.dark .home-faq__item {
  border-bottom-color: var(--tn-border-muted);
}
html.dark .home-workflow-card {
  background: var(--tn-surface-panel);
}
html.dark .home-hero__decor {
  opacity: 0.35;
  border-color: var(--tn-border-muted);
}
html.dark .home-route-chip {
  background: var(--tn-surface-panel);
}
html.dark .home-route-chip--primary {
  background: var(--tn-accent-primary-strong);
  color: var(--tn-text-inverse);
}
html.dark .home-cat-chip {
  border-color: var(--tn-border-default);
}
html.dark .home-cat-chip__count {
  background: var(--tn-surface-panel-strong);
  color: var(--tn-text-muted);
}
html.dark .home-help-chip {
  background: var(--tn-surface-panel-muted);
  border-color: var(--tn-border-default);
  color: var(--tn-text-default);
}
html.dark .home-help-chip:hover,
html.dark .home-help-chip:focus-visible {
  border-color: var(--tn-text-default);
}
html.dark .home-help-chip[data-accent="purple"] {
  background: rgb(var(--tn-color-purple-rgb) / 0.22);
  border-color: rgb(var(--tn-color-purple-rgb) / 0.7);
}
html.dark .home-help-chip[data-accent="teal"] {
  background: rgb(var(--tn-color-teal-rgb) / 0.22);
  border-color: rgb(var(--tn-color-teal-rgb) / 0.7);
}
html.dark .home-help-chip[data-accent="yellow"] {
  background: rgb(var(--tn-color-yellow-rgb) / 0.22);
  border-color: rgb(var(--tn-color-yellow-rgb) / 0.7);
}
html.dark .home-help-chip[data-accent="pink"] {
  background: rgb(var(--tn-color-pink-rgb) / 0.22);
  border-color: rgb(var(--tn-color-pink-rgb) / 0.7);
}
html.dark .home-search-kbd--button {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-border-default);
}
html.dark .home-search-kbd--button kbd {
  color: var(--tn-text-muted);
}
html.dark .home-eyebrow {
  border-color: var(--tn-border-default);
}
html.dark .home-hero__sticker {
  border-color: var(--tn-border-default);
}
@media (prefers-reduced-motion: reduce) {
  .home-route-chip,
  .home-search-chip,
  .home-workflow-card,
  .home-cta-card,
  .home-faq__icon {
    transition: none;
  }
  .home-route-chip:hover,
  .home-workflow-card:hover,
  .home-cta-card:hover {
    transform: none;
  }
}
body[data-public-marketing="true"] .home-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--tn-color-ink);
  margin-bottom: var(--tn-space-6);
}
body[data-public-marketing="true"] .home-section-title {
  position: relative;
  display: inline-block;
  font-weight: 800;
  color: var(--tn-color-ink);
  padding-bottom: 12px;
}
body[data-public-marketing="true"] .home-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
        90deg,
        var(--tn-color-pink),
        var(--tn-color-teal),
        var(--tn-color-yellow)
    );
  border-radius: 2px;
}
body[data-public-marketing="true"] .home-search-shell {
  background: var(--tn-color-paper);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  box-shadow: 4px 4px 0 var(--tn-color-teal);
  transition: box-shadow 0.15s ease,
        border-color 0.15s ease;
}
body[data-public-marketing="true"] .home-search-shell:focus-within {
  border-color: var(--tn-color-pink);
  box-shadow: 4px 4px 0 var(--tn-color-pink);
}
body[data-public-marketing="true"] .home-search-input {
  color: var(--tn-color-ink);
  font-weight: 500;
}
body[data-public-marketing="true"] .home-search-chip {
  height: 32px;
  padding: 0 14px;
  color: var(--tn-color-ink);
  background: var(--tn-color-teal-soft);
  border: 2px solid var(--tn-color-ink);
  border-radius: var(--tn-radius-pill);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 2px 2px 0 var(--tn-color-ink);
  transition: box-shadow 0.15s ease,
        transform 0.15s ease,
        background 0.15s ease;
}
body[data-public-marketing="true"] .home-search-chip:hover {
  background: var(--tn-color-teal);
  box-shadow: 1px 1px 0 var(--tn-color-ink);
  transform: translate(1px, 1px);
}
body[data-public-marketing="true"] .home-faq {
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-paper);
  box-shadow: 4px 4px 0 var(--tn-color-ink);
}
body[data-public-marketing="true"] .home-faq__item {
  border-bottom: 2px solid var(--tn-color-ink);
}
body[data-public-marketing="true"] .home-faq__item:last-child {
  border-bottom: 0;
}
body[data-public-marketing="true"] .home-faq__item summary {
  padding: 1rem 1.25rem;
  color: var(--tn-color-ink);
  background: var(--tn-color-paper);
  transition: background 0.15s ease;
}
body[data-public-marketing="true"] .home-faq__item summary:hover {
  background: var(--tn-color-cream);
}
body[data-public-marketing="true"] .home-faq__item[open] summary {
  background: var(--tn-color-yellow-soft);
  border-bottom: 2px solid var(--tn-color-ink);
}
body[data-public-marketing="true"] .home-workflow-card {
  position: relative;
  background: var(--tn-color-paper);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  box-shadow: 4px 4px 0 var(--tn-color-ink);
  overflow: hidden;
  transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}
body[data-public-marketing="true"] .home-workflow-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--tn-color-ink);
}
body[data-public-marketing="true"] .home-workflow-card[data-accent="pink"],
body[data-public-marketing="true"] .home-workflow-card[data-accent="teal"],
body[data-public-marketing="true"] .home-workflow-card[data-accent="yellow"],
body[data-public-marketing="true"] .home-workflow-card[data-accent="purple"] {
  border-top: 3px solid var(--tn-color-ink);
}
body[data-public-marketing="true"] .home-workflow-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}
body[data-public-marketing="true"] .home-workflow-card[data-accent="pink"]::before {
  background: var(--tn-color-pink);
}
body[data-public-marketing="true"] .home-workflow-card[data-accent="teal"]::before {
  background: var(--tn-color-teal);
}
body[data-public-marketing="true"] .home-workflow-card[data-accent="yellow"]::before {
  background: var(--tn-color-yellow);
}
body[data-public-marketing="true"] .home-workflow-card[data-accent="purple"]::before {
  background: var(--tn-color-purple);
}
body[data-public-marketing="true"] .home-eyebrow,
body[data-public-marketing="true"] .home-hero__sticker {
  border: 2px solid var(--tn-color-ink);
  box-shadow: 2px 2px 0 var(--tn-color-ink);
}
.home-icon {
  width: 1em;
  height: 1em;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.home-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--tn-space-5);
}
.home-blog-card {
  display: flex;
  flex-direction: column;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-card);
  text-decoration: none;
  color: var(--tn-text-default);
  overflow: hidden;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.home-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tn-shadow-card-hover);
}
.home-blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--tn-surface-subtle);
  border-bottom: var(--tn-border-heavy);
  overflow: hidden;
}
.home-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-5);
}
.home-blog-card__eyebrow {
  color: var(--tn-text-muted);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.home-blog-card__title {
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 800;
  line-height: var(--tn-leading-tight);
  color: var(--tn-text-default);
}
.home-blog-card__excerpt {
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-blog-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  margin-top: auto;
  padding-top: var(--tn-space-2);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 800;
  color: var(--tn-pill-success-fg);
}
body.page-directory {
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
}
.tools-directory {
  color: var(--tn-text-default);
  --tn-border-heavy: 1px solid var(--tn-border-muted);
  --tn-shadow-sm: var(--tn-shadow-subtle);
  --tn-shadow-md: var(--tn-shadow-card);
  --tn-shadow-lg: var(--tn-shadow-card);
  --tn-shadow-teal: var(--tn-shadow-subtle);
  --tn-shadow-pink: var(--tn-shadow-focus);
  --tn-shadow-yellow: var(--tn-shadow-subtle);
  --tn-radius-2xl: var(--tn-radius-xl);
}
.directory-shell {
  width: min(100%, var(--tn-shell-max-width));
  margin-inline: auto;
  padding-inline: var(--tn-space-6);
}
.directory-hero {
  position: relative;
  padding-block: var(--tn-space-8) var(--tn-space-6);
  background: var(--tn-surface-panel);
  border-bottom: var(--tn-border-heavy);
}
.directory-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--tn-space-5);
}
.directory-hero__headline {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  flex-wrap: wrap;
}
.directory-hero__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: clamp(var(--tn-font-size-2xl), 4vw, var(--tn-font-size-hero));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--tn-leading-tight);
}
.directory-hero__count {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding-inline: var(--tn-space-3);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-color-ink);
  font-size: var(--tn-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--tn-shadow-sm);
}
.directory-search {
  display: grid;
  gap: var(--tn-space-3);
  position: relative;
}
.directory-search__shell {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 720px;
  min-height: 56px;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-canvas);
  box-shadow: var(--tn-shadow-teal);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.directory-search__shell:focus-within {
  box-shadow: var(--tn-shadow-pink);
  transform: translateY(-1px);
}
.directory-search__icon {
  position: absolute;
  left: var(--tn-space-4);
  color: var(--tn-text-soft);
  font-size: 22px;
  pointer-events: none;
  transition: color var(--tn-transition);
}
.directory-search__shell:focus-within .directory-search__icon {
  color: var(--tn-accent-primary-strong);
}
.directory-search__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  box-sizing: border-box;
  padding: 0 var(--tn-space-20) 0 var(--tn-space-12);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-base);
}
.directory-search__input::placeholder {
  color: var(--tn-text-soft);
}
.directory-search__clear {
  position: absolute;
  right: var(--tn-space-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tn-text-soft);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--tn-transition), background var(--tn-transition);
}
.directory-search__clear:hover,
.directory-search__clear:focus-visible {
  opacity: 1;
  background: var(--tn-surface-panel-muted);
}
.directory-search__clear .material-symbols-outlined {
  font-size: 18px;
}
.directory-search__clear[hidden] {
  display: none;
}
.directory-search__kbd {
  position: absolute;
  right: var(--tn-space-3);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: var(--tn-space-2);
  border: 1px solid var(--tn-border-muted);
  border-bottom-width: 2px;
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  font-family: var(--tn-font-mono);
  font-size: 11px;
  pointer-events: none;
}
.directory-search__row {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  flex-wrap: wrap;
}
.directory-search__hint {
  margin: 0;
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
  line-height: var(--tn-leading-body);
}
.directory-search__hint strong {
  color: var(--tn-text-muted);
  font-weight: 600;
}
.directory-typeahead {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  width: 100%;
  max-width: 720px;
  max-height: min(480px, calc(100dvh - 200px));
  overflow-y: auto;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-dropdown);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.directory-typeahead[hidden] {
  display: none;
}
.typeahead-item {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  padding: var(--tn-space-3) var(--tn-space-4);
  color: var(--tn-text-default);
  text-decoration: none;
  border-bottom: 1px solid var(--tn-border-muted);
  transition: background 0.1s ease;
  cursor: pointer;
}
.typeahead-item:last-of-type {
  border-bottom: 0;
}
.typeahead-item:hover,
.typeahead-item--active {
  background: var(--tn-accent-primary-soft);
}
.typeahead-item__icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  place-items: center;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-accent-primary-strong);
  font-size: 18px;
}
.typeahead-item__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.typeahead-item__title {
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  color: var(--tn-text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.typeahead-item__desc {
  font-size: var(--tn-font-size-xs);
  color: var(--tn-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.typeahead-item__cat {
  flex-shrink: 0;
  padding: 2px var(--tn-space-2);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-soft);
  font-size: 11px;
  font-weight: 600;
}
.typeahead-item mark {
  background: var(--tn-color-yellow-soft);
  color: inherit;
  border-radius: 2px;
  padding-inline: 1px;
}
.typeahead-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
  padding: var(--tn-space-2) var(--tn-space-4);
  border-top: 1px solid var(--tn-border-muted);
  background: var(--tn-surface-panel-muted);
  border-radius: 0 0 var(--tn-radius-xl) var(--tn-radius-xl);
}
.typeahead-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tn-accent-primary-strong);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--tn-transition);
}
.typeahead-footer__link:hover {
  color: var(--tn-text-default);
}
.typeahead-footer__link .material-symbols-outlined {
  font-size: 16px;
}
.typeahead-footer__kbd {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-inline: var(--tn-space-2);
  border: 1px solid var(--tn-border-muted);
  border-bottom-width: 2px;
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-panel);
  color: var(--tn-text-soft);
  font-family: var(--tn-font-mono);
  font-size: 10px;
}
.directory-results__layout {
  display: grid;
  grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
  gap: var(--tn-space-6);
  align-items: start;
}
.directory-filters {
  position: sticky;
  top: var(--tn-space-4);
  min-width: 0;
}
.directory-results__main {
  min-width: 0;
}
.directory-controls {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
  margin: 0;
  padding: var(--tn-space-5);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-sm);
}
.directory-filters__group {
  display: grid;
  gap: var(--tn-space-2);
}
.directory-control {
  display: grid;
  gap: var(--tn-space-1);
}
.directory-control span,
.directory-facets__label {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.directory-control select {
  width: 100%;
  min-height: 42px;
  padding-inline: var(--tn-space-3);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-sm);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--tn-shadow-sm);
  transition: box-shadow var(--tn-transition), transform var(--tn-transition);
}
.directory-control select:hover {
  box-shadow: var(--tn-shadow-subtle);
  transform: translateY(-1px);
}
.directory-control select:focus-visible {
  outline: 0;
  box-shadow: var(--tn-shadow-pink);
}
.directory-controls__actions {
  display: flex;
  gap: var(--tn-space-2);
  align-items: center;
}
.directory-submit,
.directory-clear,
.directory-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding-inline: var(--tn-space-4);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease, background var(--tn-transition);
  cursor: pointer;
}
.directory-submit {
  background: var(--tn-accent-primary);
  color: var(--tn-color-ink);
}
.directory-clear,
.directory-link-button {
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
}
.directory-submit:hover,
.directory-clear:hover,
.directory-link-button:hover {
  box-shadow: var(--tn-shadow-subtle);
  transform: translateY(-1px);
}
.directory-submit:active,
.directory-clear:active,
.directory-link-button:active {
  box-shadow: none;
  transform: translateY(0);
}
.directory-explore {
  display: grid;
  padding-block: var(--tn-space-8);
  border-top: 1px solid var(--tn-border-muted);
  background: var(--tn-surface-panel);
}
.directory-explore .directory-shell {
  display: grid;
  gap: var(--tn-space-6);
}
.directory-explore__header {
  display: grid;
  gap: var(--tn-space-1);
}
.directory-explore__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.directory-explore__subtitle {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.directory-explore__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--tn-space-5);
}
.directory-explore__group {
  display: grid;
  gap: var(--tn-space-3);
  align-content: start;
}
.directory-explore__group-label {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  margin: 0;
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.directory-explore__group-icon {
  font-size: 18px;
  color: var(--tn-accent-primary-strong);
}
.directory-facets__label {
  margin: 0;
}
.directory-facets__rail,
.directory-chip-row,
.directory-link-strip,
.directory-category-links,
.directory-results__active {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
}
.directory-chip-link,
.directory-link-strip__item,
.directory-category-links__item,
.directory-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
  min-height: 44px;
  padding-block: 8px;
  padding-inline: var(--tn-space-3);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
  transition: all 0.15s ease;
  cursor: pointer;
}
.directory-chip-link strong,
.directory-link-strip__item strong,
.directory-category-links__item strong {
  color: var(--tn-text-default);
  font-size: 10px;
  font-weight: 700;
}
.directory-chip-link:hover,
.directory-link-strip__item:hover,
.directory-category-links__item:hover,
.directory-filter-chip:hover {
  border-color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
  transform: translateY(-1px);
}
.directory-filter-chip {
  border-color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
  font-weight: 600;
}
.directory-filter-chip {
  cursor: pointer;
}
.directory-results {
  padding-block: var(--tn-space-6) var(--tn-space-12);
  background: var(--tn-surface-canvas);
}
.directory-results__header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--tn-space-3);
  margin-bottom: var(--tn-space-4);
}
.directory-results__summary {
  display: grid;
  gap: var(--tn-space-1);
}
.directory-results__count {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xl);
  font-weight: 600;
  letter-spacing: 0;
}
.directory-results__context {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
}
.directory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
  padding: var(--tn-space-2) var(--tn-space-3);
  margin-bottom: var(--tn-space-4);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-panel-muted);
  font-size: var(--tn-font-size-xs);
}
.directory-toolbar[hidden] {
  display: none;
}
.toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.toolbar__summary {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  flex-wrap: wrap;
}
.toolbar__count {
  font-weight: 700;
  color: var(--tn-text-default);
}
.toolbar__query {
  color: var(--tn-text-muted);
}
.toolbar__timing {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding-inline: 6px;
  border: 1px solid var(--tn-color-teal);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-teal-soft);
  color: var(--tn-color-ink);
  font-family: var(--tn-font-mono);
  font-size: 10px;
  font-weight: 700;
}
.toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-1);
}
.toolbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding-inline: var(--tn-space-2);
  border: 1px solid var(--tn-accent-primary);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.toolbar__chip:hover {
  background: var(--tn-color-pink-soft);
  border-color: var(--tn-color-pink);
}
.toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  flex-shrink: 0;
}
.toolbar__view-toggle {
  display: flex;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  overflow: hidden;
}
.toolbar__view-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  background: var(--tn-surface-panel);
  color: var(--tn-text-soft);
  cursor: pointer;
  transition: all 0.12s ease;
}
.toolbar__view-btn:not(:last-child) {
  border-right: 1px solid var(--tn-border-muted);
}
.toolbar__view-btn .material-symbols-outlined {
  font-size: 18px;
}
.toolbar__view-btn:hover {
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
}
.toolbar__view-btn--active {
  background: var(--tn-accent-primary-soft);
  color: var(--tn-accent-primary-strong);
}
.toolbar__page-info {
  color: var(--tn-text-soft);
  font-size: 10px;
  white-space: nowrap;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-4);
}
.directory-grid--loading {
  opacity: 0.5;
  pointer-events: none;
}
.tool-card {
  position: relative;
  display: grid;
  gap: var(--tn-space-3);
  padding: var(--tn-space-4);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  text-decoration: none;
  box-shadow: var(--tn-shadow-sm);
  overflow: hidden;
  grid-template-rows: auto 1fr auto;
  transition: box-shadow 0.15s ease, transform 0.15s ease, background var(--tn-transition);
  content-visibility: auto;
  contain-intrinsic-size: 200px 220px;
}
.tool-card:hover,
.tool-card:focus-visible,
.tool-card:active {
  will-change: transform;
}
.tool-card:active {
  transform: translateY(1px);
}
@media (hover: none) {
  .tool-list-item:active {
    border-color: var(--tn-accent-primary);
    background: var(--tn-accent-primary-soft);
    box-shadow: var(--tn-shadow-sm);
    transform: translateX(2px);
  }
}
.tool-card--focused {
  outline: 3px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.tool-card__topline,
.tool-card__identity,
.tool-card__signals,
.tool-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  align-items: center;
}
.tool-card__topline,
.tool-card__meta {
  justify-content: space-between;
}
.tool-card__icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-accent-primary-strong);
  box-shadow: none;
}
.tool-card__icon:has(img) {
  border: none;
  background: transparent;
  overflow: hidden;
}
.tool-card__icon img {
  border-radius: var(--tn-radius-md);
}
.tool-card__icon .material-symbols-outlined {
  font-size: 18px;
}
.tool-card__category,
.tool-card__tag,
.tool-card__badge {
  color: var(--tn-text-soft);
  font-size: 11px;
  font-weight: 600;
}
.tool-card__tag,
.tool-card__badge {
  padding: 2px var(--tn-space-2);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel-muted);
}
.tool-card__badge--new {
  border-color: var(--tn-color-teal);
  background: var(--tn-color-teal-soft);
  color: var(--tn-color-ink);
}
.tool-card__badge--beta {
  border-color: var(--tn-color-yellow);
  background: var(--tn-color-yellow-soft);
  color: var(--tn-color-ink);
}
.tool-card__body {
  display: grid;
  gap: var(--tn-space-1);
}
.tool-card__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-base);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--tn-leading-heading);
}
.tool-card__description {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  line-height: var(--tn-leading-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tool-card mark {
  background: var(--tn-color-yellow-soft);
  color: inherit;
  border-radius: 2px;
  padding-inline: 1px;
}
.tool-card__meta {
  margin-top: auto;
  padding-top: var(--tn-space-3);
  border-top: 1px solid var(--tn-border-muted);
}
.tool-card__meta-item {
  display: grid;
  gap: 1px;
}
.tool-card__meta-item span {
  color: var(--tn-text-soft);
  font-size: 10px;
}
.tool-card__meta-item strong,
.tool-card__launch {
  color: var(--tn-text-default);
  font-size: 11px;
  font-weight: 600;
}
.tool-card__launch {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
  color: var(--tn-color-teal);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.15s ease;
}
.tool-card__launch-label {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.tool-card__launch .material-symbols-outlined,
.tool-card__launch-icon {
  width: 1em;
  height: 1em;
  font-size: 16px;
  transition: transform 0.15s ease;
}
.tool-card:hover .tool-card__launch .material-symbols-outlined,
.tool-card:focus-visible .tool-card__launch .material-symbols-outlined,
.tool-card:hover .tool-card__launch-icon,
.tool-card:focus-visible .tool-card__launch-icon {
  transform: translateX(2px);
}
.tool-grid--list {
  grid-template-columns: 1fr;
  gap: var(--tn-space-2);
}
.tool-grid--list .tool-card {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  grid-template-rows: none;
  padding: var(--tn-space-3) var(--tn-space-4);
  contain-intrinsic-size: auto 64px;
}
.tool-grid--list .tool-card__topline {
  flex: 0 0 auto;
  width: auto;
}
.tool-grid--list .tool-card__signals {
  display: none;
}
.tool-grid--list .tool-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.tool-grid--list .tool-card__description {
  -webkit-line-clamp: 1;
}
.tool-grid--list .tool-card__meta {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.tool-grid--list .tool-card__meta-item {
  display: none;
}
.tool-list-item {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  padding: var(--tn-space-3) var(--tn-space-4);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  text-decoration: none;
  transition: all 0.12s ease;
}
.tool-list-item:hover {
  border-color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
  box-shadow: var(--tn-shadow-sm);
  transform: translateX(2px);
}
.tool-list-item__icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  place-items: center;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-accent-primary-strong);
}
.tool-list-item__icon .material-symbols-outlined {
  font-size: 18px;
}
.tool-list-item__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.tool-list-item__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  color: var(--tn-text-default);
}
.tool-list-item__desc {
  margin: 0;
  font-size: var(--tn-font-size-xs);
  color: var(--tn-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool-list-item__meta {
  display: flex;
  gap: var(--tn-space-2);
  flex-shrink: 0;
}
.tool-list-item__arrow {
  flex-shrink: 0;
  color: var(--tn-text-soft);
  font-size: 20px;
  transition: transform 0.12s ease;
}
.tool-list-item:hover .tool-list-item__arrow,
.tool-list-item:focus-visible .tool-list-item__arrow {
  transform: translateX(2px);
  color: var(--tn-accent-primary-strong);
  will-change: transform;
}
.tool-list-item mark {
  background: var(--tn-color-yellow-soft);
  color: inherit;
  border-radius: 2px;
  padding-inline: 1px;
}
@keyframes directory-card-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tool-card--instant {
  opacity: 0;
}
.tool-card--reveal {
  animation: directory-card-reveal 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--reveal-i, 0) * 25ms);
}
.directory-scroll-sentinel {
  margin-top: var(--tn-space-4);
}
.directory-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tn-space-3);
  padding: var(--tn-space-6) 0;
}
.directory-loading-indicator__spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--tn-border-muted);
  border-top-color: var(--tn-accent-primary);
  border-radius: 50%;
  animation: directory-spin 0.7s linear infinite;
}
.directory-loading-indicator__text {
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  font-weight: 500;
}
.directory-render-cap {
  margin-top: var(--tn-space-4);
  padding: var(--tn-space-4);
  border: 1px dashed var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  text-align: center;
}
@keyframes directory-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .directory-loading-indicator__spinner {
    animation: none;
    opacity: 0.5;
  }
}
.directory-empty {
  display: grid;
  gap: var(--tn-space-4);
  padding: var(--tn-space-10);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  text-align: center;
  box-shadow: var(--tn-shadow-md);
}
.directory-empty__icon {
  width: 1em;
  height: 1em;
  font-size: 48px;
  color: var(--tn-text-soft);
  opacity: 0.5;
}
.directory-empty__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 600;
}
.directory-empty__body {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
}
.directory-empty__actions,
.directory-empty__suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tn-space-2);
}
.directory-empty__suggest-label,
.directory-empty__recent-label {
  margin: var(--tn-space-3) 0 0;
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.directory-empty__recent {
  display: grid;
  gap: var(--tn-space-2);
  justify-items: center;
}
.directory-empty__diagnostic {
  display: grid;
  gap: var(--tn-space-3);
  margin: var(--tn-space-3) auto 0;
  padding: var(--tn-space-5);
  width: 100%;
  max-width: 640px;
  border: 1px solid var(--tn-accent-primary);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-accent-primary-soft);
  text-align: left;
  box-shadow: var(--tn-shadow-subtle);
}
.directory-empty__diagnostic-headline {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-md);
  font-weight: 600;
}
.directory-empty__diagnostic-cta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
  padding: var(--tn-space-3) var(--tn-space-4);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.directory-empty__diagnostic-cta:hover,
.directory-empty__diagnostic-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--tn-shadow-subtle);
}
.directory-empty__diagnostic-cta strong {
  padding: 2px var(--tn-space-2);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-accent-primary);
  color: var(--tn-text-on-accent, var(--tn-text-default));
  font-size: var(--tn-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.directory-empty__diagnostic-alternatives-label {
  margin: var(--tn-space-2) 0 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.directory-empty__diagnostic-alternatives {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
}
.directory-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tn-space-2);
  margin-top: var(--tn-space-8);
  padding-top: var(--tn-space-6);
  border-top: 1px solid var(--tn-border-muted);
}
.directory-pagination[hidden] {
  display: none;
}
.directory-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tn-space-2);
}
.directory-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding-inline: var(--tn-space-3);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-panel);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: all 0.15s ease;
}
.directory-pagination__link:hover,
.directory-pagination__link.is-current {
  border-color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
}
.directory-search__link:focus-visible,
.directory-submit:focus-visible,
.directory-clear:focus-visible,
.directory-link-button:focus-visible,
.directory-facet-chip:focus-visible,
.directory-chip-link:focus-visible,
.directory-link-strip__item:focus-visible,
.directory-category-links__item:focus-visible,
.directory-filter-chip:focus-visible,
.directory-pagination__link:focus-visible,
.tool-list-item:focus-visible {
  outline: 3px solid var(--tn-accent-focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tool-card--instant {
    opacity: 1;
  }
  .tool-card--reveal {
    animation: none;
  }
  .tool-card,
  .tool-list-item,
  .directory-submit,
  .directory-clear,
  .directory-link-button,
  .directory-facet-chip,
  .directory-control select,
  .directory-guide__step {
    transition: none;
  }
}
html.dark .directory-hero {
  background: var(--tn-surface-canvas);
  border-bottom-color: rgba(255, 254, 247, 0.12);
}
html.dark .directory-hero__count {
  background: rgba(77, 184, 168, 0.15);
  border-color: rgba(255, 254, 247, 0.22);
  color: var(--tn-text-default);
}
html.dark .directory-search__shell {
  background: var(--tn-surface-elevated);
  border-color: rgba(255, 254, 247, 0.28);
}
html.dark .directory-search__kbd {
  background: rgba(245, 215, 110, 0.15);
  border-color: rgba(255, 254, 247, 0.22);
  color: var(--tn-text-default);
}
html.dark .directory-search__clear {
  color: var(--tn-text-muted);
}
html.dark .directory-search__clear:hover,
html.dark .directory-search__clear:focus-visible {
  background: rgb(var(--tn-color-paper-rgb) / 0.1);
}
html.dark .directory-loading-indicator__spinner {
  border-color: rgb(var(--tn-color-paper-rgb) / 0.12);
  border-top-color: var(--tn-accent-primary);
}
html.dark .directory-typeahead {
  background: var(--tn-surface-panel);
  border-color: rgba(255, 254, 247, 0.22);
  box-shadow: var(--tn-shadow-dropdown);
}
html.dark .typeahead-item {
  border-bottom-color: rgba(255, 254, 247, 0.08);
}
html.dark .typeahead-item:hover,
html.dark .typeahead-item--active {
  background: rgba(77, 184, 168, 0.1);
}
html.dark .typeahead-item__icon {
  border-color: rgba(255, 254, 247, 0.15);
  background: rgba(77, 184, 168, 0.1);
}
html.dark .typeahead-item__cat {
  border-color: rgba(255, 254, 247, 0.15);
  background: rgba(255, 254, 247, 0.06);
}
html.dark .typeahead-item mark {
  background: rgba(245, 215, 110, 0.2);
}
html.dark .typeahead-footer {
  background: rgba(255, 254, 247, 0.04);
  border-top-color: rgba(255, 254, 247, 0.08);
}
html.dark .typeahead-footer__kbd {
  background: rgba(255, 254, 247, 0.06);
  border-color: rgba(255, 254, 247, 0.15);
}
html.dark .directory-control select {
  background: var(--tn-surface-elevated);
  border-color: rgba(255, 254, 247, 0.28);
}
html.dark .directory-submit {
  background: var(--tn-accent-primary);
  color: var(--tn-color-ink);
}
html.dark .directory-clear,
html.dark .directory-link-button {
  background: var(--tn-surface-elevated);
  border-color: rgba(255, 254, 247, 0.28);
  color: var(--tn-text-default);
}
html.dark .directory-facet-chip,
html.dark .directory-chip-link,
html.dark .directory-link-strip__item,
html.dark .directory-filter-chip {
  background: var(--tn-surface-panel);
  border-color: rgba(255, 254, 247, 0.18);
  color: var(--tn-text-muted);
}
html.dark .directory-facet-chip:hover,
html.dark .directory-chip-link:hover,
html.dark .directory-link-strip__item:hover,
html.dark .directory-filter-chip:hover {
  background: rgba(77, 184, 168, 0.12);
  border-color: rgba(77, 184, 168, 0.4);
  color: var(--tn-text-default);
}
html.dark .directory-facet-chip.is-active {
  background: rgba(77, 184, 168, 0.15);
  border-color: rgba(77, 184, 168, 0.5);
  color: var(--tn-text-default);
}
html.dark .tool-card {
  background: var(--tn-surface-panel);
  border-color: rgba(255, 254, 247, 0.2);
  box-shadow: var(--tn-shadow-sm);
}
html.dark .tool-card:hover,
html.dark .tool-card:focus-visible {
  background: var(--tn-surface-elevated);
}
html.dark .tool-card__icon {
  border-color: rgba(255, 254, 247, 0.15);
  background: rgb(var(--tn-color-teal-rgb) / 0.12);
}
html.dark .tool-card__icon:has(img) {
  border: none;
  background: transparent;
}
html.dark .tool-card__tag,
html.dark .tool-card__badge {
  background: var(--tn-surface-panel-muted);
  border-color: rgba(255, 254, 247, 0.12);
}
html.dark .tool-card mark {
  background: rgba(245, 215, 110, 0.2);
}
html.dark .tool-card__meta {
  border-top-color: rgba(255, 254, 247, 0.1);
}
html.dark .tool-list-item {
  background: var(--tn-surface-panel);
  border-color: rgba(255, 254, 247, 0.15);
}
html.dark .tool-list-item:hover {
  background: rgb(var(--tn-color-teal-rgb) / 0.08);
  border-color: rgb(var(--tn-color-teal-rgb) / 0.35);
}
html.dark .tool-list-item__icon {
  border-color: rgba(255, 254, 247, 0.15);
  background: rgba(77, 184, 168, 0.1);
}
html.dark .tool-list-item mark {
  background: rgba(245, 215, 110, 0.2);
}
html.dark .directory-toolbar {
  background: var(--tn-surface-panel);
  border-color: rgba(255, 254, 247, 0.15);
}
html.dark .toolbar__timing {
  background: rgba(77, 184, 168, 0.15);
  border-color: rgba(77, 184, 168, 0.4);
  color: var(--tn-text-default);
}
html.dark .toolbar__chip {
  background: rgba(77, 184, 168, 0.12);
  border-color: rgba(77, 184, 168, 0.4);
  color: var(--tn-text-default);
}
html.dark .toolbar__chip:hover {
  background: rgba(232, 135, 159, 0.15);
  border-color: rgba(232, 135, 159, 0.4);
}
html.dark .toolbar__view-toggle {
  border-color: rgba(255, 254, 247, 0.15);
}
html.dark .toolbar__view-btn {
  background: var(--tn-surface-panel);
}
html.dark .toolbar__view-btn:not(:last-child) {
  border-right-color: rgba(255, 254, 247, 0.1);
}
html.dark .toolbar__view-btn:hover {
  background: rgba(255, 254, 247, 0.06);
}
html.dark .toolbar__view-btn--active {
  background: rgba(77, 184, 168, 0.15);
  color: var(--tn-accent-primary-strong);
}
html.dark .directory-empty {
  background: var(--tn-surface-panel);
  border-color: rgba(255, 254, 247, 0.22);
}
html.dark .directory-pagination__link {
  background: var(--tn-surface-panel);
  border-color: rgba(255, 254, 247, 0.18);
}
html.dark .directory-pagination__link:hover,
html.dark .directory-pagination__link.is-current {
  background: rgba(77, 184, 168, 0.12);
  border-color: rgba(77, 184, 168, 0.4);
}
html.dark .directory-guide {
  background: var(--tn-surface-panel);
  border-top-color: rgba(255, 254, 247, 0.12);
}
html.dark .directory-guide__step {
  background: var(--tn-surface-panel-muted);
  border-color: rgba(255, 254, 247, 0.12);
}
@media (max-width: 1280px) {
  .tool-grid:not(.tool-grid--list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1080px) {
  .directory-results__layout {
    grid-template-columns: 1fr;
  }
  .directory-filters {
    position: static;
  }
}
@media (max-width: 768px) {
  .directory-shell {
    padding-inline: var(--tn-space-4);
  }
  .directory-hero {
    padding-block: var(--tn-space-5) var(--tn-space-4);
  }
  .directory-search__shell {
    max-width: 100%;
  }
  .directory-search__shell,
  .directory-controls__actions,
  .directory-submit,
  .directory-clear {
    width: 100%;
  }
  .tool-grid:not(.tool-grid--list) {
    grid-template-columns: 1fr;
  }
  .directory-filters {
    position: static;
  }
  .directory-controls:not(.is-drawer) {
    display: none;
  }
  .directory-search__input {
    padding-right: var(--tn-space-4);
  }
  .directory-search__kbd,
  .tool-card__meta-item--hide-xs {
    display: none;
  }
  .directory-hero__decor {
    display: none;
  }
  .directory-typeahead {
    max-width: 100%;
  }
  .toolbar__left {
    width: 100%;
  }
  .toolbar__right {
    width: 100%;
    justify-content: space-between;
  }
  .directory-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .tool-list-item__meta {
    display: none;
  }
  .typeahead-item__cat {
    display: none;
  }
}
@media (max-width: 640px) {
  .directory-hero__title {
    font-size: var(--tn-font-size-xl);
  }
  .tool-card {
    padding: var(--tn-space-3);
  }
  .tool-list-item {
    padding: var(--tn-space-2) var(--tn-space-3);
  }
  .directory-hero__headline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tn-space-2);
  }
}
.directory-facetgroup {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.directory-facetgroup > legend {
  padding: 0;
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.directory-facetgroup__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
}
.directory-facetgroup__option {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding-block: 8px;
  padding-inline: var(--tn-space-3);
  min-block-size: 44px;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  cursor: pointer;
  transition: all 0.15s ease;
}
.directory-facetgroup__option:hover {
  border-color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
  transform: translateY(-1px);
}
.directory-facetgroup__option:has(input:checked) {
  border-color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-text-default);
  font-weight: 600;
}
.directory-facetgroup__option:focus-within {
  outline: var(--tn-focus-ring);
  outline-offset: 2px;
}
.directory-facetgroup__option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.directory-facetgroup__count {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
  font-variant-numeric: tabular-nums;
}
.directory-discovery {
  padding-block: var(--tn-space-6);
  border-bottom: var(--tn-border-heavy);
  background: var(--tn-surface-panel);
}
.directory-discovery[hidden] {
  display: none;
}
.directory-discovery__lane + .directory-discovery__lane {
  margin-block-start: var(--tn-space-6);
}
.directory-discovery__head {
  display: flex;
  align-items: center;
  margin-block-end: var(--tn-space-3);
}
.directory-discovery__title {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
}
.directory-discovery__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--tn-space-3);
  overflow-x: auto;
  padding-block-end: var(--tn-space-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.discovery-card {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  padding: var(--tn-space-3);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  text-decoration: none;
  scroll-snap-align: start;
  transition: box-shadow var(--tn-transition), transform var(--tn-transition);
}
.discovery-card:hover {
  box-shadow: var(--tn-shadow-teal);
  transform: translateY(-2px);
}
.discovery-card:focus-visible {
  outline: var(--tn-focus-ring);
  outline-offset: 2px;
}
.discovery-card__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--tn-accent-primary-strong);
}
.discovery-card__body {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}
.discovery-card__title {
  font-weight: var(--tn-font-weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.discovery-card__cat {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
}
.discovery-card__badge {
  margin-inline-start: auto;
  padding: 0 var(--tn-space-2);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-color-ink);
  font-size: var(--tn-font-size-2xs);
  font-weight: var(--tn-font-weight-bold);
}
.typeahead-group__header {
  padding: var(--tn-space-2) var(--tn-space-3) var(--tn-space-1);
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-2xs);
  font-weight: var(--tn-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.directory-empty__didyoumean {
  margin-block: var(--tn-space-4);
}
.directory-empty__didyoumean-label {
  margin-block-end: var(--tn-space-2);
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-sm);
}
.directory-filter-toggle {
  display: none;
  align-items: center;
  gap: var(--tn-space-2);
  min-block-size: 44px;
  padding: var(--tn-space-2) var(--tn-space-4);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: var(--tn-font-weight-bold);
  cursor: pointer;
}
.directory-filter-toggle__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 20px;
  padding: 0 var(--tn-space-1);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-accent-primary-strong);
  color: var(--tn-color-on-accent, var(--tn-surface-canvas));
  font-size: var(--tn-font-size-2xs);
  font-variant-numeric: tabular-nums;
}
.directory-drawer-backdrop {
  display: none;
}
.directory-drawer-apply {
  display: none;
}
@media (max-width: 768px) {
  .directory-filter-toggle {
    display: inline-flex;
  }
  .directory-controls.is-drawer .directory-submit {
    display: none;
  }
  .directory-controls.is-drawer {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--tn-z-modal, 1000);
    max-block-size: 85vh;
    overflow-y: auto;
    padding: var(--tn-space-5);
    border-top: var(--tn-border-heavy);
    border-radius: var(--tn-radius-xl) var(--tn-radius-xl) 0 0;
    background: var(--tn-surface-canvas);
    box-shadow: var(--tn-shadow-lg);
    transform: translateY(100%);
    transition: transform var(--tn-transition);
  }
  .directory-controls.is-drawer.is-open {
    transform: translateY(0);
  }
  .directory-drawer-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--tn-z-modal-backdrop, 999);
    background: var(--tn-overlay-scrim, rgba(0, 0, 0, 0.5));
  }
  .directory-drawer-apply {
    display: block;
    position: sticky;
    inset-block-end: 0;
    inline-size: 100%;
    min-block-size: 44px;
    margin-block-start: var(--tn-space-4);
    border: var(--tn-border-heavy);
    border-radius: var(--tn-radius-pill);
    background: var(--tn-accent-primary-strong);
    color: var(--tn-color-on-accent, var(--tn-surface-canvas));
    font-weight: var(--tn-font-weight-bold);
    cursor: pointer;
  }
  .directory-discovery__rail {
    grid-auto-columns: minmax(180px, 80%);
  }
}
:root {
  --tn-page-max: 1280px;
  --tn-zone-pad-block: var(--tn-space-10);
}
body.focus-mode {
  overflow: hidden;
}
body.focus-mode .sidebar-shell,
body.focus-mode .admin-sidebar,
body.focus-mode .app-header,
body.focus-mode .sidebar-mobile-backdrop,
body.focus-mode .shell-skip-link,
body.focus-mode .breadcrumb-shell,
body.focus-mode .tool-page-header,
body.focus-mode .tool-page-family-strip,
body.focus-mode .tool-workbench-rail,
body.focus-mode .tool-console-drawer:not([data-console-primary="true"]),
body.focus-mode .tool-ai-drawer,
body.focus-mode .status-bar,
body.focus-mode #content-guide,
body.focus-mode .footer-shell,
body.focus-mode .admin-footer-shell,
body.focus-mode .sticky-footer-ad {
  display: none !important;
}
body.focus-mode .tool-workbench-row {
  position: fixed;
  inset: 0;
  z-index: 10;
  border-top: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-width: none;
}
body.focus-mode .tool-workbench-main {
  padding: 0;
  margin: 0;
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.focus-mode .tool-runtime-stage {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 768px) {
  body.focus-mode,
    body.focus-mode .tn-shell,
    body.focus-mode .tn-shell__body,
    body.focus-mode .tn-shell__main,
    body.focus-mode .tn-shell__content,
    body.focus-mode .tool-public-runtime-shell,
    body.focus-mode .workspace,
    body.focus-mode main,
    body.focus-mode .page-shell,
    body.focus-mode .tp-content {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.focus-mode .tool-workbench-row,
    body.focus-mode .tool-workbench-main,
    body.focus-mode .tool-runtime-stage {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}
body.focus-mode .tool-public-runtime-shell,
body.focus-mode .workspace {
  height: 100%;
}
body.focus-mode .tool-workbench-row:has(.tool-console-drawer[data-console-primary="true"]) .tool-runtime-stage {
  min-height: 0;
  flex: 1 1 auto;
}
#focus-mode-badge {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 9990;
  background: var(--tn-surface-panel-strong);
  color: var(--tn-text-default);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--tn-font-body);
  padding: 8px 18px;
  border: 1px solid var(--tn-border-default);
  border-radius: 24px;
  display: none;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04),
      0 4px 20px rgba(0,0,0,0.14);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 200ms ease,
      transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.dark #focus-mode-badge {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06),
      0 4px 20px rgba(0,0,0,0.35);
}
#focus-mode-badge.is-visible {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#focus-mode-badge:hover {
  background: var(--tn-surface-panel);
  border-color: var(--tn-accent-primary);
}
#focus-badge-close {
  font-size: 16px;
  color: var(--tn-text-muted);
  margin-left: 2px;
  transition: color 120ms ease;
}
#focus-mode-badge:hover #focus-badge-close {
  color: var(--tn-error);
}
body[data-tool-public-layout="design-shell"] {
  --footer-ad-height: 0;
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-feature-settings: "kern" 1,
        "liga" 1;
  -webkit-font-smoothing: antialiased;
}
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}
.mono-sans-tight {
  font-family: var(--tn-font-headline);
  line-height: 1.1;
}
.inter-spaced {
  font-family: var(--tn-font-body);
  line-height: 1.7;
}
.label-sm {
  font-size: calc(var(--tn-text-scale) * 0.6875rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
.tool-page-header {
  position: relative;
  min-height: var(--tn-shell-header-height);
  overflow: visible;
  background: var(--tn-surface-panel);
  border-bottom: var(--tn-border-heavy);
}
.tool-page-header__decor-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#tool-workspace,
#console-drawer,
#content-guide,
#related-tools {
  scroll-margin-top: calc(var(--tn-shell-header-height) + var(--tn-space-4));
}
.tool-page-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--tn-space-5);
  width: min(100%, var(--tn-page-max));
  margin-inline: auto;
  padding: var(--tn-space-6) var(--tn-page-gutter);
}
.tool-page-family-strip {
  width: min(100%, var(--tn-page-max));
  margin-inline: auto;
  padding: var(--tn-space-2) var(--tn-page-gutter);
}
.tool-page-header__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: 2px solid var(--tn-border-default);
  opacity: 0.18;
}
.tool-page-header__decor--a {
  top: calc(var(--tn-space-6) * -1);
  right: clamp(var(--tn-space-2), 4vw, var(--tn-space-20));
  width: clamp(var(--tn-space-12), 8vw, calc(var(--tn-space-16) + var(--tn-space-8)));
  height: clamp(var(--tn-space-12), 8vw, calc(var(--tn-space-16) + var(--tn-space-8)));
  border-radius: 50%;
  background: var(--tn-color-pink-soft);
  transform: rotate(8deg);
}
.tool-page-header__decor--b {
  right: clamp(var(--tn-space-16), 16vw, calc(var(--tn-space-20) + var(--tn-space-16)));
  bottom: calc(var(--tn-space-5) * -1);
  width: clamp(var(--tn-space-8), 5vw, var(--tn-space-16));
  height: clamp(var(--tn-space-8), 5vw, var(--tn-space-16));
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-teal-soft);
  transform: rotate(-12deg);
}
.tool-page-header__main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.tool-page-header__sticker-row,
.tool-page-header__title-row,
.tool-page-header__quick-links,
.tool-page-header__actions {
  gap: var(--tn-space-2);
  flex-wrap: wrap;
  display: flex;
  align-items: center;
}
.tool-page-header__sticker-row {
  gap: var(--tn-space-2);
  flex-wrap: wrap;
}
.tool-page-breadcrumb {
  margin-bottom: var(--tn-space-2);
  font-size: 0.78rem;
  line-height: 1.3;
}
.tool-page-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  align-items: center;
}
.tool-page-breadcrumb__item a {
  color: var(--tn-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.tool-page-breadcrumb__item a:hover,
.tool-page-breadcrumb__item a:focus-visible {
  color: var(--tn-text-default);
  border-bottom-color: currentColor;
}
.tool-page-breadcrumb__item--current {
  color: var(--tn-text-default);
  font-weight: 600;
}
.tool-page-breadcrumb__sep {
  color: var(--tn-text-muted, var(--tn-text-secondary));
}
.tool-page-header__sticker,
.tool-page-header__category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: var(--tn-space-6);
  border-radius: var(--tn-radius-pill);
  border: var(--tn-border-heavy);
  box-shadow: var(--tn-shadow-sm);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.tool-page-header__sticker {
  padding-inline: var(--tn-space-3);
  background: var(--tn-color-pink);
  color: var(--tn-color-ink);
  transform: rotate(-2deg);
}
.tool-page-header__category {
  padding-inline: var(--tn-space-2);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  transform: rotate(1deg);
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.tool-page-header__category:hover {
  transform: translateY(-2px) rotate(1deg);
  box-shadow: var(--tn-shadow-md);
}
.tool-page-header__title-row {
  gap: var(--tn-space-2);
  flex-wrap: wrap;
}
.tool-page-header__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: var(--tn-radius-lg);
}
.tool-page-header__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.tool-page-ad-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  flex: 0 0 auto;
  max-width: calc(var(--tn-space-20) + var(--tn-space-16));
  padding: var(--tn-space-2) var(--tn-space-3);
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
  text-decoration: none;
  transition: border-color var(--tn-transition),
      box-shadow var(--tn-transition);
}
.tool-page-ad-banner:hover {
  border-color: var(--tn-accent-primary);
  box-shadow: 0 0 0 2px var(--tn-accent-focus);
}
.tool-page-ad-icon {
  flex: 0 0 auto;
}
.tool-page-ad-copy {
  min-width: 0;
  display: grid;
  gap: var(--tn-space-1);
}
.tool-page-ad-title {
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.tool-page-ad-subtitle {
  overflow: hidden;
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-page-ad-icon,
.tool-page-ad-title,
.tool-public-icon--accent,
.tool-ai-submit-btn {
  color: var(--tn-accent-primary);
}
.tool-page-title {
  margin: 0;
  color: var(--tn-text-default);
  font-size: clamp(var(--tn-font-size-lg), 2.2vw, var(--tn-font-size-2xl));
  font-weight: 900;
  letter-spacing: var(--tn-tracking-heading);
}
.tool-page-version {
  display: inline-flex;
  align-items: center;
  min-height: var(--tn-space-5);
  padding-inline: var(--tn-space-2);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-muted);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-xs);
}
.tool-page-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
  min-height: var(--tn-space-6);
  padding-inline: var(--tn-space-2);
  background: var(--tn-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-success) 18%, transparent);
  }
  color: var(--tn-text-default);
  border: var(--memphis-border-thin);
  border-radius: var(--tn-radius-pill);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-micro);
  font-weight: 800;
}
.tool-page-status-dot {
  width: var(--tn-space-1);
  height: var(--tn-space-1);
  border-radius: 50%;
  background: var(--tn-success);
}
.tool-page-description {
  max-width: 76ch;
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.tool-page-header__quick-links {
  gap: var(--tn-space-2);
  flex-wrap: wrap;
  margin-top: var(--tn-space-1);
}
.tool-page-header__quick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--tn-text-secondary);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--tn-transition),
      border-color var(--tn-transition);
}
.tool-page-header__quick-links a:hover {
  color: var(--tn-accent-primary-strong);
  border-bottom-color: var(--tn-accent-primary);
}
.tool-page-header__quick-links a:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.tool-page-header__actions {
  justify-content: flex-end;
  margin-left: auto;
}
.tool-page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: start;
  gap: var(--tn-space-6);
}
.tool-page-hero__inner > .tool-page-header__actions {
  position: absolute;
  top: var(--tn-space-4);
  right: var(--tn-space-6);
  margin: 0;
}
.tool-page-hero__identity {
  min-width: 0;
}
.tool-page-hero__overview {
  min-width: 0;
}
.tool-page-hero__overview-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-4);
  padding: var(--tn-space-4);
  background: var(--tn-surface-card, #fff);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg, 12px);
  box-shadow: var(--tn-shadow-sm);
}
.tool-page-hero__overview-block {
  min-width: 0;
}
.tool-page-hero__overview-title {
  margin: 0 0 var(--tn-space-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tn-text-secondary);
}
.tool-page-hero__overview-list,
.tool-page-hero__overview-steps,
.tool-page-hero__overview-toc {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.tool-page-hero__overview-list li,
.tool-page-hero__overview-toc li {
  font-size: var(--tn-font-size-sm, 0.9rem);
  color: var(--tn-text-secondary);
  line-height: 1.45;
}
.tool-page-hero__overview-step-title {
  display: block;
  font-weight: 700;
  color: var(--tn-text-default);
}
.tool-page-hero__overview-step-desc {
  display: block;
  font-size: var(--tn-font-size-sm, 0.9rem);
  color: var(--tn-text-secondary);
}
.tool-page-hero__overview-toc a {
  color: var(--tn-text-default);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
.tool-page-hero__overview-toc a:hover,
.tool-page-hero__overview-toc a:focus-visible {
  border-bottom-color: currentColor;
}
@media (max-width: 900px) {
  .tool-page-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tool-page-focus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-panel);
  color: var(--tn-text-secondary);
  cursor: pointer;
  transition: background var(--tn-transition),
      border-color var(--tn-transition),
      color var(--tn-transition);
}
.tn-shortcut__btn[hidden] {
  display: none !important;
}
.tool-page-focus-btn:hover {
  background: var(--tn-surface-subtle);
  border-color: var(--tn-accent-primary);
  color: var(--tn-accent-primary-strong);
}
.tool-page-focus-btn:active {
  transform: scale(0.96);
}
.tool-page-focus-btn:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.tool-page-focus-btn.focus-icon--active {
  border-color: var(--tn-accent-primary);
  color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
}
.tool-page-focus-btn.focus-icon--active:hover {
  background: var(--tn-accent-primary);
  color: var(--tn-color-paper);
}
.tn-favorite__btn[aria-pressed="true"] {
  border-color: var(--tn-accent-primary);
  color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
}
.tn-favorite__btn[aria-pressed="true"]:hover {
  background: var(--tn-accent-primary);
  color: var(--tn-color-paper);
}
.tn-favorite__btn.is-loading {
  opacity: 0.6;
  cursor: wait;
}
.tn-favorite__btn .material-symbols-outlined {
  transition: transform 0.2s ease-out, opacity 0.15s ease-out;
}
.tn-favorite__btn.icon-swap .material-symbols-outlined {
  animation: favoriteIconSwap 0.3s ease-out;
}
.tn-shortcut__btn[aria-pressed="true"] {
  border-color: var(--tn-accent-primary);
  color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
}
.tn-shortcut__btn[aria-pressed="true"]:hover {
  background: var(--tn-accent-primary);
  color: var(--tn-color-paper);
}
.tn-shortcut__btn[aria-pressed="true"] .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.tn-shortcut__btn.is-loading {
  opacity: 0.6;
  cursor: wait;
}
.tn-shortcut__btn .material-symbols-outlined {
  transition: transform 0.2s ease-out, opacity 0.15s ease-out;
}
.tn-shortcut__btn.icon-swap .material-symbols-outlined {
  animation: favoriteIconSwap 0.3s ease-out;
}
@keyframes favoriteIconSwap {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(0.7);
    opacity: 0;
  }
  60% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.tool-public-text--label,
.tool-public-text--muted,
.tool-public-icon--muted {
  color: var(--tn-text-muted);
}
body[data-tool-public-layout="design-shell"] .tool-page-header {
  background: var(--tn-surface-panel);
  border-bottom: var(--tn-border-heavy);
}
body[data-tool-public-layout="design-shell"] .tool-page-title {
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-weight: 900;
}
body[data-tool-public-layout="design-shell"] .tool-page-status-badge {
  background: var(--tn-success);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-success) 18%, transparent);
  }
  color: var(--tn-text-default);
  border: var(--memphis-border-thin);
}
body[data-tool-public-layout="design-shell"] .tool-page-status-dot {
  background: var(--tn-success);
}
body[data-tool-public-layout="design-shell"] .tool-page-description {
  color: var(--tn-text-muted);
  font-family: var(--tn-font-body);
}
.tool-workbench-row {
  position: relative;
  width: 100%;
  max-width: var(--tn-page-max);
  margin-inline: auto;
  min-width: 0;
  background: var(--tn-surface-panel-muted);
}
.tool-workbench-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--tn-border-default);
}
.tool-workbench-row::after {
  content: "";
  position: absolute;
  inset: 0 50% 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--tn-surface-panel-muted);
  z-index: -1;
}
.tool-workbench-main {
  min-width: 0;
  min-height: 0;
  margin: var(--tn-space-3) var(--tn-page-gutter);
  margin-right: calc(var(--tn-space-12) + var(--tn-page-gutter));
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-md);
  overflow: hidden;
}
.tool-workbench-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
  min-height: 2.5rem;
  padding: var(--tn-space-1) var(--tn-space-2);
  background: var(--tn-surface-panel-muted);
  border-bottom: var(--tn-border-heavy);
  user-select: none;
  -webkit-user-select: none;
}
.tool-workbench-titlebar__id {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  min-width: 0;
}
.tool-workbench-titlebar__glyph {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--tn-text-muted);
}
.tool-workbench-titlebar__glyph .material-symbols-outlined,
.tool-workbench-titlebar__glyph svg {
  font-size: 1.25rem;
}
.tool-workbench-titlebar__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--tn-text-default);
}
.tool-workbench-titlebar__controls {
  display: flex;
  align-items: center;
  gap: var(--tn-space-1);
  flex: 0 0 auto;
}
.tool-window-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: var(--tn-text-default);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-sm);
  cursor: pointer;
  transition: background var(--tn-transition), border-color var(--tn-transition);
}
.tool-window-btn:hover {
  background: var(--tn-surface-panel);
  border-color: var(--tn-border-strong);
}
.tool-window-btn:focus-visible {
  outline: 2px solid var(--tn-border-strong);
  outline-offset: 1px;
}
.tool-window-btn .material-symbols-outlined,
.tool-window-btn svg {
  font-size: 1.125rem;
  line-height: 1;
}
.tool-window-btn.focus-icon--active {
  background: var(--tn-surface-panel);
  border-color: var(--tn-border-strong);
}
.tool-window-divider {
  width: 1px;
  align-self: stretch;
  margin: var(--tn-space-1) var(--tn-space-1);
  background: var(--tn-border-subtle);
}
.tool-workbench-titlebar__id .display-menu--popover .display-menu__panel {
  right: auto;
  left: 0;
}
.tool-workbench-main.is-shaded .tool-runtime-stage,
.tool-workbench-main.is-shaded .status-bar,
.tool-workbench-main.is-shaded .tool-console-drawer,
.tool-workbench-main.is-shaded .tool-ai-drawer {
  display: none !important;
}
.tool-runtime-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(24rem, 58vh, 44rem);
  overflow: hidden;
  background: var(--tn-surface-panel);
}
.tool-public-runtime-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.workspace {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.tool-runtime-notice {
  margin: var(--tn-space-3);
  padding: var(--tn-space-3) var(--tn-space-4);
  background: var(--tn-warning);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-warning) 18%, transparent);
  }
  border: var(--memphis-border-thin);
  color: var(--tn-warning);
}
.tool-runtime-noscript {
  margin: var(--tn-space-4);
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel-muted);
  border: var(--memphis-border);
  color: var(--tn-text-default);
}
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: var(--tn-space-1);
  background: var(--tn-border-muted);
  cursor: col-resize;
}
.resize-handle:hover,
.resize-handle.dragging {
  background: var(--tn-accent-primary);
}
body[data-tool-public-layout="design-shell"] .workspace > .resize-handle {
  display: none;
}
.status-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  min-height: 28px;
  padding-inline: var(--tn-space-4);
  background: var(--tn-surface-panel-muted);
  border-top: 1px solid var(--tn-border-default);
  color: var(--tn-text-secondary);
  font-family: var(--tn-font-mono);
  font-size: 11px;
}
#console-drawer,
#ai-assistant-drawer {
  background: var(--tn-surface-panel);
  border-color: var(--tn-border-muted);
}
#console-drawer {
  border-top: 1px solid var(--tn-border-default);
}
.console-content,
#console-log {
  background: var(--tn-surface-panel-strong);
  color: var(--tn-text-default);
  font-size: 12px;
}
#console-drawer .console-content {
  display: none;
  max-height: 0;
  overflow: hidden;
}
#console-drawer.expanded .console-content {
  display: block;
  max-height: 16rem;
  overflow: auto;
  border-top: 1px solid var(--tn-border-subtle);
}
#ai-assistant-drawer {
  border-top: 1px solid var(--tn-border-default);
}
.ai-content {
  display: none;
  max-height: 0;
  overflow: hidden;
}
#ai-assistant-drawer.expanded .ai-content {
  display: flex;
  max-height: 18rem;
}
.tool-console-btn,
.tool-ai-btn {
  color: var(--tn-text-muted);
  transition: background 120ms ease,
      color 120ms ease;
  cursor: pointer;
}
.tool-console-btn:hover,
.tool-ai-btn:hover {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
}
.tool-console-btn--active {
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
}
.tool-console-header {
  display: flex;
  align-items: center;
}
.tool-console-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
}
.tool-console-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--tn-text-muted);
  cursor: pointer;
  transition: background 120ms ease,
      color 120ms ease;
}
.tool-console-action:hover {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
}
.tool-console-action .material-symbols-outlined {
  font-size: 16px;
}
.tool-ai-content,
.tool-ai-message {
  background: var(--tn-surface-panel-muted);
}
.tool-ai-message {
  border-color: var(--tn-border-muted);
  color: var(--tn-text-muted);
}
.tool-ai-message--user {
  background: var(--tn-accent-primary-soft);
  border-color: var(--tn-accent-primary);
  color: var(--tn-text-default);
}
.tool-ai-avatar {
  background: var(--tn-surface-panel-strong);
}
.tool-ai-input {
  background: var(--tn-surface-panel);
  border-color: var(--tn-border-muted);
  color: var(--tn-text-default);
}
.tool-ai-input::placeholder {
  color: var(--tn-text-soft);
}
.tool-ai-input:focus,
.tool-input-focus:focus {
  border-color: var(--tn-accent-primary);
  box-shadow: 0 0 0 var(--tn-space-1) var(--tn-accent-focus);
}
.query-chip {
  border: var(--memphis-border-thin);
  border-radius: var(--tn-radius-md);
  padding: var(--tn-space-1) var(--tn-space-2);
  background: var(--tn-surface-panel);
  color: var(--tn-text-muted);
}
.query-chip:hover {
  border-color: var(--tn-accent-primary);
  color: var(--tn-text-default);
}
.rail-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  width: var(--tn-space-12);
  min-height: 100%;
  transition: width var(--tn-transition), box-shadow var(--tn-transition);
}
.rail-overlay:hover,
.rail-overlay:focus-within {
  width: min(24rem, 92vw);
  box-shadow: var(--tn-shadow-lg);
}
.rail-content {
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--tn-transition);
}
.rail-overlay:hover .rail-content,
.rail-overlay:focus-within .rail-content {
  visibility: visible;
  opacity: 1;
}
.tool-workbench-rail {
  background: var(--tn-surface-panel);
  border-radius: var(--tn-radius-lg) 0 0 var(--tn-radius-lg);
}
@media (min-width: 1025px) {
  .tool-workbench-rail {
    border: var(--tn-border-heavy);
    box-shadow: var(--tn-shadow-md);
  }
}
.tool-workbench-rail-icons {
  background: var(--tn-surface-panel-muted);
  border-right: 1px solid var(--tn-border-default);
}
.tool-workbench-rail-content,
.tool-workbench-rail-panel {
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
}
.tool-workbench-rail-panel {
  min-height: 0;
}
[id^="rail-tab-"] {
  border-bottom: 2px solid transparent;
  color: var(--tn-text-muted);
}
[id^="rail-tab-"]:hover {
  color: var(--tn-text-default);
}
[id^="rail-tab-"][aria-selected="true"] {
  border-bottom-color: var(--tn-accent-primary);
  color: var(--tn-accent-primary);
  background-color: var(--tn-surface-panel-muted);
}
[id^="rail-icon-"] {
  color: var(--tn-text-muted);
  transition: background 120ms ease,
      color 120ms ease,
      transform 120ms ease;
  border-radius: var(--tn-radius-md);
}
[id^="rail-icon-"]:hover {
  color: var(--tn-text-default);
  background: var(--tn-surface-subtle);
  transform: scale(1.08);
}
[id^="rail-icon-"][aria-selected="true"] {
  color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
}
.rail-option,
.rail-toggle-row {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.rail-ts-btn,
.rail-ts-display {
  min-height: var(--tn-space-8);
  border: 0;
  border-right: var(--memphis-border-thin);
  background: transparent;
  color: var(--tn-text-muted);
  font-size: calc(var(--tn-text-scale) * 0.6875rem);
}
.rail-ts-btn {
  padding-inline: var(--tn-space-2);
}
.rail-ts-btn:hover {
  background: var(--tn-surface-panel-strong);
  color: var(--tn-text-default);
}
.rail-ts-display {
  display: inline-flex;
  min-width: var(--tn-space-12);
  align-items: center;
  justify-content: center;
  font-family: var(--tn-font-mono);
  color: var(--tn-accent-primary);
}
.tool-public-border--subtle {
  border-color: var(--tn-border-muted);
}
.tool-public-bg--canvas {
  background: var(--tn-surface-panel);
}
.tool-public-icon--sm {
  font-size: calc(var(--tn-text-scale) * 0.8125rem);
}
.tool-public-icon--md {
  font-size: calc(var(--tn-text-scale) * 1rem);
}
.tool-public-icon--lg {
  font-size: calc(var(--tn-text-scale) * 1.5rem);
}
.tool-public-opacity--dim {
  opacity: 0.45;
}
.styled-scroll {
  scrollbar-color: var(--tn-border-muted) transparent;
}
.styled-scroll::-webkit-scrollbar {
  width: var(--tn-space-2);
  height: var(--tn-space-2);
}
.styled-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.styled-scroll::-webkit-scrollbar-thumb {
  background: var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
}
.styled-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--tn-accent-primary);
}
.tp-content {
  --tp-gutter: var(--tn-page-gutter);
  --tp-content-max: var(--tn-page-max);
  position: relative;
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  border-top: var(--tn-border-heavy);
  margin-bottom: var(--tn-space-12);
  overflow: hidden;
}
.tp-content__inner {
  max-width: var(--tp-content-max);
  margin: 0 auto;
  padding: var(--tn-zone-pad-block) var(--tp-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-10);
}
.tp-content__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: 2px solid var(--tn-border-default);
  opacity: 0.22;
}
.tp-content__decor--a {
  top: var(--tn-space-6);
  right: clamp(10px, 3vw, 60px);
  width: clamp(50px, 6vw, 80px);
  height: clamp(50px, 6vw, 80px);
  background: var(--tn-color-pink-soft);
  border-radius: 50%;
  transform: rotate(12deg);
}
.tp-content__decor--b {
  bottom: var(--tn-space-12);
  left: clamp(10px, 4vw, 80px);
  width: clamp(30px, 4vw, 48px);
  height: clamp(30px, 4vw, 48px);
  background: var(--tn-color-teal-soft);
  border-radius: var(--tn-radius-md);
  transform: rotate(-15deg);
}
@media (max-width: 1024px) {
  .tp-content__decor {
    display: none;
  }
}
.wp {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--tn-surface-app, transparent);
}
.wp__region {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}
.wp__split-handle {
  flex: 0 0 6px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  transition: background 0.15s ease;
  user-select: none;
  touch-action: none;
}
.wp__split-handle:hover,
.wp__split-handle[data-wp-active="true"] {
  background: var(--tn-border-muted, rgba(0, 0, 0, 0.12));
}
.wp__split-handle:focus-visible {
  outline: 2px solid var(--tn-focus-ring, var(--tn-accent-primary, #3b82f6));
  outline-offset: -2px;
}
.wp__split-handle-grip {
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: var(--tn-text-muted, currentColor);
  opacity: 0.4;
}
.wp__split-handle[data-wp-split-horizontal] {
  cursor: row-resize;
  flex: 0 0 6px;
  width: 100%;
}
.wp__split-handle[data-wp-split-horizontal] .wp__split-handle-grip {
  width: 24px;
  height: 2px;
}
.wp--split-editor {
  flex-direction: row;
}
.wp--split-editor > .wp__region--source,
.wp--split-editor > .wp__region--result {
  flex: 1 1 50%;
}
.wp--upload-canvas {
  flex-direction: row;
}
.wp--upload-canvas > .wp__region--canvas {
  flex: 7 1 0;
  align-items: center;
  justify-content: center;
}
.wp--upload-canvas > .wp__region--controls {
  flex: 3 1 0;
}
.wp__dropzone-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--tn-text-muted, currentColor);
  pointer-events: none;
}
.wp__dropzone-icon {
  font-size: 2.5rem;
  opacity: 0.6;
}
.wp__dropzone-label {
  font-size: 0.875rem;
  font-weight: 500;
}
.wp__region--canvas[data-wp-dropzone-active="true"] {
  background: var(--tn-surface-elevated, rgba(0, 0, 0, 0.02));
  outline: 2px dashed var(--tn-accent-primary, currentColor);
  outline-offset: -8px;
}
.wp--media-timeline {
  flex-direction: column;
}
.wp--media-timeline > .wp__region--player {
  flex: 65 1 0;
  background: var(--tn-surface-inset, rgba(0, 0, 0, 0.04));
}
.wp--media-timeline > .wp__region--timeline {
  flex: 35 1 0;
  border-top: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
}
.wp__player-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp__transport {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
}
.wp__transport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  cursor: pointer;
  color: inherit;
}
.wp__transport-btn:hover {
  background: var(--tn-surface-elevated, rgba(0, 0, 0, 0.04));
}
.wp__transport-time {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--tn-text-muted, currentColor);
}
.wp__timeline-track {
  flex: 1;
  padding: 0.5rem;
}
.wp--file-queue {
  flex-direction: row;
}
.wp--file-queue > .wp__region--queue {
  flex: 35 1 0;
  border-right: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
}
.wp--file-queue > .wp__region--preview {
  flex: 65 1 0;
}
.wp__queue-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
}
.wp__queue-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  font-size: 0.8125rem;
  cursor: pointer;
  color: inherit;
}
.wp__queue-btn:hover {
  background: var(--tn-surface-elevated, rgba(0, 0, 0, 0.04));
}
.wp__queue-list {
  flex: 1;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0.25rem;
}
.wp__preview-breadcrumb {
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--tn-text-muted, currentColor);
  border-bottom: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  min-height: 32px;
}
.wp__preview-stage {
  flex: 1;
  overflow: auto;
}
.wp--chat-stream {
  flex-direction: column;
}
.wp--chat-stream > .wp__region--messages {
  flex: 1 1 0;
  padding: 1rem;
  gap: 0.75rem;
}
.wp--chat-stream > .wp__region--compose {
  flex: 0 0 auto;
  border-top: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  padding: 0.75rem;
  overflow: visible;
}
.wp__compose-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.wp__compose-input {
  flex: 1;
  min-height: 38px;
  max-height: 160px;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.12));
  background: var(--tn-surface-panel, transparent);
  color: inherit;
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
}
.wp__compose-input:focus-visible {
  outline: 2px solid var(--tn-focus-ring, var(--tn-accent-primary, #3b82f6));
  outline-offset: 0;
  border-color: transparent;
}
.wp__compose-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: var(--tn-accent-primary, currentColor);
  color: var(--tn-accent-primary-on, white);
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.wp__compose-send:hover {
  opacity: 0.9;
}
.wp__compose-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wp--map-detail {
  flex-direction: row;
}
.wp--map-detail > .wp__region--map {
  flex: 6 1 0;
  background: var(--tn-surface-inset, rgba(0, 0, 0, 0.04));
}
.wp--map-detail > .wp__region--detail {
  flex: 4 1 0;
  border-left: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
}
.wp__map-stage {
  flex: 1;
  position: relative;
}
.wp__map-pin-list {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  max-height: calc(100% - 1.5rem);
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.wp__map-pin-list > * {
  pointer-events: auto;
}
.wp--manuscript {
  flex-direction: row;
}
.wp--manuscript > .wp__region--editor {
  flex: 1 1 0;
}
.wp--manuscript > .wp__region--outline {
  flex: 0 0 240px;
  border-left: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  background: var(--tn-surface-elevated, transparent);
}
.wp__editor-stage {
  flex: 1;
  padding: 1.5rem;
  overflow: auto;
}
.wp__editor-statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.375rem 0.75rem;
  border-top: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  font-size: 0.75rem;
  color: var(--tn-text-muted, currentColor);
  font-variant-numeric: tabular-nums;
}
.wp__outline-header {
  flex: 0 0 auto;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
}
.wp__outline-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tn-text-muted, currentColor);
}
.wp__outline-list {
  flex: 1;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}
.wp--dashboard {
  flex-direction: column;
}
.wp--dashboard > .wp__region--metrics {
  flex: 0 0 auto;
  padding: 0.75rem;
  border-bottom: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  overflow: visible;
}
.wp--dashboard > .wp__region--table {
  flex: 1 1 0;
}
.wp__metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}
.wp__filter-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  min-height: 40px;
}
.wp__table-stage {
  flex: 1;
  overflow: auto;
}
@media (max-width: 768px) {
  .wp--split-editor,
    .wp--upload-canvas,
    .wp--file-queue,
    .wp--map-detail,
    .wp--manuscript {
    flex-direction: column;
  }
  .wp--split-editor > .wp__region--source,
    .wp--split-editor > .wp__region--result,
    .wp--upload-canvas > .wp__region--canvas,
    .wp--upload-canvas > .wp__region--controls,
    .wp--file-queue > .wp__region--queue,
    .wp--file-queue > .wp__region--preview,
    .wp--map-detail > .wp__region--map,
    .wp--map-detail > .wp__region--detail,
    .wp--manuscript > .wp__region--editor {
    flex: 1 1 0;
  }
  .wp--manuscript > .wp__region--outline {
    flex: 0 0 auto;
    max-height: 30vh;
    border-left: none;
    border-bottom: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  }
  .wp--file-queue > .wp__region--queue {
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  }
  .wp--map-detail > .wp__region--map {
    max-height: 50vh;
    border-left: none;
    border-bottom: 1px solid var(--tn-border-subtle, rgba(0, 0, 0, 0.06));
  }
  .wp__split-handle {
    flex: 0 0 6px;
    cursor: row-resize;
    width: 100%;
  }
  .wp__split-handle .wp__split-handle-grip {
    width: 24px;
    height: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wp__split-handle {
    transition: none;
  }
}
body.page-docs .kb-landing {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-10);
  padding: var(--tn-space-10) var(--tn-space-6);
  max-width: var(--tn-page-max-width);
  margin: 0 auto;
  width: 100%;
}
body.page-docs .kb-landing__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--tn-space-4);
  padding: var(--tn-space-16) var(--tn-space-6);
  position: relative;
  overflow: hidden;
}
body.page-docs .kb-landing__hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  width: 140%;
  height: 120%;
  background: radial-gradient(ellipse at 50% 0%, rgb(var(--tn-color-pink-rgb) / 0.10) 0%, transparent 60%);
  pointer-events: none;
}
body.page-docs .kb-landing__title {
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-hero);
  font-weight: 800;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-heading);
  color: var(--tn-text-default);
  position: relative;
  z-index: 1;
}
body.page-docs .kb-landing__title-accent {
  color: var(--tn-accent-primary);
}
body.page-docs .kb-landing__lead {
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-lg);
  line-height: var(--tn-leading-body);
  color: var(--tn-text-muted);
  max-width: 560px;
  position: relative;
  z-index: 1;
}
body.page-docs .kb-landing__search {
  width: 100%;
  max-width: 520px;
  position: relative;
  z-index: 1;
}
body.page-docs .kb-landing__search-trigger {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  width: 100%;
  padding: var(--tn-space-3) var(--tn-space-4);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-base);
  color: var(--tn-text-muted);
  cursor: pointer;
  transition: border-color var(--tn-transition), box-shadow var(--tn-transition);
}
body.page-docs .kb-landing__search-trigger:hover {
  border-color: var(--tn-border-strong);
  box-shadow: var(--tn-shadow-sm);
}
body.page-docs .kb-landing__search-trigger:focus-visible {
  outline: none;
  border-color: var(--tn-accent-primary);
  box-shadow: var(--tn-shadow-focus);
}
body.page-docs .kb-landing__search-icon {
  width: 1em;
  height: 1em;
  font-size: var(--tn-font-size-lg);
  color: var(--tn-text-soft);
}
body.page-docs .kb-landing__search-hint {
  margin-left: auto;
  font-size: var(--tn-font-size-xs);
  font-family: var(--tn-font-mono);
  color: var(--tn-text-soft);
  background: var(--tn-surface-subtle);
  padding: 2px var(--tn-space-2);
  border-radius: var(--tn-radius-sm);
  border: 1px solid var(--tn-border-muted);
}
body.page-docs .kb-landing__sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--tn-space-5);
  width: 100%;
}
body.page-docs .kb-landing__card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
  position: relative;
}
body.page-docs .kb-landing__card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
}
body.page-docs .kb-landing__card:focus-visible {
  outline: none;
  box-shadow: var(--tn-shadow-focus);
}
body.page-docs .kb-landing__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-subtle);
  border: 2px solid var(--tn-border-strong);
  font-size: var(--tn-font-size-xl);
  color: var(--tn-accent-primary);
  margin-bottom: var(--tn-space-2);
}
body.page-docs .kb-landing__card-icon svg {
  width: 22px;
  height: 22px;
}
body.page-docs .kb-landing__card-title {
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 700;
  color: var(--tn-text-default);
  line-height: var(--tn-leading-tight);
}
body.page-docs .kb-landing__card-desc {
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
body.page-docs .kb-landing__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tn-space-2);
  padding: var(--tn-space-8) 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-soft);
}
body.page-docs .kb-landing__api {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-sm);
  scroll-margin-top: var(--tn-space-8);
}
body.page-docs .kb-landing__api-header {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
body.page-docs .kb-landing__api-eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--tn-space-1);
  padding: 2px var(--tn-space-2);
  border-radius: var(--tn-radius-sm);
  border: 1px solid var(--tn-border-muted);
  background: var(--tn-surface-subtle);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-xs);
  color: var(--tn-text-muted);
  letter-spacing: 0.04em;
}
body.page-docs .kb-landing__api-title {
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-2xl);
  font-weight: 800;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-heading);
  color: var(--tn-text-default);
}
body.page-docs .kb-landing__api-lead {
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-base);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
  max-width: 720px;
}
body.page-docs .kb-landing__api-lead code {
  font-family: var(--tn-font-mono);
  font-size: 0.95em;
  padding: 1px var(--tn-space-1);
  background: var(--tn-surface-subtle);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-sm);
  color: var(--tn-text-default);
}
body.page-docs .kb-landing__api-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--tn-space-5);
  width: 100%;
}
body.page-docs .kb-landing__card--api .kb-landing__card-icon {
  color: var(--tn-accent-primary);
}
body.page-docs .kb-landing__guides {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
}
body.page-docs .kb-landing__guides-header {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
}
body.page-docs .kb-landing__guides-title {
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-2xl);
  font-weight: 800;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-heading);
  color: var(--tn-text-default);
}
body.page-docs .kb-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
}
body.page-docs .kb-article__header {
  flex-shrink: 0;
  padding: var(--tn-space-6) var(--tn-space-6) var(--tn-space-4);
  border-bottom: 1px solid var(--tn-border-muted);
  background: var(--tn-surface-canvas);
}
body.page-docs .kb-article__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  margin-bottom: var(--tn-space-3);
}
body.page-docs .kb-article__breadcrumb a {
  color: var(--tn-text-muted);
  text-decoration: none;
  transition: color var(--tn-transition);
}
body.page-docs .kb-article__breadcrumb a:hover {
  color: var(--tn-accent-primary);
}
body.page-docs .kb-article__breadcrumb-sep {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
}
body.page-docs .kb-article__meta {
  margin: 0;
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-xs);
  color: var(--tn-text-soft);
  letter-spacing: 0.01em;
}
body.page-docs .kb-article__updated time {
  color: var(--tn-text-muted);
  font-variant-numeric: tabular-nums;
}
body.page-docs .kb-article__title {
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-3xl);
  font-weight: 800;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-heading);
  color: var(--tn-text-default);
}
body.page-docs .kb-article__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
@media (min-width: 1024px) {
  body.page-docs .kb-article__body {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}
body.page-docs .kb-article__content {
  min-width: 0;
  padding: var(--tn-space-6) var(--tn-space-8);
}
body.page-docs .kb-article__rail {
  display: none;
  padding: 0;
  border-left: 1px solid var(--tn-border-muted);
  background: var(--tn-surface-canvas);
}
@media (min-width: 1024px) {
  body.page-docs .kb-article__rail {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
  }
}
body.page-docs .kb-article__rail-inner {
  padding: var(--tn-space-6) var(--tn-space-4);
}
body.page-docs .kb-article__rail-title {
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tn-text-soft);
  margin-bottom: var(--tn-space-3);
}
body.page-docs .kb-article__toc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-docs .kb-article__toc-link {
  display: block;
  padding: 4px var(--tn-space-2);
  border-radius: var(--tn-radius-sm);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  text-decoration: none;
  line-height: 1.4;
  transition: background var(--tn-transition), color var(--tn-transition);
  border-left: 2px solid transparent;
}
body.page-docs .kb-article__toc-link:hover {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
}
body.page-docs .kb-article__toc-link:focus-visible {
  outline: none;
  box-shadow: var(--tn-shadow-focus);
}
body.page-docs .kb-article__toc-link--active {
  background: var(--tn-accent-primary-soft);
  color: var(--tn-accent-text);
  border-left-color: var(--tn-accent-primary);
  font-weight: 600;
}
body.page-docs .kb-article__toc-link--h3 {
  padding-left: var(--tn-space-4);
  font-size: var(--tn-font-size-xs);
}
body.page-docs .kb-markdown {
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-base);
  line-height: var(--tn-leading-body);
  color: var(--tn-text-default);
  max-width: 720px;
}
body.page-docs .kb-markdown > * + * {
  margin-top: var(--tn-space-4);
}
body.page-docs .kb-markdown h1,
body.page-docs .kb-markdown h2,
body.page-docs .kb-markdown h3,
body.page-docs .kb-markdown h4 {
  font-family: var(--tn-font-headline);
  font-weight: 700;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-heading);
  color: var(--tn-text-default);
  scroll-margin-top: var(--tn-space-8);
}
body.page-docs .kb-markdown h1 {
  font-size: var(--tn-font-size-3xl);
  font-weight: 800;
  border-bottom: 2px solid var(--tn-border-muted);
  padding-bottom: var(--tn-space-3);
  margin-top: var(--tn-space-8);
}
body.page-docs .kb-markdown h2 {
  font-size: var(--tn-font-size-2xl);
  margin-top: var(--tn-space-10);
  border-bottom: 1px solid var(--tn-border-muted);
  padding-bottom: var(--tn-space-2);
}
body.page-docs .kb-markdown h3 {
  font-size: var(--tn-font-size-xl);
  margin-top: var(--tn-space-8);
}
body.page-docs .kb-markdown h4 {
  font-size: var(--tn-font-size-lg);
  margin-top: var(--tn-space-6);
  color: var(--tn-text-muted);
}
body.page-docs .kb-markdown p {
  color: var(--tn-text-default);
}
body.page-docs .kb-markdown a {
  color: var(--tn-accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--tn-transition);
}
body.page-docs .kb-markdown a:hover {
  color: var(--tn-accent-primary-strong);
}
body.page-docs .kb-markdown ul,
body.page-docs .kb-markdown ol {
  padding-left: var(--tn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
body.page-docs .kb-markdown li {
  color: var(--tn-text-default);
}
body.page-docs .kb-markdown blockquote {
  margin: var(--tn-space-4) 0;
  padding: var(--tn-space-3) var(--tn-space-4);
  border-left: 3px solid var(--tn-accent-primary);
  background: var(--tn-surface-subtle);
  border-radius: 0 var(--tn-radius-md) var(--tn-radius-md) 0;
  color: var(--tn-text-muted);
  font-style: italic;
}
body.page-docs .kb-markdown blockquote p:first-child {
  margin-top: 0;
}
body.page-docs .kb-markdown blockquote p:last-child {
  margin-bottom: 0;
}
body.page-docs .kb-markdown code {
  font-family: var(--tn-font-mono);
  font-size: 0.92em;
  background: var(--tn-surface-inset);
  padding: 2px 5px;
  border-radius: var(--tn-radius-sm);
  border: 1px solid var(--tn-border-muted);
  color: var(--tn-accent-text);
}
body.page-docs .kb-markdown pre {
  margin: var(--tn-space-4) 0;
  padding: var(--tn-space-4);
  background: var(--tn-surface-inset);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  overflow-x: auto;
  position: relative;
}
body.page-docs .kb-markdown pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  line-height: 1.55;
}
body.page-docs .kb-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--tn-space-4) 0;
  font-size: var(--tn-font-size-sm);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  overflow: hidden;
}
body.page-docs .kb-markdown thead {
  background: var(--tn-surface-subtle);
}
body.page-docs .kb-markdown th,
body.page-docs .kb-markdown td {
  padding: var(--tn-space-3) var(--tn-space-4);
  text-align: left;
  border-bottom: 1px solid var(--tn-border-muted);
}
body.page-docs .kb-markdown th {
  font-weight: 700;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-default);
}
body.page-docs .kb-markdown td {
  color: var(--tn-text-default);
}
body.page-docs .kb-markdown tbody tr:hover {
  background: var(--tn-surface-subtle);
}
body.page-docs .kb-markdown hr {
  border: none;
  border-top: 2px solid var(--tn-border-muted);
  margin: var(--tn-space-8) 0;
}
body.page-docs .kb-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: var(--tn-radius-lg);
  border: 2px solid var(--tn-border-muted);
}
@media (max-width: 768px) {
  body.page-docs .kb-landing {
    padding: var(--tn-space-5) var(--tn-space-4);
  }
  body.page-docs .kb-landing__hero {
    padding: var(--tn-space-10) var(--tn-space-4);
  }
  body.page-docs .kb-landing__sections {
    grid-template-columns: 1fr;
  }
  body.page-docs .kb-article__content {
    padding: var(--tn-space-4) var(--tn-space-4);
  }
  body.page-docs .kb-article__title {
    font-size: var(--tn-font-size-2xl);
  }
}
body.page-feedback,
.feedback-page {
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
}
.feedback-page {
  --feedback-gutter: var(--tn-page-gutter);
  --feedback-content-max: var(--tn-page-max-width);
  position: relative;
}
.feedback-shell {
  width: min(100%, var(--feedback-content-max));
  margin-inline: auto;
  padding-inline: var(--feedback-gutter);
}
.feedback-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--tn-space-12) var(--tn-space-10);
  border-bottom: var(--tn-border-heavy);
  background: var(--tn-surface-panel);
}
.feedback-hero::before,
.feedback-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: var(--tn-border-heavy);
  opacity: 0.68;
}
.feedback-hero::before {
  top: var(--tn-space-8);
  right: max(calc(var(--tn-space-10) * -1), 4vw);
  width: clamp(var(--tn-space-20), 12vw, calc(var(--tn-space-20) + var(--tn-space-16)));
  aspect-ratio: 1;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-pink-soft);
  transform: rotate(8deg);
}
.feedback-hero::after {
  right: clamp(var(--tn-space-16), 18vw, calc(var(--tn-space-24) * 2));
  bottom: var(--tn-space-6);
  width: clamp(var(--tn-space-12), 8vw, var(--tn-space-20));
  aspect-ratio: 1;
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-teal-soft);
  transform: rotate(-12deg);
}
.feedback-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--tn-space-8);
}
.feedback-hero__body {
  display: grid;
  gap: var(--tn-space-5);
  max-width: 820px;
  min-width: 0;
}
.feedback-hero__sticker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 var(--tn-space-2);
  padding: var(--tn-space-1) var(--tn-space-3);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-yellow);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-color-ink);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.feedback-hero__title {
  max-width: 760px;
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: clamp(var(--tn-font-size-3xl), 5vw, var(--tn-font-size-hero));
  font-weight: 600;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-tight);
}
.feedback-hero__lead {
  max-width: 62ch;
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-lg);
  line-height: var(--tn-leading-body);
}
.feedback-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-3);
  max-width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feedback-hero__meta li {
  position: relative;
  display: grid;
  gap: var(--tn-space-1);
  min-width: 0;
  padding: var(--tn-space-4);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-canvas);
  box-shadow: var(--tn-shadow-sm);
}
.feedback-hero__meta li::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--tn-space-1);
  border-radius: var(--tn-radius-lg) 0 0 var(--tn-radius-lg);
  background: var(--tn-color-yellow);
}
.feedback-hero__meta strong {
  padding-left: var(--tn-space-2);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
}
.feedback-hero__meta span {
  padding-left: var(--tn-space-2);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.feedback-hero__routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-3);
}
.feedback-route-chip,
.feedback-secondary-btn,
.feedback-link-btn,
.tool-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tn-space-12);
  padding-inline: var(--tn-space-4);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-canvas);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--tn-transition),
    box-shadow var(--tn-transition),
    background var(--tn-transition),
    color var(--tn-transition);
}
.feedback-route-chip:hover,
.feedback-route-chip:focus-visible,
.feedback-secondary-btn:hover,
.feedback-secondary-btn:focus-visible,
.feedback-link-btn:hover,
.feedback-link-btn:focus-visible,
.tool-btn--primary:hover,
.tool-btn--primary:focus-visible {
  box-shadow: var(--tn-shadow-md);
  transform: translate(calc(var(--tn-space-1) * -1), calc(var(--tn-space-1) * -1));
}
.feedback-route-chip:active,
.feedback-secondary-btn:active,
.feedback-link-btn:active,
.tool-btn--primary:active {
  transform: scale(0.98);
}
.feedback-route-chip--primary,
.tool-btn--primary {
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
}
.feedback-route-chip .material-symbols-outlined {
  font-size: var(--tn-font-size-xl);
  line-height: 1;
}
.feedback-hero__decor {
  display: none;
}
.feedback-guide-card {
  display: grid;
  gap: var(--tn-space-4);
  align-self: end;
  padding: var(--tn-space-5);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  background: var(--tn-surface-elevated);
  box-shadow: var(--tn-shadow-card);
}
.feedback-guide-card__icon {
  display: inline-grid;
  width: var(--tn-space-12);
  aspect-ratio: 1;
  place-items: center;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-color-pink-soft);
  color: var(--tn-color-ink);
  font-size: var(--tn-font-size-2xl);
}
.feedback-guide-card h2 {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xl);
  font-weight: 600;
  line-height: var(--tn-leading-heading);
}
.feedback-guide-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
  list-style: none;
}
.feedback-guide-list li {
  padding-block: var(--tn-space-3);
  border-top: 1px dashed var(--tn-border-muted);
}
.feedback-main {
  padding-block: var(--tn-space-10) var(--tn-space-16);
}
.feedback-main > .feedback-shell {
  display: grid;
  gap: var(--tn-space-8);
  max-width: 920px;
}
.feedback-section-title,
.feedback-panel__title,
.feedback-section__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-weight: 600;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-heading);
}
.feedback-section-title,
.feedback-panel__title {
  font-size: var(--tn-font-size-2xl);
}
.feedback-section__title {
  padding: 0;
  font-size: var(--tn-font-size-xl);
}
.feedback-panel__note,
.feedback-section__hint,
.feedback-actions__note,
.feedback-field__hint,
.feedback-panel-card--static {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.feedback-panel {
  min-width: 0;
  overflow: clip;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-card);
}
.feedback-panel__header {
  display: grid;
  gap: var(--tn-space-2);
  padding: var(--tn-space-6);
  border-bottom: var(--tn-border-heavy);
  background: var(--tn-surface-elevated);
}
.feedback-status,
.feedback-summary:not(:empty) {
  margin: var(--tn-space-5) var(--tn-space-6) 0;
  padding: var(--tn-space-4);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.feedback-summary:not(:empty) {
  border-color: var(--tn-error);
  background: var(--tn-error-soft);
  color: var(--tn-error);
  font-weight: 500;
}
.feedback-success {
  display: grid;
  gap: var(--tn-space-4);
  padding: var(--tn-space-8) var(--tn-space-6);
}
.feedback-success h2 {
  margin: 0;
  color: var(--tn-success);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-2xl);
  font-weight: 600;
}
.feedback-success p {
  margin: 0;
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.feedback-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-3);
}
.feedback-section,
.feedback-disclosure {
  display: grid;
  gap: var(--tn-space-5);
  min-width: 0;
  margin: 0;
  padding: var(--tn-space-6);
  border: 0;
  border-bottom: 1px solid var(--tn-border-muted);
}
.feedback-disclosure {
  gap: 0;
}
.feedback-grid,
.feedback-panel-grid,
.feedback-disclosure__body,
.feedback-upload {
  display: grid;
  gap: var(--tn-space-5);
}
.feedback-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feedback-disclosure summary {
  display: flex;
  gap: var(--tn-space-3);
  align-items: center;
  justify-content: space-between;
  color: var(--tn-text-default);
  cursor: pointer;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xl);
  font-weight: 600;
  line-height: var(--tn-leading-heading);
  list-style: none;
}
.feedback-disclosure summary::-webkit-details-marker,
.feedback-upload__fallback summary::-webkit-details-marker {
  display: none;
}
.feedback-disclosure summary::before {
  content: "expand_more";
  display: inline-grid;
  width: var(--tn-space-8);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  font-family: "Material Symbols Outlined", sans-serif;
  font-size: var(--tn-font-size-xl);
  transition: transform var(--tn-transition);
}
.feedback-disclosure[open] summary::before {
  transform: rotate(180deg);
}
.feedback-disclosure summary span {
  margin-left: auto;
  color: var(--tn-text-soft);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-sm);
  font-weight: 400;
}
.feedback-disclosure__body {
  padding-top: var(--tn-space-5);
}
.feedback-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tn-space-4);
}
.feedback-category-card {
  position: relative;
  display: grid;
  gap: var(--tn-space-2);
  min-height: var(--tn-space-24);
  padding: var(--tn-space-5);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-canvas);
  box-shadow: var(--tn-shadow-sm);
  cursor: pointer;
  transition: background var(--tn-transition),
    box-shadow var(--tn-transition),
    transform var(--tn-transition);
}
.feedback-category-card:hover,
.feedback-category-card:focus-within,
.feedback-category-card.is-selected {
  background: var(--tn-accent-primary-soft);
  box-shadow: var(--tn-shadow-md);
  transform: translate(calc(var(--tn-space-1) * -1), calc(var(--tn-space-1) * -1));
}
.feedback-category-card.is-invalid {
  border-color: var(--tn-error);
  background: var(--tn-error-soft);
}
.feedback-category-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.feedback-category-card__title {
  display: flex;
  gap: var(--tn-space-2);
  align-items: center;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-base);
  font-weight: 600;
}
.feedback-category-card.is-selected .feedback-category-card__title::before {
  content: "check_circle";
  color: var(--tn-accent-primary-strong);
  font-family: "Material Symbols Outlined", sans-serif;
  font-size: var(--tn-font-size-xl);
  line-height: 1;
}
.feedback-category-card__body {
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.feedback-field {
  display: grid;
  gap: var(--tn-space-2);
}
.feedback-field__topline {
  display: flex;
  gap: var(--tn-space-3);
  align-items: baseline;
  justify-content: space-between;
}
.feedback-field__label {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 500;
}
.feedback-field__meta,
.feedback-field__counter {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
  font-weight: 400;
}
.feedback-field input[type="text"],
.feedback-field input[type="email"],
.feedback-field input[type="url"],
.feedback-field textarea,
.feedback-field select {
  width: 100%;
  border: 2px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
  transition: border-color var(--tn-transition),
    box-shadow var(--tn-transition),
    background var(--tn-transition);
}
.feedback-field input[type="text"],
.feedback-field input[type="email"],
.feedback-field input[type="url"],
.feedback-field select {
  min-height: var(--tn-space-12);
  padding-inline: var(--tn-space-4);
}
.feedback-field textarea {
  min-height: calc(var(--tn-space-16) * 2);
  padding: var(--tn-space-3) var(--tn-space-4);
  resize: vertical;
}
.feedback-field input:focus,
.feedback-field textarea:focus,
.feedback-field select:focus {
  border-color: var(--tn-accent-primary);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-focus);
  outline: 0;
}
.feedback-field input::placeholder,
.feedback-field textarea::placeholder {
  color: var(--tn-text-soft);
}
.feedback-field.is-invalid input,
.feedback-field.is-invalid textarea,
.feedback-field.is-invalid select {
  border-color: var(--tn-error);
  background: var(--tn-error-soft);
}
.feedback-field__error {
  min-height: 1em;
  color: var(--tn-error);
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
}
.feedback-field input[type="file"] {
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
}
.feedback-field input[type="file"]::file-selector-button {
  min-height: var(--tn-space-10);
  margin-right: var(--tn-space-3);
  padding-inline: var(--tn-space-4);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
  cursor: pointer;
  font-family: var(--tn-font-headline);
  font-weight: 500;
}
.feedback-panel-card {
  display: none;
  gap: var(--tn-space-5);
  padding: var(--tn-space-5);
  border: 2px dashed var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-elevated);
}
.feedback-panel-card.is-active {
  display: grid;
}
.feedback-panel-card--static.is-active {
  display: block;
}
.feedback-upload {
  padding: var(--tn-space-5);
  border: 2px dashed var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-elevated);
  transition: background var(--tn-transition),
    box-shadow var(--tn-transition);
}
.feedback-upload.is-paste-ready {
  background: var(--tn-accent-primary-soft);
  box-shadow: var(--tn-shadow-focus);
}
.feedback-upload__preview {
  display: none;
  grid-template-columns: var(--tn-space-16) minmax(0, 1fr);
  gap: var(--tn-space-4);
  align-items: center;
  padding: var(--tn-space-4);
  border: 2px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-panel);
}
.feedback-upload__preview.is-visible,
.feedback-upload__preview.is-active {
  display: grid;
}
.feedback-upload__preview p {
  display: grid;
  gap: var(--tn-space-1);
  margin: 0;
}
.feedback-upload__preview strong {
  color: var(--tn-text-default);
  font-weight: 500;
}
.feedback-upload__thumb {
  width: var(--tn-space-16);
  aspect-ratio: 1;
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
  object-fit: cover;
}
.feedback-upload__fallback summary {
  display: inline-flex;
  gap: var(--tn-space-2);
  align-items: center;
  width: fit-content;
  color: var(--tn-accent-primary-strong);
  cursor: pointer;
  font-size: var(--tn-font-size-sm);
  font-weight: 500;
  list-style: none;
}
.feedback-upload__fallback summary::before {
  content: "add_link";
  font-family: "Material Symbols Outlined", sans-serif;
  font-size: var(--tn-font-size-xl);
  line-height: 1;
}
.feedback-upload__fallback > div {
  margin-top: var(--tn-space-4);
  padding-top: var(--tn-space-4);
  border-top: 1px solid var(--tn-border-muted);
}
.feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-4);
  align-items: center;
  padding: var(--tn-space-6);
  background: var(--tn-surface-elevated);
}
.tool-btn--primary {
  cursor: pointer;
}
.tool-btn--primary:disabled {
  cursor: wait;
  opacity: 0.5;
}
.feedback-route-chip:focus-visible,
.feedback-secondary-btn:focus-visible,
.feedback-link-btn:focus-visible,
.tool-btn--primary:focus-visible,
.feedback-category-card:focus-within,
.feedback-upload:focus-visible,
.feedback-upload__fallback summary:focus-visible,
.feedback-disclosure summary:focus-visible {
  outline: var(--tn-border-width-heavy) solid var(--tn-accent-primary);
  outline-offset: var(--tn-space-1);
}
@media (min-width: 1024px) {
  .feedback-hero__inner {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
    align-items: end;
  }
}
@media (max-width: 1024px) {
  .feedback-hero::before,
  .feedback-hero::after {
    display: none;
  }
}
@media (max-width: 768px) {
  .feedback-shell {
    padding-inline: var(--tn-space-4);
  }
  .feedback-hero__meta,
  .feedback-category-grid,
  .feedback-grid--2 {
    grid-template-columns: 1fr;
  }
  .feedback-panel__header,
  .feedback-section,
  .feedback-disclosure,
  .feedback-actions,
  .feedback-upload {
    padding: var(--tn-space-5);
  }
  .feedback-disclosure summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .feedback-disclosure summary span {
    margin-left: 0;
  }
  .feedback-route-chip,
  .feedback-secondary-btn,
  .feedback-link-btn,
  .tool-btn--primary {
    width: 100%;
  }
}
.cl-page {
  --cl-gutter: var(--tn-page-gutter);
  --cl-content-max: var(--tn-page-max-width);
  position: relative;
}
.cl-inner {
  max-width: var(--cl-content-max);
  margin: 0 auto;
  padding: 0 var(--cl-gutter) var(--tn-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-12);
}
.cl-hero {
  position: relative;
  padding: var(--tn-section-gap) 0 var(--tn-space-10);
  border-bottom: 3px solid var(--tn-border-default);
  background: var(--tn-surface-panel);
  overflow: hidden;
  margin-bottom: var(--tn-space-8);
}
.cl-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
  margin: 0 auto;
  padding: 0 var(--cl-gutter);
}
.cl-hero__sticker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  background: var(--tn-color-yellow);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-component);
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
  transform: rotate(-3deg);
  margin: 0 0 var(--tn-space-2);
}
.cl-hero__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-tight);
  color: var(--tn-text-default);
}
.cl-hero__lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--tn-font-size-lg);
  line-height: var(--tn-leading-body);
  color: var(--tn-text-muted);
}
.cl-hero__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tn-space-3);
  margin-top: var(--tn-space-2);
}
.cl-hero__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: var(--tn-border-heavy);
  opacity: 0.65;
}
.cl-hero__decor--a {
  top: var(--tn-space-6);
  right: clamp(-20px, 4vw, 80px);
  width: clamp(80px, 12vw, 140px);
  height: clamp(80px, 12vw, 140px);
  background: var(--tn-color-purple-soft);
  border-radius: var(--tn-radius-lg);
  transform: rotate(14deg);
}
.cl-hero__decor--b {
  bottom: var(--tn-space-8);
  right: clamp(100px, 20vw, 260px);
  width: clamp(48px, 8vw, 80px);
  height: clamp(48px, 8vw, 80px);
  background: var(--tn-color-yellow-soft);
  border-radius: 50%;
  transform: rotate(-12deg);
}
@media (max-width: 1024px) {
  .cl-hero__decor {
    display: none;
  }
}
.cl-route-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  font-family: var(--tn-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tn-text-default);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  text-decoration: none;
  box-shadow: var(--tn-shadow-sm);
  transition: transform var(--tn-transition),
    box-shadow var(--tn-transition),
    background var(--tn-transition);
}
.cl-route-chip:hover,
.cl-route-chip:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
}
.cl-route-chip .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}
.cl-route-chip--primary {
  background: var(--tn-color-teal);
  color: var(--tn-color-ink);
}
.cl-route-chip--primary:hover,
.cl-route-chip--primary:focus-visible {
  background: var(--tn-color-teal-soft);
}
.cl-feed {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-12);
}
.cl-month {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-6);
}
.cl-month__header {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  padding-bottom: var(--tn-space-3);
  border-bottom: 2px solid var(--tn-border-muted);
}
.cl-month__heading {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cl-month__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-soft);
  font-family: var(--tn-font-body);
  font-size: 0.75rem;
  font-weight: 700;
}
.cl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-6);
}
.cl-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-component);
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.cl-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
}
.cl-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tn-space-3);
}
.cl-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-muted);
}
.cl-chip--feature,
.cl-chip--new,
.cl-chip--tool {
  background: var(--tn-color-teal-soft);
  color: var(--tn-color-ink);
}
.cl-chip--fix,
.cl-chip--fixed {
  background: var(--tn-color-green-soft);
  color: var(--tn-color-ink);
}
.cl-chip--improvement,
.cl-chip--improved,
.cl-chip--ui {
  background: var(--tn-color-purple-soft);
  color: var(--tn-color-ink);
}
.cl-chip--breaking,
.cl-chip--admin {
  background: var(--tn-color-pink-soft);
  color: var(--tn-color-ink);
}
.cl-card__date,
.cl-card__version {
  color: var(--tn-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}
.cl-card__version {
  font-family: var(--tn-font-mono);
  padding: 2px 6px;
  background: var(--tn-surface-canvas);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-sm);
}
.cl-card__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}
.cl-card__body {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.cl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--tn-space-4);
  padding: var(--tn-space-10) var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: 2px dashed var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
}
.cl-empty__heading {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--tn-text-default);
}
.cl-empty__body {
  margin: 0;
  max-width: 50ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tn-text-muted);
}
.cl-cta {
  padding-top: var(--tn-space-8);
  border-top: 2px solid var(--tn-border-muted);
}
.cl-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--tn-space-6);
}
.cl-cta__card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-component);
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.cl-cta__card[data-accent="pink"] {
  background: var(--tn-color-cream);
}
.cl-cta__card[data-accent="teal"] {
  background: var(--tn-color-cream-strong);
}
.cl-cta__card:hover {
  transform: translate(-3px, -3px);
}
.cl-cta__card[data-accent="pink"]:hover {
  box-shadow: 6px 6px 0 var(--tn-color-pink);
}
.cl-cta__card[data-accent="teal"]:hover {
  box-shadow: 6px 6px 0 var(--tn-color-teal);
}
.cl-cta__eyebrow {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-accent-primary-strong);
}
.cl-cta__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tn-text-default);
}
.cl-cta__body {
  margin: 0;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--tn-text-muted);
}
.cl-cta__card .cl-route-chip {
  align-self: flex-start;
  margin-top: var(--tn-space-2);
}
@media (prefers-reduced-motion: reduce) {
  .cl-route-chip,
  .cl-card,
  .cl-cta__card {
    transition: none;
  }
  .cl-route-chip:hover,
  .cl-route-chip:focus-visible,
  .cl-card:hover,
  .cl-cta__card:hover {
    transform: none;
  }
}
.roadmap-page {
  --rm-gutter: var(--tn-page-gutter);
  --rm-content-max: var(--tn-page-max-width);
  --rm-stack-gap: var(--tn-space-12);
  --rm-col-now: var(--tn-color-teal);
  --rm-col-now-soft: var(--tn-color-teal-soft);
  --rm-col-next: var(--tn-color-pink);
  --rm-col-next-soft: var(--tn-color-pink-soft);
  --rm-col-later: var(--tn-color-purple);
  --rm-col-later-soft: var(--tn-color-purple-soft);
  --rm-col-shipped: var(--tn-color-yellow);
  position: relative;
}
.rm-inner {
  max-width: var(--rm-content-max);
  margin: 0 auto;
  padding: 0 var(--rm-gutter) var(--tn-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--rm-stack-gap);
}
.rm-hero {
  position: relative;
  padding: var(--tn-section-gap) 0 var(--tn-space-10);
  border-bottom: 3px solid var(--tn-border-default);
  background: var(--tn-surface-panel);
  overflow: hidden;
}
.rm-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
  margin: 0 auto;
  padding: 0 var(--rm-gutter);
}
.rm-hero__sticker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  background: var(--tn-color-yellow);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-sm);
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
  transform: rotate(-3deg);
  margin: 0 0 var(--tn-space-2);
}
.rm-hero__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-tight);
  color: var(--tn-text-default);
}
.rm-hero__lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--tn-font-size-lg);
  line-height: var(--tn-leading-body);
  color: var(--tn-text-muted);
}
.rm-hero__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: var(--tn-border-heavy);
  opacity: 0.65;
}
.rm-hero__decor--a {
  top: var(--tn-space-8);
  right: clamp(-40px, 4vw, 80px);
  width: clamp(80px, 12vw, 140px);
  height: clamp(80px, 12vw, 140px);
  background: var(--tn-color-pink-soft);
  border-radius: 50%;
  transform: rotate(8deg);
}
.rm-hero__decor--b {
  bottom: var(--tn-space-6);
  right: clamp(80px, 18vw, 240px);
  width: clamp(48px, 8vw, 80px);
  height: clamp(48px, 8vw, 80px);
  background: var(--tn-color-teal-soft);
  border-radius: var(--tn-radius-md);
  transform: rotate(-12deg);
}
.rm-hero__decor--c {
  top: var(--tn-space-10);
  right: clamp(160px, 22vw, 320px);
  width: clamp(28px, 4vw, 46px);
  height: clamp(28px, 4vw, 46px);
  background: var(--tn-color-yellow-soft);
  border-radius: var(--tn-radius-sm);
  transform: rotate(24deg);
}
@media (max-width: 1024px) {
  .rm-hero__decor {
    display: none;
  }
}
.rm-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-3);
  max-width: 680px;
  margin: var(--tn-space-2) 0 0;
  padding: 0;
  list-style: none;
}
.rm-stat {
  display: grid;
  gap: var(--tn-space-1);
  padding: var(--tn-space-4);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-sm);
  position: relative;
}
.rm-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--rm-stat-accent, var(--tn-accent-primary));
  border-top-left-radius: var(--tn-radius-lg);
  border-bottom-left-radius: var(--tn-radius-lg);
}
.rm-stat--now {
  --rm-stat-accent: var(--rm-col-now);
}
.rm-stat--next {
  --rm-stat-accent: var(--rm-col-next);
}
.rm-stat--shipped {
  --rm-stat-accent: var(--rm-col-shipped);
}
.rm-stat strong {
  padding-left: var(--tn-space-2);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-2xl);
  font-weight: 900;
  line-height: 1;
}
.rm-stat span {
  padding-left: var(--tn-space-2);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
}
.rm-hero__nav,
.rm-cta__nav,
.rm-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-3);
}
.rm-route-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  font-family: var(--tn-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tn-text-default);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  text-decoration: none;
  box-shadow: var(--tn-shadow-sm);
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition),
        background var(--tn-transition);
}
.rm-route-chip:hover,
.rm-route-chip:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
}
.rm-route-chip--primary {
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
}
.rm-route-chip--primary:hover,
.rm-route-chip--primary:focus-visible {
  background: var(--tn-color-yellow-soft);
}
.rm-route-chip .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}
.rm-section__header {
  display: grid;
  gap: var(--tn-space-3);
  margin: 0 0 var(--tn-space-6);
}
.rm-section__header--row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--tn-space-4);
}
.rm-section__header--row > div {
  display: grid;
  gap: var(--tn-space-2);
}
.rm-section__action {
  justify-self: end;
}
.rm-section__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--tn-text-default);
}
.rm-section__lead {
  margin: 0;
  max-width: 66ch;
  font-size: var(--tn-font-size-base);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.rm-spotlight {
  padding-top: var(--tn-space-12);
}
.rm-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-5);
}
.rm-spotlight__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-md);
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition);
}
.rm-spotlight__card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--tn-shadow-lg);
}
.rm-spotlight__card[data-accent="pink"] {
  box-shadow: var(--tn-shadow-pink);
}
.rm-spotlight__card[data-accent="teal"] {
  box-shadow: var(--tn-shadow-teal);
}
.rm-spotlight__card[data-accent="yellow"] {
  box-shadow: var(--tn-shadow-yellow);
}
.rm-spotlight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-yellow-soft);
  font-size: 22px;
}
.rm-spotlight__icon svg {
  width: 22px;
  height: 22px;
}
.rm-spotlight__card[data-accent="pink"] .rm-spotlight__icon {
  background: var(--tn-color-pink-soft);
}
.rm-spotlight__card[data-accent="teal"] .rm-spotlight__icon {
  background: var(--tn-color-teal-soft);
}
.rm-spotlight__card[data-accent="yellow"] .rm-spotlight__icon {
  background: var(--tn-color-yellow);
}
.rm-spotlight__eyebrow {
  margin: 0;
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-text-muted);
}
.rm-spotlight__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 800;
  line-height: var(--tn-leading-heading);
  color: var(--tn-text-default);
}
.rm-spotlight__body {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  align-items: center;
}
.rm-spotlight__votes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--tn-color-teal-soft);
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  font-weight: 800;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-default);
}
.rm-spotlight__votes .material-symbols-outlined {
  font-size: 14px;
}
.rm-spotlight__date {
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  font-weight: 600;
}
.rm-spotlight__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--tn-text-default);
  text-decoration: none;
  font-size: var(--tn-font-size-sm);
}
.rm-spotlight__cta:hover,
.rm-spotlight__cta:focus-visible {
  color: var(--tn-accent-primary-strong);
}
.rm-spotlight__cta .material-symbols-outlined {
  font-size: 16px;
  transition: transform var(--tn-transition);
}
.rm-spotlight__cta:hover .material-symbols-outlined {
  transform: translateX(2px);
}
@media (max-width: 1023px) {
  .rm-spotlight__grid {
    grid-template-columns: 1fr 1fr;
  }
  .rm-spotlight__card:nth-child(3) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .rm-spotlight__grid {
    grid-template-columns: 1fr;
  }
  .rm-spotlight__card:nth-child(3) {
    grid-column: auto;
  }
}
.rm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.rm-chip--cat {
  background: var(--tn-color-cream-strong);
}
.rm-chip__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.rm-chip--prio {
  text-transform: uppercase;
}
.rm-chip--p0 {
  background: var(--tn-color-danger-soft);
  color: var(--tn-color-danger);
}
.rm-chip--p1 {
  background: var(--tn-color-warning-soft);
  color: var(--tn-color-warning);
}
.rm-chip--p2 {
  background: var(--tn-color-teal-soft);
  color: var(--tn-color-teal-strong);
}
.rm-chip--p3 {
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-muted);
}
.rm-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-5);
  align-items: start;
}
.rm-col {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-4);
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-md);
  position: relative;
}
.rm-col::before {
  content: "";
  position: absolute;
  inset: -3px -3px auto -3px;
  height: 10px;
  background: var(--rm-col-accent, var(--tn-accent-primary));
  border-top-left-radius: var(--tn-radius-2xl);
  border-top-right-radius: var(--tn-radius-2xl);
  border-bottom: 3px solid var(--tn-border-default);
}
.rm-col--now {
  --rm-col-accent: var(--rm-col-now);
}
.rm-col--next {
  --rm-col-accent: var(--rm-col-next);
}
.rm-col--later {
  --rm-col-accent: var(--rm-col-later-soft);
}
.rm-col__header {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  margin-top: var(--tn-space-1);
}
.rm-col__dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--tn-border-default);
  border-radius: 50%;
  background: var(--rm-col-accent);
}
.rm-col__title {
  margin: 0;
  flex: 1;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xl);
  font-weight: 900;
  color: var(--tn-text-default);
}
.rm-col__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 24px;
  padding: 0 8px;
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel-muted);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  color: var(--tn-text-default);
}
.rm-col__desc {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.rm-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  padding: var(--tn-space-4) var(--tn-space-4) var(--tn-space-4) calc(var(--tn-space-4) + 6px);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-sm);
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition);
}
.rm-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
}
.rm-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--rm-card-accent, var(--tn-accent-primary));
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.rm-card--now {
  --rm-card-accent: var(--rm-col-now);
}
.rm-card--next {
  --rm-card-accent: var(--rm-col-next);
}
.rm-card--later {
  --rm-card-accent: var(--rm-col-later);
}
.rm-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
}
.rm-card__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-base);
  font-weight: 800;
  line-height: var(--tn-leading-heading);
  color: var(--tn-text-default);
}
.rm-card__body {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rm-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
  margin-top: auto;
}
.rm-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--tn-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tn-text-muted);
  text-decoration: none;
}
.rm-card__link:hover,
.rm-card__link:focus-visible {
  color: var(--tn-text-default);
}
.rm-card__link .material-symbols-outlined {
  font-size: 14px;
}
.rm-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 0;
  margin: 0;
}
.rm-progress__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-muted);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.rm-progress__step.is-done {
  background: var(--rm-col-now-soft);
  color: var(--tn-color-ink);
}
.rm-progress__step.is-active {
  background: var(--rm-col-now);
  color: var(--tn-color-ink);
  box-shadow: var(--tn-shadow-sm);
}
.rm-vote-form {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.rm-vote-form__cast-at {
  margin: 0;
  padding-inline-start: 4px;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rm-vote-form__cast-at-time {
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.rm-vote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--tn-shadow-sm);
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition),
        background var(--tn-transition);
}
.rm-vote:hover,
.rm-vote:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
  background: var(--tn-color-teal-soft);
}
.rm-vote[aria-pressed="true"] {
  background: var(--tn-color-teal-soft);
  border-color: var(--tn-color-teal-strong);
}
.rm-vote--voted {
  background: var(--tn-color-teal-soft);
  border-color: var(--tn-color-teal-strong);
  color: var(--tn-text-default);
  opacity: 1;
}
.rm-vote--voted:hover,
.rm-vote--voted:focus-visible {
  transform: none;
  box-shadow: var(--tn-shadow-sm);
  background: var(--tn-color-teal-soft);
}
.rm-vote[disabled] {
  cursor: default;
  opacity: 0.7;
  transform: none;
}
.rm-vote .material-symbols-outlined {
  font-size: 18px;
}
.rm-vote__label {
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rm-vote__count {
  font-variant-numeric: tabular-nums;
}
.rm-empty {
  display: grid;
  gap: var(--tn-space-3);
  padding: var(--tn-space-5);
  border: 2px dashed var(--tn-border-muted);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel-muted);
}
.rm-empty--spaced {
  margin-top: var(--tn-space-4);
}
.rm-empty__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-base);
  font-weight: 800;
  color: var(--tn-text-default);
}
.rm-empty__body {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
@media (max-width: 1023px) {
  .rm-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rm-col--later {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .rm-board {
    grid-template-columns: 1fr;
  }
  .rm-col--later {
    grid-column: auto;
  }
  .rm-hero__stats {
    grid-template-columns: 1fr;
  }
}
.rm-shipped {
  position: relative;
}
.rm-shipped-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-shipped-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding: var(--tn-space-2) var(--tn-space-4);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-sm);
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-default);
  font-weight: 600;
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition);
}
.rm-shipped-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
}
.rm-shipped-pill__date {
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-xs);
  font-weight: 700;
  color: var(--tn-color-pink-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.rm-shipped-pill__title {
  font-weight: 700;
  color: var(--tn-text-default);
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rm-signals__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-5);
}
.rm-signal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-md);
}
.rm-signal-card[data-accent="pink"] {
  box-shadow: var(--tn-shadow-pink);
}
.rm-signal-card[data-accent="teal"] {
  box-shadow: var(--tn-shadow-teal);
}
.rm-signal-card[data-accent="yellow"] {
  box-shadow: var(--tn-shadow-yellow);
}
.rm-signal-card__eyebrow {
  margin: 0;
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-text-muted);
}
.rm-signal-card__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 800;
  line-height: var(--tn-leading-heading);
  color: var(--tn-text-default);
}
.rm-signal-card__body {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.rm-flow__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rm-flow;
}
.rm-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-sm);
}
.rm-flow__step[data-accent="pink"] {
  background: var(--tn-color-pink-soft);
}
.rm-flow__step[data-accent="teal"] {
  background: var(--tn-color-teal-soft);
}
.rm-flow__step[data-accent="yellow"] {
  background: var(--tn-color-yellow-soft);
}
.rm-flow__step[data-accent="purple"] {
  background: var(--tn-color-purple-soft);
}
.rm-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: 50%;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-base);
  font-weight: 900;
  color: var(--tn-color-ink);
  box-shadow: var(--tn-shadow-sm);
}
.rm-flow__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-base);
  font-weight: 800;
  color: var(--tn-color-ink);
}
.rm-flow__body {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
  color: var(--tn-color-ink-soft);
}
.rm-flow__body a {
  color: var(--tn-color-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1024px) {
  .rm-flow__list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .rm-flow__list {
    grid-template-columns: 1fr;
  }
}
.rm-cta {
  padding-top: var(--tn-space-6);
  display: grid;
  gap: var(--tn-space-6);
}
.rm-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tn-space-5);
}
.rm-cta__card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-md);
}
.rm-cta__card--primary {
  background: var(--tn-color-yellow-soft);
  box-shadow: var(--tn-shadow-yellow);
}
.rm-cta__eyebrow {
  margin: 0;
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-text-muted);
}
.rm-cta__card--primary .rm-cta__eyebrow {
  color: var(--tn-color-ink);
}
.rm-cta__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 800;
  line-height: var(--tn-leading-heading);
  color: var(--tn-text-default);
}
.rm-cta__card--primary .rm-cta__title,
.rm-cta__card--primary .rm-cta__body {
  color: var(--tn-color-ink);
}
.rm-cta__body {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.rm-cta__card .rm-route-chip {
  align-self: flex-start;
  margin-top: var(--tn-space-2);
}
@media (max-width: 768px) {
  .rm-cta__grid {
    grid-template-columns: 1fr;
  }
  .rm-section__header--row {
    grid-template-columns: 1fr;
  }
  .rm-section__action {
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rm-route-chip,
    .rm-vote,
    .rm-card,
    .rm-spotlight__card,
    .rm-shipped-pill,
    .rm-spotlight__cta .material-symbols-outlined {
    transition: none;
  }
  .rm-route-chip:hover,
    .rm-vote:hover,
    .rm-card:hover,
    .rm-spotlight__card:hover,
    .rm-shipped-pill:hover {
    transform: none;
  }
  .rm-hero__sticker,
    .rm-hero__decor--a,
    .rm-hero__decor--b,
    .rm-hero__decor--c {
    transform: none;
  }
}
@media (max-width: 1024px) {
  .rm-signals__grid {
    grid-template-columns: 1fr;
  }
}
.rm-icon,
.rm-vote__icon {
  width: 1em;
  height: 1em;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.about-page {
  --about-gutter: var(--tn-page-gutter);
  --about-content-max: var(--tn-page-max-width);
  --about-stack-gap: var(--tn-space-16);
  position: relative;
}
.about-hero {
  position: relative;
  padding: var(--tn-section-gap) 0 var(--tn-space-10);
  border-bottom: 3px solid var(--tn-border-default);
  background: var(--tn-surface-panel);
  overflow: hidden;
}
.about-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
  margin: 0 auto;
  padding: 0 var(--about-gutter);
}
.about-hero__sticker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  background: var(--tn-color-teal);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-sm);
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
  transform: rotate(-2deg);
  margin: 0 0 var(--tn-space-2);
}
.about-hero__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-tight);
  color: var(--tn-text-default);
}
.about-hero__lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--tn-font-size-lg);
  line-height: var(--tn-leading-body);
  color: var(--tn-text-muted);
}
.about-hero__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: var(--tn-border-heavy);
  opacity: 0.65;
}
.about-hero__decor--a {
  top: var(--tn-space-8);
  right: clamp(10px, 4vw, 80px);
  width: clamp(80px, 12vw, 140px);
  height: clamp(80px, 12vw, 140px);
  background: var(--tn-color-pink-soft);
  border-radius: 50%;
  transform: rotate(8deg);
}
.about-hero__decor--b {
  bottom: var(--tn-space-6);
  right: clamp(120px, 18vw, 240px);
  width: clamp(48px, 8vw, 80px);
  height: clamp(48px, 8vw, 80px);
  background: var(--tn-color-teal-soft);
  border-radius: var(--tn-radius-md);
  transform: rotate(-12deg);
}
@media (max-width: 1024px) {
  .about-hero__decor {
    display: none;
  }
}
.about-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-3);
  max-width: 680px;
  margin: var(--tn-space-2) 0 0;
  padding: 0;
  list-style: none;
}
.about-stat {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
  padding: var(--tn-space-4);
  border: var(--tn-border-heavy);
  background: var(--tn-surface-canvas);
  box-shadow: var(--tn-shadow-card);
  border-radius: var(--tn-radius-xl);
}
.about-stat--primary {
  border-top: 4px solid var(--tn-color-pink);
}
.about-stat--secondary {
  border-top: 4px solid var(--tn-color-teal);
}
.about-stat--tertiary {
  border-top: 4px solid var(--tn-color-yellow);
}
.about-stat strong {
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-2xl);
  font-weight: 900;
}
.about-stat span {
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
}
.about-inner {
  max-width: var(--about-content-max);
  margin: 0 auto;
  padding: var(--tn-space-10) var(--about-gutter) var(--about-stack-gap);
  display: flex;
  flex-direction: column;
  gap: var(--about-stack-gap);
}
.about-section {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-6);
}
.about-section__title {
  margin: 0 0 var(--tn-space-3);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 850;
  letter-spacing: var(--tn-tracking-heading);
}
.about-section__lead {
  margin: 0;
  max-width: 70ch;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-base);
  line-height: var(--tn-leading-body);
}
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr);
  gap: var(--tn-space-8);
  align-items: start;
}
.about-split__main {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
}
.about-sidebar {
  padding: var(--tn-space-5);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-card);
  display: grid;
  gap: var(--tn-space-4);
}
.about-sidebar__eyebrow {
  margin: 0;
  color: var(--tn-text-muted);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.about-sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--tn-space-3);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
}
.about-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--tn-space-5);
}
.about-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tn-space-4);
  align-items: start;
}
.about-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-sm);
}
.about-list__item p {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.about-list__item strong {
  display: block;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-base);
  font-weight: 800;
  margin-bottom: var(--tn-space-1);
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--tn-space-5);
}
.about-card {
  display: grid;
  gap: var(--tn-space-2);
  padding: var(--tn-space-6);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-card);
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.about-card[data-accent="pink"] {
  border-top: 4px solid var(--tn-color-pink);
}
.about-card[data-accent="teal"] {
  border-top: 4px solid var(--tn-color-teal);
}
.about-card[data-accent="yellow"] {
  border-top: 4px solid var(--tn-color-yellow);
}
.about-card[data-accent="purple"] {
  border-top: 4px solid var(--tn-color-purple);
}
.about-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tn-shadow-card-hover);
}
.about-card__eyebrow {
  margin: 0;
  color: var(--tn-text-muted);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.about-card__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 800;
}
.about-card__body {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.about-faq {
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-card);
  overflow: hidden;
}
.about-faq__item {
  border-bottom: 1px solid var(--tn-border-subtle);
}
.about-faq__item:last-child {
  border-bottom: none;
}
.about-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tn-space-5);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-weight: 800;
  font-size: var(--tn-font-size-base);
  cursor: pointer;
  list-style: none;
}
.about-faq__item summary::-webkit-details-marker {
  display: none;
}
.about-faq__icon {
  display: inline-block;
  transition: transform var(--tn-transition);
}
.about-faq__icon::before {
  content: "+";
  font-size: 1.25rem;
  color: var(--tn-text-muted);
}
.about-faq__item[open] .about-faq__icon {
  transform: rotate(45deg);
}
.about-faq__answer {
  padding: 0 var(--tn-space-5) var(--tn-space-5);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.about-faq__answer p {
  margin: 0;
}
.about-hero__routes,
.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-3);
  margin-top: var(--tn-space-2);
}
.about-route-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding: 6px 16px;
  border: var(--tn-border-heavy);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 800;
  text-decoration: none;
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-sm);
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.about-route-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--tn-shadow-md);
}
.about-route-chip--primary {
  background: var(--tn-accent-primary);
  color: var(--tn-color-ink);
}
.about-route-chip:focus-visible {
  outline: 3px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .about-hero__stats,
    .about-split {
    grid-template-columns: 1fr;
  }
}
.contact-page {
  --tn-contact-gutter: var(--tn-page-gutter);
  --tn-contact-content-max: var(--tn-page-max-width);
  position: relative;
}
.contact-inner {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-12);
  max-width: var(--tn-contact-content-max);
  margin: 0 auto;
  padding: 0 var(--tn-contact-gutter) var(--tn-space-16);
}
.contact-hero {
  position: relative;
  overflow: hidden;
  padding: var(--tn-section-gap) 0 var(--tn-space-10);
  border-bottom: var(--tn-border-heavy);
  background: var(--tn-surface-panel);
}
.contact-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--tn-contact-gutter);
}
.contact-hero__sticker,
.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact-hero__sticker {
  padding: var(--tn-space-1) var(--tn-space-3);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-yellow);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-color-ink);
  transform: rotate(-3deg);
}
.contact-hero__sticker--small {
  margin-bottom: var(--tn-space-1);
  font-size: var(--tn-font-size-micro);
}
.contact-eyebrow {
  color: var(--tn-text-soft);
}
.contact-hero__title,
.contact-section__title,
.contact-route-card__title,
.contact-guide__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-heading);
}
.contact-hero__title {
  max-width: 760px;
  font-size: clamp(var(--tn-font-size-3xl), 5vw, var(--tn-font-size-hero));
  font-weight: 900;
  line-height: var(--tn-leading-tight);
}
.contact-hero__lead,
.contact-section__lead,
.contact-route-card__body,
.contact-guide__note,
.contact-question p,
.contact-steps span {
  margin: 0;
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.contact-hero__lead {
  max-width: 62ch;
  font-size: var(--tn-font-size-lg);
}
.contact-hero__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: var(--tn-border-heavy);
  opacity: 0.65;
}
.contact-hero__decor--a {
  top: var(--tn-space-8);
  right: clamp(calc(-1 * var(--tn-space-10)), 4vw, var(--tn-space-20));
  width: clamp(var(--tn-space-20), 12vw, calc(var(--tn-space-20) + var(--tn-space-16)));
  height: clamp(var(--tn-space-20), 12vw, calc(var(--tn-space-20) + var(--tn-space-16)));
  border-radius: 50%;
  background: var(--tn-color-pink-soft);
  transform: rotate(8deg);
}
.contact-hero__decor--b {
  right: clamp(var(--tn-space-20), 18vw, calc(var(--tn-space-20) * 3));
  bottom: var(--tn-space-6);
  width: clamp(var(--tn-space-12), 8vw, var(--tn-space-20));
  height: clamp(var(--tn-space-12), 8vw, var(--tn-space-20));
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-teal-soft);
  transform: rotate(-12deg);
}
.contact-kpi,
.contact-route-grid,
.contact-guide__list,
.contact-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-3);
  max-width: 720px;
}
.contact-kpi li {
  display: grid;
  gap: var(--tn-space-1);
  padding: var(--tn-space-3) var(--tn-space-4);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-canvas);
  box-shadow: var(--tn-shadow-sm);
}
.contact-kpi strong,
.contact-steps strong {
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 800;
}
.contact-kpi span,
.contact-route-card__body,
.contact-guide__list,
.contact-guide__note,
.contact-steps span,
.contact-question p {
  font-size: var(--tn-font-size-sm);
}
.contact-hero__routes,
.contact-subject-chips,
.contact-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tn-space-3);
}
.contact-route-chip,
.contact-subject-chip,
.contact-submit,
.contact-route-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tn-space-2);
  border-radius: var(--tn-radius-pill);
  font-family: var(--tn-font-headline);
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--tn-transition),
    box-shadow var(--tn-transition),
    background var(--tn-transition),
    border-color var(--tn-transition),
    color var(--tn-transition);
}
.contact-route-chip,
.contact-subject-chip,
.contact-route-card__link {
  border: 2px solid var(--tn-border-strong);
  background: var(--tn-surface-canvas);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-text-default);
}
.contact-route-chip {
  min-height: 40px;
  padding: 0 var(--tn-space-4);
  font-size: var(--tn-font-size-sm);
}
.contact-route-chip--primary {
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
}
.contact-route-chip:hover,
.contact-subject-chip:hover,
.contact-route-card__link:hover,
.contact-submit:hover {
  transform: translate(calc(-1 * var(--tn-space-1)), calc(-1 * var(--tn-space-1)));
  box-shadow: var(--tn-shadow-md);
}
.contact-route-chip:active,
.contact-subject-chip:active,
.contact-route-card__link:active,
.contact-submit:active {
  transform: scale(0.98);
}
.contact-route-chip .material-symbols-outlined,
.contact-route-card__link .material-symbols-outlined,
.contact-submit .material-symbols-outlined,
.contact-status .material-symbols-outlined {
  font-size: var(--tn-font-size-xl);
  line-height: 1;
}
.contact-section {
  display: grid;
  gap: var(--tn-space-6);
}
.contact-section__header,
.contact-form__header {
  display: grid;
  gap: var(--tn-space-3);
}
.contact-section__title {
  max-width: 760px;
  font-size: clamp(var(--tn-font-size-2xl), 3vw, var(--tn-font-size-3xl));
  font-weight: 900;
}
.contact-section__lead {
  max-width: 70ch;
  font-size: var(--tn-font-size-base);
}
.contact-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-5);
}
.contact-route-card {
  position: relative;
  display: grid;
  min-height: 100%;
  gap: var(--tn-space-3);
  padding: var(--tn-space-5);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-sm);
}
.contact-route-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tn-space-2);
  border-radius: var(--tn-radius-lg) 0 0 var(--tn-radius-lg);
  background: var(--tn-contact-card-accent, var(--tn-color-yellow));
}
.contact-route-card[data-accent="pink"] {
  --tn-contact-card-accent: var(--tn-color-pink);
}
.contact-route-card[data-accent="teal"] {
  --tn-contact-card-accent: var(--tn-color-teal);
}
.contact-route-card[data-accent="yellow"] {
  --tn-contact-card-accent: var(--tn-color-yellow);
}
.contact-route-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tn-space-12);
  height: var(--tn-space-12);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-contact-card-accent, var(--tn-color-yellow));
  color: var(--tn-color-ink);
}
.contact-route-card__icon .material-symbols-outlined {
  font-size: var(--tn-font-size-2xl);
  line-height: 1;
}
.contact-route-card__title {
  font-size: var(--tn-font-size-xl);
  font-weight: 900;
}
.contact-route-card__link {
  width: fit-content;
  min-height: 36px;
  margin-top: var(--tn-space-2);
  padding: 0 var(--tn-space-3);
  font-size: var(--tn-font-size-xs);
}
.contact-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: var(--tn-space-6);
  align-items: start;
}
.contact-form,
.contact-confirmation,
.contact-guide,
.contact-question-list {
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-sm);
}
.contact-confirmation {
  display: grid;
  justify-items: start;
  gap: var(--tn-space-4);
  padding: var(--tn-space-7) var(--tn-space-6);
}
.contact-confirmation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tn-space-12);
  height: var(--tn-space-12);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-teal-soft);
  color: var(--tn-success);
}
.contact-confirmation__icon .material-symbols-outlined {
  font-size: var(--tn-font-size-2xl);
  line-height: 1;
}
.contact-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tn-space-3);
  margin-top: var(--tn-space-2);
}
.contact-form {
  display: grid;
  gap: var(--tn-space-5);
  padding: var(--tn-space-6);
}
.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tn-space-4);
}
.contact-field {
  display: grid;
  gap: var(--tn-space-2);
}
.contact-field__label {
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 800;
}
.contact-field__input,
.contact-field__textarea {
  width: 100%;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-base);
  line-height: var(--tn-leading-body);
  transition: border-color var(--tn-transition),
    box-shadow var(--tn-transition),
    background var(--tn-transition),
    transform var(--tn-transition);
}
.contact-field__input {
  min-height: 52px;
  padding: 0 var(--tn-space-4);
}
.contact-field__textarea {
  min-height: 180px;
  padding: var(--tn-space-4);
  resize: vertical;
}
.contact-field__input::placeholder,
.contact-field__textarea::placeholder {
  color: var(--tn-text-soft);
}
.contact-field__input:hover,
.contact-field__textarea:hover {
  background: var(--tn-surface-elevated);
}
.contact-field__input:focus,
.contact-field__textarea:focus {
  outline: 0;
  border-color: var(--tn-accent-primary-strong);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-focus);
  transform: translate(calc(-1 * var(--tn-space-1)), calc(-1 * var(--tn-space-1)));
}
.contact-field__error,
.contact-field__counter {
  min-height: var(--tn-space-4);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  line-height: var(--tn-leading-body);
}
.contact-field__error {
  color: var(--tn-error);
}
.contact-field__counter {
  text-align: right;
}
.contact-field.is-invalid .contact-field__input,
.contact-field.is-invalid .contact-field__textarea {
  border-color: var(--tn-error);
  background: var(--tn-error-soft);
}
.contact-subject-chip {
  min-height: 34px;
  padding: 0 var(--tn-space-3);
  cursor: pointer;
  font-size: var(--tn-font-size-xs);
}
.contact-subject-disclosure {
  margin-top: var(--tn-space-1);
}
.contact-subject-disclosure__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding: var(--tn-space-2) var(--tn-space-3);
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-muted);
  cursor: pointer;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  list-style: none;
  transition: color var(--tn-transition), background var(--tn-transition);
}
.contact-subject-disclosure__summary::-webkit-details-marker {
  display: none;
}
.contact-subject-disclosure__summary:hover {
  background: var(--tn-color-yellow-soft);
  color: var(--tn-text-default);
}
.contact-subject-disclosure__summary .material-symbols-outlined {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-lg);
  line-height: 1;
  transition: transform var(--tn-transition), color var(--tn-transition);
}
.contact-subject-disclosure[open] .contact-subject-disclosure__summary .material-symbols-outlined {
  color: var(--tn-accent-primary-strong);
  transform: rotate(180deg);
}
.contact-subject-disclosure[open] .contact-subject-chips {
  margin-top: var(--tn-space-2);
}
.contact-submit {
  min-height: 46px;
  padding: 0 var(--tn-space-5);
  border: 2px solid var(--tn-border-strong);
  background: var(--tn-color-yellow);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-color-ink);
  cursor: pointer;
  font-size: var(--tn-font-size-sm);
}
.contact-submit[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.contact-status {
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.contact-status.contact-form__status--ok,
.contact-form__status--ok {
  color: var(--tn-success);
  font-weight: 800;
}
.contact-form__status--error {
  color: var(--tn-error);
  font-weight: 800;
}
.contact-guide {
  display: grid;
  gap: var(--tn-space-4);
  padding: var(--tn-space-5);
  position: sticky;
  top: calc(var(--tn-shell-header-height) + var(--tn-space-4));
}
.contact-guide__title {
  font-size: var(--tn-font-size-xl);
  font-weight: 900;
}
.contact-guide__list {
  display: grid;
  gap: var(--tn-space-3);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.contact-guide__list li {
  position: relative;
  padding-left: var(--tn-space-5);
}
.contact-guide__list li::before {
  content: "";
  position: absolute;
  top: var(--tn-space-3);
  left: 0;
  width: var(--tn-space-2);
  height: var(--tn-space-2);
  border: 2px solid var(--tn-border-strong);
  border-radius: 50%;
  background: var(--tn-color-teal);
}
.contact-guide__note {
  padding: var(--tn-space-4);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-warning-soft);
  color: var(--tn-text-default);
}
.contact-steps {
  display: grid;
  gap: var(--tn-space-3);
  counter-reset: contact-step;
}
.contact-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tn-space-1) var(--tn-space-3);
  align-items: start;
  counter-increment: contact-step;
}
.contact-steps li::before {
  content: counter(contact-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tn-space-8);
  height: var(--tn-space-8);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-pink-soft);
  color: var(--tn-color-ink);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 900;
  grid-row: span 2;
}
.contact-question-list {
  overflow: clip;
}
.contact-question {
  border-bottom: 2px solid var(--tn-border-strong);
}
.contact-question:last-child {
  border-bottom: 0;
}
.contact-question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-4);
  padding: var(--tn-space-5) var(--tn-space-6);
  color: var(--tn-text-default);
  cursor: pointer;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-base);
  font-weight: 900;
  list-style: none;
  transition: background var(--tn-transition);
}
.contact-question summary::-webkit-details-marker {
  display: none;
}
.contact-question summary:hover {
  background: var(--tn-color-yellow-soft);
}
.contact-question summary .material-symbols-outlined {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xl);
  line-height: 1;
  transition: transform var(--tn-transition), color var(--tn-transition);
}
.contact-question[open] summary .material-symbols-outlined {
  color: var(--tn-accent-primary-strong);
  transform: rotate(180deg);
}
.contact-question p {
  padding: 0 var(--tn-space-6) var(--tn-space-5);
  font-size: var(--tn-font-size-base);
}
.contact-route-chip:focus-visible,
.contact-route-card__link:focus-visible,
.contact-subject-chip:focus-visible,
.contact-submit:focus-visible,
.contact-field__input:focus-visible,
.contact-field__textarea:focus-visible,
.contact-question summary:focus-visible {
  outline: var(--tn-space-1) solid var(--tn-accent-primary-strong);
  outline-offset: var(--tn-space-1);
}
@media (max-width: 1024px) {
  .contact-route-grid,
  .contact-shell {
    grid-template-columns: 1fr;
  }
  .contact-guide {
    position: static;
  }
}
@media (max-width: 768px) {
  .contact-hero__decor {
    display: none;
  }
  .contact-kpi,
  .contact-form__row {
    grid-template-columns: 1fr;
  }
  .contact-form,
  .contact-guide {
    padding: var(--tn-space-5);
  }
  .contact-submit {
    width: 100%;
  }
  .contact-question summary {
    padding: var(--tn-space-4) var(--tn-space-5);
  }
  .contact-question p {
    padding: 0 var(--tn-space-5) var(--tn-space-5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-route-chip,
  .contact-route-card__link,
  .contact-subject-chip,
  .contact-submit,
  .contact-field__input,
  .contact-field__textarea,
  .contact-question summary,
  .contact-question summary .material-symbols-outlined {
    transition: none;
  }
  .contact-route-chip:hover,
  .contact-route-card__link:hover,
  .contact-subject-chip:hover,
  .contact-submit:hover,
  .contact-field__input:focus,
  .contact-field__textarea:focus,
  .contact-question[open] summary .material-symbols-outlined {
    transform: none;
  }
}
.faq-page {
  --faq-gutter: var(--tn-page-gutter);
  --faq-content-max: var(--tn-page-max-width);
  --faq-rail-width: clamp(240px, 26vw, 300px);
  --faq-stack-gap: var(--tn-space-12);
  position: relative;
}
.faq-inner {
  max-width: var(--faq-content-max);
  margin: 0 auto;
  padding: 0 var(--faq-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--faq-stack-gap);
  padding-bottom: var(--tn-space-16);
}
.faq-hero {
  position: relative;
  padding: var(--tn-section-gap) 0 var(--tn-space-10);
  border-bottom: 3px solid var(--tn-border-default);
  background: var(--tn-surface-panel);
  overflow: hidden;
}
.faq-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
  margin: 0 auto;
  padding: 0 var(--faq-gutter);
}
.faq-hero__sticker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  background: var(--tn-color-yellow);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-component);
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
  transform: rotate(-3deg);
  margin: 0 0 var(--tn-space-2);
}
.faq-hero__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-tight);
  color: var(--tn-text-default);
}
.faq-hero__lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--tn-font-size-lg);
  line-height: var(--tn-leading-body);
  color: var(--tn-text-muted);
}
.faq-hero__routes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tn-space-3);
  margin: var(--tn-space-2) 0 0;
}
.faq-hero__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: var(--tn-border-heavy);
  opacity: 0.65;
}
.faq-hero__decor--a {
  top: var(--tn-space-8);
  right: clamp(-40px, 4vw, 80px);
  width: clamp(80px, 12vw, 140px);
  height: clamp(80px, 12vw, 140px);
  background: var(--tn-color-pink-soft);
  border-radius: 50%;
  transform: rotate(8deg);
}
.faq-hero__decor--b {
  bottom: var(--tn-space-6);
  right: clamp(80px, 18vw, 220px);
  width: clamp(48px, 8vw, 80px);
  height: clamp(48px, 8vw, 80px);
  background: var(--tn-color-teal-soft);
  border-radius: var(--tn-radius-md);
  transform: rotate(-12deg);
}
@media (max-width: 1024px) {
  .faq-hero__decor {
    display: none;
  }
}
.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 560px;
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-card);
  transition: box-shadow var(--tn-transition),
        transform var(--tn-transition);
}
.faq-search:focus-within {
  box-shadow: var(--tn-shadow-focus);
  transform: translate(-1px, -1px);
}
.faq-search__icon {
  position: absolute;
  left: 16px;
  color: var(--tn-text-soft);
  width: 1em;
  height: 1em;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  flex-shrink: 0;
}
.faq-search__input {
  width: 100%;
  height: 52px;
  padding: 0 48px 0 48px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  appearance: none;
}
.faq-search__input::placeholder {
  color: var(--tn-text-soft);
}
.faq-search__input::-webkit-search-cancel-button,
.faq-search__input::-webkit-search-decoration {
  appearance: none;
}
.faq-search__clear {
  position: absolute;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--tn-radius-pill);
  color: var(--tn-text-soft);
  cursor: pointer;
  transition: background var(--tn-transition), color var(--tn-transition);
}
.faq-search__clear:hover,
.faq-search__clear:focus-visible {
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
}
.faq-search__clear .material-symbols-outlined {
  font-size: 18px;
}
.faq-route-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  font-family: var(--tn-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tn-text-default);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  text-decoration: none;
  box-shadow: var(--tn-shadow-sm);
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition),
        background var(--tn-transition);
}
.faq-route-chip:hover,
.faq-route-chip:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
}
.faq-route-chip .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}
.faq-route-chip--primary {
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
}
.faq-route-chip--primary:hover,
.faq-route-chip--primary:focus-visible {
  background: var(--tn-color-yellow-soft);
}
.faq-section__title {
  margin: 0 0 var(--tn-space-6) 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tn-text-default);
}
.faq-section__lead {
  margin: 0;
  max-width: 60ch;
  font-size: 0.95rem;
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.faq-spotlight {
  padding-top: var(--tn-space-12);
}
.faq-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-6);
}
@media (max-width: 1023px) {
  .faq-spotlight__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faq-spotlight__grid > .faq-spotlight__card:nth-child(3) {
    grid-column: span 2;
  }
}
@media (max-width: 640px) {
  .faq-spotlight__grid {
    grid-template-columns: 1fr;
  }
  .faq-spotlight__grid > .faq-spotlight__card:nth-child(3) {
    grid-column: auto;
  }
}
.faq-spotlight__card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-pink);
  text-decoration: none;
  color: var(--tn-text-default);
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition);
}
.faq-spotlight__card[data-accent="teal"] {
  box-shadow: var(--tn-shadow-teal);
}
.faq-spotlight__card[data-accent="yellow"] {
  box-shadow: var(--tn-shadow-yellow);
}
.faq-spotlight__card:hover,
.faq-spotlight__card:focus-visible {
  transform: translate(-3px, -3px);
}
.faq-spotlight__card[data-accent="pink"]:hover,
.faq-spotlight__card[data-accent="pink"]:focus-visible {
  box-shadow: 7px 7px 0 var(--tn-color-pink);
}
.faq-spotlight__card[data-accent="teal"]:hover,
.faq-spotlight__card[data-accent="teal"]:focus-visible {
  box-shadow: 7px 7px 0 var(--tn-color-teal);
}
.faq-spotlight__card[data-accent="yellow"]:hover,
.faq-spotlight__card[data-accent="yellow"]:focus-visible {
  box-shadow: 7px 7px 0 var(--tn-color-yellow);
}
.faq-spotlight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--tn-color-cream);
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  font-size: 24px;
  color: var(--tn-color-ink);
}
.faq-spotlight__icon svg {
  width: 24px;
  height: 24px;
}
.faq-spotlight__card[data-accent="pink"] .faq-spotlight__icon {
  background: var(--tn-color-pink-soft);
}
.faq-spotlight__card[data-accent="teal"] .faq-spotlight__icon {
  background: var(--tn-color-teal-soft);
}
.faq-spotlight__card[data-accent="yellow"] .faq-spotlight__icon {
  background: var(--tn-color-yellow-soft);
}
.faq-spotlight__question {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--tn-text-default);
}
.faq-spotlight__preview {
  margin: 0;
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tn-text-muted);
}
.faq-spotlight__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--tn-space-2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tn-accent-primary-strong);
}
.faq-spotlight__cta .material-symbols-outlined {
  font-size: 16px;
  transition: transform var(--tn-transition);
}
.faq-spotlight__card:hover .faq-spotlight__cta .material-symbols-outlined,
.faq-spotlight__card:focus-visible .faq-spotlight__cta .material-symbols-outlined {
  transform: translateX(2px);
}
.faq-body {
  display: grid;
  grid-template-columns: var(--faq-rail-width) minmax(0, 1fr);
  gap: var(--tn-space-10);
  align-items: start;
}
@media (max-width: 1024px) {
  .faq-body {
    grid-template-columns: 1fr;
    gap: var(--tn-space-6);
  }
}
.faq-rail {
  position: sticky;
  top: calc(var(--tn-shell-header-height) + var(--tn-space-4));
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
}
@media (max-width: 1024px) {
  .faq-rail {
    position: static;
  }
}
.faq-rail__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-text-soft);
}
.faq-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
@media (max-width: 1024px) {
  .faq-rail__list {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--tn-space-2);
    margin: 0 calc(var(--faq-gutter) * -1);
    padding-left: var(--faq-gutter);
    padding-right: var(--faq-gutter);
  }
  .faq-rail__list::-webkit-scrollbar {
    display: none;
  }
}
.faq-rail__chip {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--tn-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tn-text-default);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  cursor: pointer;
  text-align: left;
  transition: transform var(--tn-transition),
        background var(--tn-transition),
        box-shadow var(--tn-transition);
}
@media (max-width: 1024px) {
  .faq-rail__chip {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }
}
.faq-rail__chip:hover,
.faq-rail__chip:focus-visible {
  background: var(--tn-surface-panel-muted);
  box-shadow: var(--tn-shadow-sm);
  transform: translate(-1px, -1px);
}
.faq-rail__chip.is-active {
  background: var(--tn-accent-primary-soft);
  border-color: var(--tn-border-default);
  box-shadow: var(--tn-shadow-sm);
}
.faq-rail__sticker {
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-teal);
  transform: rotate(2deg);
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
@media (max-width: 1024px) {
  .faq-rail__sticker {
    transform: none;
  }
}
.faq-rail__sticker-eyebrow {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--tn-text-default);
}
.faq-rail__sticker-body {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--tn-text-muted);
}
.faq-rail__sticker .faq-route-chip {
  align-self: flex-start;
  margin-top: var(--tn-space-2);
}
.faq-accordion-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-8);
}
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-8);
}
.faq-group {
  display: flex;
  flex-direction: column;
}
.faq-group__title {
  margin: 0 0 var(--tn-space-2) 0;
  padding-bottom: var(--tn-space-2);
  font-family: var(--tn-font-headline);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tn-accent-primary-strong);
  border-bottom: 2px solid var(--tn-border-muted);
}
.faq-accordion__item {
  border-bottom: 2px solid var(--tn-border-muted);
}
.faq-accordion__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
  padding: var(--tn-space-5) 0;
  font-family: var(--tn-font-headline);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--tn-text-default);
  cursor: pointer;
  list-style: none;
  transition: color var(--tn-transition);
}
.faq-accordion__item summary::-webkit-details-marker {
  display: none;
}
.faq-accordion__item summary:hover {
  color: var(--tn-accent-primary-strong);
}
.faq-accordion__question {
  flex: 1;
  line-height: 1.4;
}
.faq-accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  transition: background var(--tn-transition),
        transform var(--tn-transition);
}
.faq-accordion__icon::before,
.faq-accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--tn-color-ink);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-accordion__icon::before {
  width: 12px;
  height: 2px;
}
.faq-accordion__icon::after {
  width: 2px;
  height: 12px;
}
.faq-accordion__item[open] .faq-accordion__icon {
  background: var(--tn-color-yellow);
}
.faq-accordion__item[open] .faq-accordion__icon::after {
  transform: scaleY(0);
}
.faq-accordion__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-accordion__item[open] .faq-accordion__answer-wrap {
  grid-template-rows: 1fr;
}
.faq-accordion__answer {
  overflow: hidden;
  min-height: 0;
}
.faq-accordion__answer p {
  margin: 0 0 var(--tn-space-4) 0;
  padding-right: var(--tn-space-8);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--tn-text-muted);
}
@media (max-width: 768px) {
  .faq-accordion__answer p {
    padding-right: 0;
  }
}
.faq-accordion__item summary:focus-visible {
  outline: 3px solid var(--tn-accent-primary);
  outline-offset: 4px;
  border-radius: var(--tn-radius-sm);
}
.faq-accordion__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-3);
  padding: var(--tn-space-3) 0 var(--tn-space-5);
}
.faq-accordion__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 2px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  color: var(--tn-text-muted);
  font-family: var(--tn-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tn-transition),
        border-color var(--tn-transition),
        color var(--tn-transition);
}
.faq-accordion__copy:hover,
.faq-accordion__copy:focus-visible {
  background: var(--tn-surface-panel-muted);
  border-color: var(--tn-border-default);
  color: var(--tn-text-default);
}
.faq-accordion__copy .material-symbols-outlined {
  font-size: 14px;
}
.faq-accordion__feedback {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
}
.faq-accordion__feedback-label {
  font-size: 0.78rem;
  color: var(--tn-text-soft);
  font-weight: 500;
}
.faq-accordion__feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 2px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  color: var(--tn-text-muted);
  font-family: var(--tn-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tn-transition),
        color var(--tn-transition),
        border-color var(--tn-transition);
}
.faq-accordion__feedback-btn:hover,
.faq-accordion__feedback-btn:focus-visible {
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  border-color: var(--tn-border-default);
}
.faq-accordion__feedback-btn .material-symbols-outlined {
  font-size: 14px;
}
.faq-accordion__feedback-btn[data-faq-feedback="up"].is-selected {
  background: var(--tn-color-teal-soft);
  border-color: var(--tn-border-default);
  color: var(--tn-text-default);
}
.faq-accordion__feedback-btn[data-faq-feedback="down"].is-selected {
  background: var(--tn-color-yellow-soft);
  border-color: var(--tn-border-default);
  color: var(--tn-text-default);
}
.faq-accordion__feedback-btn[disabled] {
  cursor: default;
  opacity: 0.7;
}
.faq-accordion__feedback-btn[disabled]:not(.is-selected) {
  opacity: 0.45;
}
.faq-accordion__item[hidden],
.faq-group[hidden] {
  display: none;
}
.faq-accordion__empty {
  padding: var(--tn-space-8);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-component);
  text-align: center;
}
.faq-accordion__empty-title {
  margin: 0 0 var(--tn-space-2) 0;
  font-family: var(--tn-font-headline);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--tn-text-default);
}
.faq-accordion__empty-body {
  margin: 0;
  font-size: 0.92rem;
  color: var(--tn-text-muted);
  line-height: 1.6;
}
.faq-accordion__empty-body a {
  color: var(--tn-accent-primary-strong);
  font-weight: 700;
}
.faq-accordion__item.is-spotlighted summary {
  color: var(--tn-accent-primary-strong);
}
.faq-accordion__item.is-spotlighted .faq-accordion__icon {
  background: var(--tn-color-pink-soft);
}
.faq-support-strip__header {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  margin-bottom: var(--tn-space-6);
}
.faq-support-strip__sticker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 12px;
  background: var(--tn-color-yellow);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-component);
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
  transform: rotate(-2deg);
}
.faq-support-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-6);
}
@media (max-width: 1023px) {
  .faq-support-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .faq-support-strip__grid {
    grid-template-columns: 1fr;
  }
}
.faq-support-card {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-component);
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition);
}
.faq-support-card[data-accent="purple"] {
  background: var(--tn-color-cream);
}
.faq-support-card[data-accent="teal"] {
  background: var(--tn-color-cream-strong);
}
.faq-support-card:hover,
.faq-support-card:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--tn-border-strong);
}
.faq-support-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--tn-space-2);
  border: 2px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-pink-soft);
  color: var(--tn-color-ink);
  transform: rotate(-2deg);
}
.faq-support-card[data-accent="purple"] .faq-support-card__icon {
  background: var(--tn-color-purple-soft);
}
.faq-support-card[data-accent="teal"] .faq-support-card__icon {
  background: var(--tn-color-teal-soft);
}
.faq-support-card__icon .material-symbols-outlined {
  font-size: 28px;
}
.faq-support-card__eyebrow {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-accent-primary-strong);
}
.faq-support-card__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--tn-text-default);
}
.faq-support-card__body {
  margin: 0;
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--tn-text-muted);
}
.faq-support-card .faq-route-chip {
  align-self: flex-start;
  margin-top: var(--tn-space-2);
}
.faq-toast {
  position: fixed;
  left: 50%;
  bottom: var(--tn-space-8);
  transform: translateX(-50%) translateY(8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--tn-color-ink);
  color: var(--tn-color-paper);
  border-radius: var(--tn-radius-pill);
  font-family: var(--tn-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--tn-shadow-floating);
  opacity: 0;
  transition: opacity 0.2s ease,
        transform 0.2s ease;
  z-index: 100;
  pointer-events: none;
}
.faq-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.faq-toast .material-symbols-outlined {
  font-size: 18px;
  color: var(--tn-color-teal-soft);
}
@media (prefers-reduced-motion: reduce) {
  .faq-search,
    .faq-route-chip,
    .faq-spotlight__card,
    .faq-spotlight__cta .material-symbols-outlined,
    .faq-rail__chip,
    .faq-accordion__item summary,
    .faq-accordion__answer-wrap,
    .faq-accordion__icon,
    .faq-accordion__icon::before,
    .faq-accordion__icon::after,
    .faq-accordion__copy,
    .faq-accordion__feedback-btn,
    .faq-support-card,
    .faq-toast {
    transition: none;
  }
  .faq-spotlight__card:hover,
    .faq-spotlight__card:focus-visible,
    .faq-rail__chip:hover,
    .faq-rail__chip:focus-visible,
    .faq-route-chip:hover,
    .faq-route-chip:focus-visible,
    .faq-support-card:hover,
    .faq-support-card:focus-within {
    transform: none;
  }
}
.legal-page {
  --legal-gutter: var(--tn-page-gutter);
  --legal-content-max: var(--tn-page-max-width);
  --legal-rail-width: clamp(240px, 22vw, 280px);
  --legal-stack-gap: var(--tn-space-12);
  --legal-progress: 0%;
  position: relative;
}
.legal-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.legal-progress::before {
  content: "";
  display: block;
  width: var(--legal-progress, 0%);
  height: 100%;
  background: linear-gradient(
        90deg,
        var(--tn-color-pink),
        var(--tn-color-yellow),
        var(--tn-color-teal)
    );
  transition: width 0.08s linear;
}
@media (prefers-reduced-motion: reduce) {
  .legal-progress::before {
    transition: none;
  }
}
.legal-hero {
  position: relative;
  padding: var(--tn-space-10) 0 var(--tn-space-10);
  border-bottom: var(--tn-border-heavy);
  background: var(--tn-surface-panel);
  overflow: hidden;
}
.legal-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--legal-content-max);
  margin: 0 auto;
  padding: 0 var(--legal-gutter);
  display: grid;
  gap: var(--tn-space-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .legal-hero__inner {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: end;
  }
}
.legal-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-5);
  min-width: 0;
}
.legal-hero__sticker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 14px;
  background: var(--tn-color-yellow);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-sm);
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
  transform: rotate(-3deg);
  margin: 0;
}
.legal-hero__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.85rem, 5vw, 2.85rem);
  font-weight: 900;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-tight);
  color: var(--tn-text-default);
}
.legal-hero__lead {
  margin: 0;
  max-width: 60ch;
  font-size: var(--tn-font-size-lg);
  line-height: var(--tn-leading-body);
  color: var(--tn-text-muted);
}
.legal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2) var(--tn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-hero__meta li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-xs);
  color: var(--tn-text-muted);
}
.legal-hero__meta li strong {
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-text-default);
}
.legal-kpi {
  display: grid;
  gap: var(--tn-space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-kpi li {
  display: grid;
  gap: 4px;
  padding: var(--tn-space-3) var(--tn-space-4);
  background: var(--tn-surface-canvas);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-sm);
}
.legal-kpi strong {
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 800;
  color: var(--tn-text-default);
}
.legal-kpi span {
  font-size: var(--tn-font-size-xs);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.legal-hero__routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
}
.legal-route-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--tn-surface-canvas);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-sm);
  font-family: var(--tn-font-headline);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tn-text-default);
  text-decoration: none;
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition);
}
.legal-route-chip:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--tn-shadow-md);
}
.legal-route-chip--primary {
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
}
.legal-route-chip .material-symbols-outlined {
  font-size: 18px;
}
.legal-hero__side {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
  min-width: 0;
}
.legal-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-hero__pills a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--tn-surface-canvas);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  font-family: var(--tn-font-headline);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tn-text-default);
  text-decoration: none;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.legal-hero__pills a:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--tn-shadow-sm);
}
.legal-hero__aside {
  padding: var(--tn-space-4);
  background: var(--tn-surface-canvas);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-sm);
}
.legal-hero__aside-eyebrow {
  margin: 0 0 4px;
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tn-color-purple);
}
.legal-hero__aside p {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.legal-hero__decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: var(--tn-border-heavy);
  opacity: 0.7;
}
.legal-hero__decor--a {
  top: var(--tn-space-6);
  right: clamp(-32px, 4vw, 80px);
  width: clamp(80px, 11vw, 130px);
  height: clamp(80px, 11vw, 130px);
  background: var(--tn-color-yellow-soft);
  border-radius: 50%;
  transform: rotate(8deg);
}
.legal-hero__decor--b {
  bottom: var(--tn-space-6);
  right: clamp(80px, 18vw, 220px);
  width: clamp(48px, 7vw, 76px);
  height: clamp(48px, 7vw, 76px);
  background: var(--tn-color-purple-soft);
  border-radius: var(--tn-radius-md);
  transform: rotate(-12deg);
}
@media (max-width: 1024px) {
  .legal-hero__decor {
    display: none;
  }
}
.feedback-banner {
  max-width: var(--legal-content-max);
  margin: var(--tn-space-6) auto 0;
  padding: var(--tn-space-4) var(--legal-gutter);
  display: flex;
  align-items: flex-start;
  gap: var(--tn-space-4);
  background: var(--tn-accent-success, var(--tn-accent-primary));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-accent-success, var(--tn-accent-primary)) 12%, var(--tn-surface-panel-muted));
  }
  border: 1px solid var(--tn-accent-success, var(--tn-accent-primary));
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--tn-accent-success, var(--tn-accent-primary)) 40%, transparent);
  }
  border-radius: var(--tn-radius-lg);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-soft, 0 4px 16px rgba(0, 0, 0, 0.06));
}
.feedback-banner__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--tn-accent-success, var(--tn-accent-primary));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-accent-success, var(--tn-accent-primary)) 22%, transparent);
  }
  color: var(--tn-accent-success, var(--tn-accent-primary));
}
.feedback-banner__icon .material-symbols-outlined {
  font-size: 22px;
}
.feedback-banner__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
}
.feedback-banner__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tn-text-default);
}
.feedback-banner__message {
  margin: 0;
  font-size: 0.9rem;
  color: var(--tn-text-soft);
  line-height: 1.5;
}
.feedback-banner__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-1);
  padding: var(--tn-space-2) var(--tn-space-4);
  border-radius: 999px;
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-default);
  color: var(--tn-text-default);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.feedback-banner__action:hover,
.feedback-banner__action:focus-visible {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-accent-primary);
  transform: translateY(-1px);
}
.feedback-banner__action:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.feedback-banner__action .material-symbols-outlined {
  font-size: 18px;
}
@media (max-width: 640px) {
  .feedback-banner {
    flex-wrap: wrap;
  }
  .feedback-banner__action {
    width: 100%;
    justify-content: center;
  }
}
html.dark .feedback-banner {
  background: var(--tn-accent-success, var(--tn-accent-primary));
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-accent-success, var(--tn-accent-primary)) 18%, var(--tn-surface-panel));
  }
  border-color: var(--tn-accent-success, var(--tn-accent-primary));
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--tn-accent-success, var(--tn-accent-primary)) 50%, transparent);
  }
}
.legal-glance {
  max-width: var(--legal-content-max);
  margin: 0 auto;
  padding: var(--tn-space-10) var(--legal-gutter) 0;
}
.legal-glance__heading {
  display: flex;
  align-items: baseline;
  gap: var(--tn-space-3);
  margin: 0 0 var(--tn-space-5);
}
.legal-glance__heading--with-dismiss {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.legal-glance__heading-text {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-1);
  min-width: 0;
  flex: 1 1 auto;
}
.legal-glance__dismiss {
  flex: 0 0 auto;
  align-self: flex-start;
}
.legal-glance__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xl);
  font-weight: 800;
  color: var(--tn-text-default);
  letter-spacing: var(--tn-tracking-heading);
}
.legal-glance__sub {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
}
.legal-glance__grid {
  display: grid;
  gap: var(--tn-space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-glance__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition);
}
.legal-glance__card:hover,
.legal-glance__card:focus-visible {
  transform: translate(-2px, -2px);
}
.legal-glance__card[data-accent="yellow"] {
  background: var(--tn-color-yellow-soft);
}
.legal-glance__card[data-accent="yellow"]:hover,
.legal-glance__card[data-accent="yellow"]:focus-visible {
  box-shadow: var(--tn-shadow-yellow);
}
.legal-glance__card[data-accent="pink"] {
  background: var(--tn-color-pink-soft);
}
.legal-glance__card[data-accent="pink"]:hover,
.legal-glance__card[data-accent="pink"]:focus-visible {
  box-shadow: var(--tn-shadow-pink);
}
.legal-glance__card[data-accent="teal"] {
  background: var(--tn-color-teal-soft);
}
.legal-glance__card[data-accent="teal"]:hover,
.legal-glance__card[data-accent="teal"]:focus-visible {
  box-shadow: var(--tn-shadow-teal);
}
.legal-glance__card[data-accent="purple"] {
  background: var(--tn-color-purple-soft);
}
.legal-glance__card[data-accent="purple"]:hover,
.legal-glance__card[data-accent="purple"]:focus-visible {
  box-shadow: var(--tn-shadow-purple);
}
.legal-glance__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--tn-surface-canvas);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-color-ink);
}
.legal-glance__icon .material-symbols-outlined {
  font-size: 22px;
}
.legal-glance__eyebrow {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
}
.legal-glance__heading-row {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
}
.legal-glance__card-title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tn-color-ink);
  letter-spacing: -0.01em;
}
.legal-glance__body {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-color-ink-soft, var(--tn-text-default));
  line-height: var(--tn-leading-body);
}
.legal-shell {
  max-width: var(--legal-content-max);
  margin: 0 auto;
  padding: var(--tn-space-10) var(--legal-gutter) var(--tn-space-16);
  display: grid;
  gap: var(--tn-space-10);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .legal-shell {
    grid-template-columns: var(--legal-rail-width) minmax(0, 1fr);
    align-items: start;
  }
}
.legal-rail {
  position: relative;
}
@media (min-width: 1024px) {
  .legal-rail {
    position: sticky;
    top: var(--tn-space-6);
    align-self: start;
    max-height: calc(100vh - var(--tn-space-12));
    overflow: auto;
  }
}
.legal-rail__title {
  margin: 0 0 var(--tn-space-3);
  font-family: var(--tn-font-headline);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-text-default);
}
.legal-rail__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin: 0 0 var(--tn-space-4);
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  .legal-rail__list {
    display: grid;
    gap: 2px;
    grid-template-columns: 1fr;
  }
}
.legal-rail__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding: 10px 12px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--tn-radius-md);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  color: var(--tn-text-muted);
  text-decoration: none;
  transition: background var(--tn-transition),
        color var(--tn-transition),
        border-color var(--tn-transition);
}
.legal-rail__link::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 2px solid var(--tn-border-strong);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--tn-transition), transform var(--tn-transition);
}
.legal-rail__link:hover {
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
}
.legal-rail__link.is-active {
  background: var(--tn-color-yellow-soft);
  border-color: var(--tn-border-strong);
  color: var(--tn-text-default);
  font-weight: 800;
}
.legal-rail__link.is-active::before {
  background: var(--tn-color-ink);
  border-radius: 2px;
  transform: rotate(45deg);
}
@media (max-width: 1023.98px) {
  .legal-rail__link {
    background: var(--tn-surface-panel);
    border: 2px solid var(--tn-border-strong);
    border-radius: var(--tn-radius-pill);
    padding: 6px 12px;
    box-shadow: var(--tn-shadow-sm);
  }
  .legal-rail__link::before {
    display: none;
  }
  .legal-rail__link.is-active {
    background: var(--tn-color-yellow);
    color: var(--tn-color-ink);
  }
}
.legal-rail__sticker {
  padding: var(--tn-space-4);
  background: var(--tn-color-pink-soft);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-pink);
  transform: rotate(-1deg);
}
@media (max-width: 1023.98px) {
  .legal-rail__sticker {
    display: none;
  }
}
.legal-rail__sticker-eyebrow {
  margin: 0 0 4px;
  font-family: var(--tn-font-headline);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
}
.legal-rail__sticker-body {
  margin: 0 0 var(--tn-space-2);
  font-size: var(--tn-font-size-sm);
  color: var(--tn-color-ink);
  line-height: var(--tn-leading-body);
}
.legal-stream {
  display: grid;
  gap: var(--legal-stack-gap);
  min-width: 0;
}
.legal-section {
  position: relative;
  padding: var(--tn-space-6);
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-sm);
  scroll-margin-top: var(--tn-space-6);
}
.legal-section__header {
  display: grid;
  gap: var(--tn-space-2);
  margin: 0 0 var(--tn-space-4);
}
.legal-section__title-row {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  flex-wrap: wrap;
}
.legal-section__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: var(--tn-tracking-heading);
  color: var(--tn-text-default);
}
.legal-section__copylink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--tn-surface-canvas);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-muted);
  cursor: pointer;
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition),
        color var(--tn-transition);
}
.legal-section__copylink:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-text-default);
}
.legal-section__copylink .material-symbols-outlined {
  font-size: 18px;
}
.legal-section__tldr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tn-space-3);
  align-items: start;
  margin: var(--tn-space-2) 0 var(--tn-space-4);
  padding: var(--tn-space-3) var(--tn-space-4);
  background: var(--tn-color-yellow-soft);
  border-left: 4px solid var(--tn-color-yellow);
  border-radius: var(--tn-radius-md);
}
.legal-section__tldr-label {
  align-self: center;
  font-family: var(--tn-font-headline);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tn-color-ink);
  background: var(--tn-color-yellow);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  padding: 2px 10px;
  box-shadow: var(--tn-shadow-sm);
  white-space: nowrap;
}
.legal-section__tldr-text {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-color-ink);
  line-height: var(--tn-leading-body);
}
.legal-section__body {
  display: grid;
  gap: var(--tn-space-3);
}
.legal-section__body p {
  margin: 0;
  font-size: var(--tn-font-size-base);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.legal-section__body p strong {
  color: var(--tn-text-default);
}
.legal-section__body a {
  color: var(--tn-text-default);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-section__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--tn-space-3);
  align-items: start;
  margin-top: var(--tn-space-3);
  padding: var(--tn-space-3) var(--tn-space-4);
  background: var(--tn-color-teal-soft);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: var(--tn-shadow-sm);
}
.legal-section__note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--tn-surface-canvas);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-md);
  color: var(--tn-color-ink);
}
.legal-section__note-icon .material-symbols-outlined {
  font-size: 20px;
}
.legal-section__note-text,
.legal-section__note .legal-section__note-text,
p.legal-section__note-text {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-color-ink);
  line-height: var(--tn-leading-body);
}
.legal-section__note-text strong {
  font-family: var(--tn-font-headline);
  font-weight: 800;
  color: var(--tn-color-ink);
}
.legal-section__cards {
  display: grid;
  gap: var(--tn-space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: var(--tn-space-3) 0 0;
  padding: 0;
  list-style: none;
}
.legal-card {
  display: grid;
  gap: var(--tn-space-2);
  padding: var(--tn-space-4);
  background: var(--tn-surface-canvas);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-sm);
}
.legal-card[data-accent="pink"] {
  box-shadow: var(--tn-shadow-pink);
}
.legal-card[data-accent="teal"] {
  box-shadow: var(--tn-shadow-teal);
}
.legal-card[data-accent="yellow"] {
  box-shadow: var(--tn-shadow-yellow);
}
.legal-card[data-accent="purple"] {
  box-shadow: var(--tn-shadow-purple);
}
.legal-card__eyebrow {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-text-soft);
}
.legal-card__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1rem;
  font-weight: 800;
  color: var(--tn-text-default);
  letter-spacing: -0.01em;
}
.legal-card__body {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.legal-faq__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin: var(--tn-space-3) 0 var(--tn-space-4);
  padding: 0;
  list-style: none;
}
.legal-faq__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--tn-surface-canvas);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  font-family: var(--tn-font-headline);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tn-text-default);
  cursor: pointer;
  transition: background var(--tn-transition), color var(--tn-transition);
}
.legal-faq__chip[aria-pressed="true"] {
  background: var(--tn-color-yellow);
  box-shadow: var(--tn-shadow-sm);
}
.legal-faq__spotlight {
  display: grid;
  gap: var(--tn-space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 0 0 var(--tn-space-5);
  padding: 0;
  list-style: none;
}
.legal-faq__spotlight-card {
  display: grid;
  gap: var(--tn-space-2);
  padding: var(--tn-space-4);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.legal-faq__spotlight-card[data-accent="pink"]:hover,
.legal-faq__spotlight-card[data-accent="pink"]:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-pink);
}
.legal-faq__spotlight-card[data-accent="teal"]:hover,
.legal-faq__spotlight-card[data-accent="teal"]:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-teal);
}
.legal-faq__spotlight-card[data-accent="yellow"]:hover,
.legal-faq__spotlight-card[data-accent="yellow"]:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-yellow);
}
.legal-faq__spotlight-card[data-accent="purple"]:hover,
.legal-faq__spotlight-card[data-accent="purple"]:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-purple);
}
.legal-faq__spotlight-eyebrow {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-text-soft);
}
.legal-faq__spotlight-question {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1rem;
  font-weight: 800;
  color: var(--tn-text-default);
  line-height: var(--tn-leading-heading);
}
.legal-faq__spotlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--tn-space-1);
  font-family: var(--tn-font-headline);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tn-text-default);
}
.legal-faq__spotlight-cta .material-symbols-outlined {
  font-size: 16px;
}
.legal-faq__list {
  display: grid;
  gap: var(--tn-space-3);
}
.legal-faq__item {
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-sm);
  overflow: hidden;
  transition: transform var(--tn-transition),
        box-shadow var(--tn-transition),
        background var(--tn-transition);
  scroll-margin-top: var(--tn-space-6);
}
.legal-faq__item:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
}
.legal-faq__item[open] {
  background: var(--tn-surface-elevated);
  box-shadow: var(--tn-shadow-md);
}
.legal-faq__item.is-hidden,
.legal-faq__item[hidden] {
  display: none;
}
.legal-faq__item.is-spotlighted {
  box-shadow: var(--tn-shadow-yellow);
}
.legal-faq__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--tn-space-3);
  padding: var(--tn-space-4) var(--tn-space-5);
  cursor: pointer;
  font-family: var(--tn-font-headline);
  list-style: none;
}
.legal-faq__summary::-webkit-details-marker {
  display: none;
}
.legal-faq__summary::marker {
  content: "";
}
.legal-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 10px;
  border-radius: var(--tn-radius-pill);
  font-family: var(--tn-font-headline);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--tn-color-yellow-soft);
  color: var(--tn-color-ink);
  border: 2px solid var(--tn-border-strong);
}
.legal-faq__eyebrow--usage {
  background: var(--tn-color-teal-soft);
}
.legal-faq__eyebrow--limits {
  background: var(--tn-color-pink-soft);
}
.legal-faq__eyebrow--availability {
  background: var(--tn-color-yellow-soft);
}
.legal-faq__eyebrow--legal {
  background: var(--tn-color-purple-soft);
}
.legal-faq__eyebrow--essential {
  background: var(--tn-color-pink-soft);
}
.legal-faq__eyebrow--optional {
  background: var(--tn-color-teal-soft);
}
.legal-faq__eyebrow--control {
  background: var(--tn-color-purple-soft);
}
.legal-faq__question {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-base);
  font-weight: 700;
  line-height: var(--tn-leading-heading);
}
.legal-faq__toggle {
  position: relative;
  width: 22px;
  height: 22px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-canvas);
}
.legal-faq__toggle::before,
.legal-faq__toggle::after {
  content: "";
  position: absolute;
  inset: 50% 4px auto 4px;
  height: 2px;
  margin-top: -1px;
  background: var(--tn-text-default);
  transition: transform var(--tn-transition), opacity var(--tn-transition);
}
.legal-faq__toggle::after {
  transform: rotate(90deg);
}
.legal-faq__item[open] .legal-faq__toggle::after {
  transform: rotate(0);
  opacity: 0;
}
.legal-faq__panel {
  padding: 0 var(--tn-space-5) var(--tn-space-5);
}
.legal-faq__panel p {
  margin: 0;
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.legal-faq__panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin-top: var(--tn-space-3);
}
.legal-routes {
  max-width: var(--legal-content-max);
  margin: 0 auto;
  padding: 0 var(--legal-gutter) var(--tn-space-16);
}
.legal-routes__heading {
  margin: 0 0 var(--tn-space-4);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-xl);
  font-weight: 800;
  color: var(--tn-text-default);
  letter-spacing: var(--tn-tracking-heading);
}
.legal-routes__grid {
  display: grid;
  gap: var(--tn-space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-route-card {
  display: grid;
  gap: var(--tn-space-2);
  padding: var(--tn-space-5);
  background: var(--tn-surface-panel);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-2xl);
  box-shadow: var(--tn-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition);
}
.legal-route-card[data-accent="pink"]:hover,
.legal-route-card[data-accent="pink"]:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-pink);
}
.legal-route-card[data-accent="teal"]:hover,
.legal-route-card[data-accent="teal"]:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-teal);
}
.legal-route-card[data-accent="purple"]:hover,
.legal-route-card[data-accent="purple"]:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-purple);
}
.legal-route-card__eyebrow {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-text-soft);
}
.legal-route-card__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tn-text-default);
}
.legal-route-card__body {
  margin: 0;
  font-size: var(--tn-font-size-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.legal-route-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--tn-space-1);
  font-family: var(--tn-font-headline);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tn-text-default);
}
.legal-route-card__cta .material-symbols-outlined {
  font-size: 16px;
}
.legal-toast {
  position: fixed;
  left: 50%;
  bottom: var(--tn-space-6);
  transform: translateX(-50%) translateY(8px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--tn-color-ink);
  color: var(--tn-color-paper);
  border-radius: var(--tn-radius-pill);
  box-shadow: var(--tn-shadow-floating);
  font-family: var(--tn-font-headline);
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.legal-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .legal-toast {
    transition: none;
  }
}
.legal-form-fieldset {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.legal-form-field__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tn-space-2);
  margin-bottom: var(--tn-space-1);
}
.legal-form-field__counter {
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tn-text-muted);
  white-space: nowrap;
}
.legal-route-chip:focus-visible,
.legal-rail__link:focus-visible,
.legal-section__copylink:focus-visible,
.legal-faq__chip:focus-visible,
.legal-faq__spotlight-card:focus-visible,
.legal-route-card:focus-visible,
.legal-glance__card:focus-visible {
  outline: 3px solid var(--tn-accent-focus);
  outline-offset: 3px;
}
@media print {
  .legal-progress,
    .legal-rail,
    .legal-hero__decor,
    .legal-section__copylink,
    .legal-toast,
    .legal-faq__filters,
    .legal-faq__spotlight {
    display: none;
  }
  .legal-shell {
    grid-template-columns: 1fr;
    padding-top: var(--tn-space-6);
  }
  .legal-section,
    .legal-faq__item {
    box-shadow: none;
    break-inside: avoid;
  }
  .legal-faq__item[open] .legal-faq__panel,
    .legal-faq__item .legal-faq__panel {
    display: block;
  }
}
body.page-static {
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
}
.static-page {
  width: min(100%, var(--tn-shell-max-width));
  margin-inline: auto;
  padding: var(--tn-space-8) var(--tn-space-6) var(--tn-space-12);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
}
.legal-page {
  display: grid;
  gap: var(--tn-space-6);
}
.sp-header {
  position: relative;
  display: grid;
  gap: var(--tn-space-6);
  padding: var(--tn-space-8);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-3xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-md);
  overflow: hidden;
}
.sp-header--split {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  align-items: start;
}
.sp-header__glow {
  position: absolute;
  top: var(--tn-space-8);
  right: clamp(-40px, 4vw, 80px);
  display: block;
  width: clamp(80px, 12vw, 140px);
  height: clamp(80px, 12vw, 140px);
  border: var(--tn-border-heavy);
  border-radius: 50%;
  background: var(--tn-color-pink-soft);
  opacity: 0.65;
  pointer-events: none;
  transform: rotate(8deg);
}
.sp-header__body,
.sp-header__side {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--tn-space-4);
  min-width: 0;
}
.sp-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--tn-space-3);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-yellow);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-color-ink);
  font-size: var(--tn-font-size-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.sp-header__title {
  max-width: 760px;
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: clamp(1.85rem, 5vw, 2.85rem);
  font-weight: 900;
  letter-spacing: var(--tn-tracking-heading);
  line-height: var(--tn-leading-tight);
}
.sp-header__lead {
  max-width: 78ch;
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-base);
  line-height: var(--tn-leading-body);
}
.sp-header__pills,
.sp-choice-row,
.sp-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-3);
  align-items: center;
}
.sp-pill,
.sp-choice-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: var(--tn-space-4);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 800;
  text-decoration: none;
  transition: background var(--tn-transition), box-shadow var(--tn-transition), transform var(--tn-transition);
}
.sp-pill:hover,
.sp-choice-chip:hover {
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  box-shadow: var(--tn-shadow-md);
  transform: translate(-2px, -2px);
}
.sp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tn-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-kpi-strip li {
  display: grid;
  gap: var(--tn-space-2);
  min-width: 0;
  padding: var(--tn-space-4);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-elevated);
  box-shadow: var(--tn-shadow-sm);
}
.sp-kpi-strip strong {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-xl);
  font-weight: 800;
  line-height: var(--tn-leading-heading);
}
.sp-kpi-strip span {
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  line-height: var(--tn-leading-body);
}
.sp-aside {
  display: grid;
  gap: var(--tn-space-3);
  padding: var(--tn-space-5);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-2xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-md);
}
.sp-aside--compact {
  box-shadow: var(--tn-shadow-md);
}
.sp-aside__eyebrow,
.sp-note__eyebrow,
.sp-route-card__eyebrow {
  margin: 0;
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sp-body {
  max-width: 78ch;
  margin: 0;
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-base);
  line-height: var(--tn-leading-body);
}
.sp-body--mt {
  margin-top: var(--tn-space-4);
}
.sp-body a {
  color: var(--tn-accent-primary-strong);
  font-weight: 600;
}
.sp-page-nav {
  position: sticky;
  top: var(--tn-shell-header-height);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  align-items: center;
  padding-block: var(--tn-space-3);
  border-block: 2px solid var(--tn-border-muted);
  background: var(--tn-header-bg);
  backdrop-filter: blur(16px);
}
.sp-page-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-inline: var(--tn-space-3);
  border-bottom: 2px solid transparent;
  color: var(--tn-accent-primary-strong);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--tn-transition), border-color var(--tn-transition);
}
.sp-page-nav a:hover {
  border-color: var(--tn-border-strong);
  color: var(--tn-text-default);
}
.sp-section {
  display: grid;
  gap: var(--tn-space-5);
  padding: var(--tn-space-8) 0;
  border-top: 1px solid var(--tn-border-muted);
}
.sp-section--split {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  gap: var(--tn-space-8);
  align-items: start;
}
.sp-section__header {
  display: grid;
  gap: var(--tn-space-3);
}
.sp-section__title {
  max-width: 760px;
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-2xl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--tn-leading-heading);
}
.sp-note-grid,
.sp-route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--tn-space-4);
}
.sp-note,
.sp-route-card,
.sp-callout {
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-sm);
}
.sp-note,
.sp-route-card {
  display: grid;
  gap: var(--tn-space-3);
  padding: var(--tn-space-5);
}
.sp-route-card {
  color: inherit;
  text-decoration: none;
  transition: background var(--tn-transition), box-shadow var(--tn-transition), transform var(--tn-transition);
}
.sp-route-card:hover {
  background: var(--tn-surface-panel-muted);
  box-shadow: var(--tn-shadow-md);
  transform: translate(-2px, -2px);
}
.sp-note__title,
.sp-route-card__title {
  margin: 0;
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: var(--tn-font-size-lg);
  font-weight: 800;
  letter-spacing: 0;
  line-height: var(--tn-leading-heading);
}
.sp-list,
.sp-link-list {
  display: grid;
  gap: var(--tn-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-list__item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--tn-space-3);
  align-items: start;
  padding: var(--tn-space-4);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-sm);
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.sp-list__icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-teal-soft);
  color: var(--tn-text-default);
}
.sp-list__icon .material-symbols-outlined {
  font-size: var(--tn-font-size-xl);
  line-height: 1;
}
.sp-list__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-right: var(--tn-space-2);
  padding-inline: var(--tn-space-2);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sp-list__badge--required {
  background: var(--tn-error-soft);
  color: var(--tn-error);
}
.sp-list__badge--optional {
  background: var(--tn-success-soft);
  color: var(--tn-text-default);
}
.sp-list__badge--ops {
  background: var(--tn-warning-soft);
  color: var(--tn-text-default);
}
.sp-link-list li {
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  line-height: var(--tn-leading-body);
}
.sp-link-list a {
  color: var(--tn-accent-primary-strong);
  font-weight: 600;
  text-decoration: none;
}
.sp-link-list a:hover {
  text-decoration: underline;
}
.sp-callout {
  display: grid;
  gap: var(--tn-space-2);
  padding: var(--tn-space-5);
}
.sp-callout--tip {
  background: var(--tn-warning-soft);
}
.sp-callout__label {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sp-callout p {
  margin: 0;
  color: var(--tn-text-muted);
  line-height: var(--tn-leading-body);
}
.sp-pill:focus-visible,
.sp-choice-chip:focus-visible,
.sp-page-nav a:focus-visible,
.sp-route-card:focus-visible,
.sp-body a:focus-visible,
.sp-link-list a:focus-visible {
  outline: 3px solid var(--tn-accent-focus);
  outline-offset: 3px;
}
@media (max-width: 1024px) {
  .sp-header--split,
  .sp-section--split,
  .sp-kpi-strip {
    grid-template-columns: 1fr;
  }
  .sp-page-nav {
    position: static;
  }
}
.sp-faq {
  align-items: start;
}
.sp-faq__main {
  display: grid;
  gap: var(--tn-space-5);
  min-width: 0;
}
.sp-faq__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-faq__list {
  display: grid;
  gap: var(--tn-space-3);
}
.sp-faq__item {
  border: 1px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-surface-panel);
  box-shadow: var(--tn-shadow-sm);
  overflow: hidden;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition), background var(--tn-transition);
}
.sp-faq__item:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--tn-shadow-md);
}
.sp-faq__item[open] {
  background: var(--tn-surface-elevated);
  box-shadow: var(--tn-shadow-md);
}
.sp-faq__item.is-hidden {
  display: none;
}
.sp-faq__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 26px;
  align-items: center;
  gap: var(--tn-space-3);
  padding: var(--tn-space-4) var(--tn-space-5);
  cursor: pointer;
  font-family: var(--tn-font-headline);
  list-style: none;
}
.sp-faq__summary::-webkit-details-marker {
  display: none;
}
.sp-faq__summary::marker {
  display: none;
}
.sp-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-inline: var(--tn-space-2);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-accent-primary-strong);
  font-size: var(--tn-font-size-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sp-faq__eyebrow--sensitive {
  background: var(--tn-accent-primary-soft);
  color: var(--tn-accent-primary-strong);
}
.sp-faq__eyebrow--operational {
  background: var(--tn-success-soft);
  color: var(--tn-color-teal-strong);
}
.sp-faq__eyebrow--review {
  background: var(--tn-done-soft);
  color: var(--tn-color-purple);
}
.sp-faq__eyebrow--info,
.sp-faq__eyebrow--availability,
.sp-faq__eyebrow--optional {
  background: var(--tn-color-yellow-soft);
  color: var(--tn-color-ink);
}
.sp-faq__eyebrow--usage {
  background: var(--tn-success-soft);
  color: var(--tn-color-teal-strong);
}
.sp-faq__eyebrow--limits,
.sp-faq__eyebrow--essential {
  background: var(--tn-accent-primary-soft);
  color: var(--tn-accent-primary-strong);
}
.sp-faq__eyebrow--legal,
.sp-faq__eyebrow--control {
  background: var(--tn-done-soft);
  color: var(--tn-color-purple);
}
.sp-faq__question {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-lg);
  font-weight: 600;
  line-height: var(--tn-leading-heading);
}
.sp-faq__toggle {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-panel);
}
.sp-faq__toggle::before,
.sp-faq__toggle::after {
  content: "";
  position: absolute;
  inset: 50% 4px auto 4px;
  height: 2px;
  margin-top: -1px;
  background: var(--tn-text-default);
  transition: transform var(--tn-transition), opacity var(--tn-transition);
}
.sp-faq__toggle::after {
  transform: rotate(90deg);
}
.sp-faq__item[open] .sp-faq__toggle::before {
  transform: rotate(45deg);
}
.sp-faq__item[open] .sp-faq__toggle::after {
  transform: rotate(0deg);
  opacity: 0;
}
.sp-faq__panel {
  padding: 0 var(--tn-space-5) var(--tn-space-5);
  border-top: 1px dashed var(--tn-border-muted);
  animation: sp-faq-fade var(--tn-transition);
}
.sp-faq__panel p {
  margin: var(--tn-space-4) 0 0;
}
.sp-faq__panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin-top: var(--tn-space-4);
}
@keyframes sp-faq-fade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-faq__item,
  .sp-faq__toggle::before,
  .sp-faq__toggle::after,
  .sp-faq__panel {
    animation: none;
    transition: none;
  }
}
.sp-faq__summary:focus-visible {
  outline: 3px solid var(--tn-accent-focus);
  outline-offset: -3px;
  border-radius: var(--tn-radius-lg);
}
.sp-choice-chip[aria-pressed="true"] {
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
  box-shadow: var(--tn-shadow-sm);
  transform: translate(-1px, -1px);
}
.sp-header__decor {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.sp-header__decor--circle {
  top: -20px;
  right: 12%;
  width: clamp(60px, 10vw, 120px);
  height: clamp(60px, 10vw, 120px);
  border: var(--tn-border-heavy);
  border-radius: 50%;
  background: var(--tn-color-pink-soft);
  transform: rotate(12deg);
}
.sp-header__decor--square {
  bottom: 18%;
  right: 6%;
  width: clamp(40px, 6vw, 80px);
  height: clamp(40px, 6vw, 80px);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-teal-soft);
  transform: rotate(-8deg);
}
.sp-header__decor--ring {
  top: 35%;
  right: 22%;
  width: clamp(30px, 5vw, 60px);
  height: clamp(30px, 5vw, 60px);
  border: 4px solid var(--tn-color-yellow);
  border-radius: 50%;
  background: transparent;
  transform: rotate(20deg);
}
.sp-list__icon--pink {
  background: var(--tn-color-pink-soft);
  color: var(--tn-color-pink-strong);
}
.sp-list__icon--teal {
  background: var(--tn-color-teal-soft);
  color: var(--tn-color-teal-strong);
}
.sp-list__icon--purple {
  background: var(--tn-color-purple-soft);
  color: var(--tn-color-purple);
}
.sp-note[data-accent="pink"] {
  border-color: var(--tn-color-pink);
  box-shadow: var(--tn-shadow-pink);
}
.sp-note[data-accent="teal"] {
  border-color: var(--tn-color-teal);
  box-shadow: var(--tn-shadow-teal);
}
.sp-note[data-accent="yellow"] {
  border-color: var(--tn-color-yellow);
  box-shadow: var(--tn-shadow-yellow);
}
.sp-note[data-accent="purple"] {
  border-color: var(--tn-color-purple);
  box-shadow: var(--tn-shadow-purple);
}
.sp-note__dot {
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--tn-border-strong);
  border-radius: 50%;
  background: var(--tn-accent-primary);
}
.sp-note[data-accent="pink"] .sp-note__dot {
  background: var(--tn-color-pink);
}
.sp-note[data-accent="teal"] .sp-note__dot {
  background: var(--tn-color-teal);
}
.sp-note[data-accent="yellow"] .sp-note__dot {
  background: var(--tn-color-yellow);
}
.sp-section--cta {
  padding: var(--tn-space-10) 0;
  border-top: 2px solid var(--tn-border-muted);
}
.sp-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--tn-space-5);
}
.sp-route-card .sp-route-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-subtle);
  color: var(--tn-accent-primary);
  font-size: var(--tn-font-size-xl);
}
@media (max-width: 768px) {
  .static-page {
    padding-inline: var(--tn-space-4);
  }
  .sp-header {
    padding: var(--tn-space-5);
    border-radius: var(--tn-radius-2xl);
  }
  .sp-pill,
  .sp-choice-chip,
  .sp-page-nav a {
    width: 100%;
    justify-content: flex-start;
  }
  .sp-list__item {
    grid-template-columns: 1fr;
  }
  .sp-faq__summary {
    grid-template-columns: minmax(0, 1fr) 26px;
    row-gap: var(--tn-space-2);
  }
  .sp-faq__eyebrow {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
body[data-shell-surface="auth"] {
  margin: 0;
  min-height: 100svh;
  font-family: var(--tn-font-body), system-ui, sans-serif;
  background: var(--tn-color-paper);
  color: var(--tn-color-ink);
  -webkit-font-smoothing: antialiased;
  --tn-auth-canvas: var(--tn-color-paper);
  --tn-auth-canvas-soft: var(--tn-color-cream);
  --tn-auth-panel: var(--tn-color-paper-warm);
  --tn-auth-input: var(--tn-color-paper);
  --tn-auth-border: rgb(var(--tn-color-ink-rgb) / 0.14);
  --tn-auth-border-strong: rgb(var(--tn-color-ink-rgb) / 0.34);
  --tn-auth-visual-start: var(--tn-color-cream);
  @supports (color: color-mix(in lab, red, red)) {
    --tn-auth-visual-start: color-mix(in srgb, var(--tn-color-cream) 72%, var(--tn-color-teal-soft));
  }
  --tn-auth-visual-end: var(--tn-color-paper);
  @supports (color: color-mix(in lab, red, red)) {
    --tn-auth-visual-end: color-mix(in srgb, var(--tn-color-paper) 58%, var(--tn-color-pink-soft));
  }
  --tn-auth-visual-accent: var(--tn-color-pink);
  @supports (color: color-mix(in lab, red, red)) {
    --tn-auth-visual-accent: color-mix(in srgb, var(--tn-color-pink) 72%, var(--tn-color-teal));
  }
  --tn-surface-canvas: var(--tn-auth-canvas);
  --tn-surface-overlay: var(--tn-auth-input);
  --tn-surface-subtle: var(--tn-auth-canvas-soft);
  --tn-surface-inset: var(--tn-color-cream);
  --tn-surface-panel: var(--tn-auth-input);
  --tn-surface-panel-muted: var(--tn-auth-canvas-soft);
  --tn-surface-elevated: var(--tn-auth-panel);
  --tn-border-default: var(--tn-auth-border);
  --tn-border-muted: rgb(var(--tn-color-ink-rgb) / 0.10);
  --tn-border-subtle: rgb(var(--tn-color-ink-rgb) / 0.10);
  --tn-border-strong: var(--tn-auth-border-strong);
  --tn-text-default: var(--tn-color-ink);
  --tn-text-muted: var(--tn-color-muted);
  --tn-text-soft: var(--tn-color-soft);
  --tn-accent-primary: var(--tn-color-pink);
  --tn-accent-primary-strong: var(--tn-color-pink-strong);
  --tn-focus-ring: rgb(var(--tn-color-pink-rgb) / 0.32);
}
.auth-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100svh;
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
}
.auth-shell *,
.auth-shell *::before,
.auth-shell *::after {
  box-sizing: border-box;
}
.auth-visual {
  display: none;
  background: linear-gradient(135deg, var(--tn-auth-visual-start) 0%, var(--tn-auth-visual-end) 100%);
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(3rem, 8vw, 6rem);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.auth-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--tn-color-ink) 1px, transparent 1px),
        linear-gradient(to bottom, var(--tn-color-ink) 1px, transparent 1px);
  @supports (color: color-mix(in lab, red, red)) {
    background-image: linear-gradient(to right, color-mix(in srgb, var(--tn-color-ink) 9%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--tn-color-ink) 9%, transparent) 1px, transparent 1px);
  }
  background-size: 72px 72px;
  pointer-events: none;
  opacity: 0.42;
}
.auth-visual::after {
  content: "";
  position: absolute;
  inset: auto 14% clamp(2rem, 7vw, 5rem);
  height: 1px;
  background: linear-gradient(
        90deg,
        transparent,
        var(--tn-color-teal),
        var(--tn-auth-visual-accent),
        transparent
    );
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--tn-color-teal) 52%, transparent),
        color-mix(in srgb, var(--tn-auth-visual-accent) 64%, transparent),
        transparent
    );
  }
  pointer-events: none;
}
.auth-visual__content {
  position: relative;
  z-index: 1;
  max-width: 31rem;
  text-align: center;
}
.auth-visual__brand {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1.125rem;
  background: var(--tn-color-paper);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-color-paper) 88%, var(--tn-auth-visual-accent));
  }
  border: 1px solid var(--tn-color-paper);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--tn-color-paper) 68%, transparent);
  }
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.25rem;
  box-shadow: 0 18px 48px var(--tn-color-ink);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 18px 48px color-mix(in srgb, var(--tn-color-ink) 16%, transparent);
  }
}
.auth-visual__brand img {
  width: 40px;
  height: 40px;
  display: block;
}
.auth-visual__heading {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  font-weight: 700;
  color: var(--tn-color-ink);
  letter-spacing: 0;
  margin: 0 0 1.125rem 0;
}
.auth-visual__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tn-color-muted);
  margin: 0 0 2.5rem 0;
}
.auth-visual__avatars {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: var(--tn-color-paper);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-color-paper) 78%, transparent);
  }
  border: 1px solid var(--tn-color-ink);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--tn-color-ink) 12%, transparent);
  }
  border-radius: 999px;
  backdrop-filter: blur(12px);
}
.auth-visual__avatar-stack {
  display: flex;
  margin-right: 0.25rem;
}
.auth-visual__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--tn-color-paper);
  background: var(--tn-auth-visual-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--tn-auth-visual-accent) 72%, var(--tn-color-paper));
  }
  color: var(--tn-color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: -0.5rem;
}
.auth-visual__avatar:first-child {
  margin-left: 0;
}
.auth-visual__caption {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tn-color-muted);
}
.auth-form-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  background: linear-gradient(180deg, var(--tn-color-paper) 0%, var(--tn-color-cream) 100%);
  padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 5vw, 4rem);
  animation: auth-fade-in 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes auth-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.auth-form-wrap {
  width: 100%;
  max-width: 29rem;
}
@media (max-width: 480px) {
  .auth-form-column {
    padding: 1.25rem 1rem;
  }
  body[data-shell-surface="auth"] .auth-form-wrap {
    padding: var(--tn-space-4);
  }
}
.auth-mobile-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 2rem;
}
.auth-mobile-brand img {
  width: 3rem;
  height: 3rem;
  display: block;
}
.auth-heading {
  text-align: center;
  margin-bottom: 1.75rem;
}
.auth-heading__title {
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--tn-text-default);
  letter-spacing: 0;
  margin: 0 0 0.5rem 0;
}
.auth-heading__subtitle {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tn-text-muted);
  margin: 0;
}
.auth-social-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.5rem 0;
}
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 2.75rem;
  padding: 0 1rem;
  border: 1.5px solid var(--tn-border-default);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-social-btn:hover {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px var(--tn-text-default);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--tn-text-default) 8%, transparent);
  }
}
.auth-social-btn:active {
  transform: translateY(0);
}
.auth-social-btn:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.auth-social-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.75rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tn-text-muted);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--tn-border-subtle);
}
.auth-divider::before {
  margin-right: 1.25rem;
}
.auth-divider::after {
  margin-left: 1.25rem;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}
.auth-field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.auth-field__label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--tn-text-default);
  margin: 0;
}
.auth-field__hint-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tn-accent-text);
  text-decoration: none;
  transition: color 150ms ease;
}
.auth-field__hint-link:hover {
  color: var(--tn-accent-primary-strong);
  text-decoration: underline;
}
.auth-field__hint-link:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
.auth-input {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-default);
  border-radius: 0.625rem;
  color: var(--tn-text-default);
  font-size: 1rem;
  font-family: inherit;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-input::placeholder {
  color: var(--tn-text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--tn-text-muted) 72%, transparent);
  }
}
.auth-input:hover {
  border-color: var(--tn-border-strong);
}
.auth-input:focus {
  outline: none;
  border-color: var(--tn-accent-primary);
  box-shadow: 0 0 0 3px var(--tn-focus-ring);
  background: var(--tn-surface-elevated);
}
.auth-input--with-affix {
  padding-right: 3.25rem;
}
.auth-field__affix {
  position: absolute;
  right: 0.625rem;
  top: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--tn-text-muted);
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 150ms ease;
}
.auth-field__affix:hover {
  color: var(--tn-text-default);
  background: var(--tn-surface-inset);
}
.auth-field__affix:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 1px;
}
.auth-field__affix .material-symbols-outlined {
  font-size: 1.25rem;
}
.auth-field__affix-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.auth-field__affix[aria-pressed="false"] .auth-field__affix-icon--hide {
  display: none;
}
.auth-field__affix[aria-pressed="true"] .auth-field__affix-icon--show {
  display: none;
}
.auth-field__error {
  color: var(--tn-error);
  font-size: 0.8125rem;
  margin: 0;
  min-height: 1em;
}
.auth-validation-summary {
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--tn-error);
  border-radius: 0.5rem;
  background: var(--tn-error-soft);
  color: var(--tn-error);
  font-size: 0.875rem;
}
.auth-validation-summary ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}
.auth-validation-summary ul li {
  margin: 0.25rem 0;
}
.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: var(--tn-accent-primary);
  color: var(--tn-color-paper);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.25rem;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px var(--tn-text-default);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--tn-text-default) 8%, transparent);
  }
}
.auth-submit:hover {
  background: var(--tn-accent-primary-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px var(--tn-accent-primary);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--tn-accent-primary) 40%, transparent);
  }
}
.auth-submit:active {
  transform: translateY(0);
}
.auth-submit:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.auth-submit[aria-busy="true"] {
  cursor: wait;
  opacity: 0.8;
}
.auth-submit__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--tn-color-paper);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--tn-color-paper) 50%, transparent);
  }
  border-top-color: var(--tn-color-paper);
  border-radius: 50%;
  animation: auth-spin 600ms linear infinite;
  display: none;
}
.auth-submit[aria-busy="true"] .auth-submit__spinner {
  display: inline-block;
}
.auth-submit[aria-busy="true"] .auth-submit__label {
  opacity: 0.7;
}
@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}
.is-auth-cooldown-active {
  cursor: not-allowed;
  opacity: 0.7;
}
.is-auth-cooldown-active:hover {
  background: inherit;
}
.auth-submit.is-auth-cooldown-active:hover {
  background: var(--tn-accent-primary);
}
.auth-resend {
  margin-top: 1.5rem;
  border: 1.5px solid var(--tn-border-subtle);
  border-radius: 0.5rem;
  background: var(--tn-surface-panel);
  transition: border-color 150ms ease;
}
.auth-resend[open] {
  border-color: var(--tn-border-default);
}
.auth-resend__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  color: var(--tn-text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 150ms ease;
}
.auth-resend__summary::-webkit-details-marker {
  display: none;
}
.auth-resend__summary:hover {
  color: var(--tn-text-default);
}
.auth-resend__summary:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
.auth-resend__cta {
  font-weight: 600;
  color: var(--tn-accent-text);
  transition: color 150ms ease;
}
.auth-resend__summary:hover .auth-resend__cta {
  color: var(--tn-accent-primary-strong);
}
.auth-resend__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--tn-border-subtle);
  margin-top: 0.5rem;
  padding-top: 1rem;
}
.auth-resend__hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--tn-text-muted);
  line-height: 1.5;
}
.auth-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--tn-text-muted);
}
.auth-footer__link {
  font-weight: 600;
  color: var(--tn-accent-text);
  text-decoration: none;
  transition: color 150ms ease;
}
.auth-footer__link:hover {
  color: var(--tn-accent-primary-strong);
  text-decoration: underline;
}
.auth-footer__link:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (min-width: 1024px) {
  .auth-shell {
    grid-template-columns: minmax(30rem, 0.95fr) minmax(32rem, 1.05fr);
  }
  .auth-visual {
    display: flex;
  }
  .auth-mobile-brand {
    display: none;
  }
  .auth-heading {
    text-align: left;
  }
  .auth-form-column {
    padding: clamp(2.5rem, 6vh, 4.5rem) clamp(3rem, 7vw, 6rem);
  }
  .auth-form-wrap {
    max-width: 31rem;
  }
}
@media (min-width: 1280px) {
  .auth-form-wrap {
    max-width: 32rem;
  }
}
.auth-otp-container {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 0.75rem;
}
.auth-otp-box {
  width: 3rem;
  height: 3.5rem;
  text-align: center;
  font-size: 1.375rem;
  font-weight: 600;
  background: var(--tn-surface-panel);
  border: 1.5px solid var(--tn-border-default);
  color: var(--tn-text-default);
  border-radius: 0.5rem;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-otp-box:hover {
  border-color: var(--tn-border-strong);
}
.auth-otp-box:focus {
  outline: none;
  border-color: var(--tn-accent-primary);
  box-shadow: 0 0 0 3px var(--tn-focus-ring);
  background: var(--tn-surface-elevated);
}
.auth-otp-separator {
  color: var(--tn-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0 0.25rem;
}
.auth-banner {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.6;
}
.auth-banner--info {
  background: var(--tn-info-soft);
  border: 1.5px solid var(--tn-info);
  color: var(--tn-text-default);
}
.auth-banner--error {
  background: var(--tn-error-soft);
  border: 1.5px solid var(--tn-error);
  color: var(--tn-text-default);
}
.auth-banner__icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
svg.auth-banner__icon {
  width: 20px;
  height: 20px;
}
.auth-banner--info .auth-banner__icon {
  color: var(--tn-info);
}
.auth-banner--error .auth-banner__icon {
  color: var(--tn-error);
}
.auth-inline-link {
  font-weight: 600;
  color: var(--tn-accent-primary);
  text-decoration: none;
  transition: color 150ms ease;
}
.auth-inline-link:hover {
  color: var(--tn-accent-primary-strong);
  text-decoration: underline;
}
.auth-inline-link--button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}
.auth-inline-link--button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.auth-helper-text {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--tn-text-muted);
  line-height: 1.5;
}
.auth-helper-text + .auth-helper-text {
  margin-top: 0.75rem;
}
.auth-field-row {
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}
.auth-checkbox-inline {
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--tn-border-default);
  border-radius: 0.25rem;
  background: var(--tn-surface-panel);
  cursor: pointer;
  transition: all 150ms ease;
  margin: 0;
}
.auth-checkbox-inline:hover {
  border-color: var(--tn-border-strong);
}
.auth-checkbox-inline:checked {
  background: var(--tn-accent-primary);
  border-color: var(--tn-accent-primary);
}
.auth-checkbox-inline:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.auth-label-inline {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tn-text-default);
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.auth-password-strength {
  margin-top: 0.625rem;
  opacity: 0;
  transition: opacity 200ms ease;
}
.auth-password-strength--visible {
  opacity: 1;
}
.auth-password-strength__track {
  height: 4px;
  background: var(--tn-border-subtle);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.auth-password-strength__bar {
  height: 100%;
  width: 0;
  transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 300ms ease;
  border-radius: 2px;
}
.auth-password-strength__label {
  font-size: 0.8125rem;
  font-weight: 600;
  transition: color 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .auth-form-column {
    animation: none;
  }
  .auth-input,
    .auth-social-btn,
    .auth-submit,
    .auth-field__affix,
    .auth-footer__link,
    .auth-otp-box,
    .auth-inline-link,
    .auth-resend,
    .auth-field__hint-link {
    transition: none;
    transform: none !important;
  }
  .auth-submit__spinner {
    animation-duration: 1200ms;
  }
  .auth-password-strength__bar {
    transition: width 300ms ease;
  }
}
body[data-shell-surface="auth"] {
  background: var(--tn-color-cream);
}
body[data-shell-surface="auth"] .auth-form-wrap {
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-xl);
  background: var(--tn-color-paper);
  box-shadow: 6px 6px 0 var(--tn-color-ink);
  padding: var(--tn-space-6);
}
body[data-shell-surface="auth"] .auth-heading__title {
  color: var(--tn-color-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}
body[data-shell-surface="auth"] .auth-heading__subtitle {
  color: var(--tn-color-ink);
  opacity: 0.75;
}
body[data-shell-surface="auth"] .auth-input {
  border: 2px solid var(--tn-color-ink);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-paper);
  color: var(--tn-color-ink);
  transition: border-color 0.15s ease,
        box-shadow 0.15s ease;
}
body[data-shell-surface="auth"] .auth-input:focus,
body[data-shell-surface="auth"] .auth-input:focus-visible {
  outline: none;
  border-color: var(--tn-color-pink);
  box-shadow: 3px 3px 0 var(--tn-color-pink);
}
body[data-shell-surface="auth"] .auth-submit {
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-pink);
  color: var(--tn-color-ink);
  box-shadow: 4px 4px 0 var(--tn-color-ink);
  font-weight: 800;
  transition: box-shadow 0.15s ease,
        transform 0.15s ease;
}
body[data-shell-surface="auth"] .auth-submit:hover,
body[data-shell-surface="auth"] .auth-submit:focus-visible {
  box-shadow: 2px 2px 0 var(--tn-color-ink);
  transform: translate(2px, 2px);
}
body[data-shell-surface="auth"] .auth-field__hint-link,
body[data-shell-surface="auth"] .auth-resend__cta,
body[data-shell-surface="auth"] .auth-inline-link {
  color: var(--tn-accent-text);
  font-weight: 700;
}
body[data-shell-surface="auth"] .auth-field__hint-link:hover,
body[data-shell-surface="auth"] .auth-field__hint-link:focus-visible,
body[data-shell-surface="auth"] .auth-resend__cta:hover,
body[data-shell-surface="auth"] .auth-inline-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
body[data-shell-surface="auth"] .auth-field__error,
body[data-shell-surface="auth"] .auth-validation-summary {
  color: var(--tn-color-pink);
  font-weight: 600;
}
body[data-shell-surface="auth"] .password-policy-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 4px 2px 0;
  padding: 4px 10px;
  border: 2px solid var(--tn-color-ink);
  border-radius: var(--tn-radius-pill);
  background: var(--tn-color-paper);
  color: var(--tn-color-ink);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  transition: background 0.15s ease,
        color 0.15s ease;
}
body[data-shell-surface="auth"] .password-policy-rule[data-met="true"] {
  background: var(--tn-color-teal);
  color: var(--tn-color-ink);
}
body[data-shell-surface="auth"] .password-policy-rule__icon-met {
  display: none;
}
body[data-shell-surface="auth"] .password-policy-rule[data-met="true"] .password-policy-rule__icon-unmet {
  display: none;
}
body[data-shell-surface="auth"] .password-policy-rule[data-met="true"] .password-policy-rule__icon-met {
  display: inline-block;
}
body[data-shell-surface="auth"] .auth-social-btn,
body[data-shell-surface="auth"] .auth-social__btn,
body[data-shell-surface="auth"] [data-auth-social] {
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-paper);
  color: var(--tn-color-ink);
  box-shadow: 3px 3px 0 var(--tn-color-ink);
  font-weight: 700;
  transition: box-shadow 0.15s ease,
        transform 0.15s ease;
}
body[data-shell-surface="auth"] .auth-social-btn:hover,
body[data-shell-surface="auth"] .auth-social__btn:hover,
body[data-shell-surface="auth"] [data-auth-social]:hover {
  box-shadow: 1px 1px 0 var(--tn-color-ink);
  transform: translate(2px, 2px);
}
body[data-shell-surface="auth"] .auth-otp-input,
body[data-shell-surface="auth"] .auth-recovery-input,
body[data-shell-surface="auth"] [data-auth-otp],
body[data-shell-surface="auth"] [data-auth-recovery],
body[data-shell-surface="auth"] .auth-input[autocomplete="one-time-code"],
body[data-shell-surface="auth"] .auth-input[inputmode="numeric"] {
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-lg);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-yellow-soft);
  color: var(--tn-color-ink);
  box-shadow: 3px 3px 0 var(--tn-color-ink);
}
body[data-shell-surface="auth"] [data-auth-success="verify-email"] {
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-lg);
  background: var(--tn-color-paper);
  box-shadow: 4px 4px 0 var(--tn-color-ink);
  padding: var(--tn-space-5);
  position: relative;
  overflow: hidden;
}
body[data-shell-surface="auth"] [data-auth-success="verify-email"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--tn-color-teal);
}
body[data-shell-surface="auth"] [data-auth-cta="access-denied"],
body[data-shell-surface="auth"] .auth-access-denied__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--tn-space-2) var(--tn-space-5);
  border: var(--tn-border-heavy);
  border-radius: var(--tn-radius-md);
  background: var(--tn-color-yellow);
  color: var(--tn-color-ink);
  box-shadow: 4px 4px 0 var(--tn-color-ink);
  font-weight: 800;
  text-decoration: none;
  transition: box-shadow 0.15s ease,
        transform 0.15s ease;
}
body[data-shell-surface="auth"] [data-auth-cta="access-denied"]:hover,
body[data-shell-surface="auth"] .auth-access-denied__cta:hover {
  box-shadow: 1px 1px 0 var(--tn-color-ink);
  transform: translate(3px, 3px);
}
body {
  font-family: "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
  background: var(--tn-surface-panel-muted);
  color: var(--tn-text-default);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins",
        -apple-system,
        sans-serif;
  font-weight: 700;
  color: var(--tn-text-default);
  letter-spacing: -0.025em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, #e8879f 1.5px, transparent 1.5px),
        radial-gradient(circle, #4db8a8 1px, transparent 1px),
        radial-gradient(circle, #f5d76e 1px, transparent 1px);
  background-size: 80px 80px,
        60px 60px,
        100px 100px;
  background-position: 0 0,
        30px 30px,
        50px 50px;
  opacity: 0.045;
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: inherit;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: "liga" !important;
  font-feature-settings: "liga" !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  font-variation-settings: normal;
  vertical-align: middle;
}
.header-shell,
.footer-shell,
main,
.home-inner,
.home-hero,
.directory-shell,
.tool-design-page {
  position: relative;
}
a {
  color: var(--tn-text-default);
  transition: color 0.15s ease;
}
a:hover {
  color: #e8879f;
}
:focus-visible {
  outline: 3px solid #e8879f;
  outline-offset: 3px;
}
::selection {
  background: #f5b5c4;
  color: var(--tn-text-default);
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--tn-surface-panel-muted);
}
::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 46, 0.3);
  border-radius: 4px;
  border: 2px solid var(--tn-surface-panel-muted);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 26, 46, 0.5);
}
hr {
  border: none;
  border-top: 2px solid rgba(26, 26, 46, 0.12);
  margin: 32px 0;
}
code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.875em;
  padding: 2px 6px;
  background: #f9e5a0;
  border: 2px solid var(--tn-border-default);
  border-radius: 4px;
  color: var(--tn-text-default);
}
kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8em;
  padding: 2px 7px;
  background: var(--tn-surface-panel);
  border: 2px solid var(--tn-border-default);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
}
.home-cat-chip {
  border: var(--tn-border-heavy);
  border-radius: 50px;
  background: var(--tn-surface-panel);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease;
}
.home-cat-chip:hover {
  background: #f5b5c4;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--tn-border-strong);
}
.home-cat-chip__count {
  background: #f5d76e;
  border: 2px solid var(--tn-border-default);
  border-radius: 50px;
  color: var(--tn-text-default);
  font-weight: 700;
}
.home-search-chip {
  border: 2px solid var(--tn-border-default);
  border-radius: 50px;
  background: var(--tn-surface-panel);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease;
}
.home-search-chip:hover {
  background: #f5b5c4;
  transform: translate(2px, 2px);
  box-shadow: none;
}
.home-hero__cta-primary,
.home-cta-band__btn {
  background: #e8879f;
  color: var(--tn-text-default);
  border: var(--tn-border-heavy);
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 4px 4px 0 var(--tn-border-strong);
  transition: transform 0.15s ease,
        box-shadow 0.15s ease;
  padding: 12px 28px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.home-hero__cta-primary:hover,
.home-cta-band__btn:hover {
  background: #c8607f;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
}
.home-hero__cta-ghost {
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  border: var(--tn-border-heavy);
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 4px 4px 0 #4db8a8;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease;
  padding: 12px 28px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.home-hero__cta-ghost:hover {
  background: #7fcfc3;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #4db8a8;
}
.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border: 2px solid var(--tn-border-default);
  border-radius: 50px;
  background: #f5d76e;
  color: var(--tn-text-default);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--tn-border-strong);
}
.home-hero__title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--tn-text-default);
}
.home-hero__sub {
  color: var(--tn-text-soft);
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
}
.home-hero__signal-value {
  color: var(--tn-text-default);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
}
.home-hero__signal-label {
  color: var(--tn-text-soft);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
}
.home-workflow-item {
  border: var(--tn-border-heavy);
  border-radius: 16px;
  background: var(--tn-surface-panel);
  box-shadow: 4px 4px 0 var(--tn-border-strong);
  transition: transform 0.2s ease,
        box-shadow 0.2s ease;
  padding: 24px;
}
.home-workflow-item:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--tn-border-strong);
}
.home-workflow-item__title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--tn-text-default);
}
.home-category-hub__link {
  border: var(--tn-border-heavy);
  border-radius: 16px;
  background: var(--tn-surface-panel);
  box-shadow: 4px 4px 0 var(--tn-border-strong);
  transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}
.home-category-hub__link:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 var(--tn-border-strong);
  background: #f5b5c4;
}
.home-category-hub__name {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--tn-text-default);
}
.home-cta-band {
  background: var(--tn-color-ink);
  color: var(--tn-text-inverse);
}
.home-cta-band__title {
  color: var(--tn-text-inverse);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
}
.home-cta-band__sub {
  color: rgba(255, 254, 247, 0.75);
}
.home-cta-band__list li {
  color: rgba(255, 254, 247, 0.85);
}
.home-cta-band__list li::before {
  color: #f5d76e;
}
.home-step {
  border: var(--tn-border-heavy);
  border-radius: 16px;
  background: var(--tn-surface-panel);
  box-shadow: 4px 4px 0 var(--tn-border-strong);
  transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}
.home-step:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 var(--tn-border-strong);
}
.home-step__num {
  background: #f5d76e;
  color: var(--tn-text-default);
  border: 2px solid var(--tn-border-default);
  font-family: "Poppins", sans-serif;
  font-weight: 800;
}
.seo-faq-item {
  border: var(--tn-border-heavy);
  border-radius: 12px;
  background: var(--tn-surface-panel);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
  margin-bottom: 12px;
  transition: box-shadow 0.15s ease;
}
.seo-faq-item:hover {
  box-shadow: 5px 5px 0 var(--tn-border-strong);
}
.seo-faq-item summary {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--tn-text-default);
  padding: 16px 20px;
}
.directory-pagination__link {
  border: var(--tn-border-heavy);
  border-radius: 10px;
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  box-shadow: 3px 3px 0 var(--tn-border-strong);
  transition: transform 0.15s ease,
        box-shadow 0.15s ease;
}
.directory-pagination__link:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
  border-color: var(--tn-border-default);
}
.directory-pagination__link--active {
  background: #e8879f;
  border-color: var(--tn-border-default);
  color: var(--tn-text-default);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
}
.directory-hero__inner {
  border: var(--tn-border-heavy);
  border-radius: 20px;
  background: var(--tn-surface-panel);
  box-shadow: 6px 6px 0 var(--tn-border-strong);
}
.directory-hero__inner:focus-within {
  border-color: var(--tn-border-default);
  box-shadow: 4px 4px 0 #e8879f;
}
.directory-hero__title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: var(--tn-text-default);
  letter-spacing: -0.04em;
}
.directory-hero__count {
  background: #f5b5c4;
  color: var(--tn-text-default);
  border: 2px solid var(--tn-border-default);
  border-radius: 50px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--tn-border-strong);
}
.directory-hero__subtitle {
  color: var(--tn-text-soft);
  font-family: "Poppins", sans-serif;
}
.directory-guide__item {
  border: var(--tn-border-heavy);
  border-radius: 14px;
  background: var(--tn-surface-panel);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
  transition: transform 0.15s ease,
        box-shadow 0.15s ease;
}
.directory-guide__item:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--tn-border-strong);
}
.directory-guide__item-name {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--tn-text-default);
}
.directory-chip {
  background: #f5b5c4;
  color: var(--tn-text-default);
  border: 2px solid var(--tn-border-default);
  border-radius: 50px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  box-shadow: 2px 2px 0 var(--tn-border-strong);
}
.tool-page-header {
  background: var(--tn-surface-panel-muted);
  border-bottom: 3px solid var(--tn-border-default);
}
.tool-page-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: var(--tn-text-default);
  letter-spacing: -0.03em;
}
.tool-page-status-badge {
  background: #7fcfc3;
  color: var(--tn-text-default);
  border: 2px solid var(--tn-border-default);
  border-radius: 50px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--tn-border-strong);
}
.tool-page-status-dot {
  background: #4db8a8;
}
.tool-page-description {
  color: var(--tn-text-soft);
  font-family: "Poppins", sans-serif;
}
.breadcrumb-shell__link {
  color: var(--tn-text-soft);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.breadcrumb-shell__link:hover {
  color: #e8879f;
}
.breadcrumb-shell__current {
  color: var(--tn-text-default);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
.sidebar-shell {
  background: var(--tn-surface-panel-muted);
  border-right: 3px solid rgba(26, 26, 46, 0.15);
}
.sidebar-shell__nav-link--active {
  background: #f5b5c4;
  color: var(--tn-text-default);
  font-weight: 700;
  border-left: 3px solid #e8879f;
}
.sidebar-shell__nav-link:hover {
  background: rgba(232, 135, 159, 0.12);
  color: var(--tn-text-default);
}
.home-kbd-row kbd {
  background: #f9e5a0;
  border: 2px solid var(--tn-border-default);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  font-family: "JetBrains Mono", monospace;
  color: var(--tn-text-default);
  font-size: 11px;
}
.page-home .home-hero {
  background: var(--tn-surface-panel);
  border-bottom: 3px solid rgba(26, 26, 46, 0.12);
}
.page-home .home-search-shell {
  border: var(--tn-border-heavy) !important;
  border-radius: 12px !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: 4px 4px 0 #4db8a8 !important;
  transition: box-shadow 0.15s ease !important;
}
.page-home .home-search-shell:focus-within {
  border-color: var(--tn-border-default) !important;
  box-shadow: 4px 4px 0 #e8879f !important;
}
.page-home .home-search-input {
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--tn-text-default) !important;
}
.page-home .home-search-input::placeholder {
  color: #8a8a9a !important;
}
.page-home .home-search-kbd {
  background: var(--tn-surface-panel-muted) !important;
  border: 2px solid rgba(26, 26, 46, 0.3) !important;
  border-radius: 4px !important;
  font-family: "JetBrains Mono", monospace !important;
  color: var(--tn-text-soft) !important;
  box-shadow: 1px 1px 0 rgba(26, 26, 46, 0.15) !important;
}
.page-home .home-search-chip {
  height: auto !important;
  padding: 4px 12px !important;
  background: var(--tn-surface-panel) !important;
  border: 2px solid var(--tn-border-default) !important;
  border-radius: 50px !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
  color: var(--tn-text-default) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease !important;
}
.page-home .home-search-chip:hover {
  background: #f5b5c4 !important;
  border-color: var(--tn-border-default) !important;
  color: var(--tn-text-default) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}
.page-home .home-cat-chip {
  height: auto !important;
  padding: 4px 10px !important;
  background: var(--tn-surface-panel) !important;
  border: 2px solid var(--tn-border-default) !important;
  border-radius: 50px !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
  color: var(--tn-text-default) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease !important;
}
.page-home .home-cat-chip:hover {
  background: #f5b5c4 !important;
  color: var(--tn-text-default) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
  border-color: var(--tn-border-default) !important;
}
.page-home .home-cat-chip__count {
  background: #f5d76e !important;
  border: 1px solid var(--tn-border-default) !important;
  color: var(--tn-text-default) !important;
  font-weight: 700 !important;
}
.page-home .home-cat-chip--all {
  background: #e8879f !important;
  border-color: var(--tn-border-default) !important;
  color: var(--tn-text-default) !important;
  font-weight: 700 !important;
}
.page-home .home-cat-chip--all:hover {
  background: #c8607f !important;
  border-color: var(--tn-border-default) !important;
}
.page-home .seo-faq-item {
  border: var(--tn-border-heavy) !important;
  border-radius: 12px !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: 3px 3px 0 var(--tn-border-strong) !important;
  margin-bottom: 12px !important;
}
.page-home .seo-faq-item:hover {
  box-shadow: 5px 5px 0 var(--tn-border-strong) !important;
}
.page-home .seo-faq-item summary {
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--tn-text-default) !important;
  padding: 16px 20px !important;
}
.page-home .seo-faq-item summary::after {
  color: #e8879f !important;
  font-weight: 700 !important;
}
.page-home .seo-faq-item > div {
  padding: 0 20px 16px !important;
}
.page-home .seo-faq-item > div p {
  color: var(--tn-text-soft) !important;
  font-family: "Poppins", sans-serif !important;
  line-height: 1.7 !important;
}
.page-home .home-cta-band {
  background: var(--tn-color-ink) !important;
  border-top: 3px solid var(--tn-border-default) !important;
  border-bottom: 3px solid var(--tn-border-default) !important;
}
.page-home .section-title {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  color: var(--tn-text-default) !important;
  letter-spacing: -0.025em !important;
}
.page-home .section-subtitle {
  font-family: "Poppins", sans-serif !important;
  color: var(--tn-text-soft) !important;
}
.page-home .home-search-link {
  color: #e8879f !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
}
.page-home .home-search-link:hover {
  color: #c8607f !important;
  text-decoration: underline !important;
}
.page-home .home-cat-strip {
  border-top: 2px solid rgba(26, 26, 46, 0.12) !important;
}
.page-home .home-cat-strip__label {
  font-family: "Poppins", sans-serif !important;
  color: #8a8a9a !important;
  font-weight: 700 !important;
}
.page-home .home-search-tip {
  color: #8a8a9a !important;
  font-family: "Poppins", sans-serif !important;
}
.page-home .home-search-tip kbd {
  background: #f9e5a0 !important;
  border: 2px solid var(--tn-border-default) !important;
  border-radius: 4px !important;
  box-shadow: 1px 1px 0 var(--tn-border-strong) !important;
  color: var(--tn-text-default) !important;
}
.page-home .home-hero__title {
  font-family: "Poppins", sans-serif !important;
  font-weight: 800 !important;
  color: var(--tn-text-default) !important;
  letter-spacing: -0.04em !important;
}
.page-home .home-hero__sub {
  font-family: "Poppins", sans-serif !important;
  color: var(--tn-text-soft) !important;
}
.page-home .home-hero__route-note {
  font-family: "Poppins", sans-serif !important;
  color: #8a8a9a !important;
}
.page-home .home-hero__route-note a {
  color: #e8879f !important;
}
.page-home .home-hero__route-note a:hover {
  color: #c8607f !important;
}
.tool-section__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  margin-bottom: 10px !important;
  background: #f5d76e !important;
  border: 2px solid var(--tn-border-default) !important;
  border-radius: 50px !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--tn-text-default) !important;
}
.home-section-heading {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 32px !important;
}
.home-section-heading--compact {
  margin-bottom: 24px !important;
}
.tool-section__header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
}
.tool-section__header-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.tool-section__actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
.tool-section__count {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  background: #f5b5c4 !important;
  border: 2px solid var(--tn-border-default) !important;
  border-radius: 50px !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--tn-text-default) !important;
  white-space: nowrap !important;
}
.home-tool-section {
  padding: 56px 0 !important;
  border-top: 3px solid rgba(26, 26, 46, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
}
.home-steps-section {
  padding: 56px 0 !important;
  border-top: 3px solid rgba(26, 26, 46, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
}
.home-faq-section {
  padding: 56px 0 !important;
  border-top: 3px solid rgba(26, 26, 46, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
}
.home-operate-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}
@media (max-width: 768px) {
  .home-operate-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
.home-operate-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
.home-workflows {
  border-top: 3px solid rgba(26, 26, 46, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
}
.home-category-nav {
  border-top: 3px solid rgba(26, 26, 46, 0.1) !important;
  position: relative !important;
  z-index: 1 !important;
}
.home-cta-band {
  border-top: 3px solid var(--tn-border-default) !important;
  border-bottom: 3px solid var(--tn-border-default) !important;
  position: relative !important;
  z-index: 1 !important;
}
.home-cta-band__list li {
  border-top: 1px solid rgba(255, 254, 247, 0.15) !important;
  padding-top: 10px !important;
}
.seo-faq {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.directory-results {
  border-top: 3px solid rgba(26, 26, 46, 0.1) !important;
  padding-block: 40px !important;
}
.directory-guide {
  border-top: 3px solid rgba(26, 26, 46, 0.1) !important;
  background: var(--tn-surface-panel-muted) !important;
  padding-block: 48px !important;
}
.directory-guide__title {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--tn-text-default) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
}
.home-search-shell__icon {
  color: var(--tn-text-soft) !important;
  stroke: #6b6b7b !important;
  flex-shrink: 0 !important;
}
.tool-section__header--home {
  margin-bottom: 24px !important;
}
.home-page {
  position: relative !important;
  z-index: 1 !important;
}
.tool-directory-status,
.directory-status {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: #f5b5c4 !important;
  border: var(--tn-border-heavy) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--tn-border-strong) !important;
  margin-top: 16px !important;
}
.tool-directory-status__count,
.directory-status__count,
.directory-results__count {
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tn-text-default) !important;
}
.directory-results__context {
  font-family: "Poppins", sans-serif !important;
  font-size: 12px !important;
  color: var(--tn-text-soft) !important;
}
.directory-results__header {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
  margin-bottom: 20px !important;
}
.tool-directory-control {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.tool-directory-control > span,
.tool-directory-control label > span {
  font-family: "Poppins", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8a8a9a !important;
}
.tool-directory-control select {
  border: var(--tn-border-heavy) !important;
  border-radius: 10px !important;
  background: var(--tn-surface-panel) !important;
  color: var(--tn-text-default) !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 3px 3px 0 var(--tn-border-strong) !important;
  padding: 8px 32px 8px 12px !important;
  min-width: 130px !important;
  transition: box-shadow 0.15s ease !important;
  cursor: pointer !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%231a1a2e'%3E%3Cpath d='M12.78 6.22a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.28a.75.75 0 0 1 1.06-1.06L8 9.94l3.72-3.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}
.tool-directory-control select:focus {
  outline: none !important;
  box-shadow: 3px 3px 0 #e8879f !important;
}
.tool-directory-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border: var(--tn-border-heavy) !important;
  border-radius: 10px !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: 3px 3px 0 var(--tn-border-strong) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease !important;
}
.tool-directory-toggle:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--tn-border-strong) !important;
}
.tool-directory-toggle span {
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tn-text-default) !important;
}
.tool-directory-toggle input[type="checkbox"] {
  accent-color: #e8879f !important;
  width: 16px !important;
  height: 16px !important;
}
.tool-directory-toggle--disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
}
.tool-directory-toggle--disabled:hover {
  transform: none !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
}
.tool-directory-toggle--disabled input[type="checkbox"] {
  cursor: not-allowed !important;
}
.tool-directory-toggle__count {
  margin-left: 4px !important;
  font-variant-numeric: tabular-nums !important;
  color: #6a6a7a !important;
  font-weight: 600 !important;
}
.tool-directory-toggle--disabled .tool-directory-toggle__count {
  color: #9a9aaa !important;
}
.tool-directory-clear--secondary {
  font-weight: 500 !important;
}
.home-search-filters,
.tool-directory-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 10px !important;
  margin-top: 8px !important;
}
.home-search-filter-note {
  font-family: "Poppins", sans-serif !important;
  font-size: 11px !important;
  color: #8a8a9a !important;
  margin: 4px 0 0 !important;
  line-height: 1.5 !important;
}
.home-workflow-list {
  gap: 16px !important;
}
.home-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .home-steps {
    grid-template-columns: 1fr !important;
  }
}
.home-kbd-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.home-kbd-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.home-kbd-row dt {
  flex-shrink: 0 !important;
}
.home-category-hub__meta {
  font-family: "Poppins", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8a8a9a !important;
}
.home-category-hub__summary {
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--tn-text-soft) !important;
}
.home-cta-band__btn {
  background: #e8879f !important;
  color: var(--tn-text-default) !important;
  border: 3px solid rgba(255, 254, 247, 0.5) !important;
  border-radius: 12px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  box-shadow: 4px 4px 0 rgba(255, 254, 247, 0.3) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease !important;
}
.home-cta-band__btn:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.3) !important;
  color: var(--tn-text-default) !important;
}
.home-cta-band .home-hero__cta-ghost {
  background: transparent !important;
  color: rgba(255, 254, 247, 0.85) !important;
  border-color: rgba(255, 254, 247, 0.4) !important;
  box-shadow: 4px 4px 0 rgba(255, 254, 247, 0.2) !important;
}
.home-cta-band .home-hero__cta-ghost:hover {
  background: rgba(255, 254, 247, 0.1) !important;
  color: var(--tn-text-inverse) !important;
}
.home-cta-band__title {
  color: var(--tn-text-inverse) !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}
.home-cta-band__sub {
  color: rgba(255, 254, 247, 0.75) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}
.directory-hero {
  background: var(--tn-surface-panel-muted) !important;
}
.home-workflow-item {
  border: var(--tn-border-heavy) !important;
  border-top: 3px solid var(--tn-border-default) !important;
  border-radius: 16px !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: 4px 4px 0 var(--tn-border-strong) !important;
  padding: 22px !important;
  transition: transform 0.2s ease,
        box-shadow 0.2s ease !important;
  text-decoration: none !important;
  display: grid !important;
  gap: 10px !important;
}
.home-workflow-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 6px 6px 0 var(--tn-border-strong) !important;
  color: var(--tn-text-default) !important;
}
.home-cat-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 0 0 !important;
  border-top: 2px solid rgba(26, 26, 46, 0.1) !important;
}
.home-cat-strip__label {
  font-family: "Poppins", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8a8a9a !important;
  margin-right: 4px !important;
  white-space: nowrap !important;
}
.home-search-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}
.home-search-popular {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
}
.home-search-tip {
  font-family: "Poppins", sans-serif !important;
  font-size: 11px !important;
  color: #8a8a9a !important;
  margin: 0 !important;
}
.home-search-tip kbd {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  padding: 1px 5px !important;
  background: #f9e5a0 !important;
  border: 2px solid var(--tn-border-default) !important;
  border-radius: 4px !important;
  box-shadow: 1px 1px 0 var(--tn-border-strong) !important;
  color: var(--tn-text-default) !important;
}
.home-search-link {
  font-family: "Poppins", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #e8879f !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.home-search-link:hover {
  color: #c8607f !important;
  text-decoration: underline !important;
}
.home-search-kbd {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 2px 7px !important;
  background: #f9e5a0 !important;
  border: 2px solid var(--tn-border-default) !important;
  border-radius: 4px !important;
  box-shadow: 1px 1px 0 var(--tn-border-strong) !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--tn-text-default) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}
.home-search-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.home-hero__route-note a {
  color: #e8879f !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.home-hero__route-note a:hover {
  color: #c8607f !important;
  text-decoration: underline !important;
}
.tool-directory-empty {
  border: 3px dashed rgba(26, 26, 46, 0.25) !important;
  border-radius: 16px !important;
  background: var(--tn-surface-panel-muted) !important;
  padding: 36px !important;
  text-align: center !important;
}
.tool-directory-empty__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 16px !important;
}
.home-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.home-search-hub {
  width: 100% !important;
}
html.dark .tool-section__eyebrow {
  background: rgba(245, 215, 110, 0.2) !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5d76e !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.1) !important;
}
html.dark .tool-section__count {
  background: rgba(245, 181, 196, 0.18) !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5f0e8 !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.1) !important;
}
html.dark .home-tool-section,
html.dark .home-steps-section,
html.dark .home-faq-section,
html.dark .home-workflows,
html.dark .home-category-nav {
  border-top-color: rgba(255, 254, 247, 0.1) !important;
}
html.dark .home-cta-band {
  background: #0e0e1e !important;
  border-top-color: rgba(255, 254, 247, 0.18) !important;
  border-bottom-color: rgba(255, 254, 247, 0.18) !important;
}
html.dark .directory-results,
html.dark .directory-guide {
  border-top-color: var(--tn-border-muted) !important;
}
html.dark .directory-guide {
  background: var(--tn-surface-panel) !important;
}
html.dark .tool-directory-control select {
  background: #282842 !important;
  color: #f5f0e8 !important;
  border-color: rgba(255, 254, 247, 0.32) !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.08) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23f5f0e8'%3E%3Cpath d='M12.78 6.22a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.28a.75.75 0 0 1 1.06-1.06L8 9.94l3.72-3.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E") !important;
}
html.dark .tool-directory-toggle {
  background: #282842 !important;
  border-color: rgba(255, 254, 247, 0.32) !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.08) !important;
}
html.dark .tool-directory-toggle span {
  color: #f5f0e8 !important;
}
html.dark .tool-directory-toggle__count {
  color: rgba(245, 240, 232, 0.62) !important;
}
html.dark .tool-directory-toggle--disabled {
  box-shadow: 1px 1px 0 rgba(255, 254, 247, 0.06) !important;
}
html.dark .tool-directory-toggle--disabled .tool-directory-toggle__count {
  color: rgba(245, 240, 232, 0.4) !important;
}
html.dark .tool-directory-clear {
  background: #282842 !important;
  color: #f5f0e8 !important;
  border-color: rgba(255, 254, 247, 0.32) !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.08) !important;
}
html.dark .tool-directory-clear:hover {
  background: rgba(77, 184, 168, 0.2) !important;
  color: #a8e6dc !important;
}
html.dark .home-hero__search .tool-directory-toolbar {
  border-top-color: rgba(255, 254, 247, 0.18) !important;
}
html.dark .home-workflow-item {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.18) !important;
  box-shadow: 4px 4px 0 rgba(255, 254, 247, 0.1) !important;
}
html.dark .home-cat-strip {
  border-top-color: rgba(255, 254, 247, 0.1) !important;
}
html.dark .home-cat-strip__label {
  color: #8a8480 !important;
}
html.dark .home-search-filter-note,
html.dark .home-search-tip {
  color: #8a8480 !important;
}
html.dark .home-search-kbd,
html.dark .home-search-tip kbd {
  background: rgba(245, 215, 110, 0.15) !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5f0e8 !important;
  box-shadow: 1px 1px 0 rgba(255, 254, 247, 0.1) !important;
}
html.dark .directory-breadcrumbs a {
  color: #b0a89a !important;
}
html.dark .directory-breadcrumbs a:hover {
  color: #f5b5c4 !important;
}
html.dark .directory-breadcrumbs span[aria-current="page"] {
  color: #f5f0e8 !important;
}
html.dark .tool-directory-status,
html.dark .directory-status {
  background: rgba(245, 181, 196, 0.15) !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  box-shadow: 3px 3px 0 rgba(255, 254, 247, 0.1) !important;
}
html.dark .home-operate-grid .home-operate-block .section-title {
  color: #f5f0e8 !important;
}
#text-size-control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  border: 2px solid rgba(26, 26, 46, 0.2) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: 2px 2px 0 rgba(26, 26, 46, 0.12) !important;
}
.header-shell__text-size-control-button {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--tn-text-default) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: "Poppins", sans-serif !important;
  transition: background 0.12s ease !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.header-shell__text-size-control-button:hover {
  background: rgba(232, 135, 159, 0.15) !important;
}
.header-shell__search-wrapper {
  position: relative !important;
}
.header-shell__search-icon {
  display: flex !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 16px !important;
  color: var(--tn-text-soft) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.header-shell__search-mode-chip {
  display: none !important;
}
.header-shell__search-input,
#search-input-main {
  padding-left: 34px !important;
}
.header-shell__search-kbd-hint,
.search-kbd-hint {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 2px 6px !important;
  background: #f9e5a0 !important;
  border: 2px solid var(--tn-border-default) !important;
  border-radius: 4px !important;
  box-shadow: 1px 1px 0 var(--tn-border-strong) !important;
  font-size: 9px !important;
  font-family: "JetBrains Mono", monospace !important;
  font-weight: 700 !important;
  color: var(--tn-text-default) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}
.header-shell__search-input:focus ~ .header-shell__search-kbd-hint,
#search-input-main:focus ~ .search-kbd-hint {
  display: none !important;
}
.header-shell__controls {
  gap: 6px !important;
}
.header-shell__focus-mode-btn .material-symbols-outlined,
.header-shell__theme-toggle .material-symbols-outlined,
.header-shell__settings-btn .material-symbols-outlined {
  color: var(--tn-text-default) !important;
  font-size: 20px !important;
}
.header-shell__focus-mode-btn:hover .material-symbols-outlined,
.header-shell__theme-toggle:hover .material-symbols-outlined,
.header-shell__settings-btn:hover .material-symbols-outlined {
  color: #e8879f !important;
}
.header-shell__account-avatar .material-symbols-outlined {
  color: var(--tn-text-default) !important;
  font-size: 13px !important;
}
.header-shell__account-btn .text-white {
  color: var(--tn-text-default) !important;
}
.header-shell__nav-link--active {
  background: #f5d76e !important;
  color: var(--tn-text-default) !important;
  font-weight: 700 !important;
  border: 2px solid rgba(26, 26, 46, 0.2) !important;
  box-shadow: 2px 2px 0 rgba(26, 26, 46, 0.15) !important;
  border-radius: 12px !important;
}
#search-palette {
  background: var(--tn-surface-panel) !important;
  border: var(--tn-border-heavy) !important;
  border-radius: 14px !important;
  box-shadow: 6px 6px 0 var(--tn-border-strong) !important;
}
.header-shell__palette-results,
.palette-results-wrap {
  background: var(--tn-surface-panel) !important;
}
#palette-results-wrap a,
#palette-results-wrap button,
.header-shell__palette-results a,
.header-shell__palette-results button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  color: var(--tn-text-default) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background: transparent !important;
  width: 100% !important;
  transition: background 0.12s ease,
        border-color 0.12s ease !important;
  cursor: pointer !important;
}
#palette-results-wrap a:hover,
#palette-results-wrap button:hover,
.header-shell__palette-results a:hover,
.header-shell__palette-results button:hover {
  background: rgba(232, 135, 159, 0.1) !important;
  border-color: rgba(26, 26, 46, 0.15) !important;
}
#palette-results-wrap a.focused,
#palette-results-wrap button.focused,
.header-shell__palette-results a.focused,
.header-shell__palette-results button.focused {
  background: #f5b5c4 !important;
  border-color: var(--tn-border-default) !important;
}
.sidebar-nav-btn.active .sidebar-shell__nav-link-icon-fixed,
.sidebar-shell__nav-link--active .sidebar-shell__nav-link-icon-fixed {
  color: #e8879f !important;
}
.sidebar-shell__nav-link:hover .sidebar-shell__nav-link-icon-fixed {
  color: #e8879f !important;
}
.sidebar-shell__brand-title {
  font-family: "Poppins", sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: var(--tn-text-default) !important;
  letter-spacing: -0.02em !important;
}
.sidebar-shell__brand-meta {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  color: var(--tn-text-soft) !important;
}
.sidebar-shell__nav-link-label {
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--tn-text-default) !important;
}
.sidebar-nav-btn.active .sidebar-shell__nav-link-label,
.sidebar-shell__nav-link--active .sidebar-shell__nav-link-label {
  font-weight: 700 !important;
  color: var(--tn-text-default) !important;
}
.sidebar-shell__account-name-fixed,
.sidebar-shell__account-name {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--tn-text-default) !important;
}
.footer-shell__brand-icon .material-symbols-outlined {
  color: #e8879f !important;
  font-size: 24px !important;
}
.footer-shell__partner-card {
  background: var(--tn-surface-panel) !important;
  border: var(--tn-border-heavy) !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 var(--tn-border-strong) !important;
}
.footer-shell__partner-badge {
  background: #f5d76e !important;
  border-left: 2px solid var(--tn-border-default) !important;
  border-bottom: 2px solid var(--tn-border-default) !important;
}
.sticky-footer-ad {
  background: var(--tn-surface-panel) !important;
  border-top: 3px solid var(--tn-border-default) !important;
}
.sticky-footer-ad__link {
  background: #f5b5c4 !important;
  border: var(--tn-border-heavy) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--tn-border-strong) !important;
}
.sticky-footer-ad__close-btn {
  background: var(--tn-surface-panel-muted) !important;
  border: 2px solid var(--tn-border-default) !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
  color: var(--tn-text-default) !important;
}
.footer-shell__bottom-bar {
  border-top: 2px solid rgba(26, 26, 46, 0.12) !important;
  padding-top: 24px !important;
}
html.dark .header-shell {
  background: rgba(26, 26, 46, 0.97) !important;
  border-bottom-color: rgba(255, 254, 247, 0.2) !important;
  box-shadow: 0 3px 0 rgba(255, 254, 247, 0.12) !important;
}
html.dark .header-shell__brand {
  color: #f5f0e8 !important;
}
html.dark .header-shell__nav-link {
  color: #f5f0e8 !important;
}
html.dark .header-shell__nav-link:hover {
  background: rgba(232, 135, 159, 0.15) !important;
  color: #f5b5c4 !important;
}
html.dark .header-shell__nav-link--active {
  background: rgba(245, 215, 110, 0.2) !important;
  color: #f5d76e !important;
  border-color: rgba(245, 215, 110, 0.3) !important;
  box-shadow: none !important;
}
html.dark #text-size-control {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.18) !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.08) !important;
}
html.dark .header-shell__text-size-control-button {
  color: #f5f0e8 !important;
}
html.dark #search-input-main,
html.dark .header-shell__search-input {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5f0e8 !important;
  box-shadow: 3px 3px 0 #4db8a8 !important;
}
html.dark #search-input-main:focus,
html.dark .header-shell__search-input:focus {
  box-shadow: 3px 3px 0 #e8879f !important;
}
html.dark .header-shell__search-icon {
  color: #b0a89a !important;
}
html.dark .header-shell__search-kbd-hint,
html.dark .search-kbd-hint {
  background: rgba(245, 215, 110, 0.2) !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5f0e8 !important;
  box-shadow: 1px 1px 0 rgba(255, 254, 247, 0.12) !important;
}
html.dark .header-shell__focus-mode-btn .material-symbols-outlined,
html.dark .header-shell__theme-toggle .material-symbols-outlined,
html.dark .header-shell__settings-btn .material-symbols-outlined {
  color: #f5f0e8 !important;
}
html.dark .header-shell__focus-mode-btn:hover,
html.dark .header-shell__theme-toggle:hover,
html.dark .header-shell__settings-btn:hover {
  background: rgba(232, 135, 159, 0.15) !important;
}
html.dark .header-shell__account-btn {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.12) !important;
  color: #f5f0e8 !important;
}
html.dark .header-shell__account-name {
  color: #f5f0e8 !important;
}
html.dark #search-palette {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  box-shadow: 6px 6px 0 rgba(255, 254, 247, 0.12) !important;
}
html.dark .header-shell__palette-results,
html.dark .palette-results-wrap {
  background: #22223a !important;
}
html.dark .palette-footer {
  background: #1e1e34 !important;
  border-top-color: rgba(255, 254, 247, 0.1) !important;
  color: #b0a89a !important;
}
html.dark .palette-footer kbd {
  background: rgba(245, 215, 110, 0.15) !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5f0e8 !important;
  box-shadow: 1px 1px 0 rgba(255, 254, 247, 0.1) !important;
}
html.dark .sidebar-shell {
  background: var(--tn-color-ink) !important;
  border-right-color: rgba(255, 254, 247, 0.12) !important;
}
html.dark .sidebar-shell__brand-title {
  color: #f5f0e8 !important;
}
html.dark .sidebar-shell__nav-link {
  color: #f5f0e8 !important;
}
html.dark .sidebar-shell__nav-link:hover {
  background: rgba(232, 135, 159, 0.1) !important;
}
html.dark .sidebar-nav-btn.active,
html.dark .sidebar-shell__nav-link--active {
  background: rgba(245, 181, 196, 0.2) !important;
  border-left-color: #f5b5c4 !important;
}
html.dark .sidebar-shell__search-input,
html.dark .sidebar-shell__search-input-full {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5f0e8 !important;
  box-shadow: 3px 3px 0 #4db8a8 !important;
}
html.dark .sidebar-shell__nav-link-icon,
html.dark .sidebar-shell__nav-link-icon-fixed {
  color: #b0a89a !important;
}
html.dark .sidebar-shell__nav-link-label {
  color: #f5f0e8 !important;
}
html.dark .sidebar-shell__account-name,
html.dark .sidebar-shell__account-name-fixed {
  color: #f5f0e8 !important;
}
html.dark .sidebar-shell__divider-line,
html.dark .sidebar-shell__footer-divider {
  background: rgba(255, 254, 247, 0.1) !important;
}
html.dark .sidebar-shell__group-header {
  color: #8a8480 !important;
}
html.dark .breadcrumb-shell {
  background: var(--tn-color-ink) !important;
  border-bottom-color: rgba(255, 254, 247, 0.1) !important;
}
html.dark .breadcrumb-shell__link {
  color: #b0a89a !important;
}
html.dark .breadcrumb-shell__link:hover {
  color: #f5b5c4 !important;
}
html.dark .breadcrumb-shell__current {
  color: #f5f0e8 !important;
}
html.dark .footer-shell {
  background: var(--tn-color-ink) !important;
  border-top-color: rgba(255, 254, 247, 0.18) !important;
  box-shadow: none !important;
}
html.dark .footer-shell__brand-copy,
html.dark .footer-shell__nav-list,
html.dark .footer-shell__trust-item,
html.dark .footer-shell__copyright,
html.dark .footer-shell__bottom-links {
  color: #b0a89a !important;
}
html.dark .footer-shell__nav-title,
html.dark .footer-shell__brand-icon {
  color: #f5f0e8 !important;
}
html.dark .footer-shell__nav-link:hover {
  color: #f5b5c4 !important;
}
html.dark .footer-shell__bottom-bar {
  border-top-color: rgba(255, 254, 247, 0.1) !important;
}
html.dark .footer-shell__partner-card {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.18) !important;
  box-shadow: 4px 4px 0 rgba(255, 254, 247, 0.1) !important;
}
html.dark .sticky-footer-ad {
  background: var(--tn-color-ink) !important;
  border-top-color: rgba(255, 254, 247, 0.18) !important;
}
html.dark .sticky-footer-ad__link {
  background: rgba(245, 181, 196, 0.18) !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  box-shadow: 3px 3px 0 rgba(255, 254, 247, 0.1) !important;
}
html.dark .sticky-footer-ad__link-title,
html.dark .sticky-footer-ad__link-arrow {
  color: #f5f0e8 !important;
}
html.dark .sticky-footer-ad__close-btn {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.1) !important;
  color: #f5f0e8 !important;
}
body {
  background: var(--tn-surface-panel-muted) !important;
  color: var(--tn-text-default) !important;
  font-family: "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
}
html.dark body {
  background: var(--tn-color-ink) !important;
  color: #f5f0e8 !important;
}
html.dark .tool-workbench-main {
  background: #22223a;
}
html.dark .home-step,
html.dark .home-workflow-item,
html.dark .home-category-hub__link,
html.dark .seo-faq-item,
html.dark .page-home .seo-faq-item,
html.dark .tool-card,
html.dark .card {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  box-shadow: 4px 4px 0 rgba(255, 254, 247, 0.15) !important;
}
html.dark .home-step:hover,
html.dark .home-workflow-item:hover,
html.dark .home-category-hub__link:hover,
html.dark .seo-faq-item:hover,
html.dark .tool-card:hover,
html.dark .card:hover {
  box-shadow: 6px 6px 0 rgba(255, 254, 247, 0.15) !important;
}
html.dark .tool-card__title,
html.dark .home-step__label,
html.dark .home-workflow-item__title,
html.dark .home-category-hub__name,
html.dark .directory-guide__item-name,
html.dark .directory-hero__title,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: #f5f0e8;
}
html.dark .tool-card__description,
html.dark .home-hero__sub,
html.dark .home-step p,
html.dark .home-workflow-item__body,
html.dark .seo-faq-item p,
html.dark .page-home .seo-faq-item p {
  color: #b0a89a !important;
}
html.dark .seo-faq-item summary,
html.dark .page-home .seo-faq-item summary {
  color: #f5f0e8 !important;
}
html.dark .home-step__num {
  background: #f5d76e !important;
  color: var(--tn-color-ink) !important;
  border-color: rgba(255, 254, 247, 0.38) !important;
}
html.dark .home-cat-chip,
html.dark .page-home .home-cat-chip {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5f0e8 !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.12) !important;
}
html.dark .home-search-chip,
html.dark .page-home .home-search-chip {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5f0e8 !important;
  box-shadow: 2px 2px 0 rgba(255, 254, 247, 0.12) !important;
}
html.dark .page-home .home-search-shell {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  box-shadow: 4px 4px 0 rgba(77, 184, 168, 0.25) !important;
}
html.dark .footer-shell {
  background: var(--tn-color-ink);
  border-top-color: rgba(255, 254, 247, 0.18);
}
html.dark .header-shell {
  background: rgba(26, 26, 46, 0.97);
  border-bottom-color: rgba(255, 254, 247, 0.18);
}
html.dark .home-cta-band {
  background: #0e0e1e !important;
}
html.dark .home-hero,
html.dark .page-home .home-hero {
  background: var(--tn-color-ink) !important;
}
html.dark ::-webkit-scrollbar-track {
  background: var(--tn-color-ink);
}
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 254, 247, 0.2);
  border-color: var(--tn-color-ink);
}
.tool-workbench-main {
  background: var(--tn-surface-panel);
}
.status-bar {
  background: var(--tn-surface-panel-muted);
  border-top: 2px solid rgba(26, 26, 46, 0.12);
  color: var(--tn-text-soft);
  font-family: "Poppins", sans-serif;
  font-size: 11px;
}
.home-step {
  border: var(--tn-border-heavy) !important;
  border-radius: 16px !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: 4px 4px 0 var(--tn-border-strong) !important;
  padding: 24px !important;
  transition: transform 0.2s ease,
        box-shadow 0.2s ease !important;
}
.home-step:hover {
  transform: translateY(-4px) !important;
  box-shadow: 6px 6px 0 var(--tn-border-strong) !important;
}
.home-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #f5d76e !important;
  color: var(--tn-text-default) !important;
  border: 2px solid var(--tn-border-default) !important;
  border-radius: 50% !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
  flex-shrink: 0;
}
.home-step__label {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--tn-text-default) !important;
}
.home-step p {
  color: var(--tn-text-soft) !important;
  font-family: "Poppins", sans-serif !important;
  line-height: 1.65 !important;
}
.home-kbd-row {
  border: 2px solid rgba(26, 26, 46, 0.12) !important;
  border-radius: 10px !important;
  background: var(--tn-surface-panel) !important;
  padding: 10px 16px !important;
  transition: background 0.15s ease,
        border-color 0.15s ease !important;
}
.home-kbd-row:hover {
  background: var(--tn-surface-panel-muted) !important;
  border-color: rgba(26, 26, 46, 0.25) !important;
}
.home-kbd-row dd {
  color: var(--tn-text-soft) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
}
.seo-faq-item,
.page-home .seo-faq-item {
  border: var(--tn-border-heavy) !important;
  border-radius: 12px !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: 3px 3px 0 var(--tn-border-strong) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s ease !important;
}
.seo-faq-item:hover,
.page-home .seo-faq-item:hover {
  box-shadow: 5px 5px 0 var(--tn-border-strong) !important;
}
.seo-faq-item summary,
.page-home .seo-faq-item summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  list-style: none !important;
  cursor: pointer !important;
  padding: 18px 22px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--tn-text-default) !important;
  border-bottom: 0 !important;
}
.seo-faq-item summary::-webkit-details-marker,
.page-home .seo-faq-item summary::-webkit-details-marker {
  display: none !important;
}
.seo-faq-item summary::after,
.page-home .seo-faq-item summary::after {
  content: "+" !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #e8879f !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease !important;
  line-height: 1 !important;
}
.seo-faq-item[open] summary::after,
.page-home .seo-faq-item[open] summary::after {
  transform: rotate(45deg) !important;
}
.seo-faq-item p,
.page-home .seo-faq-item > div p,
.page-home .seo-faq-item p {
  padding: 0 22px 18px !important;
  color: var(--tn-text-soft) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(26, 26, 46, 0.1) !important;
  padding-top: 14px !important;
}
.home-workflows,
.home-category-nav,
.home-cta-band,
.home-steps {
  position: relative;
  z-index: 1;
}
.home-workflow-item__meta {
  color: #8a8a9a !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
.home-workflow-item__link {
  color: #e8879f !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.15s ease !important;
}
.home-workflow-item__link:hover {
  color: #c8607f !important;
}
.home-workflow-item__body {
  color: var(--tn-text-soft) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}
body.page-directory .directory-control select,
.page-directory .directory-control select {
  min-height: 48px !important;
  padding: 0 var(--tn-space-4) !important;
  border: var(--tn-border-heavy) !important;
  border-radius: var(--tn-radius-lg) !important;
  background: var(--tn-surface-panel) !important;
  color: var(--tn-text-default) !important;
  font-family: var(--tn-font-body) !important;
  font-size: var(--tn-font-size-sm) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: box-shadow var(--tn-transition), transform var(--tn-transition) !important;
  cursor: pointer !important;
}
body.page-directory .directory-control select:hover,
.page-directory .directory-control select:hover {
  box-shadow: var(--tn-shadow-sm) !important;
}
body.page-directory .directory-control select:focus,
.page-directory .directory-control select:focus {
  outline: 0 !important;
  box-shadow: var(--tn-shadow-focus) !important;
}
body.page-directory .directory-search__shell,
.page-directory .directory-search__shell {
  width: min(100%, 620px) !important;
  min-height: 58px !important;
  padding: 0 !important;
  border: var(--tn-border-heavy) !important;
  border-radius: var(--tn-radius-lg) !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: var(--tn-shadow-teal) !important;
}
body.page-directory .directory-search__shell:focus-within,
.page-directory .directory-search__shell:focus-within {
  box-shadow: var(--tn-shadow-pink) !important;
}
body.page-directory .directory-search__input,
.page-directory .directory-search__input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  padding: 0 var(--tn-space-20) 0 var(--tn-space-12) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tn-text-default) !important;
  font-family: var(--tn-font-body) !important;
  font-size: var(--tn-font-size-sm) !important;
  box-shadow: none !important;
  outline: 0 !important;
}
body.page-directory .directory-search__input:focus,
.page-directory .directory-search__input:focus {
  outline: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 768px) {
  body.page-directory .directory-search__input,
    .page-directory .directory-search__input {
    padding-right: var(--tn-space-4) !important;
  }
}
body.page-directory .directory-hero,
.page-directory .directory-hero {
  background: var(--tn-surface-canvas) !important;
  border-bottom: 0 !important;
}
body.page-directory .directory-guide__step,
.page-directory .directory-guide__step {
  border: 1px solid var(--tn-border-muted) !important;
  border-radius: var(--tn-radius-lg) !important;
  background: var(--tn-surface-panel-muted) !important;
  box-shadow: none !important;
  transition: background var(--tn-transition), box-shadow var(--tn-transition) !important;
}
body.page-directory .directory-guide__step:hover,
.page-directory .directory-guide__step:hover {
  background: var(--tn-surface-elevated) !important;
  box-shadow: var(--tn-shadow-sm) !important;
}
body.page-directory .directory-chip-link,
.page-directory .directory-chip-link {
  border: 1px solid var(--tn-border-muted) !important;
  border-radius: var(--tn-radius-pill) !important;
  background: var(--tn-surface-panel-muted) !important;
  color: var(--tn-text-muted) !important;
  font-family: var(--tn-font-body) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background var(--tn-transition), border-color var(--tn-transition), color var(--tn-transition) !important;
}
body.page-directory .directory-chip-link:hover,
.page-directory .directory-chip-link:hover {
  background: var(--tn-accent-primary-soft) !important;
  border-color: var(--tn-accent-primary) !important;
  color: var(--tn-text-default) !important;
  box-shadow: none !important;
}
.tool-seo {
  background: var(--tn-surface-panel-muted);
  border-top: 3px solid rgba(26, 26, 46, 0.1);
}
.tool-seo h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: var(--tn-text-default);
  letter-spacing: -0.04em;
}
.tool-seo__lead {
  color: var(--tn-text-soft);
  font-family: "Poppins", sans-serif;
}
.tool-seo__cta {
  background: #e8879f;
  color: var(--tn-text-default);
  border: var(--tn-border-heavy);
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--tn-border-strong);
  transition: transform 0.15s ease,
        box-shadow 0.15s ease;
}
.tool-seo__cta:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
}
.tool-seo__cta--secondary {
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  border: var(--tn-border-heavy);
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  box-shadow: 4px 4px 0 #4db8a8;
}
.tool-seo__cta--secondary:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #4db8a8;
}
.tool-seo__card {
  border: var(--tn-border-heavy);
  border-radius: 14px;
  background: var(--tn-surface-panel);
  box-shadow: 4px 4px 0 var(--tn-border-strong);
  padding: 20px;
  transition: transform 0.2s ease,
        box-shadow 0.2s ease;
}
.tool-seo__card:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 var(--tn-border-strong);
}
.tool-seo__card h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--tn-text-default);
  letter-spacing: -0.02em;
}
.qm-related-card {
  border: var(--tn-border-heavy) !important;
  border-radius: 14px !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: 3px 3px 0 var(--tn-border-strong) !important;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease !important;
}
.qm-related-card:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--tn-border-strong) !important;
}
.qm-related-card__name {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  color: var(--tn-text-default) !important;
}
.qm-ad-card {
  border: var(--tn-border-heavy) !important;
  border-radius: 14px !important;
  background: var(--tn-surface-panel) !important;
  box-shadow: 4px 4px 0 #e8879f !important;
}
.qm-ad-cta {
  background: #e8879f !important;
  color: var(--tn-text-default) !important;
  border: var(--tn-border-heavy) !important;
  border-radius: 10px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 3px 3px 0 var(--tn-border-strong) !important;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease !important;
}
.qm-ad-cta:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--tn-border-strong) !important;
}
.qm-run-btn {
  background: #e8879f !important;
  color: var(--tn-text-default) !important;
  border: var(--tn-border-heavy) !important;
  border-radius: 12px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 4px 4px 0 var(--tn-border-strong) !important;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease !important;
}
.qm-run-btn:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
}
.tool-agent-studio .tool-agent-studio__run-btn {
  width: 40px !important;
  max-width: none !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--tn-accent-primary) !important;
  color: var(--tn-text-inverse) !important;
  box-shadow: var(--tn-shadow-md) !important;
  transform: translate(-50%, -50%) !important;
  justify-content: center !important;
}
.tool-agent-studio .tool-agent-studio__run-btn:hover {
  background: var(--tn-accent-primary-strong) !important;
  box-shadow: var(--tn-shadow-lg) !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
}
.tool-agent-studio .tool-agent-studio__run-btn:active {
  transform: translate(-50%, -50%) scale(0.95) !important;
}
.tool-data-studio .tool-data-studio__run-btn {
  width: auto !important;
  max-width: none !important;
  height: 30px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: var(--tn-radius-md) !important;
  background: var(--tn-accent-primary) !important;
  color: var(--tn-text-inverse) !important;
  box-shadow: var(--tn-shadow-md) !important;
  transform: none !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: 11px !important;
}
.tool-data-studio .tool-data-studio__run-btn:hover {
  background: var(--tn-accent-primary-strong) !important;
  box-shadow: var(--tn-shadow-lg) !important;
  transform: translateY(-1px) !important;
}
.tool-data-studio .tool-data-studio__run-btn:active {
  transform: scale(0.97) !important;
}
@media (max-width: 768px) {
  body:has(.tool-agent-studio) #shellSidebar,
    body:has(.tool-data-studio) #shellSidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
  }
  body:has(.tool-agent-studio) .tn-shell__content,
    body:has(.tool-agent-studio) .tn-shell__body,
    body:has(.tool-agent-studio) .tn-shell__main,
    body:has(.tool-data-studio) .tn-shell__content,
    body:has(.tool-data-studio) .tn-shell__body,
    body:has(.tool-data-studio) .tn-shell__main {
    width: 100% !important;
    max-width: 100% !important;
  }
}
.qm-hero__title {
  font-family: "Poppins", sans-serif !important;
  font-weight: 800 !important;
  color: var(--tn-text-default) !important;
  letter-spacing: -0.04em !important;
}
.qm-hero__desc {
  color: var(--tn-text-soft) !important;
  font-family: "Poppins", sans-serif !important;
}
.doc-footer__pill {
  border: var(--tn-border-heavy) !important;
  border-radius: 50px !important;
  background: var(--tn-surface-panel) !important;
  color: var(--tn-text-default) !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  box-shadow: 3px 3px 0 var(--tn-border-strong) !important;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease !important;
}
.doc-footer__pill:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--tn-border-strong) !important;
  background: #f5b5c4 !important;
}
.doc-footer__cta {
  background: #e8879f !important;
  color: var(--tn-text-default) !important;
  border: var(--tn-border-heavy) !important;
  border-radius: 12px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 4px 4px 0 var(--tn-border-strong) !important;
  transition: transform 0.15s ease,
        box-shadow 0.15s ease !important;
}
.doc-footer__cta:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--tn-border-strong) !important;
}
.doc-footer__cta--ghost {
  background: var(--tn-surface-panel) !important;
  color: var(--tn-text-default) !important;
  border: var(--tn-border-heavy) !important;
  box-shadow: 4px 4px 0 #4db8a8 !important;
}
.doc-footer__cta--ghost:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 #4db8a8 !important;
}
a.tool-card .tool-card__title,
.tool-card a .tool-card__title {
  color: var(--tn-text-default);
  text-decoration: none;
}
a.tool-card:hover .tool-card__title,
.tool-card:hover .tool-card__title {
  color: var(--tn-accent-text);
}
a.tool-card .tool-card__description,
.tool-card a .tool-card__description {
  color: var(--tn-text-muted);
  text-decoration: none;
}
html.dark .legal-glance__card[data-accent] .legal-glance__card-title,
html.dark .legal-glance__card[data-accent] .legal-glance__body,
html.dark .home-workflow-card[data-accent] .home-workflow-card__title,
html.dark .home-workflow-card[data-accent] .home-workflow-card__body,
html.dark .faq-support-card[data-accent] .faq-support-card__eyebrow,
html.dark .faq-support-card[data-accent] .faq-support-card__title,
html.dark .faq-support-card[data-accent] .faq-support-card__body,
html.dark .cl-cta__card[data-accent] .cl-cta__eyebrow,
html.dark .cl-cta__card[data-accent] .cl-cta__title,
html.dark .cl-cta__card[data-accent] .cl-cta__body,
html.dark .rm-flow__step[data-accent] .rm-flow__title,
html.dark .rm-flow__step[data-accent] .rm-flow__body,
html.dark .rm-flow[data-accent] .rm-flow__title,
html.dark li[data-accent] > .rm-flow__title {
  color: var(--tn-color-ink) !important;
}
html.dark .legal-glance__card[data-accent] .legal-glance__card-eyebrow,
html.dark .home-workflow-card[data-accent] .home-workflow-card__eyebrow {
  color: #2d2d44 !important;
}
html.dark .tp-partner__label,
html.dark .tp-partner__icon {
  color: var(--tn-text-muted) !important;
}
html.dark .directory-guide__title,
html.dark #directoryGuideTitle,
html.dark #categoryGuideTitle {
  color: var(--tn-text-default) !important;
}
html.dark .directory-pagination__link--edge {
  color: var(--tn-text-default) !important;
}
html.dark .rm-chip--cat,
html.dark .rm-spotlight__body .rm-chip {
  color: var(--tn-color-ink) !important;
}
html.dark body[data-shell-surface="public"] time,
html.dark body[data-user-end-vnext="true"] time {
  color: var(--tn-text-muted) !important;
}
body[data-user-end-vnext="true"] .sp-kicker {
  color: var(--tn-color-ink) !important;
}
html.dark #messageCounter,
html.dark #exportFormat,
html.dark span[data-char-counter] {
  color: var(--tn-text-muted) !important;
}
html.dark .legal-section__note-text,
html.dark .legal-section__note-text strong {
  color: var(--tn-color-ink) !important;
}
html.dark .home-step__label,
html.dark .home-step[data-accent] .home-step__label {
  color: var(--tn-color-ink) !important;
}
html.dark .faq-support-card[data-accent="pink"] .faq-support-card__eyebrow,
html.dark .faq-support-card[data-accent="pink"] .faq-support-card__title,
html.dark .faq-support-card[data-accent="pink"] .faq-support-card__body {
  color: var(--tn-color-ink) !important;
}
html.dark .legal-route-card[data-accent] .legal-route-card__eyebrow {
  color: var(--tn-color-ink) !important;
}
html.dark aside[data-category-panel] .legal-section__note-text {
  color: var(--tn-color-ink) !important;
}
.faq-support-card[data-accent="teal"] .faq-support-card__eyebrow,
.cl-cta__card[data-accent="teal"] .cl-cta__eyebrow,
article[data-accent="teal"] .cl-cta__eyebrow {
  color: var(--tn-color-ink) !important;
}
.directory-submit,
[type="submit"].directory-submit {
  min-height: 48px !important;
  padding: 0 var(--tn-space-5) !important;
  background: var(--tn-accent-primary) !important;
  color: var(--tn-color-ink) !important;
  border: var(--tn-border-heavy) !important;
  border-radius: var(--tn-radius-lg) !important;
  font-family: var(--tn-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--tn-font-size-sm) !important;
  box-shadow: none !important;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition), background var(--tn-transition) !important;
  cursor: pointer !important;
}
.directory-link-button {
  min-height: 48px !important;
  padding: 0 var(--tn-space-5) !important;
  background: var(--tn-surface-panel) !important;
  color: var(--tn-text-default) !important;
  border: var(--tn-border-heavy) !important;
  border-radius: var(--tn-radius-lg) !important;
  font-family: var(--tn-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--tn-font-size-sm) !important;
  box-shadow: none !important;
  transition: transform var(--tn-transition), box-shadow var(--tn-transition), background var(--tn-transition) !important;
}
.directory-submit:hover,
.directory-link-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--tn-shadow-sm) !important;
}
.home-hero,
.page-home .home-hero {
  background: var(--tn-surface-panel-muted) !important;
}
.page-home .home-hero {
  border-bottom: 3px solid rgba(26, 26, 46, 0.1) !important;
}
.section-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--tn-text-default);
  letter-spacing: -0.025em;
}
.section-subtitle {
  color: var(--tn-text-soft);
  font-family: "Poppins", sans-serif;
}
.home-category-nav .home-inner > p,
.home-category-nav > .home-inner > *:first-child {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a8a9a;
}
.home-hero__signal {
  border: 2px solid rgba(26, 26, 46, 0.15);
  border-radius: 12px;
  background: var(--tn-surface-panel);
  padding: 12px 16px;
  box-shadow: 2px 2px 0 rgba(26, 26, 46, 0.1);
}
.tool-card,
.tool-card *,
.home-workflow-item,
.home-category-hub__link,
.home-step,
.directory-guide__item,
.directory-chip-link,
.directory-link-strip__item {
  text-decoration: none;
}
.header-shell__nav-link:hover,
.footer-shell__nav-link:hover,
.breadcrumb-shell__link:hover {
  text-decoration: none;
}
html.dark .page-home .home-hero__title {
  color: #f5f0e8 !important;
}
html.dark .page-home .home-hero__sub,
html.dark .page-home .section-subtitle,
html.dark .page-home .home-search-tip {
  color: #b0a89a !important;
}
html.dark .page-home .home-search-input {
  color: #f5f0e8 !important;
  background: transparent !important;
}
html.dark .page-home .home-search-input::placeholder {
  color: #8a8a9a !important;
}
html.dark .page-home .home-search-kbd {
  background: #22223a !important;
  border-color: rgba(255, 254, 247, 0.22) !important;
  color: #f5f0e8 !important;
}
html.dark .page-home .home-hero__route-note {
  color: #8a8a9a !important;
}
html.dark .page-home .section-title {
  color: #f5f0e8 !important;
}
:root {
  --bg: var(--app-bg);
  --bg-inset: var(--surface-1);
  @supports (color: color-mix(in lab, red, red)) {
    --bg-inset: color-mix(in srgb, var(--surface-1) 76%, #000 24%);
  }
  --surface: var(--surface-1);
  @supports (color: color-mix(in lab, red, red)) {
    --surface: color-mix(in srgb, var(--surface-1) 96%, transparent);
  }
  --border-muted: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    --border-muted: color-mix(in srgb, var(--border) 68%, transparent);
  }
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --text-4: var(--text-muted);
  @supports (color: color-mix(in lab, red, red)) {
    --text-4: color-mix(in srgb, var(--text-muted) 92%, transparent);
  }
  --blue: var(--accent);
  --blue-s: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    --blue-s: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  --blue-h: var(--accent-hover);
  --green: var(--color-ok);
  --green-h: var(--color-ok);
  @supports (color: color-mix(in lab, red, red)) {
    --green-h: color-mix(in srgb, var(--color-ok) 82%, white 18%);
  }
  --green-s: var(--color-ok-bg);
  --green-btn: var(--accent);
  --green-btn-h: var(--accent-hover);
  --red: var(--color-error);
  --red-s: var(--color-error-bg);
  --yellow: var(--color-warn);
  --yellow-s: var(--color-warn-bg);
  --purple: var(--code-purple);
  --r: var(--radius-md);
  --r-sm: 10px;
  --r-md: 16px;
  --mono: var(--font-mono);
  --ui: var(--font-ui);
  --ease: var(--t-base);
  --sidebar-w: 220px;
  --workflow-w: 300px;
  --console-h: 200px;
  --docbar-h: 0px;
}
[data-theme="light"] {
  --bg-inset: var(--surface-2);
  @supports (color: color-mix(in lab, red, red)) {
    --bg-inset: color-mix(in srgb, var(--surface-2) 90%, #ffffff 10%);
  }
}
.tool-shell__skip-links {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1002;
  display: flex;
  gap: 0.5rem;
}
.tool-shell__skip-links .u-skip-link {
  position: static;
}
.ui-mode-switcher {
  display: inline-flex;
  align-items: center;
  height: 28px;
  border-radius: var(--r-md);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.ui-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 100%;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  font-family: var(--ui);
}
.ui-mode-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.ui-mode-btn.is-active {
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ui-mode-sep {
  width: 1px;
  background: var(--border);
  height: 60%;
  flex-shrink: 0;
}
[data-ui-mode="developer"] .dev-mode-hint {
  display: flex;
}
.dev-mode-hint {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--text-4);
}
.dev-mode-hint kbd {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
}
.workflow-panel {
  position: fixed;
  right: 0;
  top: 44px;
  height: calc(100vh - 44px);
  width: var(--workflow-w);
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  animation: wf-slidein 160ms ease;
  z-index: 400;
  box-shadow: -4px 0 24px var(--shadow-overlay, rgba(0,0,0,.25));
}
body[data-ui-mode="quick"] .shell {
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
body[data-ui-mode="quick"] .shell__body {
  flex-direction: column;
  overflow: visible;
  flex: none;
  min-height: 0;
}
body[data-ui-mode="quick"] .center {
  display: block;
  overflow: visible;
  flex: none;
}
body[data-ui-mode="quick"] .sidebar {
  display: none !important;
}
body[data-ui-mode="quick"] .console {
  display: none !important;
}
body[data-ui-mode="quick"] .workflow-panel {
  display: none !important;
}
body[data-ui-mode="quick"] .doc-rail {
  display: none !important;
}
body[data-ui-mode="quick"] .tool-seo {
  display: none !important;
}
body[data-ui-mode="quick"] .mobile-switcher {
  display: none !important;
}
body[data-ui-mode="quick"] .mobile-fab {
  display: none !important;
}
body[data-ui-mode="quick"] #tnConsoleToggleBtn {
  display: none !important;
}
body[data-ui-mode="quick"] #tnWorkflowToggleBtn {
  display: none !important;
}
body[data-ui-mode="quick"] #tnSidebarToggleBtn {
  display: none !important;
}
body[data-ui-mode="quick"] #tnDocsToggleBtn {
  display: none !important;
}
body[data-ui-mode="quick"] .dev-mode-hint {
  display: none !important;
}
body[data-ui-mode="quick"] .hdr-breadcrumb {
  display: none !important;
}
body[data-ui-mode="quick"] #tnCmdPaletteBtn {
  display: none !important;
}
body[data-ui-mode="quick"] [data-tool-shell] .workspace {
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: visible;
  grid-template-columns: unset;
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
  padding: 20px 20px 0;
  gap: 0;
}
body[data-ui-mode="quick"] [data-tool-shell] .workspace > .tool-template-root,
body[data-ui-mode="quick"] [data-tool-shell] .workspace > .tool-runtime-widget {
  display: flex;
  flex-direction: column;
  grid-template-columns: unset;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
}
body[data-ui-mode="quick"] .panel--input {
  border-right: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: visible;
  height: auto;
}
body[data-ui-mode="quick"] .editor-host {
  height: 220px;
  min-height: 180px;
}
body[data-ui-mode="quick"] .panel--output {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  height: auto;
  overflow: visible;
}
body[data-ui-mode="quick"] .result-host {
  min-height: 180px;
  max-height: 420px;
}
body[data-ui-mode="quick"] .panel-footer {
  border-radius: 0 0 var(--r-md) var(--r-md);
}
body[data-ui-mode="quick"] .resize-handle {
  display: none !important;
}
body[data-ui-mode="quick"] .panel-strip {
  background: var(--surface-2);
}
body[data-ui-mode="quick"] .panel--input .panel-strip {
  border-radius: var(--r-md) var(--r-md) 0 0;
}
body[data-ui-mode="quick"] .qm-hero {
  display: block;
}
body[data-ui-mode="quick"] .qm-step-guide {
  display: flex;
}
body[data-ui-mode="quick"] .qm-run-zone {
  display: flex;
}
body[data-ui-mode="quick"] .qm-examples-section {
  display: block;
}
body[data-ui-mode="quick"] .qm-docs-section {
  display: block;
}
body[data-ui-mode="quick"] .qm-related-grid {
  display: grid;
}
body[data-ui-mode="quick"] .qm-ads-zone {
  display: block;
}
.qm-hero {
  display: none;
  background: radial-gradient(circle at top right, var(--accent), transparent 32%),
    linear-gradient(180deg, var(--surface), transparent 82%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), transparent 82%);
  }
  border-bottom: 1px solid var(--border);
  padding: 32px 20px 28px;
}
.qm-hero__inner {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.qm-hero__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--green-s);
  border: 1px solid rgba(63,185,80,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}
.qm-hero__text {
  flex: 1;
  min-width: 0;
}
.qm-hero__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.4px;
  margin: 0 0 8px;
  line-height: 1.2;
}
.qm-hero__desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0 0 12px;
  max-width: 600px;
}
.qm-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qm-hero__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--mono);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-3);
}
.qm-hero__badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--mono);
  background: var(--green-s);
  border: 1px solid rgba(63,185,80,.2);
  color: var(--green);
}
.qm-step-guide {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 20px 0;
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
}
.qm-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  position: relative;
}
.qm-step + .qm-step {
  margin-left: 0;
}
.qm-step-arrow {
  flex-shrink: 0;
  color: var(--text-4);
  padding: 0 8px;
}
.qm-step-arrow svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.qm-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  background: var(--blue-s);
  border: 1px solid rgba(56,139,253,.2);
  color: var(--blue);
}
.qm-step__text {
  flex: 1;
  min-width: 0;
}
.qm-step__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.qm-step__hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}
.qm-run-zone {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
}
.qm-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 32px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--ui);
  cursor: pointer;
  color: #fff;
  background: var(--green-btn);
  border: 1px solid rgba(240,246,252,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 8px rgba(35,134,54,.25);
  transition: all var(--ease);
  width: 100%;
  max-width: 360px;
  justify-content: center;
}
.qm-run-btn:hover {
  background: var(--green-btn-h);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 16px rgba(35,134,54,.3);
  transform: translateY(-1px);
}
.qm-run-btn:active {
  background: #1a7f37;
  transform: none;
}
.qm-run-btn svg {
  fill: currentColor;
}
.qm-run-kbd {
  font-size: 11px;
  font-family: var(--mono);
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.2);
  border-radius: 3px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.1);
}
.qm-after-content {
  display: none;
  flex-direction: column;
  gap: 0;
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}
body[data-ui-mode="quick"] .qm-after-content {
  display: flex;
}
.qm-section {
  padding: 32px 0;
  border-top: 1px solid var(--border);
}
.qm-section:first-child {
  border-top: none;
}
.qm-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
  margin: 0 0 4px;
}
.qm-section-subtitle {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 20px;
  line-height: 1.5;
}
.qm-examples-section {
  display: none;
}
.qm-examples-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width:640px) {
  .qm-examples-grid {
    grid-template-columns: 1fr;
  }
}
.qm-example-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--ease);
  text-align: left;
  width: 100%;
  font-family: var(--ui);
  box-shadow: var(--shadow-sm);
}
.qm-example-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-s);
  background: var(--surface-2);
}
.qm-example-card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qm-example-card__label svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  color: var(--blue);
  flex-shrink: 0;
}
.qm-example-card__preview {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-3);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qm-example-card__hint {
  font-size: 11px;
  color: var(--blue);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.qm-docs-section {
  display: none;
}
.qm-docs-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 20px 24px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.75;
  box-shadow: var(--shadow-sm);
}
.qm-docs-content h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}
.qm-docs-content h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 20px 0 8px;
}
.qm-docs-content p {
  margin: 0 0 10px;
}
.qm-docs-content ul {
  padding-left: 20px;
  margin: 0 0 10px;
}
.qm-docs-content li {
  line-height: 1.8;
}
.qm-docs-content code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--text-2);
}
.qm-docs-content a {
  color: var(--blue);
  text-decoration: none;
}
.qm-docs-content a:hover {
  text-decoration: underline;
}
.qm-docs-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--mono);
  background: var(--blue-s);
  color: var(--blue);
  border: 1px solid rgba(56,139,253,.2);
  margin-right: 4px;
  margin-bottom: 4px;
}
.qm-related-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 768px) {
  .qm-related-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .qm-related-grid {
    grid-template-columns: 1fr;
  }
}
.qm-related-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  transition: all var(--ease);
  text-decoration: none;
  display: block;
  box-shadow: var(--shadow-sm);
}
.qm-related-card:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  transform: translateY(-2px);
  text-decoration: none;
}
.qm-related-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  margin-bottom: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--text-2);
}
.qm-related-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.qm-related-card__cat {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.qm-ads-zone {
  display: none;
}
.qm-ad-card {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: border-color var(--ease);
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.qm-ad-card:hover {
  border-color: rgba(56,139,253,.4);
  border-style: solid;
}
.qm-ad-card__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-4);
  font-family: var(--mono);
  flex-shrink: 0;
}
.qm-ad-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.qm-ad-card__text {
  flex: 1;
}
.qm-ad-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.qm-ad-card__desc {
  font-size: 12px;
  color: var(--text-3);
}
.qm-ad-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-md);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  transition: all var(--ease);
}
.qm-ad-card:hover .qm-ad-cta {
  color: var(--blue);
  border-color: rgba(56,139,253,.35);
}
body[data-ui-mode="quick"] [data-tool-followup]:not([hidden]) {
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
  padding: 12px 20px;
  background: var(--green-s);
  border: 1px solid rgba(63,185,80,.2);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body[data-ui-mode="quick"] .hdr-status {
  cursor: default;
}
body[data-ui-mode="quick"] .hdr-actions {
  border-left: none;
}
.qm-anchor-preserve {
  display: none;
  position: absolute;
}
.simple-mode-banner {
  display: none;
}
*,*::before,*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: var(--fs-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button {
  cursor: pointer;
  font-family: inherit;
}
input,select,textarea {
  font-family: var(--mono);
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.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;
}
.shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}
.shell__header {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 100;
}
.tool-article-prose :where(h1, h2, h3) {
  letter-spacing: -.03em;
  text-wrap: balance;
}
.tool-article-prose :where(p, li, span, a) {
  line-height: 1.65;
}
.tool-seo {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(circle at top right, var(--accent), transparent 34%),
    radial-gradient(circle at top left, var(--surface-3), transparent 54%),
    linear-gradient(180deg, var(--surface), transparent 78%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at top left, color-mix(in srgb, var(--surface-3) 80%, transparent), transparent 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), transparent 78%);
  }
}
.tool-seo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .95fr);
  gap: 28px;
  padding: clamp(24px, 3vw, 32px);
}
.tool-seo__copy {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.tool-seo__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
}
.tool-seo__breadcrumb a {
  color: var(--text-2);
  text-decoration: none;
}
.tool-seo__breadcrumb a:hover {
  color: var(--blue);
}
.tool-seo__crumb-sep {
  color: var(--text-4);
}
.tool-seo__eyebrow {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}
.tool-seo h1 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.08;
  margin: 0;
  max-width: 14ch;
}
.tool-seo__lead {
  max-width: 64ch;
  font-size: 14px;
  color: var(--text-2);
}
.tool-seo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.tool-seo__meta li {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(1,4,9,.28);
  color: var(--text-2);
  font-size: 11px;
  font-family: var(--mono);
}
.tool-seo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tool-seo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(240,246,252,.1);
  background: var(--green-btn);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--ease);
}
.tool-seo__cta:hover {
  color: #fff;
  background: var(--green-btn-h);
}
.tool-seo__cta--secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.tool-seo__cta--secondary:hover {
  color: var(--text);
  background: var(--surface-3);
}
.tool-seo__rail {
  display: grid;
  gap: 12px;
  align-content: start;
}
.tool-seo__card {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 98%, transparent);
  }
}
.tool-seo__card h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.tool-seo__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tool-seo__card-head a {
  font-size: 11px;
  font-family: var(--mono);
}
.tool-seo__note-list {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--text-2);
}
.tool-seo__note-list li {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tool-seo__note-list li:first-child {
  padding-top: 0;
  border-top: none;
}
.tool-seo__note-list strong {
  color: var(--text);
  font-size: 12px;
}
.tool-seo__note-list span {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
}
.tool-seo__related-list {
  display: grid;
  gap: 6px;
  list-style: none;
}
.tool-seo__related-list a {
  display: block;
  padding: 8px 0;
  border-radius: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  text-decoration: none;
  transition: all var(--ease);
}
.tool-seo__related-list li:first-child a {
  border-top: none;
  padding-top: 0;
}
.tool-seo__related-list a:hover {
  color: var(--text);
  background: transparent;
}
.hdr-bar {
  display: flex;
  align-items: center;
  height: 48px;
  min-height: 48px;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  backdrop-filter: blur(10px);
}
.hdr-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  height: 100%;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 0;
}
.hdr-identity__icon {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--blue-s);
  border: 1px solid var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  }
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
}
.hdr-identity__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -.1px;
}
.hdr-identity__cat {
  font-size: 10px;
  font-weight: 500;
  font-family: var(--mono);
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 6px;
  letter-spacing: .2px;
  flex-shrink: 0;
}
.hdr-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 100%;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-left: none;
}
.hdr-status:hover {
  background: var(--surface-2);
}
.hdr-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
  flex-shrink: 0;
  transition: background var(--ease);
}
[data-runtime-status="ready"]     .hdr-status__dot {
  background: var(--green);
}
[data-runtime-status="running"]   .hdr-status__dot {
  background: var(--yellow);
  animation: pulse 1s ease infinite;
}
[data-runtime-status="loading"]   .hdr-status__dot {
  background: var(--blue);
  animation: pulse .7s ease infinite;
}
[data-runtime-status="error"]     .hdr-status__dot {
  background: var(--red);
}
[data-runtime-status="streaming"] .hdr-status__dot {
  background: var(--blue);
  animation: pulse .8s ease infinite;
}
@keyframes pulse {
  0%,100% {
    opacity: 1;
  }
  50% {
    opacity: .3;
  }
}
.hdr-status__text {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-3);
  letter-spacing: .2px;
}
[data-runtime-status="ready"]     .hdr-status__text {
  color: var(--green);
}
[data-runtime-status="running"]   .hdr-status__text {
  color: var(--yellow);
}
[data-runtime-status="loading"]   .hdr-status__text {
  color: var(--blue);
}
[data-runtime-status="error"]     .hdr-status__text {
  color: var(--red);
}
[data-runtime-status="streaming"] .hdr-status__text {
  color: var(--blue);
}
.hdr-status__time {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.hdr-status__time.visible {
  opacity: 1;
}
.hdr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  flex: 1;
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  min-width: 0;
}
.hdr-breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease);
}
.hdr-breadcrumb a:hover {
  color: var(--blue);
}
.hdr-breadcrumb .sep {
  color: var(--border);
  flex-shrink: 0;
}
.hdr-breadcrumb .sep svg {
  stroke: var(--text-4);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hdr-breadcrumb .cur {
  color: var(--text-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hdr-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  flex-shrink: 0;
}
.btn-run {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--ui);
  cursor: pointer;
  color: #fff;
  background: var(--green-btn);
  border: 1px solid rgba(240,246,252,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: all var(--ease);
  white-space: nowrap;
}
.btn-run:hover {
  background: var(--green-btn-h);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 0 0 3px var(--green-s);
}
.btn-run:active {
  background: #1a7f37;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.btn-run__kbd {
  font-size: 10px;
  font-family: var(--mono);
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.2);
  border-radius: 3px;
  padding: 1px 4px;
  border: 1px solid rgba(255,255,255,.1);
}
.btn-stop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--ui);
  cursor: pointer;
  color: var(--red);
  background: var(--red-s);
  border: 1px solid rgba(248,81,73,.2);
  transition: all var(--ease);
}
.btn-stop:hover {
  background: rgba(248,81,73,.18);
}
.hdr-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  height: 100%;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}
.hdr-actions__primary {
  display: flex;
  align-items: center;
  gap: 2px;
}
.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 28px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
  position: relative;
  flex-shrink: 0;
}
.hdr-btn:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border);
}
.hdr-btn.is-active {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border);
}
.hdr-btn[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border);
}
.hdr-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hdr-btn__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  display: none;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--surface);
}
.hdr-btn__badge.visible {
  display: flex;
}
.hdr-more {
  position: relative;
}
.hdr-more__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 64px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  list-style: none;
  transition: all var(--ease);
}
.hdr-more__summary::-webkit-details-marker {
  display: none;
}
.hdr-more[open] .hdr-more__summary,
.hdr-more__summary:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border);
}
.hdr-more__summary svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hdr-more__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
  z-index: 120;
}
.hdr-more__section {
  display: grid;
  gap: 10px;
}
.hdr-more__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--mono);
}
.hdr-more__mode {
  width: 100%;
  justify-content: flex-start;
}
.hdr-more__action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  transition: all var(--ease);
}
.hdr-more__action:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border);
}
.hdr-more__action[aria-pressed="true"] {
  color: var(--text);
  background: var(--blue-s);
  border-color: rgba(88,166,255,.4);
}
.hdr-followup {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--border-muted);
  flex-wrap: wrap;
}
.hdr-followup[hidden] {
  display: none;
}
.hdr-mobile-nav {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-muted);
  background: var(--surface);
}
.hdr-mobile-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ease);
}
.hdr-mobile-nav__item:hover,
.hdr-mobile-nav__item.is-active,
.hdr-mobile-nav__item[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--blue);
  background: var(--blue-s);
}
@media (max-width: 1024px) {
  .tool-seo__inner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .tool-seo__inner {
    padding: 18px 16px 20px;
    gap: 18px;
  }
  .tool-seo h1 {
    max-width: none;
  }
  .tool-seo__actions,
  .tool-seo__meta {
    gap: 8px;
  }
  .tool-seo__cta {
    width: 100%;
  }
}
.shell__body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 98%, transparent);
  }
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 180ms ease;
  position: relative;
}
.sidebar.rail {
  width: 52px;
}
.sidebar.hidden {
  width: 0;
  border-right: none;
}
.sidebar__collapse-btn {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 20px;
  height: 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--text-3);
  transition: all var(--ease);
}
.sidebar__collapse-btn:hover {
  color: var(--text);
  background: var(--surface-3);
}
.sidebar__collapse-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.sb-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 0;
  flex: 1;
  overflow-y: auto;
}
.sb-nav-group {
  display: grid;
  gap: 1px;
}
.sb-nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 14px 4px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar.rail .sb-nav-label {
  opacity: 0;
  pointer-events: none;
}
.sb-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  width: calc(100% - 16px);
  text-align: left;
  cursor: pointer;
  transition: all var(--ease);
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  margin: 0 8px;
  border-radius: 16px;
}
.sb-nav-item:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--border) 84%, transparent);
  }
}
.sb-nav-item.active {
  color: var(--blue);
  background: var(--blue-s);
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  border-color: var(--accent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  }
}
.sb-nav-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  flex-shrink: 0;
  opacity: .75;
}
.sb-nav-item.active svg {
  opacity: 1;
}
.sb-nav-item__label {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.sb-nav-item__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-nav-item__meta {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-3);
  font-family: var(--mono);
}
.sidebar.rail .sb-nav-item__label {
  display: none;
}
.sidebar.rail .sb-nav-item {
  padding: 7px 0;
  justify-content: center;
}
.sidebar.rail .sb-nav-item svg {
  width: 16px;
  height: 16px;
}
.sb-nav-list {
  display: grid;
  gap: 1px;
}
.sb-favorites[hidden] {
  display: none;
}
.sidebar.rail .sb-favorites {
  display: none;
}
.sb-nav-item[data-tooltip]:focus {
  outline: none;
}
.sidebar.rail .sb-nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 54px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ease);
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.sidebar.rail .sb-nav-item:hover::after {
  opacity: 1;
}
.sb-section-spacer {
  height: 1px;
  background: var(--border-muted);
  margin: 6px 0;
}
.center {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
@media (min-width: 1280px) {
  .center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }
  .doc-rail {
    width: clamp(360px, 32vw, 500px);
    border-top: none;
    border-left: 1px solid var(--border);
    align-self: stretch;
  }
  [data-tool-shell] .workspace {
    min-width: 0;
  }
}
[data-tool-shell] .workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
[data-tool-shell] .workspace > .tool-template-root,
[data-tool-shell] .workspace > .tool-runtime-widget {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}
[data-tool-shell] .workspace > .tool-template-root > .panel,
[data-tool-shell] .workspace > .tool-runtime-widget > .panel {
  min-width: 0;
}
[data-tool-shell] .workspace > .tool-template-root > .panel--input,
[data-tool-shell] .workspace > .tool-runtime-widget > .panel--input {
  grid-column: 1;
  grid-row: 1;
}
[data-tool-shell] .workspace > .tool-template-root > .panel--output,
[data-tool-shell] .workspace > .tool-runtime-widget > .panel--output {
  grid-column: 2;
  grid-row: 1;
}
[data-tool-shell] .workspace > .tool-template-root > .qm-run-zone,
[data-tool-shell] .workspace > .tool-runtime-widget > .qm-run-zone,
[data-tool-shell] .workspace > .tool-template-root > .tool-runtime-notice,
[data-tool-shell] .workspace > .tool-runtime-widget > .tool-runtime-notice {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
}
[data-tool-shell] .workspace > .tool-template-root > .editor-host,
[data-tool-shell] .workspace > .tool-template-root > .result-host,
[data-tool-shell] .workspace > .tool-runtime-widget > .editor-host,
[data-tool-shell] .workspace > .tool-runtime-widget > .result-host {
  min-height: 0;
}
.tool-runtime-notice {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 8;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(245,158,11,.28);
  background: var(--color-warn);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--color-warn) 12%, transparent);
  }
  color: var(--color-warn);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--color-warn) 86%, white 14%);
  }
  font-size: 12px;
  line-height: 1.55;
}
.tool-runtime-noscript {
  margin: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
}
.tool-runtime-noscript h2 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text);
}
.tool-runtime-noscript p + p {
  margin-top: 8px;
}
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
}
.panel--input {
  border-right: 1px solid var(--border);
  position: relative;
}
.panel-strip {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.panel-strip__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text-2);
  padding: 0 6px 0 2px;
  flex-shrink: 0;
}
.strip-sep {
  width: 1px;
  height: 14px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
  opacity: .6;
}
.strip-spacer {
  flex: 1;
}
.strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.strip-btn:hover {
  color: var(--text);
  background: var(--surface-3);
}
.strip-btn.is-active {
  color: var(--blue);
  background: var(--blue-s);
  border-color: rgba(56,139,253,.25);
}
.strip-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .8;
}
.strip-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 11px;
  user-select: none;
  height: 24px;
  padding: 0 6px;
  transition: color var(--ease);
  flex-shrink: 0;
}
.strip-label:hover {
  color: var(--text);
}
.strip-label input[type=checkbox] {
  width: 12px;
  height: 12px;
  accent-color: var(--blue);
}
.editor-host {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.editor-textarea {
  position: absolute;
  inset: 0;
  background: var(--bg-inset);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  padding: 12px 14px;
  border: none;
  outline: none;
  resize: none;
  overflow: auto;
  caret-color: var(--blue);
}
.editor-textarea::placeholder {
  color: var(--text-4);
}
.tool-runtime-editor-mount {
  position: absolute;
  inset: 0;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  z-index: 1;
}
.tool-runtime-editor-mount > .monaco-editor,
.tool-runtime-editor-mount > .overflow-guard {
  width: 100% !important;
  height: 100% !important;
}
.editor-host[data-editor-runtime="monaco"] .editor-textarea {
  opacity: 0;
  pointer-events: none;
}
.editor-host[data-editor-runtime="monaco"] .tool-runtime-editor-mount,
.result-host[data-editor-runtime="monaco"] .tool-runtime-editor-mount {
  z-index: 2;
}
.result-host {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.65;
  background: var(--bg-inset);
}
.result-host[data-editor-runtime="monaco"] {
  padding: 0;
  overflow: hidden;
}
.tool-template-fallback-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.08);
  color: var(--text);
  font-family: var(--ui);
}
.tool-template-fallback-note strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.tool-template-fallback-note span {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
}
.tool-template-fallback-preview {
  margin-top: 12px;
}
.output-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}
.output-empty__icon {
  stroke: var(--border);
  fill: none;
  stroke-width: .8;
  opacity: .4;
}
.output-empty__text {
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
  max-width: 160px;
  line-height: 1.6;
  font-family: var(--ui);
}
.output-empty__btn {
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: var(--green-btn);
  border: 1px solid rgba(240,246,252,.1);
  cursor: pointer;
  transition: all var(--ease);
  font-family: var(--ui);
}
.output-empty__btn:hover {
  background: var(--green-btn-h);
}
.panel-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 26px;
  min-height: 26px;
  background: var(--surface);
  border-top: 1px solid var(--border-muted);
  flex-shrink: 0;
}
.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
}
.footer-btn:hover {
  color: var(--text-2);
  background: var(--surface-3);
  border-color: var(--border);
}
.footer-btn.copied {
  color: var(--green) !important;
}
.footer-spacer {
  flex: 1;
}
.footer-info {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--text-2);
}
.footer-timing {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--green);
  font-weight: 500;
}
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 8px;
  transform: translateX(-50%);
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background 120ms;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resize-handle::before {
  content: '';
  display: block;
  width: 2px;
  height: 32px;
  background: var(--border);
  border-radius: 2px;
  transition: background 120ms,height 120ms;
  opacity: .4;
}
.resize-handle:hover::before, .resize-handle.drag::before {
  background: var(--blue);
  height: 48px;
  opacity: 1;
}
.find-overlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 0 0 0 var(--r);
  border-top: none;
  border-right: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  padding: 4px 8px;
}
.find-overlay[hidden] {
  display: none;
}
.find-input {
  height: 24px;
  padding: 0 7px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  width: 180px;
}
.find-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-s);
}
.find-count {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  white-space: nowrap;
}
.find-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
}
.find-btn:hover {
  background: var(--surface);
  border-color: var(--border);
}
.find-btn--text {
  width: auto;
  padding: 0 6px;
  font-size: 11px;
}
.doc-rail {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 98%, transparent);
  }
  border-top: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  transition: width 160ms ease, transform 160ms ease;
}
.doc-rail.collapsed {
  width: clamp(300px, 27vw, 360px);
}
.doc-rail.expanded {
  width: clamp(420px, 38vw, 560px);
}
.doc-rail[hidden] {
  display: none;
}
.dr-tabbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(circle at top right, var(--accent), transparent 40%),
    linear-gradient(180deg, var(--surface), transparent 76%);
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), transparent 76%);
  }
}
.dr-tabbar__intro {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.dr-tabbar__eyebrow,
.dr-panel-shell__eyebrow,
.dr-nav__label,
.doc-footer__label,
.toc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  font-family: var(--mono);
}
.dr-tabbar__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.03em;
}
.dr-tabbar__summary {
  max-width: 44ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}
.dr-tabbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ai-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: text;
  transition: border-color var(--ease);
  width: min(240px, 100%);
}
.ai-bar:hover, .ai-bar:focus-within {
  border-color: rgba(56,139,253,.4);
}
.ai-bar__icon {
  font-size: 12px;
  flex-shrink: 0;
  color: var(--purple);
}
.ai-bar__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 11px;
  color: var(--text);
  font-family: var(--ui);
}
.ai-bar__input::placeholder {
  color: var(--text-4);
}
.dr-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--ease);
}
.dr-collapse-btn:hover {
  color: var(--text);
  background: var(--surface-3);
}
.dr-collapse-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: transform 160ms ease;
}
.doc-rail.expanded .dr-collapse-btn svg {
  transform: rotate(180deg);
}
.dr-body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 150px;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dr-nav {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-inset);
  border-right: 1px solid var(--border);
}
.dr-nav__section {
  display: grid;
  gap: 10px;
  padding: 16px 12px;
}
.dr-nav__list {
  display: grid;
  gap: 8px;
}
.dr-tab {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: all var(--ease);
}
.dr-tab:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}
.dr-tab.is-active {
  color: var(--text);
  background: var(--blue-s);
  border-color: rgba(88,166,255,.34);
  box-shadow: 0 0 0 1px rgba(88,166,255,.1);
}
.dr-tab__label {
  font-size: 12px;
  font-weight: 600;
}
.dr-tab__meta {
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--mono);
}
.dr-panel-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 98%, transparent);
  }
}
.dr-panel-shell__header {
  display: grid;
  gap: 8px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.dr-panel-shell__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.03em;
}
.dr-panel-shell__summary {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}
.dr-panel-shell__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dr-toc {
  min-width: 0;
  background: var(--bg-inset);
  border-left: 1px solid var(--border);
  overflow: hidden;
  padding: 16px 12px;
}
.dr-toc[hidden] {
  display: none;
}
.dr-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.toc-link {
  display: block;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--text-3);
  text-decoration: none;
  transition: all var(--ease);
  line-height: 1.45;
}
.toc-link:hover {
  color: var(--text);
  background: var(--surface-2);
}
.toc-link.is-active {
  color: var(--blue);
  background: var(--blue-s);
}
.toc-link--h3 {
  padding-left: 18px;
  font-size: 10px;
}
.dr-content {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px 24px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.75;
}
.dr-content[hidden] {
  display: none;
}
.dr-content h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 4px;
  letter-spacing: -.02em;
}
.dr-content h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 14px 0 6px;
  scroll-margin-top: 4px;
}
.dr-content p {
  margin: 0 0 10px;
}
.dr-content a {
  color: var(--blue);
  text-decoration: none;
}
.dr-content a:hover {
  text-decoration: underline;
}
.dr-content ul, .dr-content ol {
  padding-left: 18px;
  margin: 0 0 10px;
}
.dr-content li {
  line-height: 1.8;
}
.dr-content code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface-3);
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  padding: 1px 5px;
  color: var(--text-2);
}
.dr-content .readme-block,
.dr-content .section-frame {
  display: grid;
  gap: 10px;
}
.dr-content .readme-disclosure {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
  }
  overflow: hidden;
}
.dr-content .readme-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,.02);
  list-style: none;
}
.dr-content .readme-disclosure > summary::-webkit-details-marker {
  display: none;
}
.dr-content .readme-disclosure[open] > summary {
  border-bottom: 1px solid var(--border);
}
.dr-content .readme-block {
  padding: 14px;
}
.dr-content .readme-card-grid {
  display: grid;
  gap: 12px;
}
.dr-content .readme-stack {
  display: grid;
  gap: 10px;
}
.dr-content .readme-step-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dr-content .readme-step-list li {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.dr-content .readme-step-list li:first-child {
  padding-top: 0;
  border-top: none;
}
.dr-content .readme-step-list strong {
  font-size: 12px;
  color: var(--text);
}
.dr-content .readme-step-list span,
.dr-content .readme-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
}
.dr-content .readme-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.dr-content .readme-example-list {
  display: grid;
  gap: 10px;
}
.dr-content .readme-example-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border);
}
.dr-content .readme-example-item:first-child {
  padding-top: 0;
  border-top: none;
}
.dr-content .readme-example-item h3 {
  margin: 0;
  font-size: 12px;
  color: var(--text);
}
.dr-content .readme-example-row {
  display: grid;
  gap: 6px;
}
.dr-content .readme-example-row strong {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
}
.dr-content .readme-example-row pre {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow: auto;
}
.dr-content .readme-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.dr-content .faq-accordion {
  display: grid;
  gap: 10px;
}
.dr-content .faq-accordion__item {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
  overflow: hidden;
}
.dr-content .faq-accordion__item > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.dr-content .faq-accordion__item > p {
  padding: 0 14px 14px;
}
.dr-content .tool-md-content {
  display: grid;
  gap: 10px;
}
.dr-content .tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  font-family: var(--mono);
  background: var(--blue-s);
  color: var(--blue);
  border: 1px solid rgba(56,139,253,.2);
  margin-right: 4px;
  margin-bottom: 4px;
}
.ai-response {
  margin: 0 20px 18px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-muted);
  border-radius: 14px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  white-space: pre-wrap;
}
.ai-response[data-state="error"] {
  border-color: rgba(248,81,73,.35);
  color: #ffb4ad;
}
.ai-response__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ai-response__content {
  min-height: 18px;
}
.ai-response__spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(139,148,158,.3);
  border-top-color: var(--blue);
  animation: ai-response-spin .75s linear infinite;
}
@keyframes ai-response-spin {
  to {
    transform: rotate(360deg);
  }
}
.dr-empty {
  padding: 16px;
  font-size: 12px;
  color: var(--text-4);
}
.doc-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  background: var(--bg-inset);
  border-top: 1px solid var(--border);
  box-shadow: 0 -1px 0 var(--border-muted);
}
.doc-footer__zone {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
  }
}
.doc-footer__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.doc-footer__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--ui);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--ease);
}
.doc-footer__pill:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border);
  text-decoration: none;
}
.doc-footer__pill-sep {
  display: none;
}
.doc-footer__cta-zone {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--surface) 94%, transparent);
  }
  align-content: start;
}
.doc-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--ui);
  color: #fff;
  background: var(--green-btn);
  border: 1px solid rgba(240,246,252,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  border-radius: 14px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--ease);
}
.doc-footer__cta:hover {
  background: var(--green-btn-h);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 3px var(--green-s);
  text-decoration: none;
}
.doc-footer__cta svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  flex-shrink: 0;
}
.doc-footer__cta--ghost {
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
}
.doc-footer__cta--ghost:hover {
  color: var(--text);
  background: var(--surface-3);
  box-shadow: none;
}
.doc-footer__kbd {
  font-size: 9.5px;
  font-family: var(--mono);
  color: rgba(255,255,255,.45);
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
  padding: 1px 4px;
  letter-spacing: .2px;
}
.doc-footer__cta--ghost .doc-footer__kbd {
  color: var(--text-3);
  background: var(--surface-3);
  border-color: var(--border);
}
.workflow-panel[hidden] {
  display: none !important;
}
@keyframes wf-slidein {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 38px;
  min-height: 38px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wf-header__icon {
  font-size: 14px;
  flex-shrink: 0;
}
.wf-header__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.wf-header__badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 5px;
}
.wf-header__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--ease);
}
.wf-header__close:hover {
  color: var(--text);
  background: var(--surface-3);
}
.wf-header__close svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.wf-tabs {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 6px;
  flex-shrink: 0;
}
.wf-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 34px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
}
.wf-tab:hover {
  color: var(--text-2);
}
.wf-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--blue);
}
.wf-tab__count {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 4px;
}
.wf-panel {
  flex: 1;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}
.wf-panel.is-active {
  display: flex;
}
.wf-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.wf-name-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.wf-name-input {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-family: var(--ui);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  outline: none;
}
.wf-name-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-s);
}
.wf-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--ease);
}
.wf-save-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.wf-saved-section {
  margin-bottom: 10px;
}
.wf-saved-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.wf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 20px;
  font-size: 10.5px;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--ease);
}
.wf-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.wf-steps-area {
  min-height: 40px;
  margin-bottom: 8px;
}
.wf-empty {
  display: grid;
  gap: 8px;
  padding: 14px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  margin-bottom: 8px;
}
.wf-empty__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0;
}
.wf-empty__desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.55;
  margin: 0;
}
.wf-suggestions {
  width: 100%;
  margin-top: 8px;
}
.wf-suggestions-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-bottom: 5px;
}
.wf-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  margin-bottom: 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all var(--ease);
  width: 100%;
  text-align: left;
  font-family: var(--ui);
}
.wf-suggestion:hover {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text);
}
.wf-suggestion svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .6;
  flex-shrink: 0;
}
.wf-panel-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-3);
}
.wf-step {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 10px;
  margin-bottom: 3px;
}
.wf-step__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-s);
  border: 1px solid rgba(47,129,247,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
}
.wf-step__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}
.wf-step__del {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--ease);
}
.wf-step__del:hover {
  color: var(--red);
  background: var(--surface-3);
}
.wf-step__del svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.wf-connector {
  display: flex;
  justify-content: center;
  height: 12px;
  margin: 0 0 3px 10px;
}
.wf-add-wrap {
  margin-bottom: 8px;
}
.wf-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  cursor: pointer;
  transition: all var(--ease);
}
.wf-add-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-s);
}
.wf-add-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.wf-progress {
  margin: 4px 0 8px;
  display: none;
}
.wf-progress__track {
  height: 3px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.wf-progress__fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width 300ms ease;
  width: 0;
}
.wf-progress__label {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  text-align: center;
  margin-top: 4px;
}
.wf-pipeline {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: none;
  margin-bottom: 8px;
}
.wf-pipeline__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-3);
}
.wf-pipeline__copy {
  font-size: 10px;
  color: var(--blue);
  background: transparent;
  border: none;
  cursor: pointer;
}
.wf-pipeline__code {
  padding: 8px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-2);
  overflow-x: auto;
  margin: 0;
}
.wf-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.wf-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wf-footer__count {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-2);
}
.wf-footer__status {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
}
.wf-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  height: 28px;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  border: 1px solid rgba(47,129,247,.3);
  cursor: pointer;
  transition: all var(--ease);
}
.wf-run-btn:hover:not(:disabled) {
  background: var(--blue-h);
}
.wf-run-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.wf-run-btn svg {
  fill: currentColor;
}
.wf-template-card, .wf-history-entry {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color var(--ease);
}
.wf-template-card:hover, .wf-history-entry:hover {
  border-color: var(--blue);
}
.wf-template-card h3, .wf-history-entry h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 3px;
}
.wf-template-card p, .wf-history-entry p {
  font-size: 11px;
  color: var(--text-3);
  margin: 0;
}
.console {
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 200px;
  transition: height 160ms ease;
  position: relative;
}
.console.collapsed {
  height: 34px;
}
.console.expanded {
  height: 40vh;
}
.console[hidden] {
  display: none;
}
.console__resize-thumb {
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.console__resize-thumb::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 120ms;
}
.console__resize-thumb:hover::after {
  opacity: 1;
}
.console__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 34px;
  min-height: 34px;
  background: var(--surface);
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.console__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text-2);
}
.console__chips {
  display: flex;
  align-items: center;
  gap: 3px;
}
.console-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--mono);
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
}
.console-chip:hover {
  background: var(--surface-3);
  border-color: var(--border);
}
.console-chip.is-active {
  color: var(--text-2);
  background: var(--surface-3);
  border-color: var(--border);
}
.console-chip.warn.is-active {
  color: var(--yellow);
}
.console-chip.err.is-active {
  color: var(--red);
}
.console-chip__count {
  font-size: 9px;
  font-family: var(--mono);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 0 4px;
  min-width: 14px;
  text-align: center;
}
.console-chip.err .console-chip__count {
  color: var(--red);
}
.console-group {
  border-bottom: 1px solid var(--border-muted);
}
.console-group__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  font-family: var(--mono);
  cursor: pointer;
}
.console-group__header:hover {
  background: var(--surface-3);
}
.console-group__meta {
  color: var(--text-3);
  font-size: 10px;
}
.console-group__body {
  display: flex;
  flex-direction: column;
}
.console-chip.warn .console-chip__count {
  color: var(--yellow);
}
.console__search {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  width: 140px;
  margin-left: 4px;
  transition: border-color var(--ease);
}
.console__search:focus {
  border-color: var(--blue);
}
.console__filter-btn {
  height: 22px;
  padding: 0 8px;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  align-items: center;
  gap: 4px;
  appearance: none;
  -webkit-appearance: none;
}
.console__filter-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.console__action {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
}
.console-status__timestamp {
  margin-left: auto;
}
.console__action:hover {
  color: var(--text-2);
  background: var(--surface-3);
  border-color: var(--border);
}
.console__action svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.console__spacer {
  flex: 1;
}
.console__size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ease);
}
.console__size-btn:hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--border);
}
.console__size-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.console__body {
  background: var(--bg-inset);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.console.collapsed .console__body {
  display: none;
}
.console.collapsed .console-status {
  display: none;
}
.log-entry {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 14px;
  line-height: 1.55;
  border-left: 2px solid transparent;
  font-family: var(--mono);
  font-size: 11px;
}
.log-entry:hover {
  background: var(--surface-2);
}
.log-entry.warn {
  border-left-color: var(--yellow);
  background: rgba(210,153,34,.03);
}
.log-entry.err {
  border-left-color: var(--red);
  background: rgba(248,81,73,.04);
}
.log-entry.sys {
  opacity: .55;
}
.log-time {
  color: var(--text-4);
  flex-shrink: 0;
  font-size: 10px;
  min-width: 44px;
}
.log-level {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  width: 28px;
  flex-shrink: 0;
}
.log-entry.info .log-level {
  color: var(--blue);
}
.log-entry.warn .log-level {
  color: var(--yellow);
}
.log-entry.err  .log-level {
  color: var(--red);
}
.log-entry.sys  .log-level {
  color: var(--text-3);
}
.log-msg {
  color: var(--text-2);
  flex: 1;
  word-break: break-all;
}
.console-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 12px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-4);
  background: var(--surface);
  border-top: 1px solid var(--border-muted);
  flex-shrink: 0;
}
.wf-selector-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.wf-selector-overlay[hidden] {
  display: none !important;
}
.wf-selector-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 460px;
  max-width: 92vw;
  max-height: 80vh;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wf-selector-modal__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wf-selector-modal__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  margin: 0;
}
.wf-selector-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--ease);
}
.wf-selector-modal__close:hover {
  color: var(--text);
  background: var(--surface-2);
}
.wf-selector-modal__close svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.wf-selector-search {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.wf-selector-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  stroke: var(--text-3);
  fill: none;
  stroke-width: 1.5;
}
.wf-selector-search__input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  outline: none;
}
.wf-selector-search__input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-s);
}
.wf-selector-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.wf-selector-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--ease);
}
.wf-selector-item:hover {
  background: var(--surface-2);
}
.wf-selector-item__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  font-family: var(--mono);
  color: var(--text-2);
}
.wf-selector-item__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.wf-selector-item__cat {
  font-size: 10.5px;
  color: var(--text-3);
}
.wf-selector-item__add {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--blue);
  background: var(--blue-s);
  border: 1px solid rgba(47,129,247,.2);
  cursor: pointer;
  transition: all var(--ease);
}
.wf-selector-item__add:hover {
  background: rgba(47,129,247,.2);
}
.cp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.cp-overlay[hidden] {
  display: none !important;
}
.cp-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 560px;
  max-width: 92vw;
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cp-search {
  padding: 0;
  position: relative;
}
.cp-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  stroke: var(--text-3);
  fill: none;
  stroke-width: 1.5;
}
.cp-search input {
  width: 100%;
  height: 44px;
  padding: 0 12px 0 38px;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
  font-family: var(--ui);
}
.cp-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.cp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--ease);
}
.cp-item:hover, .cp-item.focused {
  background: var(--surface-2);
}
.cp-item-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  color: var(--text-2);
}
.cp-item-label {
  font-size: 12px;
  color: var(--text);
  flex: 1;
}
.cp-item-meta {
  font-size: 10.5px;
  color: var(--text-3);
}
.cp-kbd {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
}
.cp-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--mono);
}
.mobile-switcher {
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-switcher__tabs {
  display: flex;
}
.mobile-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  height: 52px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--ease);
}
.mobile-tab[aria-selected="true"] {
  color: var(--blue);
}
.mobile-tab svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: stroke var(--ease);
}
.mobile-doc-sheet {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
}
.mobile-doc-sheet.open {
  display: flex;
}
.mobile-doc-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.mobile-doc-sheet__panel {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-doc-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}
.mobile-doc-sheet__body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.mobile-doc-sheet__footer {
  flex-shrink: 0;
}
.mobile-fab {
  position: fixed;
  bottom: 68px;
  right: 16px;
  z-index: 500;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green-btn);
  color: #fff;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  cursor: pointer;
  transition: all var(--ease);
  font-size: 20px;
}
.mobile-fab:hover {
  background: var(--green-btn-h);
  transform: scale(1.05);
}
.mobile-fab svg {
  stroke: #fff;
  fill: #fff;
}
.toast-region {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 8000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  pointer-events: all;
  animation: toast-in .2s ease;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.toast.success {
  border-left: 3px solid var(--green);
}
.toast.warn {
  border-left: 3px solid var(--yellow);
}
.toast.error {
  border-left: 3px solid var(--red);
}
@media (max-width:1024px) {
  :root {
    --sidebar-w: 52px;
  }
  .sidebar {
    width: 52px;
  }
  .sb-nav-label {
    opacity: 0;
    pointer-events: none;
    height: 0;
    padding: 0;
    overflow: hidden;
  }
  .sb-nav-item__label {
    display: none;
  }
  .sb-nav-item__meta {
    display: none;
  }
  .sb-nav-item {
    padding: 7px 0;
    justify-content: center;
  }
  .sb-nav-item svg {
    width: 16px;
    height: 16px;
  }
  .sidebar.rail, .sidebar {
    width: 52px;
  }
  .sidebar__collapse-btn {
    display: none;
  }
  .doc-footer {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1280px) {
  .center {
    display: flex;
    flex-direction: column;
  }
  .doc-rail,
  .doc-rail.collapsed,
  .doc-rail.expanded {
    width: auto;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .dr-body {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .dr-toc {
    display: none;
  }
}
@media (max-width: 768px) {
  .dr-tabbar {
    flex-direction: column;
    align-items: stretch;
  }
  .dr-tabbar__actions {
    justify-content: space-between;
  }
  .dr-body {
    grid-template-columns: 1fr;
  }
  .dr-nav {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .dr-nav__list {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}
@media (max-width:640px) {
  .sidebar {
    display: none;
  }
  .workflow-panel {
    display: none !important;
  }
  [data-tool-shell] .workspace {
    grid-template-columns: 1fr;
  }
  .panel--output {
    display: none;
  }
  .panel--output[data-active] {
    display: flex;
  }
  .doc-rail {
    display: flex;
    width: auto;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .dr-tabbar {
    padding: 16px;
  }
  .dr-tabbar__summary {
    max-width: none;
  }
  .dr-nav,
  .dr-toc,
  .dr-collapse-btn {
    display: none;
  }
  .dr-panel-shell__header {
    padding: 16px;
  }
  .dr-panel-shell__body {
    display: grid;
    gap: 0;
    overflow: visible;
  }
  .dr-content,
  .dr-content[hidden] {
    display: block !important;
    height: auto;
    overflow: visible;
    padding: 16px;
    border-top: 1px solid var(--border);
  }
  .dr-content:first-child {
    border-top: none;
  }
  .ai-response {
    margin: 0 16px 16px;
  }
  .mobile-switcher {
    display: flex;
    flex-direction: column;
  }
  .mobile-fab {
    display: flex;
  }
  .hdr-breadcrumb {
    display: none;
  }
  .hdr-mobile-nav {
    display: flex;
    flex-wrap: wrap;
  }
  .hdr-actions .hdr-btn[data-desktop-only] {
    display: none;
  }
  .hdr-more__action[data-desktop-only] {
    display: none;
  }
  .console {
    height: 150px;
  }
  .console.expanded {
    height: 50vh;
  }
  .doc-footer {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .doc-footer__zone,
  .doc-footer__cta-zone {
    padding: 14px;
  }
}
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
}
.site-footer__top {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 32px 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    padding: 24px 16px 16px;
  }
}
.site-footer__brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.site-footer__brand-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--green-s);
  border: 1px solid rgba(63,185,80,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}
.site-footer__brand-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
}
.site-footer__brand-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 280px;
  margin-bottom: 14px;
}
.site-footer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.site-footer__tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  font-family: var(--mono);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-3);
}
.site-footer__col-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.site-footer__links a {
  color: var(--text-3);
  text-decoration: none;
  font-size: 12px;
  transition: color var(--ease);
}
.site-footer__links a:hover {
  color: var(--blue);
}
.site-footer__bottom {
  border-top: 1px solid var(--border-muted);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1280px;
  margin: 0 auto;
}
.site-footer__copy {
  font-size: 11px;
  color: var(--text-4);
}
.site-footer__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--green);
}
.site-footer__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.site-footer__bottom-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-footer__bottom-links a {
  font-size: 11px;
  color: var(--text-4);
  text-decoration: none;
  transition: color var(--ease);
}
.site-footer__bottom-links a:hover {
  color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
  .workflow-panel,
  .ui-mode-btn,
  .site-footer__links a,
  .site-footer__bottom-links a {
    animation: none !important;
    transition: none !important;
  }
}
@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-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-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-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%,
      100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: 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-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}