[data-theme="space_discovery"] {
    --theme-bg: #05070e;
    --theme-fg: #e8ecff;
    --theme-muted: #8892b0;
    --theme-primary: #0099cc;
    --theme-primary-soft: color-mix(in srgb, var(--theme-primary) 30%, transparent);
    --theme-accent: var(--theme-primary);
    --theme-accent-2: #4ec6f4;
    --theme-surface: rgba(121, 167, 255, 0.05);
    --theme-surface-strong: rgba(121, 167, 255, 0.12);
    --theme-border: rgba(121, 167, 255, 0.15);
    --theme-bg-texture:
        radial-gradient(circle at 12% 18%, rgba(121, 167, 255, 0.22), transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(198, 168, 255, 0.18), transparent 55%),
        radial-gradient(circle at 40% 95%, rgba(255, 255, 255, 0.05), transparent 40%);
    --theme-font-display: "Space Grotesk", "Figtree", sans-serif;
}
[data-theme="melancholic"] {
    --theme-bg: #11141c;
    --theme-fg: #e8e3dc;
    --theme-muted: #8a8578;
    --theme-accent: #c7a98b;
    --theme-accent-2: #7f6f8a;
    --theme-surface: rgba(199, 169, 139, 0.05);
    --theme-surface-strong: rgba(199, 169, 139, 0.12);
    --theme-border: rgba(199, 169, 139, 0.18);
    --theme-bg-texture:
        radial-gradient(circle at 20% 30%, rgba(199, 169, 139, 0.14), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(127, 111, 138, 0.14), transparent 55%);
    --theme-font-display: "Figtree", sans-serif;
}
[data-theme="euphoric"] {
    --theme-bg: #130a24;
    --theme-fg: #fff1fb;
    --theme-muted: #c3a5d6;
    --theme-accent: #ff74d6;
    --theme-accent-2: #ffe066;
    --theme-surface: rgba(255, 116, 214, 0.07);
    --theme-surface-strong: rgba(255, 116, 214, 0.18);
    --theme-border: rgba(255, 116, 214, 0.25);
    --theme-bg-texture:
        radial-gradient(circle at 15% 20%, rgba(255, 116, 214, 0.3), transparent 55%),
        radial-gradient(circle at 85% 75%, rgba(255, 224, 102, 0.2), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(130, 60, 220, 0.18), transparent 60%);
    --theme-font-display: "Space Grotesk", sans-serif;
}
[data-theme="dark_tension"] {
    --theme-bg: #06060a;
    --theme-fg: #eaeef0;
    --theme-muted: #5c6470;
    --theme-accent: #ff3b54;
    --theme-accent-2: #ff9b4a;
    --theme-surface: rgba(255, 59, 84, 0.05);
    --theme-surface-strong: rgba(255, 59, 84, 0.12);
    --theme-border: rgba(255, 59, 84, 0.2);
    --theme-bg-texture:
        radial-gradient(circle at 50% 110%, rgba(255, 59, 84, 0.18), transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    --theme-font-display: "Space Grotesk", sans-serif;
    --theme-radius: 3px;
}
[data-theme="organic"] {
    --theme-bg: #1a1a14;
    --theme-fg: #f0ead6;
    --theme-muted: #a89978;
    --theme-accent: #d1b24a;
    --theme-accent-2: #6b8e4e;
    --theme-surface: rgba(209, 178, 74, 0.05);
    --theme-surface-strong: rgba(209, 178, 74, 0.12);
    --theme-border: rgba(209, 178, 74, 0.18);
    --theme-bg-texture:
        radial-gradient(circle at 20% 80%, rgba(107, 142, 78, 0.18), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(209, 178, 74, 0.14), transparent 55%);
    --theme-font-display: "Figtree", sans-serif;
    --theme-radius: 9px;
}
[data-theme="electronic"] {
    --theme-bg: #070a14;
    --theme-fg: #d4f7ff;
    --theme-muted: #6d88a3;
    --theme-accent: #00e5ff;
    --theme-accent-2: #7effa1;
    --theme-surface: rgba(0, 229, 255, 0.05);
    --theme-surface-strong: rgba(0, 229, 255, 0.12);
    --theme-border: rgba(0, 229, 255, 0.18);
    --theme-bg-texture:
        linear-gradient(180deg, rgba(0, 229, 255, 0.08), transparent 40%),
        repeating-linear-gradient(0deg, transparent 0 20px, rgba(0, 229, 255, 0.03) 20px 21px);
    --theme-font-display: "JetBrains Mono", ui-monospace, monospace;
    --theme-radius: 3px;
}
[data-theme="cinematic"] {
    --theme-bg: #0b0e14;
    --theme-fg: #efe6d2;
    --theme-muted: #8d826a;
    --theme-accent: #c99a3e;
    --theme-accent-2: #6a95c9;
    --theme-surface: rgba(201, 154, 62, 0.05);
    --theme-surface-strong: rgba(201, 154, 62, 0.12);
    --theme-border: rgba(201, 154, 62, 0.18);
    --theme-bg-texture:
        radial-gradient(ellipse at top, rgba(201, 154, 62, 0.2), transparent 55%),
        radial-gradient(ellipse at bottom, rgba(106, 149, 201, 0.15), transparent 55%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 100%);
    --theme-font-display: "Space Grotesk", serif;
    --theme-radius: 5px;
}
[data-theme="playful"] {
    --theme-bg: #0e1024;
    --theme-fg: #fff8e7;
    --theme-muted: #a9aec8;
    --theme-accent: #ffd166;
    --theme-accent-2: #06d6a0;
    --theme-surface: rgba(255, 209, 102, 0.05);
    --theme-surface-strong: rgba(255, 209, 102, 0.12);
    --theme-border: rgba(255, 209, 102, 0.2);
    --theme-bg-texture:
        radial-gradient(circle at 15% 25%, rgba(255, 209, 102, 0.2), transparent 55%),
        radial-gradient(circle at 85% 75%, rgba(6, 214, 160, 0.2), transparent 55%),
        radial-gradient(circle at 50% 95%, rgba(239, 71, 111, 0.15), transparent 55%);
    --theme-font-display: "Space Grotesk", sans-serif;
    --theme-radius: 10px;
}
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container {
    width: 100% !important;
}
.container {
    width: 100%;
}
@media (min-width: 640px) {
    .\!container {
        max-width: 640px !important;
    }
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .\!container {
        max-width: 768px !important;
    }
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .\!container {
        max-width: 1024px !important;
    }
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .\!container {
        max-width: 1280px !important;
    }
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .\!container {
        max-width: 1536px !important;
    }
    .container {
        max-width: 1536px;
    }
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.collapse {
    visibility: collapse;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.end-0 {
    inset-inline-end: 0px;
}
.right-0 {
    right: 0px;
}
.start-0 {
    inset-inline-start: 0px;
}
.top-0 {
    top: 0px;
}
.z-0 {
    z-index: 0;
}
.z-10 {
    z-index: 10;
}
.z-\[12000\] {
    z-index: 12000;
}
.mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.-ml-px {
    margin-left: -1px;
}
.-mt-2 {
    margin-top: -0.5rem;
}
.-mt-px {
    margin-top: -1px;
}
.mb-12 {
    margin-bottom: 3rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-12 {
    margin-left: 3rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.ml-4 {
    margin-left: 1rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.ms-3 {
    margin-inline-start: 0.75rem;
}
.ms-4 {
    margin-inline-start: 1rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-8 {
    margin-top: 2rem;
}
.\!block {
    display: block !important;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.grid {
    display: grid;
}
.hidden {
    display: none;
}
.aspect-\[300\/90\] {
    aspect-ratio: 300/90;
}
.h-10 {
    height: 2.5rem;
}
.h-16 {
    height: 4rem;
}
.h-4 {
    height: 1rem;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-8 {
    height: 2rem;
}
.h-\[32\.5rem\] {
    height: 32.5rem;
}
.h-\[35\.5rem\] {
    height: 35.5rem;
}
.max-h-32 {
    max-height: 8rem;
}
.min-h-screen {
    min-height: 100vh;
}
.w-3\/4 {
    width: 75%;
}
.w-4 {
    width: 1rem;
}
.w-48 {
    width: 12rem;
}
.w-5 {
    width: 1.25rem;
}
.w-6 {
    width: 1.5rem;
}
.w-8 {
    width: 2rem;
}
.w-\[8rem\] {
    width: 8rem;
}
.w-auto {
    width: auto;
}
.w-full {
    width: 100%;
}
.min-w-0 {
    min-width: 0px;
}
.max-w-2xl {
    max-width: 42rem;
}
.max-w-3xl {
    max-width: 48rem;
}
.max-w-6xl {
    max-width: 72rem;
}
.max-w-full {
    max-width: 100%;
}
.max-w-lg {
    max-width: 32rem;
}
.max-w-xl {
    max-width: 36rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-none {
    flex: none;
}
.shrink {
    flex-shrink: 1;
}
.shrink-0 {
    flex-shrink: 0;
}
.flex-grow {
    flex-grow: 1;
}
.origin-top {
    transform-origin: top;
}
.origin-top-right {
    transform-origin: top right;
}
.translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4 {
    --tw-translate-y: 1rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
    cursor: default;
}
.cursor-pointer {
    cursor: pointer;
}
.resize {
    resize: both;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
    flex-direction: column;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-items-center {
    justify-items: center;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-6 {
    gap: 1.5rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.overflow-x-scroll {
    overflow-x: scroll;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.break-words {
    overflow-wrap: break-word;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-md {
    border-radius: 0.375rem;
}
.rounded-l-md {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}
.rounded-r-md {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}
.border {
    border-width: 1px;
}
.border-b-2 {
    border-bottom-width: 2px;
}
.border-l {
    border-left-width: 1px;
}
.border-l-2 {
    border-left-width: 2px;
}
.border-l-4 {
    border-left-width: 4px;
}
.border-r {
    border-right-width: 1px;
}
.border-t {
    border-top-width: 1px;
}
.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}
.border-indigo-400 {
    --tw-border-opacity: 1;
    border-color: rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.border-transparent {
    border-color: transparent;
}
.border-l-red-500 {
    --tw-border-opacity: 1;
    border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-200\/80 {
    background-color: rgb(229 231 235 / 0.8);
}
.bg-indigo-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/20 {
    background-color: rgb(239 68 68 / 0.2);
}
.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.fill-red-500 {
    fill: #ef4444;
}
.p-1 {
    padding: 0.25rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-4 {
    padding: 1rem;
}
.p-6 {
    padding: 1.5rem;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.pb-12 {
    padding-bottom: 3rem;
}
.pe-4 {
    padding-inline-end: 1rem;
}
.ps-3 {
    padding-inline-start: 0.75rem;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.pt-8 {
    padding-top: 2rem;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-start {
    text-align: start;
}
.font-mono {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-bold {
    font-weight: 700;
}
.font-medium {
    font-weight: 500;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.leading-5 {
    line-height: 1.25rem;
}
.leading-7 {
    line-height: 1.75rem;
}
.tracking-wider {
    letter-spacing: 0.05em;
}
.tracking-widest {
    letter-spacing: 0.1em;
}
.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-50 {
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
    --tw-text-opacity: 1;
    color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
    text-decoration-line: underline;
}
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
    opacity: 0;
}
.opacity-100 {
    opacity: 1;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-black {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}
.ring-gray-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}
.ring-gray-900\/5 {
    --tw-ring-color: rgb(17 24 39 / 0.05);
}
.ring-opacity-5 {
    --tw-ring-opacity: 0.05;
}
.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-150 {
    transition-duration: 150ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.duration-75 {
    transition-duration: 75ms;
}
.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* =================================================================
   Kadenz base — every page consumes these CSS custom properties,
   which are overridden by the active [data-theme] in themes/*.css.
   ================================================================= */
:root {
    --theme-bg: #0b0f18;
    --theme-fg: #f4f6ff;
    --theme-muted: #8892b0;
    --theme-primary: #0099cc;
    --theme-primary-soft: color-mix(in srgb, var(--theme-primary) 30%, transparent);
    --theme-accent: var(--theme-primary);
    --theme-accent-2: #4ec6f4;
    /* Wordmark wave (resources/views/components/kadenz-wordmark.blade.php waveGrad): #ffd700 → #ff8800 */
    --theme-secondary: #ff8800;
    --theme-secondary-soft: color-mix(in srgb, var(--theme-secondary) 34%, transparent);
    --theme-surface: rgba(255, 255, 255, 0.04);
    --theme-surface-strong: rgba(255, 255, 255, 0.08);
    /* Menus / native-style selects: readable over busy blueprint UI (not near-transparent like --theme-surface). */
    --theme-dropdown-fill: color-mix(in srgb, var(--theme-bg) 86%, var(--theme-fg) 9%);
    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    --theme-radius: 7px;
    --theme-font-display: "Space Grotesk", "Figtree", system-ui, sans-serif;
    --theme-font-body: "Figtree", system-ui, sans-serif;
    --theme-bg-texture: radial-gradient(circle at 10% 10%, rgba(109, 146, 255, 0.15), transparent 50%),
                        radial-gradient(circle at 90% 80%, rgba(199, 179, 255, 0.12), transparent 55%);
    --theme-transition: 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
}
.kadenz-body {
    background: var(--theme-bg);
    background-image: var(--theme-bg-texture);
    background-attachment: fixed;
    color: var(--theme-fg);
    font-family: var(--theme-font-body);
    transition: background var(--theme-transition), color var(--theme-transition);
    min-height: 100vh;
    width: 100%;
    margin: 0;
    overflow-x: hidden;
}
img,
svg,
video,
canvas {
    max-width: 100%;
}
/* Layout primitives ------------------------------------------------- */
.kadenz-container {
    max-width: 72rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem;
}
/* Below sticky nav (5000); above .kadenz-main so header toolbars & menus are not covered by page body. */
.kadenz-header {
    position: relative;
    z-index: 4000;
    border-bottom: 1px solid var(--theme-border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 16%, var(--theme-surface)), transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--theme-bg) 72%, transparent);
}
.kadenz-header-inner {
    max-width: 72rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
.kadenz-main {
    position: relative;
    z-index: 1;
    min-height: 60vh;
}
/* Modals: portaled to <body> via kadenz-modal.js, above nav (5000) and dropdowns (12000). */
.kadenz-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    overflow-y: auto;
    box-sizing: border-box;
}
.kadenz-modal.is-open {
    display: flex;
}
.kadenz-modal[hidden] {
    display: none !important;
}
body.kadenz-modal-open {
    overflow: hidden;
}
.kadenz-modal-backdrop {
    position: fixed;
    inset: 0;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.72);
    cursor: default;
}
.kadenz-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: auto;
    padding: 1.5rem;
    border-radius: var(--theme-radius);
    overflow: hidden;
    /* Opaque — do not use --theme-surface (translucent) on modals. */
    background: var(--theme-bg);
    background-color: var(--theme-bg);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 14%, var(--theme-border));
    color: var(--theme-fg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    transform: translateZ(0);
}
.kadenz-modal-panel::before,
.kadenz-modal-panel::after {
    content: none;
    display: none;
}
.kadenz-modal-panel .kadenz-panel-title {
    background: color-mix(in srgb, var(--theme-bg) 88%, var(--theme-accent) 6%);
    border-color: var(--theme-border);
    box-shadow: none;
}
.kadenz-modal-panel .kadenz-input:not(select),
.kadenz-modal-panel .kadenz-textarea,
.kadenz-modal-panel .kadenz-select {
    background: var(--theme-dropdown-fill);
    background-color: var(--theme-dropdown-fill);
}
.kadenz-modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.kadenz-modal-panel--sm { max-width: 24rem; }
.kadenz-modal-panel--md { max-width: 28rem; }
.kadenz-modal-panel--lg { max-width: 32rem; }
.kadenz-modal-panel--xl { max-width: 36rem; }
.kadenz-modal-panel--2xl { max-width: 42rem; }
.kadenz-page-title {
    font-family: var(--theme-font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--theme-fg);
}
.kadenz-page-sub {
    color: var(--theme-muted);
    margin-top: 0.25rem;
    font-size: 0.95rem;
}
.kadenz-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.kadenz-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.7rem;
    color: var(--theme-muted);
    margin-bottom: 0.5rem;
}
.kadenz-eyebrow.muted{
    font-size: 0.8em !important;
    margin-bottom: 1rem !important;
    opacity: 0.7 !important;
}
.kadenz-section-label {
    font-family: var(--theme-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--theme-fg);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.kadenz-section-head-inline {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 1rem;
}
.kadenz-muted { color: var(--theme-muted); }
.kadenz-muted-warning { color: #f6c177; }
.kadenz-link { color: var(--theme-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--theme-accent) 40%, transparent); }
.kadenz-link:hover { text-decoration-color: var(--theme-accent); }
.kadenz-link-danger { color: #ff7b80; }
/* Base flash (non-rich fallbacks) */
.kadenz-page-flash:empty {
    display: none;
}
.kadenz-page-flash {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.kadenz-flash {
    border-radius: var(--theme-radius);
    margin-bottom: 1.5rem;
    color: var(--theme-fg);
}
.kadenz-flash:not(.kadenz-flash--rich) {
    padding: 0.75rem 1rem;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
}
.kadenz-flash-below-head { margin-top: 0.25rem; }
.kadenz-flash--rich {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--theme-radius);
    font-size: 0.95rem;
    line-height: 1.45;
    box-shadow: var(--theme-shadow);
}
.kadenz-flash--rich .kadenz-flash-icon {
    flex-shrink: 0;
    margin-top: 0.08rem;
    opacity: 0.95;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kadenz-flash--rich .kadenz-flash-icon svg {
    display: block;
}
.kadenz-flash-body {
    min-width: 0;
    flex: 1;
}
.kadenz-flash-error-list {
    margin: 0;
    padding-left: 1.15rem;
}
.kadenz-flash--success {
    background: color-mix(in srgb, #166534 32%, var(--theme-surface));
    border-color: color-mix(in srgb, #22c55e 55%, transparent);
    color: #d1fae5;
}
.kadenz-flash--success .kadenz-flash-icon {
    color: #4ade80;
}
.kadenz-flash--error {
    background: color-mix(in srgb, #991b1b 32%, var(--theme-surface));
    border-color: color-mix(in srgb, #f87171 50%, transparent);
    color: #fecaca;
}
.kadenz-flash--error .kadenz-flash-icon {
    color: #fca5a5;
}
.kadenz-flash--info {
    background: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-surface));
    border-color: color-mix(in srgb, var(--theme-accent) 42%, transparent);
    color: var(--theme-fg);
}
.kadenz-flash--info .kadenz-flash-icon {
    color: var(--theme-accent);
}
.kadenz-flash--warn {
    background: color-mix(in srgb, #b45309 22%, var(--theme-surface));
    border-color: color-mix(in srgb, #fbbf24 45%, transparent);
    color: #fef3c7;
}
.kadenz-flash--warn .kadenz-flash-icon {
    color: #fcd34d;
}
/* Legacy modifiers (non-rich flashes) */
.kadenz-flash-info { border-color: color-mix(in srgb, var(--theme-accent) 40%, transparent); }
.kadenz-flash-success { background: color-mix(in srgb, #166534 28%, var(--theme-surface)); border: 1px solid color-mix(in srgb, #22c55e 45%, transparent); color: #d1fae5; }
.kadenz-flash-error { background: color-mix(in srgb, #991b1b 26%, var(--theme-surface)); border: 1px solid color-mix(in srgb, #f87171 45%, transparent); color: #fecaca; }
.kadenz-flash-warn { background: color-mix(in srgb, #b45309 20%, var(--theme-surface)); border: 1px solid color-mix(in srgb, #fbbf24 40%, transparent); color: #fef3c7; }
.kadenz-flash-warn a { color: var(--theme-accent); font-weight: 600; }
.kadenz-error {
    background: color-mix(in srgb, #991b1b 26%, var(--theme-surface));
    border: 1px solid color-mix(in srgb, #f87171 45%, transparent);
    color: #fecaca;
    border-radius: var(--theme-radius);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}
.kadenz-empty {
    border: 1px dashed var(--theme-border);
    border-radius: var(--theme-radius);
    padding: 2rem;
    text-align: center;
    color: var(--theme-muted);
    background: var(--theme-surface);
}
/* Buttons ----------------------------------------------------------- */
.kadenz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    font-family: var(--theme-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-fg);
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
    text-decoration: none;
}
.kadenz-btn:hover { background: var(--theme-surface-strong); transform: translateY(-1px); }
.kadenz-btn:not(.kadenz-btn-primary):hover {
    border-color: color-mix(in srgb, var(--theme-secondary) 38%, var(--theme-border));
}
.kadenz-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.kadenz-btn-primary {
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 86%, white), var(--theme-accent));
    color: #0a0d14;
    border-color: transparent;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-accent) 30%, transparent);
}
.kadenz-btn-primary:hover { background: color-mix(in srgb, var(--theme-accent) 80%, white); }
.kadenz-btn-ghost { background: transparent; }
.kadenz-btn-secondary {
    border-color: color-mix(in srgb, var(--theme-secondary) 36%, var(--theme-border));
    background: color-mix(in srgb, var(--theme-secondary) 9%, var(--theme-surface));
    color: var(--theme-secondary);
}
.kadenz-btn-secondary:hover {
    border-color: color-mix(in srgb, var(--theme-secondary) 55%, var(--theme-border));
    background: color-mix(in srgb, var(--theme-secondary) 16%, var(--theme-surface-strong));
}
.kadenz-btn-ghost:hover {
    color: var(--theme-secondary);
    border-color: color-mix(in srgb, var(--theme-secondary) 42%, var(--theme-border));
}
.kadenz-btn-lg { padding: 0.9rem 1.4rem; font-size: 1.05rem; }
.kadenz-btn-sm { padding: 0.35rem 0.75rem; font-size: 0.85rem; border-radius: 8px; }
.kadenz-btn.is-playing { background: var(--theme-accent-2); color: #0a0d14; }
/* Nav --------------------------------------------------------------- */
.kadenz-nav {
    border-bottom: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--theme-bg) 88%, black);
    backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 5000;
    isolation: isolate;
    overflow: visible;
}
.kadenz-nav-inner {
    max-width: 72rem; margin: 0 auto; padding: 0.4rem 1.25rem;
    width: 100%;
    box-sizing: border-box;
}
.kadenz-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.35rem;
}
.kadenz-nav-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.kadenz-nav-right { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.kadenz-nav-wordmark { height: 1.75rem; width: auto; }
.kadenz-nav-plugin-btn {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--theme-fg);
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--theme-bg) 65%, var(--theme-surface-strong));
    white-space: nowrap;
}
.kadenz-nav-plugin-btn:hover {
    color: var(--theme-accent);
    border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-border));
    background: var(--theme-surface-strong);
}
.kadenz-nav-plugin-coming {
    opacity: 0.78;
    cursor: default;
}
.kadenz-nav-brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--theme-fg); text-decoration: none; }
.kadenz-nav-brand-text { font-family: var(--theme-font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.kadenz-nav-links { display: flex; align-items: center; gap: 0.6rem; }
.kadenz-nav-links-desktop .kadenz-nav-link {
    font-weight: 600;
}
.kadenz-nav-mobile-toggle {
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--theme-bg) 65%, var(--theme-surface-strong));
    color: var(--theme-fg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.22rem;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.kadenz-nav-mobile-toggle:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-border));
    background: var(--theme-surface-strong);
}
.kadenz-nav-mobile-toggle[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--theme-accent) 55%, var(--theme-border));
    background: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-bg));
}
.kadenz-nav-mobile-panel {
    display: none;
    width: 100%;
    margin-top: 0.55rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--theme-border);
    background: var(--theme-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.kadenz-nav-plugin-btn-mobile {
    display: none;
}
.kadenz-nav-mobile-toggle-bar {
    width: 1rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}
.kadenz-nav-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.55rem;
}
.kadenz-nav-mobile-links .kadenz-nav-link {
    display: block;
    padding: 0.55rem 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: none;
    border-left: 3px solid transparent;
    border-radius: 6px;
}
.kadenz-nav-mobile-links .kadenz-nav-link.is-active,
.kadenz-nav-mobile-links .kadenz-nav-link:hover {
    border-left-color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-bg));
    border-bottom-color: transparent;
}
.kadenz-nav-link {
    color: var(--theme-muted);
    text-decoration: none;
    font-size: 0.88rem;
    padding: 0.2rem 0;
    line-height: 1.2;
    border-bottom: 2px solid transparent;
    background: none; border: 0; cursor: pointer; font-family: inherit;
}
.kadenz-nav-link:hover, .kadenz-nav-link.is-active { color: var(--theme-fg); border-bottom-color: var(--theme-accent); }
[x-cloak] { display: none !important; }
.kadenz-nav-user {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    color: var(--theme-fg);
    font-size: 0.88rem;
    z-index: 5010;
    max-width: 14rem;
    /* Fixed vertical footprint so the bar height never changes when the menu opens */
    line-height: 1.2;
    height: 1.75rem;
    display: flex;
    align-items: center;
}
.kadenz-nav-user-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font: inherit;
    font-weight: 500;
    padding: 0 0.2rem 0 0.4rem;
    margin: 0;
    line-height: 1.2;
    height: 1.75rem;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--theme-fg);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kadenz-nav-user-btn:hover { background: var(--theme-surface); border-color: var(--theme-border); }
.kadenz-nav-user-btn:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }
.kadenz-nav-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 10rem;
}
.kadenz-nav-user-caret { font-size: 0.65rem; color: var(--theme-muted); flex-shrink: 0; }
.kadenz-nav-user-panel {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.1rem;
    min-width: 10.5rem;
    padding: 0.25rem 0;
    /* Opaque menu surface (global --theme-surface is translucent). */
    background: var(--theme-bg);
    background-image: none;
    border: 1px solid var(--theme-border);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 5020;
}
.kadenz-nav-user-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.75rem;
    font-size: 0.86rem;
    color: var(--theme-fg);
    text-decoration: none;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 0;
}
.kadenz-nav-user-item:hover,
.kadenz-nav-user-item.is-active { background: var(--theme-surface-strong); color: var(--theme-fg); }
.kadenz-nav-user-form { margin: 0; padding: 0; }
.kadenz-nav-user-group-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--theme-muted);
    padding: 0.45rem 0.75rem 0.1rem;
    margin: 0;
}
.kadenz-ml-sm { margin-left: 0.35rem; }
.kadenz-workspaces-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.kadenz-workspace-list { list-style: none; margin: 0; padding: 0; }
.kadenz-workspace-list-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--theme-border);
}
.kadenz-workspace-list-name {
    font-weight: 600;
    color: var(--theme-fg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.kadenz-workspace-list-name:hover { color: var(--theme-accent); }
.kadenz-workspace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) {
    .kadenz-workspace-grid { grid-template-columns: 1fr; }
}
.kadenz-workspace-members,
.kadenz-workspace-invites,
.kadenz-workspace-bp-list,
.kadenz-activity-feed {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.kadenz-workspace-members li,
.kadenz-workspace-invites li,
.kadenz-workspace-bp-list li,
.kadenz-activity-feed li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.9rem;
}
.kadenz-workspace-breakdown { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.85rem; }
.kadenz-workspace-breakdown li { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--theme-border); }
.kadenz-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.kadenz-btn-text {
    background: none;
    border: none;
    color: var(--theme-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--theme-secondary) 45%, transparent);
}
.kadenz-btn-text:hover {
    color: color-mix(in srgb, var(--theme-secondary) 88%, white);
    text-decoration-color: var(--theme-secondary);
}
.kadenz-btn-block { display: block; width: 100%; text-align: center; }
.kadenz-text-center { text-align: center; }
.kadenz-invitation-page { padding-top: 1rem; padding-bottom: 2rem; }
.kadenz-invitation-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.kadenz-comment-list { list-style: none; margin: 0; padding: 0; }
.kadenz-comment-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--theme-border);
}
.kadenz-comment-meta { font-size: 0.8rem; color: var(--theme-muted); display: block; margin-bottom: 0.25rem; }
.kadenz-comment-body { margin: 0; font-size: 0.95rem; }
.kadenz-form-stack { display: flex; flex-direction: column; gap: 1rem; }
.kadenz-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.kadenz-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--theme-muted); margin-bottom: 0.25rem; }
.kadenz-textarea { min-height: 5rem; resize: vertical; }
.kadenz-btn-danger {
    background: #7f1d1d;
    color: #fecaca;
    border: 1px solid #991b1b;
}
.kadenz-btn-danger:hover { filter: brightness(1.08); }
.kadenz-nav-user-logout { margin: 0; padding: 0; }
.kadenz-nav-user-logout-btn { color: var(--theme-muted); }
.kadenz-nav-user-logout-btn:hover { color: #ff7b80; }
@media (max-width: 1024px) {
    .kadenz-nav-links-desktop,
    .kadenz-nav-plugin-btn-desktop {
        display: none !important;
    }

    .kadenz-nav-mobile-toggle {
        display: inline-flex !important;
    }

    .kadenz-nav-plugin-btn-mobile {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        margin-top: 0.35rem;
    }

    .kadenz-nav-mobile-panel .kadenz-nav-plugin-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        font-size: 0.8rem;
    }

    .kadenz-nav-user {
        max-width: 8.5rem;
    }

    .kadenz-nav-user-name {
        max-width: 5.5rem;
    }
}
@media (max-width: 640px) {
    .kadenz-nav-user {
        max-width: 7rem;
    }

    .kadenz-nav-user-name {
        max-width: 4.5rem;
    }

    .kadenz-nav-user-caret {
        display: none;
    }
}
.kadenz-plan-pill {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: var(--theme-surface-strong);
    color: var(--theme-fg);
}
.kadenz-plan-free { background: rgba(255, 255, 255, 0.08); color: var(--theme-muted); }
.kadenz-plan-pro { background: color-mix(in srgb, var(--theme-accent) 30%, transparent); color: var(--theme-accent); }
.kadenz-plan-studio { background: color-mix(in srgb, var(--theme-accent-2) 30%, transparent); color: var(--theme-accent-2); }
/* Cards + dashboards ------------------------------------------------ */
.kadenz-dash-section { margin-top: 3rem; }
.kadenz-dash-section:first-child { margin-top: 0; }
/* Dashboard blueprint filters (GET query; auto-submit on change) — single row */
.kadenz-filter-bar {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 22%, var(--theme-border));
    background: color-mix(in srgb, var(--theme-surface) 88%, transparent);
    padding: 0.85rem 1rem 1rem;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--theme-bg) 72%, transparent);
    min-width: 0;
}
.kadenz-filter-bar__form {
    min-width: 0;
}
.kadenz-filter-bar__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem 0.65rem;
    min-width: 0;
    /* Narrow viewports: keep one row, scroll horizontally if needed */
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.kadenz-filter-bar__field {
    flex: 1 1 0;
    min-width: 5.5rem;
    max-width: 100%;
}
.kadenz-filter-bar__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-muted);
    margin-bottom: 0.28rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kadenz-filter-bar__select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 0.82rem;
}
.kadenz-filter-bar__actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-end;
    padding-bottom: 0.12rem;
}
.kadenz-section-title {
    font-family: var(--theme-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    position: relative;
    z-index: 1;
    background: color-mix(in srgb, var(--theme-bg) 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 20%, var(--theme-border));
    border-radius: 10px;
    padding: 0.5rem 0.72rem;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-bg) 68%, transparent);
}
.kadenz-subheading {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.kadenz-mb-md { margin-bottom: 1rem; }
.kadenz-mt-sm { margin-top: 0.5rem; }
.kadenz-mt-lg { margin-top: 1.5rem; }
.kadenz-token-meter { max-width: 28rem; }
.kadenz-token-meter--compact { max-width: 22rem; }
.kadenz-token-meter-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8rem;
    color: var(--theme-muted);
    margin-bottom: 0.35rem;
}
.kadenz-token-meter-remaining { font-weight: 600; color: var(--theme-fg); }
.kadenz-token-meter-track {
    height: 0.45rem;
    border-radius: 999px;
    background: var(--theme-surface-strong);
    border: 1px solid var(--theme-border);
    overflow: hidden;
}
.kadenz-token-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-2, var(--theme-accent)));
    transition: width 0.3s ease;
}
.kadenz-token-meter-fill--high {
    background: linear-gradient(90deg, #b45309, #f59e0b);
}
.kadenz-details-inline {
    font-size: 0.85rem;
    color: var(--theme-muted);
}
.kadenz-details-inline summary {
    cursor: pointer;
    color: var(--theme-accent);
    font-weight: 600;
}
.kadenz-details-inline summary::-webkit-details-marker { display: none; }
.kadenz-table-compact th,
.kadenz-table-compact td { padding: 0.45rem 0.35rem; font-size: 0.82rem; }
.kadenz-inline-form { display: inline; }
.kadenz-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
.kadenz-share-url-input { flex: 1 1 16rem; min-width: 12rem; font-size: 0.8rem; }
.kadenz-blueprint-share,
.kadenz-album-share {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.kadenz-presets-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.kadenz-preset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.65rem 0;
}
.kadenz-preset-share-url { min-width: 10rem; max-width: 100%; font-size: 0.75rem; }
.kadenz-track-main { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; flex: 1; }
.kadenz-track-title { font-weight: 600; }
.kadenz-track-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.kadenz-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}
.kadenz-library-song-card,
.kadenz-library-import-card {
    border-radius: 14px;
    border: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--theme-surface) 86%, var(--theme-bg));
    box-shadow: var(--theme-shadow);
    padding: 0.9rem 1rem;
}
.kadenz-library-song-card {
    border-left: 4px solid color-mix(in srgb, var(--theme-accent) 72%, transparent);
}
.kadenz-library-import-card {
    border-left: 4px solid color-mix(in srgb, var(--theme-accent-2) 70%, transparent);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--theme-accent-2) 8%, transparent), transparent 58%),
        color-mix(in srgb, var(--theme-surface) 90%, var(--theme-bg));
}
.kadenz-library-song-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.kadenz-library-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.13rem 0.52rem;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    background: color-mix(in srgb, var(--theme-accent) 22%, transparent);
    color: var(--theme-fg);
}
.kadenz-library-chip-import {
    background: color-mix(in srgb, var(--theme-accent-2) 25%, transparent);
}
.kadenz-library-song-card h3,
.kadenz-library-import-card h3 {
    font-family: var(--theme-font-display);
    font-size: 1.03rem;
    font-weight: 600;
    margin: 0.35rem 0 0.5rem;
}
.kadenz-blueprint-card,
.kadenz-album-card,
.kadenz-preset-card {
    display: block;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    padding: 1.25rem;
    color: var(--theme-fg);
    text-decoration: none;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
    position: relative;
    overflow: hidden;
}
.kadenz-blueprint-card:hover,
.kadenz-album-card:hover,
.kadenz-preset-card:hover { transform: translateY(-2px); border-color: var(--theme-accent); background: var(--theme-surface-strong); }
.kadenz-blueprint-card h3,
.kadenz-album-card h3,
.kadenz-preset-card h3 {
    font-family: var(--theme-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0.5rem 0;
}
.kadenz-blueprint-card::before,
.kadenz-preset-card::before,
.kadenz-panel:has(.kadenz-panel-title)::before,
.kadenz-surface-card:has(.kadenz-panel-title, .kadenz-card-header, .kadenz-subheading)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2.8rem;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-accent) 22%, var(--theme-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface-strong)), transparent);
    pointer-events: none;
}
.kadenz-blueprint-card::after,
.kadenz-preset-card::after,
.kadenz-panel:has(.kadenz-panel-title)::after,
.kadenz-surface-card:has(.kadenz-panel-title, .kadenz-card-header, .kadenz-subheading)::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    top: 2.8rem;
    height: 0.9rem;
    pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 22%, transparent), transparent);
    filter: blur(7px);
    opacity: 0.45;
}
.kadenz-blueprint-card-head { display: flex; align-items: center; gap: 0.5rem; }
.kadenz-blueprint-meta { color: var(--theme-muted); font-size: 0.85rem; }
.kadenz-prompt-excerpt { color: var(--theme-muted); font-size: 0.9rem; line-height: 1.45; }
.kadenz-card-date { color: var(--theme-muted); font-size: 0.8rem; margin-top: 0.75rem; }
.kadenz-preset-meta { color: var(--theme-muted); font-size: 0.85rem; }
.kadenz-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.kadenz-card-header-title {
    font-family: var(--theme-font-display);
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.kadenz-card-header-icon {
    width: 1rem;
    height: 1rem;
    color: var(--theme-secondary);
    flex-shrink: 0;
}
.kadenz-card-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.kadenz-preset-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
}
.kadenz-form-field-span {
    grid-column: 1 / -1;
}
.kadenz-code-inline {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.82em;
    color: var(--theme-accent);
}
.kadenz-list-plain { margin: 0; padding-left: 1.2rem; }
.kadenz-checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.kadenz-checkbox-label input { accent-color: var(--theme-secondary); }
/* Stylized toggle (replaces native checkboxes in forms) */
.kadenz-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    position: relative;
}
.kadenz-toggle--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.kadenz-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.kadenz-toggle__track {
    position: relative;
    flex-shrink: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-surface-strong) 88%, var(--theme-border));
    border: 1px solid color-mix(in srgb, var(--theme-border) 90%, transparent);
    box-shadow: inset 0 1px 2px color-mix(in srgb, #0a0d14 22%, transparent);
    transition:
        background var(--theme-transition),
        border-color var(--theme-transition),
        box-shadow var(--theme-transition);
}
.kadenz-toggle__glow {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--theme-accent) 55%, transparent), transparent 68%);
    transition: opacity 220ms ease;
    pointer-events: none;
}
.kadenz-toggle__thumb {
    position: absolute;
    top: 50%;
    left: 0.12rem;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(165deg, #f4f7fb 0%, #c8d0dc 100%);
    border: 1px solid color-mix(in srgb, #fff 40%, var(--theme-border));
    box-shadow:
        0 1px 3px color-mix(in srgb, #0a0d14 28%, transparent),
        0 0 0 1px color-mix(in srgb, #0a0d14 8%, transparent);
    transition:
        transform 220ms cubic-bezier(0.34, 1.35, 0.48, 1),
        background var(--theme-transition),
        box-shadow var(--theme-transition);
}
.kadenz-toggle--lg .kadenz-toggle__track {
    width: 3.15rem;
    height: 1.72rem;
}
.kadenz-toggle--lg .kadenz-toggle__thumb {
    width: 1.38rem;
    height: 1.38rem;
}
.kadenz-toggle--sm .kadenz-toggle__track {
    width: 2.35rem;
    height: 1.35rem;
}
.kadenz-toggle--sm .kadenz-toggle__thumb {
    width: 1.05rem;
    height: 1.05rem;
}
.kadenz-toggle__input:checked + .kadenz-toggle__track {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--theme-accent) 92%, #fff),
        color-mix(in srgb, var(--theme-accent) 68%, #0a1628)
    );
    border-color: color-mix(in srgb, var(--theme-accent) 55%, var(--theme-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
        0 0 14px color-mix(in srgb, var(--theme-accent) 42%, transparent);
}
.kadenz-toggle__input:checked + .kadenz-toggle__track .kadenz-toggle__glow {
    opacity: 1;
}
.kadenz-toggle__input:checked + .kadenz-toggle__track .kadenz-toggle__thumb {
    background: linear-gradient(165deg, #fff 0%, #e8edf5 100%);
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--theme-accent) 35%, transparent),
        0 0 0 1px color-mix(in srgb, var(--theme-accent) 25%, transparent);
    transform: translate(var(--kadenz-toggle-thumb-x, 1.38rem), -50%) scale(1.04);
}
.kadenz-toggle--lg .kadenz-toggle__input:checked + .kadenz-toggle__track .kadenz-toggle__thumb {
    --kadenz-toggle-thumb-x: 1.38rem;
}
.kadenz-toggle--sm .kadenz-toggle__input:checked + .kadenz-toggle__track .kadenz-toggle__thumb {
    --kadenz-toggle-thumb-x: 1rem;
}
.kadenz-toggle__input:focus-visible + .kadenz-toggle__track {
    outline: 2px solid color-mix(in srgb, var(--theme-accent) 65%, transparent);
    outline-offset: 2px;
}
.kadenz-toggle__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.kadenz-toggle__label {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--theme-fg);
    line-height: 1.25;
}
.kadenz-toggle__hint {
    font-size: 0.78rem;
    color: var(--theme-muted);
    line-height: 1.35;
}
.kadenz-form-toggle-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.kadenz-choice-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    margin-top: 0.35rem;
}
.kadenz-choice-row {
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border-radius: calc(var(--theme-radius) - 2px);
    border: 1px solid color-mix(in srgb, var(--theme-border) 85%, transparent);
    background: color-mix(in srgb, var(--theme-surface) 92%, transparent);
    transition:
        border-color var(--theme-transition),
        background var(--theme-transition),
        box-shadow var(--theme-transition);
}
.kadenz-choice-row:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border));
}
.kadenz-choice-row:has(.kadenz-toggle__input:checked) {
    border-color: color-mix(in srgb, var(--theme-accent) 48%, var(--theme-border));
    background: color-mix(in srgb, var(--theme-accent) 8%, var(--theme-surface));
    box-shadow: 0 0 12px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}
