{
  "schemaVersion": 1,
  "pkgVersion": "0.4.0",
  "gitSha": "402a0628fc35bbbe90e0cb0fd7529af1d0f57a6a",
  "builtAt": "2026-04-30T05:04:54.069Z",
  "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",
  "themes": {
    "glass-v2": {
      "name": "Glass Default",
      "description": "Frosted glass + drift, calm neutral baseline",
      "vibe": "glass",
      "css": "/* ============================================================================\n * waki-themes / glass-v2.css\n * ----------------------------------------------------------------------------\n * Glass theme v2 — everything from v1 plus four layers of polish:\n *   1. SVG fractal-noise texture overlay on the page bg, so the\n *      backdrop-filter has real grain to refract.\n *   2. ::after light glint on each glass card — top-left fade\n *      gradient that reads like a light source catching the surface.\n *   3. Hover treatment that brightens the card slightly with a\n *      smooth 200ms transition, like glass catching light when you\n *      look straight on.\n *   4. Slow `gradientShift` animation on the body bg-position so the\n *      gradient drifts under the glass surfaces. 30s cycle — barely\n *      perceptible but enough to keep the surfaces from feeling\n *      static. Disabled under prefers-reduced-motion.\n * ============================================================================ */\n\n/* ----- Page background + drift animation ------------------------------- */\nbody {\n  background: linear-gradient(135deg, #e8eef5 0%, #f0f4f9 30%, #e5edf6 60%, #eef2f8 100%);\n  background-attachment: fixed;\n  background-size: 200% 200%;\n  animation: gradientShift 30s ease-in-out infinite;\n  color: #0f172a;\n}\nhtml.dark body {\n  background: linear-gradient(135deg, #0c1220 0%, #162033 30%, #1a2744 60%, #0f1a2e 100%);\n  background-attachment: fixed;\n  background-size: 200% 200%;\n  animation: gradientShift 30s ease-in-out infinite;\n  color: #f1f5f9;\n}\n\n@keyframes gradientShift {\n  0%   { background-position: 0% 0%; }\n  50%  { background-position: 100% 100%; }\n  100% { background-position: 0% 0%; }\n}\n\n/* SVG fractal-noise grain overlay. Inlined as a data URI so this CSS\n   file is fully self-contained — drop it in any project, no asset\n   pipeline needed. */\nbody::before {\n  content: \"\";\n  position: fixed;\n  inset: 0;\n  z-index: -1;\n  opacity: 0.03;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n  background-repeat: repeat;\n  background-size: 256px 256px;\n  pointer-events: none;\n}\nhtml.dark body::before {\n  opacity: 0.04;\n}\n\n/* ----- Surfaces --------------------------------------------------------- */\n/* `position: relative` here so the absolute ::after glint positions\n   against the card itself, not some distant ancestor. */\n.glass {\n  position: relative;\n  background: rgba(255, 255, 255, 0.65);\n  backdrop-filter: blur(12px) saturate(150%);\n  -webkit-backdrop-filter: blur(12px) saturate(150%);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  border-radius: 0.875rem;\n  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass {\n  background: rgba(255, 255, 255, 0.06);\n  border-color: rgba(255, 255, 255, 0.1);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);\n}\n\n.glass-elevated {\n  position: relative;\n  background: rgba(255, 255, 255, 0.78);\n  backdrop-filter: blur(16px) saturate(180%);\n  -webkit-backdrop-filter: blur(16px) saturate(180%);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  border-radius: 0.875rem;\n  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass-elevated {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.15);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);\n}\n\n/* Light glint — top-left highlight that traces the card outline.\n   border-radius: inherit makes it follow whatever radius the host\n   card has, so the same rule works on a pill / rounded-xl / square\n   card without per-element overrides. pointer-events: none so it\n   never catches taps. */\n.glass::after,\n.glass-elevated::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%);\n  pointer-events: none;\n}\nhtml.dark .glass::after,\nhtml.dark .glass-elevated::after {\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);\n}\n\n/* Hover — slightly more opaque + deeper drop shadow, like real glass\n   brightening when you look at it straight on. */\n.glass:hover {\n  background: rgba(255, 255, 255, 0.75);\n  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);\n}\nhtml.dark .glass:hover {\n  background: rgba(255, 255, 255, 0.1);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);\n}\n.glass-elevated:hover {\n  background: rgba(255, 255, 255, 0.88);\n  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14);\n}\nhtml.dark .glass-elevated:hover {\n  background: rgba(255, 255, 255, 0.14);\n  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);\n}\n\n.glass-bar {\n  background: rgba(255, 255, 255, 0.7);\n  backdrop-filter: blur(18px) saturate(160%);\n  -webkit-backdrop-filter: blur(18px) saturate(160%);\n}\nhtml.dark .glass-bar {\n  background: rgba(15, 23, 42, 0.55);\n}\n\n.chip {\n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\nhtml.dark .chip {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.divider-soft {\n  border-color: rgba(15, 23, 42, 0.08);\n}\nhtml.dark .divider-soft {\n  border-color: rgba(255, 255, 255, 0.08);\n}\n\n/* Honour user motion preferences. The drifting page gradient is the\n   exact kind of background motion that triggers vestibular discomfort\n   for some users. */\n\n/* ----- Action buttons --------------------------------------------------- */\n/* Required by SCHEMA.md (v0.4.0). Theme CSS loads after waki-shell\n * utilities.css so equal-specificity rules win without !important. */\n.btn-primary {\n  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n  color: #ffffff;\n  border: 1px solid #4f46e580;\n  box-shadow: 0 4px 14px #6366f150;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #4f46e5 0%, #4f46e5 100%);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);\n  color: #0a0e1a;\n  box-shadow: 0 4px 14px #818cf855;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #6366f1 0%, #6366f1 100%);\n}\n\n.btn-secondary {\n  background: rgba(255, 255, 255, 0.78);\n  color: #0f172a;\n  border: 1px solid rgba(15, 23, 42, 0.1);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  background: rgba(255, 255, 255, 0.78);\n  filter: brightness(1.05);\n  border-color: rgba(15, 23, 42, 0.1);\n}\nhtml.dark .btn-secondary {\n  background: rgba(255, 255, 255, 0.08);\n  color: #f1f5f9;\n  border-color: rgba(255, 255, 255, 0.14);\n}\nhtml.dark .btn-secondary:hover {\n  background: rgba(255, 255, 255, 0.08);\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.5);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.5);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #0f172a;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(99, 102, 241, 0.08);\n  border-color: rgba(99, 102, 241, 0.2);\n}\nhtml.dark .btn-ghost {\n  color: #f1f5f9;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(99, 102, 241, 0.14);\n  border-color: rgba(99, 102, 241, 0.26);\n}\n\n\n/* ----- Status + success + input (SCHEMA.md recommended) ---------------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: rgba(255, 255, 255, 0.78);\n  color: #0f172a;\n  border: 1px solid rgba(15, 23, 42, 0.1);\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #6366f1;\n  box-shadow: 0 0 0 3px #6366f125;\n}\nhtml.dark .input {\n  background: rgba(255, 255, 255, 0.08);\n  color: #f1f5f9;\n  border-color: rgba(255, 255, 255, 0.14);\n}\nhtml.dark .input:focus {\n  border-color: #818cf8;\n  box-shadow: 0 0 0 3px #818cf830;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  body {\n    animation: none !important;\n  }\n}\n",
      "family": "glass",
      "familyName": "Glass",
      "variantSlot": "default",
      "variantName": "Default"
    },
    "glass-plus": {
      "name": "Glass Plus",
      "description": "Richer accents and violet wash. Universal default.",
      "vibe": "glass",
      "css": "/* ============================================================================\n * waki-themes / glass-plus.css\n * ----------------------------------------------------------------------------\n * Glass with the dial turned up. Same architecture as glass-v2 (frosted\n * surfaces, fractal-noise grain, ::after light glint, drifting page\n * gradient) but with the saturation and chroma pushed in three places:\n *\n *   1. Page bg gradient gets a violet/sky tilt instead of cool slate.\n *      Same brightness floor; the difference is hue, not luminosity.\n *   2. Card surface tint takes a faint violet wash instead of plain\n *      neutral white-on-dark / white-on-light, so the brand's palette\n *      reads through every panel.\n *   3. Panels gain a touch more contrast against the bg (slightly\n *      higher opacity in light mode, slightly higher opacity + more\n *      saturated tint in dark) so the layered cards feel less wispy\n *      than vanilla Glass.\n *\n * This is the new default. Glass-v2 stays as the calmer alternative\n * for users who want the same mechanic with less brand wash.\n * ============================================================================ */\n\n/* ----- Page background + drift animation ------------------------------- */\nbody {\n  /* Light mode: warm-cool wash with a touch of violet. */\n  background: linear-gradient(135deg, #eef0fb 0%, #f3eaf8 30%, #e7eef9 60%, #f0eaf6 100%);\n  background-attachment: fixed;\n  background-size: 220% 220%;\n  animation: gradientShift 30s ease-in-out infinite;\n  color: #0f172a;\n}\nhtml.dark body {\n  /* Dark: violet/sky undertone. Distinct from glass-v2's cool-blue. */\n  background: linear-gradient(135deg, #100b24 0%, #1a1640 30%, #131a3a 60%, #0d0a22 100%);\n  background-attachment: fixed;\n  background-size: 220% 220%;\n  animation: gradientShift 30s ease-in-out infinite;\n  color: #f1f5f9;\n}\n\n@keyframes gradientShift {\n  0%   { background-position: 0% 0%; }\n  50%  { background-position: 100% 100%; }\n  100% { background-position: 0% 0%; }\n}\n\n/* SVG fractal-noise grain overlay. Inlined so this CSS file is\n   self-contained. */\nbody::before {\n  content: \"\";\n  position: fixed;\n  inset: 0;\n  z-index: -1;\n  opacity: 0.04;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n  background-repeat: repeat;\n  background-size: 256px 256px;\n  pointer-events: none;\n}\nhtml.dark body::before {\n  opacity: 0.06;\n}\n\n/* ----- Surfaces --------------------------------------------------------- */\n.glass {\n  position: relative;\n  /* Higher opacity than vanilla Glass + a faint violet wash. */\n  background: rgba(243, 235, 255, 0.72);\n  backdrop-filter: blur(14px) saturate(180%);\n  -webkit-backdrop-filter: blur(14px) saturate(180%);\n  border: 1px solid rgba(168, 85, 247, 0.22);\n  border-radius: 0.875rem;\n  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass {\n  /* More saturated violet tint than vanilla Glass's plain white-on-dark. */\n  background: rgba(168, 85, 247, 0.1);\n  border-color: rgba(168, 85, 247, 0.26);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n}\n\n.glass-elevated {\n  position: relative;\n  background: rgba(247, 240, 255, 0.85);\n  backdrop-filter: blur(18px) saturate(200%);\n  -webkit-backdrop-filter: blur(18px) saturate(200%);\n  border: 1px solid rgba(168, 85, 247, 0.32);\n  border-radius: 0.875rem;\n  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.12);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass-elevated {\n  background: rgba(168, 85, 247, 0.16);\n  border-color: rgba(168, 85, 247, 0.36);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.36);\n}\n\n/* Light glint. Pushed slightly brighter than vanilla Glass so the\n   \"real glass catching light\" feel is more pronounced. */\n.glass::after,\n.glass-elevated::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, transparent 55%);\n  pointer-events: none;\n}\nhtml.dark .glass::after,\nhtml.dark .glass-elevated::after {\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, transparent 55%);\n}\n\n/* Hover. Same mechanic as vanilla Glass; brighter swing because the\n   resting state is already more saturated. */\n.glass:hover {\n  background: rgba(247, 240, 255, 0.84);\n  box-shadow: 0 14px 44px rgba(99, 102, 241, 0.15);\n}\nhtml.dark .glass:hover {\n  background: rgba(168, 85, 247, 0.16);\n  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);\n}\n.glass-elevated:hover {\n  background: rgba(247, 240, 255, 0.92);\n  box-shadow: 0 18px 56px rgba(99, 102, 241, 0.18);\n}\nhtml.dark .glass-elevated:hover {\n  background: rgba(168, 85, 247, 0.22);\n  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.46);\n}\n\n.glass-bar {\n  background: rgba(247, 240, 255, 0.78);\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n}\nhtml.dark .glass-bar {\n  background: rgba(26, 22, 64, 0.6);\n}\n\n.chip {\n  background: rgba(168, 85, 247, 0.1);\n  border: 1px solid rgba(168, 85, 247, 0.26);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\nhtml.dark .chip {\n  background: rgba(168, 85, 247, 0.12);\n  border-color: rgba(168, 85, 247, 0.3);\n}\n\n.divider-soft {\n  border-color: rgba(168, 85, 247, 0.14);\n}\nhtml.dark .divider-soft {\n  border-color: rgba(168, 85, 247, 0.18);\n}\n\n/* ----- Action buttons --------------------------------------------------- */\n/* Required by SCHEMA.md. Glass-Plus leans violet on a violet-wash canvas;\n * primary uses the brand gradient, secondary is a frosted violet panel,\n * warning + danger keep amber/red so destructive intent reads at a glance.\n * Theme CSS loads after waki-shell utilities.css so equal-specificity\n * rules win without !important. */\n.btn-primary {\n  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);\n  color: #ffffff;\n  border: 1px solid rgba(168, 85, 247, 0.5);\n  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #9333ea 0%, #6d28d9 100%);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);\n  color: #1a0d2e;\n  box-shadow: 0 4px 14px rgba(192, 132, 252, 0.4);\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #d8b4fe 0%, #c084fc 100%);\n}\n\n.btn-secondary {\n  background: rgba(243, 235, 255, 0.78);\n  color: #0f172a;\n  border: 1px solid rgba(168, 85, 247, 0.32);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);\n}\n.btn-secondary:hover {\n  background: rgba(243, 235, 255, 0.92);\n  border-color: rgba(168, 85, 247, 0.45);\n}\nhtml.dark .btn-secondary {\n  background: rgba(168, 85, 247, 0.16);\n  color: #f1f5f9;\n  border-color: rgba(168, 85, 247, 0.32);\n}\nhtml.dark .btn-secondary:hover {\n  background: rgba(168, 85, 247, 0.24);\n  border-color: rgba(168, 85, 247, 0.45);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.5);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.5);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #0f172a;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(168, 85, 247, 0.08);\n  border-color: rgba(168, 85, 247, 0.2);\n}\nhtml.dark .btn-ghost {\n  color: #f1f5f9;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(168, 85, 247, 0.14);\n  border-color: rgba(168, 85, 247, 0.26);\n}\n\n\n/* ----- Status + success + input (SCHEMA.md recommended) ---------------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: rgba(243, 235, 255, 0.78);\n  color: #0f172a;\n  border: 1px solid rgba(168, 85, 247, 0.32);\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #a855f7;\n  box-shadow: 0 0 0 3px #a855f725;\n}\nhtml.dark .input {\n  background: rgba(168, 85, 247, 0.16);\n  color: #f1f5f9;\n  border-color: rgba(168, 85, 247, 0.32);\n}\nhtml.dark .input:focus {\n  border-color: #c084fc;\n  box-shadow: 0 0 0 3px #c084fc30;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  body {\n    animation: none !important;\n  }\n}\n",
      "family": "glass",
      "familyName": "Glass",
      "variantSlot": "plus",
      "variantName": "Plus"
    },
    "glass-v1": {
      "name": "Glass Lite",
      "description": "Softer, no glints, calmer alternative",
      "vibe": "glass",
      "css": "/* ============================================================================\n * waki-themes / glass-v1.css\n * ----------------------------------------------------------------------------\n * Glass theme v1 — frosted glass surfaces over a soft gradient page.\n * Translucent backgrounds with `backdrop-filter` blur so layered cards\n * compose visible depth. No texture, no glints, no motion — just clean\n * frosted panels.\n *\n * Browser support: backdrop-filter works everywhere except very old\n * Safari versions. On unsupported browsers the panels still render —\n * the rgba background just shows the gradient through clearly without\n * the blur, which still looks acceptable.\n * ============================================================================ */\n\n/* ----- Page background -------------------------------------------------- */\n/* Soft cool-grey gradient in light mode, deep navy gradient in dark.\n   `background-attachment: fixed` so the gradient stays put while content\n   scrolls — a moving gradient drags attention every scroll. */\nbody {\n  background: linear-gradient(135deg, #e8eef5 0%, #f0f4f9 30%, #e5edf6 60%, #eef2f8 100%);\n  background-attachment: fixed;\n  color: #0f172a;\n}\nhtml.dark body {\n  /* Violet/indigo undertone in dark mode so glass-v1 reads as warmer\n     than glass-v2's cool blue baseline. Same brightness floor; the\n     difference is hue, not luminosity. */\n  background: linear-gradient(135deg, #170c2a 0%, #251447 30%, #1f1240 60%, #14092a 100%);\n  background-attachment: fixed;\n  color: #f1f5f9;\n}\n\n/* ----- Surfaces --------------------------------------------------------- */\n.glass {\n  background: rgba(255, 255, 255, 0.65);\n  backdrop-filter: blur(12px) saturate(150%);\n  -webkit-backdrop-filter: blur(12px) saturate(150%);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  border-radius: 0.875rem;\n  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);\n  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;\n}\nhtml.dark .glass {\n  /* Violet-tinted panel chroma so v1 stays visibly its own theme even\n     in dark mode. Was rgba(255,255,255,0.06) which converged with v2. */\n  background: rgba(168, 85, 247, 0.09);\n  border-color: rgba(168, 85, 247, 0.22);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);\n}\n\n.glass-elevated {\n  background: rgba(255, 255, 255, 0.78);\n  backdrop-filter: blur(16px) saturate(180%);\n  -webkit-backdrop-filter: blur(16px) saturate(180%);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  border-radius: 0.875rem;\n  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);\n  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;\n}\nhtml.dark .glass-elevated {\n  background: rgba(168, 85, 247, 0.13);\n  border-color: rgba(168, 85, 247, 0.3);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);\n}\n\n/* Frosted bar — used by fixed Header / sidebar chrome. Slightly more\n   blur than .glass so the chrome reads as \"behind the content\" even\n   when content scrolls past it. */\n.glass-bar {\n  background: rgba(255, 255, 255, 0.7);\n  backdrop-filter: blur(18px) saturate(160%);\n  -webkit-backdrop-filter: blur(18px) saturate(160%);\n}\nhtml.dark .glass-bar {\n  background: rgba(31, 18, 64, 0.6);\n}\n\n.chip {\n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\nhtml.dark .chip {\n  background: rgba(168, 85, 247, 0.1);\n  border-color: rgba(168, 85, 247, 0.22);\n}\n\n.divider-soft {\n  border-color: rgba(15, 23, 42, 0.08);\n}\nhtml.dark .divider-soft {\n  border-color: rgba(255, 255, 255, 0.08);\n}\n\n/* ----- Action buttons --------------------------------------------------- */\n/* Required by SCHEMA.md (v0.4.0). Theme CSS loads after waki-shell\n * utilities.css so equal-specificity rules win without !important. */\n.btn-primary {\n  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n  color: #ffffff;\n  border: 1px solid #7c3aed80;\n  box-shadow: 0 4px 14px #8b5cf650;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #7c3aed 0%, #7c3aed 100%);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);\n  color: #0a0e1a;\n  box-shadow: 0 4px 14px #a78bfa55;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #8b5cf6 0%, #8b5cf6 100%);\n}\n\n.btn-secondary {\n  background: rgba(255, 255, 255, 0.7);\n  color: #0f172a;\n  border: 1px solid rgba(15, 23, 42, 0.12);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  background: rgba(255, 255, 255, 0.7);\n  filter: brightness(1.05);\n  border-color: rgba(15, 23, 42, 0.12);\n}\nhtml.dark .btn-secondary {\n  background: rgba(255, 255, 255, 0.08);\n  color: #f1f5f9;\n  border-color: rgba(255, 255, 255, 0.14);\n}\nhtml.dark .btn-secondary:hover {\n  background: rgba(255, 255, 255, 0.08);\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.5);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.5);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #0f172a;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(139, 92, 246, 0.08);\n  border-color: rgba(139, 92, 246, 0.18);\n}\nhtml.dark .btn-ghost {\n  color: #f1f5f9;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(139, 92, 246, 0.14);\n  border-color: rgba(139, 92, 246, 0.24);\n}\n\n\n/* ----- Status + success + input (SCHEMA.md recommended) ---------------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: rgba(255, 255, 255, 0.7);\n  color: #0f172a;\n  border: 1px solid rgba(15, 23, 42, 0.12);\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #8b5cf6;\n  box-shadow: 0 0 0 3px #8b5cf625;\n}\nhtml.dark .input {\n  background: rgba(255, 255, 255, 0.08);\n  color: #f1f5f9;\n  border-color: rgba(255, 255, 255, 0.14);\n}\nhtml.dark .input:focus {\n  border-color: #a78bfa;\n  box-shadow: 0 0 0 3px #a78bfa30;\n}\n\n",
      "family": "glass",
      "familyName": "Glass",
      "variantSlot": "lite",
      "variantName": "Lite"
    },
    "frosted-glass": {
      "name": "Glass Frosted",
      "description": "High-contrast teal frost, heavier blur",
      "vibe": "glass",
      "css": "/* ============================================================================\n * waki-themes / frosted-glass.css\n * ----------------------------------------------------------------------------\n * Frosted Glass — maximum frost everywhere.\n *\n *   - Deep ocean / blue-green page gradient with a 45s drift.\n *   - Ultra-heavy frost (30px blur, 180% saturate) on every surface.\n *   - Teal/cyan-tinted card alphas + borders so the frost reads as\n *     blue-green refracted ocean light, not just neutral white haze.\n *   - Teal-tinted shadows so the floating panels feel like they're sitting\n *     in cool water rather than over a flat black plane.\n * ============================================================================ */\n\n/* ----- Page background + drift animation ------------------------------- */\nbody {\n  background: linear-gradient(135deg, #e0f0f5 0%, #eaf5e8 40%, #dff0f8 100%);\n  background-attachment: fixed;\n  background-size: 220% 220%;\n  animation: frostedGlassDrift 45s ease-in-out infinite;\n  color: #0b1f2a;\n}\nhtml.dark body {\n  background: linear-gradient(135deg, #0a1628 0%, #0d2233 50%, #0a2018 100%);\n  background-attachment: fixed;\n  background-size: 220% 220%;\n  animation: frostedGlassDrift 45s ease-in-out infinite;\n  color: #e6f4f1;\n}\n\n@keyframes frostedGlassDrift {\n  0%   { background-position: 0% 0%; }\n  50%  { background-position: 100% 100%; }\n  100% { background-position: 0% 0%; }\n}\n\n/* SVG fractal-noise grain overlay so the heavy frost has actual grain\n   to refract — without it 30px blur on a flat gradient looks washed-out\n   rather than frosty. Inlined as a data URI so this file is portable. */\nbody::before {\n  content: \"\";\n  position: fixed;\n  inset: 0;\n  z-index: -1;\n  opacity: 0.025;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n  background-repeat: repeat;\n  background-size: 256px 256px;\n  pointer-events: none;\n}\nhtml.dark body::before {\n  opacity: 0.035;\n}\n\n/* ----- Surfaces --------------------------------------------------------- */\n/* `position: relative` so the absolute ::after glint positions against the\n   card itself, not some distant ancestor. Card alphas carry a *slight*\n   teal tint (a few r/g/b points) so the frost reads as cool ocean haze\n   rather than neutral white — the user specifically called out\n   blue/green/teal palette, no purple. */\n.glass {\n  position: relative;\n  background: rgba(240, 252, 252, 0.55);\n  backdrop-filter: blur(30px) saturate(180%);\n  -webkit-backdrop-filter: blur(30px) saturate(180%);\n  border: 1px solid rgba(0, 200, 200, 0.18);\n  border-radius: 0.875rem;\n  box-shadow: 0 8px 32px rgba(0, 100, 100, 0.18);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass {\n  background: rgba(0, 180, 180, 0.06);\n  border-color: rgba(0, 220, 220, 0.14);\n  box-shadow: 0 8px 32px rgba(0, 60, 70, 0.45);\n}\n\n.glass-elevated {\n  position: relative;\n  background: rgba(245, 254, 254, 0.72);\n  backdrop-filter: blur(30px) saturate(180%);\n  -webkit-backdrop-filter: blur(30px) saturate(180%);\n  border: 1px solid rgba(0, 200, 200, 0.22);\n  border-radius: 0.875rem;\n  box-shadow: 0 16px 48px rgba(0, 100, 100, 0.22);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass-elevated {\n  background: rgba(0, 200, 200, 0.10);\n  border-color: rgba(0, 220, 220, 0.18);\n  box-shadow: 0 16px 48px rgba(0, 50, 60, 0.55);\n}\n\n/* Light glint — top-left highlight that traces the card outline. The\n   linear gradient picks up just a hint of cyan in light mode so it reads\n   as light catching the surface rather than a pure white smear. */\n.glass::after,\n.glass-elevated::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(135deg, rgba(220, 250, 250, 0.28) 0%, transparent 55%);\n  pointer-events: none;\n}\nhtml.dark .glass::after,\nhtml.dark .glass-elevated::after {\n  background: linear-gradient(135deg, rgba(150, 230, 230, 0.10) 0%, transparent 55%);\n}\n\n/* Hover — slightly more opaque + deeper drop shadow, like real glass\n   brightening when you look at it straight on. */\n.glass:hover {\n  background: rgba(245, 254, 254, 0.65);\n  box-shadow: 0 12px 40px rgba(0, 100, 100, 0.24);\n}\nhtml.dark .glass:hover {\n  background: rgba(0, 200, 200, 0.10);\n  box-shadow: 0 12px 40px rgba(0, 60, 70, 0.55);\n}\n.glass-elevated:hover {\n  background: rgba(248, 254, 254, 0.82);\n  box-shadow: 0 20px 56px rgba(0, 100, 100, 0.28);\n}\nhtml.dark .glass-elevated:hover {\n  background: rgba(0, 210, 210, 0.14);\n  box-shadow: 0 20px 56px rgba(0, 60, 70, 0.6);\n}\n\n/* Top bar / nav — same heavy frost so the header reads as a floating\n   pane rather than a hard horizon line. Slight teal cast in dark mode\n   for the underwater feel. */\n.glass-bar {\n  background: rgba(235, 250, 250, 0.6);\n  backdrop-filter: blur(30px) saturate(180%);\n  -webkit-backdrop-filter: blur(30px) saturate(180%);\n  border-bottom: 1px solid rgba(0, 200, 200, 0.15);\n}\nhtml.dark .glass-bar {\n  background: rgba(8, 28, 38, 0.65);\n  border-bottom-color: rgba(0, 220, 220, 0.12);\n}\n\n/* Pills / chips — lighter blur but same teal palette so they don't break\n   the look when stacked on a frosted card. */\n.chip {\n  background: rgba(220, 245, 245, 0.45);\n  border: 1px solid rgba(0, 200, 200, 0.18);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\nhtml.dark .chip {\n  background: rgba(0, 200, 200, 0.06);\n  border-color: rgba(0, 220, 220, 0.14);\n}\n\n.divider-soft {\n  border-color: rgba(0, 100, 100, 0.10);\n}\nhtml.dark .divider-soft {\n  border-color: rgba(0, 220, 220, 0.10);\n}\n\n/* Honour user motion preferences. The drifting page gradient is the\n   exact kind of background motion that triggers vestibular discomfort\n   for some users. */\n/* ----- Action buttons --------------------------------------------------- */\n/* Required by SCHEMA.md. Each theme owns its `.btn-*` palette so consumer\n * apps inherit theme-coherent button styling. Frosted Glass leans cyan on\n * a teal-frost canvas; primary uses a saturated cyan, secondary is a\n * frosted panel, warning + danger keep their universal amber/red so\n * destructive intent reads at a glance regardless of theme.\n *\n * Targets the same `.btn-*` selectors waki-shell's utilities.css declares.\n * Theme CSS loads AFTER utilities so equal-specificity rules win without\n * !important. The gradient background + crisp white text + soft glow\n * makes the buttons unmistakable on the frosted background, which fixed\n * the v0.4.0 production bug where Pause and Stop rendered with no\n * visible chrome on this theme. */\n.btn-primary {\n  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);\n  color: #ffffff;\n  border: 1px solid rgba(6, 182, 212, 0.45);\n  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);\n  color: #0a1628;\n  box-shadow: 0 4px 14px rgba(34, 211, 238, 0.35);\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 100%);\n}\n\n.btn-secondary {\n  background: rgba(220, 245, 245, 0.7);\n  color: #0b1f2a;\n  border: 1px solid rgba(0, 200, 200, 0.35);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  box-shadow: 0 2px 8px rgba(0, 100, 100, 0.1);\n}\n.btn-secondary:hover {\n  background: rgba(220, 245, 245, 0.85);\n  border-color: rgba(0, 200, 200, 0.5);\n}\nhtml.dark .btn-secondary {\n  background: rgba(0, 200, 200, 0.14);\n  color: #e6f4f1;\n  border-color: rgba(0, 220, 220, 0.3);\n}\nhtml.dark .btn-secondary:hover {\n  background: rgba(0, 200, 200, 0.22);\n  border-color: rgba(0, 220, 220, 0.45);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.5);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.5);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n/* Ghost button: text-only with subtle hover. Used for low-prominence\n * actions like Cancel in dialogs. */\n.btn-ghost {\n  background: transparent;\n  color: #0b1f2a;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(220, 245, 245, 0.5);\n  border-color: rgba(0, 200, 200, 0.2);\n}\nhtml.dark .btn-ghost {\n  color: #e6f4f1;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(0, 200, 200, 0.1);\n  border-color: rgba(0, 220, 220, 0.2);\n}\n\n\n/* ----- Status + success + input (SCHEMA.md recommended) ---------------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: rgba(220, 245, 245, 0.7);\n  color: #0b1f2a;\n  border: 1px solid rgba(0, 200, 200, 0.35);\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #06b6d4;\n  box-shadow: 0 0 0 3px #06b6d425;\n}\nhtml.dark .input {\n  background: rgba(0, 200, 200, 0.14);\n  color: #e6f4f1;\n  border-color: rgba(0, 220, 220, 0.3);\n}\nhtml.dark .input:focus {\n  border-color: #22d3ee;\n  box-shadow: 0 0 0 3px #22d3ee30;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  body {\n    animation: none !important;\n  }\n}\n",
      "family": "glass",
      "familyName": "Glass",
      "variantSlot": "frosted",
      "variantName": "Frosted"
    },
    "aurora-twilight": {
      "name": "Aurora Twilight",
      "description": "Violet, cyan, pink. Original Aurora.",
      "vibe": "aurora",
      "css": "/* ============================================================================\n * Theme: aurora-twilight (Aurora family, Twilight variant)\n * ----------------------------------------------------------------------------\n * Tinted glass over a violet-cyan-pink aurora blob background. Heavier\n * 20px blur than the Glass family so the colours behind dissolve into\n * a soft watercolour wash; cards carry a violet tint instead of pure\n * white. Each card has a gradient border drawn via ::before so the\n * outline reads as a thin ribbon of refracted light.\n *\n * Renamed from glass-v3.css in v0.4.0. Consumers that hard-coded\n * `glass-v3` should remap to `aurora-twilight` or `glass-plus`.\n * ============================================================================ */\n\n/* ----- Page background: aurora blobs over a soft gradient -------------- */\nbody {\n  background:\n    radial-gradient(ellipse at 12% 18%, rgba(168, 85, 247, 0.18), transparent 50%),\n    radial-gradient(ellipse at 88% 78%, rgba(34, 211, 238, 0.18), transparent 50%),\n    radial-gradient(ellipse at 50% 110%, rgba(236, 72, 153, 0.12), transparent 55%),\n    linear-gradient(135deg, #f4ecff 0%, #ecf6ff 50%, #fff5fb 100%);\n  background-attachment: fixed;\n  color: #1e1b4b;\n}\nhtml.dark body {\n  background:\n    radial-gradient(ellipse at 12% 18%, rgba(139, 92, 246, 0.32), transparent 50%),\n    radial-gradient(ellipse at 88% 78%, rgba(14, 165, 233, 0.30), transparent 50%),\n    radial-gradient(ellipse at 50% 110%, rgba(236, 72, 153, 0.22), transparent 55%),\n    linear-gradient(135deg, #0a0517 0%, #0a1424 50%, #110820 100%);\n  background-attachment: fixed;\n  color: #ede9fe;\n}\n\n/* ----- Surfaces --------------------------------------------------------- */\n/* Position relative so the gradient-border ::before positions correctly.\n   The bg uses a violet tint instead of pure white; with 20px blur the\n   colours behind the card mix into the violet for an aurora-haze\n   look. */\n.glass {\n  position: relative;\n  background: rgba(168, 85, 247, 0.08) !important;\n  backdrop-filter: blur(20px) saturate(200%);\n  -webkit-backdrop-filter: blur(20px) saturate(200%);\n  border: 1px solid transparent;\n  border-radius: 1rem;\n  box-shadow: 0 8px 32px rgba(76, 29, 149, 0.15);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass {\n  background: rgba(168, 85, 247, 0.07) !important;\n  border-color: transparent;\n  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);\n}\n\n.glass-elevated {\n  position: relative;\n  background: rgba(255, 255, 255, 0.65) !important;\n  backdrop-filter: blur(24px) saturate(220%);\n  -webkit-backdrop-filter: blur(24px) saturate(220%);\n  border: 1px solid transparent;\n  border-radius: 1rem;\n  box-shadow: 0 16px 48px rgba(76, 29, 149, 0.18);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass-elevated {\n  background: rgba(139, 92, 246, 0.12) !important;\n  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.6);\n}\n\n/* Gradient border via ::before. The mask-composite trick paints the\n   gradient only on the 1px frame; content area stays untouched. The\n   gradient cycles violet, cyan, pink so the border reads as\n   refracted aurora light. */\n.glass::before,\n.glass-elevated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1px;\n  background: linear-gradient(\n    135deg,\n    rgba(168, 85, 247, 0.6) 0%,\n    rgba(34, 211, 238, 0.5) 50%,\n    rgba(236, 72, 153, 0.6) 100%\n  );\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask-composite: exclude;\n  pointer-events: none;\n}\nhtml.dark .glass::before,\nhtml.dark .glass-elevated::before {\n  background: linear-gradient(\n    135deg,\n    rgba(167, 139, 250, 0.5) 0%,\n    rgba(34, 211, 238, 0.4) 50%,\n    rgba(244, 114, 182, 0.5) 100%\n  );\n}\n\n.glass:hover {\n  background: rgba(168, 85, 247, 0.12) !important;\n  box-shadow: 0 12px 40px rgba(76, 29, 149, 0.22);\n}\nhtml.dark .glass:hover {\n  background: rgba(168, 85, 247, 0.12) !important;\n  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);\n}\n.glass-elevated:hover {\n  box-shadow: 0 20px 56px rgba(76, 29, 149, 0.25);\n}\nhtml.dark .glass-elevated:hover {\n  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.65);\n}\n\n.glass-bar {\n  background: rgba(255, 255, 255, 0.55) !important;\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n}\nhtml.dark .glass-bar {\n  background: rgba(15, 12, 41, 0.6) !important;\n}\n\n.chip {\n  background: rgba(168, 85, 247, 0.08);\n  border: 1px solid rgba(168, 85, 247, 0.2);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\nhtml.dark .chip {\n  background: rgba(167, 139, 250, 0.08);\n  border-color: rgba(167, 139, 250, 0.2);\n}\n\n.divider-soft {\n  border-color: rgba(76, 29, 149, 0.12);\n}\nhtml.dark .divider-soft {\n  border-color: rgba(167, 139, 250, 0.15);\n}\n\n/* ----- Action buttons --------------------------------------------------- */\n/* Required by SCHEMA.md (v0.4.0). Theme CSS loads after waki-shell\n * utilities.css so equal-specificity rules win without !important. */\n.btn-primary {\n  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n  color: #ffffff;\n  border: 1px solid #7c3aed80;\n  box-shadow: 0 4px 14px #8b5cf650;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #7c3aed 0%, #7c3aed 100%);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);\n  color: #0a0e1a;\n  box-shadow: 0 4px 14px #a78bfa55;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #8b5cf6 0%, #8b5cf6 100%);\n}\n\n.btn-secondary {\n  background: rgba(168, 85, 247, 0.1);\n  color: #1e1b4b;\n  border: 1px solid rgba(168, 85, 247, 0.3);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  background: rgba(168, 85, 247, 0.1);\n  filter: brightness(1.05);\n  border-color: rgba(168, 85, 247, 0.3);\n}\nhtml.dark .btn-secondary {\n  background: rgba(167, 139, 250, 0.12);\n  color: #ede9fe;\n  border-color: rgba(167, 139, 250, 0.3);\n}\nhtml.dark .btn-secondary:hover {\n  background: rgba(167, 139, 250, 0.12);\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.5);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.5);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #1e1b4b;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(168, 85, 247, 0.08);\n  border-color: rgba(168, 85, 247, 0.2);\n}\nhtml.dark .btn-ghost {\n  color: #ede9fe;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(167, 139, 250, 0.12);\n  border-color: rgba(167, 139, 250, 0.24);\n}\n\n\n/* ----- Status + success + input (SCHEMA.md recommended) ---------------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: rgba(168, 85, 247, 0.1);\n  color: #1e1b4b;\n  border: 1px solid rgba(168, 85, 247, 0.3);\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #8b5cf6;\n  box-shadow: 0 0 0 3px #8b5cf625;\n}\nhtml.dark .input {\n  background: rgba(167, 139, 250, 0.12);\n  color: #ede9fe;\n  border-color: rgba(167, 139, 250, 0.3);\n}\nhtml.dark .input:focus {\n  border-color: #a78bfa;\n  box-shadow: 0 0 0 3px #a78bfa30;\n}\n\n",
      "family": "aurora",
      "familyName": "Aurora",
      "variantSlot": "twilight",
      "variantName": "Twilight"
    },
    "aurora-sunrise": {
      "name": "Aurora Sunrise",
      "description": "Gold, peach, pink",
      "vibe": "aurora",
      "css": "/* ============================================================================\n * Theme: aurora-sunrise (Aurora family, Sunrise variant)\n * ----------------------------------------------------------------------------\n * Tinted glass over a gold-peach-pink aurora blob background. Same Aurora\n * family structure as aurora-twilight (20px blur, gradient ribbon\n * border, radial-blob bg) with a sunrise colour story.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background:\n    radial-gradient(ellipse at 12% 18%, rgba(251, 191, 36, 0.22), transparent 50%),\n    radial-gradient(ellipse at 88% 78%, rgba(251, 146, 60, 0.20), transparent 50%),\n    radial-gradient(ellipse at 50% 110%, rgba(236, 72, 153, 0.16), transparent 55%),\n    linear-gradient(135deg, #fff7ed 0%, #fff1f2 50%, #fef3c7 100%);\n  background-attachment: fixed;\n  color: #451a03;\n}\nhtml.dark body {\n  background:\n    radial-gradient(ellipse at 12% 18%, rgba(251, 191, 36, 0.28), transparent 50%),\n    radial-gradient(ellipse at 88% 78%, rgba(251, 146, 60, 0.26), transparent 50%),\n    radial-gradient(ellipse at 50% 110%, rgba(236, 72, 153, 0.20), transparent 55%),\n    linear-gradient(135deg, #1a0d05 0%, #2a1410 50%, #1a0e0a 100%);\n  background-attachment: fixed;\n  color: #fed7aa;\n}\n\n.glass {\n  position: relative;\n  background: rgba(251, 191, 36, 0.08) !important;\n  backdrop-filter: blur(20px) saturate(200%);\n  -webkit-backdrop-filter: blur(20px) saturate(200%);\n  border: 1px solid transparent;\n  border-radius: 1rem;\n  box-shadow: 0 8px 32px rgba(120, 53, 15, 0.15);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass {\n  background: rgba(251, 191, 36, 0.08) !important;\n  border-color: transparent;\n  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);\n}\n\n.glass-elevated {\n  position: relative;\n  background: rgba(255, 255, 255, 0.65) !important;\n  backdrop-filter: blur(24px) saturate(220%);\n  -webkit-backdrop-filter: blur(24px) saturate(220%);\n  border: 1px solid transparent;\n  border-radius: 1rem;\n  box-shadow: 0 16px 48px rgba(120, 53, 15, 0.15);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass-elevated {\n  background: rgba(251, 146, 60, 0.12) !important;\n  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.6);\n}\n\n.glass::before,\n.glass-elevated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1px;\n  background: linear-gradient(\n    135deg,\n    rgba(251, 191, 36, 0.6) 0%,\n    rgba(251, 146, 60, 0.55) 50%,\n    rgba(236, 72, 153, 0.6) 100%\n  );\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask-composite: exclude;\n  pointer-events: none;\n}\nhtml.dark .glass::before,\nhtml.dark .glass-elevated::before {\n  background: linear-gradient(\n    135deg,\n    rgba(252, 211, 77, 0.5) 0%,\n    rgba(253, 186, 116, 0.45) 50%,\n    rgba(244, 114, 182, 0.5) 100%\n  );\n}\n\n.glass:hover {\n  background: rgba(251, 191, 36, 0.14) !important;\n  box-shadow: 0 12px 40px rgba(120, 53, 15, 0.22);\n}\nhtml.dark .glass:hover {\n  background: rgba(251, 191, 36, 0.14) !important;\n  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);\n}\n\n.glass-bar {\n  background: rgba(255, 255, 255, 0.55) !important;\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n}\nhtml.dark .glass-bar {\n  background: rgba(26, 13, 5, 0.7) !important;\n}\n\n.chip {\n  background: rgba(251, 146, 60, 0.1);\n  border: 1px solid rgba(251, 146, 60, 0.26);\n  color: #ea580c;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\nhtml.dark .chip {\n  background: rgba(251, 146, 60, 0.1);\n  border-color: rgba(251, 146, 60, 0.24);\n  color: #fb923c;\n}\n\n.divider-soft {\n  border-color: rgba(120, 53, 15, 0.12);\n}\nhtml.dark .divider-soft {\n  border-color: rgba(253, 186, 116, 0.15);\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #ea580c 0%, #ea580c 100%);\n  color: #ffffff;\n  border: 1px solid #ea580c;\n  box-shadow: 0 4px 14px #ea580c50;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #ea580c 0%, #ea580c 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #fb923c 0%, #fb923c 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #fb923c55;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #fb923c 0%, #fb923c 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: rgba(255, 255, 255, 0.65);\n  color: #451a03;\n  border: 1px solid rgba(251, 146, 60, 0.26);\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: rgba(251, 146, 60, 0.12);\n  color: #fed7aa;\n  border-color: rgba(251, 146, 60, 0.24);\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #451a03;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(251, 146, 60, 0.1);\n  border-color: rgba(251, 146, 60, 0.26);\n}\nhtml.dark .btn-ghost {\n  color: #fed7aa;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(251, 146, 60, 0.1);\n  border-color: rgba(251, 146, 60, 0.24);\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: rgba(255, 255, 255, 0.65);\n  color: #451a03;\n  border: 1px solid rgba(251, 146, 60, 0.26);\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #ea580c;\n  box-shadow: 0 0 0 3px #ea580c25;\n}\nhtml.dark .input {\n  background: rgba(251, 146, 60, 0.12);\n  color: #fed7aa;\n  border-color: rgba(251, 146, 60, 0.24);\n}\nhtml.dark .input:focus {\n  border-color: #fb923c;\n  box-shadow: 0 0 0 3px #fb923c30;\n}\n\n",
      "family": "aurora",
      "familyName": "Aurora",
      "variantSlot": "sunrise",
      "variantName": "Sunrise"
    },
    "aurora-ocean": {
      "name": "Aurora Ocean",
      "description": "Teal, sky, blue",
      "vibe": "aurora",
      "css": "/* ============================================================================\n * Theme: aurora-ocean (Aurora family, Ocean variant)\n * ----------------------------------------------------------------------------\n * Tinted glass over a teal-sky-blue aurora blob background. Same Aurora\n * family structure as aurora-twilight (20px blur, gradient ribbon\n * border, radial-blob bg) with a ocean colour story.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background:\n    radial-gradient(ellipse at 12% 18%, rgba(20, 184, 166, 0.18), transparent 50%),\n    radial-gradient(ellipse at 88% 78%, rgba(14, 165, 233, 0.18), transparent 50%),\n    radial-gradient(ellipse at 50% 110%, rgba(59, 130, 246, 0.14), transparent 55%),\n    linear-gradient(135deg, #f0fdfa 0%, #f0f9ff 50%, #eff6ff 100%);\n  background-attachment: fixed;\n  color: #082f49;\n}\nhtml.dark body {\n  background:\n    radial-gradient(ellipse at 12% 18%, rgba(20, 184, 166, 0.26), transparent 50%),\n    radial-gradient(ellipse at 88% 78%, rgba(14, 165, 233, 0.28), transparent 50%),\n    radial-gradient(ellipse at 50% 110%, rgba(59, 130, 246, 0.22), transparent 55%),\n    linear-gradient(135deg, #021818 0%, #061a30 50%, #07142a 100%);\n  background-attachment: fixed;\n  color: #e0f2fe;\n}\n\n.glass {\n  position: relative;\n  background: rgba(14, 165, 233, 0.08) !important;\n  backdrop-filter: blur(20px) saturate(200%);\n  -webkit-backdrop-filter: blur(20px) saturate(200%);\n  border: 1px solid transparent;\n  border-radius: 1rem;\n  box-shadow: 0 8px 32px rgba(7, 89, 133, 0.15);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass {\n  background: rgba(14, 165, 233, 0.08) !important;\n  border-color: transparent;\n  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);\n}\n\n.glass-elevated {\n  position: relative;\n  background: rgba(255, 255, 255, 0.65) !important;\n  backdrop-filter: blur(24px) saturate(220%);\n  -webkit-backdrop-filter: blur(24px) saturate(220%);\n  border: 1px solid transparent;\n  border-radius: 1rem;\n  box-shadow: 0 16px 48px rgba(7, 89, 133, 0.15);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass-elevated {\n  background: rgba(56, 189, 248, 0.12) !important;\n  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.6);\n}\n\n.glass::before,\n.glass-elevated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1px;\n  background: linear-gradient(\n    135deg,\n    rgba(20, 184, 166, 0.55) 0%,\n    rgba(14, 165, 233, 0.55) 50%,\n    rgba(59, 130, 246, 0.55) 100%\n  );\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask-composite: exclude;\n  pointer-events: none;\n}\nhtml.dark .glass::before,\nhtml.dark .glass-elevated::before {\n  background: linear-gradient(\n    135deg,\n    rgba(45, 212, 191, 0.45) 0%,\n    rgba(56, 189, 248, 0.45) 50%,\n    rgba(96, 165, 250, 0.45) 100%\n  );\n}\n\n.glass:hover {\n  background: rgba(14, 165, 233, 0.14) !important;\n  box-shadow: 0 12px 40px rgba(7, 89, 133, 0.22);\n}\nhtml.dark .glass:hover {\n  background: rgba(14, 165, 233, 0.14) !important;\n  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);\n}\n\n.glass-bar {\n  background: rgba(255, 255, 255, 0.6) !important;\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n}\nhtml.dark .glass-bar {\n  background: rgba(2, 24, 24, 0.7) !important;\n}\n\n.chip {\n  background: rgba(14, 165, 233, 0.1);\n  border: 1px solid rgba(14, 165, 233, 0.28);\n  color: #0284c7;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\nhtml.dark .chip {\n  background: rgba(56, 189, 248, 0.1);\n  border-color: rgba(56, 189, 248, 0.24);\n  color: #38bdf8;\n}\n\n.divider-soft {\n  border-color: rgba(7, 89, 133, 0.12);\n}\nhtml.dark .divider-soft {\n  border-color: rgba(56, 189, 248, 0.15);\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #0284c7 0%, #0284c7 100%);\n  color: #ffffff;\n  border: 1px solid #0284c7;\n  box-shadow: 0 4px 14px #0284c750;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #0284c7 0%, #0284c7 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #38bdf8 0%, #38bdf8 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #38bdf855;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #38bdf8 0%, #38bdf8 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: rgba(255, 255, 255, 0.65);\n  color: #082f49;\n  border: 1px solid rgba(14, 165, 233, 0.28);\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: rgba(56, 189, 248, 0.12);\n  color: #e0f2fe;\n  border-color: rgba(56, 189, 248, 0.24);\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #082f49;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(14, 165, 233, 0.1);\n  border-color: rgba(14, 165, 233, 0.28);\n}\nhtml.dark .btn-ghost {\n  color: #e0f2fe;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(56, 189, 248, 0.1);\n  border-color: rgba(56, 189, 248, 0.24);\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: rgba(255, 255, 255, 0.65);\n  color: #082f49;\n  border: 1px solid rgba(14, 165, 233, 0.28);\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #0284c7;\n  box-shadow: 0 0 0 3px #0284c725;\n}\nhtml.dark .input {\n  background: rgba(56, 189, 248, 0.12);\n  color: #e0f2fe;\n  border-color: rgba(56, 189, 248, 0.24);\n}\nhtml.dark .input:focus {\n  border-color: #38bdf8;\n  box-shadow: 0 0 0 3px #38bdf830;\n}\n\n",
      "family": "aurora",
      "familyName": "Aurora",
      "variantSlot": "ocean",
      "variantName": "Ocean"
    },
    "aurora-forest": {
      "name": "Aurora Forest",
      "description": "Emerald, lime, teal",
      "vibe": "aurora",
      "css": "/* ============================================================================\n * Theme: aurora-forest (Aurora family, Forest variant)\n * ----------------------------------------------------------------------------\n * Tinted glass over a emerald-lime-teal aurora blob background. Same Aurora\n * family structure as aurora-twilight (20px blur, gradient ribbon\n * border, radial-blob bg) with a forest colour story.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background:\n    radial-gradient(ellipse at 12% 18%, rgba(16, 185, 129, 0.18), transparent 50%),\n    radial-gradient(ellipse at 88% 78%, rgba(132, 204, 22, 0.18), transparent 50%),\n    radial-gradient(ellipse at 50% 110%, rgba(20, 184, 166, 0.14), transparent 55%),\n    linear-gradient(135deg, #ecfdf5 0%, #f7fee7 50%, #f0fdfa 100%);\n  background-attachment: fixed;\n  color: #064e3b;\n}\nhtml.dark body {\n  background:\n    radial-gradient(ellipse at 12% 18%, rgba(16, 185, 129, 0.26), transparent 50%),\n    radial-gradient(ellipse at 88% 78%, rgba(132, 204, 22, 0.22), transparent 50%),\n    radial-gradient(ellipse at 50% 110%, rgba(20, 184, 166, 0.22), transparent 55%),\n    linear-gradient(135deg, #02180e 0%, #0a1908 50%, #021818 100%);\n  background-attachment: fixed;\n  color: #d1fae5;\n}\n\n.glass {\n  position: relative;\n  background: rgba(16, 185, 129, 0.08) !important;\n  backdrop-filter: blur(20px) saturate(200%);\n  -webkit-backdrop-filter: blur(20px) saturate(200%);\n  border: 1px solid transparent;\n  border-radius: 1rem;\n  box-shadow: 0 8px 32px rgba(6, 78, 59, 0.15);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass {\n  background: rgba(16, 185, 129, 0.08) !important;\n  border-color: transparent;\n  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);\n}\n\n.glass-elevated {\n  position: relative;\n  background: rgba(255, 255, 255, 0.65) !important;\n  backdrop-filter: blur(24px) saturate(220%);\n  -webkit-backdrop-filter: blur(24px) saturate(220%);\n  border: 1px solid transparent;\n  border-radius: 1rem;\n  box-shadow: 0 16px 48px rgba(6, 78, 59, 0.15);\n  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n}\nhtml.dark .glass-elevated {\n  background: rgba(52, 211, 153, 0.12) !important;\n  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.6);\n}\n\n.glass::before,\n.glass-elevated::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1px;\n  background: linear-gradient(\n    135deg,\n    rgba(16, 185, 129, 0.55) 0%,\n    rgba(132, 204, 22, 0.5) 50%,\n    rgba(20, 184, 166, 0.55) 100%\n  );\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask-composite: exclude;\n  pointer-events: none;\n}\nhtml.dark .glass::before,\nhtml.dark .glass-elevated::before {\n  background: linear-gradient(\n    135deg,\n    rgba(52, 211, 153, 0.45) 0%,\n    rgba(163, 230, 53, 0.4) 50%,\n    rgba(45, 212, 191, 0.45) 100%\n  );\n}\n\n.glass:hover {\n  background: rgba(16, 185, 129, 0.14) !important;\n  box-shadow: 0 12px 40px rgba(6, 78, 59, 0.22);\n}\nhtml.dark .glass:hover {\n  background: rgba(16, 185, 129, 0.14) !important;\n  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);\n}\n\n.glass-bar {\n  background: rgba(255, 255, 255, 0.6) !important;\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n}\nhtml.dark .glass-bar {\n  background: rgba(2, 24, 14, 0.7) !important;\n}\n\n.chip {\n  background: rgba(16, 185, 129, 0.1);\n  border: 1px solid rgba(16, 185, 129, 0.28);\n  color: #059669;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\nhtml.dark .chip {\n  background: rgba(52, 211, 153, 0.1);\n  border-color: rgba(52, 211, 153, 0.24);\n  color: #34d399;\n}\n\n.divider-soft {\n  border-color: rgba(6, 78, 59, 0.12);\n}\nhtml.dark .divider-soft {\n  border-color: rgba(52, 211, 153, 0.15);\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #059669 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid #059669;\n  box-shadow: 0 4px 14px #05966950;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #059669 0%, #059669 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #34d399 0%, #34d399 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #34d39955;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #34d399 0%, #34d399 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: rgba(255, 255, 255, 0.65);\n  color: #064e3b;\n  border: 1px solid rgba(16, 185, 129, 0.28);\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: rgba(52, 211, 153, 0.12);\n  color: #d1fae5;\n  border-color: rgba(52, 211, 153, 0.24);\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #064e3b;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(16, 185, 129, 0.1);\n  border-color: rgba(16, 185, 129, 0.28);\n}\nhtml.dark .btn-ghost {\n  color: #d1fae5;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(52, 211, 153, 0.1);\n  border-color: rgba(52, 211, 153, 0.24);\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: rgba(255, 255, 255, 0.65);\n  color: #064e3b;\n  border: 1px solid rgba(16, 185, 129, 0.28);\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #059669;\n  box-shadow: 0 0 0 3px #05966925;\n}\nhtml.dark .input {\n  background: rgba(52, 211, 153, 0.12);\n  color: #d1fae5;\n  border-color: rgba(52, 211, 153, 0.24);\n}\nhtml.dark .input:focus {\n  border-color: #34d399;\n  box-shadow: 0 0 0 3px #34d39930;\n}\n\n",
      "family": "aurora",
      "familyName": "Aurora",
      "variantSlot": "forest",
      "variantName": "Forest"
    },
    "clean-light": {
      "name": "Clean Light",
      "description": "Pure white canvas, near-black ink",
      "vibe": "clean",
      "css": "/* ============================================================================\n * Theme: clean-light (Clean family, Light variant)\n * ----------------------------------------------------------------------------\n * Modern minimal. Whitespace-heavy, hairline borders, no blur, no\n * animation. Plays the panel-vs-canvas contrast for structure.\n * Linear / Notion / Vercel marketing-site aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #ffffff;\n  color: #0f172a;\n}\nhtml.dark body {\n  background: #0a0a0a;\n  color: #fafafa;\n}\n\n.glass,\n.glass-elevated {\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);\n  transition: box-shadow 150ms ease-out;\n}\nhtml.dark .glass,\nhtml.dark .glass-elevated {\n  background: #141414;\n  border-color: #262626;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.glass-elevated {\n  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);\n}\nhtml.dark .glass-elevated {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n.glass:hover,\n.glass-elevated:hover {\n  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);\n}\nhtml.dark .glass:hover,\nhtml.dark .glass-elevated:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);\n}\n\n.glass-bar {\n  background: #ffffff;\n  border-bottom: 1px solid #e5e7eb;\n}\nhtml.dark .glass-bar {\n  background: #0a0a0a;\n  border-bottom-color: #262626;\n}\n\n.chip {\n  background: #f9fafb;\n  border: 1px solid #e5e7eb;\n  color: #0f172a;\n  border-radius: 9999px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n}\nhtml.dark .chip {\n  background: #1c1c1c;\n  border-color: #262626;\n  color: #fafafa;\n}\n\n.divider-soft {\n  border-color: #e5e7eb;\n}\nhtml.dark .divider-soft {\n  border-color: #262626;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #0f172a 0%, #0f172a 100%);\n  color: #ffffff;\n  border: 1px solid #0f172a;\n  box-shadow: 0 4px 14px #0f172a50;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #0f172a 0%, #0f172a 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #fafafa 0%, #fafafa 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #fafafa55;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #fafafa 0%, #fafafa 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: #f9fafb;\n  color: #0f172a;\n  border: 1px solid #d1d5db;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: #1c1c1c;\n  color: #fafafa;\n  border-color: #404040;\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #0f172a;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: #f9fafb;\n  border-color: #e5e7eb;\n}\nhtml.dark .btn-ghost {\n  color: #fafafa;\n}\nhtml.dark .btn-ghost:hover {\n  background: #1c1c1c;\n  border-color: #262626;\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: #f9fafb;\n  color: #0f172a;\n  border: 1px solid #d1d5db;\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #0f172a;\n  box-shadow: 0 0 0 3px #0f172a25;\n}\nhtml.dark .input {\n  background: #1c1c1c;\n  color: #fafafa;\n  border-color: #404040;\n}\nhtml.dark .input:focus {\n  border-color: #fafafa;\n  box-shadow: 0 0 0 3px #fafafa30;\n}\n\n",
      "family": "clean",
      "familyName": "Clean",
      "variantSlot": "light",
      "variantName": "Light"
    },
    "clean-dim": {
      "name": "Clean Dim",
      "description": "Slate canvas with blue accent",
      "vibe": "clean",
      "css": "/* ============================================================================\n * Theme: clean-dim (Clean family, Dim variant)\n * ----------------------------------------------------------------------------\n * Modern minimal. Whitespace-heavy, hairline borders, no blur, no\n * animation. Plays the panel-vs-canvas contrast for structure.\n * Linear / Notion / Vercel marketing-site aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #f8fafc;\n  color: #1e293b;\n}\nhtml.dark body {\n  background: #0f172a;\n  color: #e2e8f0;\n}\n\n.glass,\n.glass-elevated {\n  background: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  box-shadow: 0 1px 2px rgba(30, 41, 59, 0.05);\n  transition: box-shadow 150ms ease-out;\n}\nhtml.dark .glass,\nhtml.dark .glass-elevated {\n  background: #1e293b;\n  border-color: #334155;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n.glass-elevated {\n  box-shadow: 0 4px 12px rgba(30, 41, 59, 0.05);\n}\nhtml.dark .glass-elevated {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n}\n.glass:hover,\n.glass-elevated:hover {\n  box-shadow: 0 4px 16px rgba(30, 41, 59, 0.1);\n}\nhtml.dark .glass:hover,\nhtml.dark .glass-elevated:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);\n}\n\n.glass-bar {\n  background: #f8fafc;\n  border-bottom: 1px solid #e2e8f0;\n}\nhtml.dark .glass-bar {\n  background: #0f172a;\n  border-bottom-color: #334155;\n}\n\n.chip {\n  background: #f1f5f9;\n  border: 1px solid #e2e8f0;\n  color: #3b82f6;\n  border-radius: 9999px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n}\nhtml.dark .chip {\n  background: #1e293b;\n  border-color: #334155;\n  color: #60a5fa;\n}\n\n.divider-soft {\n  border-color: #e2e8f0;\n}\nhtml.dark .divider-soft {\n  border-color: #334155;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #3b82f6 0%, #3b82f6 100%);\n  color: #ffffff;\n  border: 1px solid #3b82f6;\n  box-shadow: 0 4px 14px #3b82f650;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #3b82f6 0%, #3b82f6 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #60a5fa 0%, #60a5fa 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #60a5fa55;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #60a5fa 0%, #60a5fa 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: #f1f5f9;\n  color: #1e293b;\n  border: 1px solid #cbd5e1;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: #1e293b;\n  color: #e2e8f0;\n  border-color: #475569;\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #1e293b;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: #f1f5f9;\n  border-color: #e2e8f0;\n}\nhtml.dark .btn-ghost {\n  color: #e2e8f0;\n}\nhtml.dark .btn-ghost:hover {\n  background: #1e293b;\n  border-color: #334155;\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: #f1f5f9;\n  color: #1e293b;\n  border: 1px solid #cbd5e1;\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px #3b82f625;\n}\nhtml.dark .input {\n  background: #1e293b;\n  color: #e2e8f0;\n  border-color: #475569;\n}\nhtml.dark .input:focus {\n  border-color: #60a5fa;\n  box-shadow: 0 0 0 3px #60a5fa30;\n}\n\n",
      "family": "clean",
      "familyName": "Clean",
      "variantSlot": "dim",
      "variantName": "Dim"
    },
    "clean-warm": {
      "name": "Clean Warm",
      "description": "Stone canvas, amber accent",
      "vibe": "clean",
      "css": "/* ============================================================================\n * Theme: clean-warm (Clean family, Warm variant)\n * ----------------------------------------------------------------------------\n * Modern minimal. Whitespace-heavy, hairline borders, no blur, no\n * animation. Plays the panel-vs-canvas contrast for structure.\n * Linear / Notion / Vercel marketing-site aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #fafaf9;\n  color: #292524;\n}\nhtml.dark body {\n  background: #1c1917;\n  color: #e7e5e4;\n}\n\n.glass,\n.glass-elevated {\n  background: #ffffff;\n  border: 1px solid #e7e5e4;\n  border-radius: 8px;\n  box-shadow: 0 1px 2px rgba(41, 37, 36, 0.05);\n  transition: box-shadow 150ms ease-out;\n}\nhtml.dark .glass,\nhtml.dark .glass-elevated {\n  background: #292524;\n  border-color: #44403c;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n.glass-elevated {\n  box-shadow: 0 4px 12px rgba(41, 37, 36, 0.05);\n}\nhtml.dark .glass-elevated {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n}\n.glass:hover,\n.glass-elevated:hover {\n  box-shadow: 0 4px 16px rgba(41, 37, 36, 0.1);\n}\nhtml.dark .glass:hover,\nhtml.dark .glass-elevated:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);\n}\n\n.glass-bar {\n  background: #fafaf9;\n  border-bottom: 1px solid #e7e5e4;\n}\nhtml.dark .glass-bar {\n  background: #1c1917;\n  border-bottom-color: #44403c;\n}\n\n.chip {\n  background: #f5f5f4;\n  border: 1px solid #e7e5e4;\n  color: #b45309;\n  border-radius: 9999px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n}\nhtml.dark .chip {\n  background: #292524;\n  border-color: #44403c;\n  color: #fbbf24;\n}\n\n.divider-soft {\n  border-color: #e7e5e4;\n}\nhtml.dark .divider-soft {\n  border-color: #44403c;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #b45309 0%, #b45309 100%);\n  color: #ffffff;\n  border: 1px solid #b45309;\n  box-shadow: 0 4px 14px #b4530950;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #b45309 0%, #b45309 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #fbbf24 0%, #fbbf24 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #fbbf2455;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #fbbf24 0%, #fbbf24 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: #f5f5f4;\n  color: #292524;\n  border: 1px solid #d6d3d1;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: #292524;\n  color: #e7e5e4;\n  border-color: #57534e;\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #292524;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: #f5f5f4;\n  border-color: #e7e5e4;\n}\nhtml.dark .btn-ghost {\n  color: #e7e5e4;\n}\nhtml.dark .btn-ghost:hover {\n  background: #292524;\n  border-color: #44403c;\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: #f5f5f4;\n  color: #292524;\n  border: 1px solid #d6d3d1;\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #b45309;\n  box-shadow: 0 0 0 3px #b4530925;\n}\nhtml.dark .input {\n  background: #292524;\n  color: #e7e5e4;\n  border-color: #57534e;\n}\nhtml.dark .input:focus {\n  border-color: #fbbf24;\n  box-shadow: 0 0 0 3px #fbbf2430;\n}\n\n",
      "family": "clean",
      "familyName": "Clean",
      "variantSlot": "warm",
      "variantName": "Warm"
    },
    "clean-cool": {
      "name": "Clean Cool",
      "description": "Sky canvas, cyan accent",
      "vibe": "clean",
      "css": "/* ============================================================================\n * Theme: clean-cool (Clean family, Cool variant)\n * ----------------------------------------------------------------------------\n * Modern minimal. Whitespace-heavy, hairline borders, no blur, no\n * animation. Plays the panel-vs-canvas contrast for structure.\n * Linear / Notion / Vercel marketing-site aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #f0f9ff;\n  color: #0c4a6e;\n}\nhtml.dark body {\n  background: #0c1424;\n  color: #e0f2fe;\n}\n\n.glass,\n.glass-elevated {\n  background: #ffffff;\n  border: 1px solid #e0f2fe;\n  border-radius: 8px;\n  box-shadow: 0 1px 2px rgba(12, 74, 110, 0.06);\n  transition: box-shadow 150ms ease-out;\n}\nhtml.dark .glass,\nhtml.dark .glass-elevated {\n  background: #1e293b;\n  border-color: #1e3a5f;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n}\n.glass-elevated {\n  box-shadow: 0 4px 12px rgba(12, 74, 110, 0.06);\n}\nhtml.dark .glass-elevated {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n}\n.glass:hover,\n.glass-elevated:hover {\n  box-shadow: 0 4px 16px rgba(12, 74, 110, 0.12);\n}\nhtml.dark .glass:hover,\nhtml.dark .glass-elevated:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);\n}\n\n.glass-bar {\n  background: #f0f9ff;\n  border-bottom: 1px solid #e0f2fe;\n}\nhtml.dark .glass-bar {\n  background: #0c1424;\n  border-bottom-color: #1e3a5f;\n}\n\n.chip {\n  background: #f0f9ff;\n  border: 1px solid #e0f2fe;\n  color: #0891b2;\n  border-radius: 9999px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n}\nhtml.dark .chip {\n  background: #1a2940;\n  border-color: #1e3a5f;\n  color: #38bdf8;\n}\n\n.divider-soft {\n  border-color: #e0f2fe;\n}\nhtml.dark .divider-soft {\n  border-color: #1e3a5f;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #0891b2 0%, #0891b2 100%);\n  color: #ffffff;\n  border: 1px solid #0891b2;\n  box-shadow: 0 4px 14px #0891b250;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #0891b2 0%, #0891b2 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #38bdf8 0%, #38bdf8 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #38bdf855;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #38bdf8 0%, #38bdf8 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: #f0f9ff;\n  color: #0c4a6e;\n  border: 1px solid #bae6fd;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: #1a2940;\n  color: #e0f2fe;\n  border-color: #2c4d75;\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #0c4a6e;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: #f0f9ff;\n  border-color: #e0f2fe;\n}\nhtml.dark .btn-ghost {\n  color: #e0f2fe;\n}\nhtml.dark .btn-ghost:hover {\n  background: #1a2940;\n  border-color: #1e3a5f;\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: #f0f9ff;\n  color: #0c4a6e;\n  border: 1px solid #bae6fd;\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #0891b2;\n  box-shadow: 0 0 0 3px #0891b225;\n}\nhtml.dark .input {\n  background: #1a2940;\n  color: #e0f2fe;\n  border-color: #2c4d75;\n}\nhtml.dark .input:focus {\n  border-color: #38bdf8;\n  box-shadow: 0 0 0 3px #38bdf830;\n}\n\n",
      "family": "clean",
      "familyName": "Clean",
      "variantSlot": "cool",
      "variantName": "Cool"
    },
    "editorial-academic": {
      "name": "Editorial Academic",
      "description": "Stone-paper canvas, royal-blue ink",
      "vibe": "editorial",
      "css": "/* ============================================================================\n * Theme: editorial-academic (Editorial family, Academic variant)\n * ----------------------------------------------------------------------------\n * Refined publication feel. Hairline borders, paper-like surface,\n * generous line-height, letter-spacing on display text. Stripe /\n * Substack / Mirror aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #fafaf9;\n  color: #1c1917;\n  letter-spacing: -0.01em;\n}\nhtml.dark body {\n  background: #1c1917;\n  color: #fafaf9;\n}\n\n.glass,\n.glass-elevated {\n  background: #ffffff;\n  border: 1px solid #d6d3d1;\n  border-radius: 4px;\n  box-shadow: none;\n}\nhtml.dark .glass,\nhtml.dark .glass-elevated {\n  background: #292524;\n  border-color: #44403c;\n}\n.glass-elevated {\n  border-width: 1px;\n  box-shadow: 0 1px 0 #a8a29e;\n}\nhtml.dark .glass-elevated {\n  box-shadow: 0 1px 0 #57534e;\n}\n\n.glass-bar {\n  background: #fafaf9;\n  border-bottom: 1px solid #d6d3d1;\n}\nhtml.dark .glass-bar {\n  background: #1c1917;\n  border-bottom-color: #44403c;\n}\n\n.chip {\n  background: transparent;\n  border: 1px solid #d6d3d1;\n  color: #1d4ed8;\n  border-radius: 2px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 500;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\nhtml.dark .chip {\n  border-color: #44403c;\n  color: #93c5fd;\n}\n\n.divider-soft {\n  border-color: #d6d3d1;\n}\nhtml.dark .divider-soft {\n  border-color: #44403c;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #1d4ed8 0%, #1d4ed8 100%);\n  color: #ffffff;\n  border: 1px solid #1d4ed8;\n  box-shadow: 0 4px 14px #1d4ed850;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #1d4ed8 0%, #1d4ed8 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #93c5fd 0%, #93c5fd 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #93c5fd55;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #93c5fd 0%, #93c5fd 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: #ffffff;\n  color: #1c1917;\n  border: 1px solid #d6d3d1;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: #292524;\n  color: #fafaf9;\n  border-color: #44403c;\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #1c1917;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: #d6d3d1;\n}\nhtml.dark .btn-ghost {\n  color: #fafaf9;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(255, 255, 255, 0.04);\n  border-color: #44403c;\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: #ffffff;\n  color: #1c1917;\n  border: 1px solid #d6d3d1;\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #1d4ed8;\n  box-shadow: 0 0 0 3px #1d4ed825;\n}\nhtml.dark .input {\n  background: #292524;\n  color: #fafaf9;\n  border-color: #44403c;\n}\nhtml.dark .input:focus {\n  border-color: #93c5fd;\n  box-shadow: 0 0 0 3px #93c5fd30;\n}\n\n",
      "family": "editorial",
      "familyName": "Editorial",
      "variantSlot": "academic",
      "variantName": "Academic"
    },
    "editorial-noir": {
      "name": "Editorial Noir",
      "description": "High-contrast black-on-stone with crimson accent",
      "vibe": "editorial",
      "css": "/* ============================================================================\n * Theme: editorial-noir (Editorial family, Noir variant)\n * ----------------------------------------------------------------------------\n * Refined publication feel. Hairline borders, paper-like surface,\n * generous line-height, letter-spacing on display text. Stripe /\n * Substack / Mirror aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #f5f5f4;\n  color: #0a0a0a;\n  letter-spacing: -0.01em;\n}\nhtml.dark body {\n  background: #000000;\n  color: #fafafa;\n}\n\n.glass,\n.glass-elevated {\n  background: #fafaf9;\n  border: 1px solid #262626;\n  border-radius: 4px;\n  box-shadow: none;\n}\nhtml.dark .glass,\nhtml.dark .glass-elevated {\n  background: #0a0a0a;\n  border-color: #262626;\n}\n.glass-elevated {\n  border-width: 1px;\n  box-shadow: 0 1px 0 #404040;\n}\nhtml.dark .glass-elevated {\n  box-shadow: 0 1px 0 #404040;\n}\n\n.glass-bar {\n  background: #f5f5f4;\n  border-bottom: 1px solid #262626;\n}\nhtml.dark .glass-bar {\n  background: #000000;\n  border-bottom-color: #262626;\n}\n\n.chip {\n  background: transparent;\n  border: 1px solid #262626;\n  color: #dc2626;\n  border-radius: 2px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 500;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\nhtml.dark .chip {\n  border-color: #262626;\n  color: #fca5a5;\n}\n\n.divider-soft {\n  border-color: #262626;\n}\nhtml.dark .divider-soft {\n  border-color: #262626;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #dc2626 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid #dc2626;\n  box-shadow: 0 4px 14px #dc262650;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #dc2626 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #fca5a5 0%, #fca5a5 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #fca5a555;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #fca5a5 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: #ffffff;\n  color: #0a0a0a;\n  border: 1px solid #262626;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: #0a0a0a;\n  color: #fafafa;\n  border-color: #262626;\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #0a0a0a;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: #262626;\n}\nhtml.dark .btn-ghost {\n  color: #fafafa;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(255, 255, 255, 0.04);\n  border-color: #262626;\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: #ffffff;\n  color: #0a0a0a;\n  border: 1px solid #262626;\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #dc2626;\n  box-shadow: 0 0 0 3px #dc262625;\n}\nhtml.dark .input {\n  background: #0a0a0a;\n  color: #fafafa;\n  border-color: #262626;\n}\nhtml.dark .input:focus {\n  border-color: #fca5a5;\n  box-shadow: 0 0 0 3px #fca5a530;\n}\n\n",
      "family": "editorial",
      "familyName": "Editorial",
      "variantSlot": "noir",
      "variantName": "Noir"
    },
    "editorial-warm": {
      "name": "Editorial Warm",
      "description": "Cream paper, sienna ink",
      "vibe": "editorial",
      "css": "/* ============================================================================\n * Theme: editorial-warm (Editorial family, Warm variant)\n * ----------------------------------------------------------------------------\n * Refined publication feel. Hairline borders, paper-like surface,\n * generous line-height, letter-spacing on display text. Stripe /\n * Substack / Mirror aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #fff7ed;\n  color: #451a03;\n  letter-spacing: -0.01em;\n}\nhtml.dark body {\n  background: #1c1410;\n  color: #fed7aa;\n}\n\n.glass,\n.glass-elevated {\n  background: #ffffff;\n  border: 1px solid #fed7aa;\n  border-radius: 4px;\n  box-shadow: none;\n}\nhtml.dark .glass,\nhtml.dark .glass-elevated {\n  background: #292017;\n  border-color: #57340d;\n}\n.glass-elevated {\n  border-width: 1px;\n  box-shadow: 0 1px 0 #fdba74;\n}\nhtml.dark .glass-elevated {\n  box-shadow: 0 1px 0 #7c4a13;\n}\n\n.glass-bar {\n  background: #fff7ed;\n  border-bottom: 1px solid #fed7aa;\n}\nhtml.dark .glass-bar {\n  background: #1c1410;\n  border-bottom-color: #57340d;\n}\n\n.chip {\n  background: transparent;\n  border: 1px solid #fed7aa;\n  color: #b45309;\n  border-radius: 2px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 500;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\nhtml.dark .chip {\n  border-color: #57340d;\n  color: #fdba74;\n}\n\n.divider-soft {\n  border-color: #fed7aa;\n}\nhtml.dark .divider-soft {\n  border-color: #57340d;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #b45309 0%, #b45309 100%);\n  color: #ffffff;\n  border: 1px solid #b45309;\n  box-shadow: 0 4px 14px #b4530950;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #b45309 0%, #b45309 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #fdba74 0%, #fdba74 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #fdba7455;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #fdba74 0%, #fdba74 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: #ffffff;\n  color: #451a03;\n  border: 1px solid #fed7aa;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: #292017;\n  color: #fed7aa;\n  border-color: #57340d;\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #451a03;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: #fed7aa;\n}\nhtml.dark .btn-ghost {\n  color: #fed7aa;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(255, 255, 255, 0.04);\n  border-color: #57340d;\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: #ffffff;\n  color: #451a03;\n  border: 1px solid #fed7aa;\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #b45309;\n  box-shadow: 0 0 0 3px #b4530925;\n}\nhtml.dark .input {\n  background: #292017;\n  color: #fed7aa;\n  border-color: #57340d;\n}\nhtml.dark .input:focus {\n  border-color: #fdba74;\n  box-shadow: 0 0 0 3px #fdba7430;\n}\n\n",
      "family": "editorial",
      "familyName": "Editorial",
      "variantSlot": "warm",
      "variantName": "Warm"
    },
    "editorial-technical": {
      "name": "Editorial Technical",
      "description": "Slate canvas with engineering-doc restraint",
      "vibe": "editorial",
      "css": "/* ============================================================================\n * Theme: editorial-technical (Editorial family, Technical variant)\n * ----------------------------------------------------------------------------\n * Refined publication feel. Hairline borders, paper-like surface,\n * generous line-height, letter-spacing on display text. Stripe /\n * Substack / Mirror aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #f8fafc;\n  color: #0f172a;\n  letter-spacing: -0.01em;\n}\nhtml.dark body {\n  background: #020617;\n  color: #cbd5e1;\n}\n\n.glass,\n.glass-elevated {\n  background: #ffffff;\n  border: 1px solid #cbd5e1;\n  border-radius: 4px;\n  box-shadow: none;\n}\nhtml.dark .glass,\nhtml.dark .glass-elevated {\n  background: #0f172a;\n  border-color: #1e293b;\n}\n.glass-elevated {\n  border-width: 1px;\n  box-shadow: 0 1px 0 #94a3b8;\n}\nhtml.dark .glass-elevated {\n  box-shadow: 0 1px 0 #334155;\n}\n\n.glass-bar {\n  background: #f8fafc;\n  border-bottom: 1px solid #cbd5e1;\n}\nhtml.dark .glass-bar {\n  background: #020617;\n  border-bottom-color: #1e293b;\n}\n\n.chip {\n  background: transparent;\n  border: 1px solid #cbd5e1;\n  color: #475569;\n  border-radius: 2px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.7rem;\n  font-weight: 500;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n}\nhtml.dark .chip {\n  border-color: #1e293b;\n  color: #94a3b8;\n}\n\n.divider-soft {\n  border-color: #cbd5e1;\n}\nhtml.dark .divider-soft {\n  border-color: #1e293b;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n.btn-primary {\n  background: linear-gradient(135deg, #475569 0%, #475569 100%);\n  color: #ffffff;\n  border: 1px solid #475569;\n  box-shadow: 0 4px 14px #47556950;\n}\n.btn-primary:hover {\n  background: linear-gradient(135deg, #475569 0%, #475569 100%);\n  filter: brightness(1.05);\n}\nhtml.dark .btn-primary {\n  background: linear-gradient(135deg, #94a3b8 0%, #94a3b8 100%);\n  color: #0a0a0a;\n  box-shadow: 0 4px 14px #94a3b855;\n}\nhtml.dark .btn-primary:hover {\n  background: linear-gradient(135deg, #94a3b8 0%, #94a3b8 100%);\n  filter: brightness(1.1);\n}\n\n.btn-secondary {\n  background: #ffffff;\n  color: #0f172a;\n  border: 1px solid #cbd5e1;\n  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);\n}\n.btn-secondary:hover {\n  filter: brightness(0.97);\n}\nhtml.dark .btn-secondary {\n  background: #0f172a;\n  color: #cbd5e1;\n  border-color: #1e293b;\n}\nhtml.dark .btn-secondary:hover {\n  filter: brightness(1.15);\n}\n\n.btn-warning {\n  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  color: #ffffff;\n  border: 1px solid rgba(217, 119, 6, 0.55);\n  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);\n}\n.btn-warning:hover {\n  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n}\nhtml.dark .btn-warning {\n  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n  color: #1a0f00;\n  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);\n}\nhtml.dark .btn-warning:hover {\n  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);\n}\n\n.btn-danger {\n  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  color: #ffffff;\n  border: 1px solid rgba(220, 38, 38, 0.55);\n  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);\n}\n.btn-danger:hover {\n  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\nhtml.dark .btn-danger {\n  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);\n  color: #1a0000;\n  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);\n}\nhtml.dark .btn-danger:hover {\n  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #0f172a;\n  border: 1px solid transparent;\n}\n.btn-ghost:hover {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: #cbd5e1;\n}\nhtml.dark .btn-ghost {\n  color: #cbd5e1;\n}\nhtml.dark .btn-ghost:hover {\n  background: rgba(255, 255, 255, 0.04);\n  border-color: #1e293b;\n}\n\n/* ----- Status + success button + input (SCHEMA.md recommended) --------- */\n.btn-success {\n  background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  color: #ffffff;\n  border: 1px solid rgba(5, 150, 105, 0.55);\n  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);\n}\n.btn-success:hover {\n  background: linear-gradient(135deg, #059669 0%, #047857 100%);\n}\nhtml.dark .btn-success {\n  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n  color: #022c22;\n  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.35);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.12);\n  color: #047857;\n  border: 1px solid rgba(16, 185, 129, 0.32);\n}\nhtml.dark .status-success {\n  background: rgba(52, 211, 153, 0.16);\n  color: #6ee7b7;\n  border-color: rgba(52, 211, 153, 0.36);\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.12);\n  color: #b45309;\n  border: 1px solid rgba(245, 158, 11, 0.32);\n}\nhtml.dark .status-warning {\n  background: rgba(251, 191, 36, 0.16);\n  color: #fcd34d;\n  border-color: rgba(251, 191, 36, 0.36);\n}\n\n.status-error {\n  background: rgba(239, 68, 68, 0.12);\n  color: #b91c1c;\n  border: 1px solid rgba(239, 68, 68, 0.32);\n}\nhtml.dark .status-error {\n  background: rgba(248, 113, 113, 0.16);\n  color: #fca5a5;\n  border-color: rgba(248, 113, 113, 0.36);\n}\n\n.status-info {\n  background: rgba(59, 130, 246, 0.12);\n  color: #1d4ed8;\n  border: 1px solid rgba(59, 130, 246, 0.32);\n}\nhtml.dark .status-info {\n  background: rgba(96, 165, 250, 0.16);\n  color: #93c5fd;\n  border-color: rgba(96, 165, 250, 0.36);\n}\n\n.input {\n  background: #ffffff;\n  color: #0f172a;\n  border: 1px solid #cbd5e1;\n  border-radius: 8px;\n  padding: 0.5rem 0.75rem;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #475569;\n  box-shadow: 0 0 0 3px #47556925;\n}\nhtml.dark .input {\n  background: #0f172a;\n  color: #cbd5e1;\n  border-color: #1e293b;\n}\nhtml.dark .input:focus {\n  border-color: #94a3b8;\n  box-shadow: 0 0 0 3px #94a3b830;\n}\n\n",
      "family": "editorial",
      "familyName": "Editorial",
      "variantSlot": "technical",
      "variantName": "Technical"
    },
    "neon-cyan": {
      "name": "Neon Cyan",
      "description": "Cyber-cyan accent on charcoal",
      "vibe": "neon",
      "css": "/* ============================================================================\n * Theme: neon-cyan (Neon family, Cyan variant)\n * ----------------------------------------------------------------------------\n * Dark base with a vibrant cyan accent. Sharp 6px corners,\n * glow shadows on accents, mono-feel chips. Light mode is a high-\n * contrast inverted variant; dark is the canonical view. Vercel /\n * Replicate dev-tool aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #0a0a0a;\n  color: #e5e5e5;\n}\nhtml.light body {\n  background: #fafafa;\n  color: #0a0a0a;\n}\n\n.glass,\n.glass-elevated {\n  background: #111111;\n  border: 1px solid #262626;\n  border-radius: 6px;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\nhtml.light .glass,\nhtml.light .glass-elevated {\n  background: #ffffff;\n  border-color: #e5e5e5;\n}\n.glass:hover {\n  border-color: #06b6d4;\n  box-shadow: 0 0 0 1px #06b6d4, 0 0 16px #06b6d430;\n}\nhtml.light .glass:hover {\n  border-color: #06b6d4;\n  box-shadow: 0 0 0 1px #06b6d4, 0 0 16px #06b6d440;\n}\n.glass-elevated {\n  border-color: #404040;\n}\nhtml.light .glass-elevated {\n  border-color: #d4d4d4;\n}\n\n.glass-bar {\n  background: #0a0a0a;\n  border-bottom: 1px solid #06b6d430;\n}\nhtml.light .glass-bar {\n  background: #fafafa;\n  border-bottom-color: #06b6d450;\n}\n\n.chip {\n  background: #06b6d415;\n  border: 1px solid #06b6d450;\n  color: #06b6d4;\n  border-radius: 4px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.65rem;\n  font-weight: 600;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .chip {\n  background: #06b6d410;\n  border-color: #06b6d440;\n}\n\n.divider-soft {\n  border-color: #262626;\n}\nhtml.light .divider-soft {\n  border-color: #e5e5e5;\n}\n\n/* secondary accent picks up where #06b6d4 leaves off, so two-tone\n   buttons and dual-state visuals can lean on a coherent pair */\n.studio-accent-fg.alt {\n  color: #a78bfa;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n/* Neon-family buttons: sharp 6px corners, accent fill on primary, dark\n * panel on secondary, universal amber/red on warning/danger so destructive\n * intent reads at a glance even on a saturated dark canvas. */\n.btn-primary {\n  background: #06b6d4;\n  color: #0a0a0a;\n  border: 1px solid #06b6d4;\n  border-radius: 6px;\n  box-shadow: 0 0 16px #06b6d450;\n  font-weight: 700;\n}\n.btn-primary:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px #06b6d480;\n}\n\n.btn-secondary {\n  background: #1c1c1c;\n  color: #e5e5e5;\n  border: 1px solid #404040;\n  border-radius: 6px;\n}\n.btn-secondary:hover {\n  border-color: #06b6d4;\n  color: #06b6d4;\n}\nhtml.light .btn-secondary {\n  background: #ffffff;\n  color: #0a0a0a;\n  border-color: #e5e5e5;\n}\nhtml.light .btn-secondary:hover {\n  border-color: #06b6d4;\n}\n\n.btn-warning {\n  background: #d97706;\n  color: #ffffff;\n  border: 1px solid #b45309;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(217, 119, 6, 0.45);\n  font-weight: 700;\n}\n.btn-warning:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(217, 119, 6, 0.7);\n}\n\n.btn-danger {\n  background: #dc2626;\n  color: #ffffff;\n  border: 1px solid #991b1b;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(220, 38, 38, 0.45);\n  font-weight: 700;\n}\n.btn-danger:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(220, 38, 38, 0.7);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #e5e5e5;\n  border: 1px solid transparent;\n  border-radius: 6px;\n}\n.btn-ghost:hover {\n  background: #06b6d415;\n  border-color: #06b6d450;\n  color: #06b6d4;\n}\nhtml.light .btn-ghost {\n  color: #0a0a0a;\n}\nhtml.light .btn-ghost:hover {\n  background: #06b6d410;\n}\n\n/* ----- Status + success + input (SCHEMA.md recommended) ---------------- */\n.btn-success {\n  background: #10b981;\n  color: #022c22;\n  border: 1px solid #10b981;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);\n  font-weight: 700;\n}\n.btn-success:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(16, 185, 129, 0.7);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.15);\n  color: #34d399;\n  border: 1px solid #10b98180;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-success {\n  background: rgba(16, 185, 129, 0.1);\n  color: #047857;\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.15);\n  color: #fbbf24;\n  border: 1px solid #f59e0b80;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-warning {\n  background: rgba(245, 158, 11, 0.1);\n  color: #b45309;\n}\n\n.status-error {\n  background: rgba(220, 38, 38, 0.15);\n  color: #f87171;\n  border: 1px solid #dc262680;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-error {\n  background: rgba(220, 38, 38, 0.1);\n  color: #b91c1c;\n}\n\n.status-info {\n  background: #06b6d415;\n  color: #06b6d4;\n  border: 1px solid #06b6d450;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-info {\n  background: #06b6d410;\n}\n\n.input {\n  background: #0a0a0a;\n  color: #e5e5e5;\n  border: 1px solid #404040;\n  border-radius: 6px;\n  padding: 0.5rem 0.75rem;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #06b6d4;\n  box-shadow: 0 0 0 1px #06b6d4, 0 0 12px #06b6d440;\n}\nhtml.light .input {\n  background: #ffffff;\n  color: #0a0a0a;\n  border-color: #d4d4d4;\n}\n",
      "family": "neon",
      "familyName": "Neon",
      "variantSlot": "cyan",
      "variantName": "Cyan"
    },
    "neon-pink": {
      "name": "Neon Pink",
      "description": "Hot-pink accent on charcoal",
      "vibe": "neon",
      "css": "/* ============================================================================\n * Theme: neon-pink (Neon family, Pink variant)\n * ----------------------------------------------------------------------------\n * Dark base with a vibrant pink accent. Sharp 6px corners,\n * glow shadows on accents, mono-feel chips. Light mode is a high-\n * contrast inverted variant; dark is the canonical view. Vercel /\n * Replicate dev-tool aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #0a0a0a;\n  color: #e5e5e5;\n}\nhtml.light body {\n  background: #fafafa;\n  color: #0a0a0a;\n}\n\n.glass,\n.glass-elevated {\n  background: #111111;\n  border: 1px solid #262626;\n  border-radius: 6px;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\nhtml.light .glass,\nhtml.light .glass-elevated {\n  background: #ffffff;\n  border-color: #e5e5e5;\n}\n.glass:hover {\n  border-color: #ec4899;\n  box-shadow: 0 0 0 1px #ec4899, 0 0 16px #ec489930;\n}\nhtml.light .glass:hover {\n  border-color: #ec4899;\n  box-shadow: 0 0 0 1px #ec4899, 0 0 16px #ec489940;\n}\n.glass-elevated {\n  border-color: #404040;\n}\nhtml.light .glass-elevated {\n  border-color: #d4d4d4;\n}\n\n.glass-bar {\n  background: #0a0a0a;\n  border-bottom: 1px solid #ec489930;\n}\nhtml.light .glass-bar {\n  background: #fafafa;\n  border-bottom-color: #ec489950;\n}\n\n.chip {\n  background: #ec489915;\n  border: 1px solid #ec489950;\n  color: #ec4899;\n  border-radius: 4px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.65rem;\n  font-weight: 600;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .chip {\n  background: #ec489910;\n  border-color: #ec489940;\n}\n\n.divider-soft {\n  border-color: #262626;\n}\nhtml.light .divider-soft {\n  border-color: #e5e5e5;\n}\n\n/* secondary accent picks up where #ec4899 leaves off, so two-tone\n   buttons and dual-state visuals can lean on a coherent pair */\n.studio-accent-fg.alt {\n  color: #06b6d4;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n/* Neon-family buttons: sharp 6px corners, accent fill on primary, dark\n * panel on secondary, universal amber/red on warning/danger so destructive\n * intent reads at a glance even on a saturated dark canvas. */\n.btn-primary {\n  background: #ec4899;\n  color: #0a0a0a;\n  border: 1px solid #ec4899;\n  border-radius: 6px;\n  box-shadow: 0 0 16px #ec489950;\n  font-weight: 700;\n}\n.btn-primary:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px #ec489980;\n}\n\n.btn-secondary {\n  background: #1c1c1c;\n  color: #e5e5e5;\n  border: 1px solid #404040;\n  border-radius: 6px;\n}\n.btn-secondary:hover {\n  border-color: #ec4899;\n  color: #ec4899;\n}\nhtml.light .btn-secondary {\n  background: #ffffff;\n  color: #0a0a0a;\n  border-color: #e5e5e5;\n}\nhtml.light .btn-secondary:hover {\n  border-color: #ec4899;\n}\n\n.btn-warning {\n  background: #d97706;\n  color: #ffffff;\n  border: 1px solid #b45309;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(217, 119, 6, 0.45);\n  font-weight: 700;\n}\n.btn-warning:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(217, 119, 6, 0.7);\n}\n\n.btn-danger {\n  background: #dc2626;\n  color: #ffffff;\n  border: 1px solid #991b1b;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(220, 38, 38, 0.45);\n  font-weight: 700;\n}\n.btn-danger:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(220, 38, 38, 0.7);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #e5e5e5;\n  border: 1px solid transparent;\n  border-radius: 6px;\n}\n.btn-ghost:hover {\n  background: #ec489915;\n  border-color: #ec489950;\n  color: #ec4899;\n}\nhtml.light .btn-ghost {\n  color: #0a0a0a;\n}\nhtml.light .btn-ghost:hover {\n  background: #ec489910;\n}\n\n/* ----- Status + success + input (SCHEMA.md recommended) ---------------- */\n.btn-success {\n  background: #10b981;\n  color: #022c22;\n  border: 1px solid #10b981;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);\n  font-weight: 700;\n}\n.btn-success:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(16, 185, 129, 0.7);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.15);\n  color: #34d399;\n  border: 1px solid #10b98180;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-success {\n  background: rgba(16, 185, 129, 0.1);\n  color: #047857;\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.15);\n  color: #fbbf24;\n  border: 1px solid #f59e0b80;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-warning {\n  background: rgba(245, 158, 11, 0.1);\n  color: #b45309;\n}\n\n.status-error {\n  background: rgba(220, 38, 38, 0.15);\n  color: #f87171;\n  border: 1px solid #dc262680;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-error {\n  background: rgba(220, 38, 38, 0.1);\n  color: #b91c1c;\n}\n\n.status-info {\n  background: #ec489915;\n  color: #ec4899;\n  border: 1px solid #ec489950;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-info {\n  background: #ec489910;\n}\n\n.input {\n  background: #0a0a0a;\n  color: #e5e5e5;\n  border: 1px solid #404040;\n  border-radius: 6px;\n  padding: 0.5rem 0.75rem;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #ec4899;\n  box-shadow: 0 0 0 1px #ec4899, 0 0 12px #ec489940;\n}\nhtml.light .input {\n  background: #ffffff;\n  color: #0a0a0a;\n  border-color: #d4d4d4;\n}\n",
      "family": "neon",
      "familyName": "Neon",
      "variantSlot": "pink",
      "variantName": "Pink"
    },
    "neon-lime": {
      "name": "Neon Lime",
      "description": "Lime-green accent on charcoal",
      "vibe": "neon",
      "css": "/* ============================================================================\n * Theme: neon-lime (Neon family, Lime variant)\n * ----------------------------------------------------------------------------\n * Dark base with a vibrant lime accent. Sharp 6px corners,\n * glow shadows on accents, mono-feel chips. Light mode is a high-\n * contrast inverted variant; dark is the canonical view. Vercel /\n * Replicate dev-tool aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #0a0a0a;\n  color: #e5e5e5;\n}\nhtml.light body {\n  background: #fafafa;\n  color: #0a0a0a;\n}\n\n.glass,\n.glass-elevated {\n  background: #111111;\n  border: 1px solid #262626;\n  border-radius: 6px;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\nhtml.light .glass,\nhtml.light .glass-elevated {\n  background: #ffffff;\n  border-color: #e5e5e5;\n}\n.glass:hover {\n  border-color: #84cc16;\n  box-shadow: 0 0 0 1px #84cc16, 0 0 16px #84cc1630;\n}\nhtml.light .glass:hover {\n  border-color: #84cc16;\n  box-shadow: 0 0 0 1px #84cc16, 0 0 16px #84cc1640;\n}\n.glass-elevated {\n  border-color: #404040;\n}\nhtml.light .glass-elevated {\n  border-color: #d4d4d4;\n}\n\n.glass-bar {\n  background: #0a0a0a;\n  border-bottom: 1px solid #84cc1630;\n}\nhtml.light .glass-bar {\n  background: #fafafa;\n  border-bottom-color: #84cc1650;\n}\n\n.chip {\n  background: #84cc1615;\n  border: 1px solid #84cc1650;\n  color: #84cc16;\n  border-radius: 4px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.65rem;\n  font-weight: 600;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .chip {\n  background: #84cc1610;\n  border-color: #84cc1640;\n}\n\n.divider-soft {\n  border-color: #262626;\n}\nhtml.light .divider-soft {\n  border-color: #e5e5e5;\n}\n\n/* secondary accent picks up where #84cc16 leaves off, so two-tone\n   buttons and dual-state visuals can lean on a coherent pair */\n.studio-accent-fg.alt {\n  color: #06b6d4;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n/* Neon-family buttons: sharp 6px corners, accent fill on primary, dark\n * panel on secondary, universal amber/red on warning/danger so destructive\n * intent reads at a glance even on a saturated dark canvas. */\n.btn-primary {\n  background: #84cc16;\n  color: #0a0a0a;\n  border: 1px solid #84cc16;\n  border-radius: 6px;\n  box-shadow: 0 0 16px #84cc1650;\n  font-weight: 700;\n}\n.btn-primary:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px #84cc1680;\n}\n\n.btn-secondary {\n  background: #1c1c1c;\n  color: #e5e5e5;\n  border: 1px solid #404040;\n  border-radius: 6px;\n}\n.btn-secondary:hover {\n  border-color: #84cc16;\n  color: #84cc16;\n}\nhtml.light .btn-secondary {\n  background: #ffffff;\n  color: #0a0a0a;\n  border-color: #e5e5e5;\n}\nhtml.light .btn-secondary:hover {\n  border-color: #84cc16;\n}\n\n.btn-warning {\n  background: #d97706;\n  color: #ffffff;\n  border: 1px solid #b45309;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(217, 119, 6, 0.45);\n  font-weight: 700;\n}\n.btn-warning:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(217, 119, 6, 0.7);\n}\n\n.btn-danger {\n  background: #dc2626;\n  color: #ffffff;\n  border: 1px solid #991b1b;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(220, 38, 38, 0.45);\n  font-weight: 700;\n}\n.btn-danger:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(220, 38, 38, 0.7);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #e5e5e5;\n  border: 1px solid transparent;\n  border-radius: 6px;\n}\n.btn-ghost:hover {\n  background: #84cc1615;\n  border-color: #84cc1650;\n  color: #84cc16;\n}\nhtml.light .btn-ghost {\n  color: #0a0a0a;\n}\nhtml.light .btn-ghost:hover {\n  background: #84cc1610;\n}\n\n/* ----- Status + success + input (SCHEMA.md recommended) ---------------- */\n.btn-success {\n  background: #10b981;\n  color: #022c22;\n  border: 1px solid #10b981;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);\n  font-weight: 700;\n}\n.btn-success:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(16, 185, 129, 0.7);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.15);\n  color: #34d399;\n  border: 1px solid #10b98180;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-success {\n  background: rgba(16, 185, 129, 0.1);\n  color: #047857;\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.15);\n  color: #fbbf24;\n  border: 1px solid #f59e0b80;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-warning {\n  background: rgba(245, 158, 11, 0.1);\n  color: #b45309;\n}\n\n.status-error {\n  background: rgba(220, 38, 38, 0.15);\n  color: #f87171;\n  border: 1px solid #dc262680;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-error {\n  background: rgba(220, 38, 38, 0.1);\n  color: #b91c1c;\n}\n\n.status-info {\n  background: #84cc1615;\n  color: #84cc16;\n  border: 1px solid #84cc1650;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-info {\n  background: #84cc1610;\n}\n\n.input {\n  background: #0a0a0a;\n  color: #e5e5e5;\n  border: 1px solid #404040;\n  border-radius: 6px;\n  padding: 0.5rem 0.75rem;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #84cc16;\n  box-shadow: 0 0 0 1px #84cc16, 0 0 12px #84cc1640;\n}\nhtml.light .input {\n  background: #ffffff;\n  color: #0a0a0a;\n  border-color: #d4d4d4;\n}\n",
      "family": "neon",
      "familyName": "Neon",
      "variantSlot": "lime",
      "variantName": "Lime"
    },
    "neon-plasma": {
      "name": "Neon Plasma",
      "description": "Plasma-orange + magenta two-tone",
      "vibe": "neon",
      "css": "/* ============================================================================\n * Theme: neon-plasma (Neon family, Plasma variant)\n * ----------------------------------------------------------------------------\n * Dark base with a vibrant plasma accent. Sharp 6px corners,\n * glow shadows on accents, mono-feel chips. Light mode is a high-\n * contrast inverted variant; dark is the canonical view. Vercel /\n * Replicate dev-tool aesthetic.\n * Generated by scripts/gen-themes.mjs.\n * ============================================================================ */\n\nbody {\n  background: #0a0a0a;\n  color: #e5e5e5;\n}\nhtml.light body {\n  background: #fafafa;\n  color: #0a0a0a;\n}\n\n.glass,\n.glass-elevated {\n  background: #111111;\n  border: 1px solid #262626;\n  border-radius: 6px;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\nhtml.light .glass,\nhtml.light .glass-elevated {\n  background: #ffffff;\n  border-color: #e5e5e5;\n}\n.glass:hover {\n  border-color: #f97316;\n  box-shadow: 0 0 0 1px #f97316, 0 0 16px #f9731630;\n}\nhtml.light .glass:hover {\n  border-color: #f97316;\n  box-shadow: 0 0 0 1px #f97316, 0 0 16px #f9731640;\n}\n.glass-elevated {\n  border-color: #404040;\n}\nhtml.light .glass-elevated {\n  border-color: #d4d4d4;\n}\n\n.glass-bar {\n  background: #0a0a0a;\n  border-bottom: 1px solid #f9731630;\n}\nhtml.light .glass-bar {\n  background: #fafafa;\n  border-bottom-color: #f9731650;\n}\n\n.chip {\n  background: #f9731615;\n  border: 1px solid #f9731650;\n  color: #f97316;\n  border-radius: 4px;\n  padding: 0.15rem 0.55rem;\n  font-size: 0.65rem;\n  font-weight: 600;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .chip {\n  background: #f9731610;\n  border-color: #f9731640;\n}\n\n.divider-soft {\n  border-color: #262626;\n}\nhtml.light .divider-soft {\n  border-color: #e5e5e5;\n}\n\n/* secondary accent picks up where #f97316 leaves off, so two-tone\n   buttons and dual-state visuals can lean on a coherent pair */\n.studio-accent-fg.alt {\n  color: #ec4899;\n}\n\n/* ----- Action buttons (SCHEMA.md required) ------------------------------ */\n/* Neon-family buttons: sharp 6px corners, accent fill on primary, dark\n * panel on secondary, universal amber/red on warning/danger so destructive\n * intent reads at a glance even on a saturated dark canvas. */\n.btn-primary {\n  background: #f97316;\n  color: #0a0a0a;\n  border: 1px solid #f97316;\n  border-radius: 6px;\n  box-shadow: 0 0 16px #f9731650;\n  font-weight: 700;\n}\n.btn-primary:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px #f9731680;\n}\n\n.btn-secondary {\n  background: #1c1c1c;\n  color: #e5e5e5;\n  border: 1px solid #404040;\n  border-radius: 6px;\n}\n.btn-secondary:hover {\n  border-color: #f97316;\n  color: #f97316;\n}\nhtml.light .btn-secondary {\n  background: #ffffff;\n  color: #0a0a0a;\n  border-color: #e5e5e5;\n}\nhtml.light .btn-secondary:hover {\n  border-color: #f97316;\n}\n\n.btn-warning {\n  background: #d97706;\n  color: #ffffff;\n  border: 1px solid #b45309;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(217, 119, 6, 0.45);\n  font-weight: 700;\n}\n.btn-warning:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(217, 119, 6, 0.7);\n}\n\n.btn-danger {\n  background: #dc2626;\n  color: #ffffff;\n  border: 1px solid #991b1b;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(220, 38, 38, 0.45);\n  font-weight: 700;\n}\n.btn-danger:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(220, 38, 38, 0.7);\n}\n\n.btn-ghost {\n  background: transparent;\n  color: #e5e5e5;\n  border: 1px solid transparent;\n  border-radius: 6px;\n}\n.btn-ghost:hover {\n  background: #f9731615;\n  border-color: #f9731650;\n  color: #f97316;\n}\nhtml.light .btn-ghost {\n  color: #0a0a0a;\n}\nhtml.light .btn-ghost:hover {\n  background: #f9731610;\n}\n\n/* ----- Status + success + input (SCHEMA.md recommended) ---------------- */\n.btn-success {\n  background: #10b981;\n  color: #022c22;\n  border: 1px solid #10b981;\n  border-radius: 6px;\n  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);\n  font-weight: 700;\n}\n.btn-success:hover {\n  filter: brightness(1.1);\n  box-shadow: 0 0 24px rgba(16, 185, 129, 0.7);\n}\n\n.status-success {\n  background: rgba(16, 185, 129, 0.15);\n  color: #34d399;\n  border: 1px solid #10b98180;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-success {\n  background: rgba(16, 185, 129, 0.1);\n  color: #047857;\n}\n\n.status-warning {\n  background: rgba(245, 158, 11, 0.15);\n  color: #fbbf24;\n  border: 1px solid #f59e0b80;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-warning {\n  background: rgba(245, 158, 11, 0.1);\n  color: #b45309;\n}\n\n.status-error {\n  background: rgba(220, 38, 38, 0.15);\n  color: #f87171;\n  border: 1px solid #dc262680;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-error {\n  background: rgba(220, 38, 38, 0.1);\n  color: #b91c1c;\n}\n\n.status-info {\n  background: #f9731615;\n  color: #f97316;\n  border: 1px solid #f9731650;\n  border-radius: 4px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  font-size: 0.65rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\nhtml.light .status-info {\n  background: #f9731610;\n}\n\n.input {\n  background: #0a0a0a;\n  color: #e5e5e5;\n  border: 1px solid #404040;\n  border-radius: 6px;\n  padding: 0.5rem 0.75rem;\n  font-family: ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace;\n  outline: none;\n  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;\n}\n.input:focus {\n  border-color: #f97316;\n  box-shadow: 0 0 0 1px #f97316, 0 0 12px #f9731640;\n}\nhtml.light .input {\n  background: #ffffff;\n  color: #0a0a0a;\n  border-color: #d4d4d4;\n}\n",
      "family": "neon",
      "familyName": "Neon",
      "variantSlot": "plasma",
      "variantName": "Plasma"
    }
  },
  "families": {
    "glass": {
      "name": "Glass",
      "description": "Layered translucent panels with backdrop blur. Apple iOS / Windows 11 glassmorphism.",
      "structure": {
        "radius": 14,
        "blur": 14,
        "shadow": "soft-glow",
        "surface": "translucent",
        "iconography": "regular",
        "density": "comfortable"
      },
      "variants": [
        {
          "slot": "default",
          "themeId": "glass-v2",
          "name": "Default",
          "description": "Frosted glass + drift, calm neutral baseline",
          "palette": {
            "light": {
              "bgFrom": "#e8eef5",
              "bgTo": "#eef2f8",
              "panel": "rgba(255, 255, 255, 0.6)",
              "border": "rgba(15, 23, 42, 0.08)",
              "text": "#0f172a",
              "accent": "#6366f1"
            },
            "dark": {
              "bgFrom": "#0c1220",
              "bgTo": "#0f1a2e",
              "panel": "rgba(255, 255, 255, 0.06)",
              "border": "rgba(255, 255, 255, 0.1)",
              "text": "#f1f5f9",
              "accent": "#6366f1"
            }
          }
        },
        {
          "slot": "plus",
          "themeId": "glass-plus",
          "name": "Plus",
          "description": "Richer accents and violet wash. Universal default.",
          "palette": {
            "light": {
              "bgFrom": "#eef0fb",
              "bgTo": "#f3eaf8",
              "panel": "rgba(243, 235, 255, 0.72)",
              "border": "rgba(168, 85, 247, 0.22)",
              "text": "#0f172a",
              "accent": "#a855f7"
            },
            "dark": {
              "bgFrom": "#100b24",
              "bgTo": "#1a1640",
              "panel": "rgba(168, 85, 247, 0.1)",
              "border": "rgba(168, 85, 247, 0.26)",
              "text": "#f1f5f9",
              "accent": "#a855f7"
            }
          }
        },
        {
          "slot": "lite",
          "themeId": "glass-v1",
          "name": "Lite",
          "description": "Softer, no glints, calmer alternative",
          "palette": {
            "light": {
              "bgFrom": "#e8eef5",
              "bgTo": "#eef2f8",
              "panel": "rgba(255, 255, 255, 0.55)",
              "border": "rgba(15, 23, 42, 0.06)",
              "text": "#0f172a",
              "accent": "#8b5cf6"
            },
            "dark": {
              "bgFrom": "#0c1220",
              "bgTo": "#0f1a2e",
              "panel": "rgba(255, 255, 255, 0.04)",
              "border": "rgba(255, 255, 255, 0.08)",
              "text": "#f1f5f9",
              "accent": "#8b5cf6"
            }
          }
        },
        {
          "slot": "frosted",
          "themeId": "frosted-glass",
          "name": "Frosted",
          "description": "High-contrast teal frost, heavier blur",
          "palette": {
            "light": {
              "bgFrom": "#cffafe",
              "bgTo": "#a5f3fc",
              "panel": "rgba(255, 255, 255, 0.55)",
              "border": "rgba(14, 165, 233, 0.2)",
              "text": "#0f172a",
              "accent": "#06b6d4"
            },
            "dark": {
              "bgFrom": "#082f49",
              "bgTo": "#0c4a6e",
              "panel": "rgba(14, 165, 233, 0.12)",
              "border": "rgba(14, 165, 233, 0.26)",
              "text": "#f1f5f9",
              "accent": "#06b6d4"
            }
          }
        }
      ]
    },
    "aurora": {
      "name": "Aurora",
      "description": "Vibrant gradient accents over radial-blob bg with gradient-ribbon borders. Stripe / Substack marketing-page energy.",
      "structure": {
        "radius": 16,
        "blur": 22,
        "shadow": "aurora-glow",
        "surface": "tinted-translucent",
        "iconography": "regular",
        "density": "comfortable"
      },
      "variants": [
        {
          "slot": "twilight",
          "themeId": "aurora-twilight",
          "name": "Twilight",
          "description": "Violet, cyan, pink. Original Aurora.",
          "palette": {
            "light": {
              "bgFrom": "#f4ecff",
              "bgTo": "#fff5fb",
              "panel": "rgba(168, 85, 247, 0.08)",
              "border": "rgba(168, 85, 247, 0.45)",
              "text": "#1e1b4b",
              "accent": "#8b5cf6"
            },
            "dark": {
              "bgFrom": "#0a0517",
              "bgTo": "#110820",
              "panel": "rgba(168, 85, 247, 0.07)",
              "border": "rgba(167, 139, 250, 0.4)",
              "text": "#ede9fe",
              "accent": "#a78bfa"
            }
          }
        },
        {
          "slot": "sunrise",
          "themeId": "aurora-sunrise",
          "name": "Sunrise",
          "description": "Gold, peach, pink",
          "palette": {
            "light": {
              "bgFrom": "#fff7ed",
              "bgTo": "#fef3c7",
              "panel": "rgba(251, 191, 36, 0.08)",
              "border": "rgba(251, 146, 60, 0.45)",
              "text": "#451a03",
              "accent": "#ea580c"
            },
            "dark": {
              "bgFrom": "#1a0d05",
              "bgTo": "#1a0e0a",
              "panel": "rgba(251, 191, 36, 0.08)",
              "border": "rgba(253, 186, 116, 0.4)",
              "text": "#fed7aa",
              "accent": "#fb923c"
            }
          }
        },
        {
          "slot": "ocean",
          "themeId": "aurora-ocean",
          "name": "Ocean",
          "description": "Teal, sky, blue",
          "palette": {
            "light": {
              "bgFrom": "#f0fdfa",
              "bgTo": "#eff6ff",
              "panel": "rgba(14, 165, 233, 0.08)",
              "border": "rgba(14, 165, 233, 0.45)",
              "text": "#082f49",
              "accent": "#0284c7"
            },
            "dark": {
              "bgFrom": "#021818",
              "bgTo": "#07142a",
              "panel": "rgba(14, 165, 233, 0.08)",
              "border": "rgba(56, 189, 248, 0.4)",
              "text": "#e0f2fe",
              "accent": "#38bdf8"
            }
          }
        },
        {
          "slot": "forest",
          "themeId": "aurora-forest",
          "name": "Forest",
          "description": "Emerald, lime, teal",
          "palette": {
            "light": {
              "bgFrom": "#ecfdf5",
              "bgTo": "#f0fdfa",
              "panel": "rgba(16, 185, 129, 0.08)",
              "border": "rgba(16, 185, 129, 0.45)",
              "text": "#064e3b",
              "accent": "#059669"
            },
            "dark": {
              "bgFrom": "#02180e",
              "bgTo": "#021818",
              "panel": "rgba(16, 185, 129, 0.08)",
              "border": "rgba(52, 211, 153, 0.4)",
              "text": "#d1fae5",
              "accent": "#34d399"
            }
          }
        }
      ]
    },
    "clean": {
      "name": "Clean",
      "description": "Modern minimal. Whitespace-heavy, hairline borders, no blur. Linear / Notion / Vercel restraint.",
      "structure": {
        "radius": 8,
        "blur": 0,
        "shadow": "subtle",
        "surface": "solid-white",
        "iconography": "regular",
        "density": "spacious"
      },
      "variants": [
        {
          "slot": "light",
          "themeId": "clean-light",
          "name": "Light",
          "description": "Pure white canvas, near-black ink",
          "palette": {
            "light": {
              "bgFrom": "#ffffff",
              "bgTo": "#ffffff",
              "panel": "#ffffff",
              "border": "#e5e7eb",
              "text": "#0f172a",
              "accent": "#0f172a"
            },
            "dark": {
              "bgFrom": "#0a0a0a",
              "bgTo": "#0a0a0a",
              "panel": "#141414",
              "border": "#262626",
              "text": "#fafafa",
              "accent": "#fafafa"
            }
          }
        },
        {
          "slot": "dim",
          "themeId": "clean-dim",
          "name": "Dim",
          "description": "Slate canvas with blue accent",
          "palette": {
            "light": {
              "bgFrom": "#f8fafc",
              "bgTo": "#f8fafc",
              "panel": "#ffffff",
              "border": "#e2e8f0",
              "text": "#1e293b",
              "accent": "#3b82f6"
            },
            "dark": {
              "bgFrom": "#0f172a",
              "bgTo": "#0f172a",
              "panel": "#1e293b",
              "border": "#334155",
              "text": "#e2e8f0",
              "accent": "#60a5fa"
            }
          }
        },
        {
          "slot": "warm",
          "themeId": "clean-warm",
          "name": "Warm",
          "description": "Stone canvas, amber accent",
          "palette": {
            "light": {
              "bgFrom": "#fafaf9",
              "bgTo": "#fafaf9",
              "panel": "#ffffff",
              "border": "#e7e5e4",
              "text": "#292524",
              "accent": "#b45309"
            },
            "dark": {
              "bgFrom": "#1c1917",
              "bgTo": "#1c1917",
              "panel": "#292524",
              "border": "#44403c",
              "text": "#e7e5e4",
              "accent": "#fbbf24"
            }
          }
        },
        {
          "slot": "cool",
          "themeId": "clean-cool",
          "name": "Cool",
          "description": "Sky canvas, cyan accent",
          "palette": {
            "light": {
              "bgFrom": "#f0f9ff",
              "bgTo": "#f0f9ff",
              "panel": "#ffffff",
              "border": "#e0f2fe",
              "text": "#0c4a6e",
              "accent": "#0891b2"
            },
            "dark": {
              "bgFrom": "#0c1424",
              "bgTo": "#0c1424",
              "panel": "#1e293b",
              "border": "#1e3a5f",
              "text": "#e0f2fe",
              "accent": "#38bdf8"
            }
          }
        }
      ]
    },
    "editorial": {
      "name": "Editorial",
      "description": "Refined typography, hairline borders, paper feel. Stripe / Substack / Mirror publication aesthetic.",
      "structure": {
        "radius": 4,
        "blur": 0,
        "shadow": "hairline",
        "surface": "paper",
        "iconography": "thin",
        "density": "comfortable"
      },
      "variants": [
        {
          "slot": "academic",
          "themeId": "editorial-academic",
          "name": "Academic",
          "description": "Stone-paper canvas, royal-blue ink",
          "palette": {
            "light": {
              "bgFrom": "#fafaf9",
              "bgTo": "#fafaf9",
              "panel": "#ffffff",
              "border": "#d6d3d1",
              "text": "#1c1917",
              "accent": "#1d4ed8"
            },
            "dark": {
              "bgFrom": "#1c1917",
              "bgTo": "#1c1917",
              "panel": "#292524",
              "border": "#44403c",
              "text": "#fafaf9",
              "accent": "#93c5fd"
            }
          }
        },
        {
          "slot": "noir",
          "themeId": "editorial-noir",
          "name": "Noir",
          "description": "High-contrast black-on-stone with crimson accent",
          "palette": {
            "light": {
              "bgFrom": "#f5f5f4",
              "bgTo": "#f5f5f4",
              "panel": "#fafaf9",
              "border": "#262626",
              "text": "#0a0a0a",
              "accent": "#dc2626"
            },
            "dark": {
              "bgFrom": "#000000",
              "bgTo": "#000000",
              "panel": "#0a0a0a",
              "border": "#262626",
              "text": "#fafafa",
              "accent": "#fca5a5"
            }
          }
        },
        {
          "slot": "warm",
          "themeId": "editorial-warm",
          "name": "Warm",
          "description": "Cream paper, sienna ink",
          "palette": {
            "light": {
              "bgFrom": "#fff7ed",
              "bgTo": "#fff7ed",
              "panel": "#ffffff",
              "border": "#fed7aa",
              "text": "#451a03",
              "accent": "#b45309"
            },
            "dark": {
              "bgFrom": "#1c1410",
              "bgTo": "#1c1410",
              "panel": "#292017",
              "border": "#57340d",
              "text": "#fed7aa",
              "accent": "#fdba74"
            }
          }
        },
        {
          "slot": "technical",
          "themeId": "editorial-technical",
          "name": "Technical",
          "description": "Slate canvas with engineering-doc restraint",
          "palette": {
            "light": {
              "bgFrom": "#f8fafc",
              "bgTo": "#f8fafc",
              "panel": "#ffffff",
              "border": "#cbd5e1",
              "text": "#0f172a",
              "accent": "#475569"
            },
            "dark": {
              "bgFrom": "#020617",
              "bgTo": "#020617",
              "panel": "#0f172a",
              "border": "#1e293b",
              "text": "#cbd5e1",
              "accent": "#94a3b8"
            }
          }
        }
      ]
    },
    "neon": {
      "name": "Neon",
      "description": "Dark canonical view with vibrant accent. Sharp corners, glow shadows. Vercel / Replicate dev-tool aesthetic.",
      "structure": {
        "radius": 6,
        "blur": 0,
        "shadow": "glow",
        "surface": "dark-solid",
        "iconography": "regular",
        "density": "compact"
      },
      "variants": [
        {
          "slot": "cyan",
          "themeId": "neon-cyan",
          "name": "Cyan",
          "description": "Cyber-cyan accent on charcoal",
          "palette": {
            "light": {
              "bgFrom": "#fafafa",
              "bgTo": "#fafafa",
              "panel": "#ffffff",
              "border": "#e5e5e5",
              "text": "#0a0a0a",
              "accent": "#06b6d4"
            },
            "dark": {
              "bgFrom": "#0a0a0a",
              "bgTo": "#0a0a0a",
              "panel": "#111111",
              "border": "#262626",
              "text": "#e5e5e5",
              "accent": "#06b6d4"
            }
          }
        },
        {
          "slot": "pink",
          "themeId": "neon-pink",
          "name": "Pink",
          "description": "Hot-pink accent on charcoal",
          "palette": {
            "light": {
              "bgFrom": "#fafafa",
              "bgTo": "#fafafa",
              "panel": "#ffffff",
              "border": "#e5e5e5",
              "text": "#0a0a0a",
              "accent": "#ec4899"
            },
            "dark": {
              "bgFrom": "#0a0a0a",
              "bgTo": "#0a0a0a",
              "panel": "#111111",
              "border": "#262626",
              "text": "#e5e5e5",
              "accent": "#ec4899"
            }
          }
        },
        {
          "slot": "lime",
          "themeId": "neon-lime",
          "name": "Lime",
          "description": "Lime-green accent on charcoal",
          "palette": {
            "light": {
              "bgFrom": "#fafafa",
              "bgTo": "#fafafa",
              "panel": "#ffffff",
              "border": "#e5e5e5",
              "text": "#0a0a0a",
              "accent": "#84cc16"
            },
            "dark": {
              "bgFrom": "#0a0a0a",
              "bgTo": "#0a0a0a",
              "panel": "#111111",
              "border": "#262626",
              "text": "#e5e5e5",
              "accent": "#84cc16"
            }
          }
        },
        {
          "slot": "plasma",
          "themeId": "neon-plasma",
          "name": "Plasma",
          "description": "Plasma-orange + magenta two-tone",
          "palette": {
            "light": {
              "bgFrom": "#fafafa",
              "bgTo": "#fafafa",
              "panel": "#ffffff",
              "border": "#e5e5e5",
              "text": "#0a0a0a",
              "accent": "#f97316"
            },
            "dark": {
              "bgFrom": "#0a0a0a",
              "bgTo": "#0a0a0a",
              "panel": "#111111",
              "border": "#262626",
              "text": "#e5e5e5",
              "accent": "#f97316"
            }
          }
        }
      ]
    }
  }
}