/* SugarCube shared design foundation.
   New pages should use these --sc-* tokens and .sc-* primitives instead of
   inventing page-local values. Existing legacy aliases are mapped in
   light-theme.css while pages are migrated. */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/v5b/space-grotesk-var.woff2') format('woff2'); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/v5b/inter-var.woff2') format('woff2'); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/v5b/jetbrains-mono-var.woff2') format('woff2'); }

:root {
  /* Browser tap overlays must not cover branded controls; focus-visible stays intact. */
  -webkit-tap-highlight-color: transparent;
  color-scheme: dark;

  /* Owner supplied v5b/assets/sc.css is the palette and geometry source. */
  --sc-color-brand-50: rgba(255, 106, 43, .12);
  --sc-color-brand-100: rgba(255, 106, 43, .12);
  --sc-color-brand-200: rgba(255, 106, 43, .25);
  --sc-color-brand-500: #ff6a2b;
  --sc-color-brand-600: #ff6a2b;
  --sc-color-brand-700: #ff9a66;
  --sc-color-brand-800: #ffb547;
  --sc-color-brand-900: #f4e8d6;
  --sc-color-ink: #f4e8d6;
  --sc-color-text: #d6c6b0;
  --sc-color-muted: #a3917d;
  --sc-color-subtle: #988572;
  --sc-color-canvas: #17110d;
  --sc-color-canvas-deep: #110c09;
  --sc-color-bg-2: var(--sc-color-canvas-deep);
  --sc-color-well: #1b140f;
  --sc-color-surface: #251c16;
  --sc-color-surface-muted: #2a2019;
  --sc-color-surface-secondary: #30251d;
  --sc-color-control: #1b140f;
  --sc-color-control-hover: #3a2d23;
  --sc-color-popover: #2a2019;
  --sc-color-selected: rgba(255, 106, 43, .12);
  --sc-color-selected-border: rgba(255, 106, 43, .55);
  --sc-color-brand-hover: #ff7a40;
  --sc-shadow-hairline: inset 0 0 0 1px rgba(255, 232, 206, .07);
  --sc-shadow-control: inset 0 1px 0 rgba(255, 228, 196, .06), 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px rgba(0, 0, 0, .28);
  --sc-shadow-popover: inset 0 1px 0 rgba(255, 228, 196, .08), 0 2px 4px rgba(0, 0, 0, .35), 0 24px 48px -10px rgba(0, 0, 0, .55), 0 60px 100px -30px rgba(0, 0, 0, .6);
  --sc-color-border: rgba(244, 232, 214, .08);
  --sc-color-border-strong: rgba(244, 232, 214, .16);
  --sc-color-info: #86b7ff;
  --sc-color-warning: #f4c169;
  --sc-color-danger: #e5533a;
  --sc-color-danger-ink: #ff8a6a;
  --sc-color-success: #7fc98a;

  --sc-color-on-brand: #1a0f08;
  --sc-color-on-danger: #fff;
  --sc-color-danger-soft: rgba(229,83,58,.1);
  --sc-color-warning-soft: #302619;
  --sc-color-success-soft: rgba(127,201,138,.14);
  --sc-color-overlay: rgba(0, 0, 0, .76);
  --sc-color-focus: #ff6a2b;

  --sc-space-1: 0.25rem;
  --sc-space-2: 0.5rem;
  --sc-space-3: 0.75rem;
  --sc-space-4: 1rem;
  --sc-space-5: 1.25rem;
  --sc-space-6: 1.5rem;
  --sc-space-8: 2rem;
  --sc-space-10: 2.5rem;
  --sc-space-12: 3rem;
  --sc-space-16: 4rem;
  --sc-space-20: 5rem;
  --sc-space-24: 6rem;

  --sc-radius-xs: 0.25rem;
  --sc-radius-sm: 10px;
  --sc-radius-md: 14px;
  --sc-radius-lg: 20px;
  --sc-radius-xl: 26px;
  --sc-radius-pill: 999px;
  --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
  --sc-shadow-md: 0 8px 24px rgba(0, 0, 0, .28);
  --sc-shadow-lg: 0 24px 64px rgba(0, 0, 0, .56), 0 4px 16px rgba(0, 0, 0, .32);

  --sc-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sc-font-display: "Space Grotesk", "Inter", ui-sans-serif, sans-serif;
  --sc-font-hero: var(--sc-font-display);
  --sc-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sc-hero-copy-width: 75rem;
  --sc-hero-lead-width: 66rem;
  --sc-composer-width: 66rem;
  --sc-reading-width: 50rem;
  --sc-content-font-size: 1.125rem;
  --sc-content-small-size: 1.0625rem;
  --sc-content-title-size: clamp(2rem, 3vw, 2.75rem);
  --sc-content-subtitle-size: 2rem;
  --sc-workspace-padding: var(--sc-space-8);
  --sc-hero-top-space: var(--sc-space-8);
  --sc-hero-content-space: var(--sc-space-8);
  --sc-hero-title-size: 2rem;
  --sc-hero-title-leading: 1.16;
  --sc-hero-lead-size: 1rem;
  --sc-hero-lead-leading: 1.8;
  --sc-hero-lead-space: var(--sc-space-4);
  --sc-font-size-sm: .875rem;
  --sc-font-size-md: 1rem;
  --sc-font-size-xl: 1.25rem;
  --sc-leading-tight: 1.08;
  --sc-leading-copy: 1.8;
  --sc-container: 1280px;
  --sc-control-height: 44px;
  --sc-motion-fast: 160ms;
  --sc-motion-base: 220ms;
  --sc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sc-spring: cubic-bezier(.34, 1.4, .5, 1);
}

@media (max-width: 767px) {
  :root {
    --sc-content-font-size: 1rem;
    --sc-content-small-size: 1rem;
    --sc-content-title-size: 1.875rem;
    --sc-content-subtitle-size: 1.625rem;
    --sc-workspace-padding: var(--sc-space-5);
  }
}

@media (min-width: 768px) {
  :root {
    --sc-hero-top-space: var(--sc-space-16);
    --sc-hero-content-space: var(--sc-space-10);
    --sc-hero-title-size: clamp(3rem, 4vw, 3.5rem);
    --sc-hero-title-leading: 1.12;
    --sc-hero-lead-size: var(--sc-content-font-size);
    --sc-hero-lead-space: var(--sc-space-6);
  }
}

.sc-page {
  min-height: 100vh;
  color: var(--sc-color-ink);
  background: var(--sc-color-canvas);
  font-family: var(--sc-font-sans);
}

.sc-container {
  width: min(var(--sc-container), calc(100% - 40px));
  margin-inline: auto;
}

.sc-section { padding-block: clamp(var(--sc-space-16), 8vw, var(--sc-space-24)); }
.sc-section--muted { background: var(--sc-color-surface-muted); }
.sc-stack { display: flex; flex-direction: column; gap: var(--sc-space-6); }
.sc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-space-3); }

.sc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  width: fit-content;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--sc-color-brand-200);
  border-radius: var(--sc-radius-pill);
  color: var(--sc-color-brand-700);
  background: var(--sc-color-brand-50);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sc-title-display,
.sc-title-section {
  margin: 0;
  color: var(--sc-color-ink);
  font-family: var(--sc-font-display);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.sc-title-display { max-width: 20ch; overflow-wrap: anywhere; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: var(--sc-leading-tight); text-wrap: balance; }
.sc-title-section { font-size: var(--sc-content-title-size); line-height: 1.15; overflow-wrap: anywhere; }
.sc-lede { max-width: 64ch; margin: 0; color: var(--sc-color-muted); font-size: clamp(1rem, 2vw, 1.125rem); line-height: var(--sc-leading-copy); }

.sc-card {
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-xl);
  background: var(--sc-color-surface);
  box-shadow: var(--sc-shadow-sm);
}

