{
  "schemaVersion": 1,
  "pkgVersion": "2.0.0",
  "gitSha": "52dbfc820e7bb5375b8bacf1c130e4f460d179a6",
  "builtAt": "2026-10-04T15:30:02.974Z",
  "base": "/* ============================================================================\n * waki-themes / base.css\n * ----------------------------------------------------------------------------\n * Shared fundamentals every theme inherits: typography reset, font stack,\n * the .dark / .light class contract for dark-mode toggling, and a small set\n * of utility classes that the demo HTML uses regardless of which theme is\n * active. Each theme file (flat.css / glass-v1.css / glass-v2.css) layers\n * on top — they only override what's visually distinct.\n * ============================================================================ */\n\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\");\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml, body {\n  height: 100%;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n}\n\nhtml { color-scheme: light; }\nhtml.dark { color-scheme: dark; }\n\n/* Theme switcher pill — sits floating top-right, semi-transparent so it\n   reads on any theme. Picked-state button uses a vivid sky tint so the\n   active theme is unmistakable. */\n.switcher {\n  position: fixed;\n  top: 0.75rem;\n  right: 0.75rem;\n  z-index: 60;\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.25rem;\n  padding: 0.3rem 0.4rem;\n  border-radius: 1.25rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  user-select: none;\n  /* Cap the width so 18 theme buttons wrap to 2-3 rows instead of\n     extending across the whole viewport. The pill stays anchored\n     top-right and grows downward. */\n  max-width: min(540px, calc(100vw - 1.5rem));\n}\n.switcher button {\n  appearance: none;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  padding: 0.3rem 0.7rem;\n  border-radius: 9999px;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: 600;\n  transition: background-color 150ms ease-out;\n}\n.switcher button:hover { background-color: rgba(0, 0, 0, 0.05); }\nhtml.dark .switcher button:hover { background-color: rgba(255, 255, 255, 0.08); }\n.switcher button.active {\n  background: linear-gradient(135deg, #6366f1, #ec4899);\n  color: white;\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n}\n.switcher .divider {\n  width: 1px;\n  height: 1.1rem;\n  background-color: currentColor;\n  opacity: 0.25;\n  margin: 0 0.25rem;\n}\n\n/* Optional shell/demo primitives. Individual themes can override these;\n   base keeps new shell samples readable when an older theme is selected. */\n.panel-nested {\n  background: rgba(255, 255, 255, 0.42);\n  border: 1px solid rgba(15, 23, 42, 0.1);\n  border-radius: 0.875rem;\n}\nhtml.dark .panel-nested {\n  background: rgba(255, 255, 255, 0.06);\n  border-color: rgba(255, 255, 255, 0.12);\n}\n.theme-swatch {\n  background: linear-gradient(135deg, #6366f1, #06b6d4, #ec4899);\n}\n.theme-switcher {\n  background: rgba(255, 255, 255, 0.7);\n  border: 1px solid rgba(15, 23, 42, 0.1);\n}\nhtml.dark .theme-switcher {\n  background: rgba(15, 23, 42, 0.74);\n  border-color: rgba(255, 255, 255, 0.12);\n}\n.nav-item {\n  color: inherit;\n}\n",
  "themes": {
    "waki-family-mac": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac"
    },
    "waki-family-boardroom": {
      "name": "Waki Family Boardroom",
      "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-boardroom (Waki Family - Boardroom)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Boardroom\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 8px;\n  --waki-density: 0.52rem 0.8rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 10px 28px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 20px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.14);\n  --waki-glass-saturation: 118%;\n  --waki-elevated-saturation: 126%;\n  --waki-sidebar-blend: 96%;\n  --waki-main-blend: 84%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f3f7fa;\n  --waki-bg-2: #eef2f7;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(5, 113, 189, 0.1);\n  --waki-blob-2: rgba(75, 95, 125, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #eef2f7;\n  --waki-bar: #ffffff;\n  --waki-border: #e0e7ef;\n  --waki-border-2: #c7d1de;\n  --waki-text: #243550;\n  --waki-muted: #5b6d86;\n  --waki-accent: #0571bd;\n  --waki-accent-2: #4b5f7d;\n  --waki-focus: rgba(10, 144, 227, 0.35);\n  --waki-shadow: rgba(36, 53, 80, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #eef2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #c7d1de 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e6f1f8;\n  --waki-slot: #e7f0f7;\n  --waki-thumb: #dcebf6;\n  --waki-text-2: #3d4e68;\n  --waki-dim: #8190a3;\n  --waki-accent-text: #0571bd;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0571bd;\n  --waki-progress: linear-gradient(90deg, #0571bd, #4b5f7d);\n}\nhtml.dark {\n\n  --waki-bg-1: #142640;\n  --waki-bg-2: #0f1c30;\n  --waki-bg-3: #243550;\n  --waki-blob-1: rgba(100, 188, 254, 0.16);\n  --waki-blob-2: rgba(199, 209, 222, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #243550;\n  --waki-panel-2: #324663;\n  --waki-panel-3: #142640;\n  --waki-bar: #243550;\n  --waki-border: #3d5273;\n  --waki-border-2: #4b5f7d;\n  --waki-text: #eef2f7;\n  --waki-muted: #a7b5c8;\n  --waki-accent: #64bcfe;\n  --waki-accent-2: #c7d1de;\n  --waki-focus: rgba(100, 188, 254, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #324663 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #142640 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #4b5f7d 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2e3e58;\n  --waki-slot: #32425c;\n  --waki-thumb: #1c2e48;\n  --waki-text-2: #ced7e2;\n  --waki-dim: #8291a6;\n  --waki-accent-text: #64bcfe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #64bcfe;\n  --waki-progress: linear-gradient(90deg, #64bcfe, #c7d1de);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, var(--waki-accent) 34%, var(--waki-border));\n}\n.chip {\n  border-radius: 7px;\n  font-weight: 800;\n}\n.nav-item.active {\n  box-shadow: inset 2px 0 0 var(--waki-accent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "boardroom",
      "variantName": "Boardroom"
    },
    "waki-family-graphite": {
      "name": "Waki Family Graphite",
      "description": "Warm stone and paper tones with a deep amber accent. Easy on the eyes.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-graphite (Waki Family - Graphite)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Graphite\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 10px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 18px;\n  --waki-blur: 12px;\n  --waki-density: 0.46rem 0.7rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 22px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 38px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-glass-saturation: 125%;\n  --waki-elevated-saturation: 135%;\n  --waki-sidebar-blend: 94%;\n  --waki-main-blend: 78%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 7px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f7f4f0;\n  --waki-bg-2: #f1ede8;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(170, 79, 2, 0.1);\n  --waki-blob-2: rgba(89, 82, 78, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #f1ede8;\n  --waki-bar: #ffffff;\n  --waki-border: #e5e0da;\n  --waki-border-2: #d3cdc5;\n  --waki-text: #201d1b;\n  --waki-muted: #706963;\n  --waki-accent: #aa4f02;\n  --waki-accent-2: #59524e;\n  --waki-focus: rgba(208, 112, 26, 0.35);\n  --waki-shadow: rgba(32, 29, 27, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f1ede8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #d3cdc5 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #f7ede6;\n  --waki-slot: #f3ece4;\n  --waki-thumb: #f3e6dc;\n  --waki-text-2: #443f3b;\n  --waki-dim: #928c86;\n  --waki-accent-text: #aa4f02;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #aa4f02;\n  --waki-progress: linear-gradient(90deg, #aa4f02, #59524e);\n}\nhtml.dark {\n\n  --waki-bg-1: #171514;\n  --waki-bg-2: #11100f;\n  --waki-bg-3: #201d1b;\n  --waki-blob-1: rgba(234, 145, 60, 0.16);\n  --waki-blob-2: rgba(211, 205, 197, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #201d1b;\n  --waki-panel-2: #2d2a27;\n  --waki-panel-3: #171514;\n  --waki-bar: #201d1b;\n  --waki-border: #423d3a;\n  --waki-border-2: #59524e;\n  --waki-text: #f1ede8;\n  --waki-muted: #a9a19b;\n  --waki-accent: #ea913c;\n  --waki-accent-2: #d3cdc5;\n  --waki-focus: rgba(234, 145, 60, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #2d2a27 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #171514 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #59524e 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2a2725;\n  --waki-slot: #2f2c29;\n  --waki-thumb: #1c1918;\n  --waki-text-2: #d1cbc5;\n  --waki-dim: #857e79;\n  --waki-accent-text: #ea913c;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #ea913c;\n  --waki-progress: linear-gradient(90deg, #ea913c, #d3cdc5);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n}\n.nav-item.active,\n.glass-bar {\n  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--waki-accent-2) 65%, transparent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "graphite",
      "variantName": "Graphite"
    },
    "waki-family-civic": {
      "name": "Waki Family Civic",
      "description": "Navy glass with an amber glow. Waki AI Service's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-civic (Waki Family - Civic)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Civic\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 14px;\n  --waki-radius-sm: 6px;\n  --waki-radius-lg: 22px;\n  --waki-blur: 30px;\n  --waki-density: 0.58rem 0.88rem;\n  --waki-hover-y: -4px;\n  --waki-elevated-hover-y: -5px;\n  --waki-nav-shift: 2px;\n  --waki-shadow-stack: 0 22px 62px var(--waki-shadow), 0 0 28px color-mix(in srgb, var(--waki-accent) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.06);\n  --waki-elevated-shadow-stack: 0 36px 96px var(--waki-shadow), 0 0 38px color-mix(in srgb, var(--waki-accent-2) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -16px 30px color-mix(in srgb, var(--waki-accent) 5%, transparent);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.09);\n  --waki-glass-saturation: 175%;\n  --waki-elevated-saturation: 195%;\n  --waki-sidebar-blend: 82%;\n  --waki-main-blend: 58%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 2px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: color-mix(in srgb, #eef4ff 88%, #2563eb);\n  --waki-bg-2: color-mix(in srgb, #fff8ea 88%, #d97706);\n  --waki-bg-3: color-mix(in srgb, #f8fbff 76%, #eef4ff);\n  --waki-blob-1: rgba(37,99,235,.12);\n  --waki-blob-2: rgba(217,119,6,.1);\n  --waki-blob-3: rgba(96,165,250,.08);\n  --waki-panel: color-mix(in srgb, rgba(255,255,255,.68) 70%, #eef4ff);\n  --waki-panel-2: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-panel-3: color-mix(in srgb, #eef4ff 92%, #2563eb);\n  --waki-bar: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-border: color-mix(in srgb, rgba(37,99,235,.22) 82%, #2563eb);\n  --waki-border-2: color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706);\n  --waki-text: #12213d;\n  --waki-muted: #56667c;\n  --waki-accent: #2563eb;\n  --waki-accent-2: #d97706;\n  --waki-focus: rgba(37,99,235,.24);\n  --waki-shadow: color-mix(in srgb, rgba(30,64,175,.16) 84%, #2563eb);\n  --waki-overlay-panel: color-mix(in srgb, color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, color-mix(in srgb, #eef4ff 92%, #2563eb) 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #dde6fc;\n  --waki-slot: #cdddfc;\n  --waki-thumb: #d4e1fb;\n  --waki-text-2: #314059;\n  --waki-dim: #76859c;\n  --waki-accent-text: #2563eb;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #2563eb;\n  --waki-progress: linear-gradient(90deg, #2563eb, #d97706);\n}\nhtml.dark {\n\n  --waki-bg-1: #061329;\n  --waki-bg-2: #24180a;\n  --waki-bg-3: #071b2b;\n  --waki-blob-1: rgba(37,99,235,.24);\n  --waki-blob-2: rgba(251,191,36,.12);\n  --waki-blob-3: rgba(15,118,110,.1);\n  --waki-panel: rgba(37,99,235,.14);\n  --waki-panel-2: rgba(10,27,57,.78);\n  --waki-panel-3: rgba(33,25,13,.74);\n  --waki-bar: rgba(10,27,57,.78);\n  --waki-border: rgba(251,191,36,.26);\n  --waki-border-2: rgba(96,165,250,.24);\n  --waki-text: #edf4ff;\n  --waki-muted: #b6c4d9;\n  --waki-accent: #60a5fa;\n  --waki-accent-2: #fbbf24;\n  --waki-focus: rgba(96,165,250,.24);\n  --waki-shadow: rgba(0,0,0,.45);\n  --waki-overlay-panel: color-mix(in srgb, rgba(10,27,57,.78) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, rgba(33,25,13,.74) 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(96,165,250,.24) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #15294d;\n  --waki-slot: #1a2d51;\n  --waki-thumb: #081837;\n  --waki-text-2: #d4deee;\n  --waki-dim: #8a98ad;\n  --waki-accent-text: #60a5fa;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #60a5fa;\n  --waki-progress: linear-gradient(90deg, #60a5fa, #fbbf24);\n}\n\nbody {\n  background:\n    radial-gradient(circle at 20% 16%, color-mix(in srgb, var(--waki-accent) 9%, transparent), transparent 30%), radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--waki-accent-2) 7%, transparent), transparent 32%), linear-gradient(118deg, transparent 0 30%, color-mix(in srgb, white 8%, transparent) 42%, transparent 56%),\n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card,\n.theme-switcher {\n  overflow: hidden;\n  isolation: isolate;\n}\n.glass > *,\n.glass-elevated > *,\n.glass-bar > *,\n.shell-main > *,\n.mobile-card > *,\n.theme-switcher > * {\n  position: relative;\n  z-index: 1;\n}\n.glass::before,\n.glass-elevated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  z-index: 0;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 18%, transparent 44%),\n    linear-gradient(315deg, color-mix(in srgb, var(--waki-accent-2) 10%, transparent), transparent 46%);\n  opacity: .72;\n  pointer-events: none;\n}\n.glass::after,\n.glass-elevated::after,\n.glass-bar::after {\n  content: \"\";\n  position: absolute;\n  inset: -40% -22%;\n  z-index: 0;\n  border-radius: inherit;\n  background:\n    radial-gradient(ellipse at 26% 8%, rgba(255,255,255,.42), transparent 28%),\n    linear-gradient(106deg, transparent 22%, rgba(255,255,255,.24) 38%, transparent 48% 100%);\n  mix-blend-mode: screen;\n  opacity: .28;\n  transform: translateX(-12%) rotate(-4deg);\n  transition: opacity 180ms ease, transform 220ms ease;\n  pointer-events: none;\n}\n.glass:hover::after,\n.glass-elevated:hover::after {\n  opacity: .44;\n  transform: translateX(0) rotate(-4deg);\n}\n.glass,\n.glass-elevated,\n.glass-bar {\n  border-color: color-mix(in srgb, var(--waki-border) 62%, white);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, white 58%, var(--waki-border));\n  box-shadow: var(--waki-elevated-shadow-stack), inset 0 1px 0 rgba(255,255,255,.34);\n}\n.panel-nested {\n  background:\n    linear-gradient(145deg, color-mix(in srgb, var(--waki-panel-2) 54%, transparent), color-mix(in srgb, var(--waki-panel-3) 42%, transparent));\n  border-color: color-mix(in srgb, var(--waki-border-2) 58%, white);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -12px 24px color-mix(in srgb, var(--waki-accent) 4%, transparent), 0 12px 28px color-mix(in srgb, var(--waki-shadow) 34%, transparent);\n}\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  border-radius: 8px;\n  background: color-mix(in srgb, currentColor 10%, transparent);\n  border-color: color-mix(in srgb, currentColor 22%, transparent);\n}\n.btn-primary {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--waki-accent) 84%, white), color-mix(in srgb, var(--waki-accent-2) 78%, #1f2937));\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--waki-accent) 24%, transparent);\n}\n.btn-warning {\n  background: linear-gradient(135deg, #d97706, #b45309);\n  box-shadow: 0 10px 22px rgba(180, 83, 9, 0.2);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #e11d48, #b91c1c);\n  box-shadow: 0 10px 22px rgba(185, 28, 28, 0.2);\n}\n.btn-success {\n  background: linear-gradient(135deg, #059669, #047857);\n  box-shadow: 0 10px 22px rgba(4, 120, 87, 0.18);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "civic",
      "variantName": "Civic"
    },
    "waki-family-cobalt": {
      "name": "Waki Family Cobalt",
      "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-cobalt (Waki Family - Cobalt)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Cobalt\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 0px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: 0px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 24px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 40px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-glass-saturation: 100%;\n  --waki-elevated-saturation: 100%;\n  --waki-sidebar-blend: 100%;\n  --waki-main-blend: 100%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 6px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #ffffff;\n  --waki-bg-2: #f4f7fe;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(23, 70, 216, 0.1);\n  --waki-blob-2: rgba(91, 47, 214, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #fdfdff;\n  --waki-panel-2: #e6ecfa;\n  --waki-panel-3: #d6e0f8;\n  --waki-bar: #e6ecfa;\n  --waki-border: rgba(20,32,80,.16);\n  --waki-border-2: rgba(20,32,80,.2);\n  --waki-text: #0f1732;\n  --waki-muted: #4a5480;\n  --waki-accent: #1746d8;\n  --waki-accent-2: #5b2fd6;\n  --waki-focus: rgba(23,70,216,.24);\n  --waki-shadow: rgba(15,23,50,.1);\n  --waki-overlay-panel: color-mix(in srgb, #e6ecfa 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #d6e0f8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(20,32,80,.2) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #d6e0f8;\n  --waki-slot: #eef3fe;\n  --waki-thumb: #d5ddf4;\n  --waki-text-2: #333d63;\n  --waki-dim: #6a749c;\n  --waki-accent-text: #1235a6;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #c07a08;\n  --waki-warning-text: #8f5b06;\n  --waki-danger: #c0354f;\n  --waki-info: #0877b2;\n  --waki-progress: linear-gradient(90deg, #1746d8, #5b2fd6);\n}\nhtml.dark {\n\n  --waki-bg-1: #080b14;\n  --waki-bg-2: #0c1122;\n  --waki-bg-3: #0a0e1b;\n  --waki-blob-1: rgba(127, 165, 255, 0.16);\n  --waki-blob-2: rgba(169, 140, 255, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #161c34;\n  --waki-panel-2: #101528;\n  --waki-panel-3: #1a2140;\n  --waki-bar: #101528;\n  --waki-border: rgba(255,255,255,.08);\n  --waki-border-2: rgba(255,255,255,.15);\n  --waki-text: #e6e9f7;\n  --waki-muted: #949dc0;\n  --waki-accent: #7fa5ff;\n  --waki-accent-2: #a98cff;\n  --waki-focus: rgba(127,165,255,.24);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, #101528 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #1a2140 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(255,255,255,.15) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #1a2140;\n  --waki-slot: #1c2344;\n  --waki-thumb: #0e1322;\n  --waki-text-2: #b4bcda;\n  --waki-dim: #727b9e;\n  --waki-accent-text: #a8c0ff;\n  --waki-on-accent: #12131a;\n  --waki-success: #6ee7b7;\n  --waki-warning: #f0b84f;\n  --waki-warning-text: #f0b84f;\n  --waki-danger: #f0768a;\n  --waki-info: #4fb8f0;\n  --waki-progress: linear-gradient(90deg, #7fa5ff, #a98cff);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\ncode,\nkbd,\npre {\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\nprogress::-webkit-progress-value {\n  background: linear-gradient(90deg, var(--waki-accent), var(--waki-accent-2));\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "cobalt",
      "variantName": "Cobalt"
    },
    "waki-glass-prism": {
      "name": "Waki Family Civic",
      "description": "Navy glass with an amber glow. Waki AI Service's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-civic (Waki Family - Civic)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Civic\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 14px;\n  --waki-radius-sm: 6px;\n  --waki-radius-lg: 22px;\n  --waki-blur: 30px;\n  --waki-density: 0.58rem 0.88rem;\n  --waki-hover-y: -4px;\n  --waki-elevated-hover-y: -5px;\n  --waki-nav-shift: 2px;\n  --waki-shadow-stack: 0 22px 62px var(--waki-shadow), 0 0 28px color-mix(in srgb, var(--waki-accent) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.06);\n  --waki-elevated-shadow-stack: 0 36px 96px var(--waki-shadow), 0 0 38px color-mix(in srgb, var(--waki-accent-2) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -16px 30px color-mix(in srgb, var(--waki-accent) 5%, transparent);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.09);\n  --waki-glass-saturation: 175%;\n  --waki-elevated-saturation: 195%;\n  --waki-sidebar-blend: 82%;\n  --waki-main-blend: 58%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 2px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: color-mix(in srgb, #eef4ff 88%, #2563eb);\n  --waki-bg-2: color-mix(in srgb, #fff8ea 88%, #d97706);\n  --waki-bg-3: color-mix(in srgb, #f8fbff 76%, #eef4ff);\n  --waki-blob-1: rgba(37,99,235,.12);\n  --waki-blob-2: rgba(217,119,6,.1);\n  --waki-blob-3: rgba(96,165,250,.08);\n  --waki-panel: color-mix(in srgb, rgba(255,255,255,.68) 70%, #eef4ff);\n  --waki-panel-2: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-panel-3: color-mix(in srgb, #eef4ff 92%, #2563eb);\n  --waki-bar: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-border: color-mix(in srgb, rgba(37,99,235,.22) 82%, #2563eb);\n  --waki-border-2: color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706);\n  --waki-text: #12213d;\n  --waki-muted: #56667c;\n  --waki-accent: #2563eb;\n  --waki-accent-2: #d97706;\n  --waki-focus: rgba(37,99,235,.24);\n  --waki-shadow: color-mix(in srgb, rgba(30,64,175,.16) 84%, #2563eb);\n  --waki-overlay-panel: color-mix(in srgb, color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, color-mix(in srgb, #eef4ff 92%, #2563eb) 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #dde6fc;\n  --waki-slot: #cdddfc;\n  --waki-thumb: #d4e1fb;\n  --waki-text-2: #314059;\n  --waki-dim: #76859c;\n  --waki-accent-text: #2563eb;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #2563eb;\n  --waki-progress: linear-gradient(90deg, #2563eb, #d97706);\n}\nhtml.dark {\n\n  --waki-bg-1: #061329;\n  --waki-bg-2: #24180a;\n  --waki-bg-3: #071b2b;\n  --waki-blob-1: rgba(37,99,235,.24);\n  --waki-blob-2: rgba(251,191,36,.12);\n  --waki-blob-3: rgba(15,118,110,.1);\n  --waki-panel: rgba(37,99,235,.14);\n  --waki-panel-2: rgba(10,27,57,.78);\n  --waki-panel-3: rgba(33,25,13,.74);\n  --waki-bar: rgba(10,27,57,.78);\n  --waki-border: rgba(251,191,36,.26);\n  --waki-border-2: rgba(96,165,250,.24);\n  --waki-text: #edf4ff;\n  --waki-muted: #b6c4d9;\n  --waki-accent: #60a5fa;\n  --waki-accent-2: #fbbf24;\n  --waki-focus: rgba(96,165,250,.24);\n  --waki-shadow: rgba(0,0,0,.45);\n  --waki-overlay-panel: color-mix(in srgb, rgba(10,27,57,.78) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, rgba(33,25,13,.74) 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(96,165,250,.24) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #15294d;\n  --waki-slot: #1a2d51;\n  --waki-thumb: #081837;\n  --waki-text-2: #d4deee;\n  --waki-dim: #8a98ad;\n  --waki-accent-text: #60a5fa;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #60a5fa;\n  --waki-progress: linear-gradient(90deg, #60a5fa, #fbbf24);\n}\n\nbody {\n  background:\n    radial-gradient(circle at 20% 16%, color-mix(in srgb, var(--waki-accent) 9%, transparent), transparent 30%), radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--waki-accent-2) 7%, transparent), transparent 32%), linear-gradient(118deg, transparent 0 30%, color-mix(in srgb, white 8%, transparent) 42%, transparent 56%),\n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card,\n.theme-switcher {\n  overflow: hidden;\n  isolation: isolate;\n}\n.glass > *,\n.glass-elevated > *,\n.glass-bar > *,\n.shell-main > *,\n.mobile-card > *,\n.theme-switcher > * {\n  position: relative;\n  z-index: 1;\n}\n.glass::before,\n.glass-elevated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  z-index: 0;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 18%, transparent 44%),\n    linear-gradient(315deg, color-mix(in srgb, var(--waki-accent-2) 10%, transparent), transparent 46%);\n  opacity: .72;\n  pointer-events: none;\n}\n.glass::after,\n.glass-elevated::after,\n.glass-bar::after {\n  content: \"\";\n  position: absolute;\n  inset: -40% -22%;\n  z-index: 0;\n  border-radius: inherit;\n  background:\n    radial-gradient(ellipse at 26% 8%, rgba(255,255,255,.42), transparent 28%),\n    linear-gradient(106deg, transparent 22%, rgba(255,255,255,.24) 38%, transparent 48% 100%);\n  mix-blend-mode: screen;\n  opacity: .28;\n  transform: translateX(-12%) rotate(-4deg);\n  transition: opacity 180ms ease, transform 220ms ease;\n  pointer-events: none;\n}\n.glass:hover::after,\n.glass-elevated:hover::after {\n  opacity: .44;\n  transform: translateX(0) rotate(-4deg);\n}\n.glass,\n.glass-elevated,\n.glass-bar {\n  border-color: color-mix(in srgb, var(--waki-border) 62%, white);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, white 58%, var(--waki-border));\n  box-shadow: var(--waki-elevated-shadow-stack), inset 0 1px 0 rgba(255,255,255,.34);\n}\n.panel-nested {\n  background:\n    linear-gradient(145deg, color-mix(in srgb, var(--waki-panel-2) 54%, transparent), color-mix(in srgb, var(--waki-panel-3) 42%, transparent));\n  border-color: color-mix(in srgb, var(--waki-border-2) 58%, white);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -12px 24px color-mix(in srgb, var(--waki-accent) 4%, transparent), 0 12px 28px color-mix(in srgb, var(--waki-shadow) 34%, transparent);\n}\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  border-radius: 8px;\n  background: color-mix(in srgb, currentColor 10%, transparent);\n  border-color: color-mix(in srgb, currentColor 22%, transparent);\n}\n.btn-primary {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--waki-accent) 84%, white), color-mix(in srgb, var(--waki-accent-2) 78%, #1f2937));\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--waki-accent) 24%, transparent);\n}\n.btn-warning {\n  background: linear-gradient(135deg, #d97706, #b45309);\n  box-shadow: 0 10px 22px rgba(180, 83, 9, 0.2);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #e11d48, #b91c1c);\n  box-shadow: 0 10px 22px rgba(185, 28, 28, 0.2);\n}\n.btn-success {\n  background: linear-gradient(135deg, #059669, #047857);\n  box-shadow: 0 10px 22px rgba(4, 120, 87, 0.18);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "civic",
      "variantName": "Civic",
      "aliasOf": "waki-family-civic"
    },
    "waki-glass-opal": {
      "name": "Waki Family Civic",
      "description": "Navy glass with an amber glow. Waki AI Service's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-civic (Waki Family - Civic)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Civic\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 14px;\n  --waki-radius-sm: 6px;\n  --waki-radius-lg: 22px;\n  --waki-blur: 30px;\n  --waki-density: 0.58rem 0.88rem;\n  --waki-hover-y: -4px;\n  --waki-elevated-hover-y: -5px;\n  --waki-nav-shift: 2px;\n  --waki-shadow-stack: 0 22px 62px var(--waki-shadow), 0 0 28px color-mix(in srgb, var(--waki-accent) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.06);\n  --waki-elevated-shadow-stack: 0 36px 96px var(--waki-shadow), 0 0 38px color-mix(in srgb, var(--waki-accent-2) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -16px 30px color-mix(in srgb, var(--waki-accent) 5%, transparent);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.09);\n  --waki-glass-saturation: 175%;\n  --waki-elevated-saturation: 195%;\n  --waki-sidebar-blend: 82%;\n  --waki-main-blend: 58%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 2px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: color-mix(in srgb, #eef4ff 88%, #2563eb);\n  --waki-bg-2: color-mix(in srgb, #fff8ea 88%, #d97706);\n  --waki-bg-3: color-mix(in srgb, #f8fbff 76%, #eef4ff);\n  --waki-blob-1: rgba(37,99,235,.12);\n  --waki-blob-2: rgba(217,119,6,.1);\n  --waki-blob-3: rgba(96,165,250,.08);\n  --waki-panel: color-mix(in srgb, rgba(255,255,255,.68) 70%, #eef4ff);\n  --waki-panel-2: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-panel-3: color-mix(in srgb, #eef4ff 92%, #2563eb);\n  --waki-bar: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-border: color-mix(in srgb, rgba(37,99,235,.22) 82%, #2563eb);\n  --waki-border-2: color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706);\n  --waki-text: #12213d;\n  --waki-muted: #56667c;\n  --waki-accent: #2563eb;\n  --waki-accent-2: #d97706;\n  --waki-focus: rgba(37,99,235,.24);\n  --waki-shadow: color-mix(in srgb, rgba(30,64,175,.16) 84%, #2563eb);\n  --waki-overlay-panel: color-mix(in srgb, color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, color-mix(in srgb, #eef4ff 92%, #2563eb) 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #dde6fc;\n  --waki-slot: #cdddfc;\n  --waki-thumb: #d4e1fb;\n  --waki-text-2: #314059;\n  --waki-dim: #76859c;\n  --waki-accent-text: #2563eb;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #2563eb;\n  --waki-progress: linear-gradient(90deg, #2563eb, #d97706);\n}\nhtml.dark {\n\n  --waki-bg-1: #061329;\n  --waki-bg-2: #24180a;\n  --waki-bg-3: #071b2b;\n  --waki-blob-1: rgba(37,99,235,.24);\n  --waki-blob-2: rgba(251,191,36,.12);\n  --waki-blob-3: rgba(15,118,110,.1);\n  --waki-panel: rgba(37,99,235,.14);\n  --waki-panel-2: rgba(10,27,57,.78);\n  --waki-panel-3: rgba(33,25,13,.74);\n  --waki-bar: rgba(10,27,57,.78);\n  --waki-border: rgba(251,191,36,.26);\n  --waki-border-2: rgba(96,165,250,.24);\n  --waki-text: #edf4ff;\n  --waki-muted: #b6c4d9;\n  --waki-accent: #60a5fa;\n  --waki-accent-2: #fbbf24;\n  --waki-focus: rgba(96,165,250,.24);\n  --waki-shadow: rgba(0,0,0,.45);\n  --waki-overlay-panel: color-mix(in srgb, rgba(10,27,57,.78) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, rgba(33,25,13,.74) 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(96,165,250,.24) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #15294d;\n  --waki-slot: #1a2d51;\n  --waki-thumb: #081837;\n  --waki-text-2: #d4deee;\n  --waki-dim: #8a98ad;\n  --waki-accent-text: #60a5fa;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #60a5fa;\n  --waki-progress: linear-gradient(90deg, #60a5fa, #fbbf24);\n}\n\nbody {\n  background:\n    radial-gradient(circle at 20% 16%, color-mix(in srgb, var(--waki-accent) 9%, transparent), transparent 30%), radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--waki-accent-2) 7%, transparent), transparent 32%), linear-gradient(118deg, transparent 0 30%, color-mix(in srgb, white 8%, transparent) 42%, transparent 56%),\n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card,\n.theme-switcher {\n  overflow: hidden;\n  isolation: isolate;\n}\n.glass > *,\n.glass-elevated > *,\n.glass-bar > *,\n.shell-main > *,\n.mobile-card > *,\n.theme-switcher > * {\n  position: relative;\n  z-index: 1;\n}\n.glass::before,\n.glass-elevated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  z-index: 0;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 18%, transparent 44%),\n    linear-gradient(315deg, color-mix(in srgb, var(--waki-accent-2) 10%, transparent), transparent 46%);\n  opacity: .72;\n  pointer-events: none;\n}\n.glass::after,\n.glass-elevated::after,\n.glass-bar::after {\n  content: \"\";\n  position: absolute;\n  inset: -40% -22%;\n  z-index: 0;\n  border-radius: inherit;\n  background:\n    radial-gradient(ellipse at 26% 8%, rgba(255,255,255,.42), transparent 28%),\n    linear-gradient(106deg, transparent 22%, rgba(255,255,255,.24) 38%, transparent 48% 100%);\n  mix-blend-mode: screen;\n  opacity: .28;\n  transform: translateX(-12%) rotate(-4deg);\n  transition: opacity 180ms ease, transform 220ms ease;\n  pointer-events: none;\n}\n.glass:hover::after,\n.glass-elevated:hover::after {\n  opacity: .44;\n  transform: translateX(0) rotate(-4deg);\n}\n.glass,\n.glass-elevated,\n.glass-bar {\n  border-color: color-mix(in srgb, var(--waki-border) 62%, white);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, white 58%, var(--waki-border));\n  box-shadow: var(--waki-elevated-shadow-stack), inset 0 1px 0 rgba(255,255,255,.34);\n}\n.panel-nested {\n  background:\n    linear-gradient(145deg, color-mix(in srgb, var(--waki-panel-2) 54%, transparent), color-mix(in srgb, var(--waki-panel-3) 42%, transparent));\n  border-color: color-mix(in srgb, var(--waki-border-2) 58%, white);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -12px 24px color-mix(in srgb, var(--waki-accent) 4%, transparent), 0 12px 28px color-mix(in srgb, var(--waki-shadow) 34%, transparent);\n}\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  border-radius: 8px;\n  background: color-mix(in srgb, currentColor 10%, transparent);\n  border-color: color-mix(in srgb, currentColor 22%, transparent);\n}\n.btn-primary {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--waki-accent) 84%, white), color-mix(in srgb, var(--waki-accent-2) 78%, #1f2937));\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--waki-accent) 24%, transparent);\n}\n.btn-warning {\n  background: linear-gradient(135deg, #d97706, #b45309);\n  box-shadow: 0 10px 22px rgba(180, 83, 9, 0.2);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #e11d48, #b91c1c);\n  box-shadow: 0 10px 22px rgba(185, 28, 28, 0.2);\n}\n.btn-success {\n  background: linear-gradient(135deg, #059669, #047857);\n  box-shadow: 0 10px 22px rgba(4, 120, 87, 0.18);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "civic",
      "variantName": "Civic",
      "aliasOf": "waki-family-civic"
    },
    "waki-glass-civic": {
      "name": "Waki Family Civic",
      "description": "Navy glass with an amber glow. Waki AI Service's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-civic (Waki Family - Civic)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Civic\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 14px;\n  --waki-radius-sm: 6px;\n  --waki-radius-lg: 22px;\n  --waki-blur: 30px;\n  --waki-density: 0.58rem 0.88rem;\n  --waki-hover-y: -4px;\n  --waki-elevated-hover-y: -5px;\n  --waki-nav-shift: 2px;\n  --waki-shadow-stack: 0 22px 62px var(--waki-shadow), 0 0 28px color-mix(in srgb, var(--waki-accent) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.06);\n  --waki-elevated-shadow-stack: 0 36px 96px var(--waki-shadow), 0 0 38px color-mix(in srgb, var(--waki-accent-2) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -16px 30px color-mix(in srgb, var(--waki-accent) 5%, transparent);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.09);\n  --waki-glass-saturation: 175%;\n  --waki-elevated-saturation: 195%;\n  --waki-sidebar-blend: 82%;\n  --waki-main-blend: 58%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 2px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: color-mix(in srgb, #eef4ff 88%, #2563eb);\n  --waki-bg-2: color-mix(in srgb, #fff8ea 88%, #d97706);\n  --waki-bg-3: color-mix(in srgb, #f8fbff 76%, #eef4ff);\n  --waki-blob-1: rgba(37,99,235,.12);\n  --waki-blob-2: rgba(217,119,6,.1);\n  --waki-blob-3: rgba(96,165,250,.08);\n  --waki-panel: color-mix(in srgb, rgba(255,255,255,.68) 70%, #eef4ff);\n  --waki-panel-2: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-panel-3: color-mix(in srgb, #eef4ff 92%, #2563eb);\n  --waki-bar: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-border: color-mix(in srgb, rgba(37,99,235,.22) 82%, #2563eb);\n  --waki-border-2: color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706);\n  --waki-text: #12213d;\n  --waki-muted: #56667c;\n  --waki-accent: #2563eb;\n  --waki-accent-2: #d97706;\n  --waki-focus: rgba(37,99,235,.24);\n  --waki-shadow: color-mix(in srgb, rgba(30,64,175,.16) 84%, #2563eb);\n  --waki-overlay-panel: color-mix(in srgb, color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, color-mix(in srgb, #eef4ff 92%, #2563eb) 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #dde6fc;\n  --waki-slot: #cdddfc;\n  --waki-thumb: #d4e1fb;\n  --waki-text-2: #314059;\n  --waki-dim: #76859c;\n  --waki-accent-text: #2563eb;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #2563eb;\n  --waki-progress: linear-gradient(90deg, #2563eb, #d97706);\n}\nhtml.dark {\n\n  --waki-bg-1: #061329;\n  --waki-bg-2: #24180a;\n  --waki-bg-3: #071b2b;\n  --waki-blob-1: rgba(37,99,235,.24);\n  --waki-blob-2: rgba(251,191,36,.12);\n  --waki-blob-3: rgba(15,118,110,.1);\n  --waki-panel: rgba(37,99,235,.14);\n  --waki-panel-2: rgba(10,27,57,.78);\n  --waki-panel-3: rgba(33,25,13,.74);\n  --waki-bar: rgba(10,27,57,.78);\n  --waki-border: rgba(251,191,36,.26);\n  --waki-border-2: rgba(96,165,250,.24);\n  --waki-text: #edf4ff;\n  --waki-muted: #b6c4d9;\n  --waki-accent: #60a5fa;\n  --waki-accent-2: #fbbf24;\n  --waki-focus: rgba(96,165,250,.24);\n  --waki-shadow: rgba(0,0,0,.45);\n  --waki-overlay-panel: color-mix(in srgb, rgba(10,27,57,.78) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, rgba(33,25,13,.74) 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(96,165,250,.24) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #15294d;\n  --waki-slot: #1a2d51;\n  --waki-thumb: #081837;\n  --waki-text-2: #d4deee;\n  --waki-dim: #8a98ad;\n  --waki-accent-text: #60a5fa;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #60a5fa;\n  --waki-progress: linear-gradient(90deg, #60a5fa, #fbbf24);\n}\n\nbody {\n  background:\n    radial-gradient(circle at 20% 16%, color-mix(in srgb, var(--waki-accent) 9%, transparent), transparent 30%), radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--waki-accent-2) 7%, transparent), transparent 32%), linear-gradient(118deg, transparent 0 30%, color-mix(in srgb, white 8%, transparent) 42%, transparent 56%),\n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card,\n.theme-switcher {\n  overflow: hidden;\n  isolation: isolate;\n}\n.glass > *,\n.glass-elevated > *,\n.glass-bar > *,\n.shell-main > *,\n.mobile-card > *,\n.theme-switcher > * {\n  position: relative;\n  z-index: 1;\n}\n.glass::before,\n.glass-elevated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  z-index: 0;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 18%, transparent 44%),\n    linear-gradient(315deg, color-mix(in srgb, var(--waki-accent-2) 10%, transparent), transparent 46%);\n  opacity: .72;\n  pointer-events: none;\n}\n.glass::after,\n.glass-elevated::after,\n.glass-bar::after {\n  content: \"\";\n  position: absolute;\n  inset: -40% -22%;\n  z-index: 0;\n  border-radius: inherit;\n  background:\n    radial-gradient(ellipse at 26% 8%, rgba(255,255,255,.42), transparent 28%),\n    linear-gradient(106deg, transparent 22%, rgba(255,255,255,.24) 38%, transparent 48% 100%);\n  mix-blend-mode: screen;\n  opacity: .28;\n  transform: translateX(-12%) rotate(-4deg);\n  transition: opacity 180ms ease, transform 220ms ease;\n  pointer-events: none;\n}\n.glass:hover::after,\n.glass-elevated:hover::after {\n  opacity: .44;\n  transform: translateX(0) rotate(-4deg);\n}\n.glass,\n.glass-elevated,\n.glass-bar {\n  border-color: color-mix(in srgb, var(--waki-border) 62%, white);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, white 58%, var(--waki-border));\n  box-shadow: var(--waki-elevated-shadow-stack), inset 0 1px 0 rgba(255,255,255,.34);\n}\n.panel-nested {\n  background:\n    linear-gradient(145deg, color-mix(in srgb, var(--waki-panel-2) 54%, transparent), color-mix(in srgb, var(--waki-panel-3) 42%, transparent));\n  border-color: color-mix(in srgb, var(--waki-border-2) 58%, white);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -12px 24px color-mix(in srgb, var(--waki-accent) 4%, transparent), 0 12px 28px color-mix(in srgb, var(--waki-shadow) 34%, transparent);\n}\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  border-radius: 8px;\n  background: color-mix(in srgb, currentColor 10%, transparent);\n  border-color: color-mix(in srgb, currentColor 22%, transparent);\n}\n.btn-primary {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--waki-accent) 84%, white), color-mix(in srgb, var(--waki-accent-2) 78%, #1f2937));\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--waki-accent) 24%, transparent);\n}\n.btn-warning {\n  background: linear-gradient(135deg, #d97706, #b45309);\n  box-shadow: 0 10px 22px rgba(180, 83, 9, 0.2);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #e11d48, #b91c1c);\n  box-shadow: 0 10px 22px rgba(185, 28, 28, 0.2);\n}\n.btn-success {\n  background: linear-gradient(135deg, #059669, #047857);\n  box-shadow: 0 10px 22px rgba(4, 120, 87, 0.18);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "civic",
      "variantName": "Civic",
      "aliasOf": "waki-family-civic"
    },
    "waki-glass-obsidian": {
      "name": "Waki Family Civic",
      "description": "Navy glass with an amber glow. Waki AI Service's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-civic (Waki Family - Civic)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Civic\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 14px;\n  --waki-radius-sm: 6px;\n  --waki-radius-lg: 22px;\n  --waki-blur: 30px;\n  --waki-density: 0.58rem 0.88rem;\n  --waki-hover-y: -4px;\n  --waki-elevated-hover-y: -5px;\n  --waki-nav-shift: 2px;\n  --waki-shadow-stack: 0 22px 62px var(--waki-shadow), 0 0 28px color-mix(in srgb, var(--waki-accent) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(255,255,255,.06);\n  --waki-elevated-shadow-stack: 0 36px 96px var(--waki-shadow), 0 0 38px color-mix(in srgb, var(--waki-accent-2) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -16px 30px color-mix(in srgb, var(--waki-accent) 5%, transparent);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.09);\n  --waki-glass-saturation: 175%;\n  --waki-elevated-saturation: 195%;\n  --waki-sidebar-blend: 82%;\n  --waki-main-blend: 58%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 2px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: color-mix(in srgb, #eef4ff 88%, #2563eb);\n  --waki-bg-2: color-mix(in srgb, #fff8ea 88%, #d97706);\n  --waki-bg-3: color-mix(in srgb, #f8fbff 76%, #eef4ff);\n  --waki-blob-1: rgba(37,99,235,.12);\n  --waki-blob-2: rgba(217,119,6,.1);\n  --waki-blob-3: rgba(96,165,250,.08);\n  --waki-panel: color-mix(in srgb, rgba(255,255,255,.68) 70%, #eef4ff);\n  --waki-panel-2: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-panel-3: color-mix(in srgb, #eef4ff 92%, #2563eb);\n  --waki-bar: color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea);\n  --waki-border: color-mix(in srgb, rgba(37,99,235,.22) 82%, #2563eb);\n  --waki-border-2: color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706);\n  --waki-text: #12213d;\n  --waki-muted: #56667c;\n  --waki-accent: #2563eb;\n  --waki-accent-2: #d97706;\n  --waki-focus: rgba(37,99,235,.24);\n  --waki-shadow: color-mix(in srgb, rgba(30,64,175,.16) 84%, #2563eb);\n  --waki-overlay-panel: color-mix(in srgb, color-mix(in srgb, rgba(255,255,255,.84) 76%, #fff8ea) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, color-mix(in srgb, #eef4ff 92%, #2563eb) 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, color-mix(in srgb, rgba(251,191,36,.28) 78%, #d97706) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #dde6fc;\n  --waki-slot: #cdddfc;\n  --waki-thumb: #d4e1fb;\n  --waki-text-2: #314059;\n  --waki-dim: #76859c;\n  --waki-accent-text: #2563eb;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #2563eb;\n  --waki-progress: linear-gradient(90deg, #2563eb, #d97706);\n}\nhtml.dark {\n\n  --waki-bg-1: #061329;\n  --waki-bg-2: #24180a;\n  --waki-bg-3: #071b2b;\n  --waki-blob-1: rgba(37,99,235,.24);\n  --waki-blob-2: rgba(251,191,36,.12);\n  --waki-blob-3: rgba(15,118,110,.1);\n  --waki-panel: rgba(37,99,235,.14);\n  --waki-panel-2: rgba(10,27,57,.78);\n  --waki-panel-3: rgba(33,25,13,.74);\n  --waki-bar: rgba(10,27,57,.78);\n  --waki-border: rgba(251,191,36,.26);\n  --waki-border-2: rgba(96,165,250,.24);\n  --waki-text: #edf4ff;\n  --waki-muted: #b6c4d9;\n  --waki-accent: #60a5fa;\n  --waki-accent-2: #fbbf24;\n  --waki-focus: rgba(96,165,250,.24);\n  --waki-shadow: rgba(0,0,0,.45);\n  --waki-overlay-panel: color-mix(in srgb, rgba(10,27,57,.78) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, rgba(33,25,13,.74) 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(96,165,250,.24) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #15294d;\n  --waki-slot: #1a2d51;\n  --waki-thumb: #081837;\n  --waki-text-2: #d4deee;\n  --waki-dim: #8a98ad;\n  --waki-accent-text: #60a5fa;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #60a5fa;\n  --waki-progress: linear-gradient(90deg, #60a5fa, #fbbf24);\n}\n\nbody {\n  background:\n    radial-gradient(circle at 20% 16%, color-mix(in srgb, var(--waki-accent) 9%, transparent), transparent 30%), radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--waki-accent-2) 7%, transparent), transparent 32%), linear-gradient(118deg, transparent 0 30%, color-mix(in srgb, white 8%, transparent) 42%, transparent 56%),\n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card,\n.theme-switcher {\n  overflow: hidden;\n  isolation: isolate;\n}\n.glass > *,\n.glass-elevated > *,\n.glass-bar > *,\n.shell-main > *,\n.mobile-card > *,\n.theme-switcher > * {\n  position: relative;\n  z-index: 1;\n}\n.glass::before,\n.glass-elevated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  z-index: 0;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 18%, transparent 44%),\n    linear-gradient(315deg, color-mix(in srgb, var(--waki-accent-2) 10%, transparent), transparent 46%);\n  opacity: .72;\n  pointer-events: none;\n}\n.glass::after,\n.glass-elevated::after,\n.glass-bar::after {\n  content: \"\";\n  position: absolute;\n  inset: -40% -22%;\n  z-index: 0;\n  border-radius: inherit;\n  background:\n    radial-gradient(ellipse at 26% 8%, rgba(255,255,255,.42), transparent 28%),\n    linear-gradient(106deg, transparent 22%, rgba(255,255,255,.24) 38%, transparent 48% 100%);\n  mix-blend-mode: screen;\n  opacity: .28;\n  transform: translateX(-12%) rotate(-4deg);\n  transition: opacity 180ms ease, transform 220ms ease;\n  pointer-events: none;\n}\n.glass:hover::after,\n.glass-elevated:hover::after {\n  opacity: .44;\n  transform: translateX(0) rotate(-4deg);\n}\n.glass,\n.glass-elevated,\n.glass-bar {\n  border-color: color-mix(in srgb, var(--waki-border) 62%, white);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, white 58%, var(--waki-border));\n  box-shadow: var(--waki-elevated-shadow-stack), inset 0 1px 0 rgba(255,255,255,.34);\n}\n.panel-nested {\n  background:\n    linear-gradient(145deg, color-mix(in srgb, var(--waki-panel-2) 54%, transparent), color-mix(in srgb, var(--waki-panel-3) 42%, transparent));\n  border-color: color-mix(in srgb, var(--waki-border-2) 58%, white);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -12px 24px color-mix(in srgb, var(--waki-accent) 4%, transparent), 0 12px 28px color-mix(in srgb, var(--waki-shadow) 34%, transparent);\n}\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  border-radius: 8px;\n  background: color-mix(in srgb, currentColor 10%, transparent);\n  border-color: color-mix(in srgb, currentColor 22%, transparent);\n}\n.btn-primary {\n  background: linear-gradient(135deg, color-mix(in srgb, var(--waki-accent) 84%, white), color-mix(in srgb, var(--waki-accent-2) 78%, #1f2937));\n  box-shadow: 0 12px 28px color-mix(in srgb, var(--waki-accent) 24%, transparent);\n}\n.btn-warning {\n  background: linear-gradient(135deg, #d97706, #b45309);\n  box-shadow: 0 10px 22px rgba(180, 83, 9, 0.2);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #e11d48, #b91c1c);\n  box-shadow: 0 10px 22px rgba(185, 28, 28, 0.2);\n}\n.btn-success {\n  background: linear-gradient(135deg, #059669, #047857);\n  box-shadow: 0 10px 22px rgba(4, 120, 87, 0.18);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "civic",
      "variantName": "Civic",
      "aliasOf": "waki-family-civic"
    },
    "waki-frost-arctic": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-frost-rose": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-frost-mint": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-frost-violet": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-academic-ivory": {
      "name": "Waki Family Graphite",
      "description": "Warm stone and paper tones with a deep amber accent. Easy on the eyes.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-graphite (Waki Family - Graphite)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Graphite\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 10px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 18px;\n  --waki-blur: 12px;\n  --waki-density: 0.46rem 0.7rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 22px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 38px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-glass-saturation: 125%;\n  --waki-elevated-saturation: 135%;\n  --waki-sidebar-blend: 94%;\n  --waki-main-blend: 78%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 7px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f7f4f0;\n  --waki-bg-2: #f1ede8;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(170, 79, 2, 0.1);\n  --waki-blob-2: rgba(89, 82, 78, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #f1ede8;\n  --waki-bar: #ffffff;\n  --waki-border: #e5e0da;\n  --waki-border-2: #d3cdc5;\n  --waki-text: #201d1b;\n  --waki-muted: #706963;\n  --waki-accent: #aa4f02;\n  --waki-accent-2: #59524e;\n  --waki-focus: rgba(208, 112, 26, 0.35);\n  --waki-shadow: rgba(32, 29, 27, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f1ede8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #d3cdc5 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #f7ede6;\n  --waki-slot: #f3ece4;\n  --waki-thumb: #f3e6dc;\n  --waki-text-2: #443f3b;\n  --waki-dim: #928c86;\n  --waki-accent-text: #aa4f02;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #aa4f02;\n  --waki-progress: linear-gradient(90deg, #aa4f02, #59524e);\n}\nhtml.dark {\n\n  --waki-bg-1: #171514;\n  --waki-bg-2: #11100f;\n  --waki-bg-3: #201d1b;\n  --waki-blob-1: rgba(234, 145, 60, 0.16);\n  --waki-blob-2: rgba(211, 205, 197, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #201d1b;\n  --waki-panel-2: #2d2a27;\n  --waki-panel-3: #171514;\n  --waki-bar: #201d1b;\n  --waki-border: #423d3a;\n  --waki-border-2: #59524e;\n  --waki-text: #f1ede8;\n  --waki-muted: #a9a19b;\n  --waki-accent: #ea913c;\n  --waki-accent-2: #d3cdc5;\n  --waki-focus: rgba(234, 145, 60, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #2d2a27 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #171514 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #59524e 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2a2725;\n  --waki-slot: #2f2c29;\n  --waki-thumb: #1c1918;\n  --waki-text-2: #d1cbc5;\n  --waki-dim: #857e79;\n  --waki-accent-text: #ea913c;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #ea913c;\n  --waki-progress: linear-gradient(90deg, #ea913c, #d3cdc5);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n}\n.nav-item.active,\n.glass-bar {\n  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--waki-accent-2) 65%, transparent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "graphite",
      "variantName": "Graphite",
      "aliasOf": "waki-family-graphite"
    },
    "waki-academic-oxford": {
      "name": "Waki Family Graphite",
      "description": "Warm stone and paper tones with a deep amber accent. Easy on the eyes.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-graphite (Waki Family - Graphite)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Graphite\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 10px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 18px;\n  --waki-blur: 12px;\n  --waki-density: 0.46rem 0.7rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 22px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 38px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-glass-saturation: 125%;\n  --waki-elevated-saturation: 135%;\n  --waki-sidebar-blend: 94%;\n  --waki-main-blend: 78%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 7px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f7f4f0;\n  --waki-bg-2: #f1ede8;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(170, 79, 2, 0.1);\n  --waki-blob-2: rgba(89, 82, 78, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #f1ede8;\n  --waki-bar: #ffffff;\n  --waki-border: #e5e0da;\n  --waki-border-2: #d3cdc5;\n  --waki-text: #201d1b;\n  --waki-muted: #706963;\n  --waki-accent: #aa4f02;\n  --waki-accent-2: #59524e;\n  --waki-focus: rgba(208, 112, 26, 0.35);\n  --waki-shadow: rgba(32, 29, 27, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f1ede8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #d3cdc5 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #f7ede6;\n  --waki-slot: #f3ece4;\n  --waki-thumb: #f3e6dc;\n  --waki-text-2: #443f3b;\n  --waki-dim: #928c86;\n  --waki-accent-text: #aa4f02;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #aa4f02;\n  --waki-progress: linear-gradient(90deg, #aa4f02, #59524e);\n}\nhtml.dark {\n\n  --waki-bg-1: #171514;\n  --waki-bg-2: #11100f;\n  --waki-bg-3: #201d1b;\n  --waki-blob-1: rgba(234, 145, 60, 0.16);\n  --waki-blob-2: rgba(211, 205, 197, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #201d1b;\n  --waki-panel-2: #2d2a27;\n  --waki-panel-3: #171514;\n  --waki-bar: #201d1b;\n  --waki-border: #423d3a;\n  --waki-border-2: #59524e;\n  --waki-text: #f1ede8;\n  --waki-muted: #a9a19b;\n  --waki-accent: #ea913c;\n  --waki-accent-2: #d3cdc5;\n  --waki-focus: rgba(234, 145, 60, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #2d2a27 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #171514 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #59524e 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2a2725;\n  --waki-slot: #2f2c29;\n  --waki-thumb: #1c1918;\n  --waki-text-2: #d1cbc5;\n  --waki-dim: #857e79;\n  --waki-accent-text: #ea913c;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #ea913c;\n  --waki-progress: linear-gradient(90deg, #ea913c, #d3cdc5);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n}\n.nav-item.active,\n.glass-bar {\n  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--waki-accent-2) 65%, transparent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "graphite",
      "variantName": "Graphite",
      "aliasOf": "waki-family-graphite"
    },
    "waki-academic-slate": {
      "name": "Waki Family Graphite",
      "description": "Warm stone and paper tones with a deep amber accent. Easy on the eyes.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-graphite (Waki Family - Graphite)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Graphite\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 10px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 18px;\n  --waki-blur: 12px;\n  --waki-density: 0.46rem 0.7rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 22px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 38px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-glass-saturation: 125%;\n  --waki-elevated-saturation: 135%;\n  --waki-sidebar-blend: 94%;\n  --waki-main-blend: 78%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 7px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f7f4f0;\n  --waki-bg-2: #f1ede8;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(170, 79, 2, 0.1);\n  --waki-blob-2: rgba(89, 82, 78, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #f1ede8;\n  --waki-bar: #ffffff;\n  --waki-border: #e5e0da;\n  --waki-border-2: #d3cdc5;\n  --waki-text: #201d1b;\n  --waki-muted: #706963;\n  --waki-accent: #aa4f02;\n  --waki-accent-2: #59524e;\n  --waki-focus: rgba(208, 112, 26, 0.35);\n  --waki-shadow: rgba(32, 29, 27, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f1ede8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #d3cdc5 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #f7ede6;\n  --waki-slot: #f3ece4;\n  --waki-thumb: #f3e6dc;\n  --waki-text-2: #443f3b;\n  --waki-dim: #928c86;\n  --waki-accent-text: #aa4f02;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #aa4f02;\n  --waki-progress: linear-gradient(90deg, #aa4f02, #59524e);\n}\nhtml.dark {\n\n  --waki-bg-1: #171514;\n  --waki-bg-2: #11100f;\n  --waki-bg-3: #201d1b;\n  --waki-blob-1: rgba(234, 145, 60, 0.16);\n  --waki-blob-2: rgba(211, 205, 197, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #201d1b;\n  --waki-panel-2: #2d2a27;\n  --waki-panel-3: #171514;\n  --waki-bar: #201d1b;\n  --waki-border: #423d3a;\n  --waki-border-2: #59524e;\n  --waki-text: #f1ede8;\n  --waki-muted: #a9a19b;\n  --waki-accent: #ea913c;\n  --waki-accent-2: #d3cdc5;\n  --waki-focus: rgba(234, 145, 60, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #2d2a27 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #171514 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #59524e 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2a2725;\n  --waki-slot: #2f2c29;\n  --waki-thumb: #1c1918;\n  --waki-text-2: #d1cbc5;\n  --waki-dim: #857e79;\n  --waki-accent-text: #ea913c;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #ea913c;\n  --waki-progress: linear-gradient(90deg, #ea913c, #d3cdc5);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n}\n.nav-item.active,\n.glass-bar {\n  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--waki-accent-2) 65%, transparent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "graphite",
      "variantName": "Graphite",
      "aliasOf": "waki-family-graphite"
    },
    "waki-academic-sepia": {
      "name": "Waki Family Graphite",
      "description": "Warm stone and paper tones with a deep amber accent. Easy on the eyes.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-graphite (Waki Family - Graphite)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Graphite\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 10px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 18px;\n  --waki-blur: 12px;\n  --waki-density: 0.46rem 0.7rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 22px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 38px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-glass-saturation: 125%;\n  --waki-elevated-saturation: 135%;\n  --waki-sidebar-blend: 94%;\n  --waki-main-blend: 78%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 7px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f7f4f0;\n  --waki-bg-2: #f1ede8;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(170, 79, 2, 0.1);\n  --waki-blob-2: rgba(89, 82, 78, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #f1ede8;\n  --waki-bar: #ffffff;\n  --waki-border: #e5e0da;\n  --waki-border-2: #d3cdc5;\n  --waki-text: #201d1b;\n  --waki-muted: #706963;\n  --waki-accent: #aa4f02;\n  --waki-accent-2: #59524e;\n  --waki-focus: rgba(208, 112, 26, 0.35);\n  --waki-shadow: rgba(32, 29, 27, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f1ede8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #d3cdc5 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #f7ede6;\n  --waki-slot: #f3ece4;\n  --waki-thumb: #f3e6dc;\n  --waki-text-2: #443f3b;\n  --waki-dim: #928c86;\n  --waki-accent-text: #aa4f02;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #aa4f02;\n  --waki-progress: linear-gradient(90deg, #aa4f02, #59524e);\n}\nhtml.dark {\n\n  --waki-bg-1: #171514;\n  --waki-bg-2: #11100f;\n  --waki-bg-3: #201d1b;\n  --waki-blob-1: rgba(234, 145, 60, 0.16);\n  --waki-blob-2: rgba(211, 205, 197, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #201d1b;\n  --waki-panel-2: #2d2a27;\n  --waki-panel-3: #171514;\n  --waki-bar: #201d1b;\n  --waki-border: #423d3a;\n  --waki-border-2: #59524e;\n  --waki-text: #f1ede8;\n  --waki-muted: #a9a19b;\n  --waki-accent: #ea913c;\n  --waki-accent-2: #d3cdc5;\n  --waki-focus: rgba(234, 145, 60, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #2d2a27 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #171514 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #59524e 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2a2725;\n  --waki-slot: #2f2c29;\n  --waki-thumb: #1c1918;\n  --waki-text-2: #d1cbc5;\n  --waki-dim: #857e79;\n  --waki-accent-text: #ea913c;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #ea913c;\n  --waki-progress: linear-gradient(90deg, #ea913c, #d3cdc5);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n}\n.nav-item.active,\n.glass-bar {\n  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--waki-accent-2) 65%, transparent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "graphite",
      "variantName": "Graphite",
      "aliasOf": "waki-family-graphite"
    },
    "waki-desktop-graphite": {
      "name": "Waki Family Graphite",
      "description": "Warm stone and paper tones with a deep amber accent. Easy on the eyes.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-graphite (Waki Family - Graphite)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Graphite\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 10px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 18px;\n  --waki-blur: 12px;\n  --waki-density: 0.46rem 0.7rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 22px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 38px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-glass-saturation: 125%;\n  --waki-elevated-saturation: 135%;\n  --waki-sidebar-blend: 94%;\n  --waki-main-blend: 78%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 7px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f7f4f0;\n  --waki-bg-2: #f1ede8;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(170, 79, 2, 0.1);\n  --waki-blob-2: rgba(89, 82, 78, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #f1ede8;\n  --waki-bar: #ffffff;\n  --waki-border: #e5e0da;\n  --waki-border-2: #d3cdc5;\n  --waki-text: #201d1b;\n  --waki-muted: #706963;\n  --waki-accent: #aa4f02;\n  --waki-accent-2: #59524e;\n  --waki-focus: rgba(208, 112, 26, 0.35);\n  --waki-shadow: rgba(32, 29, 27, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f1ede8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #d3cdc5 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #f7ede6;\n  --waki-slot: #f3ece4;\n  --waki-thumb: #f3e6dc;\n  --waki-text-2: #443f3b;\n  --waki-dim: #928c86;\n  --waki-accent-text: #aa4f02;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #aa4f02;\n  --waki-progress: linear-gradient(90deg, #aa4f02, #59524e);\n}\nhtml.dark {\n\n  --waki-bg-1: #171514;\n  --waki-bg-2: #11100f;\n  --waki-bg-3: #201d1b;\n  --waki-blob-1: rgba(234, 145, 60, 0.16);\n  --waki-blob-2: rgba(211, 205, 197, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #201d1b;\n  --waki-panel-2: #2d2a27;\n  --waki-panel-3: #171514;\n  --waki-bar: #201d1b;\n  --waki-border: #423d3a;\n  --waki-border-2: #59524e;\n  --waki-text: #f1ede8;\n  --waki-muted: #a9a19b;\n  --waki-accent: #ea913c;\n  --waki-accent-2: #d3cdc5;\n  --waki-focus: rgba(234, 145, 60, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #2d2a27 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #171514 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #59524e 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2a2725;\n  --waki-slot: #2f2c29;\n  --waki-thumb: #1c1918;\n  --waki-text-2: #d1cbc5;\n  --waki-dim: #857e79;\n  --waki-accent-text: #ea913c;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #ea913c;\n  --waki-progress: linear-gradient(90deg, #ea913c, #d3cdc5);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n}\n.nav-item.active,\n.glass-bar {\n  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--waki-accent-2) 65%, transparent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "graphite",
      "variantName": "Graphite",
      "aliasOf": "waki-family-graphite"
    },
    "waki-desktop-cobalt": {
      "name": "Waki Family Cobalt",
      "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-cobalt (Waki Family - Cobalt)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Cobalt\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 0px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: 0px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 24px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 40px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-glass-saturation: 100%;\n  --waki-elevated-saturation: 100%;\n  --waki-sidebar-blend: 100%;\n  --waki-main-blend: 100%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 6px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #ffffff;\n  --waki-bg-2: #f4f7fe;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(23, 70, 216, 0.1);\n  --waki-blob-2: rgba(91, 47, 214, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #fdfdff;\n  --waki-panel-2: #e6ecfa;\n  --waki-panel-3: #d6e0f8;\n  --waki-bar: #e6ecfa;\n  --waki-border: rgba(20,32,80,.16);\n  --waki-border-2: rgba(20,32,80,.2);\n  --waki-text: #0f1732;\n  --waki-muted: #4a5480;\n  --waki-accent: #1746d8;\n  --waki-accent-2: #5b2fd6;\n  --waki-focus: rgba(23,70,216,.24);\n  --waki-shadow: rgba(15,23,50,.1);\n  --waki-overlay-panel: color-mix(in srgb, #e6ecfa 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #d6e0f8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(20,32,80,.2) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #d6e0f8;\n  --waki-slot: #eef3fe;\n  --waki-thumb: #d5ddf4;\n  --waki-text-2: #333d63;\n  --waki-dim: #6a749c;\n  --waki-accent-text: #1235a6;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #c07a08;\n  --waki-warning-text: #8f5b06;\n  --waki-danger: #c0354f;\n  --waki-info: #0877b2;\n  --waki-progress: linear-gradient(90deg, #1746d8, #5b2fd6);\n}\nhtml.dark {\n\n  --waki-bg-1: #080b14;\n  --waki-bg-2: #0c1122;\n  --waki-bg-3: #0a0e1b;\n  --waki-blob-1: rgba(127, 165, 255, 0.16);\n  --waki-blob-2: rgba(169, 140, 255, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #161c34;\n  --waki-panel-2: #101528;\n  --waki-panel-3: #1a2140;\n  --waki-bar: #101528;\n  --waki-border: rgba(255,255,255,.08);\n  --waki-border-2: rgba(255,255,255,.15);\n  --waki-text: #e6e9f7;\n  --waki-muted: #949dc0;\n  --waki-accent: #7fa5ff;\n  --waki-accent-2: #a98cff;\n  --waki-focus: rgba(127,165,255,.24);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, #101528 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #1a2140 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(255,255,255,.15) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #1a2140;\n  --waki-slot: #1c2344;\n  --waki-thumb: #0e1322;\n  --waki-text-2: #b4bcda;\n  --waki-dim: #727b9e;\n  --waki-accent-text: #a8c0ff;\n  --waki-on-accent: #12131a;\n  --waki-success: #6ee7b7;\n  --waki-warning: #f0b84f;\n  --waki-warning-text: #f0b84f;\n  --waki-danger: #f0768a;\n  --waki-info: #4fb8f0;\n  --waki-progress: linear-gradient(90deg, #7fa5ff, #a98cff);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\ncode,\nkbd,\npre {\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\nprogress::-webkit-progress-value {\n  background: linear-gradient(90deg, var(--waki-accent), var(--waki-accent-2));\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "cobalt",
      "variantName": "Cobalt",
      "aliasOf": "waki-family-cobalt"
    },
    "waki-desktop-nova": {
      "name": "Waki Family Cobalt",
      "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-cobalt (Waki Family - Cobalt)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Cobalt\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 0px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: 0px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 24px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 40px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-glass-saturation: 100%;\n  --waki-elevated-saturation: 100%;\n  --waki-sidebar-blend: 100%;\n  --waki-main-blend: 100%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 6px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #ffffff;\n  --waki-bg-2: #f4f7fe;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(23, 70, 216, 0.1);\n  --waki-blob-2: rgba(91, 47, 214, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #fdfdff;\n  --waki-panel-2: #e6ecfa;\n  --waki-panel-3: #d6e0f8;\n  --waki-bar: #e6ecfa;\n  --waki-border: rgba(20,32,80,.16);\n  --waki-border-2: rgba(20,32,80,.2);\n  --waki-text: #0f1732;\n  --waki-muted: #4a5480;\n  --waki-accent: #1746d8;\n  --waki-accent-2: #5b2fd6;\n  --waki-focus: rgba(23,70,216,.24);\n  --waki-shadow: rgba(15,23,50,.1);\n  --waki-overlay-panel: color-mix(in srgb, #e6ecfa 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #d6e0f8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(20,32,80,.2) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #d6e0f8;\n  --waki-slot: #eef3fe;\n  --waki-thumb: #d5ddf4;\n  --waki-text-2: #333d63;\n  --waki-dim: #6a749c;\n  --waki-accent-text: #1235a6;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #c07a08;\n  --waki-warning-text: #8f5b06;\n  --waki-danger: #c0354f;\n  --waki-info: #0877b2;\n  --waki-progress: linear-gradient(90deg, #1746d8, #5b2fd6);\n}\nhtml.dark {\n\n  --waki-bg-1: #080b14;\n  --waki-bg-2: #0c1122;\n  --waki-bg-3: #0a0e1b;\n  --waki-blob-1: rgba(127, 165, 255, 0.16);\n  --waki-blob-2: rgba(169, 140, 255, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #161c34;\n  --waki-panel-2: #101528;\n  --waki-panel-3: #1a2140;\n  --waki-bar: #101528;\n  --waki-border: rgba(255,255,255,.08);\n  --waki-border-2: rgba(255,255,255,.15);\n  --waki-text: #e6e9f7;\n  --waki-muted: #949dc0;\n  --waki-accent: #7fa5ff;\n  --waki-accent-2: #a98cff;\n  --waki-focus: rgba(127,165,255,.24);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, #101528 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #1a2140 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(255,255,255,.15) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #1a2140;\n  --waki-slot: #1c2344;\n  --waki-thumb: #0e1322;\n  --waki-text-2: #b4bcda;\n  --waki-dim: #727b9e;\n  --waki-accent-text: #a8c0ff;\n  --waki-on-accent: #12131a;\n  --waki-success: #6ee7b7;\n  --waki-warning: #f0b84f;\n  --waki-warning-text: #f0b84f;\n  --waki-danger: #f0768a;\n  --waki-info: #4fb8f0;\n  --waki-progress: linear-gradient(90deg, #7fa5ff, #a98cff);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\ncode,\nkbd,\npre {\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\nprogress::-webkit-progress-value {\n  background: linear-gradient(90deg, var(--waki-accent), var(--waki-accent-2));\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "cobalt",
      "variantName": "Cobalt",
      "aliasOf": "waki-family-cobalt"
    },
    "waki-desktop-olive": {
      "name": "Waki Family Graphite",
      "description": "Warm stone and paper tones with a deep amber accent. Easy on the eyes.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-graphite (Waki Family - Graphite)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Graphite\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 10px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 18px;\n  --waki-blur: 12px;\n  --waki-density: 0.46rem 0.7rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 22px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 38px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.12);\n  --waki-glass-saturation: 125%;\n  --waki-elevated-saturation: 135%;\n  --waki-sidebar-blend: 94%;\n  --waki-main-blend: 78%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 7px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f7f4f0;\n  --waki-bg-2: #f1ede8;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(170, 79, 2, 0.1);\n  --waki-blob-2: rgba(89, 82, 78, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #f1ede8;\n  --waki-bar: #ffffff;\n  --waki-border: #e5e0da;\n  --waki-border-2: #d3cdc5;\n  --waki-text: #201d1b;\n  --waki-muted: #706963;\n  --waki-accent: #aa4f02;\n  --waki-accent-2: #59524e;\n  --waki-focus: rgba(208, 112, 26, 0.35);\n  --waki-shadow: rgba(32, 29, 27, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f1ede8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #d3cdc5 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #f7ede6;\n  --waki-slot: #f3ece4;\n  --waki-thumb: #f3e6dc;\n  --waki-text-2: #443f3b;\n  --waki-dim: #928c86;\n  --waki-accent-text: #aa4f02;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #aa4f02;\n  --waki-progress: linear-gradient(90deg, #aa4f02, #59524e);\n}\nhtml.dark {\n\n  --waki-bg-1: #171514;\n  --waki-bg-2: #11100f;\n  --waki-bg-3: #201d1b;\n  --waki-blob-1: rgba(234, 145, 60, 0.16);\n  --waki-blob-2: rgba(211, 205, 197, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #201d1b;\n  --waki-panel-2: #2d2a27;\n  --waki-panel-3: #171514;\n  --waki-bar: #201d1b;\n  --waki-border: #423d3a;\n  --waki-border-2: #59524e;\n  --waki-text: #f1ede8;\n  --waki-muted: #a9a19b;\n  --waki-accent: #ea913c;\n  --waki-accent-2: #d3cdc5;\n  --waki-focus: rgba(234, 145, 60, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #2d2a27 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #171514 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #59524e 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2a2725;\n  --waki-slot: #2f2c29;\n  --waki-thumb: #1c1918;\n  --waki-text-2: #d1cbc5;\n  --waki-dim: #857e79;\n  --waki-accent-text: #ea913c;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #ea913c;\n  --waki-progress: linear-gradient(90deg, #ea913c, #d3cdc5);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(125%);\n}\n.nav-item.active,\n.glass-bar {\n  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--waki-accent-2) 65%, transparent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "graphite",
      "variantName": "Graphite",
      "aliasOf": "waki-family-graphite"
    },
    "waki-professional-boardroom": {
      "name": "Waki Family Boardroom",
      "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-boardroom (Waki Family - Boardroom)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Boardroom\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 8px;\n  --waki-density: 0.52rem 0.8rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 10px 28px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 20px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.14);\n  --waki-glass-saturation: 118%;\n  --waki-elevated-saturation: 126%;\n  --waki-sidebar-blend: 96%;\n  --waki-main-blend: 84%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f3f7fa;\n  --waki-bg-2: #eef2f7;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(5, 113, 189, 0.1);\n  --waki-blob-2: rgba(75, 95, 125, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #eef2f7;\n  --waki-bar: #ffffff;\n  --waki-border: #e0e7ef;\n  --waki-border-2: #c7d1de;\n  --waki-text: #243550;\n  --waki-muted: #5b6d86;\n  --waki-accent: #0571bd;\n  --waki-accent-2: #4b5f7d;\n  --waki-focus: rgba(10, 144, 227, 0.35);\n  --waki-shadow: rgba(36, 53, 80, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #eef2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #c7d1de 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e6f1f8;\n  --waki-slot: #e7f0f7;\n  --waki-thumb: #dcebf6;\n  --waki-text-2: #3d4e68;\n  --waki-dim: #8190a3;\n  --waki-accent-text: #0571bd;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0571bd;\n  --waki-progress: linear-gradient(90deg, #0571bd, #4b5f7d);\n}\nhtml.dark {\n\n  --waki-bg-1: #142640;\n  --waki-bg-2: #0f1c30;\n  --waki-bg-3: #243550;\n  --waki-blob-1: rgba(100, 188, 254, 0.16);\n  --waki-blob-2: rgba(199, 209, 222, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #243550;\n  --waki-panel-2: #324663;\n  --waki-panel-3: #142640;\n  --waki-bar: #243550;\n  --waki-border: #3d5273;\n  --waki-border-2: #4b5f7d;\n  --waki-text: #eef2f7;\n  --waki-muted: #a7b5c8;\n  --waki-accent: #64bcfe;\n  --waki-accent-2: #c7d1de;\n  --waki-focus: rgba(100, 188, 254, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #324663 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #142640 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #4b5f7d 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2e3e58;\n  --waki-slot: #32425c;\n  --waki-thumb: #1c2e48;\n  --waki-text-2: #ced7e2;\n  --waki-dim: #8291a6;\n  --waki-accent-text: #64bcfe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #64bcfe;\n  --waki-progress: linear-gradient(90deg, #64bcfe, #c7d1de);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, var(--waki-accent) 34%, var(--waki-border));\n}\n.chip {\n  border-radius: 7px;\n  font-weight: 800;\n}\n.nav-item.active {\n  box-shadow: inset 2px 0 0 var(--waki-accent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "boardroom",
      "variantName": "Boardroom",
      "aliasOf": "waki-family-boardroom"
    },
    "waki-professional-meridian": {
      "name": "Waki Family Boardroom",
      "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-boardroom (Waki Family - Boardroom)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Boardroom\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 8px;\n  --waki-density: 0.52rem 0.8rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 10px 28px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 20px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.14);\n  --waki-glass-saturation: 118%;\n  --waki-elevated-saturation: 126%;\n  --waki-sidebar-blend: 96%;\n  --waki-main-blend: 84%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f3f7fa;\n  --waki-bg-2: #eef2f7;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(5, 113, 189, 0.1);\n  --waki-blob-2: rgba(75, 95, 125, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #eef2f7;\n  --waki-bar: #ffffff;\n  --waki-border: #e0e7ef;\n  --waki-border-2: #c7d1de;\n  --waki-text: #243550;\n  --waki-muted: #5b6d86;\n  --waki-accent: #0571bd;\n  --waki-accent-2: #4b5f7d;\n  --waki-focus: rgba(10, 144, 227, 0.35);\n  --waki-shadow: rgba(36, 53, 80, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #eef2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #c7d1de 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e6f1f8;\n  --waki-slot: #e7f0f7;\n  --waki-thumb: #dcebf6;\n  --waki-text-2: #3d4e68;\n  --waki-dim: #8190a3;\n  --waki-accent-text: #0571bd;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0571bd;\n  --waki-progress: linear-gradient(90deg, #0571bd, #4b5f7d);\n}\nhtml.dark {\n\n  --waki-bg-1: #142640;\n  --waki-bg-2: #0f1c30;\n  --waki-bg-3: #243550;\n  --waki-blob-1: rgba(100, 188, 254, 0.16);\n  --waki-blob-2: rgba(199, 209, 222, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #243550;\n  --waki-panel-2: #324663;\n  --waki-panel-3: #142640;\n  --waki-bar: #243550;\n  --waki-border: #3d5273;\n  --waki-border-2: #4b5f7d;\n  --waki-text: #eef2f7;\n  --waki-muted: #a7b5c8;\n  --waki-accent: #64bcfe;\n  --waki-accent-2: #c7d1de;\n  --waki-focus: rgba(100, 188, 254, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #324663 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #142640 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #4b5f7d 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2e3e58;\n  --waki-slot: #32425c;\n  --waki-thumb: #1c2e48;\n  --waki-text-2: #ced7e2;\n  --waki-dim: #8291a6;\n  --waki-accent-text: #64bcfe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #64bcfe;\n  --waki-progress: linear-gradient(90deg, #64bcfe, #c7d1de);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, var(--waki-accent) 34%, var(--waki-border));\n}\n.chip {\n  border-radius: 7px;\n  font-weight: 800;\n}\n.nav-item.active {\n  box-shadow: inset 2px 0 0 var(--waki-accent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "boardroom",
      "variantName": "Boardroom",
      "aliasOf": "waki-family-boardroom"
    },
    "waki-professional-sterling": {
      "name": "Waki Family Boardroom",
      "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-boardroom (Waki Family - Boardroom)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Boardroom\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 8px;\n  --waki-density: 0.52rem 0.8rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 10px 28px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 20px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.14);\n  --waki-glass-saturation: 118%;\n  --waki-elevated-saturation: 126%;\n  --waki-sidebar-blend: 96%;\n  --waki-main-blend: 84%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f3f7fa;\n  --waki-bg-2: #eef2f7;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(5, 113, 189, 0.1);\n  --waki-blob-2: rgba(75, 95, 125, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #eef2f7;\n  --waki-bar: #ffffff;\n  --waki-border: #e0e7ef;\n  --waki-border-2: #c7d1de;\n  --waki-text: #243550;\n  --waki-muted: #5b6d86;\n  --waki-accent: #0571bd;\n  --waki-accent-2: #4b5f7d;\n  --waki-focus: rgba(10, 144, 227, 0.35);\n  --waki-shadow: rgba(36, 53, 80, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #eef2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #c7d1de 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e6f1f8;\n  --waki-slot: #e7f0f7;\n  --waki-thumb: #dcebf6;\n  --waki-text-2: #3d4e68;\n  --waki-dim: #8190a3;\n  --waki-accent-text: #0571bd;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0571bd;\n  --waki-progress: linear-gradient(90deg, #0571bd, #4b5f7d);\n}\nhtml.dark {\n\n  --waki-bg-1: #142640;\n  --waki-bg-2: #0f1c30;\n  --waki-bg-3: #243550;\n  --waki-blob-1: rgba(100, 188, 254, 0.16);\n  --waki-blob-2: rgba(199, 209, 222, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #243550;\n  --waki-panel-2: #324663;\n  --waki-panel-3: #142640;\n  --waki-bar: #243550;\n  --waki-border: #3d5273;\n  --waki-border-2: #4b5f7d;\n  --waki-text: #eef2f7;\n  --waki-muted: #a7b5c8;\n  --waki-accent: #64bcfe;\n  --waki-accent-2: #c7d1de;\n  --waki-focus: rgba(100, 188, 254, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #324663 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #142640 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #4b5f7d 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2e3e58;\n  --waki-slot: #32425c;\n  --waki-thumb: #1c2e48;\n  --waki-text-2: #ced7e2;\n  --waki-dim: #8291a6;\n  --waki-accent-text: #64bcfe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #64bcfe;\n  --waki-progress: linear-gradient(90deg, #64bcfe, #c7d1de);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, var(--waki-accent) 34%, var(--waki-border));\n}\n.chip {\n  border-radius: 7px;\n  font-weight: 800;\n}\n.nav-item.active {\n  box-shadow: inset 2px 0 0 var(--waki-accent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "boardroom",
      "variantName": "Boardroom",
      "aliasOf": "waki-family-boardroom"
    },
    "waki-professional-capital": {
      "name": "Waki Family Boardroom",
      "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-boardroom (Waki Family - Boardroom)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Boardroom\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 8px;\n  --waki-density: 0.52rem 0.8rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 10px 28px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 20px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.14);\n  --waki-glass-saturation: 118%;\n  --waki-elevated-saturation: 126%;\n  --waki-sidebar-blend: 96%;\n  --waki-main-blend: 84%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f3f7fa;\n  --waki-bg-2: #eef2f7;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(5, 113, 189, 0.1);\n  --waki-blob-2: rgba(75, 95, 125, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #eef2f7;\n  --waki-bar: #ffffff;\n  --waki-border: #e0e7ef;\n  --waki-border-2: #c7d1de;\n  --waki-text: #243550;\n  --waki-muted: #5b6d86;\n  --waki-accent: #0571bd;\n  --waki-accent-2: #4b5f7d;\n  --waki-focus: rgba(10, 144, 227, 0.35);\n  --waki-shadow: rgba(36, 53, 80, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #eef2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #c7d1de 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e6f1f8;\n  --waki-slot: #e7f0f7;\n  --waki-thumb: #dcebf6;\n  --waki-text-2: #3d4e68;\n  --waki-dim: #8190a3;\n  --waki-accent-text: #0571bd;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0571bd;\n  --waki-progress: linear-gradient(90deg, #0571bd, #4b5f7d);\n}\nhtml.dark {\n\n  --waki-bg-1: #142640;\n  --waki-bg-2: #0f1c30;\n  --waki-bg-3: #243550;\n  --waki-blob-1: rgba(100, 188, 254, 0.16);\n  --waki-blob-2: rgba(199, 209, 222, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #243550;\n  --waki-panel-2: #324663;\n  --waki-panel-3: #142640;\n  --waki-bar: #243550;\n  --waki-border: #3d5273;\n  --waki-border-2: #4b5f7d;\n  --waki-text: #eef2f7;\n  --waki-muted: #a7b5c8;\n  --waki-accent: #64bcfe;\n  --waki-accent-2: #c7d1de;\n  --waki-focus: rgba(100, 188, 254, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #324663 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #142640 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #4b5f7d 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2e3e58;\n  --waki-slot: #32425c;\n  --waki-thumb: #1c2e48;\n  --waki-text-2: #ced7e2;\n  --waki-dim: #8291a6;\n  --waki-accent-text: #64bcfe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #64bcfe;\n  --waki-progress: linear-gradient(90deg, #64bcfe, #c7d1de);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, var(--waki-accent) 34%, var(--waki-border));\n}\n.chip {\n  border-radius: 7px;\n  font-weight: 800;\n}\n.nav-item.active {\n  box-shadow: inset 2px 0 0 var(--waki-accent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "boardroom",
      "variantName": "Boardroom",
      "aliasOf": "waki-family-boardroom"
    },
    "waki-corporate-atlas": {
      "name": "Waki Family Boardroom",
      "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-boardroom (Waki Family - Boardroom)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Boardroom\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 8px;\n  --waki-density: 0.52rem 0.8rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 10px 28px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 20px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.14);\n  --waki-glass-saturation: 118%;\n  --waki-elevated-saturation: 126%;\n  --waki-sidebar-blend: 96%;\n  --waki-main-blend: 84%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f3f7fa;\n  --waki-bg-2: #eef2f7;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(5, 113, 189, 0.1);\n  --waki-blob-2: rgba(75, 95, 125, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #eef2f7;\n  --waki-bar: #ffffff;\n  --waki-border: #e0e7ef;\n  --waki-border-2: #c7d1de;\n  --waki-text: #243550;\n  --waki-muted: #5b6d86;\n  --waki-accent: #0571bd;\n  --waki-accent-2: #4b5f7d;\n  --waki-focus: rgba(10, 144, 227, 0.35);\n  --waki-shadow: rgba(36, 53, 80, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #eef2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #c7d1de 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e6f1f8;\n  --waki-slot: #e7f0f7;\n  --waki-thumb: #dcebf6;\n  --waki-text-2: #3d4e68;\n  --waki-dim: #8190a3;\n  --waki-accent-text: #0571bd;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0571bd;\n  --waki-progress: linear-gradient(90deg, #0571bd, #4b5f7d);\n}\nhtml.dark {\n\n  --waki-bg-1: #142640;\n  --waki-bg-2: #0f1c30;\n  --waki-bg-3: #243550;\n  --waki-blob-1: rgba(100, 188, 254, 0.16);\n  --waki-blob-2: rgba(199, 209, 222, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #243550;\n  --waki-panel-2: #324663;\n  --waki-panel-3: #142640;\n  --waki-bar: #243550;\n  --waki-border: #3d5273;\n  --waki-border-2: #4b5f7d;\n  --waki-text: #eef2f7;\n  --waki-muted: #a7b5c8;\n  --waki-accent: #64bcfe;\n  --waki-accent-2: #c7d1de;\n  --waki-focus: rgba(100, 188, 254, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #324663 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #142640 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #4b5f7d 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2e3e58;\n  --waki-slot: #32425c;\n  --waki-thumb: #1c2e48;\n  --waki-text-2: #ced7e2;\n  --waki-dim: #8291a6;\n  --waki-accent-text: #64bcfe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #64bcfe;\n  --waki-progress: linear-gradient(90deg, #64bcfe, #c7d1de);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, var(--waki-accent) 34%, var(--waki-border));\n}\n.chip {\n  border-radius: 7px;\n  font-weight: 800;\n}\n.nav-item.active {\n  box-shadow: inset 2px 0 0 var(--waki-accent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "boardroom",
      "variantName": "Boardroom",
      "aliasOf": "waki-family-boardroom"
    },
    "waki-corporate-ledger": {
      "name": "Waki Family Boardroom",
      "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-boardroom (Waki Family - Boardroom)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Boardroom\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 8px;\n  --waki-density: 0.52rem 0.8rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 10px 28px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 20px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.14);\n  --waki-glass-saturation: 118%;\n  --waki-elevated-saturation: 126%;\n  --waki-sidebar-blend: 96%;\n  --waki-main-blend: 84%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f3f7fa;\n  --waki-bg-2: #eef2f7;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(5, 113, 189, 0.1);\n  --waki-blob-2: rgba(75, 95, 125, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #eef2f7;\n  --waki-bar: #ffffff;\n  --waki-border: #e0e7ef;\n  --waki-border-2: #c7d1de;\n  --waki-text: #243550;\n  --waki-muted: #5b6d86;\n  --waki-accent: #0571bd;\n  --waki-accent-2: #4b5f7d;\n  --waki-focus: rgba(10, 144, 227, 0.35);\n  --waki-shadow: rgba(36, 53, 80, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #eef2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #c7d1de 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e6f1f8;\n  --waki-slot: #e7f0f7;\n  --waki-thumb: #dcebf6;\n  --waki-text-2: #3d4e68;\n  --waki-dim: #8190a3;\n  --waki-accent-text: #0571bd;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0571bd;\n  --waki-progress: linear-gradient(90deg, #0571bd, #4b5f7d);\n}\nhtml.dark {\n\n  --waki-bg-1: #142640;\n  --waki-bg-2: #0f1c30;\n  --waki-bg-3: #243550;\n  --waki-blob-1: rgba(100, 188, 254, 0.16);\n  --waki-blob-2: rgba(199, 209, 222, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #243550;\n  --waki-panel-2: #324663;\n  --waki-panel-3: #142640;\n  --waki-bar: #243550;\n  --waki-border: #3d5273;\n  --waki-border-2: #4b5f7d;\n  --waki-text: #eef2f7;\n  --waki-muted: #a7b5c8;\n  --waki-accent: #64bcfe;\n  --waki-accent-2: #c7d1de;\n  --waki-focus: rgba(100, 188, 254, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #324663 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #142640 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #4b5f7d 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2e3e58;\n  --waki-slot: #32425c;\n  --waki-thumb: #1c2e48;\n  --waki-text-2: #ced7e2;\n  --waki-dim: #8291a6;\n  --waki-accent-text: #64bcfe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #64bcfe;\n  --waki-progress: linear-gradient(90deg, #64bcfe, #c7d1de);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, var(--waki-accent) 34%, var(--waki-border));\n}\n.chip {\n  border-radius: 7px;\n  font-weight: 800;\n}\n.nav-item.active {\n  box-shadow: inset 2px 0 0 var(--waki-accent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "boardroom",
      "variantName": "Boardroom",
      "aliasOf": "waki-family-boardroom"
    },
    "waki-corporate-summit": {
      "name": "Waki Family Boardroom",
      "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-boardroom (Waki Family - Boardroom)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Boardroom\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 8px;\n  --waki-density: 0.52rem 0.8rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 10px 28px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 20px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.14);\n  --waki-glass-saturation: 118%;\n  --waki-elevated-saturation: 126%;\n  --waki-sidebar-blend: 96%;\n  --waki-main-blend: 84%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f3f7fa;\n  --waki-bg-2: #eef2f7;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(5, 113, 189, 0.1);\n  --waki-blob-2: rgba(75, 95, 125, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #eef2f7;\n  --waki-bar: #ffffff;\n  --waki-border: #e0e7ef;\n  --waki-border-2: #c7d1de;\n  --waki-text: #243550;\n  --waki-muted: #5b6d86;\n  --waki-accent: #0571bd;\n  --waki-accent-2: #4b5f7d;\n  --waki-focus: rgba(10, 144, 227, 0.35);\n  --waki-shadow: rgba(36, 53, 80, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #eef2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #c7d1de 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e6f1f8;\n  --waki-slot: #e7f0f7;\n  --waki-thumb: #dcebf6;\n  --waki-text-2: #3d4e68;\n  --waki-dim: #8190a3;\n  --waki-accent-text: #0571bd;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0571bd;\n  --waki-progress: linear-gradient(90deg, #0571bd, #4b5f7d);\n}\nhtml.dark {\n\n  --waki-bg-1: #142640;\n  --waki-bg-2: #0f1c30;\n  --waki-bg-3: #243550;\n  --waki-blob-1: rgba(100, 188, 254, 0.16);\n  --waki-blob-2: rgba(199, 209, 222, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #243550;\n  --waki-panel-2: #324663;\n  --waki-panel-3: #142640;\n  --waki-bar: #243550;\n  --waki-border: #3d5273;\n  --waki-border-2: #4b5f7d;\n  --waki-text: #eef2f7;\n  --waki-muted: #a7b5c8;\n  --waki-accent: #64bcfe;\n  --waki-accent-2: #c7d1de;\n  --waki-focus: rgba(100, 188, 254, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #324663 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #142640 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #4b5f7d 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2e3e58;\n  --waki-slot: #32425c;\n  --waki-thumb: #1c2e48;\n  --waki-text-2: #ced7e2;\n  --waki-dim: #8291a6;\n  --waki-accent-text: #64bcfe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #64bcfe;\n  --waki-progress: linear-gradient(90deg, #64bcfe, #c7d1de);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, var(--waki-accent) 34%, var(--waki-border));\n}\n.chip {\n  border-radius: 7px;\n  font-weight: 800;\n}\n.nav-item.active {\n  box-shadow: inset 2px 0 0 var(--waki-accent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "boardroom",
      "variantName": "Boardroom",
      "aliasOf": "waki-family-boardroom"
    },
    "waki-corporate-harbor": {
      "name": "Waki Family Boardroom",
      "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-boardroom (Waki Family - Boardroom)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Boardroom\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 8px;\n  --waki-density: 0.52rem 0.8rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 10px 28px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 20px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.14);\n  --waki-glass-saturation: 118%;\n  --waki-elevated-saturation: 126%;\n  --waki-sidebar-blend: 96%;\n  --waki-main-blend: 84%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 8px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #f3f7fa;\n  --waki-bg-2: #eef2f7;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(5, 113, 189, 0.1);\n  --waki-blob-2: rgba(75, 95, 125, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #ffffff;\n  --waki-panel-2: #ffffff;\n  --waki-panel-3: #eef2f7;\n  --waki-bar: #ffffff;\n  --waki-border: #e0e7ef;\n  --waki-border-2: #c7d1de;\n  --waki-text: #243550;\n  --waki-muted: #5b6d86;\n  --waki-accent: #0571bd;\n  --waki-accent-2: #4b5f7d;\n  --waki-focus: rgba(10, 144, 227, 0.35);\n  --waki-shadow: rgba(36, 53, 80, 0.1);\n  --waki-overlay-panel: color-mix(in srgb, #ffffff 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #eef2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, #c7d1de 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e6f1f8;\n  --waki-slot: #e7f0f7;\n  --waki-thumb: #dcebf6;\n  --waki-text-2: #3d4e68;\n  --waki-dim: #8190a3;\n  --waki-accent-text: #0571bd;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0571bd;\n  --waki-progress: linear-gradient(90deg, #0571bd, #4b5f7d);\n}\nhtml.dark {\n\n  --waki-bg-1: #142640;\n  --waki-bg-2: #0f1c30;\n  --waki-bg-3: #243550;\n  --waki-blob-1: rgba(100, 188, 254, 0.16);\n  --waki-blob-2: rgba(199, 209, 222, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #243550;\n  --waki-panel-2: #324663;\n  --waki-panel-3: #142640;\n  --waki-bar: #243550;\n  --waki-border: #3d5273;\n  --waki-border-2: #4b5f7d;\n  --waki-text: #eef2f7;\n  --waki-muted: #a7b5c8;\n  --waki-accent: #64bcfe;\n  --waki-accent-2: #c7d1de;\n  --waki-focus: rgba(100, 188, 254, 0.4);\n  --waki-shadow: rgba(0, 0, 0, 0.45);\n  --waki-overlay-panel: color-mix(in srgb, #324663 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #142640 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, #4b5f7d 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #2e3e58;\n  --waki-slot: #32425c;\n  --waki-thumb: #1c2e48;\n  --waki-text-2: #ced7e2;\n  --waki-dim: #8291a6;\n  --waki-accent-text: #64bcfe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #64bcfe;\n  --waki-progress: linear-gradient(90deg, #64bcfe, #c7d1de);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.shell-main,\n.mobile-card {\n  backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .72)) saturate(118%);\n}\n.glass-bar,\n.glass-elevated {\n  border-top: 1px solid color-mix(in srgb, var(--waki-accent) 34%, var(--waki-border));\n}\n.chip {\n  border-radius: 7px;\n  font-weight: 800;\n}\n.nav-item.active {\n  box-shadow: inset 2px 0 0 var(--waki-accent);\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "boardroom",
      "variantName": "Boardroom",
      "aliasOf": "waki-family-boardroom"
    },
    "waki-frosted-pro-platinum": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-frosted-pro-azure": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-frosted-pro-jade": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-frosted-pro-amethyst": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-system-mac": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-system-windows": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-mobile-orchid": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-mobile-mint": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-mobile-sunrise": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-mobile-ocean": {
      "name": "Waki Family Mac",
      "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-mac (Waki Family - Mac)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Mac\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 20px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: -1px;\n  --waki-elevated-hover-y: -2px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 18px 46px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.16);\n  --waki-elevated-shadow-stack: 0 28px 70px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.28);\n  --waki-inset-shadow: inset 0 1px 18px color-mix(in srgb, white 8%, transparent), 0 8px 20px rgba(0,0,0,.05);\n  --waki-glass-saturation: 170%;\n  --waki-elevated-saturation: 190%;\n  --waki-sidebar-blend: 86%;\n  --waki-main-blend: 70%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 9px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-font-display: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", Arial, sans-serif;\n  --waki-bg-1: #f5f5f7;\n  --waki-bg-2: #eceef2;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(0, 122, 255, 0.1);\n  --waki-blob-2: rgba(94, 92, 230, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: rgba(255,255,255,.72);\n  --waki-panel-2: rgba(255,255,255,.92);\n  --waki-panel-3: #f2f2f7;\n  --waki-bar: rgba(255,255,255,.86);\n  --waki-border: rgba(60,60,67,.16);\n  --waki-border-2: rgba(0,122,255,.35);\n  --waki-text: #1d1d1f;\n  --waki-muted: #6e6e73;\n  --waki-accent: #007aff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(0,122,255,.28);\n  --waki-shadow: rgba(0,0,0,.12);\n  --waki-overlay-panel: color-mix(in srgb, rgba(255,255,255,.92) 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #f2f2f7 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(0,122,255,.35) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #e3effd;\n  --waki-slot: #e9eff7;\n  --waki-thumb: #d9eafd;\n  --waki-text-2: #414145;\n  --waki-dim: #909094;\n  --waki-accent-text: #0371e9;\n  --waki-on-accent: #1d1d1f;\n  --waki-success: #047857;\n  --waki-warning: #b45309;\n  --waki-warning-text: #b45309;\n  --waki-danger: #be123c;\n  --waki-info: #0371e9;\n  --waki-progress: linear-gradient(90deg, #007aff, #5e5ce6);\n}\nhtml.dark {\n\n  --waki-bg-1: #1c1c1e;\n  --waki-bg-2: #141416;\n  --waki-bg-3: #232326;\n  --waki-blob-1: rgba(10, 132, 255, 0.16);\n  --waki-blob-2: rgba(94, 92, 230, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: rgba(44,44,46,.72);\n  --waki-panel-2: rgba(58,58,60,.85);\n  --waki-panel-3: #2c2c2e;\n  --waki-bar: rgba(28,28,30,.9);\n  --waki-border: rgba(84,84,88,.55);\n  --waki-border-2: rgba(10,132,255,.45);\n  --waki-text: #f5f5f7;\n  --waki-muted: #a1a1a6;\n  --waki-accent: #0a84ff;\n  --waki-accent-2: #5e5ce6;\n  --waki-focus: rgba(10,132,255,.32);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, rgba(58,58,60,.85) 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #2c2c2e 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(10,132,255,.45) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #323234;\n  --waki-slot: #363638;\n  --waki-thumb: #222224;\n  --waki-text-2: #cfcfd3;\n  --waki-dim: #808084;\n  --waki-accent-text: #228ffe;\n  --waki-on-accent: #0b0b10;\n  --waki-success: #6ee7b7;\n  --waki-warning: #fcd34d;\n  --waki-warning-text: #fcd34d;\n  --waki-danger: #fda4af;\n  --waki-info: #228ffe;\n  --waki-progress: linear-gradient(90deg, #0a84ff, #5e5ce6);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass-bar {\n  min-height: 44px;\n  border-bottom: 1px solid color-mix(in srgb, var(--waki-border) 72%, transparent);\n}\n.glass-bar::before {\n  content: \"\";\n  position: absolute;\n  left: 13px;\n  top: 13px;\n  width: 38px;\n  height: 11px;\n  border-radius: 999px;\n  background:\n    radial-gradient(circle at 5px 5px, #ff5f57 0 5px, transparent 5.5px),\n    radial-gradient(circle at 19px 5px, #ffbd2e 0 5px, transparent 5.5px),\n    radial-gradient(circle at 33px 5px, #28c840 0 5px, transparent 5.5px);\n  pointer-events: none;\n}\n.shell-sidebar {\n  border-right: 1px solid color-mix(in srgb, var(--waki-border) 70%, transparent);\n}\n.btn-primary {\n  border-radius: 8px;\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "mac",
      "variantName": "Mac",
      "aliasOf": "waki-family-mac"
    },
    "waki-command-cyan": {
      "name": "Waki Family Cobalt",
      "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-cobalt (Waki Family - Cobalt)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Cobalt\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 0px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: 0px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 24px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 40px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-glass-saturation: 100%;\n  --waki-elevated-saturation: 100%;\n  --waki-sidebar-blend: 100%;\n  --waki-main-blend: 100%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 6px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #ffffff;\n  --waki-bg-2: #f4f7fe;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(23, 70, 216, 0.1);\n  --waki-blob-2: rgba(91, 47, 214, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #fdfdff;\n  --waki-panel-2: #e6ecfa;\n  --waki-panel-3: #d6e0f8;\n  --waki-bar: #e6ecfa;\n  --waki-border: rgba(20,32,80,.16);\n  --waki-border-2: rgba(20,32,80,.2);\n  --waki-text: #0f1732;\n  --waki-muted: #4a5480;\n  --waki-accent: #1746d8;\n  --waki-accent-2: #5b2fd6;\n  --waki-focus: rgba(23,70,216,.24);\n  --waki-shadow: rgba(15,23,50,.1);\n  --waki-overlay-panel: color-mix(in srgb, #e6ecfa 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #d6e0f8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(20,32,80,.2) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #d6e0f8;\n  --waki-slot: #eef3fe;\n  --waki-thumb: #d5ddf4;\n  --waki-text-2: #333d63;\n  --waki-dim: #6a749c;\n  --waki-accent-text: #1235a6;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #c07a08;\n  --waki-warning-text: #8f5b06;\n  --waki-danger: #c0354f;\n  --waki-info: #0877b2;\n  --waki-progress: linear-gradient(90deg, #1746d8, #5b2fd6);\n}\nhtml.dark {\n\n  --waki-bg-1: #080b14;\n  --waki-bg-2: #0c1122;\n  --waki-bg-3: #0a0e1b;\n  --waki-blob-1: rgba(127, 165, 255, 0.16);\n  --waki-blob-2: rgba(169, 140, 255, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #161c34;\n  --waki-panel-2: #101528;\n  --waki-panel-3: #1a2140;\n  --waki-bar: #101528;\n  --waki-border: rgba(255,255,255,.08);\n  --waki-border-2: rgba(255,255,255,.15);\n  --waki-text: #e6e9f7;\n  --waki-muted: #949dc0;\n  --waki-accent: #7fa5ff;\n  --waki-accent-2: #a98cff;\n  --waki-focus: rgba(127,165,255,.24);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, #101528 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #1a2140 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(255,255,255,.15) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #1a2140;\n  --waki-slot: #1c2344;\n  --waki-thumb: #0e1322;\n  --waki-text-2: #b4bcda;\n  --waki-dim: #727b9e;\n  --waki-accent-text: #a8c0ff;\n  --waki-on-accent: #12131a;\n  --waki-success: #6ee7b7;\n  --waki-warning: #f0b84f;\n  --waki-warning-text: #f0b84f;\n  --waki-danger: #f0768a;\n  --waki-info: #4fb8f0;\n  --waki-progress: linear-gradient(90deg, #7fa5ff, #a98cff);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\ncode,\nkbd,\npre {\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\nprogress::-webkit-progress-value {\n  background: linear-gradient(90deg, var(--waki-accent), var(--waki-accent-2));\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "cobalt",
      "variantName": "Cobalt",
      "aliasOf": "waki-family-cobalt"
    },
    "waki-command-lime": {
      "name": "Waki Family Cobalt",
      "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-cobalt (Waki Family - Cobalt)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Cobalt\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 0px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: 0px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 24px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 40px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-glass-saturation: 100%;\n  --waki-elevated-saturation: 100%;\n  --waki-sidebar-blend: 100%;\n  --waki-main-blend: 100%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 6px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #ffffff;\n  --waki-bg-2: #f4f7fe;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(23, 70, 216, 0.1);\n  --waki-blob-2: rgba(91, 47, 214, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #fdfdff;\n  --waki-panel-2: #e6ecfa;\n  --waki-panel-3: #d6e0f8;\n  --waki-bar: #e6ecfa;\n  --waki-border: rgba(20,32,80,.16);\n  --waki-border-2: rgba(20,32,80,.2);\n  --waki-text: #0f1732;\n  --waki-muted: #4a5480;\n  --waki-accent: #1746d8;\n  --waki-accent-2: #5b2fd6;\n  --waki-focus: rgba(23,70,216,.24);\n  --waki-shadow: rgba(15,23,50,.1);\n  --waki-overlay-panel: color-mix(in srgb, #e6ecfa 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #d6e0f8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(20,32,80,.2) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #d6e0f8;\n  --waki-slot: #eef3fe;\n  --waki-thumb: #d5ddf4;\n  --waki-text-2: #333d63;\n  --waki-dim: #6a749c;\n  --waki-accent-text: #1235a6;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #c07a08;\n  --waki-warning-text: #8f5b06;\n  --waki-danger: #c0354f;\n  --waki-info: #0877b2;\n  --waki-progress: linear-gradient(90deg, #1746d8, #5b2fd6);\n}\nhtml.dark {\n\n  --waki-bg-1: #080b14;\n  --waki-bg-2: #0c1122;\n  --waki-bg-3: #0a0e1b;\n  --waki-blob-1: rgba(127, 165, 255, 0.16);\n  --waki-blob-2: rgba(169, 140, 255, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #161c34;\n  --waki-panel-2: #101528;\n  --waki-panel-3: #1a2140;\n  --waki-bar: #101528;\n  --waki-border: rgba(255,255,255,.08);\n  --waki-border-2: rgba(255,255,255,.15);\n  --waki-text: #e6e9f7;\n  --waki-muted: #949dc0;\n  --waki-accent: #7fa5ff;\n  --waki-accent-2: #a98cff;\n  --waki-focus: rgba(127,165,255,.24);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, #101528 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #1a2140 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(255,255,255,.15) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #1a2140;\n  --waki-slot: #1c2344;\n  --waki-thumb: #0e1322;\n  --waki-text-2: #b4bcda;\n  --waki-dim: #727b9e;\n  --waki-accent-text: #a8c0ff;\n  --waki-on-accent: #12131a;\n  --waki-success: #6ee7b7;\n  --waki-warning: #f0b84f;\n  --waki-warning-text: #f0b84f;\n  --waki-danger: #f0768a;\n  --waki-info: #4fb8f0;\n  --waki-progress: linear-gradient(90deg, #7fa5ff, #a98cff);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\ncode,\nkbd,\npre {\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\nprogress::-webkit-progress-value {\n  background: linear-gradient(90deg, var(--waki-accent), var(--waki-accent-2));\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "cobalt",
      "variantName": "Cobalt",
      "aliasOf": "waki-family-cobalt"
    },
    "waki-command-magenta": {
      "name": "Waki Family Cobalt",
      "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-cobalt (Waki Family - Cobalt)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Cobalt\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 0px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: 0px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 24px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 40px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-glass-saturation: 100%;\n  --waki-elevated-saturation: 100%;\n  --waki-sidebar-blend: 100%;\n  --waki-main-blend: 100%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 6px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #ffffff;\n  --waki-bg-2: #f4f7fe;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(23, 70, 216, 0.1);\n  --waki-blob-2: rgba(91, 47, 214, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #fdfdff;\n  --waki-panel-2: #e6ecfa;\n  --waki-panel-3: #d6e0f8;\n  --waki-bar: #e6ecfa;\n  --waki-border: rgba(20,32,80,.16);\n  --waki-border-2: rgba(20,32,80,.2);\n  --waki-text: #0f1732;\n  --waki-muted: #4a5480;\n  --waki-accent: #1746d8;\n  --waki-accent-2: #5b2fd6;\n  --waki-focus: rgba(23,70,216,.24);\n  --waki-shadow: rgba(15,23,50,.1);\n  --waki-overlay-panel: color-mix(in srgb, #e6ecfa 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #d6e0f8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(20,32,80,.2) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #d6e0f8;\n  --waki-slot: #eef3fe;\n  --waki-thumb: #d5ddf4;\n  --waki-text-2: #333d63;\n  --waki-dim: #6a749c;\n  --waki-accent-text: #1235a6;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #c07a08;\n  --waki-warning-text: #8f5b06;\n  --waki-danger: #c0354f;\n  --waki-info: #0877b2;\n  --waki-progress: linear-gradient(90deg, #1746d8, #5b2fd6);\n}\nhtml.dark {\n\n  --waki-bg-1: #080b14;\n  --waki-bg-2: #0c1122;\n  --waki-bg-3: #0a0e1b;\n  --waki-blob-1: rgba(127, 165, 255, 0.16);\n  --waki-blob-2: rgba(169, 140, 255, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #161c34;\n  --waki-panel-2: #101528;\n  --waki-panel-3: #1a2140;\n  --waki-bar: #101528;\n  --waki-border: rgba(255,255,255,.08);\n  --waki-border-2: rgba(255,255,255,.15);\n  --waki-text: #e6e9f7;\n  --waki-muted: #949dc0;\n  --waki-accent: #7fa5ff;\n  --waki-accent-2: #a98cff;\n  --waki-focus: rgba(127,165,255,.24);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, #101528 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #1a2140 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(255,255,255,.15) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #1a2140;\n  --waki-slot: #1c2344;\n  --waki-thumb: #0e1322;\n  --waki-text-2: #b4bcda;\n  --waki-dim: #727b9e;\n  --waki-accent-text: #a8c0ff;\n  --waki-on-accent: #12131a;\n  --waki-success: #6ee7b7;\n  --waki-warning: #f0b84f;\n  --waki-warning-text: #f0b84f;\n  --waki-danger: #f0768a;\n  --waki-info: #4fb8f0;\n  --waki-progress: linear-gradient(90deg, #7fa5ff, #a98cff);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\ncode,\nkbd,\npre {\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\nprogress::-webkit-progress-value {\n  background: linear-gradient(90deg, var(--waki-accent), var(--waki-accent-2));\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "cobalt",
      "variantName": "Cobalt",
      "aliasOf": "waki-family-cobalt"
    },
    "waki-command-amber": {
      "name": "Waki Family Cobalt",
      "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-cobalt (Waki Family - Cobalt)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Cobalt\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 0px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: 0px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 24px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 40px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-glass-saturation: 100%;\n  --waki-elevated-saturation: 100%;\n  --waki-sidebar-blend: 100%;\n  --waki-main-blend: 100%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 6px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #ffffff;\n  --waki-bg-2: #f4f7fe;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(23, 70, 216, 0.1);\n  --waki-blob-2: rgba(91, 47, 214, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #fdfdff;\n  --waki-panel-2: #e6ecfa;\n  --waki-panel-3: #d6e0f8;\n  --waki-bar: #e6ecfa;\n  --waki-border: rgba(20,32,80,.16);\n  --waki-border-2: rgba(20,32,80,.2);\n  --waki-text: #0f1732;\n  --waki-muted: #4a5480;\n  --waki-accent: #1746d8;\n  --waki-accent-2: #5b2fd6;\n  --waki-focus: rgba(23,70,216,.24);\n  --waki-shadow: rgba(15,23,50,.1);\n  --waki-overlay-panel: color-mix(in srgb, #e6ecfa 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #d6e0f8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(20,32,80,.2) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #d6e0f8;\n  --waki-slot: #eef3fe;\n  --waki-thumb: #d5ddf4;\n  --waki-text-2: #333d63;\n  --waki-dim: #6a749c;\n  --waki-accent-text: #1235a6;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #c07a08;\n  --waki-warning-text: #8f5b06;\n  --waki-danger: #c0354f;\n  --waki-info: #0877b2;\n  --waki-progress: linear-gradient(90deg, #1746d8, #5b2fd6);\n}\nhtml.dark {\n\n  --waki-bg-1: #080b14;\n  --waki-bg-2: #0c1122;\n  --waki-bg-3: #0a0e1b;\n  --waki-blob-1: rgba(127, 165, 255, 0.16);\n  --waki-blob-2: rgba(169, 140, 255, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #161c34;\n  --waki-panel-2: #101528;\n  --waki-panel-3: #1a2140;\n  --waki-bar: #101528;\n  --waki-border: rgba(255,255,255,.08);\n  --waki-border-2: rgba(255,255,255,.15);\n  --waki-text: #e6e9f7;\n  --waki-muted: #949dc0;\n  --waki-accent: #7fa5ff;\n  --waki-accent-2: #a98cff;\n  --waki-focus: rgba(127,165,255,.24);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, #101528 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #1a2140 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(255,255,255,.15) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #1a2140;\n  --waki-slot: #1c2344;\n  --waki-thumb: #0e1322;\n  --waki-text-2: #b4bcda;\n  --waki-dim: #727b9e;\n  --waki-accent-text: #a8c0ff;\n  --waki-on-accent: #12131a;\n  --waki-success: #6ee7b7;\n  --waki-warning: #f0b84f;\n  --waki-warning-text: #f0b84f;\n  --waki-danger: #f0768a;\n  --waki-info: #4fb8f0;\n  --waki-progress: linear-gradient(90deg, #7fa5ff, #a98cff);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\ncode,\nkbd,\npre {\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\nprogress::-webkit-progress-value {\n  background: linear-gradient(90deg, var(--waki-accent), var(--waki-accent-2));\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "cobalt",
      "variantName": "Cobalt",
      "aliasOf": "waki-family-cobalt"
    },
    "waki-studio-cobalt": {
      "name": "Waki Family Cobalt",
      "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
      "vibe": "family",
      "css": "/* ============================================================================\n * Theme: waki-family-cobalt (Waki Family - Cobalt)\n * ----------------------------------------------------------------------------\n * Material family: Waki Family\n * Hue variant: Cobalt\n * Generated by scripts/gen-v2-themes.mjs.\n * ============================================================================ */\n\n:root {\n  --waki-radius: 12px;\n  --waki-radius-sm: 4px;\n  --waki-radius-lg: 20px;\n  --waki-blur: 0px;\n  --waki-density: 0.5rem 0.78rem;\n  --waki-hover-y: 0px;\n  --waki-elevated-hover-y: -1px;\n  --waki-nav-shift: 0px;\n  --waki-shadow-stack: 0 8px 24px var(--waki-shadow);\n  --waki-elevated-shadow-stack: 0 16px 40px var(--waki-shadow), inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-inset-shadow: inset 0 1px 0 rgba(255,255,255,.04);\n  --waki-glass-saturation: 100%;\n  --waki-elevated-saturation: 100%;\n  --waki-sidebar-blend: 100%;\n  --waki-main-blend: 100%;\n  --waki-border-width: 1px;\n  --waki-button-radius: 6px;\n  --waki-mobile-extra-radius: 0px;\n  --waki-font-body: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-font-display: \"IBM Plex Sans\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --waki-bg-1: #ffffff;\n  --waki-bg-2: #f4f7fe;\n  --waki-bg-3: #ffffff;\n  --waki-blob-1: rgba(23, 70, 216, 0.1);\n  --waki-blob-2: rgba(91, 47, 214, 0.06);\n  --waki-blob-3: rgba(255, 255, 255, 0);\n  --waki-panel: #fdfdff;\n  --waki-panel-2: #e6ecfa;\n  --waki-panel-3: #d6e0f8;\n  --waki-bar: #e6ecfa;\n  --waki-border: rgba(20,32,80,.16);\n  --waki-border-2: rgba(20,32,80,.2);\n  --waki-text: #0f1732;\n  --waki-muted: #4a5480;\n  --waki-accent: #1746d8;\n  --waki-accent-2: #5b2fd6;\n  --waki-focus: rgba(23,70,216,.24);\n  --waki-shadow: rgba(15,23,50,.1);\n  --waki-overlay-panel: color-mix(in srgb, #e6ecfa 38%, rgba(255,255,255,.96));\n  --waki-overlay-panel-strong: color-mix(in srgb, #d6e0f8 30%, rgba(255,255,255,.985));\n  --waki-overlay-border: color-mix(in srgb, rgba(20,32,80,.2) 64%, rgba(15,23,42,.16));\n  --waki-overlay-backdrop: rgba(15,23,42,.34);\n  --waki-overlay-shadow: 0 28px 76px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);\n  --waki-panel-head: #d6e0f8;\n  --waki-slot: #eef3fe;\n  --waki-thumb: #d5ddf4;\n  --waki-text-2: #333d63;\n  --waki-dim: #6a749c;\n  --waki-accent-text: #1235a6;\n  --waki-on-accent: #ffffff;\n  --waki-success: #047857;\n  --waki-warning: #c07a08;\n  --waki-warning-text: #8f5b06;\n  --waki-danger: #c0354f;\n  --waki-info: #0877b2;\n  --waki-progress: linear-gradient(90deg, #1746d8, #5b2fd6);\n}\nhtml.dark {\n\n  --waki-bg-1: #080b14;\n  --waki-bg-2: #0c1122;\n  --waki-bg-3: #0a0e1b;\n  --waki-blob-1: rgba(127, 165, 255, 0.16);\n  --waki-blob-2: rgba(169, 140, 255, 0.08);\n  --waki-blob-3: rgba(0, 0, 0, 0);\n  --waki-panel: #161c34;\n  --waki-panel-2: #101528;\n  --waki-panel-3: #1a2140;\n  --waki-bar: #101528;\n  --waki-border: rgba(255,255,255,.08);\n  --waki-border-2: rgba(255,255,255,.15);\n  --waki-text: #e6e9f7;\n  --waki-muted: #949dc0;\n  --waki-accent: #7fa5ff;\n  --waki-accent-2: #a98cff;\n  --waki-focus: rgba(127,165,255,.24);\n  --waki-shadow: rgba(0,0,0,.5);\n  --waki-overlay-panel: color-mix(in srgb, #101528 38%, rgba(8,13,28,.93));\n  --waki-overlay-panel-strong: color-mix(in srgb, #1a2140 30%, rgba(15,23,42,.97));\n  --waki-overlay-border: color-mix(in srgb, rgba(255,255,255,.15) 64%, rgba(255,255,255,.28));\n  --waki-overlay-backdrop: rgba(2,6,23,.58);\n  --waki-overlay-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04);\n  --waki-panel-head: #1a2140;\n  --waki-slot: #1c2344;\n  --waki-thumb: #0e1322;\n  --waki-text-2: #b4bcda;\n  --waki-dim: #727b9e;\n  --waki-accent-text: #a8c0ff;\n  --waki-on-accent: #12131a;\n  --waki-success: #6ee7b7;\n  --waki-warning: #f0b84f;\n  --waki-warning-text: #f0b84f;\n  --waki-danger: #f0768a;\n  --waki-info: #4fb8f0;\n  --waki-progress: linear-gradient(90deg, #7fa5ff, #a98cff);\n}\n\nbody {\n  background:\n    \n    radial-gradient(circle at 8% 10%, var(--waki-blob-1), transparent 32%),\n    radial-gradient(circle at 92% 4%, var(--waki-blob-2), transparent 30%),\n    radial-gradient(circle at 50% 110%, var(--waki-blob-3), transparent 45%),\n    linear-gradient(135deg, var(--waki-bg-1) 0%, var(--waki-bg-2) 48%, var(--waki-bg-3) 100%);\n  background-attachment: fixed;\n  color: var(--waki-text);\n  font-family: var(--waki-font-body);\n}\nhtml.dark body {\n  color: var(--waki-text);\n}\nh1,\nh2,\nh3,\n.theme-title {\n  font-family: var(--waki-font-display);\n}\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  position: relative;\n}\n.glass {\n  background: var(--waki-panel);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: var(--waki-shadow-stack), var(--waki-inset-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;\n}\n.glass:hover {\n  transform: translateY(var(--waki-hover-y));\n  border-color: var(--waki-border-2);\n}\n.glass-elevated {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: var(--waki-border-width) solid var(--waki-border-2);\n  border-radius: var(--waki-radius-lg);\n  color: var(--waki-text);\n  box-shadow: var(--waki-elevated-shadow-stack);\n  backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 4px)) saturate(var(--waki-elevated-saturation));\n  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;\n}\n.glass-elevated:hover {\n  transform: translateY(var(--waki-elevated-hover-y));\n}\n.glass-bar {\n  background: var(--waki-bar);\n  border: var(--waki-border-width) solid var(--waki-border);\n  border-radius: var(--waki-radius);\n  color: var(--waki-text);\n  box-shadow: 0 16px 40px var(--waki-shadow);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.panel-nested {\n  background: color-mix(in srgb, var(--waki-panel-3) 78%, transparent);\n  border: var(--waki-border-width) solid color-mix(in srgb, var(--waki-border-2) 78%, transparent);\n  border-radius: var(--waki-radius-sm);\n  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 8px 20px color-mix(in srgb, var(--waki-shadow) 48%, transparent);\n}\n\n.chip,\n.status-success,\n.status-warning,\n.status-error,\n.status-info {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  border-radius: 999px;\n  padding: 0.22rem 0.62rem;\n  font-size: 0.72rem;\n  font-weight: 750;\n  line-height: 1;\n}\n.chip {\n  background: color-mix(in srgb, var(--waki-accent) 13%, transparent);\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 36%, transparent);\n  color: var(--waki-accent);\n}\n.chip:hover {\n  background: color-mix(in srgb, var(--waki-accent) 20%, transparent);\n}\n.divider-soft {\n  border-color: var(--waki-border);\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-warning,\n.btn-danger,\n.btn-ghost,\n.btn-success {\n  border-radius: var(--waki-button-radius);\n  padding: var(--waki-density);\n  font: inherit;\n  font-size: 0.86rem;\n  font-weight: 800;\n  cursor: pointer;\n  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease;\n}\n.btn-primary {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n  border: 1px solid color-mix(in srgb, var(--waki-accent) 70%, white);\n  box-shadow: 0 14px 32px color-mix(in srgb, var(--waki-accent) 36%, transparent);\n}\n.btn-primary:hover,\n.btn-success:hover {\n  transform: translateY(-1px);\n  filter: brightness(1.06) saturate(1.05);\n}\n.btn-secondary {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border-2);\n}\n.btn-secondary:hover,\n.btn-ghost:hover {\n  transform: translateY(-1px);\n  border-color: var(--waki-accent);\n  box-shadow: 0 10px 24px var(--waki-shadow);\n}\n.btn-ghost {\n  background: transparent;\n  color: var(--waki-text);\n  border: 1px solid transparent;\n}\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  color: #fff7ed;\n  border: 1px solid rgba(217, 119, 6, 0.58);\n  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.26);\n}\n.btn-danger {\n  background: linear-gradient(135deg, #f43f5e, #dc2626);\n  color: #fff1f2;\n  border: 1px solid rgba(220, 38, 38, 0.58);\n  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.26);\n}\n.btn-success {\n  background: linear-gradient(135deg, #10b981, #059669);\n  color: #ecfdf5;\n  border: 1px solid rgba(5, 150, 105, 0.58);\n  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.24);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.14);\n  color: #059669;\n  border: 1px solid rgba(16, 185, 129, 0.34);\n}\nhtml.dark .status-success {\n  color: #6ee7b7;\n}\n.status-warning {\n  background: rgba(245, 158, 11, 0.14);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.34);\n}\nhtml.dark .status-warning {\n  color: #fcd34d;\n}\n.status-error {\n  background: rgba(244, 63, 94, 0.14);\n  color: #be123c;\n  border: 1px solid rgba(244, 63, 94, 0.34);\n}\nhtml.dark .status-error {\n  color: #fda4af;\n}\n.status-info {\n  background: color-mix(in srgb, var(--waki-accent-2) 14%, transparent);\n  color: var(--waki-accent-2);\n  border: 1px solid color-mix(in srgb, var(--waki-accent-2) 38%, transparent);\n}\n\n.input {\n  background: var(--waki-panel-2);\n  color: var(--waki-text);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-sm);\n  padding: 0.58rem 0.72rem;\n  font: inherit;\n  outline: none;\n  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;\n}\n.input:focus {\n  border-color: var(--waki-accent);\n  box-shadow: 0 0 0 4px var(--waki-focus);\n}\n.input::placeholder {\n  color: var(--waki-muted);\n}\n\n.shell-sidebar {\n  background: color-mix(in srgb, var(--waki-panel-2) var(--waki-sidebar-blend), transparent);\n  border-right: 1px solid var(--waki-border);\n  backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 2px)) saturate(var(--waki-glass-saturation));\n}\n.shell-main {\n  background: color-mix(in srgb, var(--waki-panel) var(--waki-main-blend), transparent);\n  border: 1px solid var(--waki-border);\n  border-radius: var(--waki-radius-lg);\n  box-shadow: 0 22px 68px var(--waki-shadow);\n}\n.nav-item {\n  color: var(--waki-muted);\n  border-radius: var(--waki-radius-sm);\n  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;\n}\n.nav-item:hover,\n.nav-item.active {\n  color: var(--waki-text);\n  background: color-mix(in srgb, var(--waki-accent) 14%, transparent);\n  transform: translateX(var(--waki-nav-shift));\n}\n.mobile-card {\n  background: linear-gradient(145deg, var(--waki-panel-2), var(--waki-panel-3));\n  border: 1px solid var(--waki-border-2);\n  border-radius: calc(var(--waki-radius-lg) + var(--waki-mobile-extra-radius));\n  box-shadow: 0 24px 70px var(--waki-shadow);\n}\n.theme-switcher {\n  background: var(--waki-panel-2);\n  border: 1px solid var(--waki-border-2);\n  border-radius: 999px;\n  box-shadow: 0 18px 42px var(--waki-shadow);\n  backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n  -webkit-backdrop-filter: blur(var(--waki-blur)) saturate(var(--waki-glass-saturation));\n}\n.theme-swatch {\n  background: linear-gradient(135deg, var(--waki-bg-1), var(--waki-accent), var(--waki-accent-2));\n}\n.theme-switcher .active {\n  background: linear-gradient(135deg, var(--waki-accent), var(--waki-accent-2));\n  color: #ffffff;\n}\n\n.waki-dialog-surface,\n.waki-popover-surface,\n.waki-overlay-surface,\n:where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\n:where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  background:\n    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--waki-accent) 5%, transparent), transparent 36%),\n    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--waki-accent-2) 4%, transparent), transparent 40%),\n    linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 34%),\n    linear-gradient(145deg, var(--waki-overlay-panel), var(--waki-overlay-panel-strong)) !important;\n  background-clip: padding-box;\n  border: var(--waki-border-width) solid var(--waki-overlay-border) !important;\n  color: var(--waki-text);\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) + 8px)) saturate(150%) contrast(1.03) !important;\n}\nhtml.dark .waki-dialog-surface,\nhtml.dark .waki-popover-surface,\nhtml.dark .waki-overlay-surface,\nhtml.dark :where([role=\"dialog\"].surface-1, [role=\"menu\"], [role=\"listbox\"], [role=\"tooltip\"], .popover, .dropdown-menu, .menu-panel),\nhtml.dark :where([role=\"dialog\"]) > :where(.glass, .glass-bar, .glass-elevated) {\n  box-shadow: var(--waki-overlay-shadow), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04) !important;\n}\n.waki-overlay-backdrop {\n  background: var(--waki-overlay-backdrop) !important;\n  backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n  -webkit-backdrop-filter: blur(calc(var(--waki-blur) * .7)) saturate(150%) !important;\n}\n\n\n.glass,\n.glass-elevated,\n.glass-bar,\n.shell-main,\n.mobile-card {\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\ncode,\nkbd,\npre {\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace;\n}\nprogress::-webkit-progress-value {\n  background: linear-gradient(90deg, var(--waki-accent), var(--waki-accent-2));\n}\n\n\n@media (max-width: 760px) {\n  .shell-sidebar {\n    border-right: 0;\n    border-bottom: 1px solid var(--waki-border);\n  }\n  .shell-main {\n    border-radius: var(--waki-radius);\n  }\n}\n",
      "family": "family",
      "familyName": "Waki Family",
      "variantSlot": "cobalt",
      "variantName": "Cobalt",
      "aliasOf": "waki-family-cobalt"
    }
  },
  "families": {
    "family": {
      "name": "Waki Family",
      "description": "The five themes every Waki app offers, the same in the Mac apps and the web apps.",
      "structure": {
        "radius": 12,
        "blur": 8,
        "shadow": "executive-subtle",
        "surface": "crisp-translucent",
        "iconography": "regular",
        "density": "business"
      },
      "variants": [
        {
          "slot": "mac",
          "themeId": "waki-family-mac",
          "name": "Mac",
          "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
          "palette": {
            "light": {
              "bgFrom": "#f5f5f7",
              "bgTo": "#eceef2",
              "panel": "rgba(255,255,255,.72)",
              "border": "rgba(60,60,67,.16)",
              "text": "#1d1d1f",
              "accent": "#007aff"
            },
            "dark": {
              "bgFrom": "#1c1c1e",
              "bgTo": "#141416",
              "panel": "rgba(44,44,46,.72)",
              "border": "rgba(84,84,88,.55)",
              "text": "#f5f5f7",
              "accent": "#0a84ff"
            }
          }
        },
        {
          "slot": "boardroom",
          "themeId": "waki-family-boardroom",
          "name": "Boardroom",
          "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
          "palette": {
            "light": {
              "bgFrom": "#f3f7fa",
              "bgTo": "#eef2f7",
              "panel": "#ffffff",
              "border": "#e0e7ef",
              "text": "#243550",
              "accent": "#0571bd"
            },
            "dark": {
              "bgFrom": "#142640",
              "bgTo": "#0f1c30",
              "panel": "#243550",
              "border": "#3d5273",
              "text": "#eef2f7",
              "accent": "#64bcfe"
            }
          }
        },
        {
          "slot": "graphite",
          "themeId": "waki-family-graphite",
          "name": "Graphite",
          "description": "Warm stone and paper tones with a deep amber accent. Easy on the eyes.",
          "palette": {
            "light": {
              "bgFrom": "#f7f4f0",
              "bgTo": "#f1ede8",
              "panel": "#ffffff",
              "border": "#e5e0da",
              "text": "#201d1b",
              "accent": "#aa4f02"
            },
            "dark": {
              "bgFrom": "#171514",
              "bgTo": "#11100f",
              "panel": "#201d1b",
              "border": "#423d3a",
              "text": "#f1ede8",
              "accent": "#ea913c"
            }
          }
        },
        {
          "slot": "civic",
          "themeId": "waki-family-civic",
          "name": "Civic",
          "description": "Navy glass with an amber glow. Waki AI Service's look.",
          "palette": {
            "light": {
              "bgFrom": "color-mix(in srgb, #eef4ff 88%, #2563eb)",
              "bgTo": "color-mix(in srgb, #fff8ea 88%, #d97706)",
              "panel": "color-mix(in srgb, rgba(255,255,255,.68) 70%, #eef4ff)",
              "border": "color-mix(in srgb, rgba(37,99,235,.22) 82%, #2563eb)",
              "text": "#12213d",
              "accent": "#2563eb"
            },
            "dark": {
              "bgFrom": "#061329",
              "bgTo": "#24180a",
              "panel": "rgba(37,99,235,.14)",
              "border": "rgba(251,191,36,.26)",
              "text": "#edf4ff",
              "accent": "#60a5fa"
            }
          }
        },
        {
          "slot": "cobalt",
          "themeId": "waki-family-cobalt",
          "name": "Cobalt",
          "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
          "palette": {
            "light": {
              "bgFrom": "#ffffff",
              "bgTo": "#f4f7fe",
              "panel": "#fdfdff",
              "border": "rgba(20,32,80,.16)",
              "text": "#0f1732",
              "accent": "#1746d8"
            },
            "dark": {
              "bgFrom": "#080b14",
              "bgTo": "#0c1122",
              "panel": "#161c34",
              "border": "rgba(255,255,255,.08)",
              "text": "#e6e9f7",
              "accent": "#7fa5ff"
            }
          }
        }
      ]
    }
  },
  "family": {
    "defaultId": "mac",
    "themes": [
      {
        "id": "waki-family-mac",
        "nativeId": "mac",
        "name": "Mac",
        "description": "Neutral surfaces and the macOS system blue. Feels at home next to every other Mac app.",
        "migratesFrom": [
          "mac",
          "waki-system-mac",
          "waki-system-windows"
        ]
      },
      {
        "id": "waki-family-boardroom",
        "nativeId": "boardroom",
        "name": "Boardroom",
        "description": "Cool blue-grey with a clear blue accent. The Waki professional look.",
        "migratesFrom": [
          "boardroom",
          "waki-professional-boardroom",
          "professional",
          "corporate"
        ]
      },
      {
        "id": "waki-family-graphite",
        "nativeId": "graphite",
        "name": "Graphite",
        "description": "Warm stone and paper tones with a deep amber accent. Easy on the eyes.",
        "migratesFrom": [
          "graphite",
          "waki-desktop-graphite",
          "academic",
          "command"
        ]
      },
      {
        "id": "waki-family-civic",
        "nativeId": "civic",
        "name": "Civic",
        "description": "Navy glass with an amber glow. Waki AI Service's look.",
        "migratesFrom": [
          "civic",
          "waki-glass-civic",
          "glass"
        ]
      },
      {
        "id": "waki-family-cobalt",
        "nativeId": "cobalt",
        "name": "Cobalt",
        "description": "Midnight navy with cobalt and indigo. Manager 3dByPixel's look.",
        "migratesFrom": [
          "cobalt",
          "waki-studio-cobalt",
          "studio"
        ]
      }
    ]
  }
}