.kadenz-choice-row__label {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--theme-fg);
    line-height: 1.3;
}
.kadenz-multi-dropdown-option.kadenz-choice-row {
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 0.45rem 0.5rem;
}
.kadenz-multi-dropdown-option.kadenz-choice-row:has(.kadenz-toggle__input:checked) {
    background: color-mix(in srgb, var(--theme-dropdown-fill) 75%, var(--theme-fg) 10%);
    box-shadow: none;
}
.kadenz-phrase-save-toggle {
    margin-top: 0.15rem;
}
.kadenz-perf-toggle {
    grid-column: 1 / -1;
}
.kadenz-preset-json-pre {
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.45;
    overflow: auto;
    max-height: 14rem;
    background: var(--theme-bg);
    color: var(--theme-fg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
}
.kadenz-notation-toolbar .kadenz-select {
    min-width: 10.5rem;
    width: auto;
    max-width: 100%;
}
.kadenz-theme-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--theme-accent); display: inline-block; }
/* Generate page ----------------------------------------------------- */
.kadenz-label { display: block; font-weight: 500; color: var(--theme-fg); margin-bottom: 0.5rem; font-size: 0.95rem; }
.kadenz-label-small { margin-top: 1.25rem; }
/* Text fields: surface. Native <select> uses dropdown fill (same as .kadenz-select). */
.kadenz-textarea,
.kadenz-input:not(select) {
    width: 100%;
    background: var(--theme-surface);
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    color: var(--theme-fg);
    font-family: var(--theme-font-body);
    font-size: 1rem;
    color-scheme: dark;
}
/* Range: logo orange accent (native accent-color + padding tuned for sliders, not text fields). */
input[type="range"].kadenz-input {
    accent-color: var(--theme-secondary);
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
}
.kadenz-select,
select.kadenz-input {
    width: 100%;
    background: var(--theme-dropdown-fill);
    background-color: var(--theme-dropdown-fill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    color: var(--theme-fg);
    font-family: var(--theme-font-body);
    font-size: 1rem;
    color-scheme: dark;
}
.kadenz-textarea:focus,
.kadenz-input:focus:not(select) {
    outline: none;
    background: var(--theme-surface) !important;
    background-color: var(--theme-surface) !important;
    color: var(--theme-fg) !important;
    border-color: var(--theme-secondary);
    box-shadow: 0 0 0 3px var(--theme-secondary-soft);
}
.kadenz-select:focus,
select.kadenz-input:focus {
    outline: none;
    background: var(--theme-dropdown-fill) !important;
    background-color: var(--theme-dropdown-fill) !important;
    color: var(--theme-fg) !important;
    border-color: var(--theme-secondary);
    box-shadow: 0 0 0 3px var(--theme-secondary-soft);
}
.kadenz-select option,
.kadenz-select optgroup,
select.kadenz-input option,
select.kadenz-input optgroup {
    background: var(--theme-bg);
    color: var(--theme-fg);
}
input.kadenz-input:-webkit-autofill,
input.kadenz-input:-webkit-autofill:hover,
input.kadenz-input:-webkit-autofill:focus,
textarea.kadenz-input:-webkit-autofill,
textarea.kadenz-input:-webkit-autofill:hover,
textarea.kadenz-input:-webkit-autofill:focus,
.kadenz-textarea:-webkit-autofill,
.kadenz-textarea:-webkit-autofill:hover,
.kadenz-textarea:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    background-color: var(--theme-surface) !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--theme-fg) !important;
    color: var(--theme-fg) !important;
    caret-color: var(--theme-fg) !important;
    -webkit-transition: background-color 9999s ease-out 0s;
    transition: background-color 9999s ease-out 0s;
}
.kadenz-select:-webkit-autofill,
.kadenz-select:-webkit-autofill:hover,
.kadenz-select:-webkit-autofill:focus,
select.kadenz-input:-webkit-autofill,
select.kadenz-input:-webkit-autofill:hover,
select.kadenz-input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--theme-dropdown-fill) inset !important;
    background-color: var(--theme-dropdown-fill) !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--theme-fg) !important;
    color: var(--theme-fg) !important;
    caret-color: var(--theme-fg) !important;
    -webkit-transition: background-color 9999s ease-out 0s;
    transition: background-color 9999s ease-out 0s;
}
.kadenz-generate { max-width: 72rem; }
.kadenz-generate-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.kadenz-hint { color: var(--theme-muted); font-size: 0.85rem; }
.kadenz-beta-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin: 0.95rem 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--theme-border));
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--theme-accent) 10%, transparent), transparent 65%),
        color-mix(in srgb, var(--theme-surface) 92%, var(--theme-accent) 8%);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}
