*, ::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: 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: 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;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.\!absolute {
  position: absolute !important;
}
.absolute {
  position: absolute;
}
.\!relative {
  position: relative !important;
}
.relative {
  position: relative;
}
.\!sticky {
  position: sticky !important;
}
.sticky {
  position: sticky;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.left-3\.5 {
  left: 0.875rem;
}
.left-4 {
  left: 1rem;
}
.right-3\.5 {
  right: 0.875rem;
}
.right-5 {
  right: 1.25rem;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-10 {
  top: 2.5rem;
}
.top-3 {
  top: 0.75rem;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0\.5 {
  margin-right: 0.125rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-4 {
  margin-top: 1rem;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.\!inline {
  display: inline !important;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.\!grid {
  display: grid !important;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.h-0 {
  height: 0px;
}
.h-1 {
  height: 0.25rem;
}
.h-11 {
  height: 2.75rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[10px\] {
  height: 10px;
}
.h-\[14px\] {
  height: 14px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[20px\] {
  height: 20px;
}
.h-\[58px\] {
  height: 58px;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-\[250px\] {
  max-height: 250px;
}
.min-h-\[100dvh\] {
  min-height: 100dvh;
}
.min-h-\[116px\] {
  min-height: 116px;
}
.min-h-\[300px\] {
  min-height: 300px;
}
.w-0 {
  width: 0px;
}
.w-1\/2 {
  width: 50%;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[10px\] {
  width: 10px;
}
.w-\[14px\] {
  width: 14px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[360px\] {
  width: 360px;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[340px\] {
  max-width: 340px;
}
.max-w-\[800px\] {
  max-width: 800px;
}
.max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-\[9px\] {
  --tw-translate-x: -9px;
  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-1\/2 {
  --tw-translate-y: -50%;
  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-\[45\%\] {
  --tw-translate-y: -45%;
  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-x-\[9px\] {
  --tw-translate-x: 9px;
  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));
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[38px_1fr_38px\] {
  grid-template-columns: 38px 1fr 38px;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.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-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-wrap {
  text-wrap: wrap;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[13px\] {
  border-radius: 13px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[16px\] {
  border-radius: 16px;
}
.rounded-\[9px\] {
  border-radius: 9px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-y-\[6px\] {
  border-top-width: 6px;
  border-bottom-width: 6px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-\[9px\] {
  border-left-width: 9px;
}
.border-t {
  border-top-width: 1px;
}
.border-amber-400\/20 {
  border-color: rgb(251 191 36 / 0.2);
}
.border-rose-500\/10 {
  border-color: rgb(244 63 94 / 0.1);
}
.border-rose-500\/15 {
  border-color: rgb(244 63 94 / 0.15);
}
.border-rose-500\/20 {
  border-color: rgb(244 63 94 / 0.2);
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-white\/\[0\.02\] {
  border-color: rgb(255 255 255 / 0.02);
}
.border-white\/\[0\.035\] {
  border-color: rgb(255 255 255 / 0.035);
}
.border-white\/\[0\.03\] {
  border-color: rgb(255 255 255 / 0.03);
}
.border-white\/\[0\.04\] {
  border-color: rgb(255 255 255 / 0.04);
}
.border-white\/\[0\.05\] {
  border-color: rgb(255 255 255 / 0.05);
}
.border-white\/\[0\.06\] {
  border-color: rgb(255 255 255 / 0.06);
}
.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}
.border-y-transparent {
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.border-l-black {
  --tw-border-opacity: 1;
  border-left-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.bg-\[\#000000\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-\[\#050505\] {
  --tw-bg-opacity: 1;
  background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0A0A0A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0E0E0E\] {
  --tw-bg-opacity: 1;
  background-color: rgb(14 14 14 / var(--tw-bg-opacity, 1));
}
.bg-\[\#111\] {
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E5E5E5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/10 {
  background-color: rgb(251 191 36 / 0.1);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-rose-500\/10 {
  background-color: rgb(244 63 94 / 0.1);
}
.bg-rose-500\/5 {
  background-color: rgb(244 63 94 / 0.05);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.02\] {
  background-color: rgb(255 255 255 / 0.02);
}
.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}
.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}
.bg-white\/\[0\.08\] {
  background-color: rgb(255 255 255 / 0.08);
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/20 {
  --tw-gradient-from: rgb(255 255 255 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-white\/25 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.25) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-white {
  fill: #fff;
}
.object-fill {
  -o-object-fit: fill;
     object-fit: fill;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.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;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pl-1\.5 {
  padding-left: 0.375rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.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;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-amber-100\/80 {
  color: rgb(254 243 199 / 0.8);
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300\/80 {
  color: rgb(252 211 77 / 0.8);
}
.text-amber-400\/90 {
  color: rgb(251 191 36 / 0.9);
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-red-400\/80 {
  color: rgb(248 113 113 / 0.8);
}
.text-rose-100\/80 {
  color: rgb(255 228 230 / 0.8);
}
.text-rose-200 {
  --tw-text-opacity: 1;
  color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.text-rose-200\/80 {
  color: rgb(254 205 211 / 0.8);
}
.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-rose-300\/65 {
  color: rgb(253 164 175 / 0.65);
}
.text-rose-300\/75 {
  color: rgb(253 164 175 / 0.75);
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/25 {
  color: rgb(255 255 255 / 0.25);
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/65 {
  color: rgb(255 255 255 / 0.65);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.underline {
  text-decoration-line: underline;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-white {
  accent-color: #fff;
}
.opacity-60 {
  opacity: 0.6;
}
.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-\[-10px_0_30px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: -10px 0 30px rgba(0,0,0,0.5);
  --tw-shadow-colored: -10px 0 30px 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-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 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);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.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-0 {
  --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(0px + 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);
}
.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);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, 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;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.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);
}
.\[-\:\|\\s\] {
  -: |\s;
}
.\[_\:-\] {
  _: -;
}
.\[a-z0-9\:\._-\] {
  a-z0-9: . -;
}
.\[a-z0-9\:_-\] {
  a-z0-9: -;
}
.\[a-z0-9_\:-\] {
  a-z0-9_: -;
}
.\[a-z\:A-Za-z0-9_-\] {
  a-z: A-Za-z0-9 -;
}
.\[a-zA-Z0-9\:_-\] {
  a-z-a--z0-9: -;
}
.\[a-zA-Z0-9\:_\.-\] {
  a-z-a--z0-9: .-;
}
.\[a-zA-Z0-9\:_\.\/\+\=-\] {
  a-z-a--z0-9: ./+=-;
}
.\[a-zA-Z0-9\:_\.\/\+\=\|-\] {
  a-z-a--z0-9: ./+=|-;
}
.\[mock\:fail\] {
  mock: fail;
}
.\[mock\:hide\] {
  mock: hide;
}
.\[mock\:refused\] {
  mock: refused;
}
.\[mock\:unclassified\] {
  mock: unclassified;
}
.\[mock\:vhide\] {
  mock: vhide;
}
.\[mock\:vrefused\] {
  mock: vrefused;
}
.\[mock\:vunclassified\] {
  mock: vunclassified;
}

:root {
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-astro-serif: 'Instrument Serif', 'Georgia', 'Times New Roman', serif;
  --flow-card-h: min(58vh, 460px);
  --flow-gap: 16px;
  --accent-warm: #ff6b3d;
  --accent-rose: #ff2d55;
  /* Brand purple accent — the single accent for the social feed (on full black). */
  --acc: #8b5cf6;
  --acc-hi: #a78bfa;
  --acc-deep: #6d28d9;
  --acc-glow: rgba(139, 92, 246, 0.45);
  /* Subtle fractal-noise grain — layered onto accent surfaces for a premium,
     non-flat texture (background-blend-mode: soft-light). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --surface: #000000;
  --scroll-p: 0;
  --scroll-y: 0px;
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background: var(--surface);
  color: #fff;
  margin: 0;
  padding: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body);
  overscroll-behavior-y: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Clip any horizontal overshoot from full-bleed children (e.g. the
   * 100vw storm section) so they never produce a horizontal scrollbar
   * or shift the layout right. */
  overflow-x: clip;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html.motion-reduced {
  scroll-behavior: auto;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Site chrome ─────────────────────────────────────────────────── */
.site-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  pointer-events: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.36) 54%, transparent 100%);
}

.site-chrome-link,
.site-chrome-flow {
  pointer-events: auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 6px 0;
  transition: color 200ms ease;
}

.site-chrome-link:hover,
.site-chrome-flow:hover,
.site-chrome-flow.is-active {
  color: #fff;
}

/* Right-side cluster: Discord + Telegram + EN/RU. Lives inside the
 * fixed .site-chrome row so it doesn't interfere with masthead/hero. */
.site-chrome-right {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.top-badge {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 24px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(10px) saturate(130%);
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}
.top-badge:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07));
  border-color: rgba(255, 255, 255, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 12px 30px rgba(0, 0, 0, 0.52),
    0 0 22px rgba(255, 255, 255, 0.12);
}
.top-badge:active {
  transform: translateY(0) scale(0.97);
}
.top-badge svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke-width: 2;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}
.top-badge-lang {
  width: auto;
  padding: 0 13px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Mobile: tighten the top-chrome cluster so 5 buttons fit comfortably
 * on small screens. 38px → 34px badges, 10px → 6px gap. Hit area
 * stays at 44px via padding for tap-target compliance. */
@media (max-width: 500px) {
  .site-chrome-left,
  .site-chrome-right {
    gap: 6px;
  }
  .top-badge {
    width: 34px;
    height: 34px;
  }
  .top-badge svg {
    width: 14px;
    height: 14px;
  }
  .top-badge-lang {
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .site-chrome {
    padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  }
}

/* Icon-only variant of .top-badge for the house + sound buttons on
 * the left side of the chrome bar. */
.top-badge-icon {
  padding: 0;
}
.top-badge-icon svg {
  width: 16px;
  height: 16px;
}

/* Left cluster (house + sound) matches the right cluster's layout. */
.site-chrome-left {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

/* ── Anti-download CSS layer ────────────────────────────────────
 * Defeats drag-to-desktop and text-style "Save Image As" paths.
 * The contextmenu+dragstart blockers in Base.astro provide JS
 * enforcement; these CSS rules add a UA-level deterrent. */
video, canvas, .photo-card-img, .hero-top-img, .top-overlay-img {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Per-language visibility filter. Elements tagged data-lang-only="ru"
 * appear ONLY when the document is in RU; similarly for "en". The
 * lang-toggle JS sets <html lang="..."> so this is pure CSS.
 *
 * The reveal uses `display: grid` to match `.top-badge`'s default —
 * inline-flex broke the grid-based icon centering on the badge, so
 * the telegram icon sat off-center vs the discord icon next to it. */
[data-lang-only="ru"] { display: none !important; }
[data-lang-only="en"] { display: none !important; }
html[lang="ru"] .top-badge[data-lang-only="ru"] { display: grid !important; }
html[lang="en"] .top-badge[data-lang-only="en"] { display: grid !important; }
html[lang="ru"] [data-lang-only="ru"]:not(.top-badge) { display: inline !important; }
html[lang="en"] [data-lang-only="en"]:not(.top-badge) { display: inline !important; }

/* Sign-in pill: wider than icon-only badges, with the telegram glyph
 * + label. Premium feel — same glass treatment as top-badge but
 * gets the white text + slight wordmark. */
.top-badge-signin {
  width: auto;
  padding: 0 14px 0 12px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
}
.top-badge-signin svg {
  width: 14px;
  height: 14px;
}
.top-badge-signin span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
/* When signed in, swap the sign-in pill for the user banner. JS adds
 * body.is-signed-in. */
body.is-signed-in #auth-signin { display: none; }
/* Hide ONLY the home button — keep the sound toggle visible so users
 * never lose access to the music control. The user-banner replaces
 * the home button's role (it's effectively the new "you are here"). */
body.is-signed-in #site-home { display: none; }

/* ── User banner ─────────────────────────────────────────────────
 * Fixed top-center wordmark + name, only visible when signed in.
 * Designed to read like editorial credit on a magazine cover. */
/* Minimal top-left name credit when signed in. No pill, no chrome,
 * no sign-out X — sits like editorial credit on a magazine cover.
 * Sign-out remains reachable through the explicit account controls.
 * Hidden entirely on phones (no horizontal room
 * with the existing nav). */
/* The visible "signed in [name] [×]" chrome is fully suppressed on every
 * page. Operator does not want any username pill bleeding onto marketing
 * or app surfaces — signed-in users now identify themselves via the
 * AppNav-rendered email + Sign-out form on signed-in pages, and via the
 * `.top-badge-signin` chrome on the landing/marketing pages.
 *
 * The element stays in the DOM because the auth IIFE in Base.astro reads
 * its `data-bot-id` attribute for the Telegram OAuth flow and writes the
 * resolved user name into `[data-bind="name"]`. Hiding via display:none
 * doesn't break either — dataset reads work on detached elements, and
 * textContent writes don't need layout. Sign-out is handled by AppNav's
 * own form on every signed-in page. */
.user-banner {
  display: none !important;
}
.user-banner[hidden] { display: none !important; }

/* Compact variant kept as a class alias — same minimal treatment
 * on non-home pages, just a slightly smaller name so it sits above
 * page-specific chrome (Creations stats, /v/[id] header) without
 * fighting them. */
.user-banner--compact {
  top: max(12px, env(safe-area-inset-top));
}
.user-banner--compact .user-banner-name { font-size: 18px; }

/* Eyebrow ("signed in") + sign-out X hidden everywhere — name only. */
.user-banner-eyebrow,
.user-banner-signout { display: none !important; }

.user-banner-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.005em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

@keyframes user-banner-enter {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Phones: no room next to existing top-left chrome, just hide. */
@media (max-width: 680px) {
  .user-banner { display: none !important; }
}

.page-shell {
  position: relative;
  z-index: 1;
  background: transparent;
  padding-top: 0;
}

/* ── Landing hero ───────────────────────────────────────────────── */
.hero-top {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  line-height: 0;
  position: relative;
  z-index: 2;
}

.hero-top--brand {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: transparent;
}

/* ── Stacked hero — black base + brand text + paint + figure ─────
 * Layout: pure black background (no image), HTML brand text
 * rendered as the STATIC base, then two animated image layers
 * on top — paint slides slowly down, figure fades up from the
 * shadow with NO 3D distortion. The only scroll-linked motion
 * is the paint drifting up slightly (so the depth still reads
 * once the user starts scrolling). */
.hero-top--stack {
  --hero-progress: 0;
  --hero-iridescent: url('/hero/hero-iridescent.webp');
  background: transparent;
  isolation: isolate;
  overflow: hidden;
}

/* Static brand text — z-index 1, centered, never moves, never animates. */
.hero-top--stack .hero-brand {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 0 clamp(26px, 7vw, 118px) clamp(90px, 11vh, 150px);
  pointer-events: none;
  color: #fff;
}
.hero-top--stack .hero-brand-cta {
  width: min(640px, 46vw);
  position: absolute;
  left: clamp(26px, 7vw, 118px);
  bottom: clamp(192px, 24vh, 286px);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: none;
}
.hero-top--stack .hero-brand-status {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.hero-top--stack .hero-brand-cta-title {
  margin: 0;
  font-family: var(--font-astro-serif);
  font-size: clamp(90px, 10.8vw, 170px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.045em;
  line-height: 0.74;
  text-transform: uppercase;
  color: #fff;
  text-shadow: none;
  filter:
    drop-shadow(0 8px 26px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.1));
}
.hero-top--stack .hero-brand-cta-title span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.5)),
    var(--hero-iridescent) center / 126% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.35px rgba(255, 255, 255, 0.16);
}
.hero-top--stack .hero-brand-cta-title span:first-child {
  transform: translateX(-0.02em);
}
.hero-top--stack .hero-brand-cta-title span:last-child {
  margin-top: -0.05em;
  transform: translateX(0.08em);
}
.hero-top--stack .hero-brand-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  pointer-events: auto;
  /* Hug the two buttons. Without this the wrapper is a block-level flex box
   * that stretches to the full width of .hero-brand-cta (~640px / 46vw), so
   * the flash-swap trigger :has(.hero-brand-actions:hover) fired across a wide
   * invisible band to the RIGHT of the buttons — the hero image switched
   * whenever the cursor swept the top of the page, not only on the CTAs.
   * fit-content confines the hover zone to the buttons (+ the intended 10px
   * gap between them, kept so sweeping BETWEEN the two doesn't flicker). */
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}
/* Premium pill — both CTAs now carry a soft baseline iridescent
 * sheen (the same /hero/hero-iridescent.webp the hover-flash uses)
 * baked into the resting state at low strength, with a slow
 * background-position drift so the buttons feel alive rather than
 * static. On hover the same image pumps to full strength via the
 * existing :hover rule below (cover sizing + brighter overlay).
 *
 * Implementation notes:
 *   - The iridescent image sits BEHIND a translucent white/dark wash
 *     using comma-separated background layers. Top layer is the wash;
 *     bottom layer is the image. background-size for the image is
 *     220% so only a slice shows — that's what drifts under the wash.
 *   - --hero-iridescent is already preloaded via the masthead, so the
 *     baseline doesn't trigger an extra fetch.
 *   - hero-pill-shimmer animation drifts background-position-x slowly
 *     (8s loop). Disabled under prefers-reduced-motion via the media
 *     query at the bottom of the hero block. */
.hero-top--stack .hero-brand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.94)),
    var(--hero-iridescent) 0% 50% / 220% auto;
  background-blend-mode: normal, normal;
  color: #050505;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
  box-shadow:
    0 14px 46px rgba(0, 0, 0, 0.28),
    0 0 32px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  transition:
    transform 160ms ease-out,
    background 240ms ease-out,
    color 160ms ease-out,
    border-color 160ms ease-out,
    box-shadow 200ms ease-out;
  animation: hero-pill-shimmer 8s linear infinite;
}
.hero-top--stack .hero-brand-button--ghost {
  /* Ghost pill — darker translucent wash over the same iridescent
   * sheen, so it picks up the shimmer in a richer, deeper tone. */
  color: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.62)),
    var(--hero-iridescent) 0% 50% / 220% auto;
  box-shadow:
    0 14px 46px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
/* Slow horizontal drift of the iridescent image behind the wash —
 * gives the buttons a quiet, watch-dial-like sheen at rest. */
@keyframes hero-pill-shimmer {
  0%   { background-position: 0% 50%, 0% 50%; }
  50%  { background-position: 0% 50%, 100% 50%; }
  100% { background-position: 0% 50%, 0% 50%; }
}
.hero-top--stack .hero-brand-button:hover,
.hero-top--stack .hero-brand-button:focus-visible {
  transform: translateY(-1px);
  /* Hover pumps the iridescent image to full cover-sized strength
   * with a brighter white wash on top, and brightens the border /
   * outer glow. The drift animation keeps running underneath. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.22)),
    var(--hero-iridescent) center / cover;
  border-color: rgba(255, 255, 255, 0.92);
  color: #050505;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.42),
    0 0 42px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  outline: none;
}
.hero-top--stack .hero-brand-button--ghost:hover,
.hero-top--stack .hero-brand-button--ghost:focus-visible {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .hero-top--stack .hero-brand-button { animation: none !important; }
}
@keyframes hero-cta-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-top--stack .hero-layer {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 106vw;
  height: 100%;
  max-width: none;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  background: transparent;
  transform: translate3d(-50%, 0, 0);
  will-change: opacity, transform;
}

/* PAINT — z-index 2. Slides down from above the section, FULLY
 * VISIBLE the entire time. Then LOCKS at its final landed frame
 * — opacity 1, translateY(0) — forever. No scroll parallax, no
 * fade. Sits behind the woman as a permanent part of the page.
 *
 * `animation-fill-mode: both` holds the FROM keyframe during the
 * 0.75s delay (so the paint stays parked above the section until
 * the slide starts) and holds the TO keyframe forever after. The
 * .is-settled override hard-locks translateY(0) once the slide
 * finishes so nothing can ever move it back. */
.hero-top--stack .hero-layer--paint {
  z-index: 0;
  opacity: 1;
  width: 110vw;
  transform: translate3d(-50%, 0, 0);
  /* The paint PNG is 16:9 (1672×941) with the splatter at the
   * TOP of the canvas, transparent below. Contain + top-anchor it
   * so the painted strip cannot be cropped away on ultrawide or
   * split-screen viewports. */
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  animation: hero-paint-slide 3.6s cubic-bezier(0.22, 0.61, 0.36, 1) 180ms both;
}
@keyframes hero-paint-slide {
  from { transform: translate3d(-50%, -110%, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.hero-top--stack .hero-layer--paint.is-settled {
  animation: none !important;
  transform: translate3d(-50%, 0, 0) !important;
  opacity: 1 !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
/* JS adds .is-settled after animationend and writes the same final
 * transform inline. If animation fill-mode is cleared for any reason,
 * the paint still remains physically locked at the landed frame. */

/* FIGURE — z-index 3. Pure opacity + blur fade from shadow.
 * object-fit: contain so the full figure shows (no auto-zoom from
 * cover when the portrait PNG meets a landscape container).
 * Anchored to the bottom so she "stands on the floor" rather than
 * floating mid-frame. Edges softly masked so the PNG bounding box
 * dissolves into the pure black BG. */
.hero-top--stack .hero-layer--figure {
  z-index: 4;
  opacity: 1;
  filter: blur(0) brightness(1);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 5%, #000 96%, transparent 100%);
          mask-image:
    linear-gradient(to right, transparent 0%, #000 5%, #000 96%, transparent 100%);
  animation: none;
  /* Match the .hero-flash-layer transition so the swap fades smoothly
   * in BOTH directions. Exit delay (90ms) absorbs any micro hover-out /
   * hover-in flickers when the cursor briefly grazes the actions wrapper
   * boundary. The on-hover rule above overrides this delay to 0 so the
   * swap-IN is still instant-feeling. */
  transition: opacity 200ms ease-out 90ms;
  will-change: opacity;
}
@keyframes hero-figure-emerge {
  0%   { opacity: 0;    filter: blur(10px) brightness(0.35); }
  50%  { opacity: 0.55; filter: blur(3px)  brightness(0.7); }
  100% { opacity: 1;    filter: blur(0)    brightness(1); }
}
.hero-top--stack .hero-layer--figure.is-settled {
  animation: none;
  opacity: 1;
  filter: blur(0) brightness(1);
}

.top-stack .hero-flash-layer {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  position: relative;
  z-index: 4;
  opacity: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background-image: url('/hero/hero-flash.webp');
  background-repeat: no-repeat;
  background-size: auto 124%;
  background-position: right clamp(68px, 6vw, 104px) center;
  transform: translate3d(0, 0, 0);
  filter: brightness(0.92) contrast(1.08);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.72) 2.5%, #000 7%, #000 93%, rgba(0, 0, 0, 0.72) 97.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 2.5%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.72) 2.5%, #000 7%, #000 93%, rgba(0, 0, 0, 0.72) 97.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 2.5%, #000 97%, transparent 100%);
          -webkit-mask-composite: source-in, xor;
                  mask-composite: intersect;
  pointer-events: none;
  /* Exit delay (90ms) matches the figure layer's opposite transition so
   * brief cursor exits from .hero-brand-actions don't cause a visible
   * flash dip. The on-hover override below zeroes the delay so the swap
   * IN still feels immediate. */
  transition: opacity 200ms ease-out 90ms;
  will-change: opacity;
}

/* Flash-swap on button hover.
 *
 * The trigger is the ACTIONS WRAPPER, not the individual buttons.
 * Reason: the wrapper has flex-gap between Start-generating and Pick-a-
 * model. When the cursor traverses that gap, `:has(.hero-brand-button:
 * hover)` evaluates FALSE for the few frames the pointer isn't over
 * either button — which made the flash dip back to the figure layer
 * and re-flash forward again. The result was a visible flicker every
 * time the user swept between the two CTAs.
 *
 * `:has(.hero-brand-actions:hover)` stays TRUE for the full crossing
 * (the gap is still inside the wrapper) so the swap is continuous.
 * Keyboard focus path stays on the individual button — focus doesn't
 * have the cursor-traversal problem.
 *
 * The figure layer also gets a matching opacity transition + a brief
 * exit delay so any genuine leave/enter (cursor leaves the wrapper
 * entirely, then re-enters) doesn't visibly snap. */
.top-stack:has(.hero-brand-actions:hover) .hero-layer--figure,
.top-stack:has(.hero-brand-button:focus-visible) .hero-layer--figure {
  opacity: 0 !important;
  transition-delay: 0ms;
}
.top-stack:has(.hero-brand-actions:hover) .hero-flash-layer,
.top-stack:has(.hero-brand-button:focus-visible) .hero-flash-layer {
  opacity: 1;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-top--stack .hero-brand-cta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-top--stack .hero-layer--paint {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-top--stack .hero-layer--figure {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .top-stack .hero-flash-layer {
    display: none !important;
  }
}

@media (max-width: 700px) {
  .hero-top--stack .hero-brand {
    align-items: center;
    text-align: center;
    padding: 0 22px clamp(104px, 16vh, 142px);
  }
  .hero-top--stack .hero-brand-cta {
    width: min(360px, 86vw);
    left: 50%;
    bottom: clamp(150px, 21vh, 218px);
    transform: translate3d(-50%, 16px, 0);
  }
  @keyframes hero-cta-in {
    to {
      opacity: 1;
      transform: translate3d(-50%, 0, 0);
    }
  }
  .top-stack .hero-flash-layer {
    background-size: auto 118%;
    background-position: right 8px center;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.hero-top--brand::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(28vh, 260px);
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.48) 48%, #000 100%),
    radial-gradient(70% 90% at 50% 100%, rgba(255, 255, 255, 0.1), transparent 62%);
}

.hero-top-img {
  display: block;
  width: 100%;
  max-height: none;
  height: 100vh;
  height: 100svh;
  margin: 0;
  padding: 0;
  border: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  background: #000;
}

.hero-top-img--brand {
  -o-object-position: left center;
     object-position: left center;
}

@media (max-width: 700px) {
  .hero-top-img--brand {
    -o-object-position: 69% center;
       object-position: 69% center;
  }
}

.hero-top--brand .hero-top-img:last-child {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.82) 84%,
    rgba(0, 0, 0, 0.36) 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.82) 84%,
    rgba(0, 0, 0, 0.36) 94%,
    transparent 100%
  );
}

/* Fade the BOTTOM edge of the lower hero image (the one directly above
 * the masthead) so its bottom border dissolves into the page below
 * instead of cutting hard. Only applies to the last image inside
 * .hero-top — the upper one keeps its full frame. */
.hero-top-img:last-child {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.6) 78%,
    rgba(0, 0, 0, 0.2) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.6) 78%,
    rgba(0, 0, 0, 0.2) 92%,
    transparent 100%
  );
}

/* ── Scroll-reveal system ─────────────────────────────────────────
 *
 * Generic "push-in" entrance for anything tagged with [data-reveal].
 * Direction via the attribute value:
 *
 *   <div data-reveal>            slide up + fade (default)
 *   <div data-reveal="up">       same
 *   <div data-reveal="left">     slide from left
 *   <div data-reveal="right">    slide from right
 *   <div data-reveal="zoom">     scale + fade
 *
 * Optional stagger: data-reveal-i="<n>" delays the animation by n*70ms.
 *
 * The .is-revealed class is added by the IntersectionObserver in
 * index.astro once the element enters the viewport. prefers-reduced-motion
 * bypasses the transform entirely. */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 700ms ease;
  filter: blur(4px);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
[data-reveal="up"], [data-reveal=""], [data-reveal]:not([data-reveal="left"]):not([data-reveal="right"]):not([data-reveal="zoom"]) {
  transform: translate3d(0, 48px, 0);
}
[data-reveal="left"]  { transform: translate3d(-48px, 0, 0); }
[data-reveal="right"] { transform: translate3d(48px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(0.94); }

[data-reveal].is-revealed,
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ── Top region (sticky-until-pushed) ─────────────────────────────
 *
 * Wraps the sticky stack + the masthead. The sticky behavior is bounded
 * by THIS container's height — once you scroll past .top-region, the
 * stack un-sticks and the gallery slides up to take over the viewport.
 * The .top-region-spacer at the bottom provides the scroll-distance
 * that controls how long the stack stays pinned. */
.top-region {
  position: relative;
  z-index: 5;
}

.top-region-spacer {
  /* Sticky runway after the first viewport. Was 20vh which made the
   * first scroll feel "stuck" — users moved the wheel but the hero
   * stayed pinned with no visible change for 20% of viewport, so
   * many didn't realize the page scrolled. 4vh gives the next
   * section room to peek above the fold immediately on first scroll
   * (clear "there is more below" signal) while still letting the
   * sticky hero hold for a beat. */
  height: 4vh;
  pointer-events: none;
}

/* ── Top sticky stack ────────────────────────────────────────────── */
/* Pinned to the top of .top-region. Uses a CSS grid trick (both
 * children in grid-area 1/1) so the overlay stacks directly on top
 * of the hero images without absolute-positioning sizing math.
 *
 * Negative margin pulls the stack up past .page-shell's 44px chrome
 * padding so the image's top border touches the very top of the
 * viewport. The fixed .site-chrome nav at z-index 120 still renders
 * above it. */
.top-stack {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  width: 100%;
  margin-top: 0;
  pointer-events: none; /* clicks pass through to content underneath */
}

.top-stack::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08), transparent);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.08),
    0 -18px 70px rgba(0, 0, 0, 0.9);
}
.top-stack .hero-top,
.top-stack .top-overlay {
  grid-column: 1;
  grid-row: 1;
}
.top-stack .hero-top {
  z-index: 1;
}
.top-stack .top-overlay {
  z-index: 2;
  align-self: start;
}
/* The nav is layered on top of the stack but absolute-positioned to
 * the BOTTOM edge of the hero stack — so it sits over the dissolving
 * fade of the top-overlay image, reading as "label strip attached to
 * the bottom of the hero." It's pulled out of the grid flow so it
 * doesn't inflate the cell height. */
.top-stack .hero-bridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: clamp(116px, 15vh, 176px);
  padding: clamp(18px, 2.8vh, 32px) clamp(20px, 5vw, 70px);
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16) 26%, rgba(0, 0, 0, 0.76) 78%, #000 100%),
    radial-gradient(80% 105% at 50% 100%, rgba(255, 255, 255, 0.08), transparent 64%);
  backdrop-filter: blur(1px);
}

/* Scroll cue — sits ABOVE the bridge fade, dead-center horizontally.
 * Fades out automatically as the user scrolls: tied to --hero-progress
 * (already updated by the hero IIFE in Base.astro). Opacity 1 at
 * progress 0, hits 0 by progress 0.18 so it disappears the moment
 * the user starts scrolling. Bouncing chevron makes it impossible to
 * miss on a still page. */
.top-stack .hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(140px, 18vh, 220px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.78);
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--hero-progress, 0) * 5.5), 1);
  transition: opacity 200ms ease;
}

.hero-scroll-cue-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero-scroll-cue svg {
  width: 14px;
  height: 20px;
  animation: hero-scroll-cue-bob 1.7s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}

@keyframes hero-scroll-cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* Phones: less vertical room, lift the cue closer to the nav. */
@media (max-width: 680px) {
  .top-stack .hero-scroll-cue {
    bottom: clamp(120px, 14vh, 160px);
  }
  .hero-scroll-cue-label { font-size: 9px; letter-spacing: 0.28em; }
}

/* Respect prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue svg { animation: none; }
}

.hero-bridge::before {
  content: '';
  position: absolute;
  left: clamp(24px, 10vw, 190px);
  right: clamp(24px, 10vw, 190px);
  bottom: 50%;
  height: 1px;
  transform: translateY(-26px);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.1),
    0 14px 46px rgba(0, 0, 0, 0.88);
  pointer-events: none;
}

.top-stack .hero-nav {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* Inner element styles. */
.top-overlay {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.top-overlay-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Aggressive bottom fade — the image dissolves over its bottom HALF
   * so the lower edge blends fully into the page below. Top 35% is
   * fully opaque, then gradually ramps to transparent. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.2) 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 35%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.2) 85%,
    transparent 100%
  );
}

/* ── Editorial intro marker (above masthead) ──────────────────────
 *
 * Tiny year/edition label + a thin vertical white line with a dot
 * traveling down it on loop. Fills the empty space at the top of the
 * page with a premium "art-house catalog" cue instead of a basic
 * "Welcome" or "Scroll ↓" message. */
.intro-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 0 12px;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) 240ms,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 240ms;
}
body.is-loaded .intro-marker {
  opacity: 1;
  transform: translateY(0);
}

.intro-marker-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  padding-left: 0.45em; /* visually balance the wide tracking */
}

.intro-marker-line {
  position: relative;
  width: 1px;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.25) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
  overflow: visible;
}

.intro-marker-dot {
  position: absolute;
  left: -2px;
  top: -5px;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.85),
    0 0 18px rgba(255, 255, 255, 0.45);
  animation: intro-dot-travel 2.6s cubic-bezier(0.55, 0, 0.6, 1) infinite;
}

@keyframes intro-dot-travel {
  0%   { top: -5px;       opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: calc(100% - 0px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-marker { opacity: 1; transform: none; }
  .intro-marker-dot { animation: none; opacity: 0.7; top: 26px; }
}

/* ── Masthead (logo under hero images) ───────────────────────────── */
.masthead {
  position: relative;
  text-align: center;
  padding: 16px 16px 8px;
  /* Fully transparent — clean logo, no shade halo around it. */
  background: transparent;
}

/* ── Hero nav (attached to bottom of sticky hero stack) ───────────
 * Horizontal row of section links glued to the bottom edge of the
 * hero images. They sit OVER the dissolving fade of the top-overlay
 * image so they read as a label strip on the magazine cover edge,
 * not as a separate floating element. Because they live inside
 * .top-stack, they travel with the images while the stack is sticky
 * and slide up together when KIARA SPICY rises from below.
 *
 * The old .masthead-nav selectors are kept aliased here so any prior
 * markup that still references them keeps working. */
.hero-nav,
.masthead-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Bumped gap + font-size + letter-spacing so the nav reads as a
   * proper primary nav instead of a row of tiny grey labels. The old
   * 13px / 0 letter-spacing made the links nearly invisible against the
   * full-bleed hero image, especially on the right half where the
   * paint splatter sits behind them. */
  gap: clamp(24px, 3.8vw, 56px);
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
/* The Fanvue workspace remains operational for direct/private access, but it
 * is not a public homepage destination. Cover both homepage nav variants so a
 * stale or edge-injected link cannot become visible during rollout. */
.hero-nav a[href="/fanvue"],
.sticky-nav a[href="/fanvue"] {
  display: none !important;
}
.hero-nav a,
.masthead-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Larger hit zone + more breathing room around each label. The
   * extra horizontal padding also widens the ::after underline glow so
   * the hover state reads cleanly. */
  min-height: 42px;
  padding: 0 8px 10px;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.98);
  text-decoration: none;
  background: transparent;
  transition:
    color 220ms ease,
    opacity 220ms ease,
    text-shadow 260ms ease,
    transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  white-space: nowrap;
  /* Heavier dark text-shadow stack: the nav sits over a full-bleed
   * hero image with both light and dark regions, so the labels need a
   * solid dark halo to stay legible everywhere. */
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 1),
    0 0 22px rgba(0, 0, 0, 0.9),
    0 0 32px rgba(255, 255, 255, 0.38);
  opacity: 1;
  box-shadow: none;
}
.hero-nav a::after,
.masthead-nav a::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.74) 50%, transparent 100%);
  opacity: 0.34;
  transform: scaleX(0.62);
  transform-origin: 50% 50%;
  border-radius: 1px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
  transition:
    opacity 200ms ease,
    transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-nav a:hover,
.masthead-nav a:hover,
.hero-nav a:focus-visible,
.masthead-nav a:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  opacity: 1;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.92),
    0 0 20px rgba(255, 255, 255, 0.58),
    0 0 42px rgba(255, 255, 255, 0.32);
  outline: none;
}
.hero-nav a:hover::after,
.masthead-nav a:hover::after,
.hero-nav a:focus-visible::after,
.masthead-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ── Sticky nav ─────────────────────────────────────────────────────
 * Fixed top bar that fades + slides in when the hero-bridge nav
 * scrolls off the top of the viewport. Sits BELOW the .site-chrome
 * row (z-index 120) so the home / sign-in / lang icons in the chrome
 * always win. Width has left+right padding sized to clear those
 * icons so the centered nav links never collide with them. */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 115;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Sized to match the bumped hero-nav once the user scrolls past it
   * — same visual weight, just on a frosted bar instead of bare hero. */
  gap: clamp(18px, 2.6vw, 38px);
  padding: 12px clamp(86px, 12vw, 170px);
  font-family: var(--font-body);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  /* Frosted bar — translucent dark + blur + thin shaded border on
   * the bottom for that "subtle line at top of screen" feel. */
  background: rgba(4, 4, 5, 0.92);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.58);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-nav.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 6px 3px;
  white-space: nowrap;
  transition:
    color 220ms ease,
    text-shadow 240ms ease,
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sticky-nav a::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
  transition:
    opacity 200ms ease,
    transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sticky-nav a:hover,
.sticky-nav a:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.4),
    0 0 28px rgba(255, 255, 255, 0.18);
  outline: none;
}
.sticky-nav a:hover::after,
.sticky-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

@media (max-width: 720px) {
  .sticky-nav {
    gap: 16px;
    font-size: 12px;
    letter-spacing: 0.045em;
    padding: 12px 100px;
  }
}
@media (max-width: 480px) {
  .sticky-nav {
    gap: 12px;
    font-size: 11px;
    padding: 11px 88px;
  }
  .sticky-nav a { padding: 6px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-nav {
    transition: opacity 200ms ease;
    transform: translateY(0);
    opacity: 0;
  }
  .sticky-nav.is-active { opacity: 1; }
}
.hero-nav a.is-cta,
.masthead-nav a.is-cta {
  color: #fff;
}
.hero-nav a.is-cta:hover,
.masthead-nav a.is-cta:hover {
  color: #fff;
}
/* Body load-in: the nav fades up alongside the rest of the masthead
 * once first-paint settles. */
.hero-nav {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) 320ms,
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 320ms;
}
body.is-loaded .hero-nav {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 500px) {
  .top-stack .hero-bridge {
    min-height: 112px;
    gap: 0;
    padding: 18px 12px;
  }
  .hero-bridge::before {
    left: 30px;
    right: 30px;
    bottom: 50%;
    transform: translateY(-22px);
  }
  .hero-nav {
    /* Slightly tighter gap on small phones so a bumped-up font-size
     * still fits 5+ links in the row before overflow-scroll kicks in. */
    gap: 18px;
    max-width: calc(100vw - 20px);
    padding: 0 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hero-nav::-webkit-scrollbar { display: none; }
  .hero-nav a {
    min-height: 36px;
    padding: 0 4px 8px;
    font-size: 13px;
    letter-spacing: 0.03em;
  }
}

.masthead-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.masthead-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: clamp(36px, 11vw, 96px);
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
}

.masthead-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(6px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 600ms ease;
}

body.is-loaded .masthead-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

body.is-loaded .masthead-word:nth-child(1) {
  transition-delay: 120ms;
}

body.is-loaded .masthead-word:nth-child(3) {
  transition-delay: 240ms;
}

/* ── SPICY liquid paint-drip fill (scroll-tied) ──────────────────
 *
 * The word is rendered TWICE: the base layer (the .masthead-word--spicy
 * element itself) shows the white wordmark, and a ::after pseudo
 * stacks the dark-red gradient on top, clipped by a turbulence-based
 * SVG mask so the boundary between red and white looks like dripping
 * paint instead of a straight line. JS drives --liquid-y from scroll
 * progress; CSS slides the mask vertically through the glyphs. */
.masthead-word--spicy {
  position: relative;
  color: #ffffff; /* base layer = white */
}

.masthead-word--spicy::after {
  content: 'SPICY';
  position: absolute;
  inset: 0;
  display: inline-block;
  pointer-events: none;
  font: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  line-height: inherit;

  /* Red gradient clipped to letter shapes — this is what "becomes
   * visible" as the user scrolls. Saturated at top, deeper red below. */
  background-image: linear-gradient(
    180deg,
    #ff2a3c 0%,
    #d4001f 38%,
    #8a0014 72%,
    #2a0006 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Particle dust mask: high-frequency feTurbulence thresholded into
   * solid speckles. Wherever a speckle exists in the mask, red shows;
   * everywhere else the white base layer below stays visible. The
   * mask is intentionally bigger than the text so we can drift it
   * around continuously without seeing edges. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cdefs%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 8 0 0 0 -3'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23d)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cdefs%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 8 0 0 0 -3'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23d)'/%3E%3C/svg%3E");
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-size: 220% 220%;
  mask-size: 220% 220%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: var(--dust-x, -20%) var(--dust-y, 0%);
  mask-position: var(--dust-x, -20%) var(--dust-y, 0%);

  /* Slow drift up + side-to-side — gives the dust the feel of particles
   * floating inside the letters at all times. */
  animation: spicy-dust-drift 11s ease-in-out infinite;

  /* Opacity grows with scroll. At scroll-top there's a faint hint of
   * red dust (0.18); as the user scrolls, the dust thickens until the
   * letters are saturated red (1.0). Linear ramp tied to --liquid-y. */
  opacity: calc(0.18 + var(--liquid-y, 0) * 0.0082);
  transition: opacity 180ms ease;
  will-change: opacity, mask-position;
}

@property --dust-x { syntax: '<percentage>'; inherits: false; initial-value: -20%; }
@property --dust-y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

@keyframes spicy-dust-drift {
  0%   { --dust-x: -20%; --dust-y: 35%; }
  50%  { --dust-x: -32%; --dust-y: -25%; }
  100% { --dust-x: -20%; --dust-y: 35%; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead-word--spicy::after {
    transition: none;
  }
}

/* Mobile: drop the feDisplacementMap mask (the most expensive filter
 * on the page — runs every paint while the mask scrolls). Replace
 * with a simple linear-gradient mask. The scroll-fill still works,
 * the boundary is just a smooth line instead of a paint drip. */
@media (hover: none), (max-width: 768px) {
  .masthead-word--spicy::after {
    -webkit-mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 calc(var(--liquid-y, 0) * 1% - 6%),
      transparent calc(var(--liquid-y, 0) * 1% + 6%),
      transparent 100%
    );
    mask-image: linear-gradient(
      to top,
      #000 0%,
      #000 calc(var(--liquid-y, 0) * 1% - 6%),
      transparent calc(var(--liquid-y, 0) * 1% + 6%),
      transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position-y: 0;
    mask-position-y: 0;
  }
}

.masthead-dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin: 0 0.06em 0.18em;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent-rose));
  border-radius: 9999px;
  vertical-align: middle;
  box-shadow: 0 0 14px rgba(255, 90, 70, 0.75);
  opacity: 0;
  transform: scale(0);
  transition: opacity 450ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.is-loaded .masthead-dot {
  opacity: 1;
  transform: scale(1);
  transition-delay: 200ms;
}

