/*
 * Universal relay theme pack.
 * Original IP-inspired visual skins for New API style relay consoles.
 * Copy this file with theme-pack.js and inject after the app CSS.
 */

html.ys-theme-pack {
  --ys-theme-transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease;
  --ys-theme-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ys-theme-title-font: var(--ys-theme-font);
  --ys-theme-art: none;
  --ys-theme-art-opacity: .38;
  --ys-theme-character: none;
  --ys-theme-cursor: auto;
  --ys-theme-cursor-hotspot: 4 4;
  --ys-theme-character-opacity: .78;
  --ys-theme-muted: color-mix(in srgb, var(--ys-theme-fg, #f8fafc) 66%, transparent);
  --ys-theme-soft: color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 10%, transparent);
  --ys-theme-line: color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 26%, transparent);
  --ys-theme-module-top: linear-gradient(90deg, rgba(var(--ys-theme-rgb, 90, 210, 255), .68), transparent 62%);
  --ys-theme-module-pattern: linear-gradient(135deg, rgba(255, 255, 255, .10), transparent 44%);
  --ys-theme-badge-bg: rgba(var(--ys-theme-rgb, 90, 210, 255), .14);
  --ys-theme-badge-fg: var(--ys-theme-fg, #f8fafc);
}

html.ys-theme-pack body {
  overflow-x: hidden;
  color: var(--ys-theme-fg, #f8fafc);
  font-family: var(--ys-theme-font) !important;
  letter-spacing: 0;
  cursor: var(--ys-theme-cursor), auto;
}

html.ys-theme-pack button,
html.ys-theme-pack a,
html.ys-theme-pack input,
html.ys-theme-pack textarea,
html.ys-theme-pack [role="button"],
html.ys-theme-pack [role="combobox"] {
  transition: var(--ys-theme-transition);
}

html.ys-theme-pack button,
html.ys-theme-pack a,
html.ys-theme-pack [role="button"],
html.ys-theme-pack [role="combobox"],
html.ys-theme-pack label {
  cursor: pointer;
}

#ys-theme-switcher {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  gap: 8px;
  color: var(--ys-theme-fg, #f8fafc);
  font: 700 12px/1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  will-change: transform;
  touch-action: none;
}

#ys-theme-switcher[data-floating="true"] {
  right: auto;
  bottom: auto;
  left: 0;
  top: 0;
  transform: translate3d(var(--ys-switcher-x, calc(100vw - 124px)), var(--ys-switcher-y, calc(100vh - 74px)), 0);
}

#ys-theme-switcher[data-open="false"] .ys-theme-menu {
  transform: translateY(10px) scale(.96);
  opacity: 0;
  pointer-events: none;
}

.ys-theme-trigger {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(var(--ys-theme-rgb, 90, 210, 255), .42);
  border-radius: 999px;
  color: var(--ys-theme-fg, #f8fafc);
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, .38), transparent 26px),
    color-mix(in srgb, var(--ys-theme-panel, #101827) 82%, transparent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .30), 0 0 28px rgba(var(--ys-theme-rgb, 90, 210, 255), .24);
  backdrop-filter: blur(16px) saturate(145%);
  cursor: pointer;
}

.ys-theme-trigger::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--ys-theme-orb, linear-gradient(135deg, #5ad2ff, #b57dff));
  box-shadow: 0 0 16px rgba(var(--ys-theme-rgb, 90, 210, 255), .58);
}

.ys-theme-menu {
  width: min(286px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid rgba(var(--ys-theme-rgb, 90, 210, 255), .28);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ys-theme-panel, #101827) 88%, transparent);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(150%);
  transform-origin: right bottom;
  transition: transform .18s ease, opacity .18s ease;
}

#ys-theme-switcher[data-floating="true"] .ys-theme-menu {
  transform-origin: left bottom;
}

.ys-theme-menu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 2px 9px;
  color: color-mix(in srgb, var(--ys-theme-fg, #f8fafc) 82%, transparent);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ys-theme-option {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ys-theme-fg, #f8fafc);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.ys-theme-option:hover,
.ys-theme-option[aria-pressed="true"] {
  border-color: rgba(var(--ys-theme-rgb, 90, 210, 255), .34);
  background: rgba(var(--ys-theme-rgb, 90, 210, 255), .12);
  transform: translateY(-1px);
}

.ys-theme-chip {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background:
    var(--preview) center 56% / 120% auto no-repeat,
    var(--chip);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 8px 18px rgba(0, 0, 0, .22);
}

.ys-theme-option strong {
  display: block;
  font-size: 13px;
}

.ys-theme-option span:not(.ys-theme-chip) {
  display: block;
  margin-top: 2px;
  color: color-mix(in srgb, var(--ys-theme-fg, #f8fafc) 62%, transparent);
  font-size: 11px;
}

.ys-theme-active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}

.ys-theme-option[aria-pressed="true"] .ys-theme-active-dot {
  background: rgb(var(--ys-theme-rgb, 90, 210, 255));
  box-shadow: 0 0 14px rgba(var(--ys-theme-rgb, 90, 210, 255), .78);
}

#ys-theme-corner-mark {
  position: fixed;
  right: clamp(18px, 3vw, 52px);
  top: clamp(76px, 10vh, 132px);
  z-index: 1;
  width: clamp(90px, 9vw, 148px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .58;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, .26));
}

#ys-theme-corner-mark::before,
#ys-theme-corner-mark::after {
  content: "";
  position: absolute;
  inset: 0;
}

#ys-theme-corner-mark::before {
  border-radius: var(--mark-radius, 50%);
  background: var(--mark-bg, conic-gradient(from 40deg, #5ad2ff, #b57dff, #ff6048, #5ad2ff));
  mask: var(--mark-mask, radial-gradient(circle, transparent 42%, #000 43% 58%, transparent 59%));
}

#ys-theme-corner-mark::after {
  inset: 18%;
  border-radius: var(--mark-inner-radius, 28%);
  background: var(--mark-inner, linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12)));
  transform: rotate(var(--mark-rotate, -18deg));
}

#ys-theme-art {
  position: fixed;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  background-image: var(--ys-theme-art);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--ys-theme-art-opacity);
  mix-blend-mode: var(--ys-theme-art-blend, normal);
}

#ys-theme-character {
  position: fixed;
  right: clamp(18px, 4vw, 68px);
  bottom: clamp(72px, 9vh, 118px);
  z-index: 1;
  width: clamp(158px, 18vw, 286px);
  aspect-ratio: 520 / 620;
  pointer-events: none;
  background-image: var(--ys-theme-character);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: var(--ys-theme-character-opacity);
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .34)) saturate(1.08);
  transform: translate3d(0, 0, 0);
  animation: ys-theme-character-float 6.8s ease-in-out infinite;
}

#ys-theme-character::before,
#ys-theme-character::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  background: var(--ys-theme-orb);
  opacity: .20;
  filter: blur(10px);
}

#ys-theme-character::before {
  width: 42%;
  aspect-ratio: 1;
  left: 2%;
  top: 10%;
}

#ys-theme-character::after {
  width: 26%;
  aspect-ratio: 1;
  right: 4%;
  bottom: 16%;
}

@keyframes ys-theme-character-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(0, -10px, 0) rotate(1.2deg);
  }
}

#ys-theme-cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147482998;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--ys-theme-rgb, 90, 210, 255), .32), transparent 68%);
  opacity: .78;
  mix-blend-mode: screen;
  transform: translate3d(-100px, -100px, 0);
  transition: background-color .18s ease;
}

.ys-theme-click-ripple {
  position: fixed;
  z-index: 2147482997;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1px solid rgba(var(--ys-theme-rgb, 90, 210, 255), .65);
  border-radius: 999px;
  pointer-events: none;
  animation: ys-theme-click-ripple .56s ease-out forwards;
}

@keyframes ys-theme-click-ripple {
  to {
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    opacity: 0;
  }
}

html.ys-theme-pack body > :not(#ys-theme-art):not(#ys-theme-character):not(#ys-theme-cursor-glow):not(.ys-theme-click-ripple):not(#ys-theme-switcher):not(#ys-theme-corner-mark):not(#ys-katana-particles):not(#ys-katana-mark):not(#ys-route-kata) {
  position: relative;
  z-index: 1;
}

html.ys-theme-pack body > #root,
html.ys-theme-pack body > #app,
html.ys-theme-pack body > [id="root"] {
  position: relative;
  z-index: 2;
}

html.ys-theme-pack [class*="bg-background"],
html.ys-theme-pack main.bg-background,
html.ys-theme-pack [data-slot="sidebar"],
html.ys-theme-pack .bg-sidebar {
  background-color: color-mix(in srgb, var(--ys-theme-bg, #08111f) var(--ys-theme-bg-alpha, 82%), transparent) !important;
}

html.ys-theme-pack [class*="bg-card"],
html.ys-theme-pack [class*="bg-popover"],
html.ys-theme-pack table,
html.ys-theme-pack [role="dialog"] {
  color: var(--ys-theme-fg, #f8fafc);
  border-color: var(--ys-theme-line) !important;
  background-color: color-mix(in srgb, var(--ys-theme-card, #101827) 84%, transparent) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px) saturate(135%);
}

html.ys-theme-pack header nav,
html.ys-theme-pack header > div,
html.ys-theme-pack [data-sidebar="sidebar"] {
  border-color: color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 26%, transparent) !important;
}

html.ys-theme-pack header nav a[href="/"] img,
html.ys-theme-pack header nav a[href="/"] svg {
  filter: drop-shadow(0 0 12px rgba(var(--ys-theme-rgb, 90, 210, 255), .34));
}

html.ys-theme-pack header nav a[href="/"] {
  padding: 4px 10px 4px 5px;
  border: 1px solid color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 30%, transparent);
  border-radius: 999px;
  background: var(--brand-pill-bg, rgba(255, 255, 255, .08));
  box-shadow: var(--brand-pill-shadow, 0 10px 28px rgba(0, 0, 0, .18));
  font-family: var(--ys-theme-title-font) !important;
  font-weight: 900;
  isolation: isolate;
  overflow: hidden;
}

html.ys-theme-pack header nav a[href="/"]::before {
  content: "";
  width: 28px;
  height: 28px;
  margin-left: -1px;
  border-radius: var(--brand-mark-radius, 50%);
  background: var(--brand-mark-bg, var(--ys-theme-orb));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 16px rgba(var(--ys-theme-rgb, 90, 210, 255), .36);
}

html.ys-theme-pack header nav a[href="/"] img {
  display: none !important;
}

html.ys-theme-pack button:not(.ys-theme-trigger):not(.ys-theme-option),
html.ys-theme-pack [role="button"]:not(.ys-theme-trigger):not(.ys-theme-option) {
  border-color: color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 22%, transparent);
}

html.ys-theme-pack button:not(.ys-theme-trigger):not(.ys-theme-option):hover,
html.ys-theme-pack a:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 22%, transparent), 0 10px 24px rgba(var(--ys-theme-rgb, 90, 210, 255), .12);
}