.sc-card--interactive {
  transition: transform var(--sc-motion-base) var(--sc-ease), border-color var(--sc-motion-base) var(--sc-ease), box-shadow var(--sc-motion-base) var(--sc-ease);
}

.sc-card--interactive:hover { transform: translateY(-2px); border-color: var(--sc-color-brand-200); box-shadow: var(--sc-shadow-md); }

.sc-button {
  min-height: var(--sc-control-height);
  padding: 0.65rem 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  border: 1px solid transparent;
  border-radius: var(--sc-radius-pill);
  font: 600 0.875rem/1.3 var(--sc-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sc-motion-fast) var(--sc-ease), background var(--sc-motion-fast) var(--sc-ease), border-color var(--sc-motion-fast) var(--sc-ease), box-shadow var(--sc-motion-fast) var(--sc-ease);
}

.sc-button:hover:not(:disabled) { transform: translateY(-1px); }
.sc-button:active:not(:disabled) { transform: translateY(0); }
.sc-button:disabled, .sc-button[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; }
.sc-button--primary { color:var(--sc-color-on-brand); background:var(--sc-color-brand-600); box-shadow:0 10px 26px -10px rgba(255,106,43,.6),inset 0 1px 0 rgba(255,220,190,.35); }
.sc-button--primary:hover:not(:disabled) { background: var(--sc-color-brand-hover); }
.sc-button--coral { color: var(--sc-color-canvas); background: var(--sc-color-brand-500); box-shadow: var(--sc-shadow-control); }
.sc-button--coral:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--sc-color-brand-700); }
.sc-button--coral:active:not(:disabled):not([aria-disabled="true"]) { background: var(--sc-color-brand-500); transform: translateY(1px); }
.sc-button--coral:focus-visible { outline: 2px solid var(--sc-color-focus); outline-offset: 3px; }
.sc-button--coral[aria-busy="true"] { cursor: wait; }
.sc-button--secondary { color: var(--sc-color-text); background: var(--sc-color-control); border-color: var(--sc-color-border); box-shadow: var(--sc-shadow-control); }
.sc-button--secondary:hover:not(:disabled) { color: var(--sc-color-ink); background: var(--sc-color-control-hover); border-color: var(--sc-color-border-strong); }
.sc-button--quiet { color: var(--sc-color-muted); background: transparent; }
.sc-button--danger { color: var(--sc-color-on-danger); background: var(--sc-color-danger); }

.sc-field { display: grid; gap: var(--sc-space-2); }
.sc-label { color: var(--sc-color-text); font-size: 0.8125rem; font-weight: 700; }
.sc-help { color: var(--sc-color-subtle); font-size: 0.75rem; line-height: 1.5; }
.sc-input {
  width: 100%;
  min-height: var(--sc-control-height);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  outline: 0;
  color: var(--sc-color-ink);
  background: var(--sc-color-well);
  font: 400 0.875rem/1.5 var(--sc-font-sans);
  transition: border-color var(--sc-motion-fast) var(--sc-ease), box-shadow var(--sc-motion-fast) var(--sc-ease);
}

:is(input, textarea).sc-input:focus { border-color:var(--sc-color-selected-border); outline:none; box-shadow:0 0 0 4px var(--sc-color-selected); }
.sc-input[aria-invalid="true"] { border-color: var(--sc-color-danger); }