/* Launch countdown band between hero and first media rail.
 *
 * Two-column layout: text block on the LEFT (eyebrow + headline +
 * body + countdown clock stacked), hero image on the RIGHT. Mobile
 * collapses to a single stacked column (text first, image below). */
.launch-countdown {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
  width: min(1240px, calc(100vw - 40px));
  margin: clamp(2px, 1.5vh, 18px) auto 0;
  padding: clamp(24px, 4vw, 48px) 0 clamp(16px, 3vw, 32px);
  color: #fff;
}

.launch-countdown-text {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
  min-width: 0;
}

/* Video / image panel — sits as a "window into the scene" rather than
 * a card. The 16:9 box still locks the shape and object-fit:cover
 * still crops, but ALL the card chrome (border, drop-shadow, opaque
 * plate, rounded corners) is gone — the figure now dissolves into the
 * page background on every side via an intersecting linear-gradient
 * mask. This is the same compositing trick the hero-flash-layer uses
 * (horizontal mask × vertical mask via mask-composite: intersect) —
 * proven to work on Chromium + Safari + Firefox.
 *
 * Fade band is 0% → 10% on each edge: at 0% the mask is fully
 * transparent, ramps to opaque by 10%, stays opaque through 90%, then
 * ramps back to transparent at 100%. The intermediate 4% / 96% stops
 * with rgba(0,0,0,0.55) give the falloff an ease-in feel instead of a
 * straight linear ramp, so the video edge dissolves smoothly rather
 * than visibly hitting a hard mask boundary.
 *
 * No background colour, no border, no shadow — anything we keep would
 * announce the figure's bounds and break the "from the background"
 * illusion the operator asked for. */
.launch-countdown-visual {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 4%,
      #000 10%,
      #000 90%,
      rgba(0, 0, 0, 0.55) 96%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 4%,
      #000 10%,
      #000 90%,
      rgba(0, 0, 0, 0.55) 96%,
      transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 4%,
      #000 10%,
      #000 90%,
      rgba(0, 0, 0, 0.55) 96%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 4%,
      #000 10%,
      #000 90%,
      rgba(0, 0, 0, 0.55) 96%,
      transparent 100%);
          -webkit-mask-composite: source-in, xor;
                  mask-composite: intersect;
}
.launch-countdown-visual img,
.launch-countdown-visual video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.launch-countdown::before,
.launch-countdown::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
}

.launch-countdown::before {
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  box-shadow: 0 -34px 90px rgba(0, 0, 0, 0.92);
}

.launch-countdown::after {
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.launch-countdown-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.launch-countdown-title {
  margin: 0;
  font-family: var(--font-astro-serif);
  font-size: clamp(48px, 7.2vw, 108px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.88;
  color: #fff;
  text-wrap: balance;
}

.launch-countdown-body {
  margin: 18px 0 0;
  max-width: 66ch;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

.launch-countdown-clock {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 10px;
  min-width: min(390px, 100%);
}

/* No boxes — the numbers sit straight on the page for a cleaner, more
   premium read. Each unit is just a centered number + label column. */
.launch-countdown-unit {
  position: relative;
  display: grid;
  place-items: center;
  padding: 4px 6px;
}

.launch-countdown-unit span {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(46px, 7vw, 84px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  /* Soft halo so the white numbers stay legible over the backdrop. */
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.5);
}

.launch-countdown-unit small {
  position: relative;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  /* Trailing letter-spacing pushes the word right; nudge it back so the
     tracked label stays optically centered under the number. */
  text-indent: 0.3em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.launch-countdown.is-complete .launch-countdown-title::after {
  content: ' now';
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 860px) {
  .launch-countdown {
    grid-template-columns: 1fr;
    align-items: start;
    width: min(680px, calc(100vw - 32px));
    gap: 24px;
    padding-top: 30px;
  }

  /* Image moves BELOW the text block on mobile, smaller cap so it
   * doesn't dominate the viewport. */
  .launch-countdown-visual {
    aspect-ratio: 16 / 9;
    max-width: 100%;
    margin-top: 4px;
  }

  .launch-countdown-clock {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .launch-countdown {
    width: calc(100vw - 28px);
    padding-top: 26px;
  }

  .launch-countdown-title {
    font-size: clamp(44px, 15vw, 72px);
  }

  .launch-countdown-body {
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .launch-countdown-clock {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .launch-countdown-unit {
    padding: 4px 4px;
  }

  .launch-countdown-unit span {
    font-size: clamp(34px, 12vw, 52px);
  }

  .launch-countdown-unit small {
    margin-top: 9px;
    font-size: 8.5px;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
}

/* Landing model launchpad. */
.landing-model-launchpad {
  position: relative;
  z-index: 5;
  width: min(1320px, calc(100vw - 40px));
  margin: clamp(34px, 7vh, 86px) auto clamp(24px, 5vh, 64px);
  padding: clamp(28px, 4.8vw, 58px) 0 clamp(18px, 3vw, 34px);
  color: #fff;
}

.landing-model-launchpad::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent);
  pointer-events: none;
}

.landing-model-launchpad-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: clamp(18px, 3vw, 34px);
}

.landing-model-launchpad-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.26em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.landing-model-launchpad h2 {
  max-width: 880px;
  margin: 0;
  font-family: var(--font-astro-serif);
  font-size: clamp(46px, 6.8vw, 104px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.9;
  color: #fff;
  text-wrap: balance;
}

.landing-model-launchpad-head p:last-child {
  max-width: 68ch;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  line-height: 1.68;
}

.landing-model-launchpad-actions,
.landing-model-card-actions,
.model-editorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.model-editorial-actions {
  margin-top: 28px;
}

.landing-model-launchpad-actions {
  justify-content: flex-start;
  min-width: 0;
}

.landing-model-launchpad-actions a,
.landing-model-card-actions a,
.landing-model-card-action-disabled,
.model-editorial-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.045);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.landing-model-launchpad-actions a:first-child,
.landing-model-card-actions a:first-child,
.model-editorial-actions a:first-child {
  background: #fff;
  border-color: #fff;
  color: #050505;
}

.landing-model-launchpad-actions a:hover,
.landing-model-card-actions a:hover,
.model-editorial-actions a:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
}

.landing-model-launchpad-actions a:first-child:hover,
.landing-model-card-actions a:first-child:hover,
.model-editorial-actions a:first-child:hover {
  background: rgba(255, 255, 255, 0.86);
  color: #050505;
}

.landing-model-card-action-disabled {
  cursor: default;
  opacity: 0.58;
}

.landing-model-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.landing-model-card {
  --accent: #fff;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(220px, 1fr) auto;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #080808;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.landing-model-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 34%);
  opacity: 0.72;
  pointer-events: none;
}

.landing-model-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
  pointer-events: none;
}

.landing-model-card-media {
  position: relative;
  z-index: 1;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.landing-model-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  filter: grayscale(72%) contrast(1.08) saturate(0.9);
  transform: scale(1.01);
  transition:
    filter 260ms ease,
    transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.landing-model-card:hover .landing-model-card-media img {
  filter: grayscale(0%) contrast(1.02) saturate(1);
  transform: scale(1.045);
}

.landing-model-card-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.92) 18%),
    #080808;
}

.landing-model-card-body p {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 70%, rgba(255, 255, 255, 0.72));
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.15;
  text-transform: uppercase;
}

.landing-model-card-body h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(22px, 2.1vw, 31px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.03;
  color: #fff;
}

.landing-model-card-body > span {
  min-height: 72px;
  color: rgba(255, 255, 255, 0.67);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

.landing-model-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.landing-model-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.landing-model-card-actions {
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .landing-model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .landing-model-launchpad {
    width: calc(100vw - 28px);
    padding-top: 32px;
  }

  .landing-model-launchpad-head { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero-top--stack .hero-brand-actions,
  .landing-model-launchpad-actions,
  .landing-model-card-actions,
  .model-editorial-actions {
    align-items: stretch;
  }

  .hero-top--stack .hero-brand-actions a,
  .landing-model-launchpad-actions a,
  .landing-model-card-actions a,
  .landing-model-card-action-disabled,
  .model-editorial-actions a {
    width: 100%;
  }

  .landing-model-grid {
    grid-template-columns: 1fr;
  }

  .landing-model-card {
    min-height: 0;
  }

  .landing-model-card-media {
    aspect-ratio: 16 / 11;
  }

  .landing-model-card-body > span {
    min-height: 0;
  }
}

/* Phone-only landing hero rescue. The desktop hero uses two wide
 * landscape layers; on phones those layers must be reframed instead of
 * treated as a shrunken desktop cover. */
@media (max-width: 700px) {
  html.is-ag-locked .site-chrome {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  html.is-ag-locked .hero-bridge,
  html.is-ag-locked .hero-scroll-cue {
    opacity: 0;
    visibility: hidden;
  }

  .site-chrome {
    align-items: flex-start;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  }

  .site-chrome-left,
  .site-chrome-right {
    min-width: 0;
    gap: 6px;
  }

  .top-badge {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .top-badge svg,
  .top-badge-icon svg {
    width: 14px;
    height: 14px;
  }

  .top-badge-signin {
    width: 32px;
    padding: 0;
    gap: 0;
  }

  .top-badge-signin span {
    display: none;
  }

  .top-badge-lang {
    width: 32px;
    padding: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .hero-top--stack {
    min-height: 100svh;
  }

  .hero-top--stack .hero-layer {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .hero-top--stack .hero-layer--paint {
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center top;
       object-position: center top;
    animation-name: hero-mobile-paint-slide;
    transform: translate3d(0, 0, 0);
  }

  .hero-top--stack .hero-layer--paint.is-settled {
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center top;
       object-position: center top;
    transform: translate3d(0, 0, 0) !important;
  }

  .hero-top--stack .hero-layer--figure {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 64% center;
       object-position: 64% center;
    filter: brightness(0.76) contrast(1.08);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 84%, transparent 100%);
  }

  .hero-top--stack .hero-brand {
    padding: 0 20px clamp(118px, 17vh, 152px);
  }

  .hero-top--stack .hero-brand-cta {
    bottom: clamp(116px, 18vh, 150px);
    width: min(340px, calc(100vw - 40px));
  }

  .hero-top--stack .hero-brand-status {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .hero-top--stack .hero-brand-cta-title {
    font-size: clamp(62px, 20vw, 84px);
    line-height: 0.78;
    letter-spacing: 0.02em;
  }

  .hero-top--stack .hero-brand-actions {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
  }

  .hero-top--stack .hero-brand-actions a {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .top-stack .hero-bridge {
    min-height: 86px;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .hero-bridge::before {
    left: 18px;
    right: 18px;
    transform: translateY(-18px);
  }

  .top-stack .hero-nav {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: 20px;
    margin: 0;
    padding: 0 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 18px;
  }

  .top-stack .hero-nav a {
    flex: 0 0 auto;
    min-height: 28px;
    font-size: 11px;
  }

  .top-stack .hero-scroll-cue {
    display: none;
  }
}

@keyframes hero-mobile-paint-slide {
  from { transform: translate3d(0, -110%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@media (max-width: 380px) {
  .site-chrome {
    padding-right: 8px;
    padding-left: 8px;
  }

  .site-chrome-right {
    gap: 5px;
  }

  .top-badge,
  .top-badge-signin,
  .top-badge-lang {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .hero-top--stack .hero-brand-cta-title {
    font-size: clamp(58px, 19vw, 74px);
  }

  .hero-top--stack .hero-brand-actions a {
    min-height: 38px;
    padding: 0 10px;
    font-size: 9.5px;
  }

  .top-stack .hero-nav {
    gap: 18px;
    padding-right: 16px;
    padding-left: 16px;
    scroll-padding-inline: 16px;
  }
}

/* ── Flow horizontal gallery ─────────────────────────────────────── */
.flow-wrap {
  position: relative;
  display: flex;
  align-items: center;
  /* Matches the taller .flow-track + breathing room above/below for
   * the per-card Y offsets AND the 3D tilt corners poking out. */
  min-height: calc(var(--flow-card-h) + 150px);
  padding: 8px 0 24px;
  background: transparent;
  transition: opacity 400ms ease;
  /* overflow-x: clip prevents horizontal escape without establishing a
   * scroll context — which lets overflow-y stay visible. Plain
   * `overflow: hidden` would force overflow-y: hidden too and clip the
   * tilted corners. `clip` is the modern (CSS Overflow 3) value for
   * exactly this case. */
  overflow-x: clip;
  overflow-y: visible;
}

.flow-wrap.is-dimmed {
  opacity: 0;
  pointer-events: none;
}

.flow-empty {
  width: 100%;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.flow-track {
  display: flex;
  align-items: center;
  gap: var(--flow-gap);
  width: 100%;
  /* Taller track + bigger vertical padding so cards can sit at their
   * per-card Y offsets, scale up by ~1.08 on hover, AND tilt up to 16°
   * without their corners getting chopped by overflow-y. With X-scroll
   * forced to auto, Y can't be `visible` (CSS spec), so the only fix
   * is making the track tall enough that nothing escapes it. */
  height: calc(var(--flow-card-h) + 130px);
  padding: 68px 8vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.flow-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

.flow-card {
  flex: 0 0 auto;
  height: var(--flow-card-h);
  width: calc(var(--flow-card-h) * var(--ar, 0.5625));
  cursor: pointer;
  /* --y-offset + --rot are set per-card via nth-child below for a
   * hand-arranged, slightly-uneven feel — like prints tossed loosely
   * onto a contact sheet. */
  --y-offset: 0px;
  --rot: 0deg;
  transform: translateY(var(--y-offset)) rotate(var(--rot));
  transform-origin: 50% 50%;
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Per-card Y offsets AND slight rotations — repeats every 9 cards so
 * the pattern never reads as a sine wave. Values picked by hand to
 * look intentional but uneven. */
.flow-track .flow-card:nth-child(9n+1) { --y-offset: 0px;   --rot: -1.6deg; }
.flow-track .flow-card:nth-child(9n+2) { --y-offset: -22px; --rot:  1.4deg; }
.flow-track .flow-card:nth-child(9n+3) { --y-offset:  16px; --rot: -0.8deg; }
.flow-track .flow-card:nth-child(9n+4) { --y-offset: -10px; --rot:  2.2deg; }
.flow-track .flow-card:nth-child(9n+5) { --y-offset:  24px; --rot: -2.4deg; }
.flow-track .flow-card:nth-child(9n+6) { --y-offset: -18px; --rot:  1.0deg; }
.flow-track .flow-card:nth-child(9n+7) { --y-offset:  10px; --rot: -2.8deg; }
.flow-track .flow-card:nth-child(9n+8) { --y-offset: -24px; --rot:  1.8deg; }
.flow-track .flow-card:nth-child(9n+9) { --y-offset:  18px; --rot: -1.2deg; }

.flow-wrap.is-dimmed .flow-card {
  opacity: 0;
}

.flow-card.is-selected {
  opacity: 0;
}

.flow-card-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a0a;
}

/* NEW-drop accent for slot-7: soft golden border + warm glow around
 * the frame, plus a small uppercase "NEW" pill in the top-left.
 * Stays grayscale-pierced (the media itself still respects hover). */
.flow-card--new .flow-card-frame {
  box-shadow:
    0 0 0 2px rgba(251, 215, 134, 0.75),
    0 0 0 4px rgba(251, 191, 36, 0.18),
    0 0 50px -8px rgba(251, 191, 36, 0.55);
  border-radius: 4px;
}
.flow-card-new {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-body, inherit);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3b2a05;
  background: linear-gradient(180deg, #fde68a 0%, #fcd34d 55%, #f59e0b 100%);
  box-shadow:
    0 2px 8px rgba(251, 191, 36, 0.55),
    0 0 0 1px rgba(255, 248, 220, 0.7) inset;
  pointer-events: none;
}

.flow-card-media {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  filter: grayscale(100%) contrast(110%);
  transition:
    filter 300ms ease-out,
    transform 300ms ease-out,
    opacity 300ms ease-out;
  transform: scale(1);
  background: #000;
}

@media (hover: hover) {
  .flow-card:hover .flow-card-media,
  .flow-card.is-previewing .flow-card-media {
    filter: grayscale(0%) contrast(100%);
    transform: scale(1.02);
  }
}

@media (hover: none) {
  /* Mobile content media stays grayscale at rest — same look as the
   * desktop default. The .is-previewing tap state (set in JS) flips
   * to full color, matching the desktop hover. NO automatic "always
   * color on touch" override anymore. */
  .flow-card.is-previewing .flow-card-media {
    filter: grayscale(0%) contrast(100%);
    transform: scale(1.02);
  }

  /* ── Mobile flow-track: native momentum + free both-axis scroll ──
   * Desktop relies on a custom pointer-drag (in index.astro). On
   * touch we skip that handler entirely and trust native overflow-x
   * scroll, which has iOS/Android-native momentum + deceleration
   * built in.
   *
   * touch-action: pan-x pan-y — accepts BOTH horizontal and vertical
   * pan. The browser auto-picks based on the first 5-ish pixels of
   * the gesture: starts horizontal → strip scrolls sideways with
   * native momentum; starts vertical → page scrolls vertically.
   * The user gets full freedom regardless of where their finger
   * lands on the page.
   *
   * overscroll-behavior-x: contain keeps the horizontal rubber-band
   * inside the strip (no whole-page bounce on the side).
   * overscroll-behavior-y: auto lets vertical scroll chain to the
   * page normally so a fast vertical flick over the strip flows
   * straight into the rest of the page.
   *
   * scroll-behavior: auto on touch — `smooth` interferes with iOS
   * native deceleration on some Safari versions. */
  .flow-track {
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    /* Slight bump in left/right inset gives the first and last
     * cards more room to overshoot into during the bounce. */
    padding-left: 22px;
    padding-right: 22px;
  }
  .flow-card,
  .flow-card-media {
    touch-action: pan-x pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
  }
}

.flow-card-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.flow-card-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 280ms ease-out, filter 300ms ease-out, transform 300ms ease-out;
}

.flow-card.is-previewing .flow-card-video {
  opacity: 1;
}

.flow-card-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

/* ── Model spotlight under the first media rail ─────────────────── */
.model-spotlight {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(28px, 6vw, 84px);
  width: min(1280px, calc(100vw - 40px));
  margin: clamp(12px, 4vh, 48px) auto clamp(56px, 10vh, 120px);
  padding: clamp(30px, 5vw, 64px) 0;
  color: #fff;
}

.model-spotlight::before,
.model-spotlight::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent);
  pointer-events: none;
}

.model-spotlight::before { top: 0; }
.model-spotlight::after { bottom: 0; }

.model-spotlight-copy,
.model-samples {
  position: relative;
  z-index: 1;
}

.model-spotlight-eyebrow,
.model-samples-label {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}
/* The sample grid sits below this label — keep the cards' upward
 * scatter from kissing it. The grid itself has padding-top:64px so
 * this just controls the breathing room above the padding band. */
.model-samples-label {
  margin: 0 0 4px;
  position: relative;
  z-index: 5;
}

.model-spotlight-title {
  margin: 0;
  max-width: 9ch;
  font-family: var(--font-astro-serif);
  font-size: clamp(58px, 8.8vw, 126px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.86;
  color: #fff;
}

.model-spotlight-lead {
  margin: 24px 0 0;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.7);
}

.model-spotlight-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 28px 0 0;
  max-width: 560px;
}

.model-spotlight-points span {
  position: relative;
  padding: 0 0 0 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.45;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.model-spotlight-points span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 5px;
  height: 5px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

.model-spotlight-note {
  margin: 24px 0 0;
  max-width: 48ch;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.46);
}

.model-spotlight-status {
  margin: 28px 0 0;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.model-spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.model-spotlight-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.035);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.model-spotlight-actions a:hover {
  border-color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.model-samples {
  align-self: center;
}

/* Asymmetric scattered card grid — uneven column widths + per-card
 * scale make some cards visually dominant while the smaller ones
 * fill the negative space. Bottom-aligned so taller (scaled-up) cards
 * grow UPWARD from their cell, away from the lower edge. 64px top
 * padding absorbs all upward translateY so cards never poke up into
 * the "Dream I output previews" label. */
.model-samples-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.88fr 1.16fr 0.84fr;
  gap: clamp(12px, 1.5vw, 20px);
  align-items: end;
  padding: 64px 0 16px;
}

.model-sample {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #050505;
  cursor: default;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 28px 64px -4px rgba(0, 0, 0, 0.68);
  text-decoration: none;
  transform-origin: center bottom;
  transform:
    translateY(var(--sample-y, 0))
    rotate(var(--sample-r, 0deg))
    scale(var(--sample-scale, 1));
  transition:
    transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms ease;
  will-change: transform;
}

/* Per-card scatter — wider scale + translation range than before,
 * but every translateY stays inside the 64px padding-top budget so
 * the label never gets pushed. Scale values keep the biggest card
 * ~30% bigger than the smallest to read as deliberate hierarchy. */
.model-sample:nth-child(1) { --sample-y: -10px; --sample-r: -2.6deg; --sample-scale: 1.10; }
.model-sample:nth-child(2) { --sample-y: 26px;  --sample-r: 1.8deg;  --sample-scale: 0.93; }
.model-sample:nth-child(3) { --sample-y: -20px; --sample-r: 2.2deg;  --sample-scale: 1.06; }
.model-sample:nth-child(4) { --sample-y: 14px;  --sample-r: -1.4deg; --sample-scale: 0.96; }

.model-sample:hover {
  transform:
    translateY(calc(var(--sample-y, 0) - 6px))
    rotate(var(--sample-r, 0deg))
    scale(calc(var(--sample-scale, 1) * 1.025));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.26),
    0 36px 78px -4px rgba(0, 0, 0, 0.78);
  z-index: 2;
}

.model-sample video,
.model-sample img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(100%) contrast(112%);
  transition:
    filter 240ms ease,
    transform 280ms ease;
}

.model-sample:hover video,
.model-sample:hover img {
  filter: grayscale(0%) contrast(100%);
  transform: scale(1.025);
}

.model-sample--fast {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 24px 68px rgba(0, 0, 0, 0.68),
    0 0 32px rgba(255, 255, 255, 0.08);
}

.model-sample::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 58%, rgba(0, 0, 0, 0.82));
  pointer-events: none;
}

.model-sample span {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

@media (max-width: 900px) {
  .model-spotlight {
    grid-template-columns: 1fr;
    gap: 34px;
    width: min(680px, calc(100vw - 32px));
    margin-top: 24px;
  }

  .model-spotlight-title {
    max-width: 11ch;
  }

  .model-samples-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 16px 0;
    gap: 10px;
  }

  .model-sample:nth-child(1),
  .model-sample:nth-child(2),
  .model-sample:nth-child(3),
  .model-sample:nth-child(4) {
    --sample-y: 0px;
    --sample-r: 0deg;
    --sample-scale: 1;
  }
}

@media (max-width: 560px) {
  .model-spotlight {
    width: calc(100vw - 28px);
    padding: 34px 0 42px;
  }

  .model-spotlight-title {
    max-width: none;
    font-size: clamp(48px, 15vw, 64px);
  }

  .model-spotlight-points {
    grid-template-columns: 1fr;
  }

  .model-samples-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .model-sample span {
    left: 8px;
    right: 8px;
    bottom: 8px;
    font-size: 8px;
    letter-spacing: 0.16em;
  }
}

/* ── Flow focus view ───────────────────────────────────────────────── */
/* Editorial model chapters. */
.model-editorial {
  position: relative;
  z-index: 3;
  width: min(1280px, calc(100vw - 40px));
  margin: clamp(42px, 8vh, 112px) auto;
  color: #fff;
}

.model-editorial::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
}

.model-editorial-copy,
.zmax-copy,
.vogue-copy {
  position: relative;
  z-index: 1;
}

.model-editorial-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.model-editorial-title {
  margin: 0;
  font-family: var(--font-astro-serif);
  font-size: 6.5rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.88;
  color: #fff;
}

.model-editorial-lead {
  margin: 24px 0 0;
  max-width: 58ch;
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.model-editorial-note {
  margin: 22px 0 0;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.model-editorial--realism {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(300px, 0.72fr);
  gap: clamp(34px, 7vw, 96px);
  align-items: center;
  padding: clamp(40px, 6vw, 78px) 0;
}

.compare-stage {
  justify-self: end;
  width: min(430px, 100%);
}

.compare-frame {
  --compare-pos: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 2667;
  max-height: 82vh;
  overflow: hidden;
  border-radius: 8px;
  background: #050505;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 34px 90px rgba(0, 0, 0, 0.72);
  cursor: ew-resize;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.compare-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.compare-img--after {
  clip-path: inset(0 0 0 var(--compare-pos));
}

.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-pos);
  z-index: 3;
  width: 2px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.5),
    0 0 40px rgba(227, 23, 23, 0.22);
  transform: translateX(-50%);
  pointer-events: none;
}

.compare-divider span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 0 38%, #fff 38% 43%, transparent 43% 57%, #fff 57% 62%, transparent 62%),
    rgba(0, 0, 0, 0.42);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.56);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px);
}

.compare-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

.compare-label {
  position: absolute;
  top: 12px;
  z-index: 5;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
}

.compare-label--before { left: 12px; }
.compare-label--after { right: 12px; }

/* Single center-top label that swaps between "Original" and
 * "Kiara Realism" depending on which side of the split is dominant.
 * Replaces the two corner labels — one anchor reads cleaner. */
.compare-label--center {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.compare-label--center[data-side="original"] {
  background: rgba(0, 0, 0, 0.52);
  border-color: rgba(255, 255, 255, 0.22);
}
.compare-label--center[data-side="realism"] {
  background: rgba(0, 0, 0, 0.52);
  border-color: rgba(255, 255, 255, 0.32);
}

.model-editorial--zmax {
  width: min(1160px, calc(100vw - 40px));
  padding: clamp(42px, 6vw, 82px) 0 clamp(48px, 7vw, 96px);
  text-align: center;
}

.zmax-visual {
  position: relative;
  margin: 0 auto clamp(28px, 5vw, 58px);
  width: min(980px, 100%);
  overflow: hidden;
  border-radius: 8px;
  background: #050505;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 34px 110px rgba(0, 0, 0, 0.72);
}

.zmax-visual img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 320px;
  max-height: 70vh;
  -o-object-fit: cover;
     object-fit: cover;
  filter: saturate(1.12) contrast(1.04);
}

.zmax-copy {
  display: grid;
  justify-items: center;
}

.zmax-copy .model-editorial-lead {
  max-width: 78ch;
}

/* ── Kiara model marquee (under upcoming lanes section) ───────────
 * Horizontal infinite ticker. Track is duplicated once in markup
 * and animated by translateX 0 → -50% so the wrap-around lands on
 * the duplicate at pixel-exact position — no visual seam. Edges
 * are mask-faded so labels fade in from the right and out on the
 * left. Soft white, uppercase, wide letter-spacing — reads as a
 * sponsor / partner roster, exactly the website pattern requested. */
.kiara-marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: clamp(40px, 6vw, 80px) auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kiara-marquee-track {
  display: inline-flex;
  align-items: center;
  /* NO gap. flex-gap distributes between every adjacent pair, which
   * creates an asymmetric spacing pattern between the two duplicate
   * sets (29 internal gaps + 1 boundary gap ≠ 2× of half the gaps).
   * translateX(-50%) ends up off by half-a-gap, producing a visible
   * jitter on every loop. Using margin-right on EACH item gives
   * uniform spacing everywhere — set 1 width = set 2 width exactly,
   * and translateX(-50%) lands precisely at the start of set 2. */
  width: -moz-max-content;
  width: max-content;
  animation: kiara-marquee-drift 60s linear infinite;
  will-change: transform;
}
.kiara-marquee:hover .kiara-marquee-track {
  /* Slow further on hover so users can actually read individual names. */
  animation-duration: 120s;
}
.kiara-marquee-item {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
  margin-right: 38px;
  transition: color 200ms ease;
}
.kiara-marquee-track:hover .kiara-marquee-item {
  color: rgba(255, 255, 255, 0.9);
}
.kiara-marquee-dot {
  color: rgba(255, 255, 255, 0.22);
  font-size: 14px;
  line-height: 1;
  margin-right: 38px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@keyframes kiara-marquee-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kiara-marquee-track { animation: none; }
}
@media (max-width: 640px) {
  .kiara-marquee { margin-top: clamp(28px, 5vw, 44px); }
  .kiara-marquee-item,
  .kiara-marquee-dot { margin-right: 28px; }
  .kiara-marquee-item { font-size: 10.5px; letter-spacing: 0.18em; }
}

.model-editorial--vogue {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1fr);
  gap: clamp(34px, 7vw, 90px);
  align-items: center;
  padding: clamp(40px, 6vw, 78px) 0;
}

.vogue-gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
}

.vogue-frame {
  position: relative;
  margin: 0;
  aspect-ratio: 1500 / 2667;
  overflow: hidden;
  border-radius: 8px;
  background: #050505;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 28px 80px rgba(0, 0, 0, 0.65);
}

.vogue-frame--primary {
  transform: translateY(32px);
}

.vogue-frame--secondary {
  transform: translateY(-28px);
}

.vogue-frame img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: contrast(1.02) saturate(0.98);
  transition:
    filter 260ms ease,
    transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.vogue-frame:hover img {
  filter: contrast(1.04) saturate(1.08);
  transform: scale(1.025);
}

@media (max-width: 900px) {
  .model-editorial {
    width: min(720px, calc(100vw - 32px));
  }

  .model-editorial--realism,
  .model-editorial--vogue {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .compare-stage {
    justify-self: center;
    width: min(430px, 100%);
  }

  .model-editorial--zmax {
    width: min(760px, calc(100vw - 32px));
  }

  .model-editorial-title {
    font-size: 5.1rem;
  }

}

@media (max-width: 560px) {
  .model-editorial {
    width: calc(100vw - 28px);
    margin: 44px auto;
  }

  .model-editorial-title { font-size: 3.8rem; }

  .model-editorial-lead {
    font-size: 1rem;
    line-height: 1.62;
  }

  .compare-stage {
    width: min(340px, 100%);
  }

  .compare-label {
    top: 9px;
    padding: 6px 8px;
    font-size: 9px;
  }

  .compare-label--before { left: 9px; }
  .compare-label--after { right: 9px; }
  .compare-label--center { left: 50%; }

  .zmax-visual img {
    min-height: 220px;
  }

  .vogue-gallery {
    grid-template-columns: 1fr;
  }

  .vogue-frame {
    width: min(340px, 100%);
    margin: 0 auto;
  }

  .vogue-frame--primary,
  .vogue-frame--secondary {
    transform: none;
  }
}

/* Flow focus view. */
.flow-focus {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  pointer-events: none;
}

.flow-focus.is-open {
  display: block;
  pointer-events: auto;
}

/* Looping dust video behind the focus modal. Sits at z 0 so the
 * backdrop click-target (z 1) and the layout (z 1) render above it.
 * If the video fails to load, the .flow-focus-backdrop's solid #000
 * is what the user sees — graceful pitch-black fallback, no jump. */
.flow-focus-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  pointer-events: none;
  background: #000;
}

.flow-focus-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  /* Translucent so the dust video shows through. The black undercoat
   * is what falls back if the video doesn't render. */
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.flow-focus-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr min(380px, 36vw);
  width: 100%;
  height: 100%;
  animation: flow-focus-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flow-focus-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.flow-focus-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  min-width: 0;
}

.flow-focus-close {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 200ms ease;
}

.flow-focus-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.flow-focus-media-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 88vh;
  animation: flow-media-in 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flow-media-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.flow-focus-image,