html.ys-theme-pack input,
html.ys-theme-pack textarea,
html.ys-theme-pack [role="combobox"] {
  border-color: color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 25%, transparent) !important;
  background-color: color-mix(in srgb, var(--ys-theme-input, #0b1422) 88%, transparent) !important;
  color: var(--ys-theme-fg, #f8fafc) !important;
}

html.ys-theme-pack h1,
html.ys-theme-pack h2,
html.ys-theme-pack h3,
html.ys-theme-pack [class*="font-semibold"],
html.ys-theme-pack [class*="font-bold"] {
  color: var(--ys-theme-heading, var(--ys-theme-fg, #f8fafc));
  font-family: var(--ys-theme-title-font) !important;
}

html.ys-theme-pack p,
html.ys-theme-pack small,
html.ys-theme-pack label,
html.ys-theme-pack [class*="text-muted"],
html.ys-theme-pack [class*="text-secondary"],
html.ys-theme-pack [class*="text-gray"],
html.ys-theme-pack [class*="text-slate"],
html.ys-theme-pack [class*="text-zinc"] {
  color: var(--ys-theme-muted) !important;
}

html.ys-theme-pack [class*="border"],
html.ys-theme-pack hr,
html.ys-theme-pack thead,
html.ys-theme-pack tbody tr {
  border-color: var(--ys-theme-line) !important;
}

html.ys-theme-pack thead,
html.ys-theme-pack th {
  color: var(--ys-theme-heading, var(--ys-theme-fg, #f8fafc)) !important;
  background:
    var(--ys-theme-module-top),
    color-mix(in srgb, var(--ys-theme-card, #101827) 72%, transparent) !important;
}

html.ys-theme-pack tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 5%, transparent) !important;
}

html.ys-theme-pack tbody tr:hover,
html.ys-theme-pack [role="row"]:hover {
  background-color: color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 11%, transparent) !important;
}

html.ys-theme-pack main section,
html.ys-theme-pack main article,
html.ys-theme-pack main div[class*="rounded"][class*="border"],
html.ys-theme-pack main div[class*="bg-card"],
html.ys-theme-pack aside div[class*="rounded"][class*="border"] {
  border-color: var(--ys-theme-line) !important;
}

html.ys-theme-pack main div[class*="rounded"][class*="border"],
html.ys-theme-pack main div[class*="bg-card"],
html.ys-theme-pack main section[class*="rounded"],
html.ys-theme-pack [role="dialog"] {
  position: relative;
  overflow: hidden;
  background-image: var(--ys-theme-module-pattern) !important;
}

html.ys-theme-pack main div[class*="rounded"][class*="border"]::before,
html.ys-theme-pack main div[class*="bg-card"]::before,
html.ys-theme-pack main section[class*="rounded"]::before,
html.ys-theme-pack [role="dialog"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  background: var(--ys-theme-module-top);
  opacity: .84;
}

html.ys-theme-pack nav a,
html.ys-theme-pack aside a,
html.ys-theme-pack [data-sidebar] a,
html.ys-theme-pack [role="menuitem"],
html.ys-theme-pack [role="tab"] {
  color: var(--ys-theme-muted) !important;
}

html.ys-theme-pack nav a:hover,
html.ys-theme-pack aside a:hover,
html.ys-theme-pack [data-state="active"],
html.ys-theme-pack [aria-current="page"],
html.ys-theme-pack [role="tab"][aria-selected="true"] {
  color: var(--ys-theme-heading, var(--ys-theme-fg, #f8fafc)) !important;
  background-color: var(--ys-theme-soft) !important;
}

html.ys-theme-pack [class*="bg-primary"],
html.ys-theme-pack button[type="submit"],
html.ys-theme-pack a[class*="bg-primary"] {
  color: var(--ys-theme-button-fg, #fff) !important;
  background: var(--ys-theme-button-bg, linear-gradient(135deg, rgb(var(--ys-theme-rgb, 90, 210, 255)), #7c3aed)) !important;
  border-color: color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 46%, transparent) !important;
  box-shadow: 0 12px 24px rgba(var(--ys-theme-rgb, 90, 210, 255), .18);
}

html.ys-theme-pack [class*="rounded-full"],
html.ys-theme-pack [data-slot="badge"],
html.ys-theme-pack [class*="badge"] {
  border-color: var(--ys-theme-line) !important;
  color: var(--ys-theme-badge-fg) !important;
  background-color: var(--ys-theme-badge-bg) !important;
}

html.ys-theme-pack [class*="text-green"],
html.ys-theme-pack [class*="bg-green"] {
  color: var(--ys-theme-success, #7cf7c7) !important;
}

html.ys-theme-pack [class*="bg-green"] {
  background-color: color-mix(in srgb, var(--ys-theme-success, #7cf7c7) 22%, transparent) !important;
}

html.ys-theme-pack [class*="text-red"],
html.ys-theme-pack [class*="bg-red"] {
  color: var(--ys-theme-danger, #ff8b8b) !important;
}

html.ys-theme-pack [class*="bg-red"] {
  background-color: color-mix(in srgb, var(--ys-theme-danger, #ff8b8b) 22%, transparent) !important;
}

html.ys-theme-pack [class*="text-yellow"],
html.ys-theme-pack [class*="bg-yellow"] {
  color: var(--ys-theme-warning, #ffd36a) !important;
}

html.ys-theme-pack [class*="bg-yellow"] {
  background-color: color-mix(in srgb, var(--ys-theme-warning, #ffd36a) 24%, transparent) !important;
}

html.ys-theme-pack body[data-ys-theme-route="home"] main > div:first-child,
html.ys-theme-pack body[data-ys-theme-route="home"] main section:first-of-type {
  background:
    radial-gradient(circle at 16% 18%, rgba(var(--ys-theme-rgb, 90, 210, 255), .18), transparent 26rem),
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .10), transparent 22rem) !important;
}

html.ys-theme-pack body[data-ys-theme-route="dashboard"] main div[class*="grid"] > div[class*="rounded"],
html.ys-theme-pack body[data-ys-theme-route="pricing"] main div[class*="grid"] > div[class*="rounded"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 16px 38px rgba(0, 0, 0, .16),
    0 0 0 1px color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 9%, transparent);
}

html.ys-theme-pack body[data-ys-theme-route="pricing"] main div[class*="grid"] > div[class*="rounded"]::after,
html.ys-theme-pack body[data-ys-theme-route="channels"] main div[class*="rounded"][class*="border"]::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -28px;
  width: 96px;
  aspect-ratio: 1;
  border-radius: 999px;
  pointer-events: none;
  background: var(--ys-theme-orb);
  opacity: .12;
  filter: blur(.2px);
}

html.ys-theme-pack body[data-ys-theme-route="playground"] textarea,
html.ys-theme-pack body[data-ys-theme-route="playground"] [contenteditable="true"],
html.ys-theme-pack body[data-ys-theme-route="playground"] [role="textbox"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 18%, transparent) !important;
}

html.ys-theme-pack body[data-ys-theme-route="settings"] main form,
html.ys-theme-pack body[data-ys-theme-route="settings"] main section {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 8%, transparent), transparent 34%),
    var(--ys-theme-module-pattern) !important;
}

html.ys-theme-pack body[data-ys-theme-route="docs"] main,
html.ys-theme-pack body[data-ys-theme-route="docs"] article {
  color: var(--ys-theme-fg, #f8fafc);
  line-height: 1.72;
}

html.ys-theme-pack body[data-ys-theme-route="docs"] code,
html.ys-theme-pack body[data-ys-theme-route="docs"] pre,
html.ys-theme-pack code,
html.ys-theme-pack pre {
  border-color: var(--ys-theme-line) !important;
  color: var(--ys-theme-heading, var(--ys-theme-fg, #f8fafc)) !important;
  background-color: color-mix(in srgb, var(--ys-theme-input, #0b1220) 86%, transparent) !important;
}

html.ys-theme-pack body[data-ys-theme-route="home"] #ys-theme-character {
  right: clamp(28px, 6vw, 96px);
  bottom: clamp(56px, 8vh, 104px);
  width: clamp(210px, 23vw, 360px);
  opacity: calc(var(--ys-theme-character-opacity) + .08);
}

html.ys-theme-pack body[data-ys-theme-route="pricing"] #ys-theme-character {
  right: clamp(10px, 2vw, 32px);
  bottom: clamp(80px, 12vh, 150px);
  width: clamp(138px, 14vw, 220px);
  opacity: .46;
}

html.ys-theme-pack body[data-ys-theme-route="playground"] #ys-theme-character {
  right: clamp(8px, 1.8vw, 28px);
  bottom: clamp(138px, 20vh, 220px);
  width: clamp(112px, 11vw, 180px);
  opacity: .34;
}

html.ys-theme-pack body[data-ys-theme-route="dashboard"] #ys-theme-character,
html.ys-theme-pack body[data-ys-theme-route="channels"] #ys-theme-character,
html.ys-theme-pack body[data-ys-theme-route="settings"] #ys-theme-character {
  right: clamp(8px, 1.4vw, 22px);
  bottom: clamp(86px, 13vh, 150px);
  width: clamp(92px, 9vw, 150px);
  opacity: .24;
}

html.ys-theme-pack body[data-ys-theme-route="docs"] #ys-theme-character {
  right: clamp(16px, 3vw, 54px);
  top: clamp(92px, 14vh, 150px);
  bottom: auto;
  width: clamp(116px, 11vw, 180px);
  opacity: .30;
}

html.ys-theme-changing body > #root {
  animation: ys-theme-page-swap .20s ease both;
}

html.ys-theme-changing *,
html.ys-theme-changing *::before,
html.ys-theme-changing *::after {
  transition-duration: .01ms !important;
}

html.ys-theme-changing #ys-theme-page-decor,
html.ys-theme-changing #ys-theme-character,
html.ys-theme-changing .ys-theme-deco {
  animation-play-state: paused !important;
  transition: none !important;
}

html.ys-theme-changing .ys-theme-deco,
html.ys-theme-changing .ys-theme-page-deco {
  opacity: .16 !important;
}

@keyframes ys-theme-page-swap {
  0% {
    opacity: .88;
  }

  100% {
    opacity: 1;
  }
}

html.ys-theme-pack [data-ys-ui] {
  transition: var(--ys-theme-transition), opacity .18s ease;
}

html.ys-theme-pack [data-ys-deco] {
  position: relative;
}

html.ys-theme-pack .ys-theme-deco {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: block;
  background-image: var(--ys-deco-sprite);
  background-repeat: no-repeat;
  background-position: var(--ys-deco-pos, 0 50%);
  background-size: 600% 100%;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .18));
  opacity: .96;
  transform: translate3d(0, 0, 0) rotate(var(--ys-deco-rotate, -3deg));
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

html.ys-theme-pack [data-ys-deco]::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background-image: var(--ys-deco-sprite);
  background-repeat: no-repeat;
  background-position: var(--ys-deco-pos, 0 50%);
  background-size: 600% 100%;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .20));
  opacity: .92;
}

html.ys-theme-pack [data-ys-deco="nav"]::after {
  right: -8px;
  top: -8px;
  width: 24px;
  height: 24px;
  opacity: .78;
}

html.ys-theme-pack [data-ys-deco="nav"] > .ys-theme-deco {
  right: -7px;
  top: -7px;
  width: 22px;
  height: 22px;
  opacity: .82;
}

html.ys-theme-pack [data-ys-deco="button"]::after {
  right: -10px;
  top: -14px;
  width: 34px;
  height: 34px;
}

html.ys-theme-pack [data-ys-deco="button"] > .ys-theme-deco {
  right: -10px;
  top: -13px;
  width: 34px;
  height: 34px;
}

html.ys-theme-pack [data-ys-deco="button-mini"]::after {
  right: -7px;
  top: -7px;
  width: 20px;
  height: 20px;
  opacity: .76;
}

html.ys-theme-pack [data-ys-deco="button-mini"] > .ys-theme-deco {
  right: -6px;
  top: -6px;
  width: 20px;
  height: 20px;
  opacity: .78;
}

html.ys-theme-pack [data-ys-deco="card"]::after,
html.ys-theme-pack [data-ys-deco="model"]::after {
  right: 10px;
  bottom: 8px;
  width: clamp(44px, 5vw, 72px);
  height: clamp(44px, 5vw, 72px);
  opacity: .42;
}

html.ys-theme-pack [data-ys-deco="card"] > .ys-theme-deco,
html.ys-theme-pack [data-ys-deco="model"] > .ys-theme-deco {
  right: 10px;
  bottom: 8px;
  width: clamp(46px, 5vw, 76px);
  height: clamp(46px, 5vw, 76px);
  opacity: .58;
}

html.ys-theme-pack [data-ys-deco="model"]::after {
  width: clamp(54px, 6vw, 86px);
  height: clamp(54px, 6vw, 86px);
  opacity: .50;
}

html.ys-theme-pack [data-ys-deco="model"] > .ys-theme-deco {
  width: clamp(62px, 6.5vw, 98px);
  height: clamp(62px, 6.5vw, 98px);
  opacity: .68;
}

html.ys-theme-pack [data-ys-deco="card"]:hover::after,
html.ys-theme-pack [data-ys-deco="model"]:hover::after,
html.ys-theme-pack [data-ys-deco="button"]:hover::after {
  opacity: .96;
  transform: translateY(-2px) rotate(-2deg);
}

html.ys-theme-pack [data-ys-deco]:hover > .ys-theme-deco {
  opacity: 1;
  transform: translateY(-2px) rotate(2deg) scale(1.04);
}

#ys-theme-page-decor {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.ys-theme-page-deco {
  position: absolute;
  display: block;
  width: clamp(56px, 8vw, 120px);
  height: clamp(56px, 8vw, 120px);
  background-image: var(--ys-deco-sprite);
  background-repeat: no-repeat;
  background-position: var(--ys-deco-pos, 0 50%);
  background-size: 600% 100%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .20));
  opacity: .38;
  animation: ys-theme-page-deco-float 8.5s ease-in-out infinite;
}

.ys-theme-page-deco-0 {
  left: clamp(16px, 4vw, 62px);
  bottom: clamp(64px, 11vh, 132px);
}

.ys-theme-page-deco-1 {
  left: clamp(90px, 13vw, 220px);
  bottom: clamp(28px, 5vh, 68px);
  animation-delay: -.9s;
}

.ys-theme-page-deco-2 {
  right: clamp(18px, 4vw, 72px);
  bottom: clamp(118px, 18vh, 220px);
  animation-delay: -1.8s;
}

.ys-theme-page-deco-3 {
  right: clamp(88px, 12vw, 210px);
  top: clamp(86px, 13vh, 160px);
  width: clamp(42px, 5vw, 84px);
  height: clamp(42px, 5vw, 84px);
  animation-delay: -2.4s;
}

.ys-theme-page-deco-4 {
  left: clamp(12px, 2vw, 36px);
  top: clamp(92px, 16vh, 190px);
  width: clamp(42px, 5vw, 82px);
  height: clamp(42px, 5vw, 82px);
  animation-delay: -3.2s;
}

.ys-theme-page-deco-5 {
  right: clamp(128px, 20vw, 320px);
  bottom: clamp(38px, 7vh, 92px);
  animation-delay: -4s;
}

@keyframes ys-theme-page-deco-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }

  50% {
    transform: translate3d(0, -9px, 0) rotate(2deg);
  }
}

html.ys-theme-pack [data-ys-ui="topbar"] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ys-theme-panel, #101827) 88%, transparent), color-mix(in srgb, var(--ys-theme-panel, #101827) 64%, transparent)),
    var(--ys-theme-module-pattern) !important;
  border-color: var(--ys-theme-line) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px) saturate(150%);
}