.kadenz-beta-banner--marketing {
    margin-top: 1rem;
    margin-bottom: 1.15rem;
}
.kadenz-beta-banner__icon {
    flex: 0 0 auto;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--theme-accent-contrast);
    background: var(--theme-accent);
}
.kadenz-beta-banner__body {
    min-width: 0;
}
.kadenz-beta-banner__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-fg);
}
.kadenz-beta-banner__text {
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--theme-muted);
}
/* Legacy: prefer <x-kadenz.reveal-panel> for expandable field blocks */
/* Multi-select: trigger uses .kadenz-select; panel uses .kadenz-split-menu */
.kadenz-multi-dropdown {
    position: relative;
    z-index: 1;
}
.kadenz-multi-dropdown:has(.kadenz-multi-dropdown-panel.is-open) {
    z-index: 12000;
}
.kadenz-multi-dropdown-trigger.kadenz-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
}
.kadenz-multi-dropdown-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kadenz-multi-dropdown-chevron {
    flex-shrink: 0;
    opacity: 0.75;
    font-size: 0.75rem;
    pointer-events: none;
}
.kadenz-multi-dropdown-panel.kadenz-split-menu {
    left: 0;
    right: 0;
    min-width: 100%;
    max-height: 14rem;
    overflow: auto;
    display: none;
}
.kadenz-multi-dropdown-panel.kadenz-split-menu.is-open,
.kadenz-multi-dropdown-panel.kadenz-split-menu:not([hidden]) {
    display: block;
}
.kadenz-multi-dropdown-option {
    cursor: pointer;
}
.kadenz-multi-dropdown-option:hover {
    background: color-mix(in srgb, var(--theme-dropdown-fill) 75%, var(--theme-fg) 10%);
}
.kadenz-multi-dropdown-option input {
    flex-shrink: 0;
}
.kadenz-generate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
}
.kadenz-generate-grid--responsive {
    grid-template-columns: 1fr;
}
.kadenz-generate-grid--core,
.kadenz-generate-grid--top {
    margin-top: 0.9rem;
}
@media (min-width: 700px) {
    .kadenz-generate-grid--responsive {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1040px) {
    .kadenz-generate-grid--responsive {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .kadenz-generate-grid--top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.kadenz-album-form { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr auto auto; margin-bottom: 2rem; }
@media (max-width: 720px) { .kadenz-album-form { grid-template-columns: 1fr; } }
/* Create album: title | desc, then cover (stacked) + mood + CTA */
.kadenz-album-form.kadenz-album-create-form {
    display: grid;
    gap: 0.85rem 1.1rem;
    width: 100%;
    max-width: 72rem;
    margin-bottom: 2rem;
    grid-template-columns: 1fr;
}
.kadenz-album-create-row2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-column: 1 / -1;
}
@media (min-width: 640px) {
    .kadenz-album-form.kadenz-album-create-form {
        grid-template-columns: 1fr 1fr;
    }
    .kadenz-album-create-title { grid-column: 1; grid-row: 1; }
    .kadenz-album-create-desc { grid-column: 2; grid-row: 1; }
    .kadenz-album-create-row2 {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 1.15rem 1.25rem;
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: 9.75rem minmax(0, 1fr) auto;
    }
    .kadenz-album-create-cover {
        min-width: 0;
    }
    .kadenz-album-create-mood-col {
        min-width: 0;
    }
    .kadenz-album-mood-hint-mobile { display: none; }
    .kadenz-album-create-actions {
        align-self: end;
        padding-bottom: 0.15rem;
    }
}
@media (max-width: 639px) {
    .kadenz-album-create-actions { width: 100%; }
    .kadenz-album-create-actions .kadenz-btn { width: 100%; }
}
.kadenz-album-create-mood-head {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
@media (min-width: 640px) {
    .kadenz-album-create-mood-head {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem 0.65rem;
    }
    .kadenz-album-create-mood-head .kadenz-select {
        flex: 1 1 min(100%, 14rem);
        min-width: 0;
        width: auto;
    }
}
.kadenz-album-cover-hint-inline {
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--theme-muted);
    margin: 0;
    flex: 1 1 12rem;
    max-width: 100%;
}
@media (min-width: 640px) {
    .kadenz-album-cover-hint-inline {
        flex: 1 1 200px;
        align-self: center;
    }
}
.kadenz-album-create-actions .kadenz-btn { white-space: nowrap; }
.kadenz-form-field { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }
.kadenz-field-hint { font-size: 0.82rem; color: var(--theme-muted); margin: 0; line-height: 1.45; }
.kadenz-label-optional { font-weight: 400; color: var(--theme-muted); font-size: 0.9em; }
.kadenz-albums-head { margin-bottom: 1rem; }
/* Reusable expandable panel (`x-kadenz.reveal-panel`): softer closed surface, card when open */
.kadenz-reveal-panel:not([open]):hover {
    border-color: color-mix(in srgb, var(--theme-accent) 32%, var(--theme-border));
    background: color-mix(in srgb, var(--theme-accent) 32%, var(--theme-surface));
    transform: translateY(-1px);
}
.kadenz-reveal-panel {
    position: relative;
    border-radius: var(--theme-radius);
    overflow: clip;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 22%, var(--theme-border));
    background: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-surface));
    box-shadow: var(--theme-shadow);
    transform: translateY(0);
    transition:
        background var(--theme-transition),
        border-color var(--theme-transition),
        box-shadow var(--theme-transition),
        transform var(--theme-transition);
}
.kadenz-reveal-panel[open] {
    border-color: var(--theme-border);
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow);
    transform: translateY(0);
    overflow: visible;
}
.kadenz-reveal-panel[open] .kadenz-reveal-panel__body {
    overflow: visible;
}
.kadenz-reveal-panel__trigger {
    list-style: none;
    list-style-type: none;
    cursor: pointer;
    padding: 0.72rem 1rem 0.72rem 1.12rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 3.1rem;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition:
        color var(--theme-transition),
        background var(--theme-transition),
        border-color var(--theme-transition);
    color: var(--theme-fg);
    border-bottom: 1px solid transparent;
}
.kadenz-reveal-panel__trigger::-webkit-details-marker {
    display: none;
}
.kadenz-reveal-panel__trigger::marker {
    content: "";
}
.kadenz-reveal-panel[open] .kadenz-reveal-panel__trigger {
    color: var(--theme-fg);
    border-bottom-color: var(--theme-border);
    background: color-mix(in srgb, var(--theme-surface-strong) 55%, transparent);
}
.kadenz-reveal-panel__trigger-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    min-width: 0;
    text-align: left;
}
.kadenz-reveal-panel__title {
    font-family: var(--theme-font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.kadenz-reveal-panel__hint {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--theme-muted);
    font-weight: 400;
}
.kadenz-reveal-panel[open] .kadenz-reveal-panel__hint {
    color: var(--theme-muted);
}
.kadenz-reveal-panel__chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--theme-accent) 16%, transparent);
    color: var(--theme-accent);
    transition: transform var(--theme-transition), background var(--theme-transition), color var(--theme-transition);
}
.kadenz-reveal-panel[open] .kadenz-reveal-panel__chevron {
    background: color-mix(in srgb, var(--theme-accent) 16%, transparent);
    color: var(--theme-accent);
    transform: rotate(180deg);
}
.kadenz-reveal-panel__trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--theme-accent) 70%, transparent);
    outline-offset: 2px;
    border-radius: calc(var(--theme-radius) - 2px);
}
.kadenz-reveal-panel__body {
    padding: 1rem 1.05rem 1.1rem;
    background: transparent;
}
.kadenz-reveal-panel .kadenz-advanced-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 840px) {
    .kadenz-reveal-panel .kadenz-advanced-columns {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}
.kadenz-reveal-panel__body .kadenz-album-form.kadenz-album-create-form {
    margin-bottom: 0;
}
.kadenz-generate-wait-anchor {
    scroll-margin-top: 5.5rem;
}
.kadenz-loading {
    margin-top: 2rem;
    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--theme-surface) 92%, var(--theme-accent) 4%),
        var(--theme-surface) 55%
    );
    overflow: hidden;
}
.kadenz-generate-wait {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.kadenz-generate-wait__layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem 1.5rem;
    padding: 1.5rem 1.35rem 1.25rem;
    align-items: start;
}
@media (max-width: 520px) {
    .kadenz-generate-wait__layout {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .kadenz-wait-learn {
        align-items: center;
    }
    .kadenz-wait-body {
        text-align: center;
    }
    .kadenz-wait-pro {
        text-align: center;
    }
}
.kadenz-wait-orb-col {
    padding-top: 0.15rem;
}
.kadenz-wait-orb {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.kadenz-wait-orb__core {
    position: absolute;
    inset: 12px;
    border-radius: 999px;
    background: radial-gradient(circle at 32% 28%, var(--theme-accent-2), var(--theme-accent));
    box-shadow: 0 0 18px color-mix(in srgb, var(--theme-accent) 45%, transparent);
    animation: kadenz-wait-core-breathe 2.4s ease-in-out infinite;
}
.kadenz-wait-orb__ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--theme-accent) 55%, transparent);
    opacity: 0.85;
    animation: kadenz-wait-ring-spin 5.5s linear infinite;
}
.kadenz-wait-orb__ring--delay {
    inset: 5px;
    border-color: color-mix(in srgb, var(--theme-accent-2) 40%, transparent);
    animation-duration: 3.8s;
    animation-direction: reverse;
    opacity: 0.5;
}
@keyframes kadenz-wait-core-breathe {
    0%,
    100% {
        transform: scale(0.92);
        opacity: 0.92;
    }
    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}
@keyframes kadenz-wait-ring-spin {
    from {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.06);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}
