/* Susu Island — canonical source of ROOT/sakura-deco.css, published by
   task_artifacts/susu_island_release.py. Loaded LAST by the existing proxy.
   Replaces the old decoration layer; do not import a second copy in index.css.
   React owns clicks, Base UI owns placement/focus, the circuit owns only SVG. */
html[data-susu-design='studio'] {
  --susu-island-blue: #609bd6;
  --susu-island-pink: #d884ac;
  --susu-island-ease: cubic-bezier(.2, .8, .2, 1);
  --susu-liquid-spring: cubic-bezier(.2, 1.06, .3, 1);
  --susu-island-glass: #fffffff0;
  --susu-island-edge: #cedeed;
  --susu-island-shadow: inset 0 1px #ffffffed, inset 0 -1px #bed5ed38,
    0 6px 16px -12px #3a638e38, 0 30px 64px -32px #45689552;
}
html[data-susu-design='studio'].dark {
  --susu-island-glass: #202d40f5;
  --susu-island-edge: #455c78;
  --susu-island-shadow: inset 0 1px #c9e1ff22, 0 24px 52px -22px #0009;
}

/* No fixed seven-layer page grid, no animated background-position on body.
   The pale sky is quiet; moving technology accents live in the illustration. */
html[data-susu-design='studio'] .susu-public-layout {
  background: #f7faff;
}
html[data-susu-design='studio'] .susu-cinematic {
  background:
    radial-gradient(ellipse 640px 400px at 12% 8%, #eaf5ffb0, transparent),
    radial-gradient(ellipse 580px 430px at 94% 12%, #fff0f6a8, transparent),
    linear-gradient(180deg, #fbfdff, #fff 60%, #f5faff);
}
html[data-susu-design='studio'] .susu-cinematic .susu-hero-grid {
  max-width: 1200px;
  gap: clamp(24px, 4vw, 64px);
}
html[data-susu-design='studio'] .susu-cinematic .susu-hero-description {
  color: #536a84;
  text-wrap: pretty;
}
html[data-susu-design='studio'] .susu-cinematic .susu-eyebrow {
  display: inline-flex;
  padding: 8px 13px;
  border: 1px solid #dbe8f4;
  border-radius: 999px;
  background: #ffffffc9;
  letter-spacing: .06em;
  color: #466987;
}
html[data-susu-design='studio'] .susu-cinematic .susu-hero h1 {
  letter-spacing: -.055em;
  text-wrap: balance;
}
html[data-susu-design='studio'] .susu-cinematic .susu-button-primary {
  background: linear-gradient(165deg, #639cde, #497ac8);
  box-shadow: inset 0 1px #ffffff70, 0 9px 22px -12px #4277bf80;
}
html[data-susu-design='studio'] .susu-cinematic .susu-button-secondary {
  background: #ffffffdb;
  box-shadow: inset 0 1px #fff, 0 6px 20px -16px #4d709f70;
}

/* One glass frame around the existing original artwork, not another scene.
   A 3:2 frame preserves the SVG composition instead of cropping it to a strip. */
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-wrap {
  max-width: 760px;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine {
  padding: 15px;
  border-radius: 32px;
  border: 1px solid #fffffff0;
  background: linear-gradient(145deg, #ffffffec, #edf6ffc9 52%, #fff1f7d9);
  box-shadow: inset 0 0 0 1px #d4e3f461, 0 12px 24px -20px #42648655,
    0 32px 70px -42px #708ab975;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-top {
  padding: 2px 6px 13px;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-stage {
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 23px;
  border-color: #d9e4f2;
  background: #ecf4fc;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-layer {
  inset: -8px;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip {
  background: #fffffff2;
  border-color: #d6e3f3;
  color: #526983;
  box-shadow: inset 0 1px #fff, 0 7px 16px -12px #4c779275;
  animation: none;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip-tag {
  background: #fff4f9f2;
  color: #9b4b76;
  border-color: #f2d7e6;
}
html[data-susu-design='studio'] .susu-island-circuit__route {
  stroke-width: 1.15px;
  opacity: .78;
}
html[data-susu-design='studio'] .susu-island-circuit__endpoint {
  opacity: .8;
}
html[data-susu-design='studio'] .susu-island-circuit__halo {
  opacity: .22;
}
/* Keep the existing decorative flow strokes as a static quiet baseline.
   The circuit above now provides the visible, visibility-managed moving nodes. */
html[data-susu-design='studio'] .susu-cinematic .susu-flow-lines path {
  animation: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: .14;
}
html[data-susu-design='studio'].susu-jp-locked .susu-shrine-petals,
html[data-susu-design='studio'] #root[data-base-ui-inert] .susu-shrine-petals,
html[data-susu-design='studio'] [inert] .susu-shrine-petals {
  display: none;
}
html[data-susu-design='studio'] .susu-shrine[data-motion-paused='true'] .susu-shrine-layer {
  transform: none !important;
}

/* Floating header is real, small-area frosted glass. Unsupported blur stays
   opaque enough to read. No animated filters or permanent will-change hints. */
html[data-susu-design='studio'] .susu-header-nav {
  border-radius: 24px;
  border-color: #ffffffed;
  background: #fffffff2;
  box-shadow: inset 0 1px #fff, inset 0 -1px #dae8f57a,
    0 14px 36px -25px #496d9a66;
}
html[data-susu-design='studio'] .susu-nav-link[aria-current='page'] {
  background: linear-gradient(150deg, #e9f4ff, #f0f6ff);
  color: #36669a;
  box-shadow: inset 0 1px #fff;
}
html[data-susu-design='studio'] .susu-community-link {
  background: #fff2f8;
  color: #994e76;
}
html[data-susu-design='studio'] :is(.studio-feature, .susu-model-card) {
  border-radius: 24px;
  border-color: #dce7f2;
  box-shadow: inset 0 1px #fff, 0 10px 26px -23px #4c759e65;
}
html[data-susu-design='studio']:not(.dark) :is(.studio-feature, .susu-model-card) {
  background: linear-gradient(155deg, #fff, #f7fbff);
}
html[data-susu-design='studio']:not(.dark) .studio-feature-community {
  background: linear-gradient(150deg, #fff, #fff6fa);
}
html[data-susu-design='studio'].dark :is(.studio-feature, .susu-model-card) {
  border-color: var(--border);
  box-shadow: inset 0 1px #c7d9f016, 0 12px 28px -23px #000a;
}
html[data-susu-design='studio'] [data-susu-feedback='control'] {
  transition-timing-function: var(--susu-island-ease);
}
html[data-susu-design='studio'] [data-susu-feedback='control'][data-susu-pressed='true'] {
  scale: .975;
}

/* Surface ownership: never move a whole form on hover, never move Positioner.
   Keep tooltip dark; large sheets use optical glass, not an expensive blur. */
html[data-susu-design='studio'] body [data-susu-surface]:not([data-susu-surface='tooltip']) {
  background: linear-gradient(145deg, var(--susu-island-glass),
    color-mix(in srgb, var(--susu-island-glass) 96%, var(--primary)));
  border-color: var(--susu-island-edge);
  box-shadow: var(--susu-island-shadow);
}
html[data-susu-design='studio'] body [data-susu-surface]:is(
  [data-susu-surface='menu'], [data-susu-surface='popover'],
  [data-susu-surface='hover-card'], [data-susu-surface='combobox'],
  [data-susu-surface='select'][data-align-trigger='false']
) {
  border-radius: 20px;
  max-width: min(var(--available-width, 100vw), calc(100vw - 24px));
  transition-property: opacity, scale, translate;
  transition-duration: 160ms, 280ms, 280ms;
  transition-timing-function: var(--susu-island-ease);
}
html[data-susu-design='studio'] body [data-susu-surface]:is(
  [data-susu-surface='menu'], [data-susu-surface='popover'],
  [data-susu-surface='hover-card'], [data-susu-surface='combobox'],
  [data-susu-surface='select'][data-align-trigger='false']
)[data-ending-style] {
  transition-duration: 130ms;
}
/* An item-aligned Select must NOT scale/translate its selected row away from
   the trigger. These narrow guards intentionally beat all prior start states. */
html[data-susu-design='studio'] body [data-susu-surface='select'][data-align-trigger='true'] {
  scale: none !important;
  translate: none !important;
  transition-property: opacity;
}
html[data-susu-design='studio'] body [data-susu-surface='tooltip'] {
  border-radius: 11px;
  background: var(--susu-tooltip-fill);
  color: var(--background);
  backdrop-filter: none;
  max-width: min(320px, calc(100vw - 24px));
  overflow-wrap: anywhere;
}
html[data-susu-design='studio'] body [data-susu-surface='dialog'] {
  scale: none;
  transform: none;
  transition-duration: 180ms, 360ms, 360ms;
}
html[data-susu-design='studio'] body [data-susu-surface='dialog'][data-nested-dialog-open] {
  scale: .985;
}
html[data-susu-design='studio'] body [data-susu-surface='dialog'][data-ending-style] {
  transition-duration: 150ms;
}
html[data-susu-design='studio'] body [data-susu-surface='dialog'][data-starting-style] {
  scale: .965;
  transform: translateY(12px);
}
html[data-susu-design='studio'] body [data-susu-surface='sheet'] {
  transition-duration: 180ms, 360ms, 360ms, 360ms;
}
html[data-susu-design='studio'] body [data-susu-surface='sheet'][data-ending-style] {
  transition-duration: 160ms;
}
html[data-susu-design='studio'] body [data-susu-surface='menu'] :is(
  [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox']
) {
  min-height: 38px;
  border-radius: 12px;
}
html[data-susu-design='studio'] body [data-susu-surface='menu']
  :is([data-highlighted], [data-popup-open]):not([data-disabled]):not([data-variant='destructive']) {
  background-color: color-mix(in srgb, var(--primary) 10%, var(--popover));
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-susu-design='studio'] .susu-header-nav {
    background: #ffffffc9;
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
  }
  html[data-susu-design='studio'] body [data-susu-surface]:is(
    [data-susu-surface='menu'], [data-susu-surface='popover'],
    [data-susu-surface='hover-card']
  ) {
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
  }
}

/* Existing 1100px header breakpoint is retained. At narrower widths return
   to the stacked illustration; avoid tiny desktop controls on a tablet. */
/* The separately injected VIP announcement is a visual surface too. Its
   eligibility, wording, close behavior, links and stacking order are untouched. */
html[data-susu-design='studio'] #vip-group-modal {
  background: #26395461;
}
html[data-susu-design='studio'] #vip-group-modal .vg-card {
  background: linear-gradient(145deg, #fff, #f6faff 62%, #fff4f9);
  color: #29405e;
  border: 1px solid #d4e3f2;
  border-radius: 28px;
  box-shadow: inset 0 1px #fff, 0 30px 80px -30px #243b6699;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Must finish inside the external script's 250ms removal deadline. */
  transition: transform 240ms var(--susu-island-ease);
}
html[data-susu-design='studio'] #vip-group-modal .vg-title {
  color: #29405e;
  letter-spacing: -.025em;
}
html[data-susu-design='studio'] #vip-group-modal :is(.vg-subtitle, .vg-info-label, .vg-later-btn) {
  color: #546b83;
}
html[data-susu-design='studio'] #vip-group-modal :is(.vg-badge, .vg-badge-blue) {
  color: #3c638e;
  background: #eaf3ff;
  box-shadow: inset 0 1px #fff;
  max-width: calc(100% - 32px);
}
html[data-susu-design='studio'] #vip-group-modal .vg-highlight-box {
  background: #fff1f7;
  border: 1px solid #ecd4e2;
  color: #8a466d;
  border-radius: 17px;
}
html[data-susu-design='studio'] #vip-group-modal :is(.vg-perks-box, .vg-info-row) {
  background: #edf5ff;
  border: 1px solid #d7e6f7;
  color: #465f7a;
  border-radius: 17px;
}
html[data-susu-design='studio'] #vip-group-modal :is(.vg-perks-box b, .vg-info-val) {
  color: #376791;
}
html[data-susu-design='studio'] #vip-group-modal :is(.vg-join-btn, .vg-wallet-btn) {
  color: #fff;
  background: linear-gradient(160deg, #659ada, #4776bf);
  box-shadow: inset 0 1px #ffffff59, 0 8px 18px -12px #4c7dc8a3;
  border-radius: 15px;
}
html[data-susu-design='studio'] #vip-group-modal :is(.vg-copy-btn, .vg-close) {
  color: #426a95;
  background: #f0f6ff;
  border-color: #d6e4f5;
}
html[data-susu-design='studio'] #vip-group-modal .vg-close {
  width: 36px;
  height: 36px;
  transition: background-color 160ms ease, color 160ms ease;
}
html[data-susu-design='studio'] #vip-group-modal .vg-close:hover {
  transform: none;
  background: #e4efff;
  color: #315b89;
}
@media (min-width: 1100px) {
  html[data-susu-design='studio'] .susu-cinematic .susu-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-hero-copy {
    text-align: start;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-hero h1 {
    font-size: clamp(42px, 4.5vw, 65px);
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-hero-description {
    margin-inline: 0;
    max-width: 440px;
  }
  html[data-susu-design='studio'] .susu-cinematic :is(
    .susu-hero-actions, .susu-hero-note, .susu-compatible > div
  ) {
    justify-content: flex-start;
  }
}
@media (max-width: 767px) {
  html[data-susu-design='studio'] .susu-cinematic .susu-hero {
    padding-inline: 16px;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-shrine {
    border-radius: 25px;
    padding: 10px;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-shrine-stage {
    border-radius: 18px;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip {
    font-size: 9px;
    padding: 5px 8px;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip-one {
    left: 4%;
    top: 15%;
  }
  html[data-susu-design='studio'] .susu-header-nav {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
@media (max-width: 380px) {
  html[data-susu-design='studio'] .susu-cinematic .susu-hero h1 {
    font-size: 32px;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-hero-actions {
    gap: 10px;
    flex-wrap: wrap;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-button {
    padding-inline: 18px;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-shrine-top {
    font-size: 8px;
  }
}
@media (pointer: coarse) {
  html[data-susu-design='studio'] :is(
    .susu-menu-trigger, .susu-model-copy, .susu-model-details,
    [data-slot='sheet-close'], [data-slot='dialog-close']
  ) {
    min-height: 44px;
    min-width: 44px;
  }
  html[data-susu-design='studio'] body [data-susu-surface='menu'] :is(
    [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox']
  ) {
    min-height: 44px;
  }
  html[data-susu-design='studio'] #vip-group-modal .vg-close {
    width: 44px;
    height: 44px;
    top: 10px;
    right: 10px;
  }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  html[data-susu-design='studio'] body [data-susu-surface] {
    transition: none !important;
    scale: none !important;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-shrine-layer {
    transform: none !important;
  }
  html[data-susu-design='studio'] #vip-group-modal,
  html[data-susu-design='studio'] #vip-group-modal .vg-card {
    transition: none;
  }
}
@media (prefers-contrast: more) {
  html[data-susu-design='studio'] {
    --susu-island-glass: var(--popover);
    --susu-island-edge: var(--foreground);
  }
  html[data-susu-design='studio'] .susu-header-nav {
    background: #fff;
    backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  html[data-susu-design='studio'] body [data-susu-surface],
  html[data-susu-design='studio'] .susu-header-nav {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
    backdrop-filter: none;
  }
  html[data-susu-design='studio'] .susu-island-circuit {
    display: none !important;
  }
  html[data-susu-design='studio'] #vip-group-modal :is(
    .vg-card, .vg-title, .vg-subtitle, .vg-highlight-box, .vg-perks-box,
    .vg-info-row, .vg-badge, .vg-close, .vg-later-btn
  ) {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
}

/* Susu Float — particle rails live with the REAL three-card layout, not inside
   the old unused showcase. Routes are an independently visibility-managed SVG;
   the three links and all their hit targets remain above the decoration. */
html[data-susu-design='studio'] .susu-cinematic .studio-discover {
  position: relative;
  isolation: isolate;
}
html[data-susu-design='studio'] .susu-cinematic .studio-bento {
  position: relative;
  isolation: isolate;
  gap: clamp(20px, 2vw, 28px);
  padding: 26px 13px 36px;
  margin-inline: -13px;
  overflow: visible;
}
html[data-susu-design='studio'] .susu-cinematic .studio-bento > .susu-reveal {
  position: relative;
  z-index: 1;
  min-width: 0;
}
html[data-susu-design='studio'] .susu-cinematic .susu-bento-circuit {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: #588ec6;
  filter: none;
}
html[data-susu-design='studio'] .susu-bento-circuit__path {
  opacity: .9;
}
html[data-susu-design='studio'] .susu-bento-circuit__dot {
  filter: drop-shadow(0 0 4px #76b2ff94);
}
html[data-susu-design='studio'] .susu-bento-circuit__tracer {
  filter: drop-shadow(0 0 7px #73adf9a8);
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature {
  min-height: 360px;
  border-radius: 27px;
  border: 1px solid #cbdff3;
  background-image:
    radial-gradient(circle at 85% 12%, #9cccf680 0 3px, transparent 4px),
    radial-gradient(circle at 89% 12%, #f2a4ceae 0 2px, transparent 3px),
    radial-gradient(circle at 93% 12%, #a5d0f285 0 2px, transparent 3px),
    linear-gradient(151deg, #ffffffed 3%, #f3f9ffe9 65%, #fff4f9eb);
  box-shadow: inset 0 1px #fff, inset 0 -1px #c5dcf54a,
    0 11px 22px -18px #558ac36e, 0 34px 60px -42px #5488ae98;
  transition: border-color 270ms ease, box-shadow 320ms var(--susu-island-ease),
    transform 340ms var(--susu-island-ease), scale 340ms var(--susu-island-ease),
    translate 340ms var(--susu-island-ease);
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-models {
  border-color: #b9d9f3;
  background-image:
    radial-gradient(circle at 85% 12%, #9cccf680 0 3px, transparent 4px),
    radial-gradient(circle at 89% 12%, #f2a4ceae 0 2px, transparent 3px),
    radial-gradient(circle at 93% 12%, #a5d0f285 0 2px, transparent 3px),
    linear-gradient(155deg, #f1f8ff, #ffffffeb 63%, #edf5ffe8);
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-community {
  border-color: #efd1e4;
  background-image:
    radial-gradient(circle at 85% 12%, #eeb4d780 0 3px, transparent 4px),
    radial-gradient(circle at 89% 12%, #b6d5f0ae 0 2px, transparent 3px),
    radial-gradient(circle at 93% 12%, #eaa9cb85 0 2px, transparent 3px),
    linear-gradient(155deg, #fff6fa, #fffdfef3 65%, #fff1f8);
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-icon {
  border-radius: 17px;
  border-color: #ffffffeb;
  background: #ffffffdc;
  box-shadow: inset 0 1px #fff, 0 8px 18px -12px #4e86b684;
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-link {
  font-weight: 680;
}
@media (hover: hover) and (pointer: fine) {
  /* Never run an endless animation on an actual link hit target: motion makes
     click stability unbounded. The small icon floats; the card itself rises
     once on hover/focus and still composes with pointer-owned transform tilt. */
  html[data-susu-design='studio'] .susu-cinematic .studio-bento[data-susu-bento-motion='running']
    > .susu-reveal:not([data-susu-reveal='waiting']) .studio-feature-icon {
    animation: susu-card-levitate 6.4s ease-in-out infinite alternate;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-bento[data-susu-bento-motion='running']
    > .susu-reveal:nth-child(2) .studio-feature-icon {
    animation-delay: -2.8s;
    animation-duration: 7.2s;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-bento[data-susu-bento-motion='running']
    > .susu-reveal:nth-child(3) .studio-feature-icon {
    animation-delay: -4.6s;
    animation-duration: 7.7s;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-bento > .susu-reveal
    > .studio-feature:is(:hover, :focus-visible) {
    translate: 0 -7px;
    border-color: #93bee9;
    box-shadow: inset 0 1px #fff, 0 22px 38px -26px #507bae96,
      0 48px 77px -42px #5181aeae;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-bento > .susu-reveal
    > .studio-feature:is(:hover, :focus-visible) .studio-feature-icon {
    animation-play-state: paused;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-bento > .susu-reveal:nth-child(3)
    > .studio-feature:is(:hover, :focus-visible) {
    border-color: #dc9ec2;
  }
  html[data-susu-design='studio'] .susu-pricing .susu-model-card[data-susu-hover='true'] {
    border-color: #a0c4e9;
    box-shadow: inset 0 1px #fff, 0 16px 32px -22px #608ac8a3,
      0 32px 54px -35px #5885bba8;
  }
}
@keyframes susu-card-levitate {
  from { translate: 0 2px; }
  to { translate: 0 -6px; }
}
@media (min-width: 1100px) {
  /* Intentional stagger instead of the previous three perfectly aligned tiles.
     Margin stays on the entry wrapper; the card's tilt transform remains free. */
  html[data-susu-design='studio'] .susu-cinematic .studio-bento > .susu-reveal:first-of-type {
    margin-top: 17px;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-bento > .susu-reveal:nth-of-type(2) {
    margin-top: 0;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-bento > .susu-reveal:nth-of-type(3) {
    margin-top: 31px;
  }
}
/* The pricing catalog is a separate real card grid. Give it quiet satellite
   dots and an offset rhythm, without a perpetual animation on 20 clickable
   cards or changes to pricing/selection. Preserve the promoted card skin. */
html[data-susu-design='studio']:not(.dark) .susu-pricing
  .susu-model-card:not(.opus48-stolen) {
  background-image:
    radial-gradient(circle at 88% 15%, #aad1f4 0 3px, transparent 4px),
    radial-gradient(circle at 92% 15%, #f1b9d7 0 2px, transparent 3px),
    radial-gradient(circle at 96% 15%, #beddf3 0 2px, transparent 3px),
    linear-gradient(150deg, #fff, #f7fbff 76%, #fff7fb);
}
html[data-susu-design='studio'] .susu-pricing .susu-model-grid {
  gap: clamp(16px, 2vw, 24px);
}
html[data-susu-design='studio'] .susu-pricing .susu-model-grid-item {
  min-width: 0;
}
@media (min-width: 768px) and (max-width: 1439px) {
  html[data-susu-design='studio'] .susu-pricing .susu-model-grid-item:nth-child(2n) {
    margin-top: 10px;
  }
}
@media (min-width: 1440px) {
  html[data-susu-design='studio'] .susu-pricing .susu-model-grid-item:nth-child(3n + 2) {
    margin-top: 9px;
  }
  html[data-susu-design='studio'] .susu-pricing .susu-model-grid-item:nth-child(3n) {
    margin-top: 17px;
  }
}
@media (min-width: 768px) and (max-width: 1099px) {
  html[data-susu-design='studio'] .susu-cinematic .studio-bento > .susu-reveal:nth-of-type(2) {
    margin-top: 14px;
  }
}
@media (max-width: 767px) {
  html[data-susu-design='studio'] .susu-cinematic .studio-bento {
    gap: 22px;
    padding: 18px 4px 22px;
    margin-inline: -4px;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-feature {
    min-height: 0;
    border-radius: 23px;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-bento-circuit__path {
    opacity: .66;
  }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  html[data-susu-design='studio'] .susu-cinematic .studio-feature {
    translate: none !important;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-feature-icon {
    animation: none !important;
    translate: none !important;
  }
}
@media (forced-colors: active) {
  html[data-susu-design='studio'] .susu-bento-circuit { display: none !important; }
  html[data-susu-design='studio'] .susu-cinematic .studio-feature {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }
}

/* Evening tea in Susu's garden. Appended ONCE after susu-island.css by
   susu_garden_release.py; all pricing, routing, focus and motion owners stay.
   Scene activation belongs to the artwork loader: a failed SVG keeps the
   original scene visible rather than leaving an empty hero. */
html[data-susu-design='studio'] {
  --susu-garden-version: tea-garden-1;
  --susu-island-blue: #729fc7;
  --susu-island-pink: #d28fa9;
  --susu-island-glass: #fffcf8f2;
  --susu-island-edge: #e3dbe5;
  --susu-tea-ink: #41455c;
  --susu-tea-muted: #69697e;
  --susu-tea-rose: #a9557b;
  --susu-tea-sage: #658679;
  --susu-island-shadow: inset 0 1px #fff, inset 0 -1px #ddd9e54d,
    0 8px 18px -13px #80687530, 0 30px 65px -36px #967b9b6b;
}
html[data-susu-design='studio'] .susu-public-layout {
  background: #fdfaf7;
}
html[data-susu-design='studio'] .susu-cinematic {
  background:
    radial-gradient(ellipse 620px 600px at 0% 6%, #ebf3fc9c, transparent 80%),
    radial-gradient(ellipse 660px 520px at 96% 18%, #fbe1e973, transparent 76%),
    radial-gradient(ellipse 730px 430px at 17% 56%, #eef3e76e, transparent 78%),
    linear-gradient(180deg, #fffdfa, #fffaf8 43%, #fafbff 74%, #fffaf5);
}
html[data-susu-design='studio'] .susu-cinematic .susu-hero h1 {
  color: var(--susu-tea-ink);
  font-weight: 630;
}
html[data-susu-design='studio'] .susu-cinematic .susu-title-line-first {
  color: var(--susu-tea-ink);
}
html[data-susu-design='studio'] .susu-cinematic .susu-title-line-accent {
  background-image: linear-gradient(110deg, #668bc5 5%, #a389bc 58%, #c57f9a 95%);
}
html[data-susu-design='studio'] .susu-cinematic .susu-hero-description {
  color: #65677d;
}
html[data-susu-design='studio'] .susu-cinematic .susu-eyebrow {
  color: #83566b;
  border-color: #ecd7e1;
  background: linear-gradient(120deg, #fff9fc, #fffbf2);
  box-shadow: inset 0 1px #fff, 0 5px 16px -13px #b984a466;
  letter-spacing: .035em;
}
html[data-susu-design='studio'] .susu-cinematic .susu-button-primary {
  background: linear-gradient(155deg, #5776a6, #4a638c);
  border-color: #8fa9cd;
  box-shadow: inset 0 1px #ffffff8c, 0 10px 24px -14px #6b78a973;
}
html[data-susu-design='studio'] .susu-cinematic .susu-button-secondary {
  color: #935778;
  background: linear-gradient(145deg, #fffdfd, #fff1f7);
  border-color: #edd8e4;
}
html[data-susu-design='studio'] .susu-cinematic .susu-hero-note {
  color: #767288;
}
html[data-susu-design='studio'] .susu-cinematic .susu-compatible {
  color: #65717e;
}

/* A porcelain picture frame; original window dots and native pause remain. */
html[data-susu-design='studio'] .susu-cinematic .susu-shrine {
  padding: 15px;
  border-color: #e4d8e2;
  border-radius: 34px;
  background:
    linear-gradient(125deg, #ffffffed, #fffaf3ed 45%, #fff1f8df);
  box-shadow: inset 0 1px #fff, inset 0 0 0 5px #ffffffab,
    0 10px 22px -18px #9675826b, 0 36px 66px -43px #91789f8c;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-top {
  color: #866276;
  letter-spacing: .12em;
  font-size: 9px;
}
html[data-susu-design='studio'] .susu-cinematic .susu-stage-pause {
  color: #826682;
  border-color: #e8dce7;
  background: #fffdfbef;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-stage {
  border-color: #e7d9e1;
  background: #ecedfb;
  box-shadow: inset 0 1px #fff, 0 1px 0 #fff;
}
html[data-susu-design='studio'] .susu-cinematic [data-susu-garden='tea'] .susu-shrine-layer {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
html[data-susu-design='studio'] .susu-cinematic [data-susu-garden='tea'] .susu-shrine-layer > svg {
  visibility: hidden;
}
html[data-susu-design='studio'] .susu-cinematic [data-susu-garden='tea'] .susu-shrine-sky {
  background-image: url('/brand/susu-tea-sky-20260923.svg');
}
html[data-susu-design='studio'] .susu-cinematic [data-susu-garden='tea'] .susu-shrine-mid {
  background-image: url('/brand/susu-tea-manor-20260923.svg');
}
html[data-susu-design='studio'] .susu-cinematic [data-susu-garden='tea'] .susu-shrine-front {
  background-image: url('/brand/susu-tea-table-20260923.svg');
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip {
  background: #fffdf7f0;
  border-color: #e5d7e2;
  color: #826779;
  box-shadow: inset 0 1px #fff, 0 6px 16px -11px #7d5c9863;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip-one {
  top: 9%;
  left: 5%;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip-two {
  bottom: 6%;
  right: 4%;
  font-size: 9px;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip-tag {
  color: #a15f7f;
  border-radius: 9px 16px 16px 9px;
  background: #fff0f7f0;
  border-color: #efcbdc;
}
html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip i {
  background: #91bca6;
  box-shadow: 0 0 6px #91bca633;
}

/* Stationery-like invitations, not another set of card pseudo-elements:
   ::before / ::after are reserved by the existing pointer glow and ripple. */
html[data-susu-design='studio'] .susu-cinematic .studio-section-top h2 {
  color: var(--susu-tea-ink);
  letter-spacing: -.035em;
  font-weight: 620;
}
html[data-susu-design='studio'] .susu-cinematic .susu-overline {
  color: #8d667e;
  letter-spacing: .14em;
}
html[data-susu-design='studio'] .susu-cinematic .studio-section-top > p {
  color: var(--susu-tea-muted);
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature {
  color: var(--susu-tea-ink);
  border-color: #e2dce8;
  border-radius: 26px 36px 26px 26px;
  background-image:
    radial-gradient(ellipse 23px 8px at 87% 10%, #e9bfd262 96%, transparent),
    radial-gradient(ellipse 8px 23px at 87% 10%, #ebccdd62 96%, transparent),
    radial-gradient(circle at 87% 10%, #ffeed0 0 5px, transparent 6px),
    linear-gradient(150deg, #fffefbf5, #f4f7fff0 70%, #fdf0f8ec);
  box-shadow: inset 0 1px #fff, inset 0 -1px #ead7e647,
    0 13px 23px -20px #91778c66, 0 34px 60px -42px #797da880;
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-models {
  background-image:
    radial-gradient(ellipse 24px 8px at 87% 10%, #bacee565 96%, transparent),
    radial-gradient(ellipse 8px 24px at 87% 10%, #c6dbf365 96%, transparent),
    linear-gradient(150deg, #fffef9, #f0f6fbed 70%, #f6f1faed);
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-build {
  border-color: #dce5dc;
  background-image:
    radial-gradient(ellipse 24px 8px at 87% 10%, #bfdbc965 96%, transparent),
    radial-gradient(ellipse 8px 24px at 87% 10%, #c9dfc865 96%, transparent),
    linear-gradient(150deg, #fffef9, #f1f6edef 75%, #f5f6ffed);
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-community {
  border-color: #ecd5df;
  background-image:
    radial-gradient(ellipse 24px 8px at 87% 10%, #ecbbd266 96%, transparent),
    radial-gradient(ellipse 8px 24px at 87% 10%, #f2d1dc66 96%, transparent),
    linear-gradient(145deg, #fffaf6, #fff3f7 74%, #fff6ed);
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-icon {
  color: #7997c2;
  border: 1px solid #e1deeb;
  border-radius: 18px 18px 22px 22px;
  background: #fffef9;
  box-shadow: inset 0 1px #fff, 0 9px 18px -13px #a291a478;
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-build .studio-feature-icon {
  color: #6e9781;
  border-color: #dae7dc;
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-community .studio-feature-icon {
  color: #bb799c;
  border-color: #efd8e1;
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-label {
  color: #76677f;
  font-size: 10px;
  letter-spacing: .1em;
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature > p {
  color: #696b7e;
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-link {
  color: #526f9c;
}
html[data-susu-design='studio'] .susu-cinematic .studio-feature-community .studio-feature-link {
  color: #a45c80;
}
html[data-susu-design='studio'] .susu-cinematic .studio-code-line {
  background: #ffffffc4;
  border-color: #dde8de;
  color: #5b796a;
}
html[data-susu-design='studio'] .susu-cinematic .studio-model-cloud span {
  border-radius: 9px 14px 14px 9px;
  background: #ffffffb8;
  border-color: #dce7f0;
}
html[data-susu-design='studio'] .susu-cinematic :is(.susu-connect-inner,.susu-status-panel,.studio-notices) {
  border-color: #e5dfe7;
  background-color: #fffdf9;
}

/* Palette only on shared chrome: do not change anchoring, timing, hit targets,
   selected-item alignment, scrolling, or popup lifecycle attributes. */
html[data-susu-design='studio'] .susu-header-nav {
  background: #fffcf6d9;
  border-color: #eee4e8;
  box-shadow: inset 0 1px #fff, 0 13px 32px -23px #9c809c66;
}
html[data-susu-design='studio'] .susu-nav-link[aria-current='page'] {
  background: #f4eaf5;
  color: #805b91;
}
html[data-susu-design='studio'] .susu-community-link {
  background: #fff0f6;
  border-color: #eed0df;
  color: #9b5577;
}
html[data-susu-design='studio'] body [data-susu-surface]:is(
  [data-susu-surface='menu'],[data-susu-surface='popover'],
  [data-susu-surface='hover-card'],[data-susu-surface='combobox']
) {
  border-color: #e2d9e6;
  background: linear-gradient(145deg, #fffdf9f7, #f9f5fff5);
}
html[data-susu-design='studio'] body [data-susu-surface='menu']
  :is([data-highlighted],[data-popup-open]):not([data-disabled]):not([data-variant='destructive']) {
  background-color: #f2eaf6;
  color: #5e466e;
}

@media (max-width:767px) {
  html[data-susu-design='studio'] .susu-cinematic .susu-shrine {
    border-radius: 26px;
    padding: 10px;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-shrine-top {
    font-size: 8px;
    letter-spacing: .07em;
  }
  html[data-susu-design='studio'] .susu-cinematic .susu-shrine-chip-one {
    font-size: 7.5px;
    padding: 5px 7px;
  }
  html[data-susu-design='studio'] .susu-cinematic .studio-feature {
    border-radius: 23px 31px 23px 23px;
  }
}
@media (forced-colors:active) {
  html[data-susu-design='studio'] .susu-cinematic .studio-feature,
  html[data-susu-design='studio'] body [data-susu-surface],
  html[data-susu-design='studio'] .susu-header-nav {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }
}

/* Courtyard catalog — append last to sakura-deco.css. Presentation only.
   Native pricing roots + the catalog's portaled filter sheet, never other pages.
   Keep 768/1440 columns, 1280 sidebar, 96/84 sticky offsets and popup geometry.
   Card pseudos belong to Liquid; price/name typography and promotion DOM stay. */
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) {
  --susu-courtyard-catalog-version: courtyard-1;
  --cc-paper: #fffdf8;
  --cc-white: #ffffff;
  --cc-page: #f8f8f0;
  --cc-blue-wash: #edf4fa;
  --cc-rose-wash: #fff0f5;
  --cc-sage-wash: #edf3e9;
  --cc-ink: #34485d;
  --cc-muted: #5d6d78;
  --cc-blue: #3c6288;
  --cc-rose: #93516c;
  --cc-sage: #476a58;
  --cc-line: #ccd9d9;
  --cc-edge: #a8c2d3;
  --cc-leaf: #a7c4a829;
  --cc-petal: #dca1b729;
  --cc-shadow: #526e8726;
  --cc-focus: #365e91;
  --catalog-ink: var(--cc-ink);
  --catalog-muted: var(--cc-muted);
  --catalog-blue: var(--cc-blue);
  --catalog-line: var(--cc-line);
  color: var(--cc-ink);
}
html[data-susu-design='studio'].dark :is([data-susu-pricing], .susu-filter-sheet) {
  --cc-paper: #202c35;
  --cc-white: #263640;
  --cc-page: #18232b;
  --cc-blue-wash: #273c4b;
  --cc-rose-wash: #3c2c3b;
  --cc-sage-wash: #293c35;
  --cc-ink: #edf3f4;
  --cc-muted: #bdccd1;
  --cc-blue: #afcfea;
  --cc-rose: #f0bad1;
  --cc-sage: #b8d9c0;
  --cc-line: #526772;
  --cc-edge: #87a8bb;
  --cc-leaf: #91bda017;
  --cc-petal: #d5a1ba17;
  --cc-shadow: #00000070;
  --cc-focus: #c5e2ff;
}

/* Warm paper under every request state; botanical marks remain small/static. */
html[data-susu-design='studio'] [data-susu-pricing] {
  min-height: 100svh;
  background: radial-gradient(ellipse 160px 85px at 100% 0, var(--cc-leaf), transparent 98%), var(--cc-page);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-hero {
  border-bottom: 1px solid var(--cc-line);
  padding-bottom: 20px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-intro .susu-workspace-eyebrow {
  padding: 7px 11px;
  border: 1px solid var(--cc-line);
  border-radius: 8px 16px 16px 8px;
  background: var(--cc-paper);
  color: var(--cc-sage);
  box-shadow: inset 3px 0 var(--cc-edge);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-intro h1 span { color: var(--cc-blue); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-meta a { color: var(--cc-rose); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-meta > span {
  padding: 6px 10px;
  border: 1px solid var(--cc-line);
  border-radius: 999px;
  background: var(--cc-sage-wash);
  color: var(--cc-sage);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-art {
  border: 1px solid var(--cc-line);
  border-radius: 30px 30px 24px 24px;
  background: url('/brand/susu-tea-table-20260923.svg') center / cover no-repeat,
    url('/brand/susu-tea-manor-20260923.svg') center / cover no-repeat,
    url('/brand/susu-tea-sky-20260923.svg') center / cover no-repeat, var(--cc-blue-wash);
  box-shadow: inset 0 0 0 5px var(--cc-paper), 0 14px 30px -21px var(--cc-shadow);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-orbit { border-color: var(--cc-line); background: transparent; }
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-art-chip {
  border-color: var(--cc-line);
  background: var(--cc-paper);
  color: var(--cc-blue);
  box-shadow: 0 5px 12px -7px var(--cc-shadow);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-art-star { color: var(--cc-rose); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-search-bar input {
  border-color: var(--cc-edge);
  background: linear-gradient(100deg, var(--cc-white), var(--cc-paper));
  box-shadow: inset 0 0 0 4px var(--cc-white), 0 9px 24px -17px var(--cc-shadow);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-search-bar input:focus {
  border-color: var(--cc-focus);
  box-shadow: 0 0 0 4px var(--cc-blue-wash), 0 9px 24px -17px var(--cc-shadow);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-search-icon { color: var(--cc-blue); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-search-shortcut {
  border-color: var(--cc-line); background: var(--cc-sage-wash); color: var(--cc-sage);
}

/* Porcelain tool tray + garden-label filters. No sheet/positioner transforms. */
html[data-susu-design='studio'] [data-susu-pricing] :is(.susu-pricing-toolbar, .susu-loading-toolbar, .susu-pricing-sidebar) {
  border-color: var(--cc-line);
  background: linear-gradient(145deg, var(--cc-paper), var(--cc-white));
  box-shadow: inset 0 0 0 4px var(--cc-white), 0 10px 26px -21px var(--cc-shadow);
}
html[data-susu-design='studio'] .susu-filter-sheet[data-slot='sheet-content'] {
  background: var(--cc-paper); border-color: var(--cc-line); color: var(--cc-ink);
}
html[data-susu-design='studio'] .susu-filter-sheet :is([data-slot='sheet-header'], .susu-filter-heading) { border-color: var(--cc-line); }
html[data-susu-design='studio'] .susu-filter-sheet [data-slot='sheet-title'] { color: var(--cc-ink); }
html[data-susu-design='studio'] .susu-filter-sheet [data-slot='sheet-description'] { color: var(--cc-muted); }
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) .susu-filter-section-trigger { color: var(--cc-sage); }
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) .susu-filter-chip {
  border-color: var(--cc-line); background: var(--cc-paper); color: var(--cc-muted);
  box-shadow: inset 0 1px var(--cc-white);
}
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) .susu-filter-count {
  background: var(--cc-sage-wash); color: var(--cc-sage);
}
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) .susu-filter-chip[aria-pressed='true'] {
  border-color: var(--cc-blue); background: var(--cc-blue-wash); color: var(--cc-blue);
  box-shadow: inset 3px 0 var(--cc-blue), inset 0 1px var(--cc-white);
}
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) .susu-filter-chip[aria-pressed='true'] .susu-filter-count {
  background: var(--cc-white); color: var(--cc-blue);
}
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) .susu-filter-heading button,
html[data-susu-design='studio'] [data-susu-pricing] .susu-clear-filters { color: var(--cc-rose); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-toolbar .susu-segmented {
  border-color: var(--cc-line); background: var(--cc-sage-wash) !important;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-toolbar .susu-segment { color: var(--cc-muted) !important; }
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-toolbar .susu-segment[aria-pressed='true'] {
  color: var(--cc-blue) !important; box-shadow: inset 0 -2px var(--cc-blue);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-segment-indicator {
  border-color: var(--cc-line); background: var(--cc-white); box-shadow: 0 3px 8px -5px var(--cc-shadow);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-sort-button {
  border-color: var(--cc-line) !important; background: var(--cc-paper) !important; color: var(--cc-blue) !important;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-mobile-filter-trigger {
  border-color: var(--cc-line); background: var(--cc-paper); color: var(--cc-blue);
}

/* Beat live sakura-cards.css !important skins, including all three promotions.
   The inset double rim leaves dimensions, rounded corners and text unchanged. */
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card],
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] {
  --cc-card-wash: var(--cc-blue-wash);
  border-color: var(--cc-edge) !important;
  background: radial-gradient(ellipse 32px 11px at 100% 18px, var(--cc-leaf) 96%, transparent),
    radial-gradient(ellipse 11px 30px at 100% 18px, var(--cc-leaf) 96%, transparent),
    radial-gradient(ellipse 65px 42px at 100% 100%, var(--cc-petal), transparent),
    linear-gradient(155deg, var(--cc-white), var(--cc-paper) 65%, var(--cc-card-wash)) !important;
  box-shadow: inset 0 0 0 4px var(--cc-white), inset 0 0 0 5px var(--cc-line),
    0 4px 9px -7px var(--cc-shadow), 0 18px 30px -23px var(--cc-shadow) !important;
}
html[data-susu-design='studio'] .susu-pricing article.susu-model-card[data-susu-model-card]:is(.opus48-stolen, .kimik3free-stolen) {
  --cc-card-wash: var(--cc-rose-wash);
}
html[data-susu-design='studio'] .susu-pricing article.susu-model-card[data-susu-model-card].glm53f-pj-storm {
  --cc-card-wash: var(--cc-sage-wash);
  animation: none; /* Only the article pulse; keep promotion labels/dress intact. */
}
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-icon,
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-icon {
  position: relative;
  border-color: var(--cc-edge) !important; color: var(--cc-blue) !important;
  background: linear-gradient(145deg, var(--cc-white), var(--cc-blue-wash)) !important;
  box-shadow: inset 0 0 0 3px var(--cc-paper), 0 5px 9px -7px var(--cc-shadow);
}
/* A little silk bow on the aria-hidden icon, not on the interactive card. */
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-icon::after {
  content: ''; position: absolute; top: -4px; right: -5px; width: 22px; height: 12px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--cc-rose) 0 2px, transparent 2.5px),
    radial-gradient(ellipse 6px 4px at 5px 6px, var(--cc-rose-wash) 70%, var(--cc-rose) 75% 85%, transparent 90%),
    radial-gradient(ellipse 6px 4px at 17px 6px, var(--cc-rose-wash) 70%, var(--cc-rose) 75% 85%, transparent 90%);
}
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-provider,
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-provider {
  color: var(--cc-sage) !important; background: var(--cc-sage-wash);
  box-shadow: inset 2px 0 var(--cc-line); border-radius: 4px 9px 9px 4px;
}
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] h3,
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] h3 { color: var(--cc-ink) !important; }
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-description,
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-description { color: var(--cc-muted) !important; }
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-tags span,
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-tags span {
  border-color: var(--cc-line) !important; background: var(--cc-blue-wash) !important; color: var(--cc-blue) !important;
}
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-tags span:nth-child(2),
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-tags span:nth-child(2) {
  background: var(--cc-rose-wash) !important; color: var(--cc-rose) !important;
}
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-price,
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-price {
  border-color: var(--cc-line) !important;
  background: linear-gradient(115deg, var(--cc-blue-wash), var(--cc-paper)) !important;
  box-shadow: inset 0 2px var(--cc-white), inset 0 -2px var(--cc-sage-wash);
}
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] :is(.susu-model-price-heading, .susu-model-price-entry dd),
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] :is(.susu-model-price-heading, .susu-model-price-entry dd) { color: var(--cc-blue) !important; }
html[data-susu-design='studio'] [data-susu-pricing] :is(.susu-model-price-entry dt, .susu-model-expression, .susu-model-footer [data-slot='status-badge']) { color: var(--cc-muted); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-price-cache { border-color: var(--cc-line); }
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-copy,
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-copy {
  border-color: var(--cc-line) !important; background: var(--cc-paper) !important; color: var(--cc-blue) !important;
}
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-copy[data-copied='true'],
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card] .susu-model-copy[data-copied='true'] {
  border-color: #83b59b !important; background: #eafaf3 !important; color: #216846 !important;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-details {
  border-color: var(--cc-edge); background: linear-gradient(100deg, var(--cc-blue-wash), var(--cc-sage-wash));
  color: var(--cc-blue); box-shadow: inset 0 1px var(--cc-white), 0 4px 9px -7px var(--cc-shadow);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-details svg {
  box-sizing: content-box; padding: 4px; border-radius: 50%; background: var(--cc-paper);
}
html[data-susu-design='studio'] [data-susu-pricing] [data-susu-feedback] {
  --susu-feedback-glow: #ffffff45;
  --susu-feedback-ripple: #cf8fa836;
}
/* Important base shadows require an equally explicit interactive state. */
html[data-susu-design='studio']:not(.dark) .susu-pricing article.susu-model-card[data-susu-model-card]:is([data-susu-hover='true'], :focus-within),
html[data-susu-design='studio'].dark .susu-pricing article.susu-model-card[data-susu-model-card]:is([data-susu-hover='true'], :focus-within) {
  border-color: var(--cc-blue) !important;
  box-shadow: inset 0 0 0 4px var(--cc-white), inset 0 0 0 5px var(--cc-edge),
    0 0 0 3px var(--cc-rose-wash), 0 20px 38px -20px var(--cc-shadow) !important;
}

/* Empty/loading/error states and the alternate native table are first-class. */
html[data-susu-design='studio'] [data-susu-pricing] :is(.susu-loading-card, .susu-catalog-empty, .susu-catalog-error) {
  border-color: var(--cc-line); color: var(--cc-muted);
  background: radial-gradient(ellipse 95px 45px at 100% 0, var(--cc-leaf), transparent), var(--cc-paper);
  box-shadow: inset 0 0 0 4px var(--cc-white), inset 0 0 0 5px var(--cc-line);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-loading [data-slot='skeleton'] { background: var(--cc-line); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-empty > svg { background: var(--cc-sage-wash); color: var(--cc-sage); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-error h1 { color: var(--cc-ink); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-error svg { color: var(--cc-rose); }
html[data-susu-design='studio'] [data-susu-pricing] :is(.susu-catalog-empty, .susu-catalog-error) button {
  border-color: var(--cc-edge); background: var(--cc-blue-wash); color: var(--cc-blue);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-table [data-slot='table-container'] {
  border-color: var(--cc-line); background: var(--cc-paper); box-shadow: 0 12px 28px -21px var(--cc-shadow);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-table th { background: var(--cc-sage-wash); color: var(--cc-sage); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-table td { border-color: var(--cc-line); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-table tbody tr:nth-child(even) { background: var(--cc-white); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-table tbody tr:is(:hover, :focus-within) { background: var(--cc-blue-wash); }
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-pagination { border-top: 1px solid var(--cc-line); }
html[data-susu-design='studio'] [data-susu-pricing] :is(.susu-model-pagination button, .susu-pricing-table button[data-variant='outline'], .susu-pricing-table [data-slot='select-trigger']) {
  border-color: var(--cc-line); background: var(--cc-paper); color: var(--cc-blue);
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-table button[data-variant='default'] {
  border-color: var(--cc-blue); background: var(--cc-blue-wash); color: var(--cc-blue); box-shadow: inset 0 -2px var(--cc-blue);
}

/* Keyboard/disabled/copy states stay distinct; never replace focus with glow. */
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) :is(button, a, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--cc-focus); outline-offset: 3px;
}
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) button:is(:disabled, [data-disabled], [aria-disabled='true']) {
  opacity: .5; cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) .susu-filter-chip:not([aria-pressed='true']):not(:disabled):not([data-disabled]):not([aria-disabled='true']):hover {
    border-color: var(--cc-edge); background: var(--cc-sage-wash); color: var(--cc-sage);
  }
  html[data-susu-design='studio'] [data-susu-pricing] .susu-model-details:not(:disabled):not([data-disabled]):not([aria-disabled='true']):hover {
    border-color: var(--cc-blue); background: var(--cc-blue-wash);
  }
}
@media (pointer: coarse) {
  html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) :is(.susu-filter-chip, .susu-segment, .susu-sort-button, .susu-model-copy, .susu-model-details, .susu-search-clear, .susu-mobile-filter-trigger, .susu-model-pagination button) {
    min-height: 44px; min-width: 44px;
  }
}
@media (forced-colors: active) {
  html[data-susu-design='studio']:is(:not(.dark), .dark) :is([data-susu-pricing], .susu-filter-sheet) {
    --cc-paper: Canvas; --cc-white: Canvas; --cc-page: Canvas;
    --cc-blue-wash: Canvas; --cc-rose-wash: Canvas; --cc-sage-wash: Canvas;
    --cc-ink: CanvasText; --cc-muted: CanvasText; --cc-blue: LinkText;
    --cc-rose: CanvasText; --cc-sage: CanvasText; --cc-line: ButtonText;
    --cc-edge: ButtonText; --cc-focus: Highlight; --cc-shadow: transparent;
    --cc-leaf: transparent; --cc-petal: transparent;
  }
  html[data-susu-design='studio']:is(:not(.dark), .dark) .susu-pricing article.susu-model-card[data-susu-model-card],
  html[data-susu-design='studio']:is(:not(.dark), .dark) .susu-pricing article.susu-model-card[data-susu-model-card] :is(.susu-model-icon, .susu-model-price, .susu-model-copy, .susu-model-copy[data-copied='true']) {
    background: Canvas !important; border-color: ButtonText !important; color: CanvasText !important;
  }
  html[data-susu-design='studio']:is(:not(.dark), .dark) .susu-pricing article.susu-model-card[data-susu-model-card]:is([data-susu-hover='true'], :focus-within) { outline: 2px solid Highlight; outline-offset: 2px; }
  html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-art { background: Canvas; }
  html[data-susu-design='studio'] [data-susu-pricing] .susu-model-icon::after { content: none; }
  html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) :is(.susu-filter-chip, .susu-segment)[aria-pressed='true'] { outline: 2px solid Highlight; outline-offset: -3px; }
  html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) button:is(:disabled, [data-disabled], [aria-disabled='true']) { color: GrayText !important; opacity: 1; }
}

/* Courtyard detail rooms and secondary native pages. CSS-only presentation;
   no price formatting, route substitution, generated labels or popup motion. */
html[data-susu-design='studio'] [class~='@container/details'],
html[data-susu-design='studio'] body [data-susu-surface='sheet']:has([class~='@container/details']) {
  --susu-courtyard-details-version: courtyard-1;
  --cd-paper: #fffdf8;
  --cd-ink: #394858;
  --cd-muted: #626d78;
  --cd-blue: #3e628b;
  --cd-rose: #91516f;
  --cd-sage: #4b6e59;
  --cd-line: #d9dfe0;
  --cd-blue-wash: #edf4fb;
  --cd-rose-wash: #fff1f6;
  --cd-sage-wash: #edf4eb;
  --background: var(--cd-paper);
  --foreground: var(--cd-ink);
  --card: var(--cd-paper);
  --card-foreground: var(--cd-ink);
  --muted: #f1f2ed;
  --muted-foreground: var(--cd-muted);
  --border: var(--cd-line);
  --input: var(--cd-line);
  --primary: var(--cd-blue);
  --primary-foreground: #fff;
  --accent: var(--cd-sage-wash);
  --accent-foreground: var(--cd-sage);
}
html[data-susu-design='studio'].dark [class~='@container/details'],
html[data-susu-design='studio'].dark body [data-susu-surface='sheet']:has([class~='@container/details']) {
  --cd-paper: #252d37;
  --cd-ink: #e9edf2;
  --cd-muted: #c3c6ce;
  --cd-blue: #b6d1ec;
  --cd-rose: #efb9d1;
  --cd-sage: #b8d9c1;
  --cd-line: #505c69;
  --cd-blue-wash: #2e3d50;
  --cd-rose-wash: #403342;
  --cd-sage-wash: #2e4037;
  --muted: #303844;
  --primary-foreground: #1e2c3b;
}

/* A model sheet is portaled outside the catalog. Identify its real contents,
   not a route ancestor. Keep all side/inset/max-width and scroll-lock rules. */
html[data-susu-design='studio'] body [data-susu-surface='sheet']:has([class~='@container/details']) {
  background: linear-gradient(160deg, var(--cd-paper) 60%, var(--cd-blue-wash));
  color: var(--cd-ink);
  border-color: var(--cd-line);
  box-shadow: inset 0 0 0 5px #ffffff63, 0 16px 35px -24px #4c587855,
    0 40px 96px -35px #6452766b;
}
html[data-susu-design='studio'] [class~='@container/details'] > header {
  padding: 20px;
  border: 1px solid var(--cd-line);
  border-radius: 22px 30px 22px 22px;
  background:
    linear-gradient(100deg, var(--cd-paper) 55%, color-mix(in srgb, var(--cd-paper) 86%, transparent)),
    url('/brand/susu-tea-manor-20260923.svg') right center / 190px auto no-repeat,
    var(--cd-blue-wash);
  box-shadow: inset 0 1px #ffffffa8, 0 12px 24px -22px #65779566;
}
html[data-susu-design='studio'] [class~='@container/details'] > header > div:first-child {
  min-width: 0;
  flex-wrap: wrap;
}
html[data-susu-design='studio'] [class~='@container/details'] > header h1 {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--cd-ink);
}
html[data-susu-design='studio'] [class~='@container/details'] > header p {
  color: var(--cd-muted);
}
html[data-susu-design='studio'] [class~='@container/details'] [data-slot='tabs-list'][data-variant='default'] {
  padding: 5px;
  border: 1px solid var(--cd-line);
  border-radius: 15px;
  background: var(--cd-sage-wash);
  box-shadow: inset 0 1px #ffffff9c;
}
html[data-susu-design='studio'] [class~='@container/details'] [data-slot='tabs-trigger'] {
  border-radius: 11px;
  color: var(--cd-muted);
}
html[data-susu-design='studio'] [class~='@container/details'] [data-slot='tabs-trigger'][data-active] {
  background: var(--cd-paper);
  color: var(--cd-blue);
  box-shadow: inset 0 0 0 1px var(--cd-line), 0 4px 10px -7px #64769b80;
}
html[data-susu-design='studio'] [class~='@container/details'] [data-slot='tabs-content'] > section,
html[data-susu-design='studio'] [class~='@container/details'] [data-slot='tabs-content']
  :is(div.rounded-xl.border, div.rounded-lg.border):not([role='alert']):not([data-status]):not([class*='amber']) {
  border-color: var(--cd-line);
  border-radius: 17px;
  background: linear-gradient(150deg, var(--cd-paper), var(--cd-blue-wash));
  box-shadow: inset 0 1px #ffffff80;
}
html[data-susu-design='studio'] [class~='@container/details'] [data-slot='tabs-content'] > section > h2 {
  color: var(--cd-sage);
}
html[data-susu-design='studio'] [class~='@container/details'] [data-slot='table-container'] {
  border-color: var(--cd-line);
  border-radius: 14px;
  background: var(--cd-paper);
}
html[data-susu-design='studio'] [class~='@container/details'] :is(th, [data-slot='table-head']) {
  color: var(--cd-sage);
  background: var(--cd-sage-wash);
  border-color: var(--cd-line);
}
html[data-susu-design='studio'] [class~='@container/details'] :is(td, [data-slot='table-cell']) {
  border-color: var(--cd-line);
}
html[data-susu-design='studio'] [class~='@container/details'] pre {
  border-color: var(--cd-line);
  border-radius: 14px;
  box-shadow: inset 0 1px #ffffff24;
}
html[data-susu-design='studio'] [class~='@container/details'] [data-susu-button][data-variant='outline'] {
  border-color: var(--cd-line);
  background: var(--cd-paper);
}
html[data-susu-design='studio'] [class~='@container/details']
  :is([data-slot='select-trigger'], [data-slot='combobox-input']):not([aria-invalid='true']):not(:disabled) {
  border-color: var(--cd-line);
  background: var(--cd-paper);
}
@media (pointer: coarse) {
  html[data-susu-design='studio'] [class~='@container/details'] [data-slot='tabs-trigger'] {
    min-height: 44px;
  }
}
@media (max-width: 767px) {
  html[data-susu-design='studio'] [class~='@container/details'] > header {
    padding: 16px;
    border-radius: 18px 25px 18px 18px;
    background: linear-gradient(125deg, var(--cd-paper), var(--cd-rose-wash));
  }
}

/* Native public secondary pages; never enter isolated HTML/shadow roots or
   touch the independent signature gate. The actual page text stays unchanged. */
html[data-susu-design='studio'] .susu-public-layout > main.container {
  --susu-courtyard-secondary-version: courtyard-1;
  --card: #fffdf8;
  --card-foreground: #41475a;
  --muted: #f1f2ed;
  --muted-foreground: #626b79;
  --border: #dcdde4;
  background: radial-gradient(ellipse 480px 320px at 98% 0, #f8e8f163, transparent),
    linear-gradient(150deg, #fffefa, #f5f8f6 72%, #fbf5fb);
}
html[data-susu-design='studio'] .susu-public-layout > main.container [data-slot='card'] {
  border-color: #dfdce3;
  border-radius: 22px;
  background: #fffdf9;
  box-shadow: inset 0 1px #fff, 0 15px 28px -24px #89729b60;
}
html[data-susu-design='studio'] .susu-public-layout > main.container
  :is([data-slot='tabs-list'], [role='tablist']):not([data-variant='line']) {
  background-color: #f0f4ed;
  border-color: #d9e2d7;
}
html[data-susu-design='studio'] .susu-public-layout > main.container
  [role='tab'][aria-selected='true'] {
  color: #496992;
}

/* Rankings intentionally uses showMainContainer=false. Its native section
   cards and period tabs therefore need their own real structural boundary. */
html[data-susu-design='studio'] .susu-public-layout > div.relative:has([role='tablist']) {
  --susu-courtyard-secondary-version: courtyard-1;
  --card: #fffdf8;
  --foreground: #41475a;
  --muted-foreground: #626b79;
  --primary: #496992;
  --border: #dddfe2;
  background: linear-gradient(145deg, #fffdf7, #f4f8f4 60%, #fcf3fa);
}
html[data-susu-design='studio'] .susu-public-layout > div.relative:has([role='tablist']) > :not([aria-hidden]) {
  padding-top: 110px;
}
html[data-susu-design='studio'] .susu-public-layout > div.relative:has([role='tablist']) section.bg-card.border {
  border-color: #d7dedb;
  border-radius: 22px;
  background: #fffdf8;
  box-shadow: inset 0 1px #fff, 0 18px 32px -25px #7c8c9d55;
}
html[data-susu-design='studio'] .susu-public-layout > div.relative:has([role='tablist']) section.bg-card.border > header {
  background: linear-gradient(110deg, #eef4eb, #fffdf8);
  border-bottom: 1px solid #dce4db;
}
html[data-susu-design='studio'] .susu-public-layout > div.relative:has([role='tablist']) [role='tablist'] {
  border-color: #d7dedb;
}
html[data-susu-design='studio'] .susu-public-layout > div.relative:has([role='tablist']) [role='tab'][aria-selected='true'] {
  color: #496992;
  background-color: #edf4f0;
}

/* Authentication remains a document with natural scrolling. No login, token,
   remember-me, input values, validation or CTA destinations are modified. */
html[data-susu-design='studio'] .susu-auth-layout {
  --susu-courtyard-auth-version: courtyard-1;
  --sa-ink: #41475b;
  --sa-muted: #686c7e;
  --sa-blue: #7a96bd;
  --sa-line: #dfdbe4;
  --sa-surface: #fffdf9;
  --sa-soft: #edf4fa;
  --sa-pink: #f9edf3;
  --sa-action: #496992;
  background: radial-gradient(ellipse at 0 18%, #e7f0fba6, transparent 65%),
    radial-gradient(ellipse at 100% 90%, #f9e4ed82, transparent 70%), #fffdf9;
}
html[data-susu-design='studio'] .susu-auth-layout .susu-auth-form-panel {
  border-color: var(--sa-line);
  border-radius: 28px;
  background: linear-gradient(150deg, #fffefb, #fff8fb);
  box-shadow: inset 0 0 0 5px #ffffff80, 0 26px 56px -38px #8b759d66;
}
html[data-susu-design='studio'] .susu-auth-layout .susu-auth-editorial {
  border-radius: 26px;
  background: linear-gradient(130deg, #fffdf9e8, #f3f7f5a6);
}
html[data-susu-design='studio'].dark .susu-auth-layout {
  --sa-ink: #ebe9f0; --sa-muted: #b9c0ce; --sa-blue: #b4cde8;
  --sa-line: #4e5869; --sa-surface: #262d37; --sa-soft: #303d4c;
  --sa-pink: #403241; --sa-action: #b4cde8;
  background: #232b35;
}
html[data-susu-design='studio'].dark .susu-auth-layout :is(.susu-auth-form-panel, .susu-auth-editorial) {
  background: linear-gradient(145deg, #262d37, #303844);
}
@media (forced-colors: active) {
  html[data-susu-design='studio'] [class~='@container/details'],
  html[data-susu-design='studio'] body [data-susu-surface='sheet']:has([class~='@container/details']) {
    --cd-paper: Canvas; --cd-ink: CanvasText; --cd-muted: CanvasText;
    --cd-blue: LinkText; --cd-sage: CanvasText; --cd-rose: CanvasText;
    --cd-line: CanvasText; --cd-blue-wash: Canvas;
    --cd-rose-wash: Canvas; --cd-sage-wash: Canvas;
  }
  html[data-susu-design='studio'] [class~='@container/details'] :is(header,section,.border),
  html[data-susu-design='studio'] .susu-public-layout > main.container,
  html[data-susu-design='studio'] .susu-auth-layout,
  html[data-susu-design='studio'] .susu-auth-layout :is(.susu-auth-form-panel,.susu-auth-editorial) {
    background-image: none;
    background-color: Canvas;
    border-color: CanvasText;
    color: CanvasText;
    box-shadow: none;
  }
}

/* Susu Courtyard — append after island / tea-garden; no index import.
   Paint only: layout, scrolling, focus, chart series and motion keep their owners.
   Pointer glow ::before and ripple ::after are deliberately untouched. */
.susu-console,
body:has(.susu-console) :is([data-susu-surface], [data-slot='drawer-content'],
  [data-slot='sidebar'][data-mobile='true'], .toaster) {
  --susu-courtyard-console-version: courtyard-1;
  /* Explicit surface FIRST: never resolve this through --background. */
  --sc-surface: #fffdf9;
  --sc-ink: #41455b;
  --sc-muted: #686b78;
  --sc-accent: #688ab5;
  --sc-blue: #496992;
  --sc-blue-deep: #3e567b;
  --sc-pink: #985675;
  --sc-soft: #edf3f9;
  --sc-rose: #f9edf2;
  --sc-sage: #e9f1e7;
  --sc-leaf: #496958;
  --sc-vellum: #f5f0e5;
  --sc-line: #dfd9df;
  --sc-glaze: #ffffff;
  --sc-shadow: inset 0 1px var(--sc-glaze), inset 0 0 0 4px #ffffff70,
    0 3px 6px -4px #79657524, 0 16px 32px -25px #826a8870;
  --background: var(--sc-surface);
  --foreground: var(--sc-ink);
  --card: var(--sc-surface);
  --card-foreground: var(--sc-ink);
  --popover: var(--sc-surface);
  --popover-foreground: var(--sc-ink);
  --muted: var(--sc-vellum);
  --muted-foreground: var(--sc-muted);
  --primary: var(--sc-blue);
  --primary-foreground: #ffffff;
  --secondary: var(--sc-soft);
  --secondary-foreground: var(--sc-blue);
  --accent: var(--sc-sage);
  --accent-foreground: var(--sc-leaf);
  --border: var(--sc-line);
  --input: var(--sc-line);
  --ring: var(--sc-accent);
  --sidebar: var(--sc-surface);
  --sidebar-foreground: var(--sc-ink);
  --sidebar-primary: var(--sc-blue);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--sc-sage);
  --sidebar-accent-foreground: var(--sc-leaf);
  --sidebar-border: var(--sc-line);
  --sidebar-ring: var(--sc-accent);
  --table-row: var(--sc-surface);
  --table-header: var(--sc-vellum);
  --table-header-hover: var(--sc-sage);
  /* Do not remap destructive/success/warning/info, badge or disabled tokens. */
}
.dark .susu-console,
.dark body:has(.susu-console) :is([data-susu-surface], [data-slot='drawer-content'],
  [data-slot='sidebar'][data-mobile='true'], .toaster) {
  --sc-surface: #252b33;
  --sc-ink: #eee9ed;
  --sc-muted: #bbb9c7;
  --sc-accent: #a9c6ea;
  --sc-blue: #b0cbee;
  --sc-blue-deep: #8dadcf;
  --sc-pink: #e2adc5;
  --sc-soft: #303b4b;
  --sc-rose: #3f303d;
  --sc-sage: #2d3e36;
  --sc-leaf: #bad9c7;
  --sc-vellum: #35352f;
  --sc-line: #505360;
  --sc-glaze: #ffffff12;
  --sc-shadow: inset 0 1px #ffffff14, inset 0 0 0 3px #ffffff04,
    0 14px 32px -24px #000000b3;
  --primary-foreground: #202b3a;
}

/* Chrome: sage navigation, porcelain edges, rose stationery at the foot. */
.susu-console .susu-app-header {
  border-color: var(--sc-line);
  background: linear-gradient(100deg, var(--sc-surface) 40%, var(--sc-soft) 78%, var(--sc-rose));
  box-shadow: inset 0 -2px var(--sc-glaze), 0 5px 20px -17px #826a8880;
}
.susu-console .susu-app-header nav a:is(:hover, [data-status='active']) {
  background: var(--sc-sage); color: var(--sc-leaf);
}
.susu-console [data-slot='sidebar-inner'],
body:has(.susu-console) [data-slot='sidebar'][data-mobile='true'] {
  background: linear-gradient(180deg, var(--sc-surface) 30%, var(--sc-vellum));
  border-color: var(--sc-line); box-shadow: inset -1px 0 var(--sc-glaze);
}
.susu-console [data-slot='sidebar-container'] { border-color: var(--sc-line); }
body:has(.susu-console) [data-slot='sidebar-group-label'] { color: var(--sc-muted); }
body:has(.susu-console) :is([data-slot='sidebar-menu-button'], [data-slot='sidebar-menu-sub-button']) {
  border-radius: 12px; color: var(--sc-muted);
}
body:has(.susu-console) :is([data-slot='sidebar-menu-button'], [data-slot='sidebar-menu-sub-button'])
  :where(svg) { stroke-width: 1.75; }
body:has(.susu-console) :is([data-slot='sidebar-menu-button'], [data-slot='sidebar-menu-sub-button']):not(
  :disabled, [aria-disabled='true'], [data-disabled]
):hover {
  background: var(--sc-sage); color: var(--sc-leaf);
}
body:has(.susu-console) :is([data-slot='sidebar-menu-button'], [data-slot='sidebar-menu-sub-button'])[data-active='true'] {
  background: linear-gradient(105deg, var(--sc-sage), var(--sc-soft));
  color: var(--sc-leaf); box-shadow: inset 3px 0 var(--sc-leaf), inset 0 1px var(--sc-glaze);
}
body:has(.susu-console) :is(.susu-sidebar-note,
  [data-slot='sidebar'][data-mobile='true'] .susu-sidebar-note) {
  border-color: var(--sc-line); border-radius: 18px 24px 18px 18px;
  background: linear-gradient(110deg, var(--sc-surface) 48%, color-mix(in srgb, var(--sc-surface) 78%, transparent)),
    url('/brand/susu-tea-table-20260923.svg') right bottom / 96px 64px no-repeat, var(--sc-rose);
  box-shadow: var(--sc-shadow);
}
body:has(.susu-console) .susu-sidebar-mascot {
  background: linear-gradient(140deg, var(--sc-sage), var(--sc-rose));
}
body:has(.susu-console) .susu-sidebar-note-copy > span { color: var(--sc-pink); }
.susu-console .susu-main {
  background: linear-gradient(135deg, var(--sc-vellum), var(--sc-soft) 62%, var(--sc-rose));
  color: var(--sc-ink);
}
.susu-console .susu-console-heading { background: linear-gradient(100deg, var(--sc-surface), transparent); }
.susu-console .susu-console-heading-icon {
  border-color: var(--sc-line); border-radius: 16px 20px 16px 16px;
  background: linear-gradient(145deg, var(--sc-surface), var(--sc-rose)); box-shadow: var(--sc-shadow);
}
.susu-console .susu-console-eyebrow { color: var(--sc-pink); }
.susu-console :is(.susu-console-heading h2, .susu-console-welcome h3) { color: var(--sc-ink); }
.susu-console .susu-console-welcome[data-susu-feedback='glass'] {
  border-color: var(--sc-line); border-radius: 24px 32px 24px 24px;
  background: linear-gradient(90deg, var(--sc-surface) 50%, color-mix(in srgb, var(--sc-surface) 76%, transparent)),
    url('/brand/susu-tea-manor-20260923.svg') right center / 240px 160px no-repeat,
    url('/brand/susu-tea-sky-20260923.svg') right center / 240px 160px no-repeat, var(--sc-sage);
  box-shadow: var(--sc-shadow);
}
.susu-console .susu-console-shortcuts a {
  border-color: var(--sc-line); background: var(--sc-surface); color: var(--sc-blue);
  box-shadow: inset 0 1px var(--sc-glaze), 0 3px 8px -6px #826a8850;
}
.susu-console .susu-console-shortcuts a:hover { background: var(--sc-sage); color: var(--sc-leaf); }

/* Actual shared Card and dashboard PanelWrapper / chart frames. No canvas tint. */
.susu-console :is([data-slot='card'], [data-slot='data-table-frame']),
.susu-console .susu-dashboard-content :is(.bg-card.border, .overflow-hidden.rounded-lg.border),
.susu-console .susu-wallet-stats > div {
  border-color: var(--sc-line); border-radius: 20px;
  background: linear-gradient(155deg, var(--sc-surface) 75%, var(--sc-soft));
  color: var(--sc-ink); box-shadow: var(--sc-shadow);
}
.susu-console [data-slot='card-header'],
.susu-console .susu-dashboard-content :is(.bg-card.border, .overflow-hidden.rounded-lg.border) > .border-b {
  border-color: var(--sc-line);
  background: linear-gradient(100deg, var(--sc-vellum), var(--sc-surface));
  box-shadow: inset 0 -1px var(--sc-glaze); border-radius: 16px 16px 0 0;
}
.susu-console [data-slot='card-title'] { color: var(--sc-ink); }
.susu-console :is([data-slot='card-description'], .susu-console-description) { color: var(--sc-muted); }
.susu-console :is([data-slot='data-table-toolbar'], .susu-dashboard-section-nav, [data-slot='page-footer']) {
  border-color: var(--sc-line); background: var(--sc-surface); box-shadow: var(--sc-shadow);
}
.susu-console :is(.susu-donation-strip, .susu-console-community) {
  border-color: var(--sc-line); background: linear-gradient(110deg, var(--sc-surface), var(--sc-rose));
}
.susu-console .susu-wallet-stats > div:first-child { background: linear-gradient(140deg, var(--sc-surface) 40%, var(--sc-sage)); }
.susu-console .susu-wallet-stats > div:nth-child(2) { background: linear-gradient(140deg, var(--sc-surface) 40%, var(--sc-rose)); }
.susu-console .susu-wallet-stats > div:nth-child(3) { background: linear-gradient(140deg, var(--sc-surface) 40%, var(--sc-soft)); }
.susu-console .susu-profile-identity[data-slot='card'] {
  background: linear-gradient(115deg, var(--sc-surface) 40%, var(--sc-soft) 72%, var(--sc-rose));
}
.susu-console .susu-profile-identity > .border-t { background: var(--sc-vellum); border-color: var(--sc-line); }
.susu-console [data-settings-form-span='full'].rounded-xl.border {
  border-color: var(--sc-line); border-radius: 16px;
  background: linear-gradient(120deg, var(--sc-vellum), var(--sc-surface));
  box-shadow: inset 0 1px var(--sc-glaze);
}

/* Controls also reach genuine portaled editors; semantic variants stay intact. */
body:has(.susu-console) [data-slot='button'][data-susu-button] { border-radius: 12px; }
body:has(.susu-console) [data-slot='button'][data-variant='default']:not([aria-invalid='true']) {
  background: linear-gradient(155deg, var(--sc-blue), var(--sc-blue-deep));
  color: var(--primary-foreground); border-color: transparent;
}
body:has(.susu-console) [data-slot='button'][data-variant='outline']:not([aria-invalid='true']):not(.text-destructive) {
  background: var(--sc-surface); border-color: var(--sc-line); color: var(--sc-ink);
}
body:has(.susu-console) [data-slot='button']:is(
  [data-variant='outline'], [data-variant='ghost'], [data-variant='secondary']
):not(:disabled, [aria-disabled='true'], [data-disabled]):not([aria-invalid='true'], .text-destructive):hover {
  background: var(--sc-sage); color: var(--sc-leaf);
}
body:has(.susu-console) :is([data-slot='input'], [data-slot='textarea'],
  [data-slot='select-trigger'], [data-slot='input-group'], [data-slot='combobox-chips']) {
  border-radius: 12px;
}
body:has(.susu-console) :is([data-slot='input'], [data-slot='textarea'],
  [data-slot='select-trigger'], [data-slot='input-group'], [data-slot='combobox-chips']):not(
  [aria-invalid='true'], :has([aria-invalid='true']), :focus-within,
  :disabled, [aria-disabled='true'], [data-disabled], :has(:disabled)
) {
  background: var(--sc-surface); border-color: var(--sc-line);
}
body:has(.susu-console) :is([data-slot='input'], [data-slot='textarea'], [data-slot='select-trigger'], [data-slot='button'])[aria-invalid='true'],
body:has(.susu-console) :is([data-slot='input-group'], [data-slot='combobox-chips']):has([aria-invalid='true']) {
  border-color: var(--destructive);
}
body:has(.susu-console) [data-slot='tabs-list'][data-variant='default'] {
  border-color: var(--sc-line); background: var(--sc-vellum); border-radius: 14px;
}
body:has(.susu-console) [data-slot='tabs-list'][data-variant='default'] [data-slot='tabs-trigger'][data-active] {
  background: var(--sc-sage); color: var(--sc-leaf);
  box-shadow: inset 0 0 0 1px var(--sc-line), inset 0 1px var(--sc-glaze);
}

/* Opaque pinned cells follow the SAME row contract, including disabled rows. */
.susu-console [data-slot='table-container'] { background: var(--table-row); box-shadow: none; }
.susu-console [data-slot='table-header'],
.susu-console [data-slot='table-header'] [data-slot='table-row'],
.susu-console [data-slot='table-head'] {
  background: var(--table-header-bg, var(--table-header)); color: var(--sc-muted);
  border-color: var(--sc-line);
}
.susu-console [data-slot='table-header'] [data-slot='table-row']:hover,
.susu-console [data-slot='table-header'] [data-slot='table-row']:hover > [data-slot='table-head'] {
  background-color: var(--table-header-hover);
}
.susu-console [data-slot='table-body'] [data-slot='table-row'] {
  background-color: var(--data-table-card-bg, var(--table-row)); border-color: var(--sc-line);
}
.susu-console [data-slot='table-body'] [data-slot='table-row']:is(:hover, :has([aria-expanded='true'])) {
  background-color: var(--data-table-card-bg, var(--sc-sage));
}
.susu-console [data-slot='table-body'] [data-slot='table-row'][data-state='selected'] {
  background-color: var(--data-table-card-bg, var(--sc-soft));
}
.susu-console [data-slot='table-body'] [data-slot='table-row'] > [data-slot='table-cell'].sticky {
  background-color: inherit;
}
.susu-console [data-slot='empty-icon'] {
  border-color: var(--sc-line); border-radius: 16px 22px 16px 16px;
  background: linear-gradient(135deg, var(--sc-sage), var(--sc-rose)); color: var(--sc-leaf);
}
.susu-console [data-slot='empty-title'] { color: var(--sc-ink); }
.susu-console [data-slot='empty-description'] { color: var(--sc-muted); }
body:has(.susu-console) [data-slot='skeleton'] { background-color: var(--sc-line); }

/* Specificity beats island's shared surface paint, NOT its placement/lifecycle. */
body:has(.susu-console) [data-susu-surface][data-slot]:not([data-susu-surface='tooltip']),
body:has(.susu-console) [data-slot='drawer-content'] {
  background: linear-gradient(155deg, var(--sc-surface) 78%, var(--sc-soft));
  color: var(--sc-ink); border-color: var(--sc-line); box-shadow: var(--sc-shadow);
}
body:has(.susu-console) [data-susu-surface][data-slot]:is(
  [data-susu-surface='dialog'], [data-susu-surface='menu'], [data-susu-surface='popover'],
  [data-susu-surface='hover-card'], [data-susu-surface='combobox']
) {
  border-radius: 20px;
}
body:has(.susu-console) [data-susu-surface][data-slot]
  :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'],
    [data-slot='select-item'], [data-slot='combobox-item'], [data-slot='command-item']):is(
    [data-highlighted], [data-popup-open], [data-selected=''], [data-selected='true'], [aria-selected='true'], :focus
  ):not([data-disabled=''], [data-disabled='true'], [aria-disabled='true'],
    [data-variant='destructive'], .text-destructive) {
  background-color: var(--sc-sage); color: var(--sc-leaf); border-radius: 10px;
}
body:has(.susu-console) .toaster {
  /* Sonner's inline --normal/--success/--error tokens consume these mappings. */
  --popover: var(--sc-surface); --popover-foreground: var(--sc-ink);
  --border: var(--sc-line); --radius: 14px;
}

/* Static dark / compact fallbacks: no bright artwork behind short or dark copy. */
.dark .susu-console .susu-console-welcome[data-susu-feedback='glass'],
.dark body:has(.susu-console) :is(.susu-sidebar-note,
  [data-slot='sidebar'][data-mobile='true'] .susu-sidebar-note) {
  background: linear-gradient(125deg, var(--sc-surface), var(--sc-sage));
}
@media (max-width: 640px) {
  .susu-console .susu-console-welcome[data-susu-feedback='glass'] {
    background: linear-gradient(125deg, var(--sc-surface) 40%, var(--sc-sage), var(--sc-rose));
  }
}
@media (forced-colors: active) {
  :is(.susu-console, .dark .susu-console),
  :is(body, .dark body):has(.susu-console) :is([data-susu-surface], [data-slot='drawer-content'],
    [data-slot='sidebar'][data-mobile='true'], .toaster) {
    --sc-surface: Canvas; --sc-ink: CanvasText; --sc-muted: CanvasText;
    --sc-accent: Highlight; --sc-blue: LinkText; --sc-blue-deep: LinkText;
    --sc-pink: LinkText; --sc-leaf: CanvasText; --sc-line: CanvasText;
    --sc-soft: Canvas; --sc-rose: Canvas; --sc-sage: Canvas; --sc-vellum: Canvas;
    --sc-glaze: Canvas; --sc-shadow: none; --primary-foreground: Canvas;
  }
  /* Narrow paint reset; never opt out of the user's forced palette. */
  body:has(.susu-console) :is(.susu-app-header, .susu-main, .susu-console-heading,
    .susu-console-heading-icon, .susu-console-welcome, .susu-sidebar-note,
    .susu-sidebar-mascot, .susu-console-shortcuts a, .susu-wallet-stats > div,
    .susu-profile-identity, .susu-donation-strip, .susu-console-community,
    .susu-dashboard-content .border, [data-settings-form-span].border,
    [data-slot='card'], [data-slot='card-header'], [data-slot='data-table-frame'],
    [data-slot='data-table-toolbar'], [data-slot='page-footer'], [data-slot='sidebar-inner'],
    [data-slot='sidebar-menu-button'], [data-slot='sidebar-menu-sub-button'],
    [data-slot='empty-icon'], [data-slot='button'], [data-slot='tabs-trigger'],
    [data-slot='drawer-content'], [data-susu-surface][data-slot]) {
    background-image: none !important; box-shadow: none !important;
    border-color: CanvasText; backdrop-filter: none;
  }
  body:has(.susu-console) [data-slot='button'][data-variant='default'] {
    background-color: ButtonFace !important; color: ButtonText !important;
  }
  body:has(.susu-console) :is([data-slot='sidebar-menu-button'][data-active='true'],
    [data-slot='sidebar-menu-sub-button'][data-active='true'], [data-slot='tabs-trigger'][data-active]) {
    background-color: Highlight !important; color: HighlightText !important;
  }
}

/* Workroom layout: append after Courtyard paint. Real existing DOM only.
   No CSS order, generated values, hidden notices, or relocated interactive DOM.
   Existing router, form state, focus/scroll owners and animations stay intact. */
html[data-susu-design='studio'] .susu-console,
html[data-susu-design='studio'] [data-susu-pricing] {
  --susu-workroom-layout-version: workroom-1;
}

/* Compact welcome, full-width shortcut row. display:contents only removes an
   unsemantic copy wrapper; links retain DOM/tab order and accessible names. */
html[data-susu-design='studio'] .susu-console .susu-console-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  padding: 18px 22px;
}
html[data-susu-design='studio'] .susu-console .susu-console-welcome-copy {
  display: contents;
}
html[data-susu-design='studio'] .susu-console .susu-console-welcome-copy > .susu-console-eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
html[data-susu-design='studio'] .susu-console .susu-console-welcome-copy > h3 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: clamp(18px, 1.75vw, 22px);
}
html[data-susu-design='studio'] .susu-console .susu-console-welcome-copy > p:not(.susu-console-eyebrow) {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-susu-design='studio'] .susu-console .susu-console-companion {
  grid-column: 2;
  grid-row: 1 / 4;
}
html[data-susu-design='studio'] .susu-console .susu-console-shortcuts {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 4;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
html[data-susu-design='studio'] .susu-console .susu-console-shortcuts a {
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  justify-content: center;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}
html[data-susu-design='studio'] .susu-console .susu-console-shortcuts a > svg {
  flex-shrink: 0;
}

/* This exact existing summary hierarchy contains the three statistic cells.
   auto-fit responds to CONTENT width, including space left by the sidebar and
   balance panel. Numeric values are not truncated, transformed or rewritten. */
html[data-susu-design='studio'] .susu-console .susu-dashboard-content
  .rounded-2xl.border > .grid > .flex > .grid.grid-cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 10px;
}
html[data-susu-design='studio'] .susu-console .susu-dashboard-content
  .rounded-2xl.border > .grid > .flex > .grid.grid-cols-3 > div {
  min-width: 0;
  padding: 12px;
  border-radius: 15px;
}
html[data-susu-design='studio'] .susu-console .susu-dashboard-content {
  container: susu-workroom / inline-size;
}
/* Avoid stacking two viewport-based fixed columns inside one another. These
   classes identify the existing setup-guide grids, not charts or table bodies. */
html[data-susu-design='studio'] .susu-console .susu-dashboard-content
  [class~='xl:grid-cols-[minmax(0,1fr)_22rem]']:has(ol) {
  grid-template-columns: minmax(0, 1fr);
}
html[data-susu-design='studio'] .susu-console .susu-dashboard-content
  [class~='lg:grid-cols-[minmax(0,1fr)_21rem]'] {
  grid-template-columns: minmax(0, 1fr);
}
@container susu-workroom (min-width: 900px) {
  html[data-susu-design='studio'] .susu-console .susu-dashboard-content
    [class~='lg:grid-cols-[minmax(0,1fr)_21rem]'] {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* Data pages keep their existing fixed vs document scroll contract. Toolbars
   wrap within the content area, rather than squeezing controls off the edge. */
html[data-susu-design='studio'] .susu-console .susu-console-heading {
  gap: 12px;
}
html[data-susu-design='studio'] .susu-console [data-slot='data-table-toolbar'] {
  row-gap: 10px;
}
html[data-susu-design='studio'] .susu-console [data-slot='page-footer'] {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}

/* Catalog: remove the previous stagger, so comparable prices sit on one row.
   Entry remains on the wrapper; pointer tilt remains on the native article. */
html[data-susu-design='studio'] .susu-pricing .susu-model-grid > .susu-model-grid-item:nth-child(n) {
  margin-top: 0;
  min-width: 0;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-hero {
  column-gap: 24px;
  row-gap: 18px;
  padding-bottom: 16px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-art {
  height: 156px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-catalog-intro h1 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.2;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-toolbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-summary {
  min-width: 0;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-controls {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-price-controls {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  gap: 8px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-card-heading {
  min-height: 60px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-description {
  margin-top: 13px;
  margin-bottom: 10px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-tags {
  margin-bottom: 14px;
  gap: 6px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-footer {
  margin-top: 12px;
  gap: 8px;
}
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-details {
  min-height: 44px;
  margin-top: 10px;
}
html[data-susu-design='studio'] :is([data-susu-pricing], .susu-filter-sheet) .susu-filter-options {
  gap: 8px;
}
@media (min-width:1280px) {
  html[data-susu-design='studio'] .susu-pricing .susu-desktop-filters .susu-filter-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-susu-design='studio'] .susu-pricing .susu-desktop-filters .susu-filter-chip {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }
  html[data-susu-design='studio'] .susu-pricing .susu-desktop-filters .susu-filter-count {
    margin-inline-start: auto;
    flex-shrink: 0;
  }
}
@media (max-width:767px) {
  html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  html[data-susu-design='studio'] [data-susu-pricing] .susu-price-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    width: 100%;
  }
  html[data-susu-design='studio'] [data-susu-pricing] .susu-price-controls > [role='group'] {
    min-width: 0;
    width: 100%;
  }
  html[data-susu-design='studio'] [data-susu-pricing] .susu-sort-button {
    justify-content: space-between;
    width: 100%;
  }
  html[data-susu-design='studio'] [data-susu-pricing] .susu-pricing-controls > [role='group']:last-child {
    justify-self: end;
  }
  html[data-susu-design='studio'] .susu-console .susu-console-welcome {
    padding: 16px;
    column-gap: 10px;
  }
  html[data-susu-design='studio'] .susu-console .susu-console-shortcuts a {
    padding: 9px 8px;
    gap: 5px;
    flex-wrap: wrap;
  }
}
@media (max-width:420px) {
  html[data-susu-design='studio'] .susu-console .susu-console-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-susu-design='studio'] .susu-console .susu-console-shortcuts a:last-child {
    grid-column: 1 / -1;
  }
}

/* Explicit focus/press feedback on existing controls, never a second handler.
   Preserve copied/saving/disabled states and leave card pseudo-elements free. */
html[data-susu-design='studio'] .susu-console .susu-console-shortcuts a:focus-visible,
html[data-susu-design='studio'] [data-susu-pricing] .susu-model-details:focus-visible {
  outline: 3px solid var(--ring, #688ab5);
  outline-offset: 3px;
}
@media (prefers-reduced-motion:no-preference) {
  html[data-susu-design='studio'] .susu-console .susu-console-shortcuts a,
  html[data-susu-design='studio'] [data-susu-pricing] .susu-model-details {
    transition-property: background-color, border-color, box-shadow, scale, transform;
    transition-duration: 180ms, 180ms, 220ms, 180ms, 220ms;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
}
@media (pointer:coarse) {
  html[data-susu-design='studio'] body:has(#api-key-form)
    :is([data-slot='command-item'], [data-slot='select-item'], [data-slot='combobox-item']) {
    min-height: 44px;
  }
}

/* Susu key workroom: append-only presentation for the existing Key Drawer.
 * Caller owns the 620px cap, viewport geometry and Popup lifetime.
 * No import is added here; integration/real authenticated acceptance is separate.
 */
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form) {
  --susu-key-layout-version: workroom-1;
  --susu-key-paper: #fffdf9;
  --susu-key-wash: #edf3f9;
  --susu-key-ink: #41455b;
  --susu-key-muted: #686b78;
  --susu-key-line: #dfd9df;
  --susu-key-focus: #496992;
  --susu-key-error: #b42318;
  --susu-key-gutter: 16px;
  background: var(--susu-key-paper);
  color: var(--susu-key-ink);
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form):where(.dark *) {
  --susu-key-paper: #252b33;
  --susu-key-wash: #303b4b;
  --susu-key-ink: #eee9ed;
  --susu-key-muted: #bbb9c7;
  --susu-key-line: #505360;
  --susu-key-focus: #b0cbee;
  --susu-key-error: #ffb4ab;
}

/* Existing console CSS explicitly supplies --sc-* to body portals. Do not
 * assume that the sheet inherits from the authenticated layout's DOM subtree.
 * Unset/invalid tokens fall back to the local light/dark literal palette. */
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form):where(
    body:has(.susu-console) *
  ) {
  background: var(--sc-surface, var(--susu-key-paper));
  color: var(--sc-ink, var(--susu-key-ink));
  --susu-key-panel: var(--sc-surface, var(--susu-key-paper));
  --susu-key-canvas: var(--sc-soft, var(--susu-key-wash));
  --susu-key-text: var(--sc-ink, var(--susu-key-ink));
  --susu-key-secondary: var(--sc-muted, var(--susu-key-muted));
  --susu-key-edge: var(--sc-line, var(--susu-key-line));
  --susu-key-ring: var(--sc-blue, var(--susu-key-focus));
}

/* Only the form scrolls. Chrome stays outside it, in the caller's flex column. */
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > [data-slot='sheet-header'],
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > [data-slot='sheet-footer'] {
  flex-shrink: 0;
  padding-inline: var(--susu-key-gutter);
  background: var(--susu-key-panel, var(--susu-key-paper));
  border-color: var(--susu-key-edge, var(--susu-key-line));
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > [data-slot='sheet-header'] {
  gap: 6px;
  padding-block: 18px;
  padding-inline-end: 68px;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  [data-slot='sheet-title'] {
  color: var(--susu-key-text, var(--susu-key-ink));
  font-size: 20px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  [data-slot='sheet-description'] {
  color: var(--susu-key-secondary, var(--susu-key-muted));
  line-height: 1.6;
  overflow-wrap: anywhere;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > [data-slot='sheet-footer'] {
  gap: 10px;
  padding-top: 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 20px;
  padding: 16px var(--susu-key-gutter) 24px;
  background: var(--susu-key-canvas, var(--susu-key-wash));
  container: susu-key-form / inline-size;
}

/* Real section elements, never the Collapsible Panel or a hidden descendant. */
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  > section,
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  > [data-slot='collapsible']
  > section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  min-width: 0;
  flex-shrink: 0;
  padding: 16px;
  border: 1px solid var(--susu-key-edge, var(--susu-key-line));
  border-radius: 18px;
  background: var(--susu-key-panel, var(--susu-key-paper));
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  > [data-slot='collapsible'] {
  flex-shrink: 0;
  min-width: 0;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  > section
  > *,
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  > [data-slot='collapsible']
  > section
  > * {
  grid-column: 1 / -1;
  min-width: 0;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  [data-slot='form-item'] {
  min-width: 0;
  align-content: start;
  scroll-margin-block: 20px;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  :is(h3, [data-slot='form-label']) {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  :is(p, [data-slot='form-description'], [data-slot='form-message']),
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  button[role='combobox']
  .truncate {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  line-height: 1.6;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  [data-slot='form-description'] {
  color: var(--susu-key-secondary, var(--susu-key-muted));
}

/* Preserve each card's existing selected/unselected paint and actual text. */
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  > section:first-of-type
  > .grid.grid-cols-2:has(> button[type='button']) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  > section:first-of-type
  > .grid.grid-cols-2
  > button[type='button'] {
  padding: 14px 12px;
  border-radius: 14px;
}

/* Give the date/time row its own full line, not half of a cramped 620px sheet.
 * The nested picker retains flex positioning, w-24/sm:w-32 time and clear UI. */
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  [data-slot='form-item']:has(input[type='time'])
  > .grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  [data-slot='form-item']:has(input[type='time'])
  > .grid
  > .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  input[type='time'] {
  flex-shrink: 0;
}

/* Only minimum touch sizes; wrapped labels can grow. No field gets a fixed
 * height, no generic width overrides, and hidden native inputs are excluded. */
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  :is(
    input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
    textarea,
    select
  ),
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  button:not([role='switch']),
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > [data-slot='sheet-footer']
  button,
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > button[data-slot='sheet-close'] {
  min-height: 44px;
  scroll-margin-block: 20px;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  button:not([role='switch']),
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > [data-slot='sheet-footer']
  button,
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > button[data-slot='sheet-close'] {
  min-width: 44px;
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    outline-color 160ms ease,
    box-shadow 220ms ease,
    scale 240ms var(--susu-liquid-ease, ease),
    transform 240ms var(--susu-liquid-ease, ease);
}

/* Existing switch ::after is already its hit area. Enlarge that only, without
 * changing track/thumb geometry, checked translation or generated content. */
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  [role='switch']::after {
  inset-block: -14px;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  [data-slot='form-item']:has([role='switch']) {
  gap: 16px;
  padding-block: 12px;
  border-color: var(--susu-key-edge, var(--susu-key-line));
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  [data-slot='collapsible-trigger'] {
  padding: 4px;
  border-radius: 10px;
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  :where(input, textarea, select, button):focus-visible,
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > [data-slot='sheet-footer']
  button:focus-visible,
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  > button[data-slot='sheet-close']:focus-visible {
  outline: 2px solid var(--susu-key-ring, var(--susu-key-focus));
  outline-offset: 3px;
}

/* Destructive semantics win over cosmetic borders, including error focus. */
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  :is([aria-invalid='true'], [data-error='true']),
html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  [data-slot='form-item']:has([data-error='true'])
  :is(input, textarea, button[role='combobox']) {
  border-color: var(--destructive, var(--susu-key-error));
  outline-color: var(--destructive, var(--susu-key-error));
}

html[data-susu-design='studio']
  body
  [data-susu-surface='sheet']:has(#api-key-form)
  #api-key-form
  :is([data-slot='form-message'], [data-slot='form-label'][data-error='true']) {
  color: var(--destructive, var(--susu-key-error));
  scroll-margin-block: 20px;
}

@media (max-width: 639px) {
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    #api-key-form
    :is(input, textarea, select) {
    font-size: 16px;
  }
}

@media (max-width: 380px) {
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    #api-key-form
    > section:first-of-type
    > .grid.grid-cols-2:has(> button[type='button']) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 400px) {
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    #api-key-form
    [data-slot='form-item']:has(input[type='time'])
    > .grid
    > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Query the available form width, not the whole desktop viewport. Only real
 * name + direct group combobox fields share a row; all other items span it.
 * A missing/conditional group keeps a full-width name in create AND edit. */
@media (min-width: 640px) {
  @container susu-key-form (min-width: 480px) {
    html[data-susu-design='studio']
      body
      [data-susu-surface='sheet']:has(#api-key-form)
      #api-key-form
      > section:first-of-type:has(
        > [data-slot='form-item'] > button[role='combobox']
      ) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 16px;
    }

    html[data-susu-design='studio']
      body
      [data-susu-surface='sheet']:has(#api-key-form)
      #api-key-form
      > section:first-of-type:has(
        > [data-slot='form-item'] > button[role='combobox']
      )
      > [data-slot='form-item']:has(input[name='name']),
    html[data-susu-design='studio']
      body
      [data-susu-surface='sheet']:has(#api-key-form)
      #api-key-form
      > section:first-of-type:has(
        > [data-slot='form-item'] > button[role='combobox']
      )
      > [data-slot='form-item']:has(> button[role='combobox']) {
      grid-column: span 1;
    }
  }
}

/* No Panel display/height/visibility overrides or lifecycle transitions.
 * Base UI owns hidden/closed semantics; finite control transitions retain
 * the existing press/release scale. Reduced motion quiets all feedback. */
@media (prefers-reduced-motion: reduce) {
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form),
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    #api-key-form
    *,
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    #api-key-form
    *::before,
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    #api-key-form
    *::after,
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    > [data-slot='sheet-footer']
    button,
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    > button[data-slot='sheet-close'] {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form) {
    --susu-key-paper: Canvas;
    --susu-key-wash: Canvas;
    --susu-key-ink: CanvasText;
    --susu-key-muted: CanvasText;
    --susu-key-line: CanvasText;
    --susu-key-focus: Highlight;
    --susu-key-error: LinkText;
    --susu-key-panel: Canvas;
    --susu-key-canvas: Canvas;
    --susu-key-text: CanvasText;
    --susu-key-secondary: CanvasText;
    --susu-key-edge: CanvasText;
    --susu-key-ring: Highlight;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    #api-key-form
    :is([aria-invalid='true'], [data-error='true']),
  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    #api-key-form
    [data-slot='form-item']:has([data-error='true'])
    :is(input, textarea, button[role='combobox']) {
    border-color: LinkText;
    outline-color: LinkText;
    border-style: dashed;
  }

  html[data-susu-design='studio']
    body
    [data-susu-surface='sheet']:has(#api-key-form)
    #api-key-form
    :is(
      [data-slot='form-message'],
      [data-slot='form-label'][data-error='true']
    ) {
    color: LinkText;
  }
}