.sc-alert {
  padding: var(--sc-space-3) var(--sc-space-4);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  color: var(--sc-color-text);
  background: var(--sc-color-surface-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.sc-alert--success { color: var(--sc-color-success); background: var(--sc-color-success-soft); border-color: var(--sc-color-success); }
.sc-alert--danger { color: var(--sc-color-danger); background: var(--sc-color-danger-soft); border-color: var(--sc-color-danger); }
.sc-alert--warning { color: var(--sc-color-warning); background: var(--sc-color-warning-soft); border-color: var(--sc-color-warning); }

/* Native FAQ disclosure: content-sized, wrapping, and never clipped.
   Pages own the surrounding layout; this primitive owns disclosure geometry. */
.sc-faq-list { display: grid; min-width: 0; gap: 0; }
details.sc-faq-item { min-width: 0; height: auto; max-height: none; margin: 0; padding: 0; overflow: visible; border: 0; border-bottom: 1px solid var(--sc-color-border); border-radius: 0; background: transparent; box-shadow: none; }
.sc-faq-item > summary { display:flex; align-items:center; gap:14px; min-width:0; min-height:var(--sc-control-height); height:auto; max-height:none; margin:0; padding:20px 4px; color:var(--sc-color-ink); cursor:pointer; font:600 var(--sc-content-font-size)/1.55 var(--sc-font-sans); white-space:normal; overflow-wrap:anywhere; list-style:none; }
.sc-faq-item > summary > * { min-width: 0; }
.sc-faq-item > summary::-webkit-details-marker { display: none; }
.sc-faq-item > summary:focus-visible { outline: 2px solid var(--sc-color-brand-700); outline-offset: 2px; }
.sc-faq-item > summary::before { content:none; }
.sc-faq-item > summary::after { content:'+'; display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; margin-inline-start:auto; border-radius:50%; color:var(--sc-color-muted); background:var(--sc-color-surface-muted); box-shadow:var(--sc-shadow-hairline); font:400 21px/1 var(--sc-font-sans); transition:background .2s,color .2s; }
/* Keep the supplied circular close glyph inside its 28px layout box. Rotating
   the entire circle creates a 40px scrollable box in Chromium. */
.sc-faq-item[open] > summary::after { content:'×'; color:var(--sc-color-brand-500); background:var(--sc-color-selected); }
.sc-faq-item > :not(summary) { min-width:0; height:auto; max-height:none; margin:0; padding-block:0 22px; padding-inline:4px 48px; overflow:visible; color:var(--sc-color-muted); font-size:var(--sc-content-small-size); line-height:var(--sc-leading-copy); overflow-wrap:anywhere; }
.sc-faq-item > :not(summary) p { margin: 0; }
@media (max-width: 767px) { .sc-faq-item > summary { font-size: 1.0625rem; } }
@media (prefers-reduced-motion: reduce) { .sc-faq-item > summary::after { transition: none; } }

.sc-skeleton {
  overflow: hidden;
  border-radius: var(--sc-radius-sm);
  background: linear-gradient(90deg,#2a2019 0%,#382b21 45%,#2a2019 90%);
  background-size: 220% 100%;
  animation: sc-skeleton 1.5s linear infinite;
}

/* Controllers mark only dependent fields, preserving the real responsive box.
   Static labels, text inputs and recovery/close actions remain usable. */
/* Plain text and wrapper fields have no control radius to inherit. Give those
   hosts a low-specificity token so the visible overlay follows their shape;
   existing control, pill, circle and per-corner radii still take precedence. */
:where([data-loading-state="loading"] .sc-loading-field, .sc-loading-field[data-loading-state="loading"]) { border-radius: var(--sc-radius-xs); }
:where([data-loading-state="loading"] .sc-loading-field, .sc-loading-field[data-loading-state="loading"]):where(.sc-field, .model-workspace__control, .model-picker__fixed-value) { border-radius: var(--sc-radius-md); }
:where(.sc-media-shell[data-sc-media-state="loading"]) { border-radius: var(--sc-radius-lg); }
[data-loading-state="loading"] .sc-loading-field,
.sc-loading-field[data-loading-state="loading"] { position: relative; color: transparent !important; pointer-events: none; user-select: none; min-inline-size: 5ch; min-block-size: 1em; }
[data-loading-state="loading"] :is(span, small, strong).sc-loading-field,
:is(span, small, strong).sc-loading-field[data-loading-state="loading"] { display: inline-block; }
[data-loading-state="loading"] .sc-loading-field > *,
.sc-loading-field[data-loading-state="loading"] > * { visibility: hidden !important; }
[data-loading-state="loading"] .sc-loading-field::after,
.sc-loading-field[data-loading-state="loading"]::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background:linear-gradient(90deg,#2a2019 0%,#382b21 45%,#2a2019 90%); background-size:220% 100%; animation:sc-skeleton 1.5s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  [data-loading-state="loading"] .sc-loading-field::after,
  .sc-loading-field[data-loading-state="loading"]::after { animation: none; }
}
@media (forced-colors: active) {
  .sc-skeleton,
  [data-loading-state="loading"] .sc-loading-field::after,
  .sc-loading-field[data-loading-state="loading"]::after { background: Canvas; border: 1px solid GrayText; animation: none; }
}

.sc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[data-sc-entry-hidden] { display: none !important; }

@keyframes sc-skeleton { from { background-position:100% 0; } to { background-position:-100% 0; } }

@media (max-width: 640px) {
  .sc-container { width: min(var(--sc-container), calc(100% - 32px)); }
  .sc-section { padding-block: var(--sc-space-16); }
  .sc-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-card--interactive,
  .sc-button,
  .sc-input { transition: none; }
  .sc-skeleton { animation: none; }
}

/* The approved playful wordmark is shared by every brand lockup. */
.sc-footer-wordmark { display:block; width:152px; height:38px; object-fit:contain; filter:brightness(0) invert(1); }

/* Shared model and parameter chooser: used by all form owners. */
/* Shared model identity for dropdowns, selected values, and mobile drawers. */
.sc-model-identity { display: inline-flex; align-items: center; gap: var(--sc-space-2); min-width: 0; text-align: start; }
.sc-model-logo { display: block; width: var(--sc-space-6); height: var(--sc-space-6); flex: 0 0 var(--sc-space-6); object-fit: contain; padding: 2px; border-radius: var(--sc-radius-sm); background: var(--sc-color-surface); }
.sc-model-name { min-width: 0; overflow-wrap: anywhere; }
.model-picker { position: relative; min-width: 0; }
.model-picker [hidden], .model-picker__backdrop [hidden] { display: none !important; }
/* Enhanced selects must stay out of layout despite consumer control styles. */
select.model-picker__native {
  position: absolute;
  inset: 0 auto auto 0;
  box-sizing: border-box;
  width: 1px;
  min-width: 0;
  max-width: 1px;
  height: 1px;
  min-height: 0;
  max-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
select.model-picker__native[data-model-picker-presentation="native"] {
  position: static;
  inset: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: var(--sc-control-height);
  max-height: none;
  padding-block: 0; padding-inline: var(--sc-space-3) var(--sc-space-8);
  border: 1px solid var(--sc-color-border-strong);
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}
.model-picker[data-model-picker-presentation="native"] > .model-picker__trigger,
.model-picker--select[data-model-picker-presentation="native"] { display: none; }
.model-picker__trigger {
  width: 100%; min-width: 0; min-height: var(--sc-control-height); padding: var(--sc-space-2) var(--sc-space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-3);
  border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-md);
  color: var(--sc-color-ink); background: var(--sc-color-control); font: 500 0.875rem/1.4 var(--sc-font-sans); text-align: start; cursor: pointer;
  transition: border-color var(--sc-motion-fast) var(--sc-ease);
}
[data-model-picker-value] { min-width: 0; overflow-wrap: anywhere; }
.model-picker__trigger:hover:not(:disabled) { border-color: var(--sc-color-border-strong); }
.model-picker__trigger:focus-visible,
.model-picker__close:focus-visible,
.model-picker__group-toggle:focus-visible,
.model-picker__option:focus-visible { outline: 2px solid var(--sc-color-focus); outline-offset: 2px; }
.model-picker__trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.model-picker__chevron { flex: 0 0 auto; color: var(--sc-color-muted); font-size: 1.125rem; line-height: 1; transition: transform var(--sc-motion-fast) var(--sc-ease); }
.model-picker__trigger[aria-expanded="true"] .model-picker__chevron { transform: rotate(180deg); }
body:has(> .model-picker__backdrop:not([data-presentation="dropdown"])) { overflow: hidden; }
.model-picker__backdrop {
  position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center;
  padding: var(--sc-space-4); box-sizing: border-box; background: var(--sc-color-overlay); backdrop-filter: blur(6px);
  overscroll-behavior: contain;
}
.model-picker__dialog {
  box-sizing: border-box; width: min(36rem, 100%); min-width: 0;
  max-height: calc(100dvh - var(--sc-space-8)); padding: var(--sc-space-5);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); gap: var(--sc-space-3);
  overflow: hidden; border: 1px solid var(--sc-color-border-strong); border-radius: var(--sc-radius-xl);
  color: var(--sc-color-text); background: var(--sc-color-popover); box-shadow: var(--sc-shadow-popover);
  font-family: var(--sc-font-sans); text-align: start;
}
.model-picker__title { align-self: center; margin: 0; overflow-wrap: anywhere; color: var(--sc-color-ink); font-size: 1.125rem; font-weight: 650; letter-spacing: -.025em; }
.model-picker__close { min-height: var(--sc-control-height); padding: var(--sc-space-2) var(--sc-space-3); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-md); color: var(--sc-color-muted); background: transparent; font: 600 0.75rem/1.4 var(--sc-font-sans); cursor: pointer; }
.model-picker__close:hover { color: var(--sc-color-ink); background: var(--sc-color-surface-muted); }
.model-picker__list { grid-column: 1 / -1; min-height: 0; min-width: 0; display: grid; align-content: start; gap: var(--sc-space-1); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--sc-space-1); }
.model-picker__group { min-width: 0; }
.model-picker__group-toggle { width: 100%; min-height: var(--sc-control-height); padding: var(--sc-space-2) var(--sc-space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-3); border: 0; border-radius: var(--sc-radius-sm); color: var(--sc-color-muted); background: transparent; font: 600 0.75rem/1.4 var(--sc-font-sans); cursor: pointer; text-align: start; overflow-wrap: anywhere; }
.model-picker__group-toggle::after { content: ""; flex: 0 0 auto; width: var(--sc-space-2); height: var(--sc-space-2); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--sc-motion-fast) var(--sc-ease); }
.model-picker__group-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.model-picker__options { display: grid; gap: var(--sc-space-1); }
.model-picker__option { width: 100%; min-width: 0; min-height: var(--sc-control-height); padding: var(--sc-space-2) var(--sc-space-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sc-space-3); border: 1px solid transparent; border-radius: var(--sc-radius-sm); color: var(--sc-color-text); background: transparent; font: 500 0.875rem/1.4 var(--sc-font-sans); cursor: pointer; text-align: start; overflow-wrap: anywhere; }
.model-picker__option:hover:not(:disabled), .model-picker__group-toggle:hover { background: var(--sc-color-control-hover); color: var(--sc-color-ink); }
.model-picker__option[aria-pressed="true"] { color: var(--sc-color-brand-900); background: var(--sc-color-selected); border-color: var(--sc-color-selected-border); }
.model-picker__option[aria-pressed="true"]::after { content: "✓"; color: var(--sc-color-brand-700); }
.model-picker__option:disabled { opacity: 0.5; cursor: not-allowed; }
.model-picker--select { width: 100%; }
.model-picker--select .model-picker__trigger { font-size: 0.75rem; font-weight: 500; }
.model-picker__backdrop--select .model-picker__dialog { width: min(26rem, 100%); }
.model-picker__backdrop--select .model-picker__list { gap: 0; }
.model-picker__backdrop--select .model-picker__options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-space-2); }
.model-picker__backdrop--select .model-picker__option { min-height: 3.5rem; padding: var(--sc-space-3); border-color: var(--sc-color-border-strong); background: var(--sc-color-control); }
.model-picker__backdrop--select .model-picker__option[aria-pressed="true"] { border-color: var(--sc-color-selected-border); background: var(--sc-color-selected); }
.model-picker__option::after { content: ""; width: var(--sc-space-4); text-align: center; }
.model-picker__group + .model-picker__group { padding-top: var(--sc-space-2); border-top: 1px solid var(--sc-color-border); }
.model-picker__trigger[aria-expanded="true"] { border-color: var(--sc-color-selected-border); background: var(--sc-color-selected); }
.model-picker__trigger, .model-picker__option, .model-picker__close { transition: background var(--sc-motion-fast) var(--sc-ease), border-color var(--sc-motion-fast) var(--sc-ease); }
.model-picker__dialog { animation: sc-chooser-in var(--sc-motion-fast) var(--sc-ease); }
@keyframes sc-chooser-in { from { opacity: 0; transform: translateY(var(--sc-space-2)); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .model-picker__dialog { animation: none; } .model-picker__trigger, .model-picker__chevron, .model-picker__group-toggle::after, .model-picker__option, .model-picker__close { transition: none; } }
@media (max-width: 640px) {
  .model-picker__backdrop { padding: 0; align-items: end; }
  .model-picker__dialog { width: 100%; max-height: 85dvh; border-radius: var(--sc-radius-xl) var(--sc-radius-xl) 0 0; padding-bottom: max(var(--sc-space-4), env(safe-area-inset-bottom)); }
  .model-picker__backdrop--select .model-picker__dialog { width: 100%; }
}

/* Desktop selects are anchored lists; mobile keeps the modal bottom sheet. */
.model-picker__backdrop[data-presentation="dropdown"] {
  display: block; padding: 0; background: transparent; backdrop-filter: none;
  pointer-events: none;
}
.model-picker__backdrop[data-presentation="dropdown"] .model-picker__dialog {
  position: absolute; left: var(--sc-picker-left); top: var(--sc-picker-top);
  width: var(--sc-picker-width); max-height: var(--sc-picker-max-height);
  padding: var(--sc-space-1); gap: 0; border-radius: var(--sc-radius-md);
  grid-template-rows: minmax(0, 1fr); pointer-events: auto;
  animation: none;
}
.model-picker__backdrop[data-presentation="dropdown"][data-direction="up"] .model-picker__dialog { transform: translateY(-100%); }
.model-picker__backdrop[data-presentation="dropdown"] .model-picker__title,
.model-picker__backdrop[data-presentation="dropdown"] .model-picker__close { display: none; }
.model-picker__backdrop[data-presentation="dropdown"] .model-picker__options { grid-template-columns: minmax(0, 1fr); gap: var(--sc-space-1); }
.model-picker__backdrop[data-presentation="dropdown"] .model-picker__option { min-height: var(--sc-control-height); padding: var(--sc-space-2) var(--sc-space-3); border-color: transparent; background: transparent; }
.model-picker__backdrop[data-presentation="dropdown"] .model-picker__option:hover:not(:disabled) { background: var(--sc-color-control-hover); }
.model-picker__backdrop[data-presentation="dropdown"] .model-picker__option[aria-pressed="true"] { background: var(--sc-color-selected); }

/* Creator model guidance uses public capabilities and the standard catalog quote. */
.model-picker__backdrop--guidance .model-picker__options { grid-template-columns: minmax(0, 1fr); padding-inline-start: 0; }
.model-picker__backdrop--guidance .model-picker__option--detailed { padding: var(--sc-space-3); grid-template-columns: var(--sc-space-4) minmax(0, 1fr); gap: var(--sc-space-2) var(--sc-space-3); align-items: start; }
.model-picker__option--detailed > .sc-model-identity { grid-column: 2; grid-row: 1; }
.model-picker__option--detailed::after { grid-column: 1; grid-row: 1; align-self: center; box-sizing: border-box; height: var(--sc-space-4); border: 1px solid var(--sc-color-border-strong); border-radius: var(--sc-radius-pill); font-size: var(--sc-space-3); line-height: 1; }
.model-picker__option--detailed[aria-pressed="true"]::after { border-color: var(--sc-color-brand-700); background: var(--sc-color-brand-700); color: var(--sc-color-canvas); }
.model-picker__details { grid-column: 2; display: grid; gap: var(--sc-space-2); min-width: 0; }
.model-picker__generation-time { color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); line-height: 1.5; font-weight: 400; }
.model-picker__specs { display: flex; flex-wrap: wrap; gap: var(--sc-space-1) var(--sc-space-2); color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); line-height: 1.5; }
.model-picker__specs > span { padding: var(--sc-space-1) var(--sc-space-2); border-radius: var(--sc-radius-sm); background: var(--sc-color-control); }
.model-picker__specs > .model-picker__price { color: var(--sc-color-brand-700); background: transparent; padding-inline: 0; }