.kadenz-wait-learn {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}
.kadenz-wait-learn--flash .kadenz-wait-title {
    animation: kadenz-wait-tip-snap 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.kadenz-wait-learn--flash .kadenz-wait-body {
    animation: kadenz-wait-tip-snap 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
}
.kadenz-wait-learn--flash .kadenz-wait-pro {
    animation: kadenz-wait-tip-snap 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
.kadenz-wait-learn--flash .kadenz-wait-visual {
    animation: kadenz-wait-visual-rise 0.55s ease 0.12s both;
}
@keyframes kadenz-wait-tip-snap {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes kadenz-wait-visual-rise {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.kadenz-wait-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--theme-accent);
    margin: 0;
    font-family: var(--theme-font-display);
}
.kadenz-wait-tag {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-muted);
    letter-spacing: 0.06em;
}
.kadenz-wait-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 700;
    font-family: var(--theme-font-display);
    color: var(--theme-fg);
}
.kadenz-wait-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--theme-fg) 88%, var(--theme-muted));
    max-width: 40rem;
}
.kadenz-wait-pro {
    margin: 0;
    margin-top: 0.35rem;
    padding-top: 0.45rem;
    border-top: 1px solid color-mix(in srgb, var(--theme-muted) 35%, transparent);
    font-size: 0.82rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--theme-muted) 92%, var(--theme-fg));
    max-width: 40rem;
}
.kadenz-wait-pro::before {
    content: 'Pro angle · ';
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme-accent);
    display: block;
    margin-bottom: 0.25rem;
}
.kadenz-wait-visual {
    margin-top: 0.35rem;
    width: 100%;
    max-width: 11rem;
    min-height: 3.25rem;
    opacity: 0.95;
}
.kadenz-wait-svg-inner {
    width: 100%;
    height: auto;
    display: block;
}
.kadenz-wait-svg--spin-slow {
    animation: kadenz-wait-svg-drift 14s linear infinite;
}
@keyframes kadenz-wait-svg-drift {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.kadenz-wait-svg-line {
    stroke-dasharray: 80 200;
    animation: kadenz-wait-dash 3.2s linear infinite;
}
@keyframes kadenz-wait-dash {
    to {
        stroke-dashoffset: -280;
    }
}
.kadenz-wait-eq-bars rect {
    transform-origin: center bottom;
    animation: kadenz-wait-eq-pulse 0.9s ease-in-out infinite;
}
.kadenz-wait-eq-bars rect:nth-child(1) {
    animation-delay: 0s;
}
.kadenz-wait-eq-bars rect:nth-child(2) {
    animation-delay: 0.12s;
}
.kadenz-wait-eq-bars rect:nth-child(3) {
    animation-delay: 0.24s;
}
.kadenz-wait-eq-bars rect:nth-child(4) {
    animation-delay: 0.08s;
}
.kadenz-wait-eq-bars rect:nth-child(5) {
    animation-delay: 0.2s;
}
.kadenz-wait-eq-bars rect:nth-child(6) {
    animation-delay: 0.04s;
}
.kadenz-wait-eq-bars rect:nth-child(7) {
    animation-delay: 0.16s;
}
@keyframes kadenz-wait-eq-pulse {
    0%,
    100% {
        transform: scaleY(0.55);
        opacity: 0.65;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}
.kadenz-wait-comp-grab {
    animation: kadenz-wait-comp-squash 2.2s ease-in-out infinite;
}
@keyframes kadenz-wait-comp-squash {
    0%,
    100% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(0.72);
    }
}
.kadenz-wait-meter-trace {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: kadenz-wait-meter-draw 2.8s ease-in-out infinite;
}
@keyframes kadenz-wait-meter-draw {
    0% {
        stroke-dashoffset: 120;
        opacity: 0.4;
    }
    45% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -40;
        opacity: 0.35;
    }
}
.kadenz-wait-progress-block {
    padding: 0 1.35rem 1.35rem;
    border-top: 1px solid color-mix(in srgb, var(--theme-border) 70%, transparent);
    background: color-mix(in srgb, var(--theme-bg) 35%, transparent);
}
.kadenz-wait-progress-label {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--theme-muted);
    font-family: var(--theme-font-display);
}
.kadenz-wait-bar-track {
    width: 100%;
    max-width: 28rem;
    height: 5px;
    margin: 0 auto;
    background: var(--theme-border);
    border-radius: 999px;
    overflow: hidden;
}
.kadenz-loading-fill {
    height: 100%;
    width: 100%;
    transform: scaleX(0.04);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-2));
    border-radius: 999px;
    transition: none;
}
.kadenz-wait-bar-fill.kadenz-wait-fill-anim {
    /* Width driven by JS elapsed-time curve in generate-wait.js */
    animation: none;
    transform: scaleX(0.04);
}
@keyframes kadenz-wait-progress {
    from {
        transform: scaleX(0.04);
    }
    to {
        transform: scaleX(0.93);
    }
}
.kadenz-wait-bar-fill.kadenz-wait-fill-done {
    animation: none;
    transform: scaleX(1);
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Legacy single-line loader (other pages may still use) */
.kadenz-loading-bar {
    width: 100%;
    max-width: 20rem;
    height: 4px;
    background: var(--theme-border);
    border-radius: 999px;
    overflow: hidden;
}
/* Blueprint view ---------------------------------------------------- */
.kadenz-blueprint-head { align-items: flex-start; }
.kadenz-blueprint-eyebrow { color: var(--theme-accent); }
.kadenz-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-end;
}
.kadenz-head-actions__primary,
.kadenz-head-actions__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.kadenz-head-actions__primary { margin-right: auto; }
.kadenz-save-slot {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
}
.kadenz-edit-save-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.kadenz-btn-secondary.is-dirty {
    border-color: color-mix(in srgb, var(--theme-accent) 50%, var(--theme-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 22%, transparent);
}
.kadenz-more-toggle {
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.4rem 0.55rem;
    letter-spacing: 0.08em;
}
.kadenz-split-menu-divider {
    height: 1px;
    margin: 0.35rem 0.3rem;
    background: var(--theme-border);
    border: 0;
}
.kadenz-split-menu-form {
    margin: 0;
    padding: 0;
}
.kadenz-split-menu-submit {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--theme-fg);
    cursor: pointer;
    font-family: var(--theme-font-body);
    font-size: 0.9rem;
}
.kadenz-split-menu-submit:hover {
    background: color-mix(in srgb, var(--theme-dropdown-fill) 75%, var(--theme-fg) 10%);
}
.kadenz-split-menu-submit--danger {
    color: color-mix(in srgb, #e85454 88%, var(--theme-fg));
}
.kadenz-blueprint-meta-card {
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    width: 100%;
}
.kadenz-blueprint-meta-row {
    display: grid;
    gap: 0.75rem 1rem;
    width: 100%;
}
.kadenz-blueprint-meta-row--primary {
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .kadenz-blueprint-meta-row--primary {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr) minmax(0, 1.35fr) auto;
        align-items: end;
    }
    .kadenz-blueprint-meta-row--primary:not(:has(.kadenz-blueprint-meta-field--toggle)) {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr) minmax(0, 1.35fr);
    }
}
.kadenz-blueprint-meta-row--community {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--theme-border);
    grid-template-columns: 1fr;
}
@media (min-width: 560px) {
    .kadenz-blueprint-meta-row--community {
        grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
        align-items: end;
    }
}
.kadenz-blueprint-meta-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.kadenz-blueprint-meta-field--title { min-width: 0; max-width: 100%; }
.kadenz-blueprint-meta-field--toggle {
    min-width: 0;
}
.kadenz-blueprint-meta-toggle-slot {
    display: flex;
    align-items: center;
    min-height: 2.85rem;
    padding-bottom: 0.05rem;
}
.kadenz-blueprint-meta-field--cover .kadenz-cover-upload--inline .kadenz-cover-upload-controls {
    max-width: none;
    margin: 0;
    flex: 1;
    min-width: 0;
}
.kadenz-blueprint-meta-field--cover .kadenz-cover-upload {
    width: 100%;
}
.kadenz-blueprint-meta-field--cover .kadenz-cover-upload-inner {
    margin-top: 0;
    width: 100%;
}
.kadenz-blueprint-cover-upload.kadenz-cover-upload--inline .kadenz-cover-upload-inner {
    align-items: center;
    gap: 0.55rem;
}
.kadenz-blueprint-meta-field--cover .kadenz-file-picker {
    flex: 1;
    min-width: 0;
}
.kadenz-blueprint-cover-upload {
    --kadenz-cover-thumb-width: 4.75rem;
    --kadenz-cover-thumb-height: 3.25rem;
}
.kadenz-blueprint-cover-upload .kadenz-cover-upload-hint {
    font-size: 0.65rem;
    line-height: 1.3;
    margin: 0.2rem 0 0;
    text-align: center;
}
.kadenz-blueprint-album-label { font-size: 0.8rem; font-weight: 600; color: var(--theme-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.kadenz-blueprint-meta-card .kadenz-select { width: 100%; max-width: 100%; }
/* Shared cover uploader */
.kadenz-cover-upload-inner {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 0.35rem;
}
.kadenz-cover-upload--stacked .kadenz-cover-upload-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
}
.kadenz-cover-upload--stacked .kadenz-cover-upload-controls {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    max-width: 11rem;
}
.kadenz-cover-upload--stacked .kadenz-cover-upload-frame {
    width: var(--kadenz-cover-thumb-stack-size, 7.5rem);
    height: var(--kadenz-cover-thumb-stack-size, 7.5rem);
    max-width: 100%;
}
.kadenz-cover-upload--stacked .kadenz-cover-upload-controls .kadenz-file-picker {
    width: 100%;
}
.kadenz-cover-upload--stacked .kadenz-cover-upload-input {
    width: 100%;
    max-width: 100%;
    font-size: 0.78rem;
}
.kadenz-cover-upload--inline .kadenz-cover-upload-inner {
    flex-direction: row;
}
.kadenz-cover-upload-frame {
    flex: 0 0 auto;
    width: var(--kadenz-cover-thumb-width, var(--kadenz-cover-thumb-size, 7rem));
    height: var(--kadenz-cover-thumb-height, var(--kadenz-cover-thumb-size, 7rem));
    border-radius: 10px;
    border: 1px dashed var(--theme-border);
    background: color-mix(in srgb, var(--theme-surface) 85%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.kadenz-cover-upload-preview {
    width: var(--kadenz-cover-thumb-width, var(--kadenz-cover-thumb-size, 7rem));
    height: var(--kadenz-cover-thumb-height, var(--kadenz-cover-thumb-size, 7rem));
    max-width: var(--kadenz-cover-thumb-width, var(--kadenz-cover-thumb-size, 7rem));
    max-height: var(--kadenz-cover-thumb-height, var(--kadenz-cover-thumb-size, 7rem));
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}
.kadenz-blueprint-cover-upload .kadenz-cover-upload-frame {
    border-radius: 8px;
}
/* No preview yet: frame is omitted from layout until an image exists (:not(:empty)). */
.kadenz-cover-upload-frame--lazy:empty {
    display: none;
}
.kadenz-cover-upload--stacked.kadenz-cover-upload--no-preview .kadenz-cover-upload-inner {
    gap: 0.25rem;
}
.kadenz-cover-upload--inline .kadenz-cover-upload-controls {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.kadenz-cover-upload-hint {
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--theme-muted);
    margin: 0.15rem 0 0;
}
.kadenz-cover-upload-input {
    width: 100%;
    font-size: 0.85rem;
}
/* Styled file picker (native input hidden — label + button face) */
.kadenz-file-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    max-width: 100%;
    cursor: pointer;
}
.kadenz-file-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.kadenz-file-picker-face {
    pointer-events: none;
}
.kadenz-file-picker-name {
    font-size: 0.78rem;
    color: var(--theme-muted);
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kadenz-file-picker-name[hidden] {
    display: none;
}
.kadenz-file-picker:focus-within .kadenz-file-picker-face {
    outline: 2px solid color-mix(in srgb, var(--theme-accent) 55%, transparent);
    outline-offset: 2px;
}
/* Album cards with cover art */
.kadenz-album-card-media {
    margin: -1.25rem -1.25rem 0.75rem;
    border-radius: var(--theme-radius) var(--theme-radius) 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: color-mix(in srgb, var(--theme-border) 40%, transparent);
}
.kadenz-album-card-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}
/* Album detail: settings strip */
.kadenz-album-settings-form {
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
}
.kadenz-album-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
@media (min-width: 720px) {
    .kadenz-album-settings-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem 1rem;
        align-items: start;
    }
    .kadenz-album-settings-grid > .kadenz-form-field:nth-child(1) {
        grid-column: 1;
    }
    .kadenz-album-settings-grid > .kadenz-form-field:nth-child(2) {
        grid-column: 2;
    }
}
.kadenz-album-settings-bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 720px) {
    .kadenz-album-settings-bottom {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 9.75rem minmax(0, 1fr) auto;
        gap: 1.15rem 1.25rem;
        align-items: flex-start;
    }
    .kadenz-album-settings-mood-head {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem 0.65rem;
    }
    .kadenz-album-settings-mood-head .kadenz-select {
        flex: 1 1 min(100%, 14rem);
        min-width: 0;
        width: auto;
    }
    .kadenz-album-settings-actions {
        align-self: end;
        padding-bottom: 0.15rem;
    }
}
@media (max-width: 719px) {
    .kadenz-album-settings-mood-head {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }
    .kadenz-album-settings-actions .kadenz-btn {
        width: 100%;
    }
}
/* Track list thumbnails */
.kadenz-track-thumb {
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--theme-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.kadenz-track-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}
.kadenz-blueprint-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 980px) { .kadenz-blueprint-grid { grid-template-columns: 1fr; } }
.kadenz-panel {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    padding: 1.25rem;
    box-shadow: var(--theme-shadow);
    position: relative;
    overflow: hidden;
}
/* Same surface treatment as .kadenz-panel, but no padding (caller supplies spacing).
   Header chrome (::before glow) only when a title/header is present — see card header rules above. */
.kadenz-surface-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    position: relative;
    overflow: hidden;
}
.kadenz-surface-card--compact {
    box-shadow: var(--theme-shadow);
}
.kadenz-section-title--inline {
    margin-bottom: 0.35rem;
}
.kadenz-ai-usage-unlimited--with-history .kadenz-ai-usage-unlimited-summary {
    margin-bottom: 0.25rem;
}
.kadenz-ai-usage-sparkline-wrap {
    max-width: 22rem;
}
.kadenz-ai-usage-sparkline {
    display: block;
    width: 100%;
    height: auto;
    max-height: 3rem;
    border-radius: var(--theme-radius);
    background: var(--theme-surface-strong);
    border: 1px solid var(--theme-border);
}
.kadenz-mt-xs { margin-top: 0.25rem; }
.kadenz-mt-md { margin-top: 1rem; }
.kadenz-panel-sections, .kadenz-blueprint-dual, .kadenz-panel-theory { grid-column: 1 / -1; }
/* Two columns: chord progressions + motifs (stacks on narrow viewports) */
.kadenz-blueprint-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) {
    .kadenz-blueprint-dual { grid-template-columns: 1fr; }
}
.kadenz-blueprint-dual .kadenz-panel-progressions,
.kadenz-blueprint-dual .kadenz-panel-motifs { grid-column: auto; }
@media (min-width: 980px) {
    .kadenz-panel-sections { grid-column: 1 / 2; grid-row: span 2; }
    .kadenz-panel-push { grid-column: 2 / 3; }
    .kadenz-panel-synth { grid-column: 2 / 3; }
    .kadenz-panel-theory { grid-column: 1 / -1; }
}
.kadenz-panel-title {
    font-family: var(--theme-font-display); font-weight: 600; font-size: 1rem;
    margin-bottom: 1rem; display: flex; align-items: baseline; gap: 0.5rem;
    position: relative;
    z-index: 1;
    background: color-mix(in srgb, var(--theme-bg) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 20%, var(--theme-border));
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-bg) 70%, transparent);
}
/* Plain surface: border + shadow only — no header band (album/title row, form strips, etc.) */
.kadenz-surface-card--plain::before,
.kadenz-surface-card--plain::after {
    content: none;
    display: none;
}
.kadenz-panel-hint { color: var(--theme-muted); font-size: 0.8rem; font-weight: 400; }
/* Section cards */
.kadenz-sections-list { display: flex; flex-direction: column; gap: 0.75rem; }
.kadenz-section-card {
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 1rem;
    background: color-mix(in srgb, var(--theme-surface) 70%, transparent);
}
.kadenz-section-card .kadenz-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.kadenz-section-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.kadenz-section-card h3 {
    font-family: var(--theme-font-display); font-weight: 600; font-size: 0.95rem;
    flex: 1;
}
.kadenz-chord-row { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.kadenz-chord-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.kadenz-chord-alt-select {
    max-width: 9rem;
    padding: 0.22rem 0.4rem;
    font-size: 0.78rem;
    border-radius: 8px;
}
.kadenz-chord-btn {
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    background: var(--theme-surface-strong);
    border: 1px solid var(--theme-border);
    color: var(--theme-fg);
    font-family: var(--theme-font-display);
    font-weight: 600;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease;
}
.kadenz-chord-btn:hover { background: var(--theme-accent); color: #0a0d14; }
.kadenz-chord-btn.is-firing { background: var(--theme-accent-2); color: #0a0d14; transform: scale(1.05); }
.kadenz-section-groove {
    margin: 0.35rem 0 0.65rem;
    border-top: 1px dashed var(--theme-border);
    padding-top: 0.35rem;
}
.kadenz-section-groove > summary {
    cursor: pointer;
    color: var(--theme-muted);
    font-size: 0.8rem;
}
.kadenz-section-groove-panel {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 0.45rem;
}
.kadenz-arrangement-notes { color: var(--theme-muted); font-size: 0.9rem; line-height: 1.5; }
.kadenz-section-alts {
    margin: 0.2rem 0 0.8rem;
    padding: 0.65rem;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--theme-surface-strong) 60%, transparent);
}
.kadenz-section-alts-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.kadenz-section-alts-label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-muted);
}
.kadenz-section-alts-hint {
    font-size: 0.74rem;
    color: var(--theme-muted);
    opacity: 0.85;
}
.kadenz-section-alt-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.kadenz-section-alt-btn {
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-fg);
    border-radius: 8px;
    padding: 0.25rem 0.55rem;
    font-family: var(--theme-font-body);
    font-size: 0.78rem;
    cursor: pointer;
}
.kadenz-section-alt-btn:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-border));
}
.kadenz-section-alt-btn.is-selected {
    background: color-mix(in srgb, var(--theme-accent) 24%, var(--theme-surface-strong));
    border-color: color-mix(in srgb, var(--theme-accent) 70%, var(--theme-border));
}
.kadenz-layer-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.75rem; }
.kadenz-tag { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; background: var(--theme-surface-strong); color: var(--theme-muted); border: 1px solid var(--theme-border); }
/* Push grid */
.kadenz-push-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
.kadenz-push-header .kadenz-panel-title { margin-bottom: 0; }
.kadenz-push-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
}
.kadenz-push-scale-label {
    font-size: 0.8rem;
    color: var(--theme-muted);
    font-family: var(--theme-font-mono, monospace);
}
.kadenz-push-patch-label { font-size: 0.75rem; }
.kadenz-push-patch-select {
    min-width: 9rem;
    max-width: 14rem;
    font-size: 0.8rem;
}
.kadenz-push-grid {
    display: grid;
    grid-template-columns: repeat(var(--pad-cols, 8), 1fr);
    gap: 4px;
    aspect-ratio: 1 / 1;
    max-width: 420px;
    margin: 0 auto;
}
.kadenz-pad {
    aspect-ratio: 1/1;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface-strong);
    color: var(--theme-muted);
    font-family: var(--theme-font-display);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.kadenz-pad:hover { background: color-mix(in srgb, var(--theme-accent) 40%, var(--theme-surface-strong)); color: var(--theme-fg); }