.flow-focus-video {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  background: #000;
}

.flow-focus-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 48px 28px 48px 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  animation: flow-panel-in 500ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.flow-focus-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@keyframes flow-panel-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.flow-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.flow-meta-row:last-child {
  border-bottom: 0;
}

.flow-meta-icon {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.flow-meta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.flow-meta-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.flow-meta-value {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
}

/* ── Glitch word ──────────────────────────────────────────────────
 * Briefly trips out the letters and swaps to data-glitch, then snaps
 * back. JS in index.astro adds .is-glitching when the scroll crosses
 * a specific trigger point. RGB-split shake via text-shadow + shake
 * via transform keyframes. Single shot, no infinite animations. */
.glitch-word {
  display: inline-block;
  position: relative;
  font-variant-ligatures: none;
  will-change: transform, text-shadow;
}
.glitch-word.is-glitching {
  animation: glitch-jitter 320ms steps(7, end);
  text-shadow:
    2px 0 rgba(255, 60, 110, 0.9),
    -2px 0 rgba(60, 200, 255, 0.9),
    0 0 14px rgba(255, 255, 255, 0.2);
}
@keyframes glitch-jitter {
  0%   { transform: translate(0, 0) skewX(0); }
  10%  { transform: translate(-2px, 1px) skewX(-4deg); }
  20%  { transform: translate(2px, -1px) skewX(3deg); }
  30%  { transform: translate(-1px, 2px) skewX(-2deg); }
  40%  { transform: translate(2px, 0) skewX(4deg); }
  50%  { transform: translate(0, -2px) skewX(-3deg); }
  60%  { transform: translate(-2px, 1px) skewX(2deg); }
  70%  { transform: translate(1px, -1px) skewX(-2deg); }
  80%  { transform: translate(0, 2px) skewX(3deg); }
  90%  { transform: translate(-1px, -1px) skewX(-1deg); }
  100% { transform: translate(0, 0) skewX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .glitch-word.is-glitching {
    animation: none;
    text-shadow: none;
  }
}

/* ── Photo stack (scattered table-pile) ──────────────────────────
 *
 * Eight images positioned at hand-picked rotations + offsets so they
 * read like physical prints thrown on a table. Default everything is
 * grayscale; a per-card pointer-tracked radial mask "lifts" the gray
 * top layer in a circle around the cursor, revealing the color image
 * beneath. Cards stagger in from above when the section becomes
 * visible.
 *
 * Each .photo-card has two stacked <img>:
 *   .photo-card-img--color → z 1, full color
 *   .photo-card-img--bw    → z 2, grayscale + mask hole at cursor
 */
.photo-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  perspective: 1200px;
  perspective-origin: 50% 30%;
  z-index: 1;
}

.photo-card {
  --reveal-r: 110px;
  --cx: -9999px;
  --cy: -9999px;
  position: absolute;
  width: 46%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0a0a;
  cursor: none;
  transform-origin: 50% 50%;
  /* Polaroid-style frame: thin white edge + heavy bottom shadow gives
   * the table-print depth. */
  box-shadow:
    0 0 0 6px #f7f5ef inset,
    0 2px 0 6px rgba(255, 255, 255, 0.04) inset,
    0 30px 50px -20px rgba(0, 0, 0, 0.85),
    0 8px 20px -8px rgba(0, 0, 0, 0.5);
  /* Reveal animation starting state. */
  opacity: 0;
  transition:
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 380ms ease,
    z-index 0s 380ms;
  will-change: transform, opacity;
}

/* Each card gets a unique scatter via hand-tuned nth-child positions.
 * The base transform sits inside a CSS variable so the entrance
 * animation can drive in/out of the rotated/offset rest state. */
.photo-card:nth-child(1) { top: 2%;  left: 1%;  --rot: -10deg; z-index: 1; }
.photo-card:nth-child(2) { top: 6%;  left: 32%; --rot: 5deg;   z-index: 3; width: 48%; aspect-ratio: 4 / 5; }
.photo-card:nth-child(3) { top: 11%; left: 57%; --rot: -3deg;  z-index: 2; width: 42%; aspect-ratio: 3 / 4; }
.photo-card:nth-child(4) { top: 32%; left: 5%;  --rot: 6deg;   z-index: 4; }
.photo-card:nth-child(5) { top: 36%; left: 35%; --rot: -7deg;  z-index: 5; width: 48%; aspect-ratio: 1 / 1; }
.photo-card:nth-child(6) { top: 48%; left: 60%; --rot: 4deg;   z-index: 3; width: 40%; aspect-ratio: 3 / 4; }
.photo-card:nth-child(7) { top: 62%; left: 8%;  --rot: -5deg;  z-index: 4; width: 46%; aspect-ratio: 4 / 5; }
.photo-card:nth-child(8) { top: 68%; left: 42%; --rot: 8deg;   z-index: 6; width: 46%; aspect-ratio: 3 / 4; }

/* Idle (rest) transform = the scattered position. The entry animation
 * pivots from a higher Y and slightly more extreme rotation. */
.photo-card {
  transform: rotate(var(--rot, 0));
}
.photo-stack:not(.is-revealed) .photo-card {
  opacity: 0;
  transform: translate3d(0, -60px, 0) rotate(calc(var(--rot, 0) * 1.4)) scale(0.96);
  filter: blur(3px);
}
.photo-stack.is-revealed .photo-card {
  opacity: 1;
  transform: rotate(var(--rot, 0));
  filter: blur(0);
  /* Stagger via the --reveal-i index inline on each card. */
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-i) * 90ms),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-i) * 90ms),
    filter 600ms ease calc(var(--reveal-i) * 90ms),
    box-shadow 320ms ease;
}

/* Hover: lift the card off the pile, pop above siblings, brighten the
 * frame and grow the spotlight. */
.photo-card:hover {
  z-index: 20 !important;
  transform: rotate(calc(var(--rot, 0) * 0.5)) translate3d(0, -10px, 0) scale(1.03);
  box-shadow:
    0 0 0 6px #ffffff inset,
    0 2px 0 6px rgba(255, 255, 255, 0.06) inset,
    0 40px 70px -20px rgba(0, 0, 0, 0.9),
    0 14px 30px -8px rgba(0, 0, 0, 0.5);
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms ease;
}

.photo-card-img {
  position: absolute;
  inset: 6px;        /* matches the inset white-frame box-shadow */
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
.photo-card-img--color { z-index: 1; }
.photo-card-img--bw {
  z-index: 2;
  filter: grayscale(100%) contrast(105%);
  /* Mask hole at cursor — color version peeks through where the hole
   * is. Off-stack default keeps the hole hidden. */
  -webkit-mask-image: radial-gradient(
    circle var(--reveal-r) at var(--cx) var(--cy),
    transparent 0%,
    transparent calc(var(--reveal-r) - 28px),
    rgba(0, 0, 0, 0.5) calc(var(--reveal-r) - 10px),
    #000 var(--reveal-r),
    #000 100%
  );
  mask-image: radial-gradient(
    circle var(--reveal-r) at var(--cx) var(--cy),
    transparent 0%,
    transparent calc(var(--reveal-r) - 28px),
    rgba(0, 0, 0, 0.5) calc(var(--reveal-r) - 10px),
    #000 var(--reveal-r),
    #000 100%
  );
  transition: -webkit-mask-position 60ms linear, mask-position 60ms linear;
}

@media (hover: none) {
  /* Touch: B&W stays the default, and the photo-stack flips to color
   * on tap. Driven by data-revealed="true" on .photo-stack. The radial
   * mask trick is irrelevant on touch (no cursor) so we drop it. */
  .photo-card { cursor: default; }
  .photo-card-img--bw {
    -webkit-mask-image: none;
    mask-image: none;
    transition: opacity 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .photo-stack[data-revealed="true"] .photo-card-img--bw {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-stack.is-revealed .photo-card {
    transition: none;
  }
  .photo-card:hover { transition: none; }
}

/* On smaller screens, drop the scatter into a tighter grid so cards
 * don't get clipped by the column. */
@media (max-width: 900px) {
  .photo-stack { aspect-ratio: 1 / 1.15; }
  .photo-card { width: 50%; }
}

/* ── Astro showcase (below Flow) ─────────────────────────────────── */
.astro-showcase {
  padding: clamp(56px, 10vh, 120px) clamp(20px, 5vw, 48px);
  background: transparent;
  border: 0;
}

.astro-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.astro-showcase-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 0;
}

.astro-showcase-img {
  display: block;
  width: 100%;
  max-height: min(32vh, 300px);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center top;
     object-position: center top;
  background: #000;
}

.astro-showcase-visual {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.astro-showcase-visual.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.astro-showcase-visual.is-visible .astro-showcase-img--a {
  animation: astro-float-a 7s ease-in-out infinite;
}

.astro-showcase-visual.is-visible .astro-showcase-img--b {
  animation: astro-float-b 7s ease-in-out 0.35s infinite;
}

@keyframes astro-float-a {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes astro-float-b {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.astro-showcase-kicker {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.astro-showcase-title {
  margin: 0 0 20px;
  font-family: var(--font-astro-serif);
  font-size: clamp(2.75rem, 6.5vw, 5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
}

.astro-showcase-line {
  display: block;
}

.astro-showcase-bio {
  margin: 0 0 28px;
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.astro-showcase-models-label {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.astro-model-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.astro-model-chip {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.04);
  transition:
    border-color 200ms ease,
    background 200ms ease,
    transform 200ms ease;
}

.astro-model-chip:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

[data-reveal-copy] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.astro-showcase.is-visible [data-reveal-copy] {
  opacity: 1;
  transform: translateY(0);
}

.astro-showcase.is-visible [data-reveal-copy]:nth-child(1) { transition-delay: 80ms; }
.astro-showcase.is-visible .astro-showcase-title { transition-delay: 140ms; }
.astro-showcase.is-visible .astro-showcase-bio { transition-delay: 220ms; }
.astro-showcase.is-visible .astro-showcase-models { transition-delay: 300ms; }

.astro-showcase.is-visible .astro-model-chip {
  animation: astro-chip-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.astro-showcase.is-visible .astro-model-chip:nth-child(1) { animation-delay: 380ms; }
.astro-showcase.is-visible .astro-model-chip:nth-child(2) { animation-delay: 440ms; }
.astro-showcase.is-visible .astro-model-chip:nth-child(3) { animation-delay: 500ms; }
.astro-showcase.is-visible .astro-model-chip:nth-child(4) { animation-delay: 560ms; }

@keyframes astro-chip-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .astro-showcase-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .astro-showcase-copy {
    text-align: left;
  }

  .astro-showcase-bio {
    max-width: none;
  }
}

/* Mobile: push the whole Astro showcase further down so the
 * "Create with ASTRO" headline can't collide with the SPICY logo
 * sliding up from above. Also ensure the photo-stack lands BELOW the
 * copy block by reversing the column order — copy first, image
 * second — so the heading reads first then the visual gallery sits
 * underneath without crowding the title. */
@media (max-width: 600px) {
  .astro-showcase {
    padding-top: clamp(120px, 22vh, 220px);
  }
  .astro-showcase-grid {
    grid-template-areas:
      "copy"
      "visual";
    gap: 28px;
  }
  .astro-showcase-copy { grid-area: copy; }
  .astro-showcase-visual { grid-area: visual; }
}

/* ── Kiara story (editorial blocks) ──────────────────────────────── */
.kiara-story {
  padding: clamp(48px, 8vh, 96px) clamp(20px, 5vw, 48px) clamp(80px, 12vh, 140px);
  background: transparent;
  border: 0;
  color: #fff;
}

/* Mobile: extra top padding so the "ASTRO's Favorite Models" heading
 * clears the dissolving bottom edge of the hero stack above. Without
 * this, on iPhone the heading collides with the faded-out corner of
 * the top-overlay image. */
@media (max-width: 600px) {
  .kiara-story {
    padding-top: clamp(110px, 18vh, 180px);
  }
}

.kiara-block {
  max-width: 1100px;
  margin: 0 auto clamp(56px, 8vh, 88px);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Skip painting + layout for blocks not in viewport. Browser uses
   * intrinsic-size as a placeholder reservation so scrollbar doesn't
   * jump when blocks pop into view. */
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
  contain: layout style paint;
}
/* Storm block needs full height + full-bleed so don't contain it
 * (containment would reset its 100vw breakout). */
.kiara-block--storm {
  content-visibility: visible;
  contain: none;
  contain-intrinsic-size: auto;
}

.kiara-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.kiara-block--center {
  text-align: center;
  max-width: 720px;
}

.kiara-block--divider {
  /* Extra breathing room around the Video→Image transition so the
   * sections don't read as glued together. */
  margin-top: clamp(48px, 8vh, 96px);
  margin-bottom: clamp(56px, 9vh, 112px);
  padding-top: clamp(40px, 6vh, 72px);
  padding-bottom: clamp(40px, 6vh, 72px);
  border-bottom: 0;
}

.kiara-block--highlight {
  padding: clamp(20px, 4vh, 32px) 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* ── Section-scoped video backdrop (FULL-SCREEN PREVIEW) ──────────
 * "The Story of Kiara Spicy" block stretches edge-to-edge of the
 * viewport and fills its full height. The storm-cloud video covers
 * the whole block; the prose centers on top of it. Breaks out of the
 * parent .kiara-story / .kiara-block max-widths via the classic
 * 100vw + translateX trick. */
.kiara-block--storm {
  position: relative;
  isolation: isolate;
  /* Classic full-bleed: width = viewport, pulled left by exactly the
   * amount needed to land at the viewport's left edge regardless of
   * the parent's horizontal padding. Works because the left:50% offset
   * is relative to PARENT, then margin-left:-50vw cancels it back to
   * viewport-zero. No transform involved, so it's stable. */
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 9vh, 100px) clamp(24px, 5vw, 80px);
}

.kiara-block-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0;
  /* Soft fade only at top + bottom so the section blends into the
   * page above and below, but the storm fills horizontally edge to
   * edge — full-screen impact. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.kiara-block-bg-video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Pull the storm down a little so the brightest lightning core
   * sits behind the heading text — extra drama where it matters. */
  filter: brightness(0.85) contrast(115%);
  /* A subtle dark veil over the top edge keeps the prose readable
   * over the brightest lightning flashes. */
  opacity: 0.95;
}

/* Sit the prose above the video. */
.kiara-block--storm > .kiara-subheading,
.kiara-block--storm > p {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  /* Soft text-shadow keeps the white prose legible over lightning
   * flashes without needing a solid overlay. */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.kiara-block--finale {
  margin-bottom: 0;
  padding-top: clamp(24px, 4vh, 40px);
}

.kiara-heading {
  margin: 0 0 20px;
  font-family: var(--font-astro-serif);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}

.kiara-subheading {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

.kiara-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
}

.kiara-lead {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  line-height: 1.7;
  color: #fff;
}

.kiara-lead:last-child {
  margin-bottom: 0;
}

.kiara-prose {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.72;
  color: #fff;
}

.kiara-prose--emphasis {
  color: #fff;
  font-size: clamp(1rem, 1.7vw, 1.08rem);
}

.kiara-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 44px);
  margin-top: clamp(24px, 4vh, 36px);
}

.kiara-model {
  padding: 0;
  border: none;
  background: none;
}

.kiara-model-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.kiara-model-logo {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

/* Third-party brand badges (OpenAI, Seedance/ByteDance, Nano Banana,
   Kling, Wan) ship in their real brand colors — skip the white-flatten
   filter so they render exactly like the /try model picker. */
.kiara-model-logo--brand {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
  opacity: 1;
  border-radius: 5px;
}

.kiara-model-name span {
  line-height: 1.2;
}

.kiara-model p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: #fff;
}

.kiara-block--split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: 1180px;
}

.kiara-block--split-reverse {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.kiara-block--split-reverse .kiara-split-prose {
  order: 1;
}

.kiara-block--split-reverse .kiara-split-aside {
  order: 2;
}

.kiara-split-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 0;
}

.kiara-split-img {
  display: block;
  width: 100%;
  max-height: min(28vh, 260px);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center top;
     object-position: center top;
}

.kiara-split-prose p {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.72;
  color: #fff;
}

.kiara-split-aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  /* No padding-left so the video can span the full aside column. */
  padding-left: 0;
  border-left: 0;
  /* Keep the aside above nearby section art so the clip stays readable. */
  position: relative;
  z-index: 20;
  /* Let the video overshoot the column slightly toward the prose,
   * making the frame visibly bigger than the grid track. */
  margin-left: clamp(-32px, -3vw, -12px);
}

/* ── Side video (Building the Future) ────────────────────────────── */
/* Wrapper hosts the video frame + the wordmark overlay as SIBLINGS, so
 * the wordmark text can spill past the rounded frame without being
 * clipped by the video's overflow:hidden. */
.story-video-wrap {
  position: relative;
  z-index: 21;
  width: 100%;
  /* Slightly bigger frame. */
  max-width: clamp(320px, 36vw, 440px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  --scroll-y: 0px;
}

.story-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  background: #050507;
  box-shadow: 0 22px 56px -20px rgba(0, 0, 0, 0.85);
}

/* The whole wrap animates (so video + logos travel together) — apply
 * the reveal-in + parallax on the wrap, not the inner frame. */
.story-video-wrap {
  opacity: 0;
  transform: translateX(28px) scale(0.97);
  filter: blur(2px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 800ms ease;
}
.kiara-block--split.is-visible .story-video-wrap {
  opacity: 1;
  transform: translate3d(0, var(--scroll-y, 0px), 0) scale(1);
  filter: blur(0);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) 180ms,
    transform 280ms ease-out,
    filter 800ms ease 180ms;
}

.story-video-el {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Subtle additional scroll-driven scale to give the video life
   * even when the parent's parallax slowdown is gentle. */
  transition: transform 480ms ease-out;
}

/* Make the aside override slightly more aggressive so the bigger video
 * doesn't get cut off when the parent column is narrow. */
.kiara-block--split-reverse .kiara-split-aside {
  z-index: 20;
}

/* ── Logo overlay (cycles on scroll) ──────────────────────────────
 * Big white wordmark sitting OVER the video, but mounted on the wrap
 * so the text can extend past the rounded frame on either side. JS
 * adds .is-active to one logo at a time based on scroll progress. */
.story-video-logos {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: visible;
}
.story-video-logo {
  position: absolute;
  /* Instrument Serif italic — premium editorial serif, already loaded
   * by Base.astro. Reads like a fashion-house or art-catalog wordmark
   * rather than a UI title. Slight italic + tight optical kerning gives
   * it the "special" feel. */
  font-family: var(--font-astro-serif, 'Instrument Serif', Georgia, serif);
  font-style: italic;
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  /* Heavier text shadow + thin outer halo so it stays readable when
   * half of it is over a busy video frame and half is in negative space. */
  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.85),
    0 0 28px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  filter: blur(4px);
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 480ms ease;
  will-change: opacity, transform, filter;
}
.story-video-logo.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .story-video-logo {
    transition: opacity 200ms linear;
    transform: none;
    filter: none;
  }
  .story-video-logo.is-active { transform: none; }
  .story-video {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

.kiara-aside-line {
  display: block;
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.35);
}

.kiara-aside-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  .kiara-models {
    grid-template-columns: 1fr;
  }

  .kiara-block--split,
  .kiara-block--split-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .kiara-block--split-reverse .kiara-split-prose,
  .kiara-block--split-reverse .kiara-split-aside {
    order: unset;
  }

  .kiara-split-aside {
    flex-direction: row;
    align-items: center;
    min-height: 0;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
  }

  .kiara-aside-label {
    writing-mode: horizontal-tb;
    transform: none;
  }
  :root {
    --flow-card-h: min(52vh, 360px);
    --flow-gap: 12px;
  }

  .flow-track {
    height: calc(var(--flow-card-h) + 96px);
    padding: 48px 8vw;
  }

  .flow-focus-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    overflow-y: auto;
  }

  .flow-focus-stage {
    padding: 56px 16px 16px;
  }

  .flow-focus-panel {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 20px 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .astro-showcase-img--a,
  .astro-showcase-img--b,
  .astro-model-chip,
  .kiara-block {
    animation: none !important;
  }

  .kiara-block {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .masthead,
  .masthead-word,
  .flow-card-media,
  .flow-focus-layout,
  .flow-focus-panel,
  .flow-focus-media-wrap {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: grayscale(100%) contrast(110%) !important;
  }

  .flow-card:hover .flow-card-media {
    filter: grayscale(0%) contrast(100%) !important;
  }
}

/* ── Reveal stack (hover-to-erase) ─────────────────────────────────
 *
 * Two stacked images of identical dimensions. The TOP image has a
 * radial-gradient mask with a transparent hole tracking the pointer,
 * so moving the cursor "erases" the top image in a spot, revealing
 * the bottom image underneath. Plus a small glass-lens cursor that
 * floats inside the stack while hovered.
 *
 * CSS vars driven by JS:
 *   --cx, --cy   pointer position relative to the stack (px)
 *   --reveal-r   spot radius (px)
 *   --inside     1 while pointer is inside, 0 otherwise
 */
.reveal-stack {
  position: relative;
  width: 100%;
  /* Scale the stack down without breaking the grid column. Caps at
   * 320px on desktop, 78% of its column on small screens, with a
   * sensible floor so it never gets fingernail-tiny. */
  max-width: clamp(260px, 34vw, 400px);
  margin: 0 auto;
  aspect-ratio: 1152 / 2048;
  border-radius: 18px;
  overflow: hidden;
  cursor: none; /* native cursor hidden, glass lens replaces it */
  --cx: -9999px;
  --cy: -9999px;
  --reveal-r: 110px;
  --inside: 0;
}

/* Black inner vignette so the image's slightly-lighter dark background
 * dissolves into our pure-black site background instead of showing a
 * hard rectangle. Asymmetric — right + bottom get a heavier fade so
 * they blend further into the page below and to the side. */
.reveal-stack::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    /* Gentle uniform base on all four sides. */
    inset 0 0 60px 18px #000,
    /* Extra heavy fade on the RIGHT edge. */
    inset -140px 0 110px -40px #000,
    inset -50px 0 60px -10px #000,
    /* Extra heavy fade on the BOTTOM edge. */
    inset 0 -140px 110px -40px #000,
    inset 0 -50px 60px -10px #000,
    /* Extra heavy fade specifically at the BOTTOM-LEFT corner. */
    inset 180px -180px 130px -60px #000,
    inset 80px -80px 80px -20px #000;
}

.reveal-stack-bottom,
.reveal-stack-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Bottom layer keeps a HINT of the original color so when the lens
 * spotlights through, the user sees the real palette of the image —
 * just desaturated. 35% saturation = "still 30%+ of original color"
 * the user asked for. Brightness softened a hair to match the site. */
.reveal-stack-bottom {
  z-index: 1;
  filter: saturate(0.35) brightness(0.85) contrast(108%);
}

/* Top layer stays full black-and-white — that's what's everywhere
 * around the lens. */
.reveal-stack-top { filter: grayscale(100%) brightness(0.65) contrast(115%);
  z-index: 2;
  /* Top image zoomed 2.5% — small but enough to feel a parallax
   * shift on internal features when the spotlight sweeps across. */
  transform: scale(1.025);
  transform-origin: center;
  /* Radial gradient mask: fully transparent inside the inner radius
   * (the "hole" you see through), softly ramps to opaque past the outer
   * radius. Where mask is opaque, the top image is visible; where it's
   * transparent, the bottom image shows through. */
  -webkit-mask-image: radial-gradient(
    circle var(--reveal-r) at var(--cx) var(--cy),
    transparent 0%,
    transparent calc(var(--reveal-r) - 30px),
    rgba(0, 0, 0, 0.5) calc(var(--reveal-r) - 12px),
    #000 var(--reveal-r),
    #000 100%
  );
  mask-image: radial-gradient(
    circle var(--reveal-r) at var(--cx) var(--cy),
    transparent 0%,
    transparent calc(var(--reveal-r) - 30px),
    rgba(0, 0, 0, 0.5) calc(var(--reveal-r) - 12px),
    #000 var(--reveal-r),
    #000 100%
  );
  /* Smooth follow of the mask — feels less jittery on fast moves. */
  transition: -webkit-mask-position 60ms linear, mask-position 60ms linear; }

/* The glass lens cursor floating inside the stack. Adds a subtle
 * color tint (warm amber → rose) via mix-blend-mode + backdrop hue
 * shift so the images peeking through the lens feel special instead
 * of just monochrome. */
.reveal-lens {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--reveal-r) * 2);
  height: calc(var(--reveal-r) * 2);
  margin-left: calc(var(--reveal-r) * -1);
  margin-top: calc(var(--reveal-r) * -1);
  border-radius: 9999px;
  z-index: 4;
  pointer-events: none;
  transform: translate3d(var(--cx), var(--cy), 0);
  opacity: var(--inside);
  transition: opacity 200ms ease;
  /* Glass body: highlight + sharp white rim. */
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.04) 28%,
      transparent 52%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 0 3px rgba(255, 255, 255, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.28);
  /* Neutral glass — no hue shift, no color tint. The desaturated
   * BOTTOM image (which is what shows through the mask hole behind
   * this lens) provides the natural color; the lens just slightly
   * lifts brightness so the spotlit area pops without changing hue. */
  backdrop-filter: blur(0.4px) brightness(1.04);
  -webkit-backdrop-filter: blur(0.4px) brightness(1.04);
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion: skip the reveal interaction entirely. */
  .reveal-stack { cursor: default; }
  .reveal-stack-top { display: none; }
  .reveal-lens { display: none; }
}

@media (hover: none) {
  /* Touch: keep the EXACT same lens-spotlight behavior as desktop.
   * Finger replaces cursor — pointer events fire on touch so we
   * just need to make sure (a) the radial mask stays armed, (b)
   * the lens isn't display:none'd, (c) gestures are allowed to
   * actually drive the lens.
   *
   * touch-action: none means a finger-drag on the image becomes a
   * lens gesture instead of a page scroll. The image is small
   * enough that the user can still scroll the page by starting
   * the drag outside it (padding around the kiara-block gives
   * comfortable wiggle room top + bottom). */
  .reveal-stack {
    cursor: default;
    touch-action: none;
  }
  /* Android Chrome chokes on the 6-stack of inset box-shadows on
   * the vignette ::before. Replace with two reliable shadows.
   * Same dark blend into the page, no white halo. */
  .reveal-stack::before {
    box-shadow:
      inset 0 0 80px 22px rgba(0, 0, 0, 0.85),
      inset -60px -60px 100px -20px rgba(0, 0, 0, 0.9);
  }
  /* Lens stays visible. Slightly bigger radius than desktop so the
   * spotlight isn't hidden by the finger covering it. */
  .reveal-stack {
    --reveal-r: 130px;
  }
  .reveal-lens {
    /* Brighter rim on touch — finger doesn't have a "shadow" the way
     * a cursor does, so the lens needs to read on its own. */
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 255, 255, 0.75),
      inset 0 0 4px rgba(255, 255, 255, 0.18),
      0 4px 14px rgba(0, 0, 0, 0.35);
  }
}

/* ── Flow-track drag cursors ──────────────────────────────────────
 * grab while hovering, grabbing while a drag is in progress. Plus
 * disable text/image selection so dragging doesn't accidentally
 * highlight content. touch-action gets per-axis treatment in the
 * mobile media query above — desktop pointer-drag is handled by JS. */
.flow-track {
  cursor: grab;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.flow-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto; /* drag should feel direct, not eased */
}
.flow-track img, .flow-track video {
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ── Card glow + shimmer ──────────────────────────────────────────
 *
 * Adds a soft warm outer glow + an animated shimmer line that sweeps
 * across the card on hover. Hooks into the existing .flow-card hover
 * state so we don't fight any other rules. Performance: shimmer is a
 * single pseudo-element with a translate keyframe, GPU composited.
 */
.flow-card {
  position: relative;
  isolation: isolate;
  transition:
    opacity 400ms ease,
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 400ms ease,
    box-shadow 400ms ease;
  /* Contain painting + layout to this card. Each hover doesn't
   * invalidate the rest of the gallery's paint tree. */
  contain: layout style paint;
}

.flow-card-frame {
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px -22px rgba(0, 0, 0, 0.8);
  transition: box-shadow 380ms ease;
}

/* 3D parallax tilt — frame rotates around X/Y based on cursor position.
 * Driven by JS-set CSS vars (--tilt-rx/ry/sc) lerped each rAF for a
 * springy feel. Perspective lives on the .flow-card; the frame is the
 * 3D-transformed element so it sits inside the card's base
 * translateY+rotate (the "tossed prints" pattern). Desktop only —
 * touch devices keep the flat behavior.
 *
 * preserve-3d on .flow-card is critical: without it, the parent's own
 * 2D transform (translateY + rotate) flattens the child's 3D rotation
 * to a plane and you see nothing. Paint containment is also dropped
 * here so the tilted/scaled frame can extend slightly beyond the
 * card's border box without being clipped invisible. */
@media (hover: hover) {
  .flow-card {
    perspective: 1100px;
    transform-style: preserve-3d;
    /* paint containment dropped so tilted/scaled corners aren't
     * clipped to the card's box. */
    contain: layout style;
    overflow: visible;
  }
  /* --tilt-rx / --tilt-ry are RAW NUMBERS (degrees as a unitless
   * float) so CSS can reuse them in both the rotation (× 1deg) AND
   * the dynamic shadow offset (× 1px). --glow-x / --glow-y are
   * normalized cursor offsets in [-0.5, 0.5] used to push the warm
   * orange glow toward the cursor side of the card. */
  .flow-card-frame {
    transform:
      rotateX(calc(var(--tilt-rx, 0) * 1deg))
      rotateY(calc(var(--tilt-ry, 0) * 1deg))
      scale(var(--tilt-sc, 1));
    will-change: transform, box-shadow;
    transition: box-shadow 380ms ease;
  }

  /* Hover/preview state: directional drop-shadow + warm glow that
   * shifts toward where the cursor sits. --glow-x / --glow-y drive
   * the horizontal/vertical offset of the orange halo so the light
   * source feels anchored to the cursor instead of stuck under the
   * card. */
  .flow-card:hover .flow-card-frame,
  .flow-card.is-previewing .flow-card-frame {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.14) inset,
      /* black drop-shadow tilts opposite the lifted edge */
      calc(var(--tilt-ry, 0) * 1.5px) calc(var(--tilt-rx, 0) * 1.5px + 28px) 70px -20px rgba(0, 0, 0, 0.92),
      /* warm glow chases the cursor */
      calc(var(--glow-x, 0) * 80px) calc(var(--glow-y, 0) * 80px) 95px -8px rgba(255, 100, 60, 0.55),
      0 0 0 1px rgba(255, 120, 80, 0.20);
  }

  /* ── Specular highlight — moving "lamp" on the surface ─────────
   * Soft radial gradient anchored to the cursor (--cx / --cy in
   * frame-local px). overlay blend mode makes the highlight feel
   * like reflected light on the image instead of a painted blob.
   * Opacity ramps in on hover; fades out cleanly on leave. */
  .flow-card-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
      circle 260px at var(--cx, 50%) var(--cy, 50%),
      rgba(255, 240, 220, 0.28) 0%,
      rgba(255, 180, 140, 0.10) 35%,
      transparent 65%
    );
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity 260ms ease;
    will-change: opacity, background-position;
  }
  .flow-card:hover .flow-card-frame::before,
  .flow-card.is-previewing .flow-card-frame::before {
    opacity: 1;
  }

  /* Shimmer sweep — light bar runs diagonally across the card. */
  .flow-card-frame::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -140%;
    width: 65%;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0) 70%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .flow-card:hover .flow-card-frame::after {
    opacity: 1;
    animation: shimmer-sweep 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
}

@keyframes shimmer-sweep {
  0%   { left: -140%; }
  100% { left: 140%; }
}

/* ── Site footer ──────────────────────────────────────────────────
 * Clean closing band: mark, motto, socials, contact, copyright.
 * Sits naked on the backdrop — no card, no boxes, just the typography
 * with a hairline divider on top. */
.site-footer {
  position: relative;
  padding:
    clamp(64px, 10vh, 120px)
    clamp(20px, 5vw, 48px)
    clamp(10px, 1.6vh, 16px);
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  isolation: isolate;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(60%, 720px);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
}
/* Warm under-glow rising from the bottom edge — replaces the old
 * fire-trail video. Soft amber → transparent, sits behind footer
 * text so the typography stays crisp. Pure CSS, no asset weight. */
.site-footer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(180px, 32vh, 360px);
  background: linear-gradient(
    to top,
    rgba(255, 138, 56, 0.22) 0%,
    rgba(255, 110, 40, 0.14) 25%,
    rgba(255, 90, 30, 0.07) 55%,
    rgba(255, 80, 20, 0.025) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: -1;
}

.site-footer-inner {
  max-width: 680px;
  margin: 0 auto;
}

.site-footer-mark {
  margin: 0 0 14px;
  font-family: var(--font-display, system-ui);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
}

.site-footer-motto {
  margin: 0 0 32px;
  font-family: var(--font-astro-serif, 'Instrument Serif', serif);
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.site-footer-socials {
  display: inline-flex;
  gap: 26px;
  margin: 0 0 28px;
}
.site-footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 200ms ease, transform 200ms ease;
}
.site-footer-socials a:hover {
  color: #ffffff;
  transform: translateY(-1px);
}
.site-footer-socials svg {
  width: 22px;
  height: 22px;
  display: block;
}

.site-footer-contact {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer-meta {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.32);
}

.site-footer-legal {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.32);
}
.site-footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}
.site-footer-legal a:hover { color: rgba(255, 255, 255, 0.8); }
.site-footer-legal span { color: rgba(255, 255, 255, 0.2); }

/* ── Custom cursor circle ─────────────────────────────────────────
 *
 * Replaces the OS cursor with a small transparent circle that uses
 * mix-blend-mode: difference so it inverts whatever's underneath —
 * appears WHITE over dark backgrounds and DARK over light backgrounds.
 * One element, no color, auto-adapts. JS in index.astro keeps it
 * tracking the pointer with a lerp.
 */
@media (hover: hover) {
  html, body { cursor: none; }
  /* Form controls keep their native I-beam/text cursor for usability. */
  input, textarea, [contenteditable="true"] { cursor: text; }
}

.cursor-blob {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 9999; /* above absolutely everything */
  background: transparent;
  border: 1.5px solid #ffffff;
  mix-blend-mode: difference;
  transform: translate3d(-100px, -100px, 0);
  transition: width 180ms ease, height 180ms ease,
              margin 180ms ease, opacity 200ms ease;
  opacity: 1;
}

.cursor-blob.is-active {
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  html, body { cursor: auto; }
  .cursor-blob { display: none; }
}

/* Hide the global cursor circle while the user is over the reveal-stack
 * so we don't show two cursors at once — the glass lens takes over. */
body:has(.reveal-stack:hover) .cursor-blob {
  opacity: 0;
}

/* Production app pages use the native OS cursor. This overrides the
 * older site-wide cursor blob without touching local component cursors
 * such as grab, text, pointer, or disabled states. */
html,
body {
  cursor: auto !important;
}

input,
textarea,
[contenteditable="true"] {
  cursor: text !important;
}