/* Control vocabulary. Legacy class aliases share these primitives so geometry
   remains with the owning component while surfaces and states stay consistent. */
:is(.sc-input, .model-workspace__select, .auth-field input) {
  border-radius: var(--sc-radius-md);
  box-shadow: var(--sc-shadow-control);
}
:is(.sc-input, .model-workspace__select):disabled { opacity: .5; cursor: not-allowed; }
:is(.sc-input, .model-workspace__select)::placeholder { color: var(--sc-color-subtle); }
:where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--sc-color-brand-600); }
:where(input[type="range"]) { cursor: pointer; }

/* Floating surfaces sit one tone above the controls beneath them. */
.home-chat__menu,
.home-chat__specification-popover,
.footer .lang-switcher__menu {
  border: 1px solid var(--sc-color-border-strong);
  border-radius: var(--sc-radius-lg);
  color: var(--sc-color-text);
  background: var(--sc-color-popover);
  box-shadow: var(--sc-shadow-popover);
}
.home-chat__menu { gap: var(--sc-space-1); padding: var(--sc-space-2); }
.home-chat__menu--models { min-width: min(18rem, calc(100vw - var(--sc-space-8))); }
.home-chat__menu-item {
  min-width: 0;
  padding-block: var(--sc-space-3);
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.home-chat__menu-item::after { content: ""; margin-left: auto; flex: 0 0 var(--sc-space-4); }
.home-chat__menu-item[aria-checked="true"]::after { content: "✓"; color: var(--sc-color-brand-700); }
.home-chat__model-group-toggle {
  min-height: var(--sc-control-height);
  background: transparent;
  color: var(--sc-color-muted);
  font-weight: 600;
  letter-spacing: .02em;
}
.home-chat__model-group-toggle::after { color: var(--sc-color-muted); border-width: 1.5px; }
.home-chat__model-group-toggle[aria-expanded="true"] { color: var(--sc-color-text); }
.home-chat__menu-item:hover:not(:disabled),
.footer .lang-switcher__item:hover { color: var(--sc-color-ink); background: var(--sc-color-control-hover); }
.home-chat__menu-item[aria-checked="true"],
.footer .lang-switcher__item[aria-selected="true"] { color: var(--sc-color-brand-900); background: var(--sc-color-selected); }

/* Parameter tiles use the same selected treatment in Studio and landing pages. */
.home-chat__specification-section h2 { color: var(--sc-color-muted); font-weight: 600; font-size: .75rem; }
.home-chat__specification-option {
  background: var(--sc-color-control);
  border-color: var(--sc-color-border-strong);
  font-weight: 500;
  line-height: 1.35;
}
.home-chat__specification-option:hover { transform: none; color: var(--sc-color-ink); border-color: var(--sc-color-subtle); background: var(--sc-color-control-hover); }
.home-chat__specification-option[aria-pressed="true"] { color: var(--sc-color-brand-900); border-color: var(--sc-color-selected-border); background: var(--sc-color-selected); box-shadow: var(--sc-shadow-control); }
.home-chat__ratio-icon { border-width: 1.5px; }
.home-chat__switch::after { background: var(--sc-color-ink); }
.home-chat__switch-row strong { font-weight: 600; }
.home-chat__switch-row small { font-weight: 400; }

:is(.home-chat__menu-button, .model-workspace__reference-button, .video-workspace__upload-button, .model-workspace__starter, .home-chat__chip, .footer .lang-switcher__button) {
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-md);
  color: var(--sc-color-text);
  background: var(--sc-color-control);
  box-shadow: var(--sc-shadow-control);
  font-weight: 500;
}
:is(.home-chat__menu-button, .model-workspace__reference-button, .video-workspace__upload-button, .model-workspace__starter, .footer .lang-switcher__button):hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--sc-color-ink);
  border-color: var(--sc-color-border-strong);
  background: var(--sc-color-control-hover);
}
.home-chat__menu-button[aria-expanded="true"],
.footer .lang-switcher__button[aria-expanded="true"] { color: var(--sc-color-brand-900); background: var(--sc-color-selected); border-color: var(--sc-color-selected-border); }
.home-chat__prompt-action { font-weight: 600; }
.model-workspace__toolbar { gap: var(--sc-space-3); }
.model-workspace__prompt { border-radius: var(--sc-radius-lg); }