html.ys-theme-pack [data-ys-ui="sidebar"] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ys-theme-bg, #08111f) 92%, transparent), color-mix(in srgb, var(--ys-theme-panel, #101827) 82%, transparent)),
    var(--ys-theme-module-pattern) !important;
  border-color: var(--ys-theme-line) !important;
}

html.ys-theme-pack [data-ys-ui="nav-link"],
html.ys-theme-pack [data-ys-ui="sidebar-button"] {
  border: 1px solid transparent !important;
  color: var(--ys-theme-muted) !important;
}

html.ys-theme-pack [data-ys-ui="nav-link"]:hover,
html.ys-theme-pack [data-ys-ui="sidebar-button"]:hover {
  color: var(--ys-theme-heading, var(--ys-theme-fg, #f8fafc)) !important;
  background: var(--ys-theme-soft) !important;
  border-color: var(--ys-theme-line) !important;
  transform: translateY(-1px);
}

html.ys-theme-pack [data-ys-ui="nav-active"] {
  color: var(--ys-theme-heading, var(--ys-theme-fg, #f8fafc)) !important;
  border: 1px solid var(--ys-theme-line) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 17%, transparent), transparent),
    color-mix(in srgb, var(--ys-theme-panel, #101827) 68%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 8px 18px rgba(var(--ys-theme-rgb, 90, 210, 255), .10);
}

html.ys-theme-pack [data-ys-ui="action-button"],
html.ys-theme-pack [data-ys-ui="danger-button"],
html.ys-theme-pack [data-ys-ui="utility-button"],
html.ys-theme-pack [data-ys-ui="icon-button"],
html.ys-theme-pack [data-ys-ui="select"] {
  border: 1px solid var(--ys-theme-line) !important;
  color: var(--ys-theme-fg, #f8fafc) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .18), transparent 28px),
    color-mix(in srgb, var(--ys-theme-input, #0b1220) 82%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

html.ys-theme-pack [data-ys-ui="action-button"] {
  color: var(--ys-theme-button-fg, #fff) !important;
  background: var(--ys-theme-button-bg) !important;
  box-shadow: 0 12px 26px rgba(var(--ys-theme-rgb, 90, 210, 255), .18), inset 0 1px 0 rgba(255, 255, 255, .22);
}

html.ys-theme-pack [data-ys-ui="danger-button"] {
  color: var(--ys-theme-danger, #ff8b8b) !important;
  background: color-mix(in srgb, var(--ys-theme-danger, #ff8b8b) 12%, var(--ys-theme-input, #0b1220)) !important;
}

html.ys-theme-pack [data-ys-ui="icon-button"] {
  border-radius: 12px !important;
}

html.ys-theme-pack [data-ys-ui="action-button"]:hover,
html.ys-theme-pack [data-ys-ui="utility-button"]:hover,
html.ys-theme-pack [data-ys-ui="icon-button"]:hover,
html.ys-theme-pack [data-ys-ui="select"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(var(--ys-theme-rgb, 90, 210, 255), .16), inset 0 1px 0 rgba(255, 255, 255, .16);
}

html.ys-theme-pack [data-ys-ui="field"] {
  border: 1px solid var(--ys-theme-line) !important;
  color: var(--ys-theme-fg, #f8fafc) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ys-theme-input, #0b1220) 94%, transparent), color-mix(in srgb, var(--ys-theme-input, #0b1220) 78%, transparent)),
    var(--ys-theme-module-pattern) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px transparent;
}

html.ys-theme-pack [data-ys-ui="field"]:focus,
html.ys-theme-pack [data-ys-ui="field"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

html.ys-theme-pack [data-ys-ui="surface-card"],
html.ys-theme-pack [data-ys-ui="metric-card"],
html.ys-theme-pack [data-ys-ui="model-card"],
html.ys-theme-pack [data-ys-ui="code-panel"],
html.ys-theme-pack [data-ys-ui="alert"] {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ys-theme-line) !important;
  color: var(--ys-theme-fg, #f8fafc) !important;
  background:
    var(--ys-theme-module-pattern),
    color-mix(in srgb, var(--ys-theme-card, #101827) 86%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 16px 36px rgba(0, 0, 0, .16);
}

html.ys-theme-pack [data-ys-ui="surface-card"]::before,
html.ys-theme-pack [data-ys-ui="metric-card"]::before,
html.ys-theme-pack [data-ys-ui="model-card"]::before,
html.ys-theme-pack [data-ys-ui="code-panel"]::before,
html.ys-theme-pack [data-ys-ui="alert"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
  background: var(--ys-theme-module-top);
}

html.ys-theme-pack [data-ys-ui="metric-card"] {
  background:
    radial-gradient(circle at 88% 18%, rgba(var(--ys-theme-rgb, 90, 210, 255), .20), transparent 72px),
    var(--ys-theme-module-pattern),
    color-mix(in srgb, var(--ys-theme-card, #101827) 88%, transparent) !important;
}

html.ys-theme-pack [data-ys-ui="model-card"] {
  border-radius: 14px !important;
}

html.ys-theme-pack [data-ys-ui="model-card"]::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 116px;
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 999px;
  background: var(--ys-theme-orb);
  opacity: .13;
}

html.ys-theme-pack [data-ys-ui="code-panel"],
html.ys-theme-pack pre[data-ys-ui="code-panel"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 34%),
    color-mix(in srgb, #020617 72%, var(--ys-theme-input, #0b1220)) !important;
}

html.ys-theme-pack [data-ys-ui="alert"] {
  color: var(--ys-theme-danger, #ff8b8b) !important;
  border-color: color-mix(in srgb, var(--ys-theme-danger, #ff8b8b) 46%, transparent) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ys-theme-danger, #ff8b8b) 14%, transparent), transparent 48%),
    color-mix(in srgb, var(--ys-theme-card, #101827) 86%, transparent) !important;
}

html.ys-theme-pack [data-ys-ui="data-table"] {
  overflow: hidden;
  border: 1px solid var(--ys-theme-line) !important;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ys-theme-card, #101827) 82%, transparent) !important;
}

html.ys-theme-pack [data-ys-ui="data-row"] {
  background-image: linear-gradient(90deg, color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 5%, transparent), transparent 38%) !important;
}

html.ys-theme-pack [data-ys-ui="data-row"]:hover {
  background-image: linear-gradient(90deg, color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 13%, transparent), transparent 62%) !important;
}

html.ys-theme-pack [data-ys-ui="chat-user"],
html.ys-theme-pack [data-ys-ui="chat-assistant"] {
  border: 1px solid var(--ys-theme-line);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}

html.ys-theme-pack [data-ys-ui="chat-user"] {
  background: color-mix(in srgb, rgb(var(--ys-theme-rgb, 90, 210, 255)) 18%, transparent) !important;
}

html.ys-theme-pack [data-ys-ui="chat-assistant"] {
  background: color-mix(in srgb, var(--ys-theme-card, #101827) 82%, transparent) !important;
}

html.ys-theme-sponge,
html.ys-theme-sponge.dark {
  color-scheme: dark;
  --background: 224 74% 10%;
  --foreground: 210 100% 96%;
  --card: 216 48% 16%;
  --card-foreground: 210 100% 96%;
  --popover: 216 48% 16%;
  --popover-foreground: 210 100% 96%;
  --primary: 194 90% 58%;
  --primary-foreground: 48 100% 98%;
  --secondary: 48 100% 70%;
  --secondary-foreground: 224 65% 12%;
  --muted: 216 40% 22%;
  --muted-foreground: 207 56% 78%;
  --accent: 338 90% 67%;
  --accent-foreground: 48 100% 98%;
  --border: 194 45% 38%;
  --input: 216 42% 18%;
  --ring: 204 92% 45%;
  --ys-theme-bg: #06123b;
  --ys-theme-card: #102449;
  --ys-theme-input: #0b1d3d;
  --ys-theme-panel: #0b1a3d;
  --ys-theme-fg: #eaf8ff;
  --ys-theme-heading: #ffffff;
  --ys-theme-muted: #a9cce6;
  --ys-theme-rgb: 86, 218, 255;
  --ys-theme-orb: radial-gradient(circle at 30% 25%, #fff, #ffe95d 31%, #56daff 32% 64%, #ff8ac0 65%);
  --ys-theme-font: "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --ys-theme-title-font: "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --ys-theme-art: linear-gradient(180deg, rgba(3, 9, 46, .08), rgba(3, 9, 46, .26)), url("/theme/assets/theme-pack-sponge-night-scene.svg");
  --ys-theme-art-opacity: .82;
  --ys-theme-art-blend: normal;
  --ys-theme-character: none;
  --ys-theme-cursor: url("/theme/assets/theme-pack-sponge-cursor.svg") 4 4;
  --ys-theme-character-opacity: .0;
  --ys-theme-line: rgba(116, 222, 255, .30);
  --ys-theme-soft: rgba(86, 218, 255, .13);
  --ys-theme-module-top: linear-gradient(90deg, #56daff, #ffe95d 48%, #ff8ac0 86%);
  --ys-theme-module-pattern:
    radial-gradient(circle at 18px 18px, rgba(255, 255, 255, .14) 0 5px, transparent 6px),
    linear-gradient(135deg, rgba(86, 218, 255, .14), transparent 48%);
  --ys-theme-button-bg: linear-gradient(135deg, #1598d3, #56daff 48%, #ff8ac0);
  --ys-theme-button-fg: #ffffff;
  --ys-theme-badge-bg: rgba(255, 233, 93, .46);
  --ys-theme-badge-fg: #073452;
  --ys-theme-success: #007f69;
  --ys-theme-warning: #b35d00;
  --ys-theme-danger: #d63d6a;
  --brand-pill-bg: linear-gradient(135deg, rgba(255, 244, 103, .92), rgba(86, 218, 255, .78));
  --brand-pill-shadow: 0 12px 30px rgba(0, 148, 201, .24);
  --brand-mark-radius: 32% 48% 36% 52%;
  --brand-mark-bg: radial-gradient(circle at 32% 30%, #fff 0 9%, transparent 10%), radial-gradient(circle at 68% 68%, rgba(0, 139, 198, .45) 0 10%, transparent 11%), linear-gradient(135deg, #ffe95d, #f7c833);
  --mark-radius: 30% 48% 34% 52%;
  --mark-mask: radial-gradient(circle at 34% 30%, #000 0 9%, transparent 10%), radial-gradient(circle at 65% 42%, #000 0 7%, transparent 8%), radial-gradient(circle at 45% 68%, #000 0 10%, transparent 11%), linear-gradient(#000 0 0);
  --mark-bg: linear-gradient(135deg, #ffe75a, #ffd73d 42%, #f6be2d);
  --mark-inner-radius: 999px;
  --mark-inner: radial-gradient(circle, rgba(255, 255, 255, .92), transparent 58%);
}

html.ys-theme-sponge body {
  background:
    radial-gradient(circle at 52% 16%, rgba(255, 255, 255, .20), transparent 20rem),
    radial-gradient(circle at 78% 72%, rgba(255, 185, 76, .16), transparent 18rem),
    linear-gradient(180deg, #020938 0%, #08266b 52%, #061334 100%) !important;
}

html.ys-theme-sponge [class*="bg-card"],
html.ys-theme-sponge [class*="bg-popover"],
html.ys-theme-sponge table {
  background-image:
    radial-gradient(circle at 18px 18px, rgba(255, 255, 255, .34) 0 5px, transparent 6px),
    linear-gradient(135deg, rgba(255, 255, 255, .36), transparent 42%) !important;
}

html.ys-theme-sponge body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 55% 100%, rgba(255, 157, 46, .22), transparent 24%),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 74px);
  opacity: .62;
}

html.ys-theme-sponge #ys-katana-particles,
html.ys-theme-sponge #ys-katana-mark {
  display: none !important;
}

html.ys-theme-larva,
html.ys-theme-larva.dark {
  color-scheme: light;
  --background: 42 96% 89%;
  --foreground: 18 55% 18%;
  --card: 39 100% 96%;
  --card-foreground: 18 55% 18%;
  --popover: 39 100% 97%;
  --popover-foreground: 18 55% 18%;
  --primary: 13 84% 53%;
  --primary-foreground: 39 100% 98%;
  --secondary: 51 100% 64%;
  --secondary-foreground: 18 55% 18%;
  --muted: 36 68% 82%;
  --muted-foreground: 22 32% 42%;
  --accent: 205 76% 49%;
  --accent-foreground: 39 100% 98%;
  --border: 32 58% 63%;
  --input: 40 80% 88%;
  --ring: 13 84% 55%;
  --ys-theme-bg: #ffdf81;
  --ys-theme-card: #fff4c7;
  --ys-theme-input: #fff8d9;
  --ys-theme-panel: #ffcf4d;
  --ys-theme-fg: #43200f;
  --ys-theme-heading: #351305;
  --ys-theme-muted: #7a4323;
  --ys-theme-rgb: 238, 74, 39;
  --ys-theme-orb: radial-gradient(circle at 34% 30%, #fff, #ffdf40 34%, #ee4a27 35% 62%, #1c92d2 63%);
  --ys-theme-font: "Trebuchet MS", "Arial Rounded MT Bold", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --ys-theme-title-font: Impact, "Arial Black", "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
  --ys-theme-art: linear-gradient(180deg, rgba(255, 223, 129, .58), rgba(255, 244, 199, .82)), url("/theme/assets/creature-mascot-sprites.jpg"), url("/theme/assets/theme-pack-larva-bg.svg");
  --ys-theme-art-opacity: .32;
  --ys-theme-art-blend: normal;
  --ys-theme-character: url("/theme/assets/theme-pack-larva-character.svg");
  --ys-theme-cursor: url("/theme/assets/theme-pack-larva-cursor.svg") 4 4;
  --ys-theme-character-opacity: .75;
  --ys-theme-line: rgba(238, 74, 39, .30);
  --ys-theme-soft: rgba(238, 74, 39, .12);
  --ys-theme-module-top: linear-gradient(90deg, #ee4a27, #ffd51e 42%, #1c92d2 88%);
  --ys-theme-module-pattern:
    repeating-linear-gradient(-8deg, rgba(238, 74, 39, .08) 0 8px, transparent 8px 22px),
    linear-gradient(135deg, rgba(255, 255, 255, .40), transparent 48%);
  --ys-theme-button-bg: linear-gradient(135deg, #ee4a27, #ff9f1c 54%, #ffd51e);
  --ys-theme-button-fg: #321205;
  --ys-theme-badge-bg: rgba(255, 213, 30, .46);
  --ys-theme-badge-fg: #351305;
  --ys-theme-success: #138a56;
  --ys-theme-warning: #b14f00;
  --ys-theme-danger: #d53822;
  --brand-pill-bg: linear-gradient(135deg, rgba(255, 219, 56, .94), rgba(255, 111, 55, .82));
  --brand-pill-shadow: 0 12px 32px rgba(237, 91, 27, .26);
  --brand-mark-radius: 55% 45% 58% 42%;
  --brand-mark-bg: radial-gradient(circle at 35% 34%, #2f1408 0 8%, transparent 9%), radial-gradient(circle at 66% 34%, #2f1408 0 8%, transparent 9%), linear-gradient(90deg, #ffd51e 0 49%, #f25a2e 50%);
  --mark-radius: 60% 46% 60% 44%;
  --mark-bg: linear-gradient(90deg, #ffd51e 0 47%, #f25a2e 48% 100%);
  --mark-mask: linear-gradient(#000 0 0);
  --mark-inner-radius: 50%;
  --mark-inner: radial-gradient(circle at 36% 34%, #281005 0 8%, transparent 9%), radial-gradient(circle at 64% 34%, #281005 0 8%, transparent 9%), radial-gradient(ellipse at 50% 67%, rgba(42, 16, 5, .74) 0 13%, transparent 14%);
}

html.ys-theme-larva body {
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 105, 55, .24), transparent 18rem),
    radial-gradient(circle at 88% 18%, rgba(29, 146, 210, .20), transparent 20rem),
    radial-gradient(circle at 74% 88%, rgba(255, 225, 55, .35), transparent 21rem),
    linear-gradient(180deg, #ffe58e 0%, #ffc555 52%, #ffefb8 100%) !important;
}

html.ys-theme-larva [class*="bg-card"],
html.ys-theme-larva [class*="bg-popover"],
html.ys-theme-larva table {
  background-image:
    repeating-linear-gradient(-8deg, rgba(238, 74, 39, .08) 0 8px, transparent 8px 22px),
    linear-gradient(135deg, rgba(255, 255, 255, .34), transparent 48%) !important;
}

html.ys-theme-larva body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 94%, rgba(98, 55, 25, .20), transparent 28%),
    radial-gradient(ellipse at 76% 98%, rgba(238, 74, 39, .20), transparent 25%),
    repeating-radial-gradient(circle at 50% 0%, rgba(98, 55, 25, .12) 0 2px, transparent 3px 26px);
  opacity: .66;
}

html.ys-theme-larva #ys-katana-particles,
html.ys-theme-larva #ys-katana-mark {
  display: none !important;
}

html.ys-theme-katana,
html.ys-theme-katana.dark {
  color-scheme: dark;
  --ys-theme-bg: #03040c;
  --ys-theme-card: #101827;
  --ys-theme-input: #0b1220;
  --ys-theme-panel: #0a1020;
  --ys-theme-fg: #eef5ff;
  --ys-theme-heading: #ffffff;
  --ys-theme-muted: #a7c2d9;
  --ys-theme-rgb: 92, 218, 255;
  --ys-theme-orb: linear-gradient(135deg, #5ad2ff, #b57dff 52%, #ff6048);
  --ys-theme-font: Inter, "SF Pro Text", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ys-theme-title-font: Lora, Georgia, "Times New Roman", serif;
  --ys-theme-art: linear-gradient(180deg, rgba(3, 4, 12, .52), rgba(3, 4, 12, .78)), url("/theme/assets/blade-courtyard-bg.jpg"), url("/theme/assets/theme-pack-katana-bg.svg");
  --ys-theme-art-opacity: .46;
  --ys-theme-art-blend: screen;
  --ys-theme-character: url("/theme/assets/theme-pack-katana-character.svg");
  --ys-theme-cursor: url("/theme/assets/theme-pack-katana-cursor.svg") 4 4;
  --ys-theme-character-opacity: .70;
  --ys-theme-line: rgba(92, 218, 255, .22);
  --ys-theme-soft: rgba(92, 218, 255, .10);
  --ys-theme-module-top: linear-gradient(90deg, #5ad2ff, #b57dff 50%, #ff6048 92%);
  --ys-theme-module-pattern:
    linear-gradient(135deg, rgba(92, 218, 255, .10), transparent 42%),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 18px);
  --ys-theme-button-bg: linear-gradient(135deg, #0bc5ea, #7c3aed 52%, #ff6048);
  --ys-theme-button-fg: #ffffff;
  --ys-theme-badge-bg: rgba(92, 218, 255, .14);
  --ys-theme-badge-fg: #e8f8ff;
  --ys-theme-success: #7cf7c7;
  --ys-theme-warning: #ffd36a;
  --ys-theme-danger: #ff8b8b;
  --brand-pill-bg: linear-gradient(135deg, rgba(92, 218, 255, .14), rgba(181, 125, 255, .16));
  --brand-pill-shadow: 0 12px 32px rgba(92, 218, 255, .12);
  --brand-mark-radius: 50%;
  --brand-mark-bg: conic-gradient(from 38deg, #5ad2ff, #b57dff, #ff6048, #5ad2ff);
  --mark-radius: 50%;
  --mark-bg: conic-gradient(from 38deg, rgba(92, 218, 255, .88), transparent 21%, rgba(181, 125, 255, .72), transparent 58%, rgba(255, 96, 72, .68), transparent);
  --mark-mask: radial-gradient(circle, transparent 42%, #000 43% 58%, transparent 59%);
  --mark-inner-radius: 12px;
  --mark-inner: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(92, 218, 255, .22) 46%, rgba(255, 96, 72, .58));
  --mark-rotate: -34deg;
}

html.ys-theme-katana #ys-theme-corner-mark {
  opacity: .34;
}

@media (max-width: 700px) {
  #ys-theme-switcher {
    right: 10px;
    bottom: 10px;
  }

  .ys-theme-trigger {
    width: 38px;
    padding: 0;
    justify-content: center;
  }

  .ys-theme-trigger span {
    display: none;
  }

  #ys-theme-corner-mark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ys-theme-pack *,
  html.ys-theme-pack *::before,
  html.ys-theme-pack *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

html.ys-theme-pack body > #ys-theme-art {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

html.ys-theme-pack body > #ys-theme-character {
  position: fixed !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

html.ys-theme-pack body > #ys-theme-cursor-glow,
html.ys-theme-pack body > .ys-theme-click-ripple {
  position: fixed !important;
  z-index: 2147482997 !important;
  pointer-events: none !important;
}

html.ys-theme-pack body > #ys-theme-switcher {
  position: fixed !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  top: auto !important;
  z-index: 2147483000 !important;
  width: max-content !important;
  max-width: calc(100vw - 28px) !important;
  pointer-events: auto !important;
}

html.ys-theme-pack body > #ys-theme-switcher[data-floating="true"] {
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

html.ys-theme-pack body > #ys-theme-switcher .ys-theme-menu {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 8px) !important;
}

html.ys-theme-pack body > #ys-theme-switcher[data-floating="true"] .ys-theme-menu {
  right: 0 !important;
  left: auto !important;
}

html.ys-theme-pack body > #ys-theme-switcher[data-open="false"] .ys-theme-menu {
  visibility: hidden !important;
}

html.ys-theme-pack body > #ys-theme-switcher[data-open="true"] .ys-theme-menu {
  visibility: visible !important;
}

html.ys-theme-pack body [data-ys-ui="surface-card"],
html.ys-theme-pack body [data-ys-ui="metric-card"],
html.ys-theme-pack body [data-ys-ui="model-card"],
html.ys-theme-pack body [data-ys-ui="code-panel"],
html.ys-theme-pack body [data-ys-ui="alert"] {
  border-color: var(--ys-theme-line) !important;
  background:
    var(--ys-theme-module-pattern),
    color-mix(in srgb, var(--ys-theme-card, #101827) 86%, transparent) !important;
  color: var(--ys-theme-fg, #f8fafc) !important;
}

html.ys-theme-pack body [data-ys-ui="action-button"] {
  background: var(--ys-theme-button-bg) !important;
  color: var(--ys-theme-button-fg, #fff) !important;
}

html.ys-theme-pack body [data-ys-ui="field"],
html.ys-theme-pack body [data-ys-ui="select"],
html.ys-theme-pack body [data-ys-ui="icon-button"],
html.ys-theme-pack body [data-ys-ui="utility-button"] {
  border-color: var(--ys-theme-line) !important;
  background-color: color-mix(in srgb, var(--ys-theme-input, #0b1220) 86%, transparent) !important;
  color: var(--ys-theme-fg, #f8fafc) !important;
}

html.ys-theme-pack body [data-ys-ui="nav-active"] {
  border-color: var(--ys-theme-line) !important;
  background-color: var(--ys-theme-soft) !important;
  color: var(--ys-theme-heading, var(--ys-theme-fg, #f8fafc)) !important;
}

html.ys-theme-pack body [data-ys-deco]::after {
  display: none !important;
}

html.ys-theme-pack body [data-ys-deco="nav"]::after {
  right: -8px !important;
  top: -8px !important;
  width: 24px !important;
  height: 24px !important;
  opacity: .78 !important;
}

html.ys-theme-pack body [data-ys-deco="button"]::after {
  right: -10px !important;
  top: -14px !important;
  width: 34px !important;
  height: 34px !important;
  opacity: .92 !important;
}

html.ys-theme-pack body [data-ys-deco="button-mini"]::after {
  right: -7px !important;
  top: -7px !important;
  width: 20px !important;
  height: 20px !important;
  opacity: .76 !important;
}

html.ys-theme-pack body [data-ys-deco="card"]::after,
html.ys-theme-pack body [data-ys-deco="model"]::after {
  right: 10px !important;
  bottom: 8px !important;
  top: auto !important;
  width: clamp(44px, 5vw, 72px) !important;
  height: clamp(44px, 5vw, 72px) !important;
  border-radius: 0 !important;
  opacity: .44 !important;
}

html.ys-theme-pack body [data-ys-deco] > .ys-theme-deco {
  position: absolute !important;
  z-index: 4 !important;
  pointer-events: none !important;
  display: block !important;
  background-image: var(--ys-deco-sprite) !important;
  background-repeat: no-repeat !important;
  background-position: var(--ys-deco-pos, 0 50%) !important;
  background-size: 600% 100% !important;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .18)) !important;
}

html.ys-theme-pack body [data-ys-deco="nav"] > .ys-theme-deco {
  right: -6px !important;
  top: -7px !important;
  width: 22px !important;
  height: 22px !important;
  opacity: .82 !important;
}

html.ys-theme-pack body [data-ys-deco="button"] > .ys-theme-deco {
  right: -10px !important;
  top: -13px !important;
  width: 34px !important;
  height: 34px !important;
  opacity: .94 !important;
}

html.ys-theme-pack body [data-ys-deco="button-mini"] > .ys-theme-deco {
  right: -6px !important;
  top: -6px !important;
  width: 20px !important;
  height: 20px !important;
  opacity: .78 !important;
}

html.ys-theme-pack body [data-ys-deco="card"] > .ys-theme-deco,
html.ys-theme-pack body [data-ys-deco="model"] > .ys-theme-deco {
  right: 10px !important;
  bottom: 8px !important;
  top: auto !important;
  width: clamp(46px, 5vw, 76px) !important;
  height: clamp(46px, 5vw, 76px) !important;
  opacity: .58 !important;
}

html.ys-theme-pack body [data-ys-deco="model"] > .ys-theme-deco {
  width: clamp(62px, 6.5vw, 98px) !important;
  height: clamp(62px, 6.5vw, 98px) !important;
  opacity: .68 !important;
}

html.ys-theme-pack body [data-ys-deco="model"]::after {
  width: clamp(54px, 6vw, 86px) !important;
  height: clamp(54px, 6vw, 86px) !important;
  opacity: .52 !important;
}

html.ys-theme-pack header nav a[href="/"]::before {
  display: none !important;
}

html.ys-theme-pack header nav a[href="/"] img {
  display: inline-block !important;
}

html.ys-theme-pack header nav a[href="/"] {
  color: var(--ys-theme-heading, var(--ys-theme-fg, #f8fafc)) !important;
}

html.ys-theme-sponge body,
html.ys-theme-larva body {
  text-shadow: none !important;
}

html.ys-theme-sponge {
  --ys-theme-bg: #06123b;
  --ys-theme-card: #102449;
  --ys-theme-input: #0b1d3d;
  --ys-theme-panel: #0b1a3d;
  --ys-theme-fg: #eaf8ff;
  --ys-theme-heading: #ffffff;
  --ys-theme-muted: #a9cce6;
  --ys-theme-line: rgba(116, 222, 255, .30);
  --ys-theme-soft: rgba(86, 218, 255, .13);
  --ys-theme-badge-bg: rgba(255, 232, 93, .20);
  --ys-theme-badge-fg: #fff6ba;
}

html.ys-theme-sponge #ys-theme-page-decor {
  background:
    radial-gradient(circle at 55% 86%, rgba(255, 149, 40, .18), transparent 13rem),
    linear-gradient(180deg, transparent 62%, rgba(2, 8, 28, .28));
}

html.ys-theme-sponge .ys-theme-page-deco {
  opacity: .56;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .38)) drop-shadow(0 0 14px rgba(86, 218, 255, .20)) saturate(1.18);
}

html.ys-theme-sponge .ys-theme-page-deco-0,
html.ys-theme-sponge .ys-theme-page-deco-1,
html.ys-theme-sponge .ys-theme-page-deco-5 {
  width: clamp(78px, 10vw, 148px);
  height: clamp(78px, 10vw, 148px);
  opacity: .64;
}

html.ys-theme-sponge body[data-ys-theme-route="settings"] .ys-theme-page-deco,
html.ys-theme-sponge body[data-ys-theme-route="channels"] .ys-theme-page-deco,
html.ys-theme-sponge body[data-ys-theme-route="dashboard"] .ys-theme-page-deco {
  opacity: .22;
}

html.ys-theme-sponge body[data-ys-theme-route="playground"] .ys-theme-page-deco-0,
html.ys-theme-sponge body[data-ys-theme-route="playground"] .ys-theme-page-deco-1,
html.ys-theme-sponge body[data-ys-theme-route="playground"] .ys-theme-page-deco-5 {
  bottom: clamp(108px, 17vh, 200px);
}

html.ys-theme-larva {
  --background: 42 92% 94%;
  --foreground: 24 54% 14%;
  --card: 43 100% 98%;
  --card-foreground: 24 54% 14%;
  --popover: 43 100% 98%;
  --popover-foreground: 24 54% 14%;
  --primary: 12 84% 52%;
  --primary-foreground: 42 100% 98%;
  --secondary: 45 100% 66%;
  --secondary-foreground: 24 54% 14%;
  --accent: 197 78% 45%;
  --accent-foreground: 42 100% 98%;
  --border: 31 56% 72%;
  --input: 42 100% 97%;
  --ys-theme-bg: #fff4cf;
  --ys-theme-card: #fffdf2;
  --ys-theme-input: #fff9e7;
  --ys-theme-panel: #ffd76a;
  --ys-theme-fg: #2f1a0b;
  --ys-theme-heading: #211004;
  --ys-theme-muted: #674626;
  --ys-theme-rgb: 230, 82, 39;
  --ys-theme-orb: radial-gradient(circle at 34% 30%, #fff, #ffe35a 32%, #e65227 33% 62%, #1289b8 63%);
  --ys-theme-line: rgba(160, 86, 22, .24);
  --ys-theme-soft: rgba(230, 82, 39, .10);
  --ys-theme-module-top: linear-gradient(90deg, #e65227, #ffd54a 42%, #1289b8 90%);
  --ys-theme-module-pattern:
    radial-gradient(circle at 18px 16px, rgba(255, 213, 74, .20) 0 4px, transparent 5px),
    repeating-linear-gradient(-8deg, rgba(230, 82, 39, .045) 0 7px, transparent 7px 24px),
    linear-gradient(135deg, rgba(255, 255, 255, .52), transparent 52%);
  --ys-theme-title-font: "Trebuchet MS", "Arial Rounded MT Bold", ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --ys-theme-button-bg: linear-gradient(135deg, #1f2b36 0%, #e65227 52%, #ffb328 100%);
  --ys-theme-button-fg: #ffffff;
  --ys-theme-badge-bg: rgba(255, 213, 74, .56);
  --ys-theme-badge-fg: #2b1708;
  --ys-theme-success: #087a4e;
  --ys-theme-warning: #9c5600;
  --ys-theme-danger: #cf3b25;
  --brand-pill-bg: linear-gradient(135deg, rgba(255, 247, 219, .88), rgba(255, 213, 74, .88));
  --brand-pill-shadow: 0 12px 28px rgba(176, 91, 19, .18);
}

html.ys-theme-larva #ys-theme-page-decor {
  background:
    radial-gradient(circle at 18% 92%, rgba(230, 82, 39, .14), transparent 12rem),
    radial-gradient(circle at 84% 18%, rgba(18, 137, 184, .12), transparent 14rem),
    linear-gradient(180deg, transparent 68%, rgba(255, 190, 62, .18));
}

html.ys-theme-larva .ys-theme-page-deco {
  opacity: .38;
  filter: drop-shadow(0 9px 16px rgba(91, 47, 9, .18));
}

html.ys-theme-larva .ys-theme-page-deco-0,
html.ys-theme-larva .ys-theme-page-deco-1,
html.ys-theme-larva .ys-theme-page-deco-5 {
  opacity: .50;
  width: clamp(66px, 8vw, 120px);
  height: clamp(66px, 8vw, 120px);
}

html.ys-theme-larva body[data-ys-theme-route="settings"] .ys-theme-page-deco,
html.ys-theme-larva body[data-ys-theme-route="channels"] .ys-theme-page-deco,
html.ys-theme-larva body[data-ys-theme-route="dashboard"] .ys-theme-page-deco {
  opacity: .16;
}

html.ys-theme-larva body {
  background:
    radial-gradient(circle at 12% 18%, rgba(18, 137, 184, .10), transparent 17rem),
    radial-gradient(circle at 88% 14%, rgba(255, 213, 74, .24), transparent 18rem),
    radial-gradient(circle at 72% 90%, rgba(230, 82, 39, .12), transparent 18rem),
    linear-gradient(180deg, #fff8e1 0%, #ffe69a 52%, #fff5d7 100%) !important;
}

html.ys-theme-larva [data-ys-ui="topbar"] {
  background:
    linear-gradient(90deg, rgba(255, 239, 167, .94), rgba(255, 207, 92, .88)),
    var(--ys-theme-module-pattern) !important;
  box-shadow: 0 10px 26px rgba(141, 78, 18, .14), inset 0 -1px 0 rgba(120, 71, 21, .10);
}

html.ys-theme-larva body [data-ys-ui="action-button"],
html.ys-theme-larva body button[type="submit"],
html.ys-theme-larva body a[class*="bg-primary"] {
  border-color: rgba(161, 66, 18, .34) !important;
  background: linear-gradient(135deg, #202b34 0%, #df4e26 55%, #ffb52e 100%) !important;
  color: #fffaf0 !important;
  box-shadow: 0 12px 22px rgba(207, 75, 31, .22), inset 0 1px 0 rgba(255, 255, 255, .30) !important;
}

html.ys-theme-larva body [data-ys-ui="utility-button"],
html.ys-theme-larva body [data-ys-ui="icon-button"],
html.ys-theme-larva body [data-ys-ui="select"] {
  border-color: rgba(160, 86, 22, .22) !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .68), transparent 30px),
    linear-gradient(135deg, rgba(255, 253, 242, .96), rgba(255, 229, 149, .62)) !important;
  color: #2f1a0b !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84), 0 8px 18px rgba(122, 73, 20, .10) !important;
}

html.ys-theme-larva body [data-ys-ui="nav-link"],
html.ys-theme-larva body [data-ys-ui="sidebar-button"] {
  color: #5a3a1e !important;
}

html.ys-theme-larva body [data-ys-ui="nav-active"] {
  color: #1f1004 !important;
  border-color: rgba(230, 82, 39, .30) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 213, 74, .34)),
    rgba(255, 245, 209, .80) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 8px 18px rgba(230, 82, 39, .10) !important;
}

html.ys-theme-sponge body [data-ys-ui="surface-card"],
html.ys-theme-sponge body [data-ys-ui="metric-card"],
html.ys-theme-sponge body [data-ys-ui="model-card"],
html.ys-theme-sponge body [data-ys-ui="code-panel"],
html.ys-theme-sponge body [data-ys-ui="alert"],
html.ys-theme-larva body [data-ys-ui="surface-card"],
html.ys-theme-larva body [data-ys-ui="metric-card"],
html.ys-theme-larva body [data-ys-ui="model-card"],
html.ys-theme-larva body [data-ys-ui="code-panel"],
html.ys-theme-larva body [data-ys-ui="alert"] {
  color: var(--ys-theme-fg) !important;
  border-color: var(--ys-theme-line) !important;
  background:
    var(--ys-theme-module-pattern),
    color-mix(in srgb, var(--ys-theme-card) 94%, white) !important;
  box-shadow: 0 16px 36px rgba(73, 45, 10, .12), inset 0 1px 0 rgba(255, 255, 255, .74);
}

html.ys-theme-sponge body [data-ys-ui="field"],
html.ys-theme-sponge body [data-ys-ui="select"],
html.ys-theme-sponge body [data-ys-ui="icon-button"],
html.ys-theme-sponge body [data-ys-ui="utility-button"],
html.ys-theme-larva body [data-ys-ui="field"],
html.ys-theme-larva body [data-ys-ui="select"],
html.ys-theme-larva body [data-ys-ui="icon-button"],
html.ys-theme-larva body [data-ys-ui="utility-button"] {
  color: var(--ys-theme-fg) !important;
  border-color: var(--ys-theme-line) !important;
  background-color: color-mix(in srgb, var(--ys-theme-input) 92%, transparent) !important;
}

html.ys-theme-sponge body [data-ys-ui="nav-link"],
html.ys-theme-sponge body [data-ys-ui="sidebar-button"],
html.ys-theme-larva body [data-ys-ui="nav-link"],
html.ys-theme-larva body [data-ys-ui="sidebar-button"] {
  color: var(--ys-theme-muted) !important;
}

html.ys-theme-sponge body [data-ys-ui="nav-active"],
html.ys-theme-larva body [data-ys-ui="nav-active"] {
  color: var(--ys-theme-heading) !important;
  background-color: var(--ys-theme-soft) !important;
}

html.ys-theme-sponge h1,
html.ys-theme-sponge h2,
html.ys-theme-sponge h3,
html.ys-theme-larva h1,
html.ys-theme-larva h2,
html.ys-theme-larva h3 {
  color: var(--ys-theme-heading) !important;
}

html.ys-theme-sponge p,
html.ys-theme-sponge small,
html.ys-theme-sponge label,
html.ys-theme-larva p,
html.ys-theme-larva small,
html.ys-theme-larva label {
  color: var(--ys-theme-muted) !important;
}

html.ys-theme-sponge body main h1,
html.ys-theme-sponge body main h2,
html.ys-theme-sponge body main h3,
html.ys-theme-sponge body main [class*="text-2xl"],
html.ys-theme-sponge body main [class*="text-3xl"],
html.ys-theme-sponge body main [class*="text-4xl"],
html.ys-theme-larva body main h1,
html.ys-theme-larva body main h2,
html.ys-theme-larva body main h3,
html.ys-theme-larva body main [class*="text-2xl"],
html.ys-theme-larva body main [class*="text-3xl"],
html.ys-theme-larva body main [class*="text-4xl"] {
  color: var(--ys-theme-heading) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .46) !important;
}

html.ys-theme-sponge body main [data-ys-ui="model-card"],
html.ys-theme-sponge body main [data-ys-ui="surface-card"],
html.ys-theme-sponge body main [data-ys-ui="metric-card"],
html.ys-theme-sponge body main [data-ys-ui="code-panel"],
html.ys-theme-sponge body main [data-ys-ui="alert"] {
  color: #eaf8ff !important;
  border-color: rgba(116, 222, 255, .30) !important;
  background:
    radial-gradient(circle at 92% 16%, rgba(86, 218, 255, .18), transparent 86px),
    radial-gradient(circle at 14% 12%, rgba(255, 232, 93, .12), transparent 56px),
    linear-gradient(135deg, rgba(11, 29, 61, .94), rgba(11, 48, 88, .88)) !important;
  box-shadow: 0 18px 38px rgba(2, 9, 36, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
}

html.ys-theme-larva body[data-ys-theme-route="pricing"] main [data-ys-ui="model-card"],
html.ys-theme-larva body[data-ys-theme-route="pricing"] main [data-ys-ui="surface-card"] {
  color: #2d1b0c !important;
  border-color: rgba(175, 74, 12, .26) !important;
  background:
    radial-gradient(circle at 92% 14%, rgba(238, 111, 39, .18), transparent 82px),
    repeating-linear-gradient(-8deg, rgba(238, 111, 39, .06) 0 8px, transparent 8px 22px),
    linear-gradient(135deg, rgba(255, 250, 229, .98), rgba(255, 231, 150, .88)) !important;
}

html.ys-theme-sponge body main [data-ys-ui="model-card"] :is(p, span, div, small),
html.ys-theme-sponge body main [data-ys-ui="surface-card"] :is(p, span, div, small),
html.ys-theme-sponge body main [data-ys-ui="metric-card"] :is(p, span, div, small),
html.ys-theme-sponge body main [data-ys-ui="code-panel"] :is(p, span, div, small) {
  color: #d8f3ff !important;
}

html.ys-theme-larva body[data-ys-theme-route="pricing"] main [data-ys-ui="model-card"] :is(p, span, div, small),
html.ys-theme-larva body[data-ys-theme-route="pricing"] main [data-ys-ui="surface-card"] :is(p, span, div, small) {
  color: #2d1b0c !important;
}

html.ys-theme-sponge body main [data-ys-ui="model-card"] :is(h1, h2, h3, h4, strong, [class*="font-semibold"], [class*="font-bold"]),
html.ys-theme-sponge body main [data-ys-ui="surface-card"] :is(h1, h2, h3, h4, strong, [class*="font-semibold"], [class*="font-bold"]),
html.ys-theme-sponge body main [data-ys-ui="metric-card"] :is(h1, h2, h3, h4, strong, [class*="font-semibold"], [class*="font-bold"]) {
  color: #ffffff !important;
  text-shadow: none !important;
}

html.ys-theme-larva body[data-ys-theme-route="pricing"] main [data-ys-ui="model-card"] :is(h1, h2, h3, h4, strong, [class*="font-semibold"], [class*="font-bold"]),
html.ys-theme-larva body[data-ys-theme-route="pricing"] main [data-ys-ui="surface-card"] :is(h1, h2, h3, h4, strong, [class*="font-semibold"], [class*="font-bold"]) {
  color: #251205 !important;
  text-shadow: none !important;
}

html.ys-theme-sponge body[data-ys-theme-route="pricing"] main [data-ys-ui="action-button"],
html.ys-theme-sponge body[data-ys-theme-route="pricing"] main button,
html.ys-theme-larva body[data-ys-theme-route="pricing"] main [data-ys-ui="action-button"],
html.ys-theme-larva body[data-ys-theme-route="pricing"] main button {
  text-shadow: none !important;
}

/*
 * Final route-wide theme consolidation.
 * Loaded after the legacy blade skin so every page follows the active pack
 * instead of keeping the old dark card/sidebar/input backgrounds.
 */
html.ys-theme-pack body,
html.ys-theme-pack body [class*="bg-background"],
html.ys-theme-pack body main.bg-background,
html.ys-theme-pack body [data-slot="main"],
html.ys-theme-pack body [data-slot="content"] {
  color: var(--ys-theme-fg) !important;
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, rgb(var(--ys-theme-rgb)) 12%, transparent), transparent 22rem),
    radial-gradient(circle at 92% 2%, color-mix(in srgb, var(--ys-theme-panel) 28%, transparent), transparent 20rem),
    color-mix(in srgb, var(--ys-theme-bg) 96%, white) !important;
}

html.ys-theme-pack body header,
html.ys-theme-pack body header > div,
html.ys-theme-pack body header nav,
html.ys-theme-pack body [data-ys-ui="topbar"] {
  color: var(--ys-theme-heading) !important;
  border-color: var(--ys-theme-line) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ys-theme-panel) 90%, transparent), color-mix(in srgb, var(--ys-theme-input) 74%, transparent)),
    var(--ys-theme-module-pattern) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, rgb(var(--ys-theme-rgb)) 14%, transparent), inset 0 -1px 0 rgba(255, 255, 255, .12) !important;
}

html.ys-theme-pack body aside,
html.ys-theme-pack body [data-sidebar],
html.ys-theme-pack body [data-slot^="sidebar"],
html.ys-theme-pack body [class*="bg-sidebar"],
html.ys-theme-pack body [data-ys-ui="sidebar"] {
  color: var(--ys-theme-fg) !important;
  border-color: var(--ys-theme-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ys-theme-panel) 88%, white), color-mix(in srgb, var(--ys-theme-bg) 90%, white)),
    var(--ys-theme-module-pattern) !important;
  box-shadow: inset -1px 0 0 var(--ys-theme-line), 10px 0 30px color-mix(in srgb, rgb(var(--ys-theme-rgb)) 10%, transparent) !important;
}

html.ys-theme-pack body [data-slot="sidebar-group-label"],
html.ys-theme-pack body [data-slot="sidebar-menu-button"],
html.ys-theme-pack body [data-slot="sidebar-menu-sub-button"],
html.ys-theme-pack body aside a,
html.ys-theme-pack body aside button,
html.ys-theme-pack body [data-sidebar] a,
html.ys-theme-pack body [data-sidebar] button {
  color: var(--ys-theme-muted) !important;
  border-color: transparent !important;
  background-image: none !important;
}

html.ys-theme-pack body [data-slot="sidebar-menu-button"]:hover,
html.ys-theme-pack body [data-slot="sidebar-menu-sub-button"]:hover,
html.ys-theme-pack body aside a:hover,
html.ys-theme-pack body aside button:hover,
html.ys-theme-pack body [data-sidebar] a:hover,
html.ys-theme-pack body [data-sidebar] button:hover {
  color: var(--ys-theme-heading) !important;
  border-color: var(--ys-theme-line) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ys-theme-input) 78%, transparent), color-mix(in srgb, rgb(var(--ys-theme-rgb)) 12%, transparent)) !important;
}

html.ys-theme-pack body [data-slot="sidebar-menu-button"][data-active="true"],
html.ys-theme-pack body [data-slot="sidebar-menu-button"][aria-current="page"],
html.ys-theme-pack body [data-slot="sidebar-menu-sub-button"][data-active="true"],
html.ys-theme-pack body [data-slot="sidebar-menu-sub-button"][aria-current="page"],
html.ys-theme-pack body aside [aria-current="page"],
html.ys-theme-pack body [data-sidebar] [aria-current="page"],
html.ys-theme-pack body [data-ys-ui="nav-active"] {
  color: var(--ys-theme-heading) !important;
  border-color: var(--ys-theme-line) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, rgb(var(--ys-theme-rgb)) 18%, transparent), transparent),
    color-mix(in srgb, var(--ys-theme-input) 86%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px color-mix(in srgb, rgb(var(--ys-theme-rgb)) 12%, transparent) !important;
}

html.ys-theme-pack body [class*="bg-card"],
html.ys-theme-pack body [class*="bg-popover"],
html.ys-theme-pack body [data-slot="card"],
html.ys-theme-pack body [role="dialog"],
html.ys-theme-pack body table,
html.ys-theme-pack body main section,
html.ys-theme-pack body main article,
html.ys-theme-pack body main div[class*="rounded"][class*="border"],
html.ys-theme-pack body main div[class*="rounded"][class*="shadow"],
html.ys-theme-pack body main div[class*="bg-card"],
html.ys-theme-pack body [data-ys-ui="surface-card"],
html.ys-theme-pack body [data-ys-ui="metric-card"],
html.ys-theme-pack body [data-ys-ui="model-card"],
html.ys-theme-pack body [data-ys-ui="code-panel"],
html.ys-theme-pack body [data-ys-ui="alert"] {
  color: var(--ys-theme-fg) !important;
  border-color: var(--ys-theme-line) !important;
  background:
    var(--ys-theme-module-pattern),
    linear-gradient(135deg, color-mix(in srgb, var(--ys-theme-card) 96%, white), color-mix(in srgb, var(--ys-theme-input) 80%, transparent)) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, rgb(var(--ys-theme-rgb)) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
}

html.ys-theme-pack body input,
html.ys-theme-pack body textarea,
html.ys-theme-pack body select,
html.ys-theme-pack body [contenteditable="true"],
html.ys-theme-pack body [role="textbox"],
html.ys-theme-pack body [role="combobox"],
html.ys-theme-pack body [data-ys-ui="field"],
html.ys-theme-pack body [data-ys-ui="select"] {
  color: var(--ys-theme-fg) !important;
  caret-color: rgb(var(--ys-theme-rgb)) !important;
  border-color: var(--ys-theme-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ys-theme-input) 96%, white), color-mix(in srgb, var(--ys-theme-input) 84%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 0 0 1px transparent !important;
}

html.ys-theme-pack body button:not(.ys-theme-trigger):not(.ys-theme-option),
html.ys-theme-pack body a[role="button"]:not(.ys-theme-option),
html.ys-theme-pack body [data-ys-ui="utility-button"],
html.ys-theme-pack body [data-ys-ui="icon-button"] {
  color: var(--ys-theme-fg) !important;
  border-color: var(--ys-theme-line) !important;
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, .34), transparent 32px),
    linear-gradient(135deg, color-mix(in srgb, var(--ys-theme-input) 92%, white), color-mix(in srgb, var(--ys-theme-panel) 34%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 8px 18px color-mix(in srgb, rgb(var(--ys-theme-rgb)) 8%, transparent) !important;
}

html.ys-theme-pack body [data-ys-ui="action-button"],
html.ys-theme-pack body button[type="submit"],
html.ys-theme-pack body a[class*="bg-primary"],
html.ys-theme-pack body [class*="bg-primary"] {
  color: var(--ys-theme-button-fg) !important;
  border-color: color-mix(in srgb, rgb(var(--ys-theme-rgb)) 42%, transparent) !important;
  background: var(--ys-theme-button-bg) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, rgb(var(--ys-theme-rgb)) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, .30) !important;
}

html.ys-theme-pack body thead,
html.ys-theme-pack body th,
html.ys-theme-pack body [data-slot="table-header"] {
  color: var(--ys-theme-heading) !important;
  border-color: var(--ys-theme-line) !important;
  background:
    var(--ys-theme-module-top),
    color-mix(in srgb, var(--ys-theme-panel) 72%, transparent) !important;
}

html.ys-theme-pack body tbody tr,
html.ys-theme-pack body [role="row"] {
  color: var(--ys-theme-fg) !important;
  border-color: var(--ys-theme-line) !important;
  background-color: color-mix(in srgb, var(--ys-theme-card) 72%, transparent) !important;
}

html.ys-theme-pack body tbody tr:hover,
html.ys-theme-pack body [role="row"]:hover {
  background-color: color-mix(in srgb, rgb(var(--ys-theme-rgb)) 11%, var(--ys-theme-card)) !important;
}

html.ys-theme-pack body [class*="text-muted"],
html.ys-theme-pack body [class*="text-secondary"],
html.ys-theme-pack body [class*="text-gray"],
html.ys-theme-pack body [class*="text-slate"],
html.ys-theme-pack body [class*="text-zinc"],
html.ys-theme-pack body [data-slot="description"] {
  color: var(--ys-theme-muted) !important;
}

html.ys-theme-pack body h1,
html.ys-theme-pack body h2,
html.ys-theme-pack body h3,
html.ys-theme-pack body h4,
html.ys-theme-pack body strong,
html.ys-theme-pack body [class*="font-semibold"],
html.ys-theme-pack body [class*="font-bold"] {
  color: var(--ys-theme-heading) !important;
}

html.ys-theme-pack body [data-slot="badge"],
html.ys-theme-pack body [class*="rounded-full"],
html.ys-theme-pack body [class*="badge"] {
  color: var(--ys-theme-badge-fg) !important;
  border-color: var(--ys-theme-line) !important;
  background: var(--ys-theme-badge-bg) !important;
}

html.ys-theme-larva body [class*="bg-background"],
html.ys-theme-larva body main.bg-background,
html.ys-theme-larva body [data-slot="content"] {
  background:
    radial-gradient(circle at 8% 4%, rgba(18, 137, 184, .10), transparent 22rem),
    radial-gradient(circle at 92% 0%, rgba(255, 213, 74, .22), transparent 20rem),
    linear-gradient(180deg, #fff8df 0%, #ffe9a5 56%, #fff6d9 100%) !important;
}

html.ys-theme-larva body aside,
html.ys-theme-larva body [data-sidebar],
html.ys-theme-larva body [data-slot^="sidebar"],
html.ys-theme-larva body [class*="bg-sidebar"],
html.ys-theme-larva body [data-ys-ui="sidebar"] {
  background:
    linear-gradient(180deg, rgba(255, 236, 151, .96), rgba(255, 247, 216, .92)),
    radial-gradient(circle at 80% 0%, rgba(230, 82, 39, .10), transparent 9rem) !important;
}

html.ys-theme-larva body [class*="bg-card"],
html.ys-theme-larva body [class*="bg-popover"],
html.ys-theme-larva body [role="dialog"],
html.ys-theme-larva body table,
html.ys-theme-larva body main section,
html.ys-theme-larva body main article,
html.ys-theme-larva body main div[class*="rounded"][class*="border"],
html.ys-theme-larva body [data-ys-ui="surface-card"],
html.ys-theme-larva body [data-ys-ui="metric-card"],
html.ys-theme-larva body [data-ys-ui="model-card"],
html.ys-theme-larva body [data-ys-ui="code-panel"],
html.ys-theme-larva body [data-ys-ui="alert"] {
  color: #2f1a0b !important;
  border-color: rgba(160, 86, 22, .24) !important;
  background:
    radial-gradient(circle at 92% 16%, rgba(18, 137, 184, .08), transparent 82px),
    radial-gradient(circle at 14% 10%, rgba(255, 213, 74, .18), transparent 64px),
    repeating-linear-gradient(-8deg, rgba(230, 82, 39, .035) 0 7px, transparent 7px 24px),
    linear-gradient(135deg, rgba(255, 253, 242, .98), rgba(255, 236, 166, .88)) !important;
}