.kadenz-pad.is-tonic { background: color-mix(in srgb, var(--theme-accent) 30%, var(--theme-surface-strong)); color: var(--theme-fg); }
.kadenz-pad.is-chord-tone { color: var(--theme-fg); }
.kadenz-pad.is-firing { background: var(--theme-accent); color: #0a0d14; transform: scale(0.95); box-shadow: 0 0 20px color-mix(in srgb, var(--theme-accent) 70%, transparent); }
.kadenz-waveform-wrap { position: relative; margin-top: 1rem; }
.kadenz-waveform { width: 100%; height: 80px; display: block; color: var(--theme-accent); }
.kadenz-stop-audio-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
}
/* Play live — Web MIDI + keyboard (see kadenz-perf-input.js) */
.kadenz-perf-input {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--theme-radius);
    border: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--theme-surface) 80%, var(--theme-bg));
}
.kadenz-perf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
}
.kadenz-perf-title {
    font-family: var(--theme-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0;
    color: var(--theme-fg);
}
.kadenz-perf-hint {
    margin: 0;
    flex: 1 1 12rem;
    font-size: 0.8rem;
    color: var(--theme-muted);
    line-height: 1.4;
}
.kadenz-perf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.65rem 1rem;
    align-items: end;
}
.kadenz-perf-knob {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--theme-muted);
}
.kadenz-perf-knob-wide {
    grid-column: 1 / -1;
}
.kadenz-perf-lab { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.kadenz-perf-status { font-size: 0.78rem; color: var(--theme-muted); margin: 0.6rem 0 0; line-height: 1.4; }
.kadenz-perf-keys-help {
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--theme-border);
}
.kadenz-perf-keys-help h4 {
    font-family: var(--theme-font-display);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: var(--theme-fg);
}
.kadenz-perf-diag { margin: 0; font-size: 0.75rem; color: var(--theme-muted); line-height: 1.45; }
.kadenz-perf-diag code { font-size: 0.72rem; }
/* Synth */
.kadenz-synth-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    margin-bottom: 0.85rem;
}
.kadenz-synth-patch-picker {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 10rem;
    min-width: 0;
    max-width: 100%;
}
.kadenz-synth-toolbar-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: var(--theme-muted);
}
.kadenz-synth-patch-picker .kadenz-synth-toolbar-icon {
    color: var(--theme-secondary);
}
.kadenz-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem;
    min-width: 2rem;
    min-height: 2rem;
    line-height: 0;
}
.kadenz-btn-icon.is-success .kadenz-synth-toolbar-icon {
    color: var(--theme-accent);
}
.kadenz-btn-icon:disabled {
    opacity: 0.45;
    pointer-events: none;
}
.kadenz-synth-toolbar-select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
}
.kadenz-synth-sample-label {
    flex: 1 1 8rem;
    min-width: 0;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kadenz-synth-controls { display: grid; gap: 0.75rem; }
.kadenz-knob { display: grid; grid-template-columns: 120px 1fr 60px; align-items: center; gap: 0.75rem; }
.kadenz-knob-label { color: var(--theme-muted); font-size: 0.8rem; }
.kadenz-knob-value { color: var(--theme-fg); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85rem; text-align: right; }
.kadenz-knob input[type=range] { accent-color: var(--theme-secondary); }
/* Match global form controls (native selects ignore parent text color on some OS themes). */
.kadenz-knob select,
.kadenz-knob select.kadenz-select,
.kadenz-knob select.kadenz-input {
    width: 100%;
    max-width: 100%;
    background: var(--theme-dropdown-fill);
    background-color: var(--theme-dropdown-fill);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--theme-fg);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    padding: 0.45rem 0.65rem;
    font-family: var(--theme-font-body);
    font-size: 0.88rem;
    color-scheme: dark;
}
.kadenz-knob select option,
.kadenz-knob select optgroup {
    background: var(--theme-bg);
    color: var(--theme-fg);
}
.kadenz-synth-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}
.kadenz-synth-presets .kadenz-select,
.kadenz-synth-toolbar .kadenz-select {
    max-width: 14rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
}
/* Progressions / motifs / theory */
.kadenz-prog, .kadenz-motif { padding: 0.75rem 0; border-bottom: 1px dashed var(--theme-border); }
.kadenz-prog h4, .kadenz-motif h4 { font-family: var(--theme-font-display); font-weight: 600; margin-bottom: 0.4rem; }
.kadenz-prog-row { font-size: 0.9rem; color: var(--theme-fg); margin: 0.15rem 0; }
.kadenz-prog-row strong { color: var(--theme-muted); font-weight: 500; }
details { margin: 0.5rem 0; padding: 0.5rem 0; border-top: 1px solid var(--theme-border); }
details summary { cursor: pointer; color: var(--theme-accent); font-family: var(--theme-font-display); padding: 0.25rem 0; }
details[open] summary { margin-bottom: 0.5rem; }
details p { margin: 0.5rem 0; color: var(--theme-fg); line-height: 1.6; }
/* Push: collapsible “Play live” — wins over generic `details` above */
.kadenz-panel-push .kadenz-midi-fold {
    margin: 0.75rem 0 0;
    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: color-mix(in srgb, var(--theme-surface) 65%, var(--theme-bg));
    overflow: hidden;
}
.kadenz-panel-push .kadenz-midi-fold > summary {
    list-style: none;
    color: var(--theme-fg);
    padding: 0.65rem 0.9rem;
    border: 0;
    border-bottom: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    font-family: var(--theme-font-display);
    cursor: pointer;
}
.kadenz-panel-push .kadenz-midi-fold > summary::-webkit-details-marker { display: none; }
.kadenz-midi-fold-title { font-weight: 600; font-size: 0.9rem; }
.kadenz-midi-fold-hint { font-size: 0.72rem; color: var(--theme-muted); font-weight: 400; }
.kadenz-panel-push .kadenz-midi-fold[open] > summary {
    color: var(--theme-accent);
    border-bottom-color: var(--theme-border);
}
.kadenz-panel-push .kadenz-midi-fold .kadenz-perf-input {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.kadenz-energy-svg { width: 100%; max-height: 120px; color: var(--theme-accent); }
/* Albums */
.kadenz-tracklist { list-style: none; padding: 0; margin: 0; }
.kadenz-tracklist li {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    gap: 0.75rem 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--theme-border);
    align-items: center;
}
.kadenz-tracklist li.has-track-thumb {
    grid-template-columns: 3rem 3rem 1fr auto;
}
.kadenz-track-index { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--theme-muted); }
.kadenz-track-title { color: var(--theme-fg); text-decoration: none; font-family: var(--theme-font-display); font-weight: 600; }
.kadenz-track-title:hover { color: var(--theme-accent); }
.kadenz-track-meta { color: var(--theme-muted); font-size: 0.85rem; }
/* Pricing */
.kadenz-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.kadenz-price-card { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: var(--theme-radius); padding: 1.5rem; }
.kadenz-price-card h3 { font-family: var(--theme-font-display); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; }
/* Legacy .kadenz-price hook — pricing uses .kadenz-plan-price-display */
.kadenz-price-card .kadenz-plan-price-display { margin-bottom: 1rem; }
.kadenz-price-card ul { list-style: none; padding: 0; margin-bottom: 1.25rem; }
.kadenz-price-card li { padding: 0.35rem 0; color: var(--theme-fg); border-bottom: 1px dashed var(--theme-border); }
.kadenz-price-card-featured { border-color: var(--theme-accent); box-shadow: 0 0 60px color-mix(in srgb, var(--theme-accent) 20%, transparent); }
/* Plan feature bullets — shared: welcome pricing, account tiles, billing */
.kadenz-plan-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    line-height: 1.45;
}
.kadenz-plan-feature-list li {
    padding: 0.4rem 0;
    color: var(--theme-fg);
    border-bottom: 1px dashed var(--theme-border);
}
.kadenz-plan-feature-list li:last-child { border-bottom: none; }
.kadenz-plan-feature-list li.is-muted { color: var(--theme-muted); font-size: 0.95em; }
.kadenz-plan-feature-inline {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--theme-muted);
}
.kadenz-account-plan-tagline .kadenz-plan-feature-inline { color: var(--theme-muted); }
.kadenz-plan-tile-features .kadenz-plan-feature-list {
    margin-bottom: 0.65rem;
    font-size: 0.82rem;
}
.kadenz-plan-tile-features .kadenz-plan-feature-list li { padding: 0.32rem 0; }
/* Account — plan & subscription (compact) ----------------------------- */
.kadenz-account-plan-wrap { margin-bottom: 2rem; }
.kadenz-account-plan-flash { margin-bottom: 1rem; }
.kadenz-account-plan-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--theme-radius);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface)) 0%, var(--theme-surface) 100%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.kadenz-account-plan-kicker {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    color: var(--theme-muted);
    margin: 0 0 0.35rem;
    font-weight: 600;
}
.kadenz-account-plan-name {
    font-family: var(--theme-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--theme-fg);
    letter-spacing: -0.02em;
}
.kadenz-account-plan-tagline {
    margin: 0;
    font-size: 0.88rem;
    color: var(--theme-muted);
    line-height: 1.4;
    max-width: 36rem;
}
.kadenz-account-plan-hero-meta { flex: 0 0 auto; align-self: center; }
.kadenz-account-plan-pill {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent) 25%, transparent);
    color: var(--theme-accent);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 40%, transparent);
}
.kadenz-account-plan-compare-title { margin: 0 0 0.5rem; }
.kadenz-account-plan-compare-hint { margin: 0 0 1.25rem; max-width: 40rem; font-size: 0.9rem; line-height: 1.45; }
.kadenz-plan-tiles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
    gap: 0.9rem;
}
.kadenz-plan-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 1rem 1rem 0.9rem;
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kadenz-plan-tile.is-featured { border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-border)); }
.kadenz-plan-tile.is-current {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 50%, transparent), 0 6px 28px rgba(0, 0, 0, 0.18);
}
.kadenz-plan-tile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.kadenz-plan-tile-name { margin: 0; font-size: 1.05rem; font-family: var(--theme-font-display); font-weight: 700; }
.kadenz-plan-price-display {
    margin: 0.15rem 0 0;
    font-family: var(--theme-font-display);
}
.kadenz-plan-price-display.is-hero { margin-bottom: 0.25rem; }
.kadenz-plan-price-display.is-tile { margin: 0.15rem 0 0; }
.kadenz-plan-price-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.35rem;
    line-height: 1.1;
}
.kadenz-plan-price-display.is-hero .kadenz-plan-price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--theme-fg);
}
.kadenz-plan-price-display.is-tile .kadenz-plan-price-amount {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--theme-fg);
}
.kadenz-plan-price-suffix {
    font-size: 0.75rem;
    color: var(--theme-muted);
    font-weight: 500;
}
.kadenz-plan-price-display.is-hero .kadenz-plan-price-suffix {
    font-size: 1rem;
}
.kadenz-plan-price-was {
    text-decoration: line-through;
    color: var(--theme-muted);
    font-weight: 500;
}
.kadenz-plan-price-display.is-hero .kadenz-plan-price-was {
    font-size: 1.35rem;
}
.kadenz-plan-price-display.is-tile .kadenz-plan-price-was {
    font-size: 0.95rem;
}
.kadenz-plan-price-was.is-sm {
    font-size: 0.88em;
    margin-right: 0.25rem;
}
.kadenz-plan-price-save {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-accent);
}
.kadenz-plan-price-yearly {
    margin: 0.45rem 0 0;
    font-size: 0.88rem;
    color: var(--theme-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.35rem;
}
.kadenz-plan-price-yearly-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent) 18%, transparent);
    color: var(--theme-accent);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, transparent);
}
.kadenz-plan-price-trial,
.kadenz-plan-trial-line {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-accent);
}
.kadenz-plan-price-save-inline { color: #7ee7be; }
.kadenz-plan-tile-pill {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    color: var(--theme-muted);
    background: var(--theme-surface-strong);
    border: 1px solid var(--theme-border);
    white-space: nowrap;
}
.kadenz-plan-tile-pill.is-accent { color: var(--theme-accent); border-color: color-mix(in srgb, var(--theme-accent) 50%, var(--theme-border)); }
.kadenz-plan-tile-line { margin: 0 0 0.35rem; font-size: 0.78rem; line-height: 1.4; color: var(--theme-fg); opacity: 0.9; }
.kadenz-plan-tile-desc { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--theme-muted); line-height: 1.35; }
.kadenz-plan-tile-foot { margin-top: auto; padding-top: 0.75rem; }
.kadenz-plan-coupon { margin-bottom: 0.6rem; font-size: 0.8rem; color: var(--theme-muted); }
.kadenz-plan-coupon > summary { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; list-style: none; color: var(--theme-accent); }
.kadenz-plan-coupon > summary::-webkit-details-marker { display: none; }
.kadenz-plan-coupon-body { margin-top: 0.4rem; }
.kadenz-plan-coupon-row { display: flex; gap: 0.35rem; align-items: center; }
.kadenz-plan-coupon-row .kadenz-input { padding: 0.45rem 0.6rem; font-size: 0.85rem; }
.kadenz-coupon-banner {
    font-size: 0.88rem;
    color: var(--theme-accent);
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface));
    border: 1px solid color-mix(in srgb, var(--theme-accent) 28%, var(--theme-border));
}
.kadenz-coupon-banner strong { color: var(--theme-fg); }
.kadenz-account-stripe-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--theme-border); }
/* Marketing homepage ------------------------------------------------ */
.kadenz-marketing { overflow-x: hidden; }
.kadenz-marketing-nav {
    position: sticky;
    top: 0;
    z-index: 5000;
    padding: 0.85rem 1.25rem;
    background: color-mix(in srgb, var(--theme-bg) 92%, black);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--theme-border);
}
.kadenz-marketing-nav-bar {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.kadenz-marketing-nav .kadenz-nav-wordmark {
    height: 2rem;
    width: auto;
}
.kadenz-marketing-links {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.kadenz-marketing-links a {
    color: var(--theme-muted);
    text-decoration: none;
    white-space: nowrap;
}
.kadenz-marketing-links a:hover { color: var(--theme-fg); }
.kadenz-marketing-links .kadenz-btn-primary { color: #0a0d14; }
.kadenz-marketing-nav-toggle {
    display: none;
}
.kadenz-marketing-mobile-panel {
    display: none;
    max-width: 72rem;
    margin: 0.55rem auto 0;
    padding: 0 0.25rem;
}
.kadenz-marketing-nav.is-open .kadenz-marketing-mobile-panel {
    display: block;
}
.kadenz-marketing-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--theme-border);
    background: var(--theme-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.kadenz-marketing-mobile-links a {
    display: block;
    padding: 0.55rem 0.45rem;
    color: var(--theme-muted);
    text-decoration: none;
    font-weight: 500;
    border-radius: 6px;
    border-left: 3px solid transparent;
}
.kadenz-marketing-mobile-links a:hover {
    color: var(--theme-fg);
    background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-bg));
    border-left-color: var(--theme-accent);
}
.kadenz-marketing-mobile-links .kadenz-btn {
    margin-top: 0.35rem;
    justify-content: center;
    text-align: center;
}
.kadenz-marketing-mobile-links .kadenz-btn-primary {
    color: #0a0d14;
}
@media (max-width: 1024px) {
    .kadenz-marketing-links-desktop {
        display: none !important;
    }

    .kadenz-marketing-nav-toggle {
        display: inline-flex !important;
    }
}
.kadenz-hero {
    position: relative;
    min-height: clamp(22rem, 72vh, 36rem);
    padding: clamp(3rem, 8vw, 5rem) 1.5rem clamp(4rem, 10vw, 6rem);
    max-width: 72rem;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.kadenz-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 44rem;
    padding: 1.2rem 1.3rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--theme-bg) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 25%, var(--theme-border));
    backdrop-filter: blur(6px);
}
.kadenz-hero-text-scrim {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(64rem, 86%);
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 36%, color-mix(in srgb, black 52%, transparent), transparent 62%),
        linear-gradient(90deg, color-mix(in srgb, black 46%, transparent) 0%, color-mix(in srgb, black 18%, transparent) 54%, transparent 100%);
}
.kadenz-hero-title { font-family: var(--theme-font-display); font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 1rem; }
.kadenz-hero-accent { color: var(--theme-accent); display: block; margin-top: 0.35rem; font-size: 0.92em; }
.kadenz-hero-sub { font-size: 1.12rem; color: var(--theme-muted); line-height: 1.58; max-width: 38rem; margin-bottom: 2rem; }
.kadenz-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.kadenz-hero-footnote { margin-top: 1.25rem; font-size: 0.88rem; color: var(--theme-muted); line-height: 1.45; max-width: 32rem; }
.kadenz-hero-footnote a { color: var(--theme-accent); text-decoration: none; font-weight: 600; }
.kadenz-hero-footnote a:hover { text-decoration: underline; }
.kadenz-hero-examples { margin-top: 2.75rem; }
.kadenz-example-label { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; color: var(--theme-muted); margin-bottom: 0.5rem; }
.kadenz-hero-examples ul { list-style: none; padding: 0; }
.kadenz-hero-examples li { font-family: var(--theme-font-display); color: var(--theme-fg); padding: 0.25rem 0; opacity: 0.8; }
.kadenz-hero-backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 90% 70% at 70% 30%, color-mix(in srgb, var(--theme-accent) 45%, transparent) 0%, transparent 55%),
                radial-gradient(ellipse 80% 60% at 15% 85%, color-mix(in srgb, var(--theme-accent-2) 40%, transparent) 0%, transparent 50%),
                radial-gradient(circle at 50% 100%, var(--theme-bg) 0%, transparent 45%);
    opacity: 0.35; filter: blur(50px); z-index: 0;
}
.kadenz-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--theme-accent) 22%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--theme-accent-2) 18%, transparent) 1px, transparent 1px);
    background-size: 44px 44px, 44px 44px;
    opacity: 0.22;
    mask-image: linear-gradient(to bottom, black 10%, black 55%, transparent 95%);
    -webkit-mask-image: linear-gradient(to bottom, black 10%, black 55%, transparent 95%);
}
/* JS-driven layered wave + level animation. */
.kadenz-hero-anim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 92%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 92%);
}
.kadenz-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.9;
}
.kadenz-hero-levels {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    height: 36%;
    display: flex;
    align-items: flex-end;
    gap: clamp(2px, 0.28vw, 5px);
    padding: 0 clamp(0.6rem, 3vw, 2rem);
}
.kadenz-hero-level {
    flex: 1 1 0;
    border-radius: 4px 4px 0 0;
    min-height: 8px;
    height: calc(var(--level, 0.24) * 100%);
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--theme-accent-2) 35%, transparent),
        color-mix(in srgb, var(--theme-accent) 75%, white)
    );
    box-shadow: 0 0 16px color-mix(in srgb, var(--theme-accent) 20%, transparent);
    opacity: calc(0.35 + var(--level, 0.24) * 0.7);
}
@media (prefers-reduced-motion: reduce) {
    .kadenz-hero-level { transition: none; }
}
.kadenz-features, .kadenz-pricing, .kadenz-manifesto, .kadenz-how, .kadenz-product-showcase {
    max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem;
}
.kadenz-band {
    position: relative;
    isolation: isolate;
}
.kadenz-band::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    border-top: 1px solid color-mix(in srgb, var(--theme-border) 70%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 70%, transparent);
}
.kadenz-band-quiet::before {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 4%, transparent), transparent 40%),
        color-mix(in srgb, var(--theme-bg) 88%, black);
}
.kadenz-band-soft::before {
    background:
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 44%),
        radial-gradient(circle at 16% 80%, color-mix(in srgb, var(--theme-accent-2) 14%, transparent), transparent 48%),
        color-mix(in srgb, var(--theme-surface) 86%, var(--theme-bg));
}
.kadenz-marketing-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.5rem 1.45rem;
    background: linear-gradient(160deg, color-mix(in srgb, var(--theme-surface) 95%, transparent), color-mix(in srgb, var(--theme-bg) 78%, var(--theme-surface)));
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
}
.kadenz-marketing-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background: linear-gradient(to bottom, var(--theme-accent), var(--theme-accent-2));
    opacity: 0.85;
}
.kadenz-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    margin-bottom: 0.65rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--theme-accent);
}
.kadenz-card-icon-svg {
    width: 1.95rem;
    height: 1.95rem;
    display: block;
    flex-shrink: 0;
    color: inherit;
}
.kadenz-manifesto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; margin-top: 2rem; }
.kadenz-manifesto-grid h3 { font-family: var(--theme-font-display); font-weight: 700; margin-bottom: 0.75rem; color: var(--theme-accent); font-size: 1.1rem; }
.kadenz-manifesto-grid p { color: var(--theme-muted); line-height: 1.6; }
.kadenz-how-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; margin-top: 2rem; }
.kadenz-how-steps li { position: relative; }
.kadenz-step-number { font-family: var(--theme-font-display); font-size: 0.85rem; letter-spacing: 0.2em; color: var(--theme-accent); display: block; margin-bottom: 0.75rem; }
.kadenz-how-steps h3 { font-family: var(--theme-font-display); font-weight: 700; margin-bottom: 0.5rem; font-size: 1.15rem; }
.kadenz-how-steps p { color: var(--theme-muted); line-height: 1.55; }
.kadenz-price-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--theme-accent); color: var(--theme-bg); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.75rem; }
.kadenz-price-tagline { color: var(--theme-muted); margin-top: -0.5rem; margin-bottom: 1rem; line-height: 1.4; }
.kadenz-final-cta { max-width: 72rem; margin: 0 auto; padding: 4rem 1.5rem; }
.kadenz-final-cta-inner { background: var(--theme-surface); border: 1px solid var(--theme-accent); border-radius: var(--theme-radius); padding: 3rem 2rem; text-align: center; box-shadow: 0 0 80px color-mix(in srgb, var(--theme-accent) 15%, transparent); }
.kadenz-final-cta h2 { font-family: var(--theme-font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.kadenz-final-cta p { color: var(--theme-muted); margin-bottom: 1.5rem; }
.kadenz-section-head { margin-bottom: 2rem; }
.kadenz-section-head h2 { font-family: var(--theme-font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
.kadenz-section-head p { color: var(--theme-muted); margin-top: 0.5rem; }
.kadenz-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.kadenz-feature-card {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface);
}
.kadenz-feature-card::before {
    content: "";
    position: absolute;
    left: -54px;
    top: -34px;
    width: 120px;
    height: 120px;
    border-radius: 20px;
    transform: rotate(18deg);
    opacity: 0.22;
}
.kadenz-feature-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.45rem;
}
.kadenz-feature-head .kadenz-card-icon { margin-bottom: 0; }
.kadenz-feature-grid h3 { font-family: var(--theme-font-display); font-weight: 600; margin: 0; color: var(--theme-fg); }
.kadenz-feature-grid p { color: var(--theme-muted); line-height: 1.5; }
.kadenz-feature-card-theory::before { background: linear-gradient(120deg, #67d2ff, #5b7bff); }
.kadenz-feature-card-audio::before { background: linear-gradient(120deg, #6ef4c4, #39b39f); }
.kadenz-feature-card-daw::before { background: linear-gradient(120deg, #f7c56c, #db8a31); }
.kadenz-feature-card-visual::before { background: linear-gradient(120deg, #d394ff, #6e7dff); }
.kadenz-product-hero-placeholder {
    min-height: clamp(14rem, 34vw, 24rem);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border));
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.25rem;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--theme-accent) 22%, transparent), color-mix(in srgb, var(--theme-accent-2) 20%, transparent)),
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--theme-surface-strong) 90%, transparent) 0 14px, color-mix(in srgb, var(--theme-surface) 88%, transparent) 14px 28px);
}
.kadenz-product-image {
    width: 100%;
    height: 100%;
    min-height: inherit;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}
.kadenz-product-overlay {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    max-width: 34rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--theme-bg) 72%, transparent);
    border: 1px solid var(--theme-border);
    backdrop-filter: blur(4px);
}
.kadenz-product-overlay h3 {
    font-family: var(--theme-font-display);
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}
.kadenz-product-overlay p { color: var(--theme-muted); margin-bottom: 0.35rem; }
.kadenz-product-overlay code,
.kadenz-product-shot code {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.77rem;
    color: color-mix(in srgb, var(--theme-accent) 80%, white);
}
.kadenz-product-reel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: stretch;
}
.kadenz-product-shot {
    min-height: 14rem;
    padding: 1rem;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-surface);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.kadenz-product-shot-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--theme-border) 80%, transparent);
    margin-bottom: 0.75rem;
    background: color-mix(in srgb, var(--theme-surface-strong) 85%, transparent);
}
.kadenz-product-shot h3 {
    margin-top: 0.7rem;
    margin-bottom: 0.35rem;
    font-family: var(--theme-font-display);
    font-size: 1.05rem;
}
.kadenz-product-shot p { color: var(--theme-muted); font-size: 0.92rem; }
.kadenz-product-shot-one { background: linear-gradient(170deg, color-mix(in srgb, #68b5ff 12%, var(--theme-surface)), var(--theme-surface)); }
.kadenz-product-shot-two { background: linear-gradient(170deg, color-mix(in srgb, #55d6b5 12%, var(--theme-surface)), var(--theme-surface)); }
.kadenz-product-shot-three { background: linear-gradient(170deg, color-mix(in srgb, #c88eff 12%, var(--theme-surface)), var(--theme-surface)); }
@media (max-width: 900px) {
    .kadenz-product-reel {
        grid-template-columns: 1fr;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .kadenz-product-shot { scroll-snap-align: start; }
}
.kadenz-footer { max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; color: var(--theme-muted); font-size: 0.9rem; text-align: center; border-top: 1px solid var(--theme-border); }
/* Guest (auth) shell ------------------------------------------------ */
.kadenz-guest-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: 2rem; }
.kadenz-guest-brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--theme-fg); text-decoration: none; }
.kadenz-guest-brand .kadenz-wordmark { display: block; }
.kadenz-guest-card { width: 100%; max-width: 28rem; background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: var(--theme-radius); padding: 2rem; box-shadow: var(--theme-shadow); }
/* Form controls — theme-aware (works on dark surfaces; no @tailwindcss/forms) */
.kadenz-form-label { color: var(--theme-muted); }
.kadenz-form-input {
    background: var(--theme-surface-strong);
    background-color: var(--theme-surface-strong);
    border: 1px solid var(--theme-border);
    color: var(--theme-fg);
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color-scheme: dark;
}
.kadenz-form-input::-moz-placeholder { color: var(--theme-muted); opacity: 0.85; }
.kadenz-form-input::placeholder { color: var(--theme-muted); opacity: 0.85; }
.kadenz-form-input:focus {
    outline: none;
    background: var(--theme-surface-strong) !important;
    background-color: var(--theme-surface-strong) !important;
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 55%, transparent);
}
.kadenz-form-input:disabled { opacity: 0.5; cursor: not-allowed; }
.kadenz-form-input:-webkit-autofill,
.kadenz-form-input:-webkit-autofill:hover,
.kadenz-form-input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--theme-surface-strong) inset !important;
    background-color: var(--theme-surface-strong) !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--theme-fg) !important;
    color: var(--theme-fg) !important;
    caret-color: var(--theme-fg) !important;
    -webkit-transition: background-color 9999s ease-out 0s;
    transition: background-color 9999s ease-out 0s;
}
.kadenz-form-input:-webkit-autofill, .kadenz-form-input:-webkit-autofill:hover, .kadenz-form-input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--theme-surface-strong) inset !important;
    -webkit-text-fill-color: var(--theme-fg) !important;
    color: var(--theme-fg) !important;
    caret-color: var(--theme-fg) !important;
}
.kadenz-form-input:autofill,
.kadenz-form-input:autofill:hover,
.kadenz-form-input:autofill:focus {
    box-shadow: 0 0 0 1000px var(--theme-surface-strong) inset !important;
    -webkit-text-fill-color: var(--theme-fg) !important;
    color: var(--theme-fg) !important;
    caret-color: var(--theme-fg) !important;
}
input.kadenz-input:-webkit-autofill,
input.kadenz-input:-webkit-autofill:hover,
input.kadenz-input:-webkit-autofill:focus,
textarea.kadenz-input:-webkit-autofill,
textarea.kadenz-input:-webkit-autofill:hover,
textarea.kadenz-input:-webkit-autofill:focus,
.kadenz-textarea:-webkit-autofill,
.kadenz-textarea:-webkit-autofill:hover,
.kadenz-textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset;
    -webkit-text-fill-color: var(--theme-fg);
    caret-color: var(--theme-fg);
    -webkit-transition: background-color 9999s ease-out 0s;
    transition: background-color 9999s ease-out 0s;
}
.kadenz-select:-webkit-autofill,
.kadenz-select:-webkit-autofill:hover,
.kadenz-select:-webkit-autofill:focus,
select.kadenz-input:-webkit-autofill,
select.kadenz-input:-webkit-autofill:hover,
select.kadenz-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-dropdown-fill) inset;
    -webkit-text-fill-color: var(--theme-fg);
    caret-color: var(--theme-fg);
    -webkit-transition: background-color 9999s ease-out 0s;
    transition: background-color 9999s ease-out 0s;
}
input.kadenz-input:-webkit-autofill, input.kadenz-input:-webkit-autofill:hover, input.kadenz-input:-webkit-autofill:focus, textarea.kadenz-input:-webkit-autofill, textarea.kadenz-input:-webkit-autofill:hover, textarea.kadenz-input:-webkit-autofill:focus, .kadenz-textarea:-webkit-autofill, .kadenz-textarea:-webkit-autofill:hover, .kadenz-textarea:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    background-color: var(--theme-surface) !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--theme-fg) !important;
    color: var(--theme-fg) !important;
    caret-color: var(--theme-fg) !important;
}
input.kadenz-input:autofill,
input.kadenz-input:autofill:hover,
input.kadenz-input:autofill:focus,
textarea.kadenz-input:autofill,
textarea.kadenz-input:autofill:hover,
textarea.kadenz-input:autofill:focus,
.kadenz-textarea:autofill,
.kadenz-textarea:autofill:hover,
.kadenz-textarea:autofill:focus {
    box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    background-color: var(--theme-surface) !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--theme-fg) !important;
    color: var(--theme-fg) !important;
    caret-color: var(--theme-fg) !important;
}
.kadenz-select:-webkit-autofill, .kadenz-select:-webkit-autofill:hover, .kadenz-select:-webkit-autofill:focus, select.kadenz-input:-webkit-autofill, select.kadenz-input:-webkit-autofill:hover, select.kadenz-input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--theme-dropdown-fill) inset !important;
    background-color: var(--theme-dropdown-fill) !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--theme-fg) !important;
    color: var(--theme-fg) !important;
    caret-color: var(--theme-fg) !important;
}
.kadenz-select:autofill,
.kadenz-select:autofill:hover,
.kadenz-select:autofill:focus,
select.kadenz-input:autofill,
select.kadenz-input:autofill:hover,
select.kadenz-input:autofill:focus {
    box-shadow: 0 0 0 1000px var(--theme-dropdown-fill) inset !important;
    background-color: var(--theme-dropdown-fill) !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--theme-fg) !important;
    color: var(--theme-fg) !important;
    caret-color: var(--theme-fg) !important;
}
.kadenz-form-error { color: #f87171; }
.kadenz-form-success { color: #34d399; }
.kadenz-guest-muted { color: var(--theme-muted); font-size: 0.875rem; line-height: 1.5; }
.kadenz-fg { color: var(--theme-fg); }
.kadenz-guest-link {
    font-size: 0.875rem;
    text-decoration: underline;
    color: var(--theme-accent);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.kadenz-guest-link:hover { color: var(--theme-fg); }
.kadenz-form-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface-strong);
    accent-color: var(--theme-accent);
}
.kadenz-wordmark { flex-shrink: 0; }
/* =================================================================
   Admin console — sober, data-dense, kept visually distinct from
   the artist-facing app by leaning on the neutral surface tokens.
   ================================================================= */
.kadenz-admin-shell { max-width: 80rem; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.kadenz-admin-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.kadenz-admin-head h1 {
    font-family: var(--theme-font-display); font-size: 1.75rem; font-weight: 700;
    letter-spacing: -0.01em;
}
.kadenz-admin-head p { color: var(--theme-muted); margin-top: 0.25rem; font-size: 0.95rem; }
.kadenz-admin-tabs {
    display: flex; gap: 0.25rem; padding: 0.25rem;
    background: var(--theme-surface); border: 1px solid var(--theme-border);
    border-radius: 12px; margin-bottom: 2rem;
    flex-wrap: wrap;
}
.kadenz-admin-tab {
    padding: 0.5rem 0.9rem; border-radius: 8px;
    color: var(--theme-muted); text-decoration: none;
    font-family: var(--theme-font-display); font-weight: 500; font-size: 0.9rem;
}
.kadenz-admin-tab:hover { color: var(--theme-fg); }
.kadenz-admin-tab.is-active { background: var(--theme-surface-strong); color: var(--theme-fg); }
.kadenz-stat-grid {
    display: grid; gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin-bottom: 2rem;
}
.kadenz-stat {
    background: var(--theme-surface); border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius); padding: 1rem 1.25rem;
}
.kadenz-stat-label { color: var(--theme-muted); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; }
.kadenz-stat-value { font-family: var(--theme-font-display); font-weight: 700; font-size: 1.75rem; margin-top: 0.25rem; }
.kadenz-stat-sub { color: var(--theme-muted); font-size: 0.8rem; margin-top: 0.2rem; }
.kadenz-admin-panel {
    background: var(--theme-surface); border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius); padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.kadenz-admin-panel h2 {
    font-family: var(--theme-font-display); font-size: 1.1rem; font-weight: 600;
    margin-bottom: 1rem;
}
/* Admin — plan: AI token economics visual */
.kadenz-admin-econ {
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.2rem;
    background: var(--theme-surface-strong);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
}
.kadenz-admin-econ .kadenz-section-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--theme-fg);
}
.kadenz-admin-econ-hint { font-size: 0.85rem; line-height: 1.5; color: var(--theme-muted); margin: 0 0 1rem; max-width: 48rem; }
.kadenz-admin-econ-hint code { font-size: 0.8em; }
.kadenz-admin-econ-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; }
.kadenz-admin-econ-row > div:first-child { flex: 1 1 12rem; min-width: 10rem; }
.kadenz-admin-econ-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.kadenz-admin-econ-sim { border-radius: 10px; padding: 0.9rem 1rem; border: 1px solid var(--theme-border); background: var(--theme-surface); }
.kadenz-admin-econ-sim.is-ok { border-color: color-mix(in srgb, #36d399 40%, var(--theme-border)); }
.kadenz-admin-econ-sim.is-warn { border-color: color-mix(in srgb, #f6c177 50%, var(--theme-border)); }
.kadenz-admin-econ-sim.is-danger { border-color: color-mix(in srgb, #ff5a5f 50%, var(--theme-border)); }
.kadenz-admin-econ-sim.is-open { border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-border)); }
.kadenz-admin-econ-sim-top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
}
@media (max-width: 640px) {
    .kadenz-admin-econ-sim-top { grid-template-columns: 1fr; }
}
.kadenz-admin-econ-k {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--theme-muted);
    margin: 0 0 0.2rem;
}
.kadenz-admin-econ-v { font-family: var(--theme-font-display); font-size: 1.05rem; font-weight: 600; margin: 0; line-height: 1.25; }
.kadenz-admin-econ-bar-wrap { position: relative; height: 8px; margin: 0.75rem 0 0.5rem; background: var(--theme-surface-strong); border-radius: 4px; overflow: hidden; }
.kadenz-admin-econ-bar-baseline { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--theme-border); z-index: 0; }
.kadenz-admin-econ-bar {
    position: relative;
    z-index: 1;
    height: 100%;
    background: linear-gradient(90deg, var(--theme-accent) 0%, color-mix(in srgb, var(--theme-accent) 70%, #fff) 100%);
    border-radius: 3px;
    min-width: 2px;
    transition: width 0.2s ease;
}
.kadenz-admin-econ-sim.is-warn .kadenz-admin-econ-bar { background: linear-gradient(90deg, #c98a1e, #f6c177); }
.kadenz-admin-econ-sim.is-danger .kadenz-admin-econ-bar { background: linear-gradient(90deg, #c42b30, #ff5a5f); }
.kadenz-admin-econ-foot { font-size: 0.8rem; color: var(--theme-muted); margin: 0.5rem 0 0; line-height: 1.45; }
.kadenz-table { width: 100%; border-collapse: collapse; }
.kadenz-table th, .kadenz-table td { text-align: left; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--theme-border); font-size: 0.9rem; }
.kadenz-table th { color: var(--theme-muted); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; }
.kadenz-table td.kadenz-num { font-family: "JetBrains Mono", ui-monospace, monospace; }
.kadenz-table tr:hover td { background: var(--theme-surface-strong); }
.kadenz-table .kadenz-row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; }
.kadenz-badge {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--theme-surface-strong); color: var(--theme-muted); border: 1px solid var(--theme-border);
}
.kadenz-badge-ok { background: color-mix(in srgb, #36d39950 60%, transparent); color: #7ee7be; border-color: transparent; }
.kadenz-badge-warn { background: color-mix(in srgb, #f6c17750 60%, transparent); color: #f6c177; border-color: transparent; }
.kadenz-badge-bad { background: color-mix(in srgb, #ff5a5f40 60%, transparent); color: #ff9aa0; border-color: transparent; }
.kadenz-badge-info { background: color-mix(in srgb, var(--theme-accent) 30%, transparent); color: var(--theme-accent); border-color: transparent; }
.kadenz-form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.kadenz-form-full { grid-column: 1 / -1; }
.kadenz-form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.kadenz-form-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; }
.kadenz-form-check input[type=checkbox] { accent-color: var(--theme-secondary); }
.kadenz-revenue-chart { display: flex; gap: 4px; align-items: flex-end; height: 140px; padding: 0.5rem 0; }
.kadenz-revenue-bar { flex: 1; background: var(--theme-surface-strong); border-radius: 6px 6px 0 0; position: relative; min-height: 2px; transition: background 200ms ease; }
.kadenz-revenue-bar:hover { background: var(--theme-accent); }
.kadenz-revenue-labels { display: flex; gap: 4px; font-size: 0.65rem; color: var(--theme-muted); margin-top: 0.5rem; }
.kadenz-revenue-labels span { flex: 1; text-align: center; }
.kadenz-nav-admin { color: var(--theme-accent) !important; }
/* =================================================================
   Arrangement visualiser — lanes of layer clips across sections.
   Colours come from --kadenz-cat-* CSS vars written by kadenz-colors.js.
   ================================================================= */
.kadenz-panel-arrangement { grid-column: 1 / -1; }
.kadenz-arr-viz {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--theme-font-display);
    font-size: 0.85rem;
}
.kadenz-arr-section-header,
.kadenz-arr-lane-label {
    color: var(--theme-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 0.4rem;
}
.kadenz-arr-section-header {
    justify-content: stretch;
    align-items: center;
    padding: 0.35rem 0.35rem;
    border-bottom: 1px dashed var(--theme-border);
    gap: 0.25rem;
    overflow: hidden;
}
.kadenz-arr-section-header span {
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.kadenz-arr-lane {
    display: grid;
    grid-template-columns: 12.5rem 1fr;
    gap: 0.5rem;
    align-items: center;
}
.kadenz-arr-lane.is-soloed .kadenz-arr-lane-label {
    background: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-surface-strong));
    border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border));
}
.kadenz-arr-lane-label {
    justify-content: flex-start;
    padding: 0.2rem 0.35rem;
    color: var(--theme-fg);
    text-transform: none;
    font-size: 0.82rem;
    letter-spacing: normal;
    border-radius: 6px;
    transition: background 120ms ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    border: 1px solid transparent;
}
.kadenz-arr-label-main {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    padding: 0.15rem 0.25rem;
    margin: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.kadenz-arr-label-main span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kadenz-arr-patch-select {
    font-size: 0.68rem;
    padding: 0.12rem 0.3rem;
    min-height: 1.55rem;
    height: 1.55rem;
    max-width: 5.75rem;
    flex-shrink: 0;
}
.kadenz-arr-lane-label:hover { background: var(--theme-surface-strong); }
.kadenz-arr-lane-label .kadenz-arr-swatch {
    width: 0.6rem; height: 0.6rem; border-radius: 50%;
    background: var(--lane-color, var(--theme-accent));
    box-shadow: 0 0 8px var(--lane-color, var(--theme-accent));
}
.kadenz-arr-lane-track {
    display: grid;
    gap: 2px;
    height: 1.75rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--theme-bg) 60%, transparent);
    border: 1px solid var(--theme-border);
    overflow: hidden;
}
.kadenz-arr-cell {
    background: var(--cell-color, transparent);
    border-right: 1px solid var(--theme-border);
    opacity: var(--cell-opacity, 0.85);
    transition: opacity 160ms ease, transform 160ms ease;
    cursor: pointer;
    position: relative;
}
.kadenz-arr-cell:last-child { border-right: 0; }
.kadenz-arr-cell:hover { opacity: 1; transform: scaleY(1.08); }
.kadenz-arr-cell-empty {
    background: repeating-linear-gradient(
        45deg,
        transparent, transparent 6px,
        color-mix(in srgb, var(--theme-border) 70%, transparent) 6px,
        color-mix(in srgb, var(--theme-border) 70%, transparent) 7px
    );
    cursor: default;
}
.kadenz-arr-legend {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    margin-top: 0.9rem; padding-top: 0.7rem;
    border-top: 1px dashed var(--theme-border);
}
.kadenz-arr-legend-item {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.75rem; color: var(--theme-muted);
    padding: 0.15rem 0.55rem; border-radius: 999px;
    background: var(--theme-surface-strong); border: 1px solid var(--theme-border);
}
.kadenz-arr-legend-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--dot-color, var(--theme-accent)); }
/* Subtle note/function coloring on chord pills and pads --------------- */
.kadenz-chord-btn {
    border-color: color-mix(in srgb, var(--chord-color, var(--theme-border)) 50%, var(--theme-border));
    background: color-mix(in srgb, var(--chord-color, var(--theme-surface-strong)) 14%, var(--theme-surface-strong));
}
.kadenz-chord-btn:hover { background: var(--chord-color, var(--theme-accent)); color: #0a0d14; }
.kadenz-pad[data-degree] {
    background: color-mix(in srgb, var(--pad-color, var(--theme-surface-strong)) 15%, var(--theme-surface-strong));
}
.kadenz-pad[data-degree].is-tonic {
    background: color-mix(in srgb, var(--pad-color, var(--theme-accent)) 45%, var(--theme-surface-strong));
}
.kadenz-pad[data-degree]:hover {
    background: color-mix(in srgb, var(--pad-color, var(--theme-accent)) 55%, var(--theme-surface-strong));
}
.kadenz-section-card[data-primary-category] {
    border-color: color-mix(in srgb, var(--section-tint, var(--theme-border)) 45%, var(--theme-border));
    background: color-mix(in srgb, var(--section-tint, var(--theme-surface)) 10%, var(--theme-surface));
}
/* =================================================================
   Alt-notation viewer (guitar, piano, drums, staff, uke, bass).
   ================================================================= */
.kadenz-notation {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--theme-border);
}
.kadenz-notation-toolbar {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem;
}
.kadenz-notation-toolbar select {
    background: var(--theme-dropdown-fill);
    background-color: var(--theme-dropdown-fill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--theme-fg);
    border: 1px solid var(--theme-border);
    border-radius: 8px; padding: 0.35rem 0.6rem;
    font-family: var(--theme-font-body);
    font-size: 0.85rem;
    color-scheme: dark;
}
.kadenz-notation-toolbar select option,
.kadenz-notation-toolbar select optgroup {
    background: color-mix(in srgb, var(--theme-bg) 92%, black);
    color: var(--theme-fg);
}
.kadenz-notation-host {
    min-height: 180px;
    display: flex; flex-direction: column; gap: 1rem;
    padding: 0.75rem; border-radius: 10px;
    background: color-mix(in srgb, var(--theme-bg) 60%, transparent);
    border: 1px solid var(--theme-border);
}
.kadenz-notation-title {
    font-family: var(--theme-font-display);
    font-weight: 600; font-size: 0.95rem;
    color: var(--theme-fg);
    display: flex; align-items: baseline; gap: 0.5rem;
}
.kadenz-notation-title .kadenz-notation-sub { color: var(--theme-muted); font-size: 0.8rem; font-weight: 400; }
.kadenz-notation svg { max-width: 100%; height: auto; display: block; }
.kadenz-notation-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
}
.kadenz-notation-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 0.55rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
}
.kadenz-notation-card strong {
    font-family: var(--theme-font-display); font-weight: 600; color: var(--theme-fg);
    font-size: 0.85rem;
}
.kadenz-notation-empty {
    color: var(--theme-muted);
    font-size: 0.85rem;
    padding: 1rem;
    text-align: center;
}
/* =================================================================
   Export split-button (stems vs combined).
   ================================================================= */
/* Dropdowns / popovers in page content: keep above panels, grids, and cards. */
.kadenz-split-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
}
.kadenz-split-btn:has(.kadenz-split-menu.is-open) {
    z-index: 12000;
}
.kadenz-split-btn-main { border-radius: 10px 0 0 10px; }
.kadenz-split-btn-toggle {
    border-radius: 0 10px 10px 0;
    padding: 0.6rem 0.7rem;
    border-left: 1px solid color-mix(in srgb, var(--theme-bg) 50%, transparent);
    background: var(--theme-surface-strong);
    color: var(--theme-fg);
    border-top: 1px solid var(--theme-border);
    border-right: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
    font-family: var(--theme-font-display); font-weight: 600;
    cursor: pointer;
}
.kadenz-split-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--theme-dropdown-fill);
    background-color: var(--theme-dropdown-fill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    box-shadow: var(--theme-shadow);
    min-width: 16rem;
    display: none; padding: 0.35rem;
    z-index: 12001;
}
.kadenz-split-menu.is-open { display: block; }
.kadenz-split-menu button {
    display: block; width: 100%; text-align: left;
    padding: 0.5rem 0.75rem; background: transparent; border: 0; border-radius: 8px;
    color: var(--theme-fg); cursor: pointer;
    font-family: var(--theme-font-body); font-size: 0.9rem;
}
.kadenz-split-menu button:hover {
    background: color-mix(in srgb, var(--theme-dropdown-fill) 75%, var(--theme-fg) 10%);
}
.kadenz-split-menu a.kadenz-export-menu-upgrade {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--theme-fg);
    cursor: pointer;
    font-family: var(--theme-font-body);
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 600;
}
.kadenz-split-menu a.kadenz-export-menu-upgrade:hover {
    background: color-mix(in srgb, var(--theme-dropdown-fill) 75%, var(--theme-fg) 10%);
}
.kadenz-split-menu small { display: block; color: var(--theme-muted); font-size: 0.75rem; margin-top: 0.15rem; }
.kadenz-export-menu-json { font-weight: 600; }
.kadenz-export-primary-ableton { font-weight: 600; }
/* =================================================================
   Help articles (Ableton plugin setup, etc.)
   ================================================================= */