/* Tabs and upload zones keep their layout and behavior, and share state colors. */
:is(.omni-mode-picker__option, .mode-tab, .pricing-switch__button, .pricing-compare__button) { border-radius: var(--sc-radius-md); font-weight: 600; }
:is(.omni-mode-picker__option.is-active, .mode-tab.active) { color: var(--sc-color-brand-900); border-color: var(--sc-color-selected-border); background: var(--sc-color-selected); box-shadow: var(--sc-shadow-control); }
:is(.local-media-tool__dropzone, .omni-dropzone) { border-radius: var(--sc-radius-lg); border-color: var(--sc-color-border-strong); background: var(--sc-color-control); }

/* Dialogs use the same elevation and control shapes without changing media. */
.auth-modal-box,
.purchase-modal__dialog { border-color: var(--sc-color-border-strong); border-radius: var(--sc-radius-xl); box-shadow: var(--sc-shadow-popover); }
:is(.auth-modal-close, .purchase-modal__close, .sc-image-viewer__toolbar button) { border-radius: var(--sc-radius-md); background: var(--sc-color-control); border-color: var(--sc-color-border-strong); }
:is(.auth-submit-btn, .auth-google-btn) { border-radius: var(--sc-radius-md); font-weight: 600; }
.auth-submit-btn { box-shadow: var(--sc-shadow-control); }
.auth-submit-btn:hover:not(:disabled) { transform: none; box-shadow: var(--sc-shadow-sm); filter: none; background: var(--sc-color-brand-hover); }
.auth-google-btn:hover:not(:disabled) { transform: none; background: var(--sc-color-control-hover); box-shadow: none; }

@media (max-width: 640px) {
  .model-picker__dialog { padding: var(--sc-space-4); padding-bottom: max(var(--sc-space-5), env(safe-area-inset-bottom)); }
  .model-picker__backdrop[data-presentation="sheet"] .model-picker__dialog::before { content: ""; grid-column: 1 / -1; justify-self: center; width: var(--sc-space-8); height: var(--sc-space-1); border-radius: var(--sc-radius-pill); background: var(--sc-color-border-strong); }
  .model-picker__dialog { grid-template-rows: auto auto minmax(0, 1fr); }
}

/* Ratio previews make the shape readable before opening a generation. */
.model-picker__ratio-value { display: inline-flex; align-items: center; gap: var(--sc-space-2); }
.model-picker__ratio-value::before { content: ""; display: inline-block; flex-shrink: 0; width: var(--sc-choice-width, 1em); height: var(--sc-choice-height, 1em); border: 1.5px solid currentColor; border-radius: var(--sc-space-1); }
.model-picker__backdrop--select .model-picker__option[data-model-picker-model*=":"] { grid-template-columns: var(--sc-space-5) minmax(0, 1fr) auto; }
.model-picker__backdrop--select .model-picker__option[data-model-picker-model*=":"]::before { content: ""; justify-self: center; width: var(--sc-space-4); aspect-ratio: var(--sc-choice-ratio, 1); max-height: var(--sc-space-6); border: 1.5px solid currentColor; border-radius: var(--sc-space-1); }
.model-picker__option[data-model-picker-model="16:9"] { --sc-choice-ratio: 16 / 9; }
.model-picker__option[data-model-picker-model="9:16"] { --sc-choice-ratio: 9 / 16; }
.model-picker__option[data-model-picker-model="4:3"] { --sc-choice-ratio: 4 / 3; }
.model-picker__option[data-model-picker-model="3:4"] { --sc-choice-ratio: 3 / 4; }
.model-picker__option[data-model-picker-model="3:2"] { --sc-choice-ratio: 3 / 2; }
.model-picker__option[data-model-picker-model="2:3"] { --sc-choice-ratio: 2 / 3; }
.model-picker__option[data-model-picker-model="21:9"] { --sc-choice-ratio: 21 / 9; }

.pricing-switch { border-radius: var(--sc-radius-pill); }
.pricing-switch__button { min-height: var(--sc-control-height); }
.pricing-switch__button[aria-selected="true"], .pricing-switch__button[aria-selected="true"]:hover { color: var(--sc-color-brand-800); background: var(--sc-color-brand-100); box-shadow: none; }
:is(.account-main, .success-main) .billing-button { border-radius: var(--sc-radius-md); color: var(--sc-color-text); background: var(--sc-color-control); font: 600 .875rem/1.3 var(--sc-font-sans); box-shadow: var(--sc-shadow-control); }
:is(.account-main, .success-main) .billing-button:hover { transform: none; border-color: var(--sc-color-border-strong); background: var(--sc-color-control-hover); }
:is(.account-main, .success-main) .billing-button.primary { color: var(--sc-color-on-brand); border-color: transparent; background: var(--sc-color-brand-600); box-shadow: var(--sc-shadow-control); }
:is(.account-main, .success-main) .billing-button.primary:hover { background: var(--sc-color-brand-hover); }
.sc-toast { background: var(--sc-color-popover); border-color: var(--sc-color-border-strong); font-weight: 500; }