.cursor-blob {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────────────
 * Drop overlay — full-viewport reference attach surface for the
 * Studio / Freestyle composer. Mounted lazily by freestyle-40.js the
 * first time a file-drag enters the page, then toggled .is-active on
 * subsequent drags. Sits at z-index:9999 to clear modals + nav.
 * ──────────────────────────────────────────────────────────────────── */
.kiara-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.kiara-drop-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.kiara-drop-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(20, 20, 22, 0.9);
  border: 1.5px dashed rgba(255, 255, 255, 0.38);
  border-radius: 18px;
  padding: 44px 56px 36px;
  text-align: center;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  min-width: 320px;
  max-width: 460px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: scale(0.94) translateY(8px);
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.kiara-drop-overlay.is-active .kiara-drop-panel {
  transform: scale(1) translateY(0);
}

.kiara-drop-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  color: #fff;
  animation: kiaraDropFloat 1.8s ease-in-out infinite;
}
.kiara-drop-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}
@keyframes kiaraDropFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.kiara-drop-title {
  margin-bottom: 6px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.kiara-drop-sub {
  margin-bottom: 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}
.kiara-drop-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.kiara-drop-chips span {
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 520px) {
  .kiara-drop-panel { padding: 36px 32px 30px; min-width: 0; width: calc(100% - 48px); }
  .kiara-drop-title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .kiara-drop-icon { animation: none; }
  .kiara-drop-overlay,
  .kiara-drop-panel { transition: none; }
}
.placeholder\:text-white\/20::-moz-placeholder {
  color: rgb(255 255 255 / 0.2);
}
.placeholder\:text-white\/20::placeholder {
  color: rgb(255 255 255 / 0.2);
}
.placeholder\:text-white\/25::-moz-placeholder {
  color: rgb(255 255 255 / 0.25);
}
.placeholder\:text-white\/25::placeholder {
  color: rgb(255 255 255 / 0.25);
}
.placeholder\:text-white\/30::-moz-placeholder {
  color: rgb(255 255 255 / 0.3);
}
.placeholder\:text-white\/30::placeholder {
  color: rgb(255 255 255 / 0.3);
}
.focus-within\:border-white\/10:focus-within {
  border-color: rgb(255 255 255 / 0.1);
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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));
}
.hover\:scale-\[1\.03\]:hover {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  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));
}
.hover\:border-white\/10:hover {
  border-color: rgb(255 255 255 / 0.1);
}
.hover\:border-white\/20:hover {
  border-color: rgb(255 255 255 / 0.2);
}
.hover\:border-white\/\[0\.08\]:hover {
  border-color: rgb(255 255 255 / 0.08);
}
.hover\:bg-\[\#0A0A0A\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#111\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-500\/10:hover {
  background-color: rgb(244 63 94 / 0.1);
}
.hover\:bg-rose-500\/20:hover {
  background-color: rgb(244 63 94 / 0.2);
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgb(255 255 255 / 0.08);
}
.hover\:text-rose-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-400:hover {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-white\/70:hover {
  color: rgb(255 255 255 / 0.7);
}
.focus\:border-white\/20:focus {
  border-color: rgb(255 255 255 / 0.2);
}
.focus\:border-white\/25:focus {
  border-color: rgb(255 255 255 / 0.25);
}
.focus\:border-white\/50:focus {
  border-color: rgb(255 255 255 / 0.5);
}
.focus\:bg-\[\#111\]:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}
.focus\:bg-white\/\[0\.01\]:focus {
  background-color: rgb(255 255 255 / 0.01);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.active\:scale-95:active {
  --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));
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:cursor-wait:disabled {
  cursor: wait;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:hover\:scale-100:hover:disabled {
  --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));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {

  .sm\:flex {
    display: flex;
  }
}
@media (min-width: 1280px) {

  .xl\:flex {
    display: flex;
  }
}

/* ============================================================================
   KIARA SUITE — DESIGN TOKENS  (the single source of truth, §1.1 of the
   DESIGN-AND-REUSE-PLAYBOOK). Imported ONCE in src/layouts/Base.astro.

   ADDITIVE CONTRACT (read before editing):
   This file is loaded on EVERY page. It must NOT redefine any token that
   globals.css already owns in a way that changes existing pages. The one
   live collision is `--surface` (globals.css:21 = #000000, used by
   html,body{background:var(--surface)}). The playbook wants an off-black
   card surface — we expose that as `--suite-surface` (NOT `--surface`), so
   the pitch-black canvas of every existing page is untouched. All other
   tokens here are new names (`--bg`, `--holo-*`, `--step-*`, `--sp-*`,
   `--font-mono`, etc.) that do not exist in globals.css.

   The five laws (playbook §1.2): black is sacred, the holo accent is
   rationed, Instrument Serif display w/ ONE italic accent word, numbers &
   labels are mono+tabular, hairlines not boxes.
   ========================================================================== */

:root {
  /* ── Color: pure black + white-at-alpha. NEVER muddy grey hexes. ──────── */
  --bg: #000;                          /* the canvas IS black (mirrors globals --surface) */
  --suite-surface: #0b0b0d;            /* app-shell cards/panels ONLY (never on cinematic pages) */
  --suite-surface-2: #121214;
  --hairline: rgba(255, 255, 255, .08); /* the one true hairline */
  --hairline-strong: rgba(255, 255, 255, .16);
  --text: #f4f4f5;
  --text-hi: #ffffff;                  /* hero display only */
  --text-muted: rgba(255, 255, 255, .62);
  --text-faint: rgba(255, 255, 255, .42);

  /* ── The ONE accent: holographic. Rationed to selected/owned/premium/
        rank-up states ONLY. Holo overuse = casino = the biggest taste risk. */
  --holo-1: #7df9ff;
  --holo-2: #b18cff;
  --holo-3: #ff9ad5;
  --holo-4: #9affc4;
  --holo-sweep: linear-gradient(110deg, var(--holo-1), var(--holo-2), var(--holo-3), var(--holo-4));
  /* pointer-tracked wash — read --px/--py off the host element (default 50/30) */
  --holo-wash: radial-gradient(120% 120% at var(--px, 50%) var(--py, 30%),
    rgba(177, 140, 255, .18), rgba(125, 249, 255, .10) 40%, transparent 70%);
  --glow-baby: radial-gradient(circle at 50% 30%, rgba(180, 200, 255, .10), transparent 60%);

  /* ── Type — Utopia fluid clamp(), ratio 1.25@320 → 1.333@1500 ─────────── */
  --step--1: clamp(.83rem, .78rem + .22vw, .94rem);
  --step-0: clamp(1rem, .93rem + .33vw, 1.18rem);     /* body */
  --step-1: clamp(1.25rem, 1.12rem + .6vw, 1.66rem);
  --step-2: clamp(1.56rem, 1.34rem + 1.1vw, 2.37rem);
  --step-3: clamp(1.95rem, 1.58rem + 1.85vw, 3.16rem);
  --step-4: clamp(2.44rem, 1.84rem + 3vw, 4.21rem);
  --step-5: clamp(3.05rem, 2.1rem + 4.7vw, 5.61rem);  /* hero display */
  --step-6: clamp(3.8rem, 2.3rem + 7.5vw, 7.5rem);    /* mega editorial */

  /* ── Space — fluid, same source ───────────────────────────────────────── */
  --sp-xs: clamp(.5rem, .45rem + .2vw, .75rem);
  --sp-s: clamp(.75rem, .6rem + .6vw, 1.25rem);
  --sp-m: clamp(1.25rem, 1rem + 1.2vw, 2.5rem);
  --sp-l: clamp(2.5rem, 1.8rem + 3vw, 5rem);
  --sp-xl: clamp(5rem, 3rem + 8vw, 9rem);

  /* ── Editorial 12-col grid (used asymmetrically) ──────────────────────── */
  --grid-cols: 12;
  --grid-max: 1240px;                  /* max content band; cinematic goes full-bleed */
  --grid-gutter: var(--sp-m);

  /* ── Fonts — Instrument Serif + Inter + Syne already loaded by Base.astro.
        MONO FACE: no dedicated mono webfont is loaded in Base (it loads only
        Instrument Serif, Inter, Syne). To stay Workers-clean and avoid a new
        network request, --font-mono resolves to high-quality SYSTEM mono
        stacks (Geist/IBM Plex if a future self-host lands first, else the OS
        UI-mono). Numbers always pair this with font-variant-numeric. ─────── */
  --font-display: 'Instrument Serif', Georgia, serif;  /* + italic accent word */
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-logo: 'Syne', sans-serif;
  --font-mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
    'Roboto Mono', Menlo, Consolas, monospace;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, .61, .36, 1);    /* enter/reveal — confident arrival */
  --ease-io: cubic-bezier(.2, .7, .2, 1);        /* hovers / shell UI */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);/* playful pop — sparingly */
  --dur-fast: 160ms;
  --dur-ui: 220ms;
  --dur-reveal: 520ms;
  --radius: 14px;
  --radius-lg: 18px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-ui: 0ms;
    --dur-reveal: 0ms;
  }
}

/* ── Mono-number rule (playbook law #4) ──────────────────────────────────
   Any element carrying .suite-num renders in the mono face with tabular
   figures so rank/coin/seat columns never jitter on update. Opt-in class so
   it never touches existing typography. */
.suite-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Film-grain overlay (playbook §1.3, mandatory site-wide) ──────────────
   One fixed, pointer-events:none, low-opacity tiling-noise layer. The single
   cheapest move that makes pure black read as "cinema film," not "empty div."
   Rendered once by Base.astro as <div class="suite-grain">. Reuses the
   fractal-noise data-URI already defined in globals.css (--grain) so we add
   zero new network bytes. Kept very faint and behind all content. */
.suite-grain {
  position: fixed;
  inset: 0;
  z-index: 0;                          /* behind page content (pages stack above) */
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: .035;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) {
  .suite-grain { opacity: .025; }      /* even calmer when motion is reduced */
}

/* ============================================================================
   KIARA SUITE — THE 8 SHARED PRIMITIVES (CSS layer)  (playbook §1.4)

   Build ONCE, every tool imports. Framework-free CSS so it runs identically
   on Astro islands and Workers SSR. Behaviour (where needed) lives in
   src/scripts/suite-primitives.ts, guarded for reduced-motion + coarse
   pointers. Each primitive degrades correctly under prefers-reduced-motion
   and on touch.

   ADDITIVE CONTRACT: every selector here is namespaced under `suite-*` /
   `is-holo` / `[data-reveal]` / `[data-tilt]` and does not exist in
   globals.css or kiaraverse.css — it cannot override existing pages.

   Primitives:
     (a) .is-holo            holo-select state (pointer-tracked wash + edge)
     (b) .suite-magnetic     magnetic / settling button (JS-driven transform)
     (c) [data-reveal]       scroll-reveal beat (IntersectionObserver / CSS)
     (d) .suite-scrubber     canvas scroll-scrubber chrome (engine reused, see TS)
     (e) [data-tilt]         3D pointer-tilt + foil (reuses .kcard CSS contract)
     (f) page-morph          View-Transition helper (CSS hooks; Base wires VT)
     (g) SectionHeader       eyebrow + hairline (also an Astro component)
     (h) .suite-skeleton     no-spinner loader / skeleton shimmer
   ========================================================================== */

/* ── (a) HOLO-SELECT STATE ────────────────────────────────────────────────
   The universal "active / owned / premium / selected" treatment. One class.
   A --holo-wash radial that tracks the pointer (--px/--py set by JS) + a
   rationed 2px holo edge. Used by: sidebar active item, selected card,
   primary-CTA hover, rank badge, outfit chip, theme chip. */
.is-holo {
  position: relative;
  isolation: isolate;
}
.is-holo::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--holo-wash);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-io);
  pointer-events: none;
  z-index: -1;
}
.is-holo.is-on::before,
.is-holo:hover::before { opacity: 1; }
/* the rationed holo edge — drawn with a masked gradient border so it stays a
   true 2px hairline at any radius. Only on the engaged/selected state. */
.is-holo.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--holo-sweep);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* ── (b) MAGNETIC / SETTLING BUTTON ──────────────────────────────────────
   Primary CTAs pull gently toward the cursor and settle with spring easing;
   click fires a quick holo ripple. Transform is written by JS (suite-magnetic
   in suite-primitives.ts) into --mx/--my; the spring settle is CSS. Pointer-
   fine only — JS never binds on coarse pointers or reduced-motion. */
.suite-magnetic {
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform var(--dur-ui) var(--ease-spring);
}
.suite-magnetic.is-settling { transition: transform 420ms var(--ease-spring); }
/* click ripple — a one-shot holo pulse driven by .is-rippling (JS toggles). */
.suite-magnetic .suite-ripple {
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 999px;
  background: var(--holo-sweep);
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
}
.suite-magnetic.is-rippling .suite-ripple {
  animation: suite-ripple 520ms var(--ease-out);
}
@keyframes suite-ripple {
  0% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(26); }
}
@media (prefers-reduced-motion: reduce) {
  .suite-magnetic { transform: none !important; transition: none; }
  .suite-magnetic.is-rippling .suite-ripple { animation: none; }
}

/* ── (c) SCROLL-REVEAL BEAT ──────────────────────────────────────────────
   [data-reveal] fades + rises 8–24px on enter, staggered by --reveal-i
   (~60ms each). Native CSS animation-timeline:view() drives it off the main
   thread where supported; IntersectionObserver (suite-primitives.ts) toggles
   .is-revealed as the fallback. Reduced-motion shows everything instantly. */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-rise, 16px));
  transition: opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      opacity: 1;                       /* base for the timeline keyframes */
      transform: none;
      animation: suite-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    /* once the JS class lands it pins the final state, harmless overlap */
    [data-reveal].is-revealed { animation: none; }
  }
}
@keyframes suite-reveal {
  from { opacity: 0; transform: translateY(var(--reveal-rise, 16px)); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ── (d) CANVAS SCROLL-SCRUBBER (chrome) ─────────────────────────────────
   The image-sequence engine is REUSED from public/scripts/freestyle-40.js
   (the character-showcase scrubber, ~lines 824-1153) and wrapped as
   `createScrubber` in suite-primitives.ts — NOT rewritten. This block is only
   the surrounding chrome: the full-bleed canvas stage + the no-spinner
   "Preparing → Ready" loader bar that engine drives. */
.suite-scrubber {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
.suite-scrubber canvas {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.suite-scrubber-loader {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vh, 56px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 var(--step--1) / 1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: opacity var(--dur-ui) var(--ease-io);
}
.suite-scrubber-loader.is-done { opacity: 0; pointer-events: none; }
.suite-scrubber-bar {
  width: clamp(120px, 22vw, 240px);
  height: 2px;
  border-radius: 2px;
  background: var(--hairline);
  overflow: hidden;
}
.suite-scrubber-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--holo-sweep);
  transition: width var(--dur-ui) linear;
}

/* ── (e) 3D POINTER-TILT + FOIL ──────────────────────────────────────────
   The canonical holo card is `.kcard` (src/styles/kiaraverse.css:3552+) and
   is NOT rebuilt here. For NON-kcard surfaces that want the same tilt without
   the full card chrome, [data-tilt] drives the IDENTICAL CSS-var contract the
   .kcard rotator reads (--rx/--ry/--pointer-x/--pointer-y), via the shared
   bindHoloTilt() in suite-primitives.ts (reuses the kcard technique). Tilt is
   off on coarse pointers + reduced-motion (the binder simply never attaches). */
[data-tilt] {
  --rx: 0deg;
  --ry: 0deg;
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0;
  perspective: 1000px;
  transform-style: preserve-3d;
}
[data-tilt] > * {
  transform: rotateY(var(--rx)) rotateX(var(--ry));
  transition: transform .65s cubic-bezier(.16, 1, .3, 1);
}
[data-tilt].is-active > * {
  transition: transform .14s var(--ease-out);
}
/* optional pointer-tracked foil glare for [data-tilt] surfaces (opt-in via a
   child .suite-foil element) — mirrors the kcard glare, kept subtle. */
.suite-foil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(40% 40% at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, .22), transparent 60%);
  mix-blend-mode: soft-light;
  transition: opacity .3s ease;
}
[data-tilt].is-active .suite-foil { opacity: calc(.4 + var(--pointer-from-center) * .5); }
@media (prefers-reduced-motion: reduce) {
  [data-tilt] > * { transform: none !important; transition: none; }
  .suite-foil { display: none; }
}

/* ── (f) PAGE-MORPH (View Transitions) ───────────────────────────────────
   Astro <ClientRouter> drives the morph; AppShell marks shell chrome
   transition:persist. These are the only global VT tunings: a calm cross-fade
   default, and zero animation under reduced-motion. transition:name pairings
   (card → detail hero) are declared per tool, not here. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-ui);
    animation-timing-function: var(--ease-io);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ── (g) SECTION HEADER (eyebrow + hairline) ─────────────────────────────
   Styling for src/components/suite/SectionHeader.astro: a mono eyebrow
   ("02 — THE BRAIN") + Instrument Serif headline with ONE italic accent +
   a hairline rule. Instant Swiss editorial consistency. */
.suite-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-s);
  padding-bottom: var(--sp-s);
  border-bottom: 1px solid var(--hairline);
}
.suite-section-header .suite-eyebrow {
  font: 600 var(--step--1) / 1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.suite-section-header .suite-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--text-hi);
}
/* the single rationed italic accent word */
.suite-section-header .suite-headline em {
  font-style: italic;
  background: linear-gradient(92deg, #fff, rgba(255, 255, 255, .55));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── (h) NO-SPINNER LOADER / SKELETON SHIMMER ────────────────────────────
   Premium products don't spin. Two pieces:
     .suite-skeleton  — a single-keyframe shimmer for async grids/tiles.
     .suite-breath    — one breathing dot for compute moments.
   Both no-op under reduced-motion (shown as a calm static block/dot). */
.suite-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--suite-surface);
  border-radius: var(--radius);
}
.suite-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%,
    rgba(255, 255, 255, .06) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: suite-shimmer 1.4s var(--ease-io) infinite;
}
@keyframes suite-shimmer { to { transform: translateX(100%); } }

.suite-breath {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--text);
  animation: suite-breath 1.1s ease-in-out infinite;
}
@keyframes suite-breath {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  .suite-skeleton::after { animation: none; opacity: 0; }
  .suite-breath { animation: none; opacity: .7; }
}

.age-gate[data-astro-cid-c2ayhruq]{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(20px,6vw,60px);pointer-events:auto}html.is-ag-cleared .age-gate[data-astro-cid-c2ayhruq],html.is-ag-cleared .age-gate-backdrop[data-astro-cid-c2ayhruq]{display:none!important}html.is-ag-cleared{--ag-blur: 0}html.is-ag-locked,html.is-ag-locked body{overflow:hidden}html.is-ag-locked body{touch-action:none}.age-gate-backdrop[data-astro-cid-c2ayhruq]{position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,0.78);backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%)}.age-gate-card[data-astro-cid-c2ayhruq]{position:relative;width:100%;max-width:520px;padding:clamp(28px,5vw,44px);background:linear-gradient(170deg,rgba(20,20,22,0.92),rgba(8,8,10,0.92));border:1px solid rgba(255,255,255,0.08);border-radius:22px;color:#fff;text-align:left;box-shadow:0 30px 80px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.age-gate-eyebrow[data-astro-cid-c2ayhruq]{margin:0 0 18px;font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:0.4em;color:#ff3a45;text-shadow:0 0 16px rgba(255,58,69,0.35)}.age-gate-title[data-astro-cid-c2ayhruq]{margin:0 0 18px;font-family:"Syne",system-ui,sans-serif;font-weight:800;font-size:clamp(28px,5vw,40px);line-height:1.05;letter-spacing:-0.01em;color:#fff}.age-gate-title-line[data-astro-cid-c2ayhruq]{display:block}.age-gate-title-line--italic[data-astro-cid-c2ayhruq]{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;letter-spacing:0;color:rgba(255,255,255,0.85)}.age-gate-body[data-astro-cid-c2ayhruq]{margin:0 0 22px;font-family:var(--font-body);font-size:13px;line-height:1.55;color:rgba(255,255,255,0.7)}.age-gate-checkbox[data-astro-cid-c2ayhruq]{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0 0 22px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.age-gate-checkbox[data-astro-cid-c2ayhruq] input[data-astro-cid-c2ayhruq]{position:absolute;opacity:0;pointer-events:none}.age-gate-checkbox-box[data-astro-cid-c2ayhruq]{flex:0 0 18px;width:18px;height:18px;margin-top:2px;border:1.5px solid rgba(255,255,255,0.4);border-radius:4px;background:transparent;position:relative;transition:background 180ms ease,border-color 180ms ease}.age-gate-checkbox-box[data-astro-cid-c2ayhruq]::after{content:"";position:absolute;inset:3px;border-radius:2px;background:#fff;transform:scale(0);transition:transform 160ms cubic-bezier(0.2,0.7,0.2,1)}.age-gate-checkbox[data-astro-cid-c2ayhruq] input[data-astro-cid-c2ayhruq]:checked+.age-gate-checkbox-box[data-astro-cid-c2ayhruq]{border-color:#fff;background:rgba(255,255,255,0.08)}.age-gate-checkbox[data-astro-cid-c2ayhruq] input[data-astro-cid-c2ayhruq]:checked+.age-gate-checkbox-box[data-astro-cid-c2ayhruq]::after{transform:scale(1)}.age-gate-checkbox-label[data-astro-cid-c2ayhruq]{flex:1;font-family:var(--font-body);font-size:12px;line-height:1.55;color:rgba(255,255,255,0.72)}.age-gate-link[data-astro-cid-c2ayhruq]{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.35);text-underline-offset:3px;transition:text-decoration-color 180ms ease}.age-gate-link[data-astro-cid-c2ayhruq]:hover{text-decoration-color:#fff}.age-gate-actions[data-astro-cid-c2ayhruq]{display:flex;gap:10px;margin-bottom:16px}.age-gate-btn[data-astro-cid-c2ayhruq]{flex:1;padding:14px 18px;border:0;border-radius:12px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;transition:background 180ms ease,color 180ms ease,transform 180ms cubic-bezier(0.2,0.7,0.2,1)}.age-gate-btn--enter[data-astro-cid-c2ayhruq]{background:#fff;color:#000}.age-gate-btn--enter[data-astro-cid-c2ayhruq]:disabled{background:rgba(255,255,255,0.18);color:rgba(255,255,255,0.42);cursor:not-allowed}.age-gate-btn--enter[data-astro-cid-c2ayhruq]:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,255,255,0.18)}.age-gate-btn--leave[data-astro-cid-c2ayhruq]{background:transparent;color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.1)}.age-gate-btn--leave[data-astro-cid-c2ayhruq]:hover{color:#fff;background:rgba(255,255,255,0.04)}.age-gate-footnote[data-astro-cid-c2ayhruq]{margin:0;font-family:var(--font-body);font-size:10px;line-height:1.55;letter-spacing:0.04em;color:rgba(255,255,255,0.35)}.policy-modal[data-astro-cid-c2ayhruq]{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,60px)}.policy-modal[data-astro-cid-c2ayhruq][hidden]{display:none}.policy-modal-backdrop[data-astro-cid-c2ayhruq]{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:0;cursor:pointer}.policy-modal-card[data-astro-cid-c2ayhruq]{position:relative;width:100%;max-width:680px;max-height:80vh;display:flex;flex-direction:column;background:#0c0c0e;border:1px solid rgba(255,255,255,0.08);border-radius:18px;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,0.7)}.policy-modal-head[data-astro-cid-c2ayhruq]{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,0.06)}.policy-modal-title[data-astro-cid-c2ayhruq]{margin:0;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase}.policy-modal-close[data-astro-cid-c2ayhruq]{width:32px;height:32px;display:grid;place-items:center;background:rgba(255,255,255,0.06);border:0;border-radius:9999px;color:rgba(255,255,255,0.7);cursor:pointer;transition:background 180ms ease}.policy-modal-close[data-astro-cid-c2ayhruq]:hover{background:rgba(255,255,255,0.14);color:#fff}.policy-modal-close[data-astro-cid-c2ayhruq] svg[data-astro-cid-c2ayhruq]{width:14px;height:14px}.policy-modal-body[data-astro-cid-c2ayhruq]{overflow-y:auto;padding:24px 28px;font-family:var(--font-body);font-size:13px;line-height:1.7;color:rgba(255,255,255,0.8)}.policy-modal-body[data-astro-cid-c2ayhruq] h3[data-astro-cid-c2ayhruq]{margin:22px 0 8px;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#fff}.policy-modal-body[data-astro-cid-c2ayhruq] h3[data-astro-cid-c2ayhruq]:first-child{margin-top:0}.policy-modal-body[data-astro-cid-c2ayhruq] p[data-astro-cid-c2ayhruq]{margin:0 0 12px}.policy-modal-body[data-astro-cid-c2ayhruq] ul[data-astro-cid-c2ayhruq]{margin:0 0 12px;padding-left:18px}.policy-modal-body[data-astro-cid-c2ayhruq] li[data-astro-cid-c2ayhruq]{margin-bottom:6px}.policy-modal-foot[data-astro-cid-c2ayhruq]{padding:14px 24px;border-top:1px solid rgba(255,255,255,0.06)}.policy-modal-updated[data-astro-cid-c2ayhruq]{margin:0;font-family:var(--font-body);font-size:11px;letter-spacing:0.14em;color:rgba(255,255,255,0.35)}@media (max-width: 500px){.age-gate-card[data-astro-cid-c2ayhruq]{padding:24px;border-radius:18px}.age-gate-actions[data-astro-cid-c2ayhruq]{flex-direction:column-reverse}.policy-modal-card[data-astro-cid-c2ayhruq]{max-height:88vh}.policy-modal-body[data-astro-cid-c2ayhruq]{padding:20px;font-size:12.5px}}
/* Bubble — same visual language as before. Small, top-right. */
  .lexa-orb {
    --lexa-energy: 0;
    position: fixed;
    top: 14px;
    right: 18px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 32% 28%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 30%, transparent 55%),
      linear-gradient(160deg, rgba(40,44,64,0.95), rgba(14,16,24,0.98));
    cursor: pointer;
    z-index: 1100;
    display: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 220ms cubic-bezier(0.3,0.7,0.3,1);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.18) inset,
      0 -1px 0 rgba(0,0,0,0.5) inset,
      0 0 0 0.5px rgba(0,0,0,0.6),
      0 4px 12px rgba(0,0,0,0.45),
      0 2px 4px rgba(0,0,0,0.35);
  }
  body.is-signed-in .lexa-orb { display: block; }
  #lexa-orb[data-disabled="true"] { display: none !important; pointer-events: none; }
  #lexa-orb[data-canvas-only="true"] { display: none !important; pointer-events: none; }
  #lexa-orb[data-disabled="true"] ~ #lexa-orb-mute,
  #lexa-orb[data-disabled="true"] ~ #lexa-orb-countdown,
  #lexa-orb[data-disabled="true"] ~ #lexa-orb-debug,
  #lexa-orb[data-canvas-only="true"] ~ #lexa-orb-mute,
  #lexa-orb[data-canvas-only="true"] ~ #lexa-orb-countdown,
  #lexa-orb[data-canvas-only="true"] ~ #lexa-orb-debug {
    display: none !important;
  }
  .lexa-orb:hover { transform: scale(1.12); }
  .lexa-orb:active { transform: scale(0.94); }
  .lexa-orb:focus-visible { outline: 2px solid rgba(160,200,255,0.6); outline-offset: 4px; }
  @media (max-width: 640px) {
    .lexa-orb { top: auto; bottom: 18px; right: 14px; width: 32px; height: 32px; }
  }

  /* Core (inner glossy dot) */
  .lexa-orb-core {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 28%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 22%, transparent 48%),
      radial-gradient(circle at 60% 70%, rgba(120,140,180,0.25) 0%, transparent 60%),
      linear-gradient(160deg, rgba(70,78,100,0.7), rgba(28,32,48,0.9));
    box-shadow:
      0 0 0 0.5px rgba(0,0,0,0.5) inset,
      0 1px 1px rgba(255,255,255,0.08) inset,
      0 -1px 1px rgba(0,0,0,0.35) inset;
    pointer-events: none;
    transition: background 400ms ease, transform 240ms cubic-bezier(0.3,0.7,0.3,1);
  }

  /* Mist halo — reactive to voice */
  .lexa-orb-mist {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,210,240,0) 0%, rgba(200,210,240,0) 60%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease, background 400ms ease;
    transform: scale(calc(1 + var(--lexa-energy) * 0.45));
    will-change: transform, opacity;
  }

  /* State visuals */
  .lexa-orb[data-state="connecting"] .lexa-orb-mist {
    opacity: 0.6;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(240,245,255,0.18) 50%, transparent 85%);
    animation: lexa-mist-breathe 1.4s ease-in-out infinite;
  }
  .lexa-orb[data-state="warming"] .lexa-orb-mist {
    opacity: 0.5;
    background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(240,245,255,0.14) 50%, transparent 85%);
    animation: lexa-mist-breathe 2.0s ease-in-out infinite;
  }
  .lexa-orb[data-state="thinking"] .lexa-orb-mist {
    opacity: 0.62;
    background: radial-gradient(circle, rgba(255,220,180,0.5) 0%, rgba(255,184,126,0.16) 50%, transparent 85%);
    animation: lexa-mist-breathe 1.15s ease-in-out infinite;
  }
  .lexa-orb[data-state="thinking"] .lexa-orb-core {
    background:
      radial-gradient(circle at 30% 28%, rgba(255,255,255,0.86) 0%, rgba(255,232,210,0.28) 22%, transparent 48%),
      radial-gradient(circle at 60% 70%, rgba(255,184,126,0.36) 0%, transparent 60%),
      linear-gradient(160deg, rgba(235,210,185,0.94), rgba(150,128,112,0.95));
  }
  .lexa-orb[data-state="warming"] .lexa-orb-core,
  .lexa-orb[data-state="connecting"] .lexa-orb-core {
    background:
      radial-gradient(circle at 30% 28%, rgba(255,255,255,0.85) 0%, rgba(245,248,255,0.25) 22%, transparent 48%),
      radial-gradient(circle at 60% 70%, rgba(230,235,245,0.4) 0%, transparent 60%),
      linear-gradient(160deg, rgba(220,225,235,0.92), rgba(160,168,185,0.95));
  }
  .lexa-orb[data-state="talking"] .lexa-orb-mist {
    opacity: 0.85;
    background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(240,245,255,0.22) 50%, transparent 85%);
    animation: lexa-mist-wave 1.4s ease-in-out infinite;
  }
  .lexa-orb[data-state="talking"] .lexa-orb-core {
    background:
      radial-gradient(circle at 30% 28%, rgba(255,255,255,0.9) 0%, rgba(248,250,255,0.3) 22%, transparent 48%),
      radial-gradient(circle at 60% 70%, rgba(230,235,245,0.5) 0%, transparent 60%),
      linear-gradient(160deg, rgba(235,238,248,0.95), rgba(170,178,195,0.95));
    animation: lexa-core-talk 1.4s ease-in-out infinite;
  }
  .lexa-orb[data-state="error"] .lexa-orb-mist {
    opacity: 0.25;
    background: radial-gradient(circle, rgba(255,200,200,0.4) 0%, transparent 75%);
    animation: none;
  }
  .lexa-orb[data-state="error"] .lexa-orb-core {
    background: linear-gradient(160deg, rgba(180,100,100,0.7), rgba(80,40,40,0.85));
  }

  @keyframes lexa-mist-breathe {
    0%, 100% { transform: scale(0.95); opacity: var(--mist-min, 0.5); }
    50%      { transform: scale(1.22); opacity: var(--mist-max, 0.85); }
  }
  @keyframes lexa-mist-wave {
    0%, 100% { transform: scale(1.0); opacity: 0.65; }
    50%      { transform: scale(1.30); opacity: 0.95; }
  }
  @keyframes lexa-core-talk {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
  }

  /* Debug strip */
  .lexa-orb-debug {
    position: fixed;
    top: 48px;
    right: 14px;
    z-index: 1099;
    font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(240,240,245,0.9);
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    padding: 6px 9px;
    border-radius: 8px;
    text-align: right;
    max-width: 280px;
    display: none;
    border: 0.5px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
  body.is-signed-in .lexa-orb-debug { display: block; }
  .lexa-orb-debug-state {
    font-weight: 700;
    letter-spacing: 0.4px;
    font-size: 11px;
  }
  .lexa-orb-debug-state[data-status="OFF"]        { color: rgba(160,160,165,0.9); }
  .lexa-orb-debug-state[data-status="CONNECTING"] { color: rgba(255,220,140,0.95); }
  .lexa-orb-debug-state[data-status="WARMING"]   { color: rgba(200,220,255,0.95); }
  .lexa-orb-debug-state[data-status="WORKING"]   { color: rgba(255,200,140,0.95); }
  .lexa-orb-debug-state[data-status="LISTENING"]  { color: rgba(140,255,175,0.95); }
  .lexa-orb-debug-state[data-status="TALKING"]    { color: rgba(220,175,255,0.95); }
  .lexa-orb-debug-state[data-status="ERROR"]      { color: rgba(255,150,150,0.95); }
  .lexa-orb-debug-meta {
    opacity: 0.7;
    font-size: 10px;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 640px) {
    .lexa-orb-debug { top: auto; bottom: 58px; right: 14px; }
  }

  /* Mute button */
  .lexa-orb-mute {
    position: fixed;
    top: 42px;
    right: 18px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0.5px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.55);
    cursor: pointer;
    z-index: 1101;
    display: none;
    padding: 0;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 200ms ease;
  }
  .lexa-orb-mute[data-muted="true"] { background: rgba(255,140,100,0.45); }
  .lexa-orb-mute:hover { background: rgba(255,255,255,0.15); }
  .lexa-orb-mute[data-muted="true"]:hover { background: rgba(255,140,100,0.6); }
  .lexa-orb-mute-icon {
    display: block;
    width: 10px;
    height: 10px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z'/%3E%3Cpath d='M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z'/%3E%3Cpath d='M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
    background: rgba(255,255,255,0.8);
    transition: background 200ms ease;
  }
  .lexa-orb-mute[data-muted="true"] .lexa-orb-mute-icon {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z'/%3E%3C/svg%3E") center/contain no-repeat;
    background: rgba(255,255,255,0.9);
  }

  /* Countdown banner */
  .lexa-orb-countdown {
    position: fixed;
    top: 74px;
    right: 14px;
    z-index: 1099;
    font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(255,200,140,0.95);
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    padding: 4px 8px;
    border-radius: 6px;
    display: none;
    border: 0.5px solid rgba(255,200,140,0.3);
  }
  .lexa-orb-countdown.visible { display: block; }
  body[data-lexa-live-open="true"] #lexa-prompt-canvas {
    display: none !important;
  }
  .chat-sidebar-item.lexa-live-row {
    position: relative;
    border: 1px solid rgba(255, 184, 126, 0.35);
    background:
      linear-gradient(135deg, rgba(255, 184, 126, 0.14), rgba(255, 255, 255, 0.035)),
      rgba(255, 255, 255, 0.035);
    box-shadow:
      0 0 0 1px rgba(255, 184, 126, 0.08) inset,
      0 0 18px rgba(255, 184, 126, 0.14);
  }
  .chat-sidebar-item.lexa-live-row[data-lexa-disabled="true"] {
    border-color: rgba(255, 255, 255, 0.1);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
      rgba(255, 255, 255, 0.025);
    box-shadow: none;
  }
  .chat-sidebar-item.lexa-live-row::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 206, 156, 0.95);
    box-shadow: 0 0 12px rgba(255, 184, 126, 0.75);
    transform: translateY(-50%);
    animation: lexa-live-row-pulse 1.8s ease-in-out infinite;
  }
  .chat-sidebar-item.lexa-live-row[data-lexa-disabled="true"]::before {
    background: rgba(255, 255, 255, 0.38);
    box-shadow: none;
    animation: none;
  }
  .chat-sidebar-item.lexa-live-row .chat-sidebar-item-title {
    padding-left: 14px;
  }
  .chat-sidebar-item.lexa-live-row .lexa-live-badge {
    margin-left: auto;
    color: rgba(255, 206, 156, 0.82);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
  }
  .chat-sidebar-item.lexa-live-row[data-lexa-disabled="true"] .lexa-live-badge {
    color: rgba(255, 255, 255, 0.5);
  }
  .chat-msg-lexa-comingsoon .chat-msg-body {
    color: rgba(255, 255, 255, 0.82);
  }
  .chat-msg-lexa-empty {
    align-items: center;
    justify-content: center;
    min-height: 30vh;
  }
  .chat-msg-lexa-empty .chat-msg-lexa-head,
  .chat-msg-lexa-empty .chat-msg-body {
    align-self: center;
  }
  .chat-msg-lexa-empty .chat-msg-lexa-head {
    justify-content: center;
    margin-bottom: 8px;
    color: rgba(255, 206, 156, 0.74);
  }
  .chat-msg-lexa-empty .chat-msg-body {
    min-width: min(360px, 92%);
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    background:
      linear-gradient(135deg, rgba(255, 184, 126, 0.1), rgba(255, 255, 255, 0.035)),
      rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 184, 126, 0.16);
    box-shadow: 0 0 24px rgba(255, 184, 126, 0.08);
  }
  .chat-sidebar-item.lexa-live-row .lexa-live-clear {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
  }
  .chat-sidebar-item.lexa-live-row .lexa-live-clear:hover {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.18);
    color: #fff;
  }
  .chat-msg-lexa-draft .chat-msg-body {
    max-width: min(760px, 92%);
  }
  .chat-msg-lexa-head {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(760px, 92%);
    margin-bottom: 5px;
    color: rgba(255, 206, 156, 0.62);
    font: 650 10.5px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0;
  }
  .chat-msg-user .chat-msg-lexa-head {
    align-self: flex-end;
    justify-content: flex-end;
    color: rgba(255, 255, 255, 0.46);
  }
  .chat-msg-lexa-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transition: opacity 160ms ease;
  }
  .chat-msg:hover .chat-msg-lexa-actions,
  .chat-msg:focus-within .chat-msg-lexa-actions {
    opacity: 1;
  }
  .chat-msg-lexa-btn,
  .chat-msg-image-remove {
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    font-family: Inter, system-ui, sans-serif;
    letter-spacing: 0;
  }
  .chat-msg-lexa-btn {
    min-width: 22px;
    height: 22px;
    border-radius: 6px;
    padding: 0 7px;
    font-size: 10px;
    font-weight: 700;
  }
  .chat-msg-lexa-delete:hover,
  .chat-msg-image-remove:hover {
    color: #fff;
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.22);
  }
  .chat-msg-image-remove {
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 3;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    opacity: 0;
    transition: opacity 160ms ease;
  }
  .chat-msg-image:hover .chat-msg-image-remove,
  .chat-msg-image:focus-within .chat-msg-image-remove {
    opacity: 1;
  }
  .chat-msg-image-status {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 12px);
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.66);
    color: rgba(255, 255, 255, 0.86);
    font: 700 9.5px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0;
    pointer-events: none;
  }
  .chat-msg-image[data-caption-status="ready"] .chat-msg-image-status {
    color: rgba(170, 255, 196, 0.9);
  }
  .chat-msg-image[data-caption-status="analyzing"] .chat-msg-image-status,
  .chat-msg-image[data-caption-status="pending"] .chat-msg-image-status {
    color: rgba(255, 219, 168, 0.92);
  }
  .chat-msg-image[data-caption-status="failed"] .chat-msg-image-status {
    color: rgba(255, 166, 166, 0.94);
  }
  .chat-msg-image-retry {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 3;
    min-width: 42px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.68);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font: 800 9px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0;
    opacity: 0;
    transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease;
  }
  .chat-msg-image:hover .chat-msg-image-retry,
  .chat-msg-image:focus-within .chat-msg-image-retry {
    opacity: 1;
  }
  .chat-msg-image-retry:hover {
    border-color: rgba(255, 206, 156, 0.5);
    background: rgba(92, 58, 30, 0.76);
  }
  .chat-msg-lexa-prompt[data-lexa-live-active="true"] .chat-msg-body {
    box-shadow: 0 0 0 1px rgba(255, 184, 126, 0.18) inset;
  }
  .chat-msg-lexa-gen-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    max-width: min(760px, 92%);
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 184, 126, 0.18);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(255, 184, 126, 0.13), rgba(255, 255, 255, 0.04)),
      rgba(0, 0, 0, 0.16);
    box-shadow: 0 0 18px rgba(255, 184, 126, 0.08);
  }
  .chat-msg-lexa-gen-title {
    color: rgba(255, 225, 196, 0.8);
    font: 700 11px/1.2 Inter, system-ui, sans-serif;
    margin-right: auto;
    min-width: 120px;
  }
  .chat-msg-lexa-gen-btn {
    border-color: rgba(255, 184, 126, 0.24);
    background: rgba(255, 184, 126, 0.12);
    color: rgba(255, 238, 224, 0.92);
  }
  .chat-msg-lexa-gen-btn:hover {
    border-color: rgba(255, 206, 156, 0.48);
    background: rgba(255, 184, 126, 0.2);
  }
  @keyframes lexa-live-row-pulse {
    0%, 100% { opacity: 0.58; transform: translateY(-50%) scale(0.86); }
    50% { opacity: 1; transform: translateY(-50%) scale(1.18); }
  }
  #lexa-live-workspace {
    display: none !important;
  }
  @media (max-width: 640px) {
    .lexa-orb-mute { top: auto; bottom: 26px; right: 48px; }
    .lexa-orb-countdown { top: auto; bottom: 90px; right: 14px; }
  }