.kadenz-help-page { padding-top: 1.5rem; padding-bottom: 2rem; }
.kadenz-help-article {
    max-width: 44rem;
    margin: 0 auto;
    padding-bottom: 3rem;
}
.kadenz-help-hero { margin-bottom: 2.25rem; }
.kadenz-help-title {
    font-family: var(--theme-font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0.35rem 0 0.75rem;
}
.kadenz-help-lead {
    color: var(--theme-muted);
    line-height: 1.6;
    margin: 0;
    font-size: 1.05rem;
}
.kadenz-help-steps {
    display: grid;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}
.kadenz-help-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.15rem;
    align-items: start;
}
.kadenz-help-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent) 18%, transparent);
    color: var(--theme-accent);
    font-family: var(--theme-font-display);
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.kadenz-help-step-body h2 {
    font-family: var(--theme-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.kadenz-help-step-body p {
    color: var(--theme-muted);
    line-height: 1.6;
    margin: 0 0 0.65rem;
}
.kadenz-help-step-body p:last-child { margin-bottom: 0; }
.kadenz-help-callout {
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin: 1rem 0;
    background: color-mix(in srgb, var(--theme-surface) 88%, var(--theme-fg) 4%);
}
.kadenz-help-callout--info {
    border-color: color-mix(in srgb, var(--theme-accent) 45%, var(--theme-border));
    background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface));
    margin-bottom: 1.75rem;
}
.kadenz-help-callout--warn {
    border-color: color-mix(in srgb, #f59e0b 50%, var(--theme-border));
    background: color-mix(in srgb, #f59e0b 8%, var(--theme-surface));
}
.kadenz-help-callout-title {
    font-family: var(--theme-font-display);
    font-weight: 700;
    margin: 0 0 0.45rem;
    color: var(--theme-fg);
}
.kadenz-help-callout p {
    margin: 0 0 0.5rem;
    color: var(--theme-muted);
    line-height: 1.55;
}
.kadenz-help-callout-action { margin-top: 0.65rem !important; }
.kadenz-help-smartscreen-steps {
    margin: 0.65rem 0 1rem;
    padding-left: 1.25rem;
    color: var(--theme-muted);
    line-height: 1.55;
}
.kadenz-help-smartscreen-steps li { margin-bottom: 0.35rem; }
.kadenz-help-smartscreen-figure { margin: 0; }
.kadenz-help-smartscreen-img {
    display: block;
    width: 100%;
    max-width: 36rem;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow);
}
.kadenz-help-smartscreen-figure figcaption {
    margin-top: 0.55rem;
    font-size: 0.85rem;
    color: var(--theme-muted);
}
.kadenz-help-section {
    margin-bottom: 2rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--theme-border);
}
.kadenz-help-section h2 {
    font-family: var(--theme-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.85rem;
}
.kadenz-help-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 0.35rem;
}
.kadenz-help-section p {
    color: var(--theme-muted);
    line-height: 1.6;
    margin: 0 0 0.65rem;
}
.kadenz-help-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--theme-muted);
    line-height: 1.6;
}
.kadenz-help-list li { margin-bottom: 0.5rem; }
.kadenz-help-list--plain { list-style: disc; margin: 0.65rem 0 1rem; }
.kadenz-help-note { font-size: 0.9rem; color: var(--theme-muted); margin-top: 0.75rem !important; }
.kadenz-help-step[id] { scroll-margin-top: 5rem; }
/* =================================================================
   "Take it to Ableton" marketing block + dashboard plugin card.
   ================================================================= */