/* Fixed icon boxes keep every chooser chevron centred while rotating. */
:root { --sc-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.model-picker__trigger .model-picker__chevron,
sugarcube-header .sc-caret,
sugarcube-header .gh-chevron,
sugarcube-header .gh-mobile-chevron,
.footer .lang-switcher__button .lang-switcher__caret,
.home-chat--responsive #homeChatModelControl .home-chat__menu-button::after,
.home-chat--responsive .home-chat__menu-button::after,
.home-chat--responsive .home-chat__mobile-mode-trigger::after {
  content: ""; display: block; box-sizing: border-box; width: 1rem; height: 1rem;
  flex: 0 0 1rem; align-self: center; margin: 0; padding: 0; border: 0;
  color: var(--sc-color-muted); font-size: 0; line-height: 0;
  background: currentColor; mask: var(--sc-chevron-mask) center / contain no-repeat;
  -webkit-mask: var(--sc-chevron-mask) center / contain no-repeat;
  transform: rotate(0deg); transform-origin: 50% 50%;
  transition: transform var(--sc-motion-fast) var(--sc-ease);
}
/* Menu controls share ::after with their ready chevron. While loading, the
   placeholder must fill the control instead of inheriting the 1rem SVG mask. */
.home-chat--responsive[data-loading-state="loading"] #homeChatModelControl .sc-loading-field::after,
.home-chat--responsive[data-loading-state="loading"] .home-chat__menu-button.sc-loading-field::after {
  width: 100%; height: 100%; align-self: stretch; mask: none; -webkit-mask: none; transform: none;
  background: linear-gradient(90deg, var(--sc-color-surface-muted) 25%, var(--sc-color-border) 45%, var(--sc-color-surface-muted) 65%);
  background-size: 220% 100%;
}
@media (forced-colors: active) {
  .home-chat--responsive[data-loading-state="loading"] #homeChatModelControl .sc-loading-field::after,
  .home-chat--responsive[data-loading-state="loading"] .home-chat__menu-button.sc-loading-field::after { background: Canvas; border: 1px solid GrayText; }
}
.model-picker__trigger[aria-expanded="true"] .model-picker__chevron,
sugarcube-header .sc-nav-trigger[aria-expanded="true"] .sc-caret,
sugarcube-header .gh-user-trigger[aria-expanded="true"] .gh-chevron,
sugarcube-header .gh-mobile-trigger[aria-expanded="true"] .gh-mobile-chevron,
.footer .lang-switcher__button[aria-expanded="true"] .lang-switcher__caret,
.home-chat--responsive #homeChatModelControl .home-chat__menu-button[aria-expanded="true"]::after,
.home-chat--responsive .home-chat__menu-button[aria-expanded="true"]::after,
.home-chat--responsive .home-chat__mobile-mode-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .model-picker__trigger .model-picker__chevron, sugarcube-header .sc-caret,
  sugarcube-header .gh-chevron, sugarcube-header .gh-mobile-chevron,
  .footer .lang-switcher__button .lang-switcher__caret,
  .home-chat--responsive #homeChatModelControl .home-chat__menu-button::after,
  .home-chat--responsive .home-chat__menu-button::after,
  .home-chat--responsive .home-chat__mobile-mode-trigger::after { transition: none; }
}

/* Mobile summaries preserve the desktop label and the underlying settings. */
.sc-parameter-summary { display:none; }
@media(max-width:767px) {
  .sc-parameter-summary { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); width:100%; min-width:0; gap:var(--sc-space-2); }
  .sc-parameter-summary__item { display:flex; align-items:center; justify-content:center; gap:var(--sc-space-2); min-width:0; font-size:var(--sc-font-size-sm); line-height:1.4; }
  .sc-parameter-summary__item > span { min-width:0; overflow-wrap:anywhere; }
  .sc-parameter-summary__icon { display:block; width:1.125rem; height:1.125rem; flex:0 0 1.125rem; }
  .home-specifications__trigger > .home-specifications__desktop-summary,
  .home-specifications__trigger > .model-picker__chevron { display:none; }
  .home-specifications__trigger { width:100%; min-height:3rem; padding:var(--sc-space-2) var(--sc-space-3); }
}

/* Creation settings share one scrollable row; actions remain reachable beside
   it on desktop and below it on narrow screens. */