/* ── SignInModal ───────────────────────────────────────────────────
     Pure black-and-white minimalist sign-in popup. OpenAI auth-screen
     aesthetic — no colored gradients, no orbs, no decorative motion.
     Typography is var(--signin-font) = OpenAI Sans → Inter fallback. */

  .signin-modal {
    --signin-font: "OpenAI Sans", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --signin-bg: #0a0a0a;
    --signin-border: rgba(255, 255, 255, 0.10);
    --signin-border-strong: rgba(255, 255, 255, 0.18);
    --signin-text: #ffffff;
    --signin-text-muted: rgba(255, 255, 255, 0.55);
    --signin-text-dim: rgba(255, 255, 255, 0.40);
    --signin-input-bg: rgba(255, 255, 255, 0.025);
    --signin-btn-oauth-bg: rgba(255, 255, 255, 0.04);
    --signin-btn-oauth-bg-hover: rgba(255, 255, 255, 0.08);

    position: fixed;
    inset: 0;
    z-index: 9500;
    display: grid;
    place-items: center;
    padding: 24px;
    font-family: var(--signin-font);
    color: var(--signin-text);
  }
  .signin-modal[hidden] { display: none; }

  /* Backdrop — solid dark wash + light blur. Click closes. */
  .signin-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    opacity: 0;
    animation: signin-backdrop-in 200ms ease-out forwards;
  }
  @keyframes signin-backdrop-in {
    to { opacity: 1; }
  }

  /* Panel — flat black card, hairline border, deep drop shadow.
     No gradient, no inset highlight — clean as a sheet of paper. */
  .signin-modal-panel {
    position: relative;
    width: min(420px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 40px 32px 28px;
    border-radius: 16px;
    border: 1px solid var(--signin-border);
    background: var(--signin-bg);
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.85);
    opacity: 0;
    transform: translateY(8px);
    animation: signin-panel-in 240ms cubic-bezier(0.16, 1, 0.3, 1) 50ms forwards;
  }
  @keyframes signin-panel-in {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Close button — minimal X, top-right. */
  .signin-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--signin-text-dim);
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
  }
  .signin-modal-close svg { width: 14px; height: 14px; }
  .signin-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
  }

  /* Header — logo + title + sub. */
  .signin-modal-head {
    text-align: center;
    margin-bottom: 28px;
  }

  /* Kiara infinity square — sits at the top like an iOS app icon.
     The SVG inside is the kiara-v2 mark (white squircle + black ∞). */
  .signin-modal-logo {
    display: inline-block;
    width: 44px;
    height: 44px;
    margin: 0 auto 20px;
    border-radius: 10px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 6px 18px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    line-height: 0;
  }
  .signin-modal-logo svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .signin-modal-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.25;
    color: var(--signin-text);
  }
  .signin-modal-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--signin-text-muted);
  }

  /* Methods stack. */
  .signin-modal-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Buttons — shared base. */
  .signin-modal-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition:
      background 160ms ease,
      border-color 160ms ease,
      color 160ms ease;
  }
  .signin-modal-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .signin-modal-btn-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }
  .signin-modal-btn-label {
    flex: 1 1 auto;
    text-align: center;
  }

  /* OAuth buttons — dark with hairline border. Brand icon stays in
     its native colour (Google G, Telegram blue) for instant recognition. */
  .signin-modal-btn--oauth {
    background: var(--signin-btn-oauth-bg);
    border: 1px solid var(--signin-border);
    color: var(--signin-text);
  }
  .signin-modal-btn--oauth:not(:disabled):hover {
    background: var(--signin-btn-oauth-bg-hover);
    border-color: var(--signin-border-strong);
  }

  /* Primary email submit — solid white pill, black text. */
  .signin-modal-btn--primary {
    background: #fff;
    border: 1px solid #fff;
    color: #000;
  }
  .signin-modal-btn--primary:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.90);
  }

  /* "Soon" badge for the not-yet-wired Google button. */
  .signin-modal-btn-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--signin-text-dim);
    border: 1px solid var(--signin-border);
  }

  /* "or email" divider. */
  .signin-modal-divider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0;
    color: var(--signin-text-dim);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .signin-modal-divider::before,
  .signin-modal-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--signin-border);
  }
  .signin-modal-divider span { padding: 0 4px; }

  /* Email form. */
  .signin-modal-email {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .signin-modal-email-input {
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--signin-border);
    background: var(--signin-input-bg);
    color: var(--signin-text);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: -0.005em;
    transition: border-color 160ms ease, background 160ms ease;
  }
  .signin-modal-email-input::-moz-placeholder { color: var(--signin-text-dim); }
  .signin-modal-email-input::placeholder { color: var(--signin-text-dim); }
  .signin-modal-email-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.32);
  }
  .signin-modal-email-input:invalid:not(:-moz-placeholder) {
    border-color: rgba(248, 113, 113, 0.4);
  }
  .signin-modal-email-input:invalid:not(:placeholder-shown) {
    border-color: rgba(248, 113, 113, 0.4);
  }
  .signin-modal-email-err {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(252, 165, 165, 0.92);
  }

  /* Success-after-send state — monochrome, no green. */
  .signin-modal-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 18px;
    border-radius: 12px;
    border: 1px solid var(--signin-border);
    background: rgba(255, 255, 255, 0.015);
    text-align: center;
  }
  .signin-modal-sent-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--signin-border);
    color: var(--signin-text);
  }
  .signin-modal-sent-icon svg { width: 18px; height: 18px; }
  .signin-modal-sent-title {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--signin-text);
  }
  .signin-modal-sent-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--signin-text-muted);
  }
  .signin-modal-sent-body strong {
    color: var(--signin-text);
    font-weight: 500;
    word-break: break-all;
  }

  .signin-modal-link {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--signin-text-muted);
    font-family: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    margin-top: 6px;
  }
  .signin-modal-link:hover { color: #fff; }

  /* Footer. */
  .signin-modal-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--signin-border);
    text-align: center;
  }
  .signin-modal-tos {
    margin: 0;
    font-size: 11.5px;
    color: var(--signin-text-dim);
  }
  .signin-modal-tos a {
    color: var(--signin-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .signin-modal-tos a:hover { color: #fff; }

  /* Reduce motion — flatten the animations. */
  @media (prefers-reduced-motion: reduce) {
    .signin-modal-backdrop,
    .signin-modal-panel { animation-duration: 1ms; }
  }

  /* Mobile — pin to bottom of viewport, slim panel. */
  @media (max-width: 480px) {
    .signin-modal { padding: 0; align-items: end; }
    .signin-modal-panel {
      width: 100%;
      max-height: 92vh;
      border-radius: 16px 16px 0 0;
      padding: 32px 20px 24px;
    }
  }
.kp-nav[data-astro-cid-ph7soofn]{position:fixed;top:0;left:0;right:0;z-index:800;background:rgba(0,0,0,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.06);font-family:"Inter",system-ui,sans-serif}.kp-nav-inner[data-astro-cid-ph7soofn]{max-width:none;margin:0;padding:0 16px;height:56px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}@media (max-width: 700px){.kp-nav-inner[data-astro-cid-ph7soofn]{padding:0 14px;gap:10px}}@media (max-width: 480px){.kp-nav-inner[data-astro-cid-ph7soofn]{padding:0 10px;gap:8px;height:52px}}@media (max-width: 520px){.kp-nav-inner[data-astro-cid-ph7soofn]{grid-template-columns:auto minmax(0,1fr) auto;padding:0 8px;gap:6px}}.kp-nav-brand[data-astro-cid-ph7soofn]{display:inline-flex;align-items:center;color:#fff;text-decoration:none;letter-spacing:0.06em;font-weight:600;font-size:13.5px;white-space:nowrap}.kp-nav-brand-mark[data-astro-cid-ph7soofn] span[data-astro-cid-ph7soofn]{color:rgba(255,255,255,0.55);font-weight:400}@media (max-width: 480px){.kp-nav-brand-mark[data-astro-cid-ph7soofn]{font-size:11.5px;letter-spacing:0.04em}.kp-nav-brand-mark[data-astro-cid-ph7soofn] span[data-astro-cid-ph7soofn]{display:none}}.kp-nav-tabs[data-astro-cid-ph7soofn]{display:flex;align-items:center;gap:18px;justify-self:center}@media (max-width: 760px){.kp-nav-tabs[data-astro-cid-ph7soofn]{gap:12px}}@media (max-width: 480px){.kp-nav-tabs[data-astro-cid-ph7soofn]{gap:8px}}@media (max-width: 520px){.kp-nav-tabs[data-astro-cid-ph7soofn]{min-width:0;justify-self:center;gap:8px;overflow:hidden}}.kp-nav-tab[data-astro-cid-ph7soofn]{color:rgba(255,255,255,0.82);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:0.02em;padding:12px 0;border-bottom:1px solid transparent;transition:color 160ms ease,border-color 160ms ease;white-space:nowrap}@media (max-width: 480px){.kp-nav-tab[data-astro-cid-ph7soofn]{font-size:11.5px;padding:10px 0}}@media (max-width: 520px){.kp-nav-tab[data-astro-cid-ph7soofn][data-nav-item=home]:not(.is-active),.kp-nav-tab[data-astro-cid-ph7soofn][data-nav-item=models]:not(.is-active),.kp-nav-tab[data-astro-cid-ph7soofn][data-nav-item=library]:not(.is-active),.kp-nav-tab[data-astro-cid-ph7soofn][data-nav-item=characters]:not(.is-active),.kp-nav-tab[data-astro-cid-ph7soofn][data-nav-item=canvasso]:not(.is-active){display:none}}@media (max-width: 430px){.kp-nav-tab[data-astro-cid-ph7soofn][data-nav-item=characters]:not(.is-active){display:none}}.kp-nav-tab[data-astro-cid-ph7soofn]:hover{color:#fff}.kp-nav-tab[data-astro-cid-ph7soofn].is-active{color:#fff;border-bottom-color:#fff}.kp-nav-tab-new[data-astro-cid-ph7soofn]{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:#fff;color:#000;font-size:8.5px;font-weight:800;letter-spacing:0.08em;line-height:1;vertical-align:2px}@media (max-width: 760px){.kp-nav-tab-new[data-astro-cid-ph7soofn]{display:none}}.kp-nav-mode-pill[data-astro-cid-ph7soofn]{--pill-pad: 3px;--pill-btn-w: 70px;position:relative;display:inline-grid;grid-template-columns:var(--pill-btn-w) var(--pill-btn-w);padding:var(--pill-pad);border-radius:9999px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);align-self:center;flex-shrink:0}.kp-nav-mode-btn[data-astro-cid-ph7soofn]{position:relative;z-index:1;padding:5px 0;background:transparent;border:0;color:rgba(255,255,255,0.7);font:inherit;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:none;cursor:pointer;transition:color 200ms ease;white-space:nowrap;text-align:center}.kp-nav-mode-btn[data-astro-cid-ph7soofn]:hover{color:#fff}body[data-page-mode=chat] .kp-nav-mode-btn[data-astro-cid-ph7soofn][data-page-mode=chat],body[data-page-mode=freestyle] .kp-nav-mode-btn[data-astro-cid-ph7soofn][data-page-mode=freestyle],body[data-page-mode=chat] .kp-nav-mode-btn[data-astro-cid-ph7soofn][data-page-mode=chat]:hover,body[data-page-mode=freestyle] .kp-nav-mode-btn[data-astro-cid-ph7soofn][data-page-mode=freestyle]:hover{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.55),0 0 6px rgba(0,0,0,0.3)}body:not([data-page-mode]) .kp-nav-mode-btn[data-astro-cid-ph7soofn][aria-selected=true]{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.55)}.kp-nav-mode-thumb[data-astro-cid-ph7soofn]{position:absolute;top:var(--pill-pad);bottom:var(--pill-pad);left:var(--pill-pad);width:var(--pill-btn-w);border-radius:9999px;background:url(/effects/chip-bg-pro.jpg) center/cover no-repeat,#18181f;transition:transform 280ms cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:0;box-shadow:0 2px 10px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.10) inset}body[data-page-mode=freestyle] .kp-nav-mode-thumb[data-astro-cid-ph7soofn]{transform:translateX(var(--pill-btn-w))}@media (max-width: 760px){.kp-nav-mode-pill[data-astro-cid-ph7soofn]{--pill-btn-w: 62px}.kp-nav-mode-btn[data-astro-cid-ph7soofn]{font-size:10.5px;letter-spacing:0.04em}}@media (max-width: 480px){.kp-nav-mode-pill[data-astro-cid-ph7soofn]{--pill-btn-w: 54px}.kp-nav-mode-btn[data-astro-cid-ph7soofn]{font-size:10px;padding:4px 0}}.kp-nav-right[data-astro-cid-ph7soofn]{justify-self:end;display:flex;align-items:center;gap:20px}@media (max-width: 760px){.kp-nav-right[data-astro-cid-ph7soofn]{gap:12px}}@media (max-width: 480px){.kp-nav-right[data-astro-cid-ph7soofn]{gap:8px}}.kp-nav-beta[data-astro-cid-ph7soofn]{display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:0 8px;border:1px solid rgba(255,255,255,0.28);border-radius:999px;background:rgba(255,255,255,0.08);color:#fff;font-size:10px;font-weight:800;letter-spacing:0.08em;line-height:1;white-space:nowrap;box-shadow:0 0 0 1px rgba(0,0,0,0.55),0 8px 22px rgba(255,255,255,0.04)}.kp-nav-balance[data-astro-cid-ph7soofn]{color:rgba(255,255,255,0.6);text-decoration:none;font-size:12.5px;font-variant-numeric:tabular-nums;transition:color 160ms ease;white-space:nowrap}.kp-nav-balance[data-astro-cid-ph7soofn] b[data-astro-cid-ph7soofn]{color:#fff;font-weight:500}.kp-nav-balance[data-astro-cid-ph7soofn]:hover{color:#fff}.kp-nav-balance[data-astro-cid-ph7soofn].is-credit-low,.kp-nav-balance[data-astro-cid-ph7soofn].is-credit-low b[data-astro-cid-ph7soofn]{color:#ff9d3d}.kp-nav-balance[data-astro-cid-ph7soofn].is-credit-critical,.kp-nav-balance[data-astro-cid-ph7soofn].is-credit-critical b[data-astro-cid-ph7soofn]{color:#ff4d4f}.kp-nav-balance[data-astro-cid-ph7soofn].is-credit-critical{animation:kpCreditLowPulse 1.6s ease-in-out infinite}@keyframes kpCreditLowPulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes kp-balance-pulse{0%{transform:scale(1);color:#fff;text-shadow:0 0 0 rgba(255,255,255,0)}35%{transform:scale(1.18);color:#fff;text-shadow:0 0 12px rgba(255,255,255,0.55)}100%{transform:scale(1);color:#fff;text-shadow:0 0 0 rgba(255,255,255,0)}}.kp-nav-balance[data-astro-cid-ph7soofn] b[data-astro-cid-ph7soofn].is-pulse{display:inline-block;animation:kp-balance-pulse 700ms cubic-bezier(0.4,0,0.2,1)}@media (max-width: 480px){.kp-nav-beta[data-astro-cid-ph7soofn]{min-height:19px;padding:0 6px;font-size:8.5px;letter-spacing:0.06em}.kp-nav-balance[data-astro-cid-ph7soofn]{font-size:11px}.kp-nav-balance[data-astro-cid-ph7soofn] span[data-astro-cid-ph7soofn]{display:none}}.kp-nav-user[data-astro-cid-ph7soofn]{color:rgba(255,255,255,0.5);font-size:12.5px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 900px){.kp-nav-user[data-astro-cid-ph7soofn]{display:none}}.kp-nav-signout-form[data-astro-cid-ph7soofn]{margin:0}.kp-nav-signout[data-astro-cid-ph7soofn]{background:transparent;border:0;padding:0;font:inherit;font-size:12.5px;color:rgba(255,255,255,0.55);cursor:pointer;transition:color 160ms ease}.kp-nav-signout[data-astro-cid-ph7soofn]:hover{color:#fff}@media (max-width: 480px){.kp-nav-signout[data-astro-cid-ph7soofn]{font-size:11px}}@media (max-width: 520px){.kp-nav-signout-form[data-astro-cid-ph7soofn]{display:none}}.kp-credit-expiry-alert[data-astro-cid-ph7soofn][hidden]{display:none}.kp-credit-expiry-alert[data-astro-cid-ph7soofn]{position:fixed;top:66px;left:50%;transform:translateX(-50%);z-index:790;max-width:min(92vw,620px);min-height:38px;display:inline-flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid rgba(251,191,36,0.34);border-radius:10px;background:rgba(18,14,6,0.94);color:#fde68a;box-shadow:0 14px 44px rgba(0,0,0,0.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12px;line-height:1.35}.kp-credit-expiry-alert__dot[data-astro-cid-ph7soofn]{width:8px;height:8px;border-radius:999px;background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,0.13);flex:0 0 auto}.kp-credit-expiry-alert[data-astro-cid-ph7soofn] a[data-astro-cid-ph7soofn]{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}@media (max-width: 520px){.kp-credit-expiry-alert[data-astro-cid-ph7soofn]{top:58px;left:8px;right:8px;transform:none;max-width:none;justify-content:center;text-align:center;font-size:11.5px}}.kp-bell[data-astro-cid-ph7soofn]{position:relative;display:inline-flex;align-items:center}.kp-bell-btn[data-astro-cid-ph7soofn]{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:transparent;color:rgba(255,255,255,0.6);cursor:pointer;transition:color 160ms ease,background 160ms ease}.kp-bell-btn[data-astro-cid-ph7soofn]:hover{color:#fff;background:rgba(255,255,255,0.06)}.kp-bell-btn[data-astro-cid-ph7soofn][aria-expanded=true]{color:#fff;background:rgba(255,255,255,0.08)}.kp-bell-icon[data-astro-cid-ph7soofn]{width:19px;height:19px;display:block}.kp-bell-badge[data-astro-cid-ph7soofn]{position:absolute;top:-1px;right:-1px;min-width:17px;height:17px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);color:#1a1208;font-size:10.5px;font-weight:800;line-height:1;box-shadow:0 0 0 2px #050505}.kp-bell-badge[data-astro-cid-ph7soofn][hidden]{display:none}.kp-bell-panel[data-astro-cid-ph7soofn][hidden]{display:none}@media (max-width: 480px){.kp-bell-btn[data-astro-cid-ph7soofn]{width:30px;height:30px}.kp-bell-icon[data-astro-cid-ph7soofn]{width:17px;height:17px}}.kp-bell-panel[data-astro-cid-ph7soofn]{position:absolute;top:calc(100% + 9px);right:0;width:clamp(264px,18.5rem,90vw);min-height:240px;max-height:min(80vh,620px);display:flex;flex-direction:column;z-index:900;background:rgba(14,14,16,0.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.1);border-radius:14px;box-shadow:0 20px 56px -14px rgba(0,0,0,0.75);padding:8px}.kp-bell-panel[data-astro-cid-ph7soofn]::before{content:"";position:absolute;top:-6px;right:11px;width:12px;height:12px;background:rgba(14,14,16,0.98);border-left:1px solid rgba(255,255,255,0.1);border-top:1px solid rgba(255,255,255,0.1);transform:rotate(45deg)}.kp-bell-head[data-astro-cid-ph7soofn]{padding:8px 10px 10px;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.45);border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:6px}.kp-bell-head--sub[data-astro-cid-ph7soofn]{margin-top:8px;border-top:1px solid rgba(255,255,255,0.07)}.kp-bell-list[data-astro-cid-ph7soofn]{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.kp-bell-empty[data-astro-cid-ph7soofn]{margin:auto;padding:12px;text-align:center;color:rgba(255,255,255,0.35);font-size:12px;letter-spacing:0.01em}.kp-bell-item[data-astro-cid-ph7soofn]{position:relative;padding:11px 12px 11px 16px;border-radius:10px;background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.06)}.kp-bell-item[data-astro-cid-ph7soofn]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--kp-bell-accent, #6366f1)}.kp-bell-item[data-astro-cid-ph7soofn].is-unread{background:rgba(251,191,36,0.06);border-color:rgba(251,191,36,0.18)}.kp-bell-item-title[data-astro-cid-ph7soofn]{font-size:13.5px;font-weight:700;color:rgba(255,255,255,0.95);line-height:1.3}.kp-bell-item-body[data-astro-cid-ph7soofn]{margin-top:4px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,0.62)}.kp-bell-item-meta[data-astro-cid-ph7soofn]{margin-top:6px;font-size:11px;color:rgba(255,255,255,0.38)}.kp-bell-item-cta[data-astro-cid-ph7soofn]{display:inline-block;margin-top:9px;padding:6px 12px;border-radius:8px;background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);color:#1a1208;font-size:12px;font-weight:700;text-decoration:none}.kp-bell-item-cta[data-astro-cid-ph7soofn]:hover{filter:brightness(1.06)}
/* ── Tool-suite rail: 64px icon spine → 248px labeled drawer ──────────────
     Pitch-black, no panel chrome on desktop (the black is part of the OS feel).
     Namespaced .suite-rail* — does NOT touch the .chat-sidebar conversation
     rail. Tokens from suite-tokens.css. */
  .suite-rail {
    position: fixed;
    top: 56px;                       /* clears AppNav (56px) */
    left: 0;
    bottom: 0;
    width: 64px;
    z-index: 700;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--font-ui);
    transition: width var(--dur-ui) var(--ease-io);
  }
  /* Expand on hover OR keyboard focus within the rail. */
  .suite-rail:hover,
  .suite-rail:focus-within { width: 248px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 1px solid var(--hairline); }

  .suite-rail-inner {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: none;
  }
  .suite-rail-inner::-webkit-scrollbar { width: 0; height: 0; display: none; }

  .suite-rail-group { display: flex; flex-direction: column; gap: 2px; }
  .suite-rail-section {
    margin: 4px 0 4px 10px;
    font: 600 9.5px / 1 var(--font-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-faint);
    opacity: 0;
    white-space: nowrap;
    transition: opacity var(--dur-fast) var(--ease-io);
  }
  .suite-rail:hover .suite-rail-section,
  .suite-rail:focus-within .suite-rail-section { opacity: 1; }

  .suite-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

  .suite-rail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 12px;
    border-radius: 11px;
    color: var(--text-muted);          /* resting: ~62% white */
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-io), background var(--dur-fast) var(--ease-io);
  }
  .suite-rail-item:hover { color: var(--text-hi); background: rgba(255, 255, 255, .04); }
  .suite-rail-item.is-active { color: var(--text-hi); }
  /* the rationed 2px holo left-edge marker on the active tool */
  .suite-rail-item.is-active::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 22px;
    border-radius: 2px;
    background: var(--holo-sweep);
    z-index: 1;
  }
  .suite-rail-item.is-disabled { color: var(--text-faint); opacity: .55; cursor: default; pointer-events: none; }

  .suite-rail-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
  }
  .suite-rail-ico svg { width: 20px; height: 20px; display: block; }

  .suite-rail-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-io);
  }
  .suite-rail:hover .suite-rail-label,
  .suite-rail:focus-within .suite-rail-label { opacity: 1; }

  .suite-rail-badge {
    flex: 0 0 auto;
    font: 700 8.5px / 1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid var(--hairline-strong);
    color: var(--text-muted);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-io);
  }
  .suite-rail:hover .suite-rail-badge,
  .suite-rail:focus-within .suite-rail-badge { opacity: 1; }
  .suite-rail-badge--beta { color: var(--holo-1); border-color: rgba(125, 249, 255, .3); }

  /* ── Mobile (≤900px): slide-over drawer ──────────────────────────────── */
  .suite-rail-show {
    position: fixed;
    top: 64px;
    left: 12px;
    z-index: 750;
    width: 38px;
    height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-muted);
    cursor: pointer;
  }
  .suite-rail-show svg { width: 18px; height: 18px; display: block; }
  .suite-rail-show:hover { color: var(--text-hi); }
  .suite-rail-show[hidden] { display: none; }

  .suite-rail-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 690;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-ui) var(--ease-io);
  }

  @media (max-width: 900px) {
    .suite-rail {
      top: 56px;
      width: min(82vw, 300px);
      transform: translateX(-100%);
      background: rgba(0, 0, 0, .94);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-right: 1px solid var(--hairline);
      transition: transform var(--dur-ui) var(--ease-io);
    }
    /* on mobile the drawer is always fully labeled when open */
    .suite-rail .suite-rail-section,
    .suite-rail .suite-rail-label,
    .suite-rail .suite-rail-badge { opacity: 1; }
    body.suite-rail-open .suite-rail { transform: translateX(0); }
    body.suite-rail-open .suite-rail-backdrop { opacity: 1; pointer-events: auto; }
    .suite-rail-show { display: inline-flex; }
    body.suite-rail-open .suite-rail-show { display: none; }
  }
  @media (min-width: 901px) { .suite-rail-backdrop { display: none; } }

  @media (prefers-reduced-motion: reduce) {
    .suite-rail, .suite-rail-label, .suite-rail-section, .suite-rail-badge,
    .suite-rail-backdrop { transition: none !important; }
  }