.kadenz-ableton { max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem; }
.kadenz-ableton-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
@media (max-width: 820px) { .kadenz-ableton-inner { grid-template-columns: 1fr; } }
.kadenz-ableton h2 {
    font-family: var(--theme-font-display); font-size: 2rem; font-weight: 700;
    letter-spacing: -0.01em; margin-bottom: 1rem;
}
.kadenz-ableton-sub { color: var(--theme-muted); line-height: 1.55; margin-bottom: 1.5rem; }
.kadenz-ableton-points { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.kadenz-ableton-points li {
    color: var(--theme-fg); padding-left: 1.25rem; position: relative;
    line-height: 1.5;
}
.kadenz-ableton-points li::before {
    content: ""; position: absolute; left: 0; top: 0.55rem;
    width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--theme-accent);
}
.kadenz-ableton-visual {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--theme-shadow);
}
.kadenz-ableton-grid-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border));
    margin-bottom: 0.85rem;
    display: block;
}
.kadenz-ableton-visual .kadenz-ableton-tracks {
    display: grid; gap: 6px;
}
.kadenz-ableton-track {
    display: grid; grid-template-columns: 6rem 1fr; gap: 0.5rem; align-items: center;
}
.kadenz-ableton-track strong {
    font-family: var(--theme-font-display); font-size: 0.8rem; color: var(--theme-fg);
    display: flex; align-items: center; gap: 0.4rem;
}
.kadenz-ableton-track strong::before {
    content: ""; width: 0.45rem; height: 1.4rem; border-radius: 2px;
    background: var(--track-color, var(--theme-accent));
}
.kadenz-ableton-clips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.kadenz-ableton-clip {
    background: color-mix(in srgb, var(--track-color, var(--theme-accent)) 30%, var(--theme-surface-strong));
    border-radius: 3px;
    height: 1.4rem;
    border: 1px solid color-mix(in srgb, var(--track-color, var(--theme-accent)) 60%, transparent);
}
.kadenz-ableton-clip-empty { background: var(--theme-surface-strong); border: 1px dashed var(--theme-border); }
.kadenz-ableton-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; margin-top: 0.5rem;
    border-radius: var(--theme-radius);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 40%, var(--theme-border));
    background: color-mix(in srgb, var(--theme-accent) 6%, var(--theme-surface));
}
.kadenz-ableton-card-body { flex: 1; }
.kadenz-ableton-card h3 {
    font-family: var(--theme-font-display); font-weight: 600; font-size: 1.05rem;
    margin-bottom: 0.25rem;
}
.kadenz-ableton-card p { color: var(--theme-muted); font-size: 0.9rem; line-height: 1.4; }
.kadenz-ableton-locked { opacity: 0.75; }
.kadenz-ableton-locked h3::after {
    content: " · Pro"; color: var(--theme-accent); font-size: 0.75rem; letter-spacing: 0.15em;
}
@media (max-width: 900px) {
    .kadenz-container,
    .kadenz-header-inner,
    .kadenz-nav-inner,
    .kadenz-marketing-nav,
    .kadenz-features,
    .kadenz-pricing,
    .kadenz-manifesto,
    .kadenz-how,
    .kadenz-product-showcase,
    .kadenz-final-cta,
    .kadenz-footer,
    .kadenz-ableton,
    .kadenz-admin-shell {
        width: 100%;
        max-width: none;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .kadenz-page-head {
        align-items: stretch;
    }

    .kadenz-page-head > :first-child {
        width: 100%;
    }

    .kadenz-page-head .kadenz-btn {
        width: 100%;
        justify-content: center;
    }

    .kadenz-section-head-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .kadenz-nav-inner {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    .kadenz-generate {
        max-width: 100%;
    }

    .kadenz-hero {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .kadenz-hero-inner {
        max-width: 100%;
        padding: 1rem;
    }
}
@media (max-width: 640px) {
    .kadenz-page-title {
        font-size: 1.5rem;
    }

    .kadenz-header-inner {
        padding-top: 1.3rem;
        padding-bottom: 1.1rem;
    }

    .kadenz-hero-title {
        font-size: clamp(1.8rem, 9.8vw, 2.4rem);
    }

    .kadenz-hero-sub {
        font-size: 0.98rem;
        margin-bottom: 1.15rem;
    }

    .kadenz-hero-actions .kadenz-btn,
    .kadenz-ableton-card .kadenz-btn {
        width: 100%;
        justify-content: center;
    }

    .kadenz-ableton-card {
        flex-direction: column;
        align-items: stretch;
    }
}
.kadenz-generate-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.kadenz-wait-audit-summary {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
}
.kadenz-dl-compact {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
}
.kadenz-dl-compact dt {
    font-weight: 600;
    opacity: 0.85;
}
.kadenz-dl-compact dd {
    margin: 0;
}
.kadenz-sound-design-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.kadenz-sound-design-card {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: color-mix(in srgb, var(--theme-surface) 96%, var(--theme-accent) 4%);
}
.kadenz-sound-design-card__title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}
.kadenz-sound-design-card p {
    margin: 0.25rem 0;
    font-size: 0.88rem;
}
.kadenz-flash-warn-inline {
    color: color-mix(in srgb, var(--theme-text) 88%, orange 12%);
}
/* Community store --------------------------------------------------- */
.kadenz-store-hero {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface)), transparent);
}
.kadenz-store-section {
    margin-bottom: 2rem;
}
.kadenz-store-section-title {
    font-family: var(--theme-font-display);
    font-size: 1.15rem;
    margin: 0 0 0.85rem;
}
.kadenz-store-grid--section {
    margin-bottom: 0.5rem;
}
.kadenz-store-hero-carousel {
    margin-bottom: 2rem;
    overflow: hidden;
}
.kadenz-store-hero-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}
.kadenz-store-hero-carousel-track > .kadenz-store-card--hero {
    flex: 0 0 min(100%, 420px);
    scroll-snap-align: start;
}
@media (min-width: 900px) {
    .kadenz-store-hero-carousel-track > .kadenz-store-card--hero {
        flex-basis: calc(50% - 0.5rem);
    }
}
.kadenz-store-card--media {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.kadenz-store-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface-strong));
}
.kadenz-store-card-cover {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}
.kadenz-store-card-cover--placeholder {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--theme-accent) 42%, #1a2030),
        color-mix(in srgb, var(--theme-accent-2, var(--theme-accent)) 28%, #0e121c)
    );
}
.kadenz-store-card-media .kadenz-store-free-pill {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
}
.kadenz-store-card-body {
    padding: 1rem 1.1rem 1.15rem;
}
.kadenz-store-card--hero .kadenz-store-card-media {
    aspect-ratio: 16 / 9;
}
.kadenz-store-card--hero .kadenz-store-card-body h3 {
    font-size: 1.2rem;
}
.kadenz-store-creator-avatar--img {
    -o-object-fit: cover;
       object-fit: cover;
    background: transparent;
}
/* Blueprint storefront detail --------------------------------------- */
.kadenz-storefront-hero {
    position: relative;
    border-radius: var(--theme-radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
    border: 1px solid var(--theme-border);
}
.kadenz-storefront-hero-backdrop {
    position: absolute;
    inset: 0;
}
.kadenz-storefront-hero-cover {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    transform: scale(1.08);
    filter: blur(12px) saturate(1.1);
}
.kadenz-storefront-hero-cover--placeholder {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--theme-accent) 50%, #121826),
        color-mix(in srgb, var(--theme-accent-2, var(--theme-accent)) 35%, #0a0e16)
    );
}
.kadenz-storefront-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--theme-bg) 35%, transparent) 0%,
        color-mix(in srgb, var(--theme-bg) 88%, transparent) 55%,
        color-mix(in srgb, var(--theme-bg) 96%, transparent) 100%
    );
}
.kadenz-storefront-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
    min-height: 280px;
}
@media (min-width: 900px) {
    .kadenz-storefront-hero-grid {
        grid-template-columns: 1fr minmax(260px, 340px);
        align-items: end;
        padding: 2rem;
        min-height: 360px;
    }
}
.kadenz-storefront-title {
    font-family: var(--theme-font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0.5rem 0 0.35rem;
    line-height: 1.1;
}
.kadenz-storefront-sub {
    color: var(--theme-muted);
    margin: 0 0 0.65rem;
}
.kadenz-storefront-free-pill {
    vertical-align: middle;
}
.kadenz-storefront-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}
.kadenz-storefront-player-panel {
    padding: 1rem 1.1rem;
    border-radius: calc(var(--theme-radius) - 2px);
    background: color-mix(in srgb, var(--theme-surface) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-border) 80%, transparent);
    backdrop-filter: blur(8px);
}
.kadenz-storefront-panel-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-muted);
    margin: 0 0 0.65rem;
}
.kadenz-storefront-feature-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
    .kadenz-storefront-feature-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.kadenz-storefront-tile {
    padding: 0.85rem 1rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface);
}
.kadenz-storefront-tile-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-muted);
    margin-bottom: 0.25rem;
}
.kadenz-storefront-tile strong {
    font-family: var(--theme-font-display);
    font-size: 1.05rem;
}
.kadenz-storefront-prompt {
    line-height: 1.55;
    margin: 0 0 1rem;
}
.kadenz-storefront-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.kadenz-storefront-tag {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border);
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--theme-fg);
    background: color-mix(in srgb, var(--theme-accent) 8%, var(--theme-surface));
}
.kadenz-storefront-tag:hover {
    border-color: var(--theme-accent);
}
/* Profile + image upload ------------------------------------------ */
.kadenz-profile-info-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .kadenz-profile-info-row {
        flex-direction: row;
        align-items: flex-start;
    }

    .kadenz-profile-info-fields {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.25rem;
        align-items: flex-start;
    }

    .kadenz-profile-info-fields > div {
        flex: 1 1 220px;
    }
}
.kadenz-profile-avatar-upload {
    flex-shrink: 0;
}
.kadenz-image-upload-inner,
.kadenz-cover-upload-inner {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.kadenz-image-upload--stacked .kadenz-image-upload-inner,
.kadenz-cover-upload--stacked .kadenz-cover-upload-inner {
    flex-direction: column;
    align-items: stretch;
}
.kadenz-image-upload-frame,
.kadenz-cover-upload-frame {
    flex-shrink: 0;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: calc(var(--theme-radius) - 2px);
    border: 1px solid var(--theme-border);
    overflow: hidden;
    background: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-surface));
}
.kadenz-image-upload-frame--round {
    border-radius: 50%;
}
.kadenz-image-upload-preview,
.kadenz-cover-upload-preview {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}
.kadenz-image-upload--avatar .kadenz-image-upload-frame {
    width: 6.5rem;
    height: 6.5rem;
}
.kadenz-image-upload-frame--lazy:empty,
.kadenz-cover-upload-frame--lazy:empty {
    background: color-mix(in srgb, var(--theme-muted) 12%, var(--theme-surface));
}
/* ------------------------------------------------------------------ */
/* Generate wait panel v2 — cinematic staged reveal                     */
/* ------------------------------------------------------------------ */
.kadenz-generate-wait {
    position: relative;
    isolation: isolate;
}
.kadenz-generate-wait::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(60% 120% at 12% 0%, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 60%),
        radial-gradient(50% 110% at 95% 100%, color-mix(in srgb, var(--theme-accent-2) 10%, transparent), transparent 55%);
    opacity: 0.9;
    animation: kadenz-wait-aurora 9s ease-in-out infinite alternate;
}
@keyframes kadenz-wait-aurora {
    from {
        transform: translateX(-2%) scale(1);
        opacity: 0.65;
    }
    to {
        transform: translateX(2%) scale(1.03);
        opacity: 1;
    }
}
.kadenz-generate-wait.is-open {
    animation: kadenz-wait-open 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes kadenz-wait-open {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.975);
        clip-path: inset(0 8% 96% 8% round 18px);
    }
    60% {
        clip-path: inset(0 0 0 0 round 2px);
    }
    to {
        opacity: 1;
        transform: none;
        clip-path: inset(0 0 0 0 round 0);
    }
}
.kadenz-generate-wait.is-open > * {
    animation: kadenz-wait-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.kadenz-generate-wait.is-open > :nth-child(1) { animation-delay: 0.1s; }
.kadenz-generate-wait.is-open > :nth-child(2) { animation-delay: 0.2s; }
.kadenz-generate-wait.is-open > :nth-child(3) { animation-delay: 0.28s; }
.kadenz-generate-wait.is-open > :nth-child(4) { animation-delay: 0.36s; }
.kadenz-generate-wait.is-open > :nth-child(5) { animation-delay: 0.46s; }
@keyframes kadenz-wait-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.kadenz-wait-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.35rem 0.9rem;
}
.kadenz-wait-head-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.kadenz-wait-status {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 700;
    font-family: var(--theme-font-display);
    color: var(--theme-fg);
}
.kadenz-wait-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
}
.kadenz-wait-clock-time {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: var(--theme-font-display);
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.kadenz-wait-clock-sub {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-muted);
}
.kadenz-wait-eq {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 30px;
    padding: 0 1.35rem;
    margin-bottom: 0.85rem;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kadenz-wait-eq span {
    flex: 1;
    max-width: 14px;
    height: 100%;
    border-radius: 2px;
    transform-origin: bottom center;
    background: linear-gradient(180deg, var(--theme-accent-2), var(--theme-accent));
    opacity: 0.85;
    animation: kadenz-wait-eq-bounce 1.15s ease-in-out infinite;
}
.kadenz-wait-eq span:nth-child(3n) { animation-duration: 0.9s; animation-delay: 0.12s; }
.kadenz-wait-eq span:nth-child(3n + 1) { animation-duration: 1.35s; animation-delay: 0.31s; }
.kadenz-wait-eq span:nth-child(4n) { animation-duration: 1.05s; animation-delay: 0.48s; }
.kadenz-wait-eq span:nth-child(5n) { animation-duration: 1.5s; animation-delay: 0.07s; }
.kadenz-wait-eq span:nth-child(7n) { animation-duration: 0.8s; animation-delay: 0.55s; }
@keyframes kadenz-wait-eq-bounce {
    0%, 100% {
        transform: scaleY(0.18);
        opacity: 0.55;
    }
    50% {
        transform: scaleY(1);
        opacity: 0.95;
    }
}
.kadenz-wait-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0 1.35rem;
}
.kadenz-wait-stage {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--theme-border) 80%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--theme-muted);
    transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.kadenz-wait-stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-muted) 45%, transparent);
    transition: background 0.4s ease;
}
.kadenz-wait-stage.is-active {
    color: var(--theme-fg);
    border-color: color-mix(in srgb, var(--theme-accent) 55%, transparent);
    background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
}
.kadenz-wait-stage.is-active .kadenz-wait-stage-dot {
    background: var(--theme-accent);
    animation: kadenz-wait-stage-ping 1.6s ease-out infinite;
}
@keyframes kadenz-wait-stage-ping {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent) 60%, transparent);
    }
    100% {
        box-shadow: 0 0 0 9px transparent;
    }
}
.kadenz-wait-stage.is-done {
    color: color-mix(in srgb, var(--theme-fg) 70%, var(--theme-muted));
    border-color: color-mix(in srgb, var(--theme-accent-2) 35%, transparent);
}
.kadenz-wait-stage.is-done .kadenz-wait-stage-dot {
    background: var(--theme-accent-2);
}
.kadenz-wait-bar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.35rem;
}
.kadenz-wait-bar-row .kadenz-wait-bar-track {
    max-width: none;
    flex: 1;
    margin: 0;
    position: relative;
    height: 6px;
}
.kadenz-wait-bar-row .kadenz-wait-bar-track::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 20%,
        color-mix(in srgb, var(--theme-fg) 22%, transparent) 50%,
        transparent 80%
    );
    animation: kadenz-wait-bar-sheen 1.9s linear infinite;
    pointer-events: none;
}
@keyframes kadenz-wait-bar-sheen {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}
.kadenz-wait-pct {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--theme-accent);
    min-width: 2.6rem;
    text-align: right;
}
.kadenz-wait-progress-block {
    padding-bottom: 1.1rem;
}
.kadenz-wait-learncard {
    border-top: 1px solid color-mix(in srgb, var(--theme-border) 85%, transparent);
    padding: 1.1rem 1.35rem 1.25rem;
    background: color-mix(in srgb, var(--theme-bg) 30%, transparent);
}
.kadenz-wait-eyebrow--muted {
    color: var(--theme-muted);
}
@media (max-width: 560px) {
    .kadenz-wait-clock-sub {
        display: none;
    }
    .kadenz-wait-status {
        font-size: 1rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .kadenz-generate-wait::before,
    .kadenz-generate-wait.is-open,
    .kadenz-generate-wait.is-open > *,
    .kadenz-wait-eq span,
    .kadenz-wait-stage.is-active .kadenz-wait-stage-dot,
    .kadenz-wait-bar-row .kadenz-wait-bar-track::after,
    .kadenz-wait-orb__core,
    .kadenz-wait-orb__ring {
        animation: none;
    }
}
.kadenz-image-upload-hint,
.kadenz-cover-upload-hint {
    font-size: 0.78rem;
    color: var(--theme-muted);
    margin: 0.35rem 0 0;
    max-width: 18rem;
    line-height: 1.4;
}
.kadenz-image-upload--no-preview .kadenz-image-upload-frame--lazy:empty::after,
.kadenz-cover-upload--no-preview .kadenz-cover-upload-frame--lazy:empty::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.35;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2, var(--theme-accent)));
}
.kadenz-store-hero-badge {
    font-family: var(--theme-font-display);
    font-weight: 600;
    margin: 0 0 0.35rem;
}
.kadenz-store-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.kadenz-store-tab {
    padding: 0.45rem 1rem;
    border-radius: calc(var(--theme-radius) - 1px);
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-fg);
    text-decoration: none;
    font-weight: 600;
}
.kadenz-store-tab.is-active {
    border-color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-surface));
}
.kadenz-store-filters {
    margin-bottom: 1rem;
}
.kadenz-store-filter-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.kadenz-store-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.kadenz-store-card {
    display: block;
    position: relative;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface);
    color: var(--theme-fg);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 200ms ease, transform 200ms ease;
}
.kadenz-store-card:hover {
    border-color: var(--theme-accent);
    transform: translateY(-2px);
}
.kadenz-store-card-accent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-2));
}
.kadenz-store-card h3 {
    font-family: var(--theme-font-display);
    margin: 0.5rem 0 0.35rem;
    font-size: 1.05rem;
}
.kadenz-store-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.kadenz-store-free-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--theme-accent) 22%, transparent);
    color: var(--theme-fg);
}
.kadenz-store-meta,
.kadenz-store-card-foot {
    font-size: 0.85rem;
    color: var(--theme-muted);
}
.kadenz-store-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.85rem;
}
.kadenz-store-star {
    color: color-mix(in srgb, var(--theme-muted) 70%, transparent);
}
.kadenz-store-star.is-filled {
    color: #f0c14b;
}
.kadenz-store-rating-count {
    margin-left: 0.35rem;
    color: var(--theme-muted);
    font-size: 0.8rem;
}
.kadenz-store-creators {
    display: grid;
    gap: 1rem;
}
.kadenz-store-creator-row {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface);
}
.kadenz-store-creator-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: color-mix(in srgb, var(--theme-accent) 20%, var(--theme-surface-strong));
}
.kadenz-store-featured-badge {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent) 25%, transparent);
}
.kadenz-community-player-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.kadenz-community-section-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.kadenz-play-toggle-icon {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
}
.kadenz-play-toggle.is-playing .kadenz-play-toggle-icon {
    color: currentColor;
}
.kadenz-community-section-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kadenz-store-rate-form {
    display: flex;
    gap: 0.75rem 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.kadenz-store-rate-form__title {
    margin: 0;
    flex-shrink: 0;
}
.kadenz-store-rate-form__score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.kadenz-store-rate-form__score .kadenz-field-hint {
    margin: 0;
    white-space: nowrap;
}
.kadenz-store-rate-form__score .kadenz-select {
    min-width: 7.5rem;
}
.kadenz-pack-fragment-row {
    margin-bottom: 1.25rem;
}
.kadenz-pack-fragment-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.kadenz-phrase-preview-controls {
    display: flex;
    gap: 0.5rem;
}
.kadenz-filter-bar__hint {
    margin: 0;
    align-self: center;
}
/* Phrase builder ---------------------------------------------------- */
.kadenz-generate-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.kadenz-generate-tab {
    padding: 0.45rem 1rem;
    border-radius: calc(var(--theme-radius) - 1px);
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-fg);
    font-weight: 600;
    cursor: pointer;
}
.kadenz-generate-tab.is-active {
    border-color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-surface));
}
.kadenz-generate-tab-panel[hidden] {
    display: none;
}
.kadenz-phrase-builder-controls,
.kadenz-phrase-builder-prompt {
    margin-bottom: 0;
}
.kadenz-phrase-save-panel {
    margin-top: 1rem;
}
.kadenz-phrase-save-public {
    display: block;
    min-height: 0;
}
.kadenz-filter-bar__field--toggle {
    flex: 1 1 14rem;
    min-width: 12rem;
}
.kadenz-phrase-ai-debug-json {
    margin: 0;
    padding: 0.75rem 1rem;
    max-height: 16rem;
    overflow: auto;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: color-mix(in srgb, var(--theme-bg) 40%, var(--theme-surface));
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.kadenz-piano-roll-mount {
    margin-top: 0.75rem;
    width: 100%;
    min-width: 0;
    max-height: min(28rem, 70vh);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    overflow-x: auto;
    overflow-y: auto;
}
.kadenz-piano-roll {
    width: 100%;
    min-width: 0;
}
.kadenz-piano-roll-canvas {
    display: block;
    max-width: 100%;
    cursor: crosshair;
    outline: none;
}
.kadenz-piano-roll-canvas:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--theme-accent) 55%, transparent);
}
.default\:col-span-full:default {
    grid-column: 1 / -1;
}
.default\:row-span-1:default {
    grid-row: span 1 / span 1;
}
.hover\:rounded-b-md:hover {
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}
.hover\:rounded-t-md:hover {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}
.hover\:border-gray-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100\/75:hover {
    background-color: rgb(243 244 246 / 0.75);
}
.hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.hover\:text-gray-400:hover {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-500:hover {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
    text-decoration-line: underline;
}
.focus\:z-10:focus {
    z-index: 10;
}
.focus\:border-blue-300:focus {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.focus\:border-gray-300:focus {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.focus\:border-indigo-700:focus {
    --tw-border-opacity: 1;
    border-color: rgb(67 56 202 / var(--tw-border-opacity, 1));
}
.focus\:bg-gray-100:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.focus\:bg-gray-50:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.focus\:bg-indigo-100:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.focus\:text-gray-500:focus {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.focus\:text-gray-700:focus {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.focus\:text-gray-800:focus {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.focus\:text-indigo-800:focus {
    --tw-text-opacity: 1;
    color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus\:ring:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-red-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-\[var\(--theme-accent\)\]:focus-visible {
    --tw-ring-color: var(--theme-accent);
}
.focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-\[var\(--theme-bg\)\]:focus-visible {
    --tw-ring-offset-color: var(--theme-bg);
}
.focus-visible\:ring-offset-\[var\(--theme-surface\)\]:focus-visible {
    --tw-ring-offset-color: var(--theme-surface);
}
.active\:bg-gray-100:active {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.active\:bg-red-700:active {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.active\:text-gray-500:active {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.active\:text-gray-700:active {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-40:disabled {
    opacity: 0.4;
}
@media (min-width: 640px) {
    .sm\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .sm\:mt-10 {
        margin-top: 2.5rem;
    }
    .sm\:flex {
        display: flex;
    }
    .sm\:hidden {
        display: none;
    }
    .sm\:flex-1 {
        flex: 1 1 0%;
    }
    .sm\:translate-y-0 {
        --tw-translate-y: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .sm\:scale-100 {
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .sm\:scale-95 {
        --tw-scale-x: .95;
        --tw-scale-y: .95;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .sm\:items-center {
        align-items: center;
    }
    .sm\:justify-start {
        justify-content: flex-start;
    }
    .sm\:justify-between {
        justify-content: space-between;
    }
    .sm\:gap-6 {
        gap: 1.5rem;
    }
    .sm\:p-12 {
        padding: 3rem;
    }
    .sm\:p-5 {
        padding: 1.25rem;
    }
    .sm\:p-6 {
        padding: 1.5rem;
    }
    .sm\:p-8 {
        padding: 2rem;
    }
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .sm\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
    .sm\:pt-0 {
        padding-top: 0px;
    }
    .sm\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}
@media (min-width: 768px) {
    .md\:block {
        display: block;
    }
    .md\:inline {
        display: inline;
    }
    .md\:flex {
        display: flex;
    }
    .md\:hidden {
        display: none;
    }
    .md\:min-w-64 {
        min-width: 16rem;
    }
    .md\:max-w-80 {
        max-width: 20rem;
    }
    .md\:items-center {
        align-items: center;
    }
    .md\:justify-between {
        justify-content: space-between;
    }
    .md\:gap-2 {
        gap: 0.5rem;
    }
}
@media (min-width: 1024px) {
    .lg\:block {
        display: block;
    }
    .lg\:inline-block {
        display: inline-block;
    }
    .lg\:w-\[12rem\] {
        width: 12rem;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .lg\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .default\:lg\:col-span-6:default {
        grid-column: span 6 / span 6;
    }
}
.ltr\:origin-top-left:where([dir="ltr"], [dir="ltr"] *) {
    transform-origin: top left;
}
.ltr\:origin-top-right:where([dir="ltr"], [dir="ltr"] *) {
    transform-origin: top right;
}
.rtl\:origin-top-left:where([dir="rtl"], [dir="rtl"] *) {
    transform-origin: top left;
}
.rtl\:origin-top-right:where([dir="rtl"], [dir="rtl"] *) {
    transform-origin: top right;
}
.rtl\:flex-row-reverse:where([dir="rtl"], [dir="rtl"] *) {
    flex-direction: row-reverse;
}
@media (prefers-color-scheme: dark) {
    .dark\:block {
        display: block;
    }
    .dark\:hidden {
        display: none;
    }
    .dark\:border {
        border-width: 1px;
    }
    .dark\:border-gray-600 {
        --tw-border-opacity: 1;
        border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    }
    .dark\:border-gray-700 {
        --tw-border-opacity: 1;
        border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
    }
    .dark\:border-gray-800 {
        --tw-border-opacity: 1;
        border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
    }
    .dark\:border-gray-900 {
        --tw-border-opacity: 1;
        border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
    }
    .dark\:border-l-red-500 {
        --tw-border-opacity: 1;
        border-left-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
    }
    .dark\:bg-gray-800 {
        --tw-bg-opacity: 1;
        background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    }
    .dark\:bg-gray-900 {
        --tw-bg-opacity: 1;
        background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    }
    .dark\:bg-gray-900\/80 {
        background-color: rgb(17 24 39 / 0.8);
    }
    .dark\:bg-gray-950\/95 {
        background-color: rgb(3 7 18 / 0.95);
    }
    .dark\:bg-red-500\/20 {
        background-color: rgb(239 68 68 / 0.2);
    }
    .dark\:text-gray-100 {
        --tw-text-opacity: 1;
        color: rgb(243 244 246 / var(--tw-text-opacity, 1));
    }
    .dark\:text-gray-300 {
        --tw-text-opacity: 1;
        color: rgb(209 213 219 / var(--tw-text-opacity, 1));
    }
    .dark\:text-gray-400 {
        --tw-text-opacity: 1;
        color: rgb(156 163 175 / var(--tw-text-opacity, 1));
    }
    .dark\:text-gray-600 {
        --tw-text-opacity: 1;
        color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    }
    .dark\:text-gray-950 {
        --tw-text-opacity: 1;
        color: rgb(3 7 18 / var(--tw-text-opacity, 1));
    }
    .dark\:text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    }
    .dark\:ring-1 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    }
    .dark\:ring-gray-800 {
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity, 1));
    }
    .dark\:hover\:bg-gray-700:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    }
    .dark\:hover\:bg-gray-800:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    }
    .dark\:hover\:bg-gray-800\/75:hover {
        background-color: rgb(31 41 55 / 0.75);
    }
    .dark\:hover\:text-gray-300:hover {
        --tw-text-opacity: 1;
        color: rgb(209 213 219 / var(--tw-text-opacity, 1));
    }
    .dark\:hover\:text-gray-500:hover {
        --tw-text-opacity: 1;
        color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    }
    .dark\:focus\:border-blue-700:focus {
        --tw-border-opacity: 1;
        border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
    }
    .dark\:focus\:border-blue-800:focus {
        --tw-border-opacity: 1;
        border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
    }
    .dark\:focus\:text-gray-500:focus {
        --tw-text-opacity: 1;
        color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    }
    .dark\:active\:bg-gray-700:active {
        --tw-bg-opacity: 1;
        background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    }
    .dark\:active\:text-gray-300:active {
        --tw-text-opacity: 1;
        color: rgb(209 213 219 / var(--tw-text-opacity, 1));
    }
}