.sc-parameter-row[data-parameter-row] {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sc-space-2);
  min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden;
  padding: var(--sc-space-1); scroll-padding-inline: var(--sc-space-4);
  overscroll-behavior-x: contain; scrollbar-width: thin;
  scrollbar-color: var(--sc-color-border-strong) transparent;
}
.sc-parameter-row[data-parameter-row] > :not([hidden]) { flex: 0 0 auto; }
.sc-parameter-row[data-parameter-row] > [hidden] { display: none; }
.sc-parameter-row[data-scroll-edges="right"] { mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--sc-space-6)), transparent 100%); }
.sc-parameter-row[data-scroll-edges="left"] { mask-image: linear-gradient(to right, transparent 0, #000 var(--sc-space-6), #000 100%); }
.sc-parameter-row[data-scroll-edges="both"] { mask-image: linear-gradient(to right, transparent 0, #000 var(--sc-space-6), #000 calc(100% - var(--sc-space-6)), transparent 100%); }
.model-workspace .model-workspace__toolbar { display: flex; flex-wrap: wrap; }
.model-workspace__toolbar > .sc-parameter-row { flex: 1 1 auto; width: 0; }
.model-workspace__toolbar .sc-parameter-row .model-workspace__model-field { width: auto; max-width: none; margin: 0; }
.model-workspace__toolbar .sc-parameter-row .model-picker { width: auto; }
.model-workspace__toolbar .sc-parameter-row .model-picker__trigger { width: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .model-workspace__toolbar > .sc-parameter-row { flex-basis: 100%; width: 100%; }
}

.model-picker__group-toggle::after,
.home-chat__model-group-toggle::after {
  content: ""; width: 1rem; height: 1rem; flex: 0 0 1rem; border: 0;
  background: currentColor; mask: var(--sc-chevron-mask) center / contain no-repeat;
  -webkit-mask: var(--sc-chevron-mask) center / contain no-repeat;
  transform: rotate(-90deg); transform-origin: center;
}
.model-picker__group-toggle[aria-expanded="true"]::after,
.home-chat__model-group-toggle[aria-expanded="true"]::after { transform: rotate(0deg); }

/* Portrait import cards make reference inputs easier to discover and target. */
:root { --sc-import-card-width: 4.5rem; }
.model-workspace .model-workspace__reference-button,
.home-chat.home-chat--responsive .home-chat__attach {
  width: var(--sc-import-card-width); min-width: var(--sc-import-card-width);
  max-width: var(--sc-import-card-width); height: auto; min-height: 0;
  aspect-ratio: 3 / 4; flex: 0 0 var(--sc-import-card-width);
  padding: 0; display: grid; place-items: center;
  border: 1px dashed var(--sc-color-border-strong);
  border-radius: var(--sc-radius-md); background: var(--sc-color-control);
  font-size: 1.5rem;
}
.model-workspace .model-workspace__reference-button:hover:not(:disabled):not([aria-disabled="true"]),
.home-chat.home-chat--responsive .home-chat__attach:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--sc-color-brand-700); background: var(--sc-color-control-hover);
}
@media (max-width: 640px) { :root { --sc-import-card-width: 3.75rem; } }

/* Model families lead the hierarchy; individual variants remain secondary. */
.model-picker__group-toggle, .home-chat__model-group-toggle {
  font-size: .9375rem; font-weight: 700; line-height: 1.4;
  letter-spacing: 0; color: var(--sc-color-ink);
}
.model-picker__option, .home-chat__model-options .home-chat__menu-item {
  font-size: .875rem; font-weight: 500; line-height: 1.45;
}
.model-picker__options, .home-chat__model-options { padding-inline-start: var(--sc-space-2); }

/* Quiet, overlay-like scrollbars: reveal only during scrolling or keyboard use. */
html, body, body * { scrollbar-width: thin !important; scrollbar-color: transparent transparent !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: transparent !important; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: transparent !important; border-radius: 999px !important; }
html[data-sc-scrolling], body [data-sc-scrolling], body :focus-visible { scrollbar-color: #ffffff40 transparent !important; }
html[data-sc-scrolling]::-webkit-scrollbar-thumb, body [data-sc-scrolling]::-webkit-scrollbar-thumb, body :focus-visible::-webkit-scrollbar-thumb { background: #ffffff40 !important; }
[data-sc-scroll-more] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), #0003 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), #0003 100%);
}
@media (forced-colors: active) {
  html, body, body * { scrollbar-color: auto !important; }
  [data-sc-scroll-more] { -webkit-mask-image: none; mask-image: none; }
}

/* Shared media symbols; text labels remain available to assistive technology. */
:root {
  --sc-media-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Cpath d='m3 17 5-5 4 4 4-6 5 7'/%3E%3C/svg%3E");
  --sc-media-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m10 9 5 3-5 3z'/%3E%3C/svg%3E");
  --sc-media-audio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13M9 9l11-2'/%3E%3Cellipse cx='6' cy='18' rx='3' ry='3'/%3E%3Cellipse cx='17' cy='16' rx='3' ry='3'/%3E%3C/svg%3E");
}
.sc-media-icon, [data-app-mode]::before, [data-home-chat-mobile-mode]::before, :is(#homeChatModeLabel, #homeChatMobileModeLabel)::before {
  content: ''; display: inline-block; width: 20px; height: 20px; flex: 0 0 20px;
  background: currentColor; -webkit-mask: var(--sc-media-symbol, var(--sc-media-image)) center / contain no-repeat;
  mask: var(--sc-media-symbol, var(--sc-media-image)) center / contain no-repeat;
}
[data-media-kind="video"], [data-app-mode="video"], [data-home-chat-mobile-mode="video"], [data-mode="video"] :is(#homeChatModeLabel, #homeChatMobileModeLabel) { --sc-media-symbol: var(--sc-media-video); }
[data-media-kind="audio"], [data-app-mode="audio"], [data-home-chat-mobile-mode="audio"], [data-mode="audio"] :is(#homeChatModeLabel, #homeChatMobileModeLabel) { --sc-media-symbol: var(--sc-media-audio); }
:is(#homeChatModeLabel, #homeChatMobileModeLabel), [data-home-chat-mobile-mode] { display: inline-flex; align-items: center; gap: var(--sc-space-2); }
.home-chat.home-chat--responsive .home-chat__attachment {
  box-sizing: border-box; width: var(--sc-import-card-width); min-width: var(--sc-import-card-width);
  height: auto; min-height: 0; aspect-ratio: 3 / 4; flex: 0 0 var(--sc-import-card-width);
}
.home-chat.home-chat--responsive .home-chat__attachment-items { align-items: center; }
.home-chat.home-chat--responsive .home-chat__attachments { align-items: center; }

/* Paid Midjourney result actions shared by Studio and image workspaces. */
.sc-mj-actions { display: grid; gap: var(--sc-space-3); margin-block: var(--sc-space-4); }
.sc-mj-actions p { margin: 0; color: var(--sc-color-muted); }
.sc-mj-actions__row { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); }
.sc-mj-actions__row .sc-button { min-height: 44px; white-space: normal; }

/* Shared credit currency artwork; adjacent text supplies the accessible label. */
.sc-credit-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background: url('https://media.sugarcube.art/vps-media/images/brand/credit-coin.svg') center / contain no-repeat;
}

/* Shared generation specifications; the homepage and landing workspaces use one panel. */
.home-specifications { flex:0 0 auto; min-width:0; }
.home-specifications[hidden],.home-specifications__section[hidden] { display:none!important; }
.sc-parameter-row[data-grouped-parameters] > .sc-sr-only { position:absolute!important; width:1px!important; min-width:0!important; height:1px!important; padding:0!important; border:0!important; clip-path:inset(50%); overflow:hidden; }
.sc-parameter-row[data-grouped-parameters] > :not(.home-specifications) > :is(.sc-label,.home-chat__mobile-field-label) { position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.model-workspace .sc-parameter-row[data-grouped-parameters] { align-items:center; }
.home-specifications__trigger { font-size:var(--sc-font-size-sm); white-space:nowrap; }
.home-specifications__panel { position:fixed; inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; width:min(32rem,calc(100vw - var(--sc-space-8))); max-height:calc(100dvh - var(--sc-space-8)); box-sizing:border-box; padding:var(--sc-space-4); overflow-y:auto; border:1px solid var(--sc-color-border); border-radius:var(--sc-radius-lg); background:var(--sc-color-surface); color:var(--sc-color-text); box-shadow:var(--sc-shadow-lg); }
@supports (position-anchor:--grouped-parameters) {
  .home-specifications__panel:not(.is-centered) { top:auto; bottom:anchor(top); left:anchor(left); transform:none; margin-bottom:var(--sc-space-2); position-try-fallbacks:flip-block,flip-inline; }
}
.home-specifications__panel:popover-open { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sc-space-4); }
.home-specifications__title { min-width:0; margin:0; padding-right:var(--sc-space-16); font-weight:600; overflow-wrap:anywhere; }
.home-specifications__section { min-width:0; }
.home-specifications__section h2 { overflow-wrap:anywhere; }
.home-specifications__panel .model-picker__close { position:absolute; top:var(--sc-space-2); right:var(--sc-space-2); }
.home-specifications__section h2 { margin:0 0 var(--sc-space-2); color:var(--sc-color-muted); font:600 var(--sc-font-size-sm)/1.4 var(--sc-font-sans); }
.home-specifications__options { display:grid; grid-template-columns:repeat(auto-fit,minmax(4rem,1fr)); gap:var(--sc-space-2); }
.home-specifications__option { min-height:var(--sc-control-height); min-width:0; padding:var(--sc-space-2); border:1px solid var(--sc-color-border); border-radius:var(--sc-radius-md); color:var(--sc-color-muted); background:var(--sc-color-surface); font:600 var(--sc-font-size-sm)/1.4 var(--sc-font-sans); cursor:pointer; }
.home-specifications__option:hover,.home-specifications__option[aria-pressed="true"] { color:var(--sc-color-brand-800); border-color:var(--sc-color-brand-500); background:var(--sc-color-brand-50); }
.home-specifications__option:focus-visible { outline:2px solid var(--sc-color-focus); outline-offset:2px; }
.home-specifications__option:disabled { opacity:.5; cursor:not-allowed; }
@media(max-width:767px) { .home-specifications__panel,.home-specifications__panel:not(.is-centered) { position-anchor:auto; transform:none; inset:auto var(--sc-space-4) var(--sc-space-4); margin:0; width:auto; max-height:70dvh; } }

.home-specifications__options[data-parameter-group="duration"] { grid-template-columns:auto minmax(0,1fr); align-items:center; }
.home-specifications__options output { color:var(--sc-color-text); font-weight:600; }
.home-specifications__options input[type="range"] { width:100%; min-width:0; min-height:var(--sc-control-height); accent-color:var(--sc-color-brand-600); }

/* Creator opts into the same compact desktop specifications as Studio. */
.home-specifications[data-creator-parameters] .home-specifications__ratio-icon { display:none; }
@media(min-width:768px) {
  .home-specifications[data-creator-parameters] .home-specifications__trigger { width:auto; min-width:0; height:var(--sc-control-height); min-height:var(--sc-control-height); padding:0 var(--sc-space-3); gap:var(--sc-space-2); border-radius:var(--sc-radius-md); background:var(--sc-color-control-hover); font-size:.75rem; font-weight:500; }
  .home-specifications[data-creator-parameters] .home-specifications__panel { width:min(20rem,calc(100vw - var(--sc-space-8))); padding:var(--sc-space-3); gap:var(--sc-space-4); border-color:var(--sc-color-border-strong); border-radius:var(--sc-radius-lg); background:var(--sc-color-popover); box-shadow:var(--sc-shadow-popover); }
  .home-specifications[data-creator-parameters] .home-specifications__title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .home-specifications[data-creator-parameters] .model-picker__close { display:none; }
  .home-specifications[data-creator-parameters] .home-specifications__section + .home-specifications__section { padding-top:var(--sc-space-3); border-top:1px solid var(--sc-color-border); }
  .home-specifications[data-creator-parameters] .home-specifications__section h2 { font-size:.75rem; font-weight:600; }
  .home-specifications[data-creator-parameters] .home-specifications__options[data-parameter-group="ratio"] { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .home-specifications[data-creator-parameters] .home-specifications__options[data-parameter-group="quality"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-specifications[data-creator-parameters] .home-specifications__options[data-parameter-group="outputCount"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .home-specifications[data-creator-parameters] .home-specifications__option { display:grid; min-height:3.5rem; place-items:center; gap:var(--sc-space-2); padding:var(--sc-space-2); border-color:var(--sc-color-border-strong); border-radius:var(--sc-radius-md); background:var(--sc-color-control); font-size:.75rem; font-weight:500; line-height:1.35; }
  .home-specifications[data-creator-parameters] [data-parameter-group="ratio"] .home-specifications__option { grid-template-columns:minmax(0,1fr); grid-template-rows:var(--sc-space-6) auto; align-content:center; min-height:4.75rem; text-align:center; }
  .home-specifications[data-creator-parameters] .home-specifications__ratio-icon { display:block; width:var(--sc-space-6); height:var(--sc-space-6); }
  .home-specifications[data-creator-parameters] .home-specifications__option:hover:not(:disabled) { color:var(--sc-color-ink); border-color:var(--sc-color-subtle); background:var(--sc-color-control-hover); }
  .home-specifications[data-creator-parameters] .home-specifications__option[aria-pressed="true"] { color:var(--sc-color-brand-900); border-color:var(--sc-color-selected-border); background:var(--sc-color-selected); box-shadow:var(--sc-shadow-control); }
}

/* v5b supplement: model search and its real catalog empty state. */
.model-picker__dialog[data-model-picker-searchable] { grid-template-rows:auto auto minmax(0,1fr) auto; }
.model-picker__search { position:relative; grid-column:1 / -1; padding:8px 8px 6px; margin:-4px -4px 6px; background:#2f241c; }
.model-picker__search::before { content:""; position:absolute; inset-inline-start:21px; top:21px; width:11px; height:11px; border:1.5px solid var(--sc-color-muted); border-radius:50%; pointer-events:none; }
.model-picker__search::after { content:""; position:absolute; inset-inline-start:31px; top:31px; width:6px; border-top:1.5px solid var(--sc-color-muted); transform:rotate(45deg); pointer-events:none; }
.model-picker__search input { width:100%; min-width:0; height:40px; padding-block:0; padding-inline:38px 12px; border:1px solid var(--sc-color-border); border-radius:var(--sc-radius-md); background:var(--sc-color-control); color:var(--sc-color-ink); font:400 13.5px/1.4 var(--sc-font-sans); }
.model-picker__search input::placeholder { color:var(--sc-color-muted); }
.model-picker__search input:focus-visible { outline:2px solid var(--sc-color-brand-600); outline-offset:2px; }
.model-picker__empty { grid-column:1 / -1; padding:26px 16px 22px; text-align:center; color:var(--sc-color-muted); font:400 13px/1.5 var(--sc-font-sans); }
.model-picker__empty strong { display:block; margin-bottom:4px; color:var(--sc-color-ink); font-size:14px; }
.model-picker__empty p { margin:0 0 12px; }
.model-picker__empty button { min-height:40px; padding:8px 14px; border:1px solid var(--sc-color-border); border-radius:var(--sc-radius-md); background:transparent; color:var(--sc-color-ink); font:600 12px/1.4 var(--sc-font-sans); cursor:pointer; }
.model-picker__empty button:hover { background:var(--sc-color-control-hover); }
.model-picker__group-toggle[aria-disabled="true"] { cursor:default; }
.model-picker__group-toggle[aria-disabled="true"]::after { visibility:hidden; }
.model-picker__backdrop[data-presentation="dropdown"] .model-picker__dialog[data-model-picker-searchable] { grid-template-rows:auto minmax(0,1fr) auto; }
@media(max-width:640px) { .model-picker__backdrop[data-presentation="sheet"] .model-picker__dialog[data-model-picker-searchable] { grid-template-rows:auto auto auto minmax(0,1fr) auto; } }

/* Arabic uses the same approved sizes and colors, with joined glyphs and
   sufficient title leading. The fallback fonts are local, so switching the
   interface never requires a third-party font request. */
html:lang(ar) {
  --sc-font-sans: Inter, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --sc-font-display: "Space Grotesk", Inter, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --sc-leading-tight: 1.3;
  --sc-hero-title-leading: 1.35;
}
html:lang(ar) :is(h1, h2, h3, h4, button, label, summary, [data-i18n]):lang(ar) { letter-spacing: normal; }

/* Preserve the order of machine-readable values and physical media timelines.
   No image, canvas, video, or brand artwork is geometrically mirrored. */
html[dir="rtl"] :is(input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[inputmode="numeric"], input[autocomplete="one-time-code"], pre, code, kbd, samp, .sc-model-name, .gh-dd-email, .footer-contact, .auth-code-input-row, .sc-audio-player, .sc-audio-mini, .home-task__media-navigation, .model-task__media-navigation, video, audio, input[type="range"], [data-sc-direction="ltr"]) { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] :is(input[type="email"], input[type="url"], input[type="tel"], input[type="number"], pre) { text-align: left; }
html[dir="rtl"] :is(textarea, [contenteditable="true"]) { unicode-bidi: plaintext; }
html[dir="rtl"] .text-left:dir(rtl) { text-align: right; }
html[dir="rtl"] .text-right:dir(rtl) { text-align: left; }
html[dir="rtl"] .ml-auto:dir(rtl) { margin-left: 0; margin-right: auto; }
html[dir="rtl"] :is(.model-picker__group-toggle, .home-chat__model-group-toggle):not([aria-expanded="true"])::after { transform: rotate(90deg); }
html[dir="rtl"] .model-picker__search::after { transform: rotate(-45deg); }
html[dir="rtl"] :is(.auth-verify-back a > svg, .home-tool-card__arrow, .model-related__arrow > svg) { transform: scaleX(-1); }

/* These galleries use physical scroll coordinates and retain chronological
   media order; each card's localized copy still follows the interface. */
html[dir="rtl"] :is(.home-mobile-featured__track, .home-task__media-track, .model-task__media-track, .home-chat__audio-starters) { direction: ltr; }
html[dir="rtl"] :is(.home-mobile-featured__track, .home-task__media-track, .model-task__media-track, .home-chat__audio-starters) > * { direction: rtl; }
html[dir="rtl"] .sc-has-hero-backdrop > .sc-hero-backdrop { left:calc(50% + var(--sc-sidebar-width, 0px)/2); }
html[dir="rtl"] .sc-error-page { margin-left:0; margin-right:calc(-1 * var(--sc-sidebar-width,0px)); }
@media (min-width:768px) {
  html[dir="rtl"] .sc-audio-mini { left:24px; right:calc(var(--sc-sidebar-width,80px) + 24px); }
}