/* ── AnnouncementModal ──────────────────────────────────────────────
     Suite-token themed. Dimmed-not-black backdrop (the black stays sacred
     behind it). One hairline edge, --suite-surface card, --radius-lg. */
  .ann-modal {
    position: fixed;
    inset: 0;
    z-index: 9400; /* below SignInModal (9500) — campaign queues behind sign-in */
    display: grid;
    place-items: center;
    padding: 24px;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-hi, #fff);
  }
  .ann-modal[hidden] { display: none; }

  .ann-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    opacity: 0;
    animation: ann-fade var(--dur-ui, 0.18s) var(--ease-io, ease) forwards;
  }

  .ann-modal-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    background: var(--suite-surface, #0c0c0d);
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-lg, 20px);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
    transform: translateY(8px) scale(0.99);
    opacity: 0;
    animation: ann-rise var(--dur-ui, 0.18s) var(--ease-io, ease) forwards;
  }

  @keyframes ann-fade { to { opacity: 1; } }
  @keyframes ann-rise { to { transform: none; opacity: 1; } }

  .ann-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    cursor: pointer;
    transition: color var(--dur-ui, 0.16s) var(--ease-io, ease),
      background var(--dur-ui, 0.16s) var(--ease-io, ease);
  }
  .ann-modal-close:hover { color: var(--text-hi, #fff); background: rgba(0, 0, 0, 0.55); }
  .ann-modal-close svg { width: 16px; height: 16px; }

  .ann-modal-visual {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
    background:
      radial-gradient(120% 90% at 50% 0%, var(--glow-baby, rgba(255, 184, 226, 0.16)), transparent 70%),
      #060607;
  }
  .ann-modal-visual.is-loading { /* .suite-skeleton-class added by script for shimmer */ }
  .ann-modal-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity var(--dur-ui, 0.2s) var(--ease-io, ease);
  }
  .ann-modal-img.is-ready { opacity: 1; }

  .ann-modal-body { padding: 26px 28px 8px; }

  .ann-modal-eyebrow {
    margin: 0 0 14px;
    font: 600 var(--step--1, 12px) / 1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
  }
  .ann-modal-eyebrow:empty { display: none; }

  .ann-modal-title {
    margin: 0 0 12px;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: var(--step-4, 34px);
    line-height: 1.04;
    color: #fff;
  }
  .ann-modal-title i { font-style: italic; color: rgba(255, 255, 255, 0.62); }

  .ann-modal-text {
    margin: 0;
    font-size: var(--step-0, 15px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 46ch;
  }
  .ann-modal-text:empty { display: none; }

  .ann-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px 24px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--suite-surface, #0c0c0d) 60%, transparent);
  }

  .ann-modal-dots { display: flex; gap: 8px; align-items: center; }
  .ann-modal-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transition: background var(--dur-ui, 0.16s) var(--ease-io, ease),
      width var(--dur-ui, 0.16s) var(--ease-io, ease);
  }
  .ann-modal-dot.is-active { width: 18px; background: rgba(255, 255, 255, 0.85); }
  /* The active dot wears the rationed holo accent. */
  .ann-modal-dot.is-active.is-holo {
    background: var(--holo, linear-gradient(90deg, #ff9ad1, #9ad1ff));
  }

  .ann-modal-actions { display: flex; align-items: center; gap: 14px; }
  .ann-modal-skip {
    border: 0;
    background: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font: 600 var(--step--1, 13px) / 1 inherit;
    cursor: pointer;
    padding: 8px 4px;
    transition: color var(--dur-ui, 0.16s) var(--ease-io, ease);
  }
  .ann-modal-skip:hover { color: var(--text-hi, #fff); }

  .ann-modal-next {
    border: 0;
    background: #fff;
    color: #000;
    font: 700 var(--step--1, 13px) / 1 inherit;
    height: 42px;
    padding: 0 22px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform var(--dur-ui, 0.16s) var(--ease-io, ease),
      filter var(--dur-ui, 0.16s) var(--ease-io, ease);
  }
  .ann-modal-next:hover { transform: translateY(-1px); filter: brightness(0.96); }
  .ann-modal-next:active { transform: translateY(0); }

  /* Mobile → full-width bottom sheet. */
  @media (max-width: 480px) {
    .ann-modal { padding: 0; place-items: end stretch; }
    .ann-modal-panel {
      width: 100%;
      max-height: 92dvh;
      border-radius: 20px 20px 0 0;
      border-bottom: 0;
      margin: 0 12px;
      transform: translateY(16px);
    }
    .ann-modal-body { padding: 22px 20px 6px; }
    .ann-modal-footer { padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
    .ann-modal-title { font-size: var(--step-3, 28px); }
  }

  /* Reduced motion → instant; no rise, no parallax. */
  @media (prefers-reduced-motion: reduce) {
    .ann-modal-backdrop,
    .ann-modal-panel { animation: none; opacity: 1; transform: none; }
    .ann-modal-img { transition: none; }
    .ann-modal-dot { transition: none; }
    .ann-modal-next { transition: none; }
  }
/* Pitch-black, hairlines, mono. The palette is one of the few --surface
     places (utility chrome, not theatre). */
  .kcmd { position: fixed; inset: 0; z-index: 1200; }
  .kcmd[hidden] { display: none; }
  .kcmd-scrim {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    animation: kcmd-fade var(--dur-fast, .16s) var(--ease-io, ease);
  }
  .kcmd-panel {
    position: absolute; left: 50%; top: 14vh; transform: translateX(-50%);
    width: min(640px, calc(100vw - 28px));
    max-height: min(64vh, 560px);
    display: flex; flex-direction: column;
    background: var(--surface, #0b0b0d);
    border: 1px solid var(--border-strong, rgba(255,255,255,.16));
    border-radius: var(--radius-lg, 18px);
    box-shadow: 0 30px 90px -20px rgba(0,0,0,.8);
    overflow: hidden;
    animation: kcmd-rise var(--dur-ui, .22s) var(--ease-out, cubic-bezier(.22,.61,.36,1));
  }
  @keyframes kcmd-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes kcmd-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
  @media (prefers-reduced-motion: reduce) {
    .kcmd-scrim, .kcmd-panel { animation: none; }
  }
  @media (max-width: 560px) {
    .kcmd-panel { top: 0; left: 0; transform: none; width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; border-left: 0; border-right: 0; }
  }

  .kcmd-search {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  }
  .kcmd-search-ico { width: 18px; height: 18px; color: var(--text-faint, rgba(255,255,255,.42)); flex: 0 0 auto; }
  .kcmd-input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    color: var(--text-hi, #fff);
    font: 400 var(--step-0, 1rem)/1.2 'Inter', system-ui, sans-serif;
  }
  .kcmd-input::-moz-placeholder { color: var(--text-faint, rgba(255,255,255,.42)); }
  .kcmd-input::placeholder { color: var(--text-faint, rgba(255,255,255,.42)); }
  .kcmd-esc {
    font: 600 11px/1 var(--font-mono, ui-monospace, monospace);
    color: var(--text-faint, rgba(255,255,255,.42));
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 6px; padding: 4px 7px; flex: 0 0 auto;
  }

  .kcmd-results { overflow-y: auto; overscroll-behavior: contain; padding: 6px; flex: 1; min-height: 0; }
  .kcmd-group-head {
    padding: 12px 12px 6px;
    font: 600 10.5px/1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-faint, rgba(255,255,255,.42));
  }
  .kcmd-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    color: var(--text, #f4f4f5); text-decoration: none; cursor: pointer;
  }
  .kcmd-row[aria-selected="true"] {
    background: var(--holo-wash, rgba(177,140,255,.12));
    box-shadow: inset 0 0 0 1px var(--border-strong, rgba(255,255,255,.16));
  }
  .kcmd-row-thumb {
    width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
    -o-object-fit: cover;
       object-fit: cover; background: var(--surface-2, #121214);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    display: grid; place-items: center; color: var(--text-faint, rgba(255,255,255,.42));
  }
  .kcmd-row-thumb svg { width: 16px; height: 16px; }
  .kcmd-row-main { min-width: 0; flex: 1; }
  .kcmd-row-title { font: 500 var(--step--1, .9rem)/1.3 'Inter', system-ui, sans-serif; color: var(--text-hi, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kcmd-row-sub { font: 400 11.5px/1.3 'Inter', system-ui, sans-serif; color: var(--text-faint, rgba(255,255,255,.42)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kcmd-row-kind { font: 600 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint, rgba(255,255,255,.42)); flex: 0 0 auto; }

  /* NO spinner: a breathing dot for in-flight async sources + skeleton rows. */
  .kcmd-loading { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text-faint, rgba(255,255,255,.42)); font: 400 11.5px/1 'Inter', system-ui, sans-serif; }
  .kcmd-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--holo-2, #b18cff); animation: kcmd-breathe 1.4s ease-in-out infinite; }
  @keyframes kcmd-breathe { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) { .kcmd-dot { animation: none; opacity: .7; } }
  .kcmd-empty { padding: 22px 12px; text-align: center; color: var(--text-faint, rgba(255,255,255,.42)); font: 400 var(--step--1, .9rem)/1.5 'Inter', system-ui, sans-serif; }

  .kcmd-foot {
    display: flex; gap: 18px; padding: 10px 16px;
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
    color: var(--text-faint, rgba(255,255,255,.42));
    font: 400 11px/1 'Inter', system-ui, sans-serif;
  }
  .kcmd-foot kbd {
    font: 600 10px/1 var(--font-mono, ui-monospace, monospace);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 5px; padding: 3px 5px; margin-right: 3px;
    color: var(--text-muted, rgba(255,255,255,.62));
  }
  @media (max-width: 560px) { .kcmd-foot { display: none; } }
/* ── ToolInfo ───────────────────────────────────────────────────────
     The "i" floats bottom-right at low opacity (never over content), rising
     to full on hover. The panel slides in from the right under the 56px nav. */
  .tool-info-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 760; /* below the nav (800), above the stage */
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
    background: rgba(8, 8, 9, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    cursor: pointer;
    opacity: 0.62;
    transition: opacity var(--dur-ui, 0.16s) var(--ease-io, ease),
      color var(--dur-ui, 0.16s) var(--ease-io, ease),
      transform var(--dur-ui, 0.16s) var(--ease-io, ease);
  }
  .tool-info-btn:hover { opacity: 1; color: var(--text-hi, #fff); transform: translateY(-1px); }
  .tool-info-btn svg { width: 18px; height: 18px; }

  /* One-time gentle holo pulse on first visit (server-flagged). */
  .tool-info-btn.is-first { opacity: 1; color: var(--text-hi, #fff); animation: tool-info-pulse 2.2s var(--ease-io, ease) 3; }
  @keyframes tool-info-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 154, 209, 0); }
    50% { box-shadow: 0 0 0 6px rgba(255, 154, 209, 0.18); border-color: rgba(255, 154, 209, 0.55); }
  }

  .tool-info-scrim {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 770;
    border: 0; margin: 0; padding: 0;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
  }
  .tool-info-scrim[hidden] { display: none; }

  .tool-info-panel {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    z-index: 780;
    width: clamp(320px, 30vw, 420px);
    overflow-y: auto;
    background: var(--suite-surface, #0c0c0d);
    border-left: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
    padding: 22px 22px 32px;
    transform: translateX(100%);
    transition: transform var(--dur-ui, 0.22s) var(--ease-io, cubic-bezier(0.4, 0, 0.2, 1));
    font-family: 'Inter', system-ui, sans-serif;
  }
  .tool-info-panel[hidden] { display: none; }
  .tool-info-panel.is-open { transform: none; }

  .tool-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }
  .tool-info-title {
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: var(--step-2, 22px);
    color: #fff;
  }
  .tool-info-close {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 999px;
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
    background: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    cursor: pointer;
    transition: color var(--dur-ui, 0.16s) var(--ease-io, ease);
  }
  .tool-info-close:hover { color: var(--text-hi, #fff); }
  .tool-info-close svg { width: 15px; height: 15px; }

  .tool-info-tagline {
    margin: 0 0 18px;
    font-size: var(--step-0, 15px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
  }
  .tool-info-steps {
    list-style: none;
    counter-reset: ti;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .tool-info-step {
    counter-increment: ti;
    position: relative;
    padding-left: 34px;
    font-size: var(--step--1, 13.5px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
  }
  .tool-info-step::before {
    content: counter(ti, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font: 600 11px / 1.4 var(--font-mono, ui-monospace, monospace);
    color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
    border-radius: 7px;
    padding: 4px 6px;
  }
  /* ── Rich tutorial layout (tools with `sections`) ─────────────────────
     A read-through walkthrough: mono chapter eyebrows, serif headings with
     an italic accent (same voice as the studio's own SectionHeader), path
     cards with monochrome glyphs + price pills, dash-ruled how-to lines and
     a hairline Tip callout. Pure black-and-white throughout. */
  .tool-info-panel--rich { width: clamp(340px, 34vw, 480px); }
  .tool-info-panel--rich .tool-info-tagline {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: var(--step-1, 18px);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 6px;
  }
  .ti-rich { display: flex; flex-direction: column; margin-bottom: 22px; }
  .ti-sec { padding: 18px 0 2px; }
  .ti-sec + .ti-sec { border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.08)); margin-top: 16px; }
  .ti-eyebrow {
    margin: 0 0 7px;
    font: 600 10px / 1 var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
  }
  .ti-heading {
    margin: 0 0 8px;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.1;
    color: #fff;
  }
  .ti-heading i { font-style: italic; color: rgba(255, 255, 255, 0.58); }
  .ti-body {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
  }
  .ti-paths { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 6px; }
  .ti-path {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 11px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.09));
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.024);
  }
  .ti-path-ic {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.09));
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.72);
  }
  .ti-path-ic svg { width: 17px; height: 17px; display: block; }
  .ti-path-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .ti-path-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 13px / 1.3 'Inter', system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.92);
  }
  .ti-price {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2.5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font: 600 10px / 1.3 var(--font-mono, ui-monospace, monospace);
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ti-path-note {
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.52);
  }
  .ti-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .ti-items li {
    position: relative;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
  }
  .ti-items li::before {
    content: '—';
    position: absolute;
    left: 0;
    top: 0;
    font: 500 12.5px / 1.6 var(--font-mono, ui-monospace, monospace);
    color: rgba(255, 255, 255, 0.32);
  }
  .ti-tip {
    margin: 12px 0 0;
    padding: 9px 0 9px 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.22);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
  }
  .ti-tip b { color: rgba(255, 255, 255, 0.85); font-weight: 600; }

  .tool-info-more {
    display: inline-block;
    font-size: var(--step--1, 13px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding-bottom: 1px;
    transition: color var(--dur-ui, 0.16s) var(--ease-io, ease), border-color var(--dur-ui, 0.16s) var(--ease-io, ease);
  }
  .tool-info-more:hover { color: #fff; border-color: #fff; }

  /* Mobile → bottom sheet. */
  @media (max-width: 480px) {
    .tool-info-panel {
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;
      width: auto;
      max-height: 80dvh;
      border-left: 0;
      border-top: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
      border-radius: 18px 18px 0 0;
      transform: translateY(100%);
      padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    }
    .tool-info-panel.is-open { transform: none; }
    .tool-info-scrim { inset: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .tool-info-panel { transition: none; }
    .tool-info-btn.is-first { animation: none; }
    .tool-info-btn { transition: none; }
  }
.university-chrome {
    position: sticky;
    top: 0;
    z-index: 80;
    min-height: 58px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px clamp(10px, 2vw, 22px);
    color: #fff;
  }

  .university-chrome *,
  .university-chrome *::before,
  .university-chrome *::after {
    box-sizing: border-box;
  }

  .university-chrome a {
    color: inherit;
    text-decoration: none;
  }

  .university-chrome__brand {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .university-chrome__brand span {
    color: rgba(255, 255, 255, .46);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .university-chrome__brand strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    line-height: 1.1;
  }

  .university-chrome__nav {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .university-chrome__nav::-webkit-scrollbar {
    display: none;
  }

  .university-chrome__nav a,
  .university-chrome__actions a {
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .7);
    font-size: 11px;
    font-weight: 900;
    padding: 0 11px;
  }

  .university-chrome__nav a:hover,
  .university-chrome__nav a.is-active,
  .university-chrome__actions a:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
  }

  .university-chrome__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  @media (max-width: 760px) {
    .university-chrome {
      grid-template-columns: 1fr auto;
      align-items: start;
    }

    .university-chrome__nav {
      grid-column: 1 / -1;
      order: 3;
      padding-top: 2px;
    }

    .university-chrome__actions a:first-child {
      display: none;
    }
  }
@keyframes astroFadeInOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes astroFadeIn {
	from {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroFadeOut {
	from {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroSlideFromRight {
	from {
		transform: translateX(100%);
	}
}

@keyframes astroSlideFromLeft {
	from {
		transform: translateX(-100%);
	}
}

@keyframes astroSlideToRight {
	to {
		transform: translateX(100%);
	}
}

@keyframes astroSlideToLeft {
	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	[data-astro-transition-scope] {
		animation: none !important;
	}
}

/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}
/* The content region. Reserves the 64px icon spine on the left; when the
       tool renders its own context rail it adds another 240px gutter. Top
       padding clears the 56px AppNav. Uses tokens; --suite-surface cards are
       allowed inside tools (this is the one non-sacred-black place). */
    .suite-stage {
      position: relative;
      min-height: calc(100vh - 56px);
      margin-top: 56px;
      margin-left: 64px;                 /* the always-present icon spine */
      transition: margin-left var(--dur-ui) var(--ease-io);
    }
    .suite-stage.has-context-rail { margin-left: calc(64px + 240px); }
    /* No icon spine on this page (hideToolSidebar) — reclaim its gutter. */
    .suite-stage--no-spine,
    .suite-stage--no-spine.has-context-rail { margin-left: 0; }
    .suite-stage--university {
      min-height: 100vh;
      margin: 0;
      background: #000;
    }

    @media (max-width: 900px) {
      /* the spine becomes a slide-over; the stage goes full width */
      .suite-stage,
      .suite-stage.has-context-rail { margin-left: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .suite-stage { transition: none; }
    }

    /* Unauthed in-shell sign-in CTA (component-safe; replaces the broken redirect). */
    .suite-signin {
      min-height: calc(100vh - 56px);
      display: grid; place-items: center; padding: 6vh 24px;
    }
    .suite-signin-card {
      max-width: 460px; text-align: center;
      background: var(--suite-surface); border: 1px solid var(--hairline);
      border-radius: 18px; padding: clamp(28px, 5vw, 48px);
    }
    .suite-signin-eyebrow {
      font: 600 var(--step--1)/1 var(--font-mono, ui-monospace, monospace);
      letter-spacing: .22em; text-transform: uppercase;
      color: rgba(255,255,255,.45); margin: 0 0 14px;
    }
    .suite-signin-title {
      font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
      font-size: var(--step-4); line-height: 1.02; margin: 0 0 12px; color: #fff;
    }
    .suite-signin-title i { font-style: italic; color: rgba(255,255,255,.6); }
    .suite-signin-sub {
      font-size: var(--step--1); line-height: 1.6;
      color: rgba(255,255,255,.55); margin: 0 auto 26px; max-width: 36ch;
    }
    .suite-signin-cta {
      display: inline-flex; align-items: center; justify-content: center;
      height: 46px; padding: 0 28px; border-radius: 12px;
      background: #fff; color: #000; font: 700 var(--step--1)/1 Inter, system-ui, sans-serif;
      text-decoration: none; transition: transform var(--dur-ui, .16s) var(--ease-io, ease);
    }
    .suite-signin-cta:hover { transform: translateY(-1px); }

    .university-signin {
      min-height: 100vh;
      padding: clamp(14px, 2vw, 22px);
      background:
        radial-gradient(circle at 78% 12%, rgba(255, 255, 255, .08), transparent 30%),
        radial-gradient(circle at 12% 86%, rgba(184, 255, 215, .07), transparent 28%),
        #000;
      color: rgba(255, 255, 255, .82);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .university-signin *,
    .university-signin *::before,
    .university-signin *::after {
      box-sizing: border-box;
    }

    .university-signin__top {
      width: min(1180px, 100%);
      min-height: 48px;
      margin: 0 auto;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .university-signin__top a {
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-decoration: none;
    }

    .university-signin__grid {
      width: min(1180px, 100%);
      min-height: calc(100vh - 86px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(260px, 360px);
      gap: 10px;
      align-items: center;
      padding: clamp(18px, 4vw, 46px) 0;
    }

    .university-signin__hero,
    .university-signin__proof {
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 8px;
      background: rgba(255, 255, 255, .045);
    }

    .university-signin__hero {
      min-height: 340px;
      display: grid;
      align-content: center;
      gap: 12px;
      padding: clamp(22px, 4.4vw, 46px);
      background:
        linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .82) 42%, rgba(0, 0, 0, .52) 100%),
        url('/university/ai-ofm-simeon-master.png') center / cover;
    }

    .university-signin__hero span,
    .university-signin__proof span {
      color: rgba(255, 255, 255, .46);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .university-signin__hero h1 {
      max-width: 15ch;
      margin: 0;
      color: #fff;
      font-size: clamp(30px, 4.2vw, 52px);
      line-height: 1;
      letter-spacing: 0;
    }

    .university-signin__hero p,
    .university-signin__proof li {
      max-width: 68ch;
      margin: 0;
      color: rgba(255, 255, 255, .68);
      font-size: 13px;
      line-height: 1.55;
    }

    .university-signin__hero div {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 4px;
    }

    .university-signin__hero div a {
      min-height: 36px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .86);
      font-size: 12px;
      font-weight: 850;
      text-decoration: none;
      padding: 0 13px;
    }

    .university-signin__hero div a.primary {
      background: #fff;
      border-color: #fff;
      color: #000;
    }

    .university-signin__proof {
      min-height: 340px;
      display: grid;
      align-content: center;
      gap: 14px;
      padding: 20px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
    }

    .university-signin__proof strong {
      color: #fff;
      font-size: 24px;
      line-height: 1.08;
    }

    .university-signin__proof ul {
      margin: 0;
      display: grid;
      gap: 8px;
      padding: 0;
      list-style: none;
    }

    .university-signin__proof li {
      border-top: 1px solid rgba(255, 255, 255, .1);
      padding-top: 8px;
    }

    @media (max-width: 760px) {
      .university-signin__grid {
        min-height: auto;
        grid-template-columns: 1fr;
      }

      .university-signin__hero,
      .university-signin__proof {
        min-height: auto;
      }

      .university-signin__hero h1 {
        max-width: 100%;
        font-size: clamp(32px, 12vw, 48px);
      }
    }
.ctp[data-astro-cid-exh4ehb6]{--ctp-bg: var(--k-bg, #000);--ctp-surface: var(--k-panel, #0a0a0a);--ctp-field: var(--k-well, #0b0b0b);--ctp-text: var(--k-text, #fff);--ctp-body: var(--k-text-body, rgba(255,255,255,.78));--ctp-muted: var(--k-text-quiet, rgba(255,255,255,.6));--ctp-line: var(--k-line-control, rgba(255,255,255,.12));--ctp-line-strong: var(--k-line-button, rgba(255,255,255,.18));position:relative;z-index:2;box-sizing:border-box;width:calc(100% - 48px);max-width:1200px;margin:28px auto;border:1px solid var(--ctp-line);border-radius:16px;background:var(--ctp-bg);color:var(--ctp-text);font-family:var(--k-font-ui, Inter, system-ui, sans-serif);color-scheme:dark}.ctp[data-astro-cid-exh4ehb6] [data-astro-cid-exh4ehb6],.ctp[data-astro-cid-exh4ehb6] *{box-sizing:border-box}.ctp-summary[data-astro-cid-exh4ehb6]{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;cursor:pointer;list-style:none}.ctp-summary[data-astro-cid-exh4ehb6]::-webkit-details-marker,.ctp-diagnostics[data-astro-cid-exh4ehb6]>summary[data-astro-cid-exh4ehb6]::-webkit-details-marker{display:none}.ctp-summary-copy[data-astro-cid-exh4ehb6]{display:grid;gap:6px}.ctp-summary-copy[data-astro-cid-exh4ehb6] strong[data-astro-cid-exh4ehb6]{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.025em}.ctp-summary-copy[data-astro-cid-exh4ehb6]>span[data-astro-cid-exh4ehb6]{color:var(--ctp-muted);font-size:12px;line-height:1.5}.ctp-arrow[data-astro-cid-exh4ehb6]{color:var(--ctp-muted);font-size:20px;line-height:1}.ctp[data-astro-cid-exh4ehb6][open]>.ctp-summary[data-astro-cid-exh4ehb6] .ctp-arrow[data-astro-cid-exh4ehb6]{transform:rotate(180deg)}.ctp-body[data-astro-cid-exh4ehb6]{border-top:1px solid var(--ctp-line);padding:28px}.ctp-layout[data-astro-cid-exh4ehb6]{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px;align-items:start}.ctp-panel[data-astro-cid-exh4ehb6]{min-width:0}.ctp-results[data-astro-cid-exh4ehb6]{border-left:1px solid var(--ctp-line);padding-left:36px}.ctp-eyebrow[data-astro-cid-exh4ehb6]{display:block;color:var(--ctp-muted);font-size:10px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.ctp[data-astro-cid-exh4ehb6] h2[data-astro-cid-exh4ehb6]{margin:0;font-size:22px;line-height:1.3;font-weight:550;letter-spacing:-.035em}.ctp[data-astro-cid-exh4ehb6] h3[data-astro-cid-exh4ehb6]{margin:0;font-size:15px;line-height:1.4;font-weight:600;letter-spacing:-.015em}.ctp-muted[data-astro-cid-exh4ehb6]{color:var(--ctp-muted);font-size:12px;line-height:1.7;margin:9px 0 20px}.ctp-form-step[data-astro-cid-exh4ehb6]{min-width:0;margin:25px 0 0;padding:0;border:0}.ctp-form-step[data-astro-cid-exh4ehb6] legend[data-astro-cid-exh4ehb6]{display:flex;align-items:center;gap:9px;padding:0;margin:0 0 13px;color:var(--ctp-body);font-size:12px;font-weight:600;line-height:1.5}.ctp-form-step[data-astro-cid-exh4ehb6] legend[data-astro-cid-exh4ehb6]>span[data-astro-cid-exh4ehb6]{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--ctp-line-strong);border-radius:50%;color:var(--ctp-muted);font-size:10px;font-variant-numeric:tabular-nums}.ctp-drop[data-astro-cid-exh4ehb6]{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px;border:1px dashed var(--ctp-line-strong);border-radius:12px;background:var(--ctp-surface);cursor:pointer}.ctp-drop[data-astro-cid-exh4ehb6]:hover,.ctp-drop[data-astro-cid-exh4ehb6]:focus-within{border-color:var(--ctp-muted)}.ctp-drop[data-astro-cid-exh4ehb6] strong[data-astro-cid-exh4ehb6]{font-size:13px;font-weight:550;line-height:1.5}.ctp-drop[data-astro-cid-exh4ehb6]>span[data-astro-cid-exh4ehb6]{color:var(--ctp-muted);font-size:12px;line-height:1.65}.ctp-drop[data-astro-cid-exh4ehb6] input[data-astro-cid-exh4ehb6]{display:block;width:100%;min-width:0;color:var(--ctp-muted);font:inherit;font-size:11px;line-height:1.5}.ctp-drop[data-astro-cid-exh4ehb6] input[data-astro-cid-exh4ehb6]::file-selector-button{min-height:36px;margin-right:10px;border:1px solid var(--ctp-line-strong);border-radius:999px;padding:8px 12px;color:var(--ctp-text);background:var(--ctp-bg);font:inherit;cursor:pointer}.ctp-upload-line[data-astro-cid-exh4ehb6]{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:12px 0 0}.ctp-file-selection[data-astro-cid-exh4ehb6]{flex:1 1 150px;min-width:0;display:grid;gap:3px;color:var(--ctp-body);font-size:11px;line-height:1.5}.ctp-file-selection[data-astro-cid-exh4ehb6]>span[data-astro-cid-exh4ehb6]:first-child{overflow-wrap:anywhere}.ctp-file-selection[data-astro-cid-exh4ehb6]>span[data-astro-cid-exh4ehb6]:last-child{color:var(--ctp-muted)}.ctp-upload-status[data-astro-cid-exh4ehb6]{margin-top:14px;border:1px solid var(--ctp-line);border-radius:12px;padding:14px;background:var(--ctp-surface)}.ctp-upload-stages[data-astro-cid-exh4ehb6]{display:flex;gap:8px;justify-content:space-between;list-style:none;padding:0;margin:0 0 16px}.ctp-upload-stages[data-astro-cid-exh4ehb6] li[data-astro-cid-exh4ehb6]{display:flex;gap:5px;align-items:center;color:var(--ctp-muted);font-size:10px;line-height:1.4}.ctp-upload-stages[data-astro-cid-exh4ehb6] li[data-astro-cid-exh4ehb6]>span[data-astro-cid-exh4ehb6]{width:19px;height:19px;display:inline-grid;place-items:center;flex:0 0 19px;border:1px solid var(--ctp-line-strong);border-radius:50%;font-variant-numeric:tabular-nums}.ctp-upload-stages[data-astro-cid-exh4ehb6] li[data-astro-cid-exh4ehb6][aria-current=step],.ctp-upload-stages[data-astro-cid-exh4ehb6] li[data-astro-cid-exh4ehb6][data-complete=true]{color:var(--ctp-text)}.ctp-upload-stages[data-astro-cid-exh4ehb6] li[data-astro-cid-exh4ehb6][aria-current=step]>span[data-astro-cid-exh4ehb6]{background:var(--ctp-text);color:var(--ctp-bg);border-color:var(--ctp-text)}.ctp-upload-stages[data-astro-cid-exh4ehb6] li[data-astro-cid-exh4ehb6][data-complete=true]>span[data-astro-cid-exh4ehb6]{border-color:var(--ctp-muted)}.ctp-upload-heading[data-astro-cid-exh4ehb6]{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;line-height:1.5}.ctp-upload-heading[data-astro-cid-exh4ehb6] strong[data-astro-cid-exh4ehb6]{font-weight:550}.ctp-upload-heading[data-astro-cid-exh4ehb6]>span[data-astro-cid-exh4ehb6]{font-variant-numeric:tabular-nums}.ctp-upload-meta[data-astro-cid-exh4ehb6]{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--ctp-muted);font-size:11px;line-height:1.6;font-variant-numeric:tabular-nums}.ctp-upload-meta[data-astro-cid-exh4ehb6] button[data-astro-cid-exh4ehb6]{padding:0;min-height:28px;font-size:11px}.ctp-button[data-astro-cid-exh4ehb6]{min-height:40px;max-width:100%;border:1px solid transparent;border-radius:999px;padding:10px 16px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.5;cursor:pointer;text-align:center}.ctp-button-primary[data-astro-cid-exh4ehb6]{color:var(--ctp-bg);background:var(--ctp-text)}.ctp-button-primary[data-astro-cid-exh4ehb6]:hover:not(:disabled){background:#ddd}.ctp-button-secondary[data-astro-cid-exh4ehb6]{color:var(--ctp-body);background:transparent;border-color:var(--ctp-line-strong)}.ctp-button-secondary[data-astro-cid-exh4ehb6]:hover:not(:disabled){color:var(--ctp-text);border-color:var(--ctp-muted)}.ctp[data-astro-cid-exh4ehb6] button[data-astro-cid-exh4ehb6]:disabled{opacity:.4;cursor:not-allowed}.ctp-text-button[data-astro-cid-exh4ehb6]{min-height:40px;padding:8px 4px;color:var(--ctp-body);background:transparent;border:0;font:inherit;font-size:12px;line-height:1.5;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.ctp-fields[data-astro-cid-exh4ehb6]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.ctp-fields[data-astro-cid-exh4ehb6] label[data-astro-cid-exh4ehb6],.ctp-run-picker[data-astro-cid-exh4ehb6]{display:grid;gap:8px;font-size:11px;line-height:1.5;color:var(--ctp-body)}.ctp-fields[data-astro-cid-exh4ehb6] input[data-astro-cid-exh4ehb6],.ctp[data-astro-cid-exh4ehb6] select[data-astro-cid-exh4ehb6]{width:100%;min-width:0;min-height:44px;padding:11px 12px;border:1px solid var(--ctp-line-strong);border-radius:9px;background:var(--ctp-field);color:var(--ctp-text);font:inherit;font-size:13px;line-height:1.5}.ctp-fields[data-astro-cid-exh4ehb6] input[data-astro-cid-exh4ehb6]::-moz-placeholder{color:var(--ctp-muted);opacity:1}.ctp-fields[data-astro-cid-exh4ehb6] input[data-astro-cid-exh4ehb6]::placeholder{color:var(--ctp-muted);opacity:1}.ctp[data-astro-cid-exh4ehb6] [data-astro-cid-exh4ehb6]:is(summary,button,a,input,select):focus-visible{outline:2px solid var(--ctp-text);outline-offset:3px}.ctp-hint[data-astro-cid-exh4ehb6]{display:block;margin:9px 0 0;color:var(--ctp-muted);font-size:11px;line-height:1.65}.ctp-check[data-astro-cid-exh4ehb6]{display:flex;align-items:flex-start;gap:10px;color:var(--ctp-body);font-size:12px;line-height:1.65;margin:20px 0 0;cursor:pointer}.ctp-check[data-astro-cid-exh4ehb6] input[data-astro-cid-exh4ehb6]{flex:0 0 16px;width:16px;height:16px;margin:2px 0 0;accent-color:var(--ctp-text)}.ctp-timing[data-astro-cid-exh4ehb6]{margin:0 0 16px}.ctp-start-row[data-astro-cid-exh4ehb6]{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.ctp-start-row[data-astro-cid-exh4ehb6] .ctp-button[data-astro-cid-exh4ehb6]{width:100%}.ctp-start-row[data-astro-cid-exh4ehb6] .ctp-hint[data-astro-cid-exh4ehb6]{margin:0}.ctp-feedback[data-astro-cid-exh4ehb6]{font-size:12px;line-height:1.65;color:var(--ctp-body);margin:12px 0 0;overflow-wrap:anywhere}.ctp-feedback[data-astro-cid-exh4ehb6]:empty{display:none}.ctp-feedback[data-astro-cid-exh4ehb6][data-error=true]{color:var(--ctp-text);padding-left:12px;border-left:2px solid var(--ctp-text)}.ctp-previews[data-astro-cid-exh4ehb6]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-height:230px;overflow:auto;margin-top:14px;padding:2px}.ctp-previews[data-astro-cid-exh4ehb6] figure{min-width:0;margin:0}.ctp-previews[data-astro-cid-exh4ehb6] .ctp-preview-image{display:grid;align-items:center;aspect-ratio:3/4;border:1px solid var(--ctp-line);border-radius:6px;overflow:hidden;background:var(--ctp-surface)}.ctp-previews[data-astro-cid-exh4ehb6] img{grid-area:1/1;width:100%;height:100%;aspect-ratio:3/4;-o-object-fit:contain;object-fit:contain}.ctp-previews[data-astro-cid-exh4ehb6] .ctp-preview-placeholder{grid-area:1/1;padding:6px;color:var(--ctp-muted);font-size:10px;line-height:1.4;text-align:center}.ctp-previews[data-astro-cid-exh4ehb6] figcaption{padding:6px 1px;font-size:10px;line-height:1.5;color:var(--ctp-body);overflow-wrap:anywhere}.ctp-previews[data-astro-cid-exh4ehb6] .ctp-preview-size{display:block;color:var(--ctp-muted);font-size:9px;margin-top:2px}.ctp-run-picker[data-astro-cid-exh4ehb6]{margin:25px 0 0}.ctp-empty[data-astro-cid-exh4ehb6]{display:flex;flex-direction:column;justify-content:center;min-height:220px;padding:30px 20px;margin-top:20px;border:1px dashed var(--ctp-line-strong);border-radius:12px}.ctp-empty[data-astro-cid-exh4ehb6] strong[data-astro-cid-exh4ehb6]{font-size:15px;line-height:1.5;font-weight:500}.ctp-empty[data-astro-cid-exh4ehb6] p[data-astro-cid-exh4ehb6]{max-width:330px;margin:8px 0 0;color:var(--ctp-muted);font-size:12px;line-height:1.7}.ctp-character[data-astro-cid-exh4ehb6]{margin-top:25px}.ctp-run-head[data-astro-cid-exh4ehb6]{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.ctp-run-head[data-astro-cid-exh4ehb6]>strong[data-astro-cid-exh4ehb6]{min-width:0;font-size:24px;line-height:1.25;font-weight:500;letter-spacing:-.04em;overflow-wrap:anywhere}.ctp-phase[data-astro-cid-exh4ehb6]{font-size:11px;line-height:1.5;color:var(--ctp-text);border:1px solid var(--ctp-line-strong);border-radius:999px;padding:5px 10px}.ctp-run-message[data-astro-cid-exh4ehb6]{margin-bottom:15px}.ctp[data-astro-cid-exh4ehb6] progress[data-astro-cid-exh4ehb6]{display:block;width:100%;height:4px;margin:12px 0 9px;border:0;border-radius:3px;accent-color:var(--ctp-text);overflow:hidden;background:var(--ctp-line)}.ctp[data-astro-cid-exh4ehb6] progress[data-astro-cid-exh4ehb6]::-webkit-progress-bar{background:var(--ctp-line);border-radius:3px}.ctp[data-astro-cid-exh4ehb6] progress[data-astro-cid-exh4ehb6]::-webkit-progress-value{background:var(--ctp-text);border-radius:3px}.ctp[data-astro-cid-exh4ehb6] progress[data-astro-cid-exh4ehb6]::-moz-progress-bar{background:var(--ctp-text);border-radius:3px}.ctp-progress-meta[data-astro-cid-exh4ehb6]{display:flex;gap:8px 14px;flex-wrap:wrap;justify-content:space-between;color:var(--ctp-muted);font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums}.ctp-evaluation[data-astro-cid-exh4ehb6]{border-top:1px solid var(--ctp-line);padding-top:24px;margin-top:25px}.ctp-evaluation-head[data-astro-cid-exh4ehb6]{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 12px}.ctp-evaluation-head[data-astro-cid-exh4ehb6] .ctp-hint[data-astro-cid-exh4ehb6]{margin:0}.ctp-samples[data-astro-cid-exh4ehb6]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:20px}.ctp-samples[data-astro-cid-exh4ehb6] figure{min-width:0;margin:0}.ctp-samples[data-astro-cid-exh4ehb6] a{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--ctp-line);background:var(--ctp-surface)}.ctp-samples[data-astro-cid-exh4ehb6] a:focus-visible{outline:2px solid var(--ctp-text);outline-offset:3px}.ctp-samples[data-astro-cid-exh4ehb6] img{display:block;width:100%;aspect-ratio:3/4;-o-object-fit:contain;object-fit:contain}.ctp-samples[data-astro-cid-exh4ehb6] figcaption{padding:8px 0 0;color:var(--ctp-body);font-size:11px;line-height:1.5}.ctp-samples[data-astro-cid-exh4ehb6] .ctp-sample-placeholder{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:14px;text-align:center;font-size:12px;line-height:1.6;color:var(--ctp-muted);border:1px solid var(--ctp-line);border-radius:10px;background:var(--ctp-surface)}.ctp-review[data-astro-cid-exh4ehb6]{border-top:1px solid var(--ctp-line);margin-top:24px}.ctp-review-actions[data-astro-cid-exh4ehb6]{display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;margin-top:16px}.ctp-ready-link[data-astro-cid-exh4ehb6]{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-top:20px;padding:11px 18px;color:var(--ctp-bg);background:var(--ctp-text);border-radius:999px;font-size:12px;line-height:1.5;font-weight:600;text-decoration:none}.ctp-diagnostics[data-astro-cid-exh4ehb6]{margin-top:32px;border-top:1px solid var(--ctp-line)}.ctp-diagnostics[data-astro-cid-exh4ehb6]>summary[data-astro-cid-exh4ehb6]{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:16px 0 0;list-style:none;cursor:pointer;color:var(--ctp-muted);font-size:11px;line-height:1.5}.ctp-diagnostics[data-astro-cid-exh4ehb6]>summary[data-astro-cid-exh4ehb6]>span[data-astro-cid-exh4ehb6]{font-size:16px}.ctp-diagnostics[data-astro-cid-exh4ehb6][open]>summary[data-astro-cid-exh4ehb6]>span[data-astro-cid-exh4ehb6]{transform:rotate(45deg)}.ctp-diagnostics-body[data-astro-cid-exh4ehb6]{padding-top:6px}.ctp-service[data-astro-cid-exh4ehb6]{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:16px}.ctp-service-copy[data-astro-cid-exh4ehb6]{min-width:0;flex:1 1 300px}.ctp-service[data-astro-cid-exh4ehb6] strong[data-astro-cid-exh4ehb6]{color:var(--ctp-body);font-size:12px;line-height:1.5;font-weight:550}.ctp-service[data-astro-cid-exh4ehb6] p[data-astro-cid-exh4ehb6]{margin:5px 0 0;color:var(--ctp-muted);font-size:11px;line-height:1.65}.ctp-service-actions[data-astro-cid-exh4ehb6]{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap}.ctp-budget[data-astro-cid-exh4ehb6]{margin-top:14px;font-variant-numeric:tabular-nums}.ctp[data-astro-cid-exh4ehb6] [data-astro-cid-exh4ehb6][hidden]{display:none!important}@media (max-width: 900px){.ctp-layout[data-astro-cid-exh4ehb6]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.ctp-results[data-astro-cid-exh4ehb6]{padding-left:24px}.ctp-fields[data-astro-cid-exh4ehb6]{grid-template-columns:minmax(0,1fr)}.ctp-run-head[data-astro-cid-exh4ehb6]>strong[data-astro-cid-exh4ehb6]{font-size:22px}}@media (max-width: 700px){.ctp[data-astro-cid-exh4ehb6]{width:calc(100% - 24px);margin:16px auto;border-radius:14px}.ctp-summary[data-astro-cid-exh4ehb6]{padding:20px}.ctp-body[data-astro-cid-exh4ehb6]{padding:24px 20px 16px}.ctp-layout[data-astro-cid-exh4ehb6]{display:flex;flex-direction:column;gap:30px}.ctp-panel[data-astro-cid-exh4ehb6]{width:100%}.ctp-results[data-astro-cid-exh4ehb6]{border-left:0;border-top:1px solid var(--ctp-line);padding:28px 0 0}.ctp-layout[data-astro-cid-exh4ehb6]:has([data-pilot-run]:not([hidden])) .ctp-results[data-astro-cid-exh4ehb6]{order:-1;border-top:0;padding:0 0 28px;border-bottom:1px solid var(--ctp-line)}.ctp-summary-copy[data-astro-cid-exh4ehb6] strong[data-astro-cid-exh4ehb6]{font-size:17px}.ctp[data-astro-cid-exh4ehb6] h2[data-astro-cid-exh4ehb6]{font-size:21px}.ctp-fields[data-astro-cid-exh4ehb6]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ctp-samples[data-astro-cid-exh4ehb6]{gap:12px}.ctp-check[data-astro-cid-exh4ehb6]{font-size:12px}.ctp-button[data-astro-cid-exh4ehb6],.ctp-text-button[data-astro-cid-exh4ehb6]{min-height:44px}.ctp-diagnostics[data-astro-cid-exh4ehb6]{margin-top:28px}}@media (max-width: 430px){.ctp-summary[data-astro-cid-exh4ehb6]{padding:18px}.ctp-body[data-astro-cid-exh4ehb6]{padding:22px 18px 12px}.ctp-fields[data-astro-cid-exh4ehb6]{grid-template-columns:minmax(0,1fr)}.ctp-drop[data-astro-cid-exh4ehb6]{padding:17px}.ctp-upload-stages[data-astro-cid-exh4ehb6]{gap:6px}.ctp-review-actions[data-astro-cid-exh4ehb6]{align-items:stretch;flex-direction:column;gap:4px}.ctp-review-actions[data-astro-cid-exh4ehb6] .ctp-text-button[data-astro-cid-exh4ehb6]{align-self:flex-start}.ctp-run-head[data-astro-cid-exh4ehb6]>strong[data-astro-cid-exh4ehb6]{font-size:23px}}
.character-recipe[data-astro-cid-fb3zkg27]{margin:0 0 28px;padding:22px 24px;border:1px solid var(--border, #343039);border-radius:18px;background:linear-gradient(135deg,rgba(177,140,255,.08),rgba(125,249,255,.025));color:var(--text,#eee)}.character-recipe-heading[data-astro-cid-fb3zkg27]{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.character-recipe[data-astro-cid-fb3zkg27] h2[data-astro-cid-fb3zkg27]{font-size:17px;line-height:1.35;margin:0;font-weight:600}.character-recipe-dot[data-astro-cid-fb3zkg27]{width:7px;height:7px;background:#b18cff;border-radius:50%}.character-recipe-tag[data-astro-cid-fb3zkg27]{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#cbb3ff}.character-recipe[data-astro-cid-fb3zkg27] p[data-astro-cid-fb3zkg27]{font-size:13px;line-height:1.65;color:var(--text-muted,#bbb);max-width:780px;margin:12px 0}.character-recipe-facts[data-astro-cid-fb3zkg27]{display:flex;gap:10px 24px;flex-wrap:wrap;font-size:12px;line-height:1.5;color:var(--text-muted,#bbb)}.character-recipe-facts[data-astro-cid-fb3zkg27] b[data-astro-cid-fb3zkg27]{color:var(--text,#eee);font-weight:600}.character-recipe[data-astro-cid-fb3zkg27] details[data-astro-cid-fb3zkg27]{margin-top:16px;font-size:12px}.character-recipe[data-astro-cid-fb3zkg27] summary[data-astro-cid-fb3zkg27]{cursor:pointer;color:var(--text,#eee);width:-moz-fit-content;width:fit-content}.character-recipe[data-astro-cid-fb3zkg27] ol[data-astro-cid-fb3zkg27]{padding-left:20px;line-height:1.8;color:var(--text-muted,#bbb)}@media (max-width:600px){.character-recipe[data-astro-cid-fb3zkg27]{padding:18px}.character-recipe-tag[data-astro-cid-fb3zkg27]{margin-left:17px}.character-recipe-facts[data-astro-cid-fb3zkg27]{flex-direction:column;gap:5px}}
.kc-beta-hold{position:relative;isolation:isolate;min-height:calc(100dvh - var(--app-nav-h,72px));display:grid;place-items:center;overflow:hidden;padding:clamp(28px,6vw,84px) 20px;background:#060608;color:#f7f7f8}
    .kc-beta-hold::before,.kc-beta-hold::after{content:"";position:absolute;z-index:-2;border-radius:999px;filter:blur(2px);opacity:.72}
    .kc-beta-hold::before{width:min(760px,76vw);height:min(760px,76vw);top:-48%;right:-18%;background:radial-gradient(circle,rgba(154,119,255,.22),rgba(49,215,255,.08) 42%,transparent 70%)}
    .kc-beta-hold::after{width:min(620px,72vw);height:min(620px,72vw);bottom:-50%;left:-14%;background:radial-gradient(circle,rgba(255,103,164,.16),rgba(255,185,91,.07) 44%,transparent 72%)}
    .kc-beta-hold-glow{position:absolute;z-index:-1;inset:11% 12%;background:linear-gradient(120deg,rgba(100,231,255,.06),rgba(156,120,255,.08),rgba(255,109,171,.05));filter:blur(70px);pointer-events:none}
    .kc-beta-hold-card{width:min(760px,100%);padding:clamp(28px,5vw,58px);border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:0 38px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(24px)}
    .kc-beta-hold-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;color:rgba(255,255,255,.68);font:700 10px/1 var(--font-mono,monospace);letter-spacing:.17em;text-transform:uppercase}
    .kc-beta-hold-kicker i{width:7px;height:7px;border-radius:50%;background:#ffd477;box-shadow:0 0 18px rgba(255,192,89,.82)}
    .kc-beta-hold h1{margin:0;color:#fff;font:500 clamp(42px,7vw,78px)/.95 var(--font-display,serif);letter-spacing:-.055em}
    .kc-beta-hold h1 em{color:transparent;background:linear-gradient(105deg,#77edff 3%,#b697ff 48%,#ff8bbd 92%);-webkit-background-clip:text;background-clip:text;font-style:normal}
    .kc-beta-hold-lead{max-width:650px;margin:25px 0 0;color:rgba(255,255,255,.68);font-size:clamp(15px,2vw,18px);line-height:1.65}
    .kc-beta-hold-release{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:34px;padding:20px 0;border-block:1px solid rgba(255,255,255,.1)}
    .kc-beta-hold-release span{color:rgba(255,255,255,.5);font:700 10px/1.2 var(--font-mono,monospace);letter-spacing:.13em;text-transform:uppercase}
    .kc-beta-hold-release strong{color:#fff;font:600 clamp(22px,4vw,34px)/1 var(--font-display,serif);letter-spacing:-.03em;text-align:right}
    .kc-beta-hold-safe{margin:20px 0 0;color:rgba(255,255,255,.48);font-size:13px;line-height:1.55}
    .kc-beta-hold-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}
    .kc-beta-hold-actions a{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 19px;border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}
    .kc-beta-hold-actions a:hover{transform:translateY(-2px)}
    .kc-beta-hold-primary{background:#fff;color:#09090b}
    .kc-beta-hold-secondary{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.045);color:#fff}
    @media(max-width:580px){.kc-beta-hold-card{border-radius:22px}.kc-beta-hold-release{align-items:flex-start;flex-direction:column}.kc-beta-hold-release strong{text-align:left}.kc-beta-hold-actions{display:grid}.kc-beta-hold-actions a{width:100%}}
    /* ════════════ Tool context rail (.kc-rail) ════════════ */
    .kc-rail{position:fixed;top:56px;left:64px;bottom:0;width:240px;padding:24px 16px 18px;background:transparent;border:0;z-index:600;display:flex;flex-direction:column;gap:14px;box-sizing:border-box;font-family:var(--font-ui)}
    .kc-rail-new{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border:1px solid var(--border-strong);border-radius:9999px;color:var(--text);font-size:12.5px;cursor:pointer;font-family:inherit;transition:background var(--dur-fast) var(--ease-io),border-color var(--dur-fast) var(--ease-io),color var(--dur-fast) var(--ease-io)}
    .kc-rail-new svg{width:13px;height:13px}
    .kc-rail-new:hover{background:rgba(255,255,255,.04);border-color:var(--border-strong);color:var(--text-hi)}
    .kc-rail-section{margin:6px 0 0;font:600 9.5px/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint);padding:0 4px}
    .kc-rail-list{list-style:none;margin:0;padding:0;flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:none}
    .kc-rail-list::-webkit-scrollbar{width:0;height:0;display:none}
    .kc-rail-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--text-muted);font-size:12.5px;line-height:1.4;cursor:pointer}
    .kc-rail-item .kc-rdot{width:22px;height:22px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex:0 0 auto;background:var(--surface-2);display:grid;place-items:center;font:400 12px var(--font-display);color:var(--text)}
    .kc-rail-item span{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .kc-rail-item:hover{background:rgba(255,255,255,.04);color:var(--text-hi)}
    .kc-rail-item.is-active{background:rgba(255,255,255,.06);color:var(--text-hi)}
    .kc-rail-foot{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--border)}
    .kc-rail-link{padding:6px 4px;font-size:12px;color:var(--text-muted);text-decoration:none;transition:color var(--dur-fast) var(--ease-io)}
    .kc-rail-link:hover{color:var(--text-hi)}
    @media (max-width:900px){.kc-rail{position:static;width:auto;left:0;top:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 20px 0}.kc-rail-list{flex-direction:row;flex:0 1 auto}.kc-rail-foot,.kc-rail-section{display:none}}

    /* ════════════ Page ════════════ */
    #kc{position:relative;max-width:1320px;margin:0 auto;padding:44px 32px 110px;font-family:var(--font-ui)}
    @media (max-width:900px){#kc{padding:24px 20px 80px;max-width:100%}}
    #kc .kc-head{margin-bottom:28px}
    #kc .kc-head.center-head{text-align:center}
    #kc .kc-head.center-head .suite-section-header{align-items:center}
    /* §3.6 font tweak — smaller copy in the dense spec panel */
    #kc .kc-sub{margin-top:12px;color:var(--text-muted);font:400 var(--step--1)/1.5 var(--font-ui);max-width:560px}
    #kc .kc-head.center-head .kc-sub{margin-left:auto;margin-right:auto}
    /* Sub-switch to the video editor (Kiara Cut) */
    #kc .kc-label{font:600 10px var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
    #kc .kc-label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;font-size:10.5px;color:var(--text-faint)}
    #kc .muted{color:var(--text-muted)}
    #kc em{font-style:italic;background:var(--holo-sweep);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    #kc .kc-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;overflow:hidden}
    #kc .kc-card.glow{box-shadow:0 0 0 1px rgba(255,255,255,.02),0 40px 120px -40px rgba(177,140,255,.22)}
    #kc .center{text-align:center;max-width:480px;margin:40px auto}
    #kc .center h2{font:400 var(--step-3) var(--font-display);margin-bottom:10px}
    #kc .center p{margin-bottom:22px;color:var(--text-muted)}
    #kc .kc-orb{width:64px;height:64px;margin:4px auto 18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(177,140,255,.5) 45%,rgba(125,249,255,.15) 70%,transparent);box-shadow:0 0 50px rgba(177,140,255,.4);animation:kcfloat 4s ease-in-out infinite}
    @keyframes kcfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

    /* boot + breathing dot (NO spinner) */
    #kc-boot .kc-boot-row{display:flex;align-items:center;gap:11px;color:var(--text-faint);font:500 13px var(--font-ui);padding:50px 4px}
    #kc .kc-bdot{width:9px;height:9px;border-radius:50%;background:var(--holo-2);animation:kcbreathe 1.4s ease-in-out infinite}
    @keyframes kcbreathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

    /* buttons */
    #kc .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface-2);color:var(--text);font:700 14px var(--font-ui);cursor:pointer;transition:.16s var(--ease-io)}
    #kc .btn:hover{border-color:var(--border-strong);transform:translateY(-1px)}
    #kc .btn:active{transform:translateY(0)}
    #kc .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
    #kc .btn.ghost{background:transparent}
    #kc .btn.primary{color:#000;border-color:transparent;background:
      linear-gradient(#fff,#fff) padding-box,
      var(--holo-sweep) border-box;
      box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 30px -8px rgba(177,140,255,.5)}
    #kc .btn.primary:hover{filter:brightness(1.02)}
    #kc .btn.primary:disabled{box-shadow:none}
    #kc .btn.danger-solid{background:#e5484d;color:#fff;border-color:transparent}
    #kc .btn.danger-solid:hover{background:#f25c61}
    #kc .btn.block{width:100%;margin-top:14px;height:52px;font-size:15px}

    /* legacy chips (studio mode) */
    #kc .chips{display:flex;gap:8px}
    #kc .chips.wrap{flex-wrap:wrap}
    #kc .chip{border:1px solid var(--border-strong);border-radius:999px;padding:7px 13px;font:600 12px var(--font-ui);color:var(--text-muted);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:.15s var(--ease-io)}
    #kc .chip:hover{border-color:var(--border-strong);color:var(--text)}
    /* clean selected state — flat, no purple glow */
    #kc .chip.on{color:#000;border-color:transparent;background:var(--text-hi);font-weight:700;box-shadow:none}

    /* ════ Studio rework — prompt-first, clean controls, roomier gallery ════ */
    #kc .kc-label-lg{font-size:11px;color:var(--text-muted)}
    #kc .kc-prompt{min-height:128px;max-height:48vh;background:#0a0a0c;border-radius:14px;padding:15px 16px;font:14.5px/1.6 var(--font-ui);resize:none;overflow-y:auto}
    #kc .kc-prompt::-moz-placeholder{color:var(--text-faint)}
    #kc .kc-prompt::placeholder{color:var(--text-faint)}
    /* Enhance (Grok prompt-perfecter) button row above the prompt */
    #kc .kc-promptlabel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 10px}
    #kc .kc-enhancebtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-strong);border-radius:999px;background:transparent;color:var(--text-muted);font:600 11px var(--font-ui);padding:5px 12px;cursor:pointer;transition:border-color .15s var(--ease-io),color .15s var(--ease-io)}
    #kc .kc-enhancebtn svg{width:14px;height:14px}
    #kc .kc-enhancebtn:hover{border-color:var(--text-hi);color:var(--text)}
    #kc .kc-enhancebtn:disabled{opacity:.55;cursor:wait}
    #kc .kc-enhancebtn.busy svg{animation:kc-espin .9s linear infinite}
    @keyframes kc-espin{to{transform:rotate(360deg)}}
    /* aspect-ratio picker — visual shape cards that actually show 9:16 / 1:1 / 16:9 */
    #kc .kc-aspect{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    #kc .kc-asp{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-height:78px;padding:10px 8px 9px;border:1px solid var(--border-strong);border-radius:12px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:.16s var(--ease-io);background:transparent}
    #kc .kc-asp:hover{border-color:var(--text-faint)}
    #kc .kc-asp b{font:600 12.5px var(--font-ui);color:var(--text);font-weight:600}
    #kc .kc-asp i{font:600 9.5px var(--font-mono);letter-spacing:.05em;color:var(--text-faint);font-style:normal}
    #kc .kc-asp-ic{display:block;margin-bottom:auto;border:1.5px solid var(--text-faint);border-radius:3px;background:rgba(255,255,255,.04);transition:.16s var(--ease-io);align-self:center}
    #kc .kc-asp-portrait{width:20px;height:34px}
    #kc .kc-asp-square{width:30px;height:30px}
    #kc .kc-asp-wide{width:38px;height:21px}
    /* clean selected — flat white outline, no purple glow */
    #kc .kc-asp.on{border-color:var(--text-hi);background:var(--suite-surface-2);box-shadow:none}
    #kc .kc-asp.on .kc-asp-ic{border-color:var(--text-hi);background:rgba(255,255,255,.14)}
    #kc .kc-asp.on b{color:var(--text-hi)}
    #kc .kc-asp.on i{color:var(--text-muted)}
    #kc .kc-asp:focus-visible{outline:2px solid var(--holo-2);outline-offset:2px}
    /* segmented control (quality / resolution) — even, full-width, clean */
    #kc .kc-seg{display:flex;gap:7px}
    #kc .kc-seg .chip{flex:1;text-align:center;padding:9px 6px;border-radius:11px}

    /* "wearing a saved look" pill */
    #kc .kc-wearing{display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:7px 10px 7px 12px;border-radius:999px;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo-sweep) border-box;border:1px solid transparent;font:600 12px var(--font-ui);color:var(--text)}
    #kc .kc-wearing-dot{width:8px;height:8px;border-radius:50%;background:var(--holo-sweep)}
    #kc .kc-wearing-label{font-variant-numeric:tabular-nums}
    #kc .kc-wearing-x{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--text-muted);font-size:16px;line-height:1;cursor:pointer;padding:0 2px;transition:color var(--dur-fast) var(--ease-io)}
    #kc .kc-wearing-x:hover{color:var(--text-hi)}

    /* inputs */
    #kc .kc-input{width:100%;height:48px;background:#000;border:1px solid var(--border-strong);border-radius:12px;color:var(--text);padding:0 16px;font:500 15px var(--font-ui);outline:none;transition:.15s;box-sizing:border-box}
    #kc .kc-input.sm{height:44px;font-size:14px}
    #kc .kc-input:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px rgba(177,140,255,.12)}
    #kc textarea{width:100%;min-height:96px;background:#000;border:1px solid var(--border-strong);border-radius:12px;color:var(--text);padding:12px 14px;font:13.5px/1.5 var(--font-ui);outline:none;resize:vertical;transition:.15s;box-sizing:border-box}
    #kc textarea:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px rgba(177,140,255,.12)}

    /* ════════════ SPEC STUDIO (Mode A) ════════════ */
    #kc .kc-studio2{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start}
    #kc .kc-mannequin{position:sticky;top:78px;display:flex;flex-direction:column;align-items:center;gap:14px}
    #kc .km-stage{position:relative;width:100%;aspect-ratio:200/460;background:
        radial-gradient(120% 80% at 50% 18%, rgba(177,140,255,.10), transparent 62%),
        linear-gradient(180deg,var(--surface-2),var(--surface));
      border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;perspective:1000px}
    /* ── Melissa real-photo preview (replaces the silhouette; box size untouched) ── */
    #kc #km-svg{display:none}
    #kc .km-photo{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s var(--ease-io);will-change:transform}
    #kc .km-photo::after{content:'';position:absolute;left:8%;right:8%;bottom:0;height:14%;
      background:radial-gradient(60% 100% at 50% 100%,rgba(0,0,0,.55),transparent);pointer-events:none;z-index:2}
    #kc .km-photo::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
      box-shadow:inset 0 0 0 1px rgba(177,140,255,.14)}
    /* Premium soft-focus: blur enough to keep her face/details from reading
       sharply (so tiny per-look drift between swaps is hidden) while the figure,
       body shape, hair colour + length stay clearly visible. Scaled up so the
       blurred edges overflow the clipped stage (no soft halo). */
    #kc .km-layer{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 12%;object-position:50% 12%;
      opacity:0;transform:scale(1.08);transition:opacity .24s var(--ease-io),transform .24s var(--ease-io);backface-visibility:hidden;
      filter:blur(2.5px) saturate(1.05) contrast(1.02)}
    #kc .km-layer.is-front{opacity:1;transform:scale(1.06)}
    #kc .km-fig{position:absolute;inset:0;width:100%;height:100%}
    #kc .km-body{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.18);stroke-width:1.1;transition:d var(--dur-ui) var(--ease-io),fill var(--dur-ui) var(--ease-io)}
    #kc .km-hair{fill:var(--km-hair,rgba(177,140,255,.32));stroke:none;opacity:.9;transition:d var(--dur-ui) var(--ease-io),fill var(--dur-ui) var(--ease-io)}
    #kc .km-floor{fill:rgba(125,249,255,.07)}
    #kc .km-grain{position:absolute;inset:0;pointer-events:none;opacity:.04;background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .5px);background-size:3px 3px}
    #kc .km-cap{font:400 16px var(--font-display);color:var(--text-muted);font-style:italic}

    #kc .kc-specwrap{min-width:0}
    #kc .kc-namebar{margin-bottom:16px}

    /* accordion steps */
    #kc .kc-acc{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
    #kc .kc-step{border-bottom:1px solid var(--border)}
    #kc .kc-step:last-child{border-bottom:0}
    #kc .kc-step>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}
    #kc .kc-step>summary::-webkit-details-marker{display:none}
    #kc .kc-step>summary:hover{background:rgba(255,255,255,.02)}
    #kc .ks-no{font:600 10px var(--font-mono);letter-spacing:.12em;color:var(--text-faint);font-variant-numeric:tabular-nums}
    #kc .ks-title{font:400 var(--step-1) var(--font-display);color:var(--text);line-height:1}
    #kc .ks-pick{flex:1 1 auto;text-align:right;font:500 12px var(--font-ui);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #kc .ks-chev{width:16px;height:16px;color:var(--text-faint);flex:0 0 auto;transition:transform var(--dur-fast) var(--ease-io)}
    #kc .kc-step[open]>summary .ks-chev{transform:rotate(180deg)}
    #kc .ks-body{padding:4px 20px 22px}

    /* swatches / segments — holo-select ONLY on chosen (playbook §1.2 rule 2) */
    #kc .sws{display:flex;flex-wrap:wrap;gap:8px}
    #kc .seg{display:inline-flex;flex-wrap:wrap;gap:6px;padding:4px;border:1px solid var(--border);border-radius:12px;background:#000}
    #kc .sw{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-strong);background:transparent;border-radius:999px;padding:8px 14px;font:600 12.5px var(--font-ui);color:var(--text-muted);cursor:pointer;transition:.15s var(--ease-io)}
    #kc .seg .sw{border-color:transparent;border-radius:9px;padding:7px 13px}
    #kc .sw:hover{color:var(--text);border-color:var(--border-strong)}
    #kc .seg .sw:hover{background:rgba(255,255,255,.04)}
    #kc .sw .dot{width:12px;height:12px;border-radius:50%;background:var(--d,#888);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);flex:0 0 auto}
    #kc .sw.on{color:#000;border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--holo-sweep) border-box;font-weight:700;box-shadow:0 6px 18px -8px rgba(177,140,255,.6)}
    #kc .seg .sw.on{box-shadow:0 4px 14px -6px rgba(177,140,255,.6)}
    #kc .sw.on .dot{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}

    #kc .cc-hint{margin-top:9px;font:400 12px var(--font-ui);color:var(--text-faint);line-height:1.5}

    /* cast bar */
    #kc .kc-castbar{margin-top:22px}
    #kc .kc-castrow{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
    #kc .kc-depthwrap{min-width:0}
    #kc .kc-surprise{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--border-strong);border-radius:999px;padding:8px 14px;color:var(--text-muted);font:600 12px var(--font-ui);cursor:pointer;transition:.15s var(--ease-io)}
    #kc .kc-surprise svg{width:14px;height:14px}
    #kc .kc-surprise:hover{color:var(--text);border-color:var(--border-strong)}
    #kc .kc-badge{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:5px 11px;border-radius:999px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo-sweep) border-box;font:600 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
    #kc .kc-badge.plain{background:var(--surface);border:1px solid var(--border-strong);color:var(--text-muted)}

    /* ════════════ ENTRY CHOOSER (path A / path B) ════════════ */
    /* ENTRY CHOOSER — premium, flat, no purple glow. Three equal cards, clean
       hairline surfaces, a quiet lift + enter-arrow on hover, and a Recommended
       badge on the flagship (synthetic) path. */
    /* Engine switch — a clean white segmented control above the create modes. */
    #kc .kc-engine-switch{display:flex;align-items:center;gap:10px;margin:2px 0 16px;padding:6px;border:1px solid var(--hairline);border-radius:14px;background:var(--suite-surface-2);width:-moz-fit-content;width:fit-content}
    #kc .kc-engine-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#9aa);padding-left:8px;padding-right:2px}
    #kc .kc-engine-opt{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border:none;border-radius:10px;background:transparent;color:var(--ink,#e8e8ea);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
    #kc .kc-engine-opt:hover{background:rgba(255,255,255,.06)}
    #kc .kc-engine-opt.is-on{background:#fff;color:#000}
    #kc .kc-engine-new{font-size:9.5px;font-weight:800;letter-spacing:.1em;padding:2px 6px;border-radius:6px;background:#facc15;color:#000}
    #kc .kc-engine-opt.is-on .kc-engine-new{background:#000;color:#facc15}
    #kc .kc-chooser{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 8px}
    @media (max-width:860px){#kc .kc-chooser{grid-template-columns:1fr}}
    #kc .kc-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:13px;text-align:left;padding:26px 24px 24px;min-height:222px;border:1px solid var(--hairline);border-radius:18px;background:var(--suite-surface-2);cursor:pointer;transition:transform .2s var(--ease-io),border-color .2s var(--ease-io),background .2s var(--ease-io)}
    #kc .kc-choice:hover{transform:translateY(-3px);border-color:var(--hairline-strong);background:var(--suite-surface)}
    #kc .kc-choice:focus-visible{outline:none;border-color:var(--text-hi)}
    #kc .kc-choice.is-primary{border-color:var(--border-strong)}
    #kc .kc-choice.is-primary:hover{border-color:var(--text-hi)}
    /* Recommended badge (flagship only) */
    #kc .kc-choice-rec{position:absolute;top:16px;right:16px;font:600 8.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-hi);padding:4px 9px;border:1px solid var(--border-strong);border-radius:999px;background:var(--suite-surface);transition:opacity .18s var(--ease-io)}
    #kc .kc-choice.is-primary:hover .kc-choice-rec{opacity:0}
    /* enter cue — slides in bottom-right on hover */
    #kc .kc-choice-go{position:absolute;bottom:22px;right:22px;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--text-hi);background:var(--suite-surface);border:1px solid var(--hairline);opacity:0;transform:translateX(-6px);transition:opacity .2s var(--ease-io),transform .2s var(--ease-io)}
    #kc .kc-choice-go svg{width:15px;height:15px;display:block}
    #kc .kc-choice:hover .kc-choice-go{opacity:1;transform:translateX(0)}
    #kc .kc-choice-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--suite-surface);border:1px solid var(--hairline);color:var(--text-muted);transition:border-color .25s var(--ease-io),color .35s var(--ease-io)}
    /* on hover the icon fills with the holographic gradient (cyan→purple→pink) */
    #kc .kc-choice:hover .kc-choice-mark{border-color:var(--hairline-strong)}
    #kc .kc-choice-mark svg{width:22px;height:22px;display:block}
    #kc .kc-choice:hover .kc-choice-mark svg{stroke:url(#kc-holo)}
    /* Heading "fills up" with the holographic gradient (cyan→purple→pink, the
       site's highlight pattern) on hover — a left-to-right wipe (layer 1 = the
       holo sweep, grown from 0→100% width; layer 2 underneath = the dim resting
       colour at 34% white). */
    #kc .kc-choice-h{
      font:400 var(--step-1) var(--font-display);letter-spacing:-.01em;
      background-image:linear-gradient(110deg,var(--holo-1),var(--holo-2),var(--holo-3)),linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34));
      background-size:0% 100%,100% 100%;background-position:left center;background-repeat:no-repeat;
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
      transition:background-size .5s var(--ease-io);
    }
    #kc .kc-choice:hover .kc-choice-h{background-size:100% 100%,100% 100%}
    @media (prefers-reduced-motion:reduce){#kc .kc-choice-h{transition:none}}
    #kc .kc-choice-p{font:400 13px/1.55 var(--font-ui);color:var(--text-muted);flex:1}
    #kc .kc-choice-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;padding-right:36px}
    #kc .kc-tag{font:600 9.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--hairline);color:var(--text-muted)}
    #kc .kc-tag.good{border-color:var(--hairline-strong);color:var(--text)}
    /* gallery choice mark — the holo diamond-grid glyph (its own identity) */

    /* ════════════ GALLERY PICKER (path C) ════════════
       Native kc-* mood: aura header, holo-select tiles, reveal entrance. */
    #kc .kc-gpick{max-width:880px;margin:0 auto}
    /* selection bar — sticky so the live counter stays in view while scrolling */
    #kc .kc-gpick-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0 14px;background:linear-gradient(180deg,var(--bg,#000) 70%,transparent);margin-bottom:6px}
    #kc .kc-gpick-bar .kc-pathback{margin-bottom:0}
    #kc .kc-gpick-count{margin-left:auto;font:600 13px var(--font-ui);color:var(--text-muted);display:inline-flex;align-items:baseline;gap:5px}
    #kc .kc-gpick-n{font:700 16px var(--font-mono);font-variant-numeric:tabular-nums;background:var(--holo-sweep);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    #kc .kc-gpick-count.full .kc-gpick-n{filter:saturate(1.2)}
    #kc .kc-gpick-sep,#kc .kc-gpick-max{color:var(--text-faint);font-family:var(--font-mono)}
    #kc .kc-gpick-bulk{display:inline-flex;gap:14px}

    #kc .kc-gp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;margin-top:2px}
    #kc .kc-gp-grid:empty{min-height:120px}
    #kc .kc-gp-grid.loading{pointer-events:none}
    #kc .kc-gp-cell{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface-2),var(--surface));cursor:pointer;padding:0;transition:transform .16s var(--ease-io),border-color .16s var(--ease-io),box-shadow .16s var(--ease-io)}
    #kc .kc-gp-cell .suite-skeleton{position:absolute;inset:0;border-radius:0}
    #kc .kc-gp-cell img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;animation:csdev var(--dur-reveal) var(--ease-out) both}
    #kc .kc-gp-cell:not(.is-skel):hover{transform:translateY(-3px);border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo-sweep) border-box;box-shadow:0 20px 46px -26px rgba(177,140,255,.6)}
    /* the soft purple veil + check mark only appear on the chosen tiles */
    #kc .kc-gp-cell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(177,140,255,.12),rgba(125,249,255,.10));opacity:0;transition:opacity .16s var(--ease-io);pointer-events:none}
    #kc .kc-gp-cell.on{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo-sweep) border-box;box-shadow:0 18px 42px -22px rgba(177,140,255,.7)}
    #kc .kc-gp-cell.on::after{opacity:1}
    #kc .kc-gp-cell .kc-gp-check{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.32);color:#fff;backdrop-filter:blur(4px);transform:scale(.7);opacity:0;transition:.16s var(--ease-io);z-index:2}
    #kc .kc-gp-cell .kc-gp-check svg{width:13px;height:13px;display:block}
    #kc .kc-gp-cell.on .kc-gp-check{transform:scale(1);opacity:1;background:var(--holo-sweep);border-color:transparent;color:#000}
    /* once 24 are chosen, the un-chosen tiles dim + lock so the cap is obvious */
    #kc .kc-gp-grid.maxed .kc-gp-cell:not(.on){opacity:.4;pointer-events:none;filter:grayscale(.3)}

    #kc .kc-gp-empty{display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:#000}
    #kc .kc-gp-empty:not([hidden]){display:flex}
    #kc .kc-gp-empty-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,var(--surface-2),var(--surface));border:1px solid var(--border-strong);font:400 22px var(--font-display);color:var(--holo-1)}
    #kc .kc-gp-empty-h{font:400 var(--step-1) var(--font-display);color:var(--text-hi);margin:6px 0 0}
    #kc .kc-gp-empty-p{font:400 13px/1.55 var(--font-ui);color:var(--text-muted);max-width:380px;margin:0}
    #kc .kc-gp-empty .btn{margin-top:8px;width:auto}

    /* sticky CTA — the big "bring her to life" gate, dimmed until 20+ chosen */
    #kc .kc-gp-cta{position:sticky;bottom:0;z-index:3;margin-top:22px;padding:16px 0 6px;background:linear-gradient(0deg,var(--bg,#000) 72%,transparent)}
    #kc .kc-gp-hint{font:500 12.5px var(--font-ui);color:var(--text-faint);text-align:center;margin:0 0 4px;min-height:17px;transition:color .16s var(--ease-io)}
    #kc .kc-gp-hint.ready{color:var(--text-muted)}
    #kc .kc-gp-cta .btn.block{max-width:420px;margin-left:auto;margin-right:auto}

    /* ── path back link ── */
    #kc .kc-pathback{background:none;border:0;color:var(--text-faint);font:600 12px var(--font-ui);cursor:pointer;padding:2px 0;margin-bottom:18px;transition:color var(--dur-fast) var(--ease-io)}
    #kc .kc-pathback:hover{color:var(--text)}
    /* Corner variant — pinned to the pane's top-right, out of the content
       column entirely so it never sits "under the text". Aligns with the
       header's eyebrow line; the h1 renders well below it. */
    #kc .kc-state{position:relative}
    #kc .kc-corner-back{position:absolute;top:4px;right:0;margin:0;z-index:3;padding:6px 0 6px 12px}

    /* ════════════ REFERENCE FLOW (path B) ════════════ */
    /* The private-provenance note. NOTE: --border-strong / --surface-2 are
       NOT defined on this page (never were) — any rule leaning on them
       renders border-less on pure black. This card uses live tokens only. */
    #kc .kc-ref-priv{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;max-width:640px;padding:13px 16px;margin:0 0 18px;border:1px solid var(--hairline-strong);border-radius:var(--radius);background:rgba(255,255,255,.028);font:400 12.5px/1.6 var(--font-ui);color:var(--text-muted)}
    #kc .kc-ref-priv .kc-tag{flex-shrink:0;margin-top:2px;background:rgba(255,255,255,.05)}
    #kc .kc-ref-priv-txt{flex:1;min-width:240px}
    #kc .kc-ref-priv-txt b{color:var(--text);font-weight:600}
    #kc .kc-refwrap{max-width:640px}
    #kc .kc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:30px 20px;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:#000;cursor:pointer;transition:.16s var(--ease-io)}
    #kc .kc-drop:hover,#kc .kc-drop.drag{border-color:var(--holo-2);background:rgba(177,140,255,.04)}
    #kc .kc-drop-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-strong);font:300 24px var(--font-ui);color:var(--text-muted);line-height:1}
    #kc .kc-drop-h{font:600 14px var(--font-ui);color:var(--text)}
    #kc .kc-drop-p{font:400 12px/1.5 var(--font-ui);color:var(--text-faint);max-width:360px}
    #kc .kc-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:14px}
    #kc .kc-ref-grid:empty{display:none}
    #kc .kc-ref-cell{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
    #kc .kc-ref-cell img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
    #kc .kc-ref-cell.load .suite-skeleton{position:absolute;inset:0;border-radius:0}
    #kc .kc-ref-cell.err{border-color:#e5484d}
    #kc .kc-ref-cell--pending img{opacity:.5}
    #kc .kc-ref-cell--pending.is-failed img{opacity:.32;filter:grayscale(.6)}
    #kc .kc-ref-spin{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid rgba(255,255,255,.28);border-top-color:#fff;animation:kc-ref-spin .8s linear infinite}
    @keyframes kc-ref-spin{to{transform:rotate(360deg)}}
    /* Zip unpacking — the whole dropzone becomes a processing state instead of
       just a status line, with a soft pulsing glow behind a larger ring spinner. */
    #kc .kc-drop.is-busy{cursor:default;border-color:var(--holo-2);background:rgba(177,140,255,.06);pointer-events:none;animation:kc-drop-pulse 1.8s ease-in-out infinite}
    @keyframes kc-drop-pulse{0%,100%{box-shadow:0 0 0 0 rgba(177,140,255,.16)}50%{box-shadow:0 0 0 10px rgba(177,140,255,0)}}
    #kc .kc-drop-mark.is-spin{border-color:transparent;font-size:0}
    #kc .kc-drop-mark.is-spin::before{content:'';width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(177,140,255,.25);border-top-color:var(--holo-2);animation:kc-ref-spin .8s linear infinite}
    #kc .kc-ref-retry{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.6);color:#fff;font-size:15px;cursor:pointer;line-height:1}
    #kc .kc-ref-retry:hover{background:rgba(0,0,0,.82)}
    #kc .kc-ref-x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#fff;font:300 15px/1 var(--font-ui);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
    #kc .kc-ref-x:hover{background:#e5484d}
    #kc .kc-gender{display:flex;gap:8px;margin-top:4px}
.kc-gender-opt{flex:1;position:relative;cursor:pointer}
.kc-gender-opt input{position:absolute;opacity:0;inset:0}
.kc-gender-opt span{display:flex;align-items:center;justify-content:center;padding:9px 0;border:1px solid rgba(255,255,255,.16);border-radius:10px;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);transition:all .12s}
.kc-gender-opt input:checked+span{background:#fff;color:#000;border-color:#fff}
#kc .kc-gender--gp{max-width:280px;margin:0 auto 10px}
.kc-consent{display:flex;align-items:flex-start;gap:11px;margin-top:20px;padding:14px 16px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);cursor:pointer;font:400 12.5px/1.55 var(--font-ui);color:var(--text-muted)}
    #kc .kc-consent input{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:0 0 auto;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--border-strong);border-radius:5px;background:#000;cursor:pointer;position:relative;transition:.14s var(--ease-io)}
    #kc .kc-consent input:checked{border-color:transparent;background:var(--holo-sweep)}
    #kc .kc-consent input:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
    #kc .kc-consent:hover{border-color:var(--border-strong);color:var(--text)}
    #kc .cc-cost{margin-top:14px;font:600 12.5px var(--font-ui);color:var(--text-muted);min-height:18px;display:flex;align-items:center;gap:7px}
    #kc .cc-cost b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-hi);font-weight:600}
    #kc .cc-soft{font:500 12px var(--font-ui);color:var(--text-faint);min-height:16px;margin-top:11px}
    #kc .cc-soft.err{color:#f08a8e}
    /* 1:1 requirement — stated before the dropzone, not after a failed train */
    #kc .kc-zip-rule{display:flex;gap:11px;align-items:flex-start;margin:0 0 12px;padding:11px 13px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:rgba(255,255,255,.02)}
    #kc .kc-zip-rule-badge{flex:none;display:grid;place-items:center;min-width:34px;height:22px;padding:0 7px;border-radius:999px;border:1px solid var(--holo-2);color:var(--holo-2);font:700 11px var(--font-ui);letter-spacing:.04em}
    #kc .kc-zip-rule b{display:block;font:600 12.5px var(--font-ui);color:var(--text);margin-bottom:3px}
    #kc .kc-zip-rule span{display:block;font:400 11.5px/1.5 var(--font-ui);color:var(--text-faint)}
    #kc .kc-zip-rule-em{display:inline;color:var(--text);font-weight:600}
    /* post-upload advisory when photos came back non-square */
    #kc .kc-zip-warn{margin-top:9px;padding:9px 11px;border-radius:var(--radius-lg);border:1px solid rgba(251,191,36,.34);background:rgba(251,191,36,.06);font:500 11.5px/1.5 var(--font-ui);color:#fbbf24}

    /* ════════════ PICK FROM 3 (previews) ════════════ */
    #kc .kc-prevwrap{max-width:760px;margin:0 auto}
    #kc .kc-prev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    @media (max-width:680px){#kc .kc-prev-grid{grid-template-columns:1fr 1fr}}
    @media (max-width:460px){#kc .kc-prev-grid{grid-template-columns:1fr}}
    #kc .kc-prevcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;cursor:pointer;text-align:left;color:var(--text);font-family:var(--font-ui);transition:transform .16s var(--ease-io),border-color .16s var(--ease-io),box-shadow .16s var(--ease-io)}
    #kc .kc-prevcard:disabled{cursor:default}
    #kc .kc-prevcard:not(:disabled):hover{transform:translateY(-3px);border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo-sweep) border-box;box-shadow:0 22px 50px -24px rgba(177,140,255,.6)}
    #kc .kc-prevcard .kc-previmg{position:relative;aspect-ratio:3/4;overflow:hidden;background:linear-gradient(180deg,var(--surface-2),var(--surface))}
    #kc .kc-prevcard .kc-previmg .suite-skeleton{position:absolute;inset:0;border-radius:0}
    #kc .kc-prevcard .kc-previmg img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;animation:csdev var(--dur-reveal) var(--ease-out) both}
    #kc .kc-prevcard .kc-prevpick{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;font:700 13px var(--font-ui);color:var(--text);border-top:1px solid var(--border)}
    #kc .kc-prevcard:not(:disabled):hover .kc-prevpick{color:var(--text-hi)}
    #kc .kc-prevcard .kc-prevpick svg{width:14px;height:14px}
    #kc .kc-prev-grid.loading .kc-prevcard{cursor:default;pointer-events:none}
    #kc .kc-prev-acts{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap}
    #kc .kc-prev-acts .kc-pathback{margin-bottom:0}
    #kc #kc-prev-refresh svg{width:14px;height:14px}
    #kc #kc-prev-refresh:disabled{opacity:.45;cursor:not-allowed}
    #kc .kc-prev-note{margin-top:12px;text-align:center;font:400 12px var(--font-ui);color:var(--text-faint)}
    #kc .kc-prev-note b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);font-weight:600}

    /* ════════════ PRICE GATE (quote) ════════════ */
    #kc .kc-quotewrap{max-width:460px;margin:0 auto}
    #kc .kc-quote-pick{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);margin-bottom:18px}
    #kc .kc-quote-thumb{flex:0 0 auto;width:72px;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
    #kc .kc-quote-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
    #kc .kc-quote-pickmeta{display:flex;flex-direction:column;gap:8px;min-width:0}
    /* One clean price statement — a quiet whisper line, the number big and
       proud, the balance as a footnote. Deliberately NOT a receipt. */
    #kc .kc-quote-one{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 18px 24px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);margin-bottom:16px;text-align:center}
    #kc .kc-quote-one-whisper{font:400 11.5px var(--font-ui);letter-spacing:.03em;color:var(--text-faint)}
    #kc .kc-quote-one-price{display:flex;align-items:baseline;gap:9px}
    #kc .kc-quote-one-price b{font:600 36px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-hi);letter-spacing:-.01em}
    #kc .kc-quote-one-price span{font:500 11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
    #kc .kc-quote-one-bal{font:400 12px var(--font-ui);color:var(--text-faint)}
    #kc .kc-quote-one-bal b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);font-weight:600}
    #kc .kc-quote-one-bal b.short{color:#f08a8e}
    #kc .kc-quotewrap .btn.ghost.block{width:100%;margin-top:10px}
    #kc #kc-quote-err{text-align:center}

    /* ════════════ CAST SHEET (training) ════════════ */
    #kc .kc-castsheet{max-width:920px;margin:0 auto}
    #kc .kc-train-back{position:absolute;left:0;top:4px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-muted);font:700 12px var(--font-ui);padding:8px 12px;cursor:pointer;transition:.15s var(--ease-io)}
    #kc .kc-train-back svg{width:14px;height:14px}
    #kc .kc-train-back:hover{border-color:var(--border-strong);color:var(--text)}
    #kc .kc-head.center-head{position:relative}
    #kc .cs-orbwrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 auto 28px;transition:gap .4s var(--ease-out)}
    /* The orb is a positioning context (NOT clipped) so the loading ring can sit
       OUTSIDE the face. The face is the clipped circle; the ring rides around it. */
    #kc .cs-orb{position:relative;width:132px;height:132px;transition:width .45s var(--ease-out),height .45s var(--ease-out)}
    /* Face: absolute circle, transparent bg (no grey placeholder square), clipped. */
    #kc .cs-orb-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:transparent;box-shadow:0 0 0 5px var(--bg,#000),0 18px 50px rgba(0,0,0,.5);z-index:1}
    #kc .cs-orb-face img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;border-radius:50%}
    /* Loading light: soft holo comet-arc, masked to a thin ring. overflow:hidden +
       border-radius guarantees a CLEAN circle — no square corners can ever leak. */
    #kc .cs-orb-ring{position:absolute;inset:-9px;border-radius:50%;overflow:hidden;z-index:0;
      background:conic-gradient(from 0deg, transparent 0 50%, rgba(125,249,255,.10) 66%, rgba(177,140,255,.30) 84%, rgba(255,154,213,.52) 100%);
      -webkit-mask:radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px), #000 100%, transparent 100%);
              mask:radial-gradient(circle closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px), #000 100%, transparent 100%);
      animation:csspin 1.9s linear infinite}
    #kc .cs-orb-count{font:600 12.5px var(--font-ui);color:var(--text-muted);text-align:center;letter-spacing:.01em}
    @keyframes csspin{to{transform:rotate(360deg)}}
    /* ── "Creating your character" hero: big centered face + prominent ring ── */
    #kc .kc-castsheet.creating .cs-grid{display:none}
    #kc .kc-castsheet.creating .cs-progress{display:none}
    #kc .kc-castsheet.creating .cs-orbwrap{margin-bottom:8px;gap:22px}
    #kc .kc-castsheet.creating .cs-orb{width:212px;height:212px}
    #kc .kc-castsheet.creating .cs-orb-ring{inset:-13px;animation-duration:2.4s}
    #kc .kc-castsheet.creating .cs-orb-face{box-shadow:0 0 0 6px var(--bg,#0b0c10),0 26px 72px rgba(0,0,0,.55)}
    #kc .kc-castsheet.creating .cs-orb-count{font-size:14px;color:var(--text)}
    /* Birth + failure resolve the ring (stop the sweep). */
    #kc .kc-castsheet.done-birth .cs-orb-ring{animation:none;background:conic-gradient(from 0deg,var(--holo-1),var(--holo-2),var(--holo-1))}
    #kc .kc-castsheet.done-birth .cs-orb-face{box-shadow:0 0 0 6px rgba(120,220,170,.18),0 26px 72px rgba(0,0,0,.5)}
    #kc .kc-castsheet.failed .cs-orb-ring{animation:none;background:conic-gradient(from 0deg,rgba(229,72,77,.7),transparent 62%)}
    #kc .cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:12px}
    #kc .cs-cell{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
    #kc .cs-cell .suite-skeleton{position:absolute;inset:0;border-radius:0}
    #kc .cs-cell img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;animation:csdev var(--dur-reveal) var(--ease-out) both}
    @keyframes csdev{from{opacity:0;filter:blur(14px) saturate(.4);transform:scale(1.04)}to{opacity:1;filter:none;transform:none}}
    #kc .cs-cell.is-empty::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 38%,rgba(177,140,255,.10),transparent 70%)}
    #kc .cs-rail{margin-top:26px}
    #kc .cs-beat{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center}
    #kc .cs-beat-step{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--font-ui);color:var(--text-faint);transition:color var(--dur-ui) var(--ease-io)}
    /* pending = clean grey dot */
    #kc .cs-beat-step .dot{position:relative;width:10px;height:10px;border-radius:50%;background:var(--border-strong);transition:.25s}
    #kc .cs-beat-step.is-active{color:var(--text)}
    /* active = small clean spinning ring (no glow, no clown colors) */
    #kc .cs-beat-step.is-active .dot{background:transparent;border:1.5px solid rgba(177,140,255,.22);border-top-color:var(--holo-2);box-shadow:none;animation:csspin .85s linear infinite}
    #kc .cs-beat-step.done{color:var(--text-muted)}
    /* done = soft dark-green checkmark, no background */
    #kc .cs-beat-step.done .dot{background:transparent;border:0;animation:none}
    #kc .cs-beat-step.done .dot::after{content:"";position:absolute;left:50%;top:46%;width:3px;height:6.5px;border:solid rgba(110,205,150,.95);border-width:0 1.6px 1.6px 0;transform:translate(-50%,-55%) rotate(45deg)}
    #kc .cs-progress{margin:18px auto 0;max-width:360px;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
    #kc .cs-progress-fill{display:block;height:100%;width:6%;border-radius:3px;background:var(--holo-sweep);transition:width .6s var(--ease-out)}
    #kc .cs-meta{margin-top:12px;text-align:center;font:600 12px var(--font-ui);color:var(--text-muted)}
    #kc .cs-actions{margin-top:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
    #kc .kc-castsheet.failed .cs-progress-fill{background:#e5484d}
    #kc .kc-castsheet.failed .cs-beat-step .dot{background:rgba(229,72,77,.4)}

    /* studio */
    #kc .kc-grid{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:start}
    #kc .kc-left{position:sticky;top:78px}
    /* ── top character bar (replaces the old left sidebar) ── */
    #kc .kc-roster{position:relative;margin-bottom:30px}
    #kc #character-training-pilot{width:100%;max-width:none;margin:0 0 30px}
    #kc .kc-roster-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
    #kc .kc-roster-heading h2{margin:0;font:600 14px var(--font-ui);color:var(--text)}
    #kc .kc-roster-message{margin:6px 0 0;font:400 12px var(--font-ui);color:var(--text-muted)}
    #kc .kc-roster-message:empty{display:none}
    #kc .kc-charbar{display:flex;align-items:center;gap:14px;margin:6px 0 26px;padding-bottom:20px;border-bottom:1px solid var(--hairline)}
    #kc .kc-roster .kc-charbar{margin-bottom:0;flex-wrap:wrap}
    #kc .kc-roster .kc-chars{flex-basis:100%}
    #kc .kc-addbtn{flex-shrink:0;background:transparent;border:1px solid var(--border-strong);border-radius:999px;color:var(--text-muted);font:600 12px var(--font-ui);padding:8px 16px;cursor:pointer;transition:.15s}
    #kc .kc-addbtn:hover{border-color:var(--text-hi);color:var(--text)}
    #kc .kc-creditspill{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--border-strong);border-radius:999px;color:var(--text-muted);font:600 12px var(--font-ui);font-variant-numeric:tabular-nums;padding:8px 16px;text-decoration:none;transition:.15s var(--ease-io)}
    #kc .kc-creditspill:hover{border-color:var(--text-hi);color:var(--text)}
    #kc .kc-creditspill span{color:var(--text)}
    #kc .kc-creditspill.is-low{border-color:rgba(240,138,142,.45);color:#f08a8e}
    #kc .kc-creditspill.is-low span{color:#f08a8e}
    /* Scales to any number of characters: one row, horizontal scroll, hidden
       scrollbar, snap, and a soft fade on the right edge so it's obvious more
       exist past the fold. renderChars() scrolls the active pill into view. */
    #kc .kc-chars{display:flex;gap:10px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent)}
    #kc .kc-chars::-webkit-scrollbar{height:6px}
    #kc .kc-chars::-webkit-scrollbar-track{background:transparent}
    #kc .kc-chars::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px}
    #kc .cpick{scroll-snap-align:start;display:flex;flex-direction:row;align-items:center;gap:9px;cursor:pointer;flex-shrink:0;max-width:190px;padding:5px 15px 5px 5px;border-radius:999px;border:1px solid var(--hairline);background:var(--suite-surface-2);transition:border-color .15s var(--ease-io)}
    #kc .cpick:hover{border-color:var(--hairline-strong)}
    #kc .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-strong);background:linear-gradient(145deg,var(--surface-2),var(--surface));font:400 16px var(--font-display);color:#fff;transition:.16s var(--ease-io);overflow:hidden;flex-shrink:0}
    #kc .av img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
    #kc .cpick.on{border-color:var(--text-hi)}
    #kc .cpick.on .av{border-color:transparent;box-shadow:0 0 0 2px var(--text-hi)}
    #kc .cpick span{font:600 13px var(--font-ui);color:var(--text-muted);line-height:1.2;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #kc .cpick.on span{color:var(--text-hi)}
    #kc .cpick .badge{display:none}
    #kc .cpick.training{border-color:rgba(177,140,255,.46)}
    /* Bug fix: this used to set overflow:visible so the spinning ring (drawn via
       ::after with a negative inset, poking outside the circle) wasn't clipped —
       but overflow:hidden is also what clips the square photo into a circle, so
       removing it made the photo render square for the whole training duration.
       Keep overflow:hidden (inherited from .av above) and draw the ring flush
       with the circle's own edge (inset:0) instead of poking outside it. */
    #kc .cpick.training .av{position:relative}
    #kc .cpick.training .av::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(177,140,255,.18);border-top-color:var(--holo-2);animation:csspin .9s linear infinite}
    #kc .cpick.training span{color:var(--text)}
    #kc .cpick .tbadge{display:inline-flex;align-items:center;font:700 10px var(--font-ui);color:#b18cff;background:rgba(177,140,255,.12);border:1px solid rgba(177,140,255,.35);border-radius:999px;padding:2px 7px;letter-spacing:.04em;flex-shrink:0}
    /* Failed training: a recoverable character (no model yet). Dimmed + red
       "Failed" badge + inline Recover action. Not selectable as a generate
       target — clicking the pill does nothing; only Recover acts. */
    #kc .cpick.failed{border-color:rgba(240,138,142,.4);cursor:default}
    #kc .cpick.failed .av{filter:grayscale(1);opacity:.6}
    #kc .cpick.failed span{color:#f08a8e}
    #kc .cpick .fbadge{display:inline-flex;align-items:center;font:700 10px var(--font-ui);color:#f08a8e;background:rgba(240,138,142,.12);border:1px solid rgba(240,138,142,.35);border-radius:999px;padding:2px 7px;letter-spacing:.04em;flex-shrink:0}
    #kc .cpick .kc-recover{background:none;border:1px solid rgba(240,138,142,.45);color:#f08a8e;font:700 11px var(--font-ui);border-radius:999px;padding:4px 11px;cursor:pointer;transition:.15s;flex-shrink:0}
    #kc .cpick .kc-recover:hover{background:rgba(240,138,142,.14);border-color:#f08a8e}
    #kc .cpick .kc-cdel{width:26px;height:26px;display:grid;place-items:center;background:transparent;border:1px solid rgba(240,138,142,.32);border-radius:50%;color:#f08a8e;cursor:pointer;transition:.15s;flex-shrink:0}
    #kc .cpick .kc-cdel svg{width:13px;height:13px}
    #kc .cpick .kc-cdel:hover{background:rgba(240,138,142,.14);border-color:#f08a8e;color:#fff}
    #kc .kc-roster .cpick{max-width:300px;border-radius:12px;padding:9px 12px;gap:10px;text-align:left;text-decoration:none;color:var(--text)}
    #kc .kc-roster .cpick:focus-visible{outline:2px solid var(--text-hi);outline-offset:2px}
    #kc .kc-roster .cpick .kc-charcopy{display:flex;flex-direction:column;gap:4px;max-width:200px;align-items:flex-start}
    #kc .kc-roster .cpick .kc-charname{max-width:190px}
    #kc .kc-roster .cpick .tbadge{max-width:200px;padding:0;border:0;background:none;font:400 11px var(--font-ui);letter-spacing:0;color:var(--text-muted)}
    #kc .kc-roster .cpick.training{border-color:var(--hairline)}
    #kc .kc-roster .cpick.training .av::after{content:none}
    #kc .kc-roster .cpick .kc-review-action{font:600 11px var(--font-ui);color:var(--text);max-width:100px}
    @media(max-width:540px){#kc .kc-roster .cpick{max-width:270px}#kc .kc-roster .cpick .kc-charname{max-width:150px}}
    #kc .kc-rail-item.failed .kc-rdot{filter:grayscale(1);opacity:.6}
    #kc .kc-rail-item.failed span{color:#f08a8e}
    #kc .kc-rail-item.training .kc-rdot{box-shadow:0 0 0 2px rgba(177,140,255,.35)}
    #kc .kc-rail-item.training span{color:var(--text)}
    #kc .kc-status{margin-top:12px;font:600 12px var(--font-ui);color:var(--text-muted);min-height:18px;display:flex;align-items:center;gap:8px}
    #kc .kc-managerow{margin-top:22px}
    #kc .kc-textbtn{background:none;border:none;color:var(--text-faint);font:600 12px var(--font-ui);cursor:pointer;padding:2px 0;transition:.15s}
    #kc .kc-textbtn:hover{color:var(--text)}
    #kc .kc-textbtn.danger:hover{color:#f08a8e}

    /* gallery */
    #kc .kc-rhead{margin-bottom:14px}
    #kc .kc-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
    #kc .tile{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#000;aspect-ratio:3/4;cursor:zoom-in;transition:.18s var(--ease-io)}
    #kc .tile:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.6)}
    #kc .tile img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;transition:.4s}
    #kc .tile:hover img{transform:scale(1.05)}
    #kc .tile.load{cursor:default}
    #kc .tile.load .suite-skeleton{position:absolute;inset:0;border-radius:0}
    #kc .kc-empty-g{grid-column:1/-1;text-align:center;color:var(--text-faint);padding:54px;border:1px dashed var(--border);border-radius:14px;font:400 18px var(--font-display)}

    /* lightbox */
    #kc-lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:32px}
    #kc-lb.on{display:flex}
    #kc-lb .kc-lb-x{position:absolute;top:16px;right:24px;font:300 30px var(--font-ui);color:var(--text-muted);cursor:pointer;z-index:3;line-height:1}
    #kc-lb .kc-lb-x:hover{color:#fff}
    #kc-lb .kc-lb-stage{display:flex;gap:22px;align-items:stretch;max-width:1500px;width:100%;max-height:90vh}
    #kc-lb .kc-lb-imgwrap{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
    #kc-lb .kc-lb-imgwrap img{max-width:100%;max-height:90vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.7);-o-object-fit:contain;object-fit:contain}
    #kc-lb .kc-lb-side{width:344px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;background:var(--suite-surface,#0d0e12);border:1px solid var(--hairline);border-radius:16px;padding:20px;max-height:90vh}
    #kc-lb .kc-lb-scroll{flex:1;overflow-y:auto;min-height:0}
    #kc-lb .kc-lb-char{font:600 14px var(--font-ui);color:var(--text-hi);margin-bottom:14px;display:flex;align-items:center;gap:9px}
    #kc-lb .kc-lb-char img{width:30px;height:30px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0}
    #kc-lb .kc-lb-plabel{font:600 10px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:7px}
    #kc-lb .kc-lb-prompt{font:13.5px/1.6 var(--font-ui);color:var(--text);margin:0 0 16px;white-space:pre-wrap;word-break:break-word}
    #kc-lb .kc-lb-params{display:flex;flex-direction:column}
    #kc-lb .kc-lb-prow{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;border-top:1px solid var(--hairline);padding:8px 0}
    #kc-lb .kc-lb-prow span{color:var(--text-faint)}
    #kc-lb .kc-lb-prow b{color:var(--text);font-weight:600;text-align:right;word-break:break-word}
    #kc-lb .kc-lb-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex-shrink:0}
    #kc-lb .kc-lbact{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;border:1px solid var(--border-strong);border-radius:10px;background:transparent;color:var(--text);font:600 12.5px var(--font-ui);cursor:pointer;transition:.13s var(--ease-io)}
    #kc-lb .kc-lbact svg{width:15px;height:15px;flex:0 0 auto}
    #kc-lb .kc-lbact:hover{border-color:transparent;background:#fff;color:#000}
    #kc-lb .kc-lbact.is-fav{border-color:transparent;background:var(--holo-wash);color:var(--text-hi)}
    #kc-lb .kc-lbact.danger:hover{background:#e5484d;color:#fff}
    #kc-lb .kc-lbact.wide{grid-column:1/-1}
    #kc-lb .kc-lbact:disabled{opacity:.5;cursor:wait}
    @media (max-width:820px){
      #kc-lb{padding:0;align-items:stretch}
      #kc-lb .kc-lb-stage{flex-direction:column;max-height:100vh;height:100dvh;gap:0;max-width:100%}
      #kc-lb .kc-lb-imgwrap{max-height:52vh;background:#000}
      #kc-lb .kc-lb-side{width:100%;border-radius:0;border:0;border-top:1px solid var(--hairline);max-height:48vh}
    }

    /* confirm */
    #kc-confirm{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
    #kc-confirm.on{display:flex}
    #kc-confirm .cf-box{background:var(--surface);border:1px solid var(--border-strong);border-radius:18px;padding:28px;max-width:380px;text-align:center}
    #kc-confirm h3{font:400 24px var(--font-display);margin-bottom:8px}
    #kc-confirm p{margin-bottom:20px;font:400 14px/1.5 var(--font-ui)}
    #kc-confirm .cf-actions{display:flex;gap:10px;justify-content:center}

    /* ════════════ PRESET / MUSE rail (Mode A) ════════════ */
    #kc .kc-presets{margin:0 0 26px}
    #kc .kc-presets-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
    #kc .kc-presets-hint{font:400 12px var(--font-ui);color:var(--text-faint)}
    #kc .kc-presets-rail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
    #kc .kc-presets-rail::-webkit-scrollbar{height:6px}
    #kc .kc-presets-rail::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
    #kc .kc-preset{flex:0 0 auto;width:158px;scroll-snap-align:start;display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;cursor:pointer;text-align:left;color:var(--text);font-family:var(--font-ui);transition:border-color var(--dur-fast) var(--ease-io),transform var(--dur-fast) var(--ease-io)}
    #kc .kc-preset:hover{border-color:var(--border-strong);transform:translateY(-2px)}
    #kc .kc-preset:focus-visible{outline:none;border-color:transparent;box-shadow:0 0 0 2px #000,0 0 0 4px var(--holo-2)}
    #kc .kc-preset.is-on{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo-sweep) border-box;box-shadow:0 8px 26px -12px rgba(177,140,255,.55)}
    #kc .kc-preset-cover{position:relative;aspect-ratio:3/4;background:
        radial-gradient(120% 90% at 50% 22%,rgba(177,140,255,.20),transparent 60%),
        linear-gradient(180deg,var(--surface-2),#000)}
    #kc .kc-preset-cover::after{content:"";position:absolute;inset:0;opacity:.05;background-image:radial-gradient(rgba(255,255,255,.6) .5px,transparent .5px);background-size:3px 3px;pointer-events:none}
    #kc .kc-preset-fig{position:absolute;inset:0;width:100%;height:100%}
    #kc .kc-preset-img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 20%;object-position:center 20%;display:block}
    #kc .kc-preset-fig .f-body{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.16);stroke-width:1}
    #kc .kc-preset-fig .f-hair{stroke:none;opacity:.85}
    #kc .kc-preset-meta{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px}
    #kc .kc-preset-name{font:400 16px var(--font-display);line-height:1.1}
    #kc .kc-preset-tag{font:400 11px var(--font-ui);color:var(--text-faint)}
    #kc .kc-preset.surprise{align-items:center;justify-content:center;background:transparent;border-style:dashed}
    #kc .kc-preset.surprise:hover{background:rgba(255,255,255,.02)}
    #kc .kc-preset-sgrid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;flex:1 1 auto;color:var(--text-muted)}
    #kc .kc-preset-sgrid svg{width:26px;height:26px}
    #kc .kc-preset-sgrid span{font:600 12.5px var(--font-ui)}

    /* ════════════ HER BLUEPRINT — sticky summary ════════════ */
    #kc .kc-blueprint{position:relative;z-index:5;margin-bottom:16px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(8,8,11,.86);backdrop-filter:blur(10px) saturate(1.1)}
    #kc .kc-bp-toggle{width:100%;display:flex;align-items:center;gap:10px;padding:12px 16px;background:transparent;border:0;color:var(--text);cursor:pointer;font-family:var(--font-ui)}
    #kc .kc-bp-eyebrow{font:600 10px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
    #kc .kc-bp-count{margin-left:auto;font:600 11px var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--text-muted)}
    #kc .kc-bp-chev{width:15px;height:15px;color:var(--text-faint);transition:transform var(--dur-fast) var(--ease-io)}
    #kc .kc-blueprint.is-open .kc-bp-chev{transform:rotate(180deg)}
    #kc .kc-bp-body{padding:0 16px 14px}
    #kc .kc-bp-chips{display:flex;flex-wrap:wrap;gap:6px}
    #kc .kc-bp-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 11px;border-radius:999px;border:1px solid var(--border-strong);background:#000;font:600 11.5px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-io),color var(--dur-fast) var(--ease-io)}
    #kc .kc-bp-chip:hover{border-color:var(--border-strong);color:var(--text-hi)}
    #kc .kc-bp-chip .k{color:var(--text-faint);font-weight:600;letter-spacing:.02em}
    #kc .kc-bp-chip-x{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--text-muted);font-size:12px;line-height:1}
    #kc .kc-bp-chip-x:hover{background:#e5484d;color:#fff}
    #kc .kc-bp-empty{margin:0;font:400 12px var(--font-ui);color:var(--text-faint)}
    /* mobile: collapsed by default, expands on tap */
    #kc .kc-bp-body{display:block}
    @media(max-width:980px){
      #kc .kc-bp-body{display:none}
      #kc .kc-blueprint.is-open .kc-bp-body{display:block}
    }
    @media(min-width:981px){ #kc .kc-bp-chev{display:none} }

    /* ════════════ Studio tile ACTION SET (the "and then what?" loop) ════════════ */
    #kc .tile{cursor:pointer}
    #kc .tile-fig{position:absolute;inset:0;cursor:zoom-in}
    /* clean hover quick-actions (full set lives in the viewer) */
    #kc .tile-quick{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s var(--ease-io);z-index:2}
    #kc .tile:hover .tile-quick,#kc .tile:focus-within .tile-quick{opacity:1}
    #kc .tile-qbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:9px;background:rgba(8,8,10,.66);backdrop-filter:blur(8px);color:#fff;cursor:pointer;transition:.13s var(--ease-io);padding:0}
    #kc .tile-qbtn svg{width:16px;height:16px}
    #kc .tile-qbtn:hover{background:#fff;color:#000}
    #kc .tile-qbtn.is-fav{background:var(--holo-wash);color:var(--text-hi)}
    @media(hover:none){#kc .tile-quick{opacity:1}}
    #kc .tile-acts{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:0;padding:8px;opacity:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.32) 46%,transparent 78%);transition:opacity var(--dur-fast) var(--ease-io);pointer-events:none}
    #kc .tile:hover .tile-acts,#kc .tile:focus-within .tile-acts,#kc .tile.acts-open .tile-acts{opacity:1;pointer-events:auto}
    #kc .tile-actrow{display:flex;flex-wrap:wrap;gap:5px}
    #kc .tile-act{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 9px;border:1px solid var(--border-strong);border-radius:8px;background:rgba(12,12,14,.78);backdrop-filter:blur(6px);color:var(--text);font:600 11px var(--font-ui);cursor:pointer;transition:.13s var(--ease-io)}
    #kc .tile-act svg{width:13px;height:13px;flex:0 0 auto}
    #kc .tile-act:hover{border-color:transparent;background:#fff;color:#000}
    #kc .tile-act.danger:hover{background:#e5484d;color:#fff}
    #kc .tile-act.is-soon{opacity:.62}
    #kc .tile-act.is-soon::after{content:"soon";font:600 8px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--holo-1);margin-left:3px}
    #kc .tile-act:disabled{opacity:.4;cursor:wait}
    /* coarse pointers: surface a single "Actions" toggle, expand on tap */
    #kc .tile-acttoggle{position:absolute;top:7px;right:7px;width:30px;height:30px;display:none;align-items:center;justify-content:center;border:1px solid var(--border-strong);border-radius:8px;background:rgba(12,12,14,.8);color:var(--text);cursor:pointer;z-index:2}
    #kc .tile-acttoggle svg{width:15px;height:15px}
    @media(hover:none),(pointer:coarse){
      #kc .tile-acttoggle{display:inline-flex}
      #kc .tile-acts{opacity:0;pointer-events:none}
      #kc .tile.acts-open .tile-acts{opacity:1;pointer-events:auto}
    }

    /* The [hidden] attribute MUST always win. Selectors like `#kc .kc-resume{display:flex}`
       outrank the UA `[hidden]{display:none}`, so JS toggling el.hidden had NO effect — the
       recovery banners stayed visible and Discard/hide appeared to "do nothing". Force it. */
    #kc [hidden]{display:none!important}
    /* ════════════ DRAFT AUTOSAVE — "Resume your character" card ════════════ */
    #kc .kc-resume{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 22px;padding:13px 16px;border:1px solid transparent;border-radius:var(--radius);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo-sweep) border-box;box-shadow:0 10px 34px -18px rgba(177,140,255,.5)}
    #kc .kc-resume-body{display:flex;align-items:center;gap:12px;min-width:0}
    #kc .kc-resume-dot{width:9px;height:9px;border-radius:50%;background:var(--holo-2);flex:0 0 auto;animation:kcbreathe 1.4s ease-in-out infinite}
    #kc .kc-resume-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
    #kc .kc-resume-txt strong{font:600 13.5px var(--font-ui);color:var(--text-hi)}
    #kc .kc-resume-meta{font:500 11.5px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #kc .kc-resume-acts{display:flex;align-items:center;gap:14px;flex:0 0 auto}
    #kc .kc-resume-btn{height:36px;padding:0 16px;border-radius:10px;border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--holo-sweep) border-box;color:#000;font:700 12.5px var(--font-ui);cursor:pointer;transition:filter var(--dur-fast) var(--ease-io)}
    #kc .kc-resume-btn:hover{filter:brightness(1.03)}

    /* ════════════ LOOK / PROMPT HISTORY rail ════════════ */
    #kc .kc-history-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
    #kc .kc-history-list::-webkit-scrollbar{width:5px}
    #kc .kc-history-list::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
    #kc .kc-hrow{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color var(--dur-fast) var(--ease-io)}
    #kc .kc-hrow:hover{border-color:var(--border-strong)}
    #kc .kc-htext{flex:1 1 auto;min-width:0;font:500 12px var(--font-ui);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text}
    #kc .kc-hrow:hover .kc-htext{color:var(--text)}
    #kc .kc-hseed{font:600 10.5px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-faint);flex:0 0 auto}
    #kc .kc-hbtn{flex:0 0 auto;height:26px;padding:0 10px;border:1px solid var(--border-strong);border-radius:999px;background:transparent;color:var(--text-muted);font:600 11px var(--font-ui);cursor:pointer;transition:.14s var(--ease-io)}
    #kc .kc-hbtn:hover{border-color:transparent;background:#fff;color:#000}

    /* ════════════ Gallery FAVORITES filter ════════════ */
    #kc .kc-rhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
    #kc .kc-galfilter{display:inline-flex;gap:6px}
    #kc .kc-galchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--border-strong);border-radius:999px;background:transparent;color:var(--text-muted);font:600 11.5px var(--font-ui);cursor:pointer;transition:.14s var(--ease-io)}
    #kc .kc-galchip svg{width:13px;height:13px}
    #kc .kc-galchip:hover{color:var(--text);border-color:var(--border-strong)}
    #kc .kc-galchip.on{color:#000;border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--holo-sweep) border-box;box-shadow:0 6px 18px -10px rgba(177,140,255,.6)}
    #kc .kc-galcount{font:600 10.5px var(--font-mono);font-variant-numeric:tabular-nums;opacity:.8}

    /* tile favorite mark + action state */
    #kc .tile-favmark{position:absolute;top:7px;left:7px;width:24px;height:24px;display:none;align-items:center;justify-content:center;border-radius:7px;background:rgba(12,12,14,.72);backdrop-filter:blur(5px);color:var(--holo-1);z-index:2;pointer-events:none}
    #kc .tile-favmark svg{width:13px;height:13px;fill:currentColor;stroke:currentColor}
    #kc .tile.is-faved .tile-favmark{display:inline-flex}
    #kc .tile-fav.is-fav{border-color:transparent;background:#fff;color:#000}
    #kc .tile-fav.is-fav svg{fill:currentColor}

    /* ════════════ toast ════════════ */
    #kc-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);z-index:240;display:flex;flex-direction:column;gap:8px;align-items:center;opacity:0;pointer-events:none;transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out)}
    #kc-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
    #kc-toast .kc-tmsg{padding:11px 16px;border-radius:12px;border:1px solid var(--border-strong);background:rgba(11,11,13,.94);backdrop-filter:blur(10px);color:var(--text);font:600 13px var(--font-ui);box-shadow:0 18px 50px -16px rgba(0,0,0,.8);max-width:min(92vw,420px);text-align:center}
    #kc-toast .kc-tmsg.holo{border-color:transparent;background:linear-gradient(rgba(11,11,13,.94),rgba(11,11,13,.94)) padding-box,var(--holo-sweep) border-box}
    #kc-toast .kc-tmsg.err{color:#f08a8e}

    @media(max-width:980px){
      #kc .kc-studio2{grid-template-columns:1fr;gap:24px}
      #kc .kc-mannequin{position:static;flex-direction:row;align-items:center;gap:18px}
      #kc .km-stage{width:120px;flex:0 0 auto}
      #kc .km-layer{filter:blur(1.4px) saturate(1.05)}
      #kc .km-cap{text-align:left}
    }
    @media(max-width:880px){
      #kc .kc-grid{grid-template-columns:1fr}
      #kc .kc-left{position:static}
      #kc .cs-grid{gap:8px}
      #kc .kc-castrow{align-items:flex-start}
    }
    /* ════════════ Interaction polish — press feedback + focus rings ════════════
       Additive only: every existing hover/selection rule above is untouched.
       A cheap scale-on-:active (no will-change, no layout writes) reads as
       tactile/premium with zero perf cost — inert until an element is
       actually pressed. */
    #kc .btn:active:not(:disabled),#kc .kc-choice:active,#kc .kc-gp-cell:not(.is-skel):active,
    #kc .cpick:active,#kc .kc-asp:active,#kc .sw:active,#kc .chip:active,
    #kc .kc-engine-opt:active,#kc .kc-surprise:active,#kc .kc-galchip:active,#kc .kc-hbtn:active{
      transform:scale(.965);
    }
    #kc .btn:focus-visible,#kc .cpick:focus-visible,#kc .sw:focus-visible,#kc .chip:focus-visible,
    #kc .kc-engine-opt:focus-visible,#kc .kc-galchip:focus-visible,#kc .kc-gp-cell:focus-visible{
      outline:2px solid var(--holo-2);outline-offset:2px;
    }

    /* ══ Launch-polish layer: idea chips · tile cascade · busy sheen · credit tick ══ */

    /* From-scratch card ambient video — sits at z:-1 inside the card's own
       stacking context (isolation), heavily blurred under the content, clearing
       toward the right edge where it's meant to peek through. Hover: the blur
       relaxes, it brightens and drifts — the card feels alive without ever
       fighting the text. */
    #kc .kc-choice.has-media{overflow:hidden;isolation:isolate}
    #kc .kc-choice-media{position:absolute;inset:0;z-index:-1;pointer-events:none}
    #kc .kc-choice-media video,
    #kc .kc-choice-media img{
      position:absolute;top:-4%;right:-12%;width:80%;height:112%;
      transform:scale(1.06);
      -o-object-fit:cover;
         object-fit:cover;
      transition:filter .7s var(--ease-io),opacity .7s var(--ease-io),transform .9s var(--ease-io);
    }
    /* Video — framed down so her head sits inside the card, moderate blur. */
    #kc .kc-choice-media video{
      -o-object-position:center 18%;
         object-position:center 18%;
      filter:blur(16px) saturate(118%) brightness(.68);
      opacity:.55;
    }
    /* Stills — soft silhouette, readable enough to feel her presence. */
    #kc .kc-choice-media img{
      -o-object-position:center 24%;
         object-position:center 24%;
      filter:blur(18px) saturate(115%) brightness(.6);
      opacity:.5;
    }
    #kc .kc-choice-media::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(90deg,var(--suite-surface-2) 0%,rgba(10,10,14,.88) 36%,rgba(10,10,14,.46) 66%,rgba(10,10,14,.10) 100%);
    }
    #kc .kc-choice.has-media:hover .kc-choice-media video{
      filter:blur(5px) saturate(132%) brightness(.85);
      opacity:.82;
      transform:scale(1.14) translateX(-10px);
    }
    /* Stills sharpen a touch more on hover — still soft, never fully read. */
    #kc .kc-choice.has-media:hover .kc-choice-media img{
      filter:blur(10px) saturate(124%) brightness(.75);
      opacity:.68;
      transform:scale(1.12) translateX(-8px);
    }
    @media(prefers-reduced-motion:reduce){
      #kc .kc-choice-media video{display:none}
      #kc .kc-choice-media img{transition:none}
      #kc .kc-choice.has-media:hover .kc-choice-media img{transform:scale(1.06)}
    }

    /* Shot-idea chips — quiet glass pills under the prompt. */
    #kc .kc-ideas{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    #kc .kc-idea{
      -webkit-appearance:none;
         -moz-appearance:none;
              appearance:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
      border-radius:9999px;color:var(--text-dim,rgba(255,255,255,.66));font:12px/1 var(--font-ui,inherit);
      padding:7px 13px;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease;
    }
    #kc .kc-idea:hover{color:#fff;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.07)}
    #kc .kc-idea:active{transform:scale(.965)}
    #kc .kc-idea:focus-visible{outline:2px solid var(--holo-2);outline-offset:2px}

    /* Gallery tiles cascade in — each tile carries --kci (0..11) from paintGallery. */
    @keyframes kc-tile-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
    #kc .kc-gallery .tile{animation:kc-tile-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--kci,0)*30ms)}

    /* Generate button while a render is in flight — sweeping sheen so the
       button itself reads "working", not just the status text below it. */
    @keyframes kc-gen-sheen{from{transform:translateX(-110%) skewX(-18deg)}to{transform:translateX(240%) skewX(-18deg)}}
    #kc #kc-gen{position:relative;overflow:hidden}
    #kc #kc-gen.is-busy{pointer-events:none}
    #kc #kc-gen.is-busy::after{
      content:"";position:absolute;inset:0 auto 0 0;width:45%;
      background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
      animation:kc-gen-sheen 1.15s ease-in-out infinite;
    }
    #kc .kc-gen-cost{opacity:.62;font-weight:400;margin-left:2px}

    /* Credits pill tick — one soft flash while the number counts to its new value. */
    @keyframes kc-credit-tick{0%{border-color:rgba(255,255,255,.55);color:#fff}100%{border-color:inherit;color:inherit}}
    #kc .kc-creditspill.kc-tick{animation:kc-credit-tick .65s ease-out 1}

    /* Pick-from-3: the header copy crossfades between its sketching/ready
       states, and the "Sketching…" labels breathe while the faces paint. */
    #kc #kc-prev-copy{transition:opacity .18s ease}
    #kc #kc-prev-copy.is-swapping{opacity:0}
    @keyframes kc-sketch-pulse{0%,100%{opacity:.45}50%{opacity:1}}
    #kc #kc-prev-grid.loading .kc-prevpick{animation:kc-sketch-pulse 1.6s ease-in-out infinite}

    @media(prefers-reduced-motion:reduce){
      #kc .kc-orb,#kc .kc-bdot,#kc .kc-resume-dot,#kc .cs-cell img,#kc .cs-beat-step.is-active .dot,#kc .cs-orb-ring{animation:none!important}
      #kc .cs-cell img{filter:none;transform:none;opacity:1}
      #kc .km-photo{transition:none;transform:none!important}
      #kc .km-layer{transition:opacity .12s linear;transform:none}
      #kc .kc-gallery .tile{animation:none!important}
      #kc #kc-gen.is-busy::after{animation:none!important;content:none}
      #kc .kc-creditspill.kc-tick{animation:none!important}
      #kc #kc-prev-grid.loading .kc-prevpick{animation:none!important}
      #kc #kc-prev-copy{transition:none}
      #kc .btn:active,#kc .kc-choice:active,#kc .kc-gp-cell:active,#kc .cpick:active,#kc .kc-asp:active,
      #kc .sw:active,#kc .chip:active,#kc .kc-engine-opt:active,#kc .kc-surprise:active,
      #kc .kc-galchip:active,#kc .kc-hbtn:active,#kc .kc-idea:active{transform:none!